CE QA Link Builder

// Creates a modal that builds out your QA links for you
// Create a new Bookmark, and use the code below as the URL (name can be anything)

javascript:(function(){injectjQuery=function(){jq=document.createElement("div"),html="<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css' crossorigin='anonymous'><script src='https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js' integrity='sha384-a5N7Y/aK3qNeh15eJKGWxsqtnX/wWdSZSKp+81YjTmS15nvnvxKHuzaWwXHDli+4' crossorigin='anonymous'><\/script>",jq.innerHTML=html.replace("/","/"),document.getElementsByTagName("head")[0].appendChild(jq)},injectBootstrap=function(){bs=document.createElement("div"),html="<script src='https://code.jquery.com/jquery-3.2.1.slim.min.js' integrity='sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN' crossorigin='anonymous'><\/script><script src='https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js' integrity='sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q' crossorigin='anonymous'><\/script>",bs.innerHTML=html,document.getElementsByTagName("head")[0].appendChild(bs)},rebuildTable=function(){baseUrl=getBaseUrl(),otherParams=getOtherParams(),experiences=getExperiences(),theadHtml='<thead><tr><th scope="col"></th>',experiences.forEach(function(e){theadHtml+='<th scope="col">'+e+"</th>"}),theadHtml+="</tr></thead>",pages=getPages(),tbodyHtml="<tbody>",pages.forEach(function(e){tbodyHtml+='<tr><th scope="row">'+e+"</th>",experiences.forEach(function(n){tbodyHtml+='<td><a class="link" target="_blank" href="'+(baseUrl+e)+"?lp="+n+otherParams+'">Link</a>\n<input type="checkbox">\n</td>'}),tbodyHtml+="</tr>"}),tbodyHtml+="</tbody>",document.getElementById("link-builder-table").innerHTML=theadHtml+tbodyHtml},getBaseUrl=function(){return document.getElementById("base-url").value.split(" ")},getExperiences=function(){return document.getElementById("experiences").value.split(" ")},getPages=function(){return document.getElementById("pages").value.split(" ")},getOtherParams=function(){return document.getElementById("other-params").value},editBaseUrl=function(){newVal=prompt("Enter a new base url (including the trailing slash at the end):\n\nEx:\nhttps://fios.verizon.com/"),newVal=newVal||"http://fios.verizon.com/",document.getElementById("base-url").value=newVal,document.getElementById("base-url-label").textContent=newVal,rebuildTable()},editPages=function(){newVal=prompt("Enter a space-separated list of pages:\n\nEx:\nindex.html fios-plans.html fios-internet.html"),document.getElementById("pages").value=newVal,rebuildTable()},editExperiences=function(){newVal=prompt("Enter a space-separated list of experiences:\n\nEx:\n1762 1762CHAT 1783 1786"),document.getElementById("experiences").value=newVal,rebuildTable()},editUrlParams=function(){newVal=prompt('Enter the string for additional URL parameters \n(that will appear after "?lp=####"):\n\nEx:\n&current_ts=11/25/2017&sku_debug=1&show_skus=1'),document.getElementById("other-params").value=newVal,document.getElementById("other-params-label").textContent=newVal||"None",rebuildTable()},initialMarkup='<div class="modal-link-builder--container">\n    <style type="text/css">\n        a {\n            color: blue; }\n        a:visited {\n            color: purple; }\n\n        .list-group-item a {\n            padding: 0 12px; }\n\n        .link {\n            padding: 6px 12px; }\n\n        .modal-link-builder--container .row {\n            max-width: 100% !important; }\n        .modal-link-builder--container th {\n            font-size: 16px; \n            font-weight: bold; }\n\n        .modal-link-builder--container {\n            background: rgba(0, 0, 0, 0.8);\n            position: fixed;\n            top: 0;\n            left: 0;\n            width: 100%;\n            height: 100%;\n            z-index: 99999; }\n\n        .modal-link-builder--content {\n            position: absolute;\n            background: white;\n            padding: 40px 60px;\n            top: 50%;\n            left: 50%;\n            transform: translate(-50%, -50%);\n            width: 80%;\n            min-width: 500px;\n            max-width: 2000px;\n            border-radius: 4px;\n            height: auto; }\n\n        .pull-right a {\n            padding-left: 0; }\n    </style>\n    <div class="modal-link-builder--content">\n        <div class="row">\n            <h2>CE QA Link Builder</h2>\n            <h2></h2>\n        </div>\n        <ul class="row settings list-group">\n            <li class="list-group-item">\n                <div class="pull-left">\n                    <input id="base-url" name="base-url" type="hidden" value="https://fios.verizon.com/" />\n                    <small class="title">Base Url</small>\n                    <p><mark id="base-url-label">https://fios.verizon.com/</mark></p>\n                    <small><a href="#" onclick="editBaseUrl()">Change <span class="glyphicon glyphicon-pencil"></span></a></small>\n                </div>\n                <div class="pull-right">\n                    <input id="other-params" name="base-url" type="hidden" value="" />\n                    <small class="title">Other Params Included</small>\n                    <p><mark id="other-params-label">None</mark></p>\n                    <small><a href="#" onclick="editUrlParams()">Include other URL params (like "current_ts") <span class="glyphicon glyphicon-pencil"></span></a></small>\n                </div>\n                <div class="clearfix"></div>\n            </li>\n            <li class="list-group-item">\n                <input id="pages" name="pages" type="hidden" value="index.html" />\n                <small><a href="#" onclick="editPages()">Edit Pages <span class="glyphicon glyphicon-pencil"></span></a></small>\n                <input id="experiences" name="experiences" type="hidden" value="1700 1702" />\n                <small><a href="#" onclick="editExperiences()">Edit Experiences <span class="glyphicon glyphicon-pencil"></span></a></small>\n            </li>\n        </ul>\n        <table class="table table-hover" id="link-builder-table">\n        </table>\n    </div>\n</div>',modalEle=document.createElement("div"),modalEle.innerHTML=initialMarkup,document.getElementsByTagName("body")[0].appendChild(modalEle),setTimeout(injectjQuery,200),setTimeout(injectBootstrap,400),setTimeout(rebuildTable,450);})();