Querystring viewer

by russau

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-url-parser/2.3.1/purl.min.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<!-- * two way updates, modify querystring vs modify tables of values * parameters for how values are escapes * add / remove rows from value * reorder parameters * keep the url in sync with the document * cool stuff - fade the relevant portion of the table/querystring when it is changed * open key val http://jsfiddle.net/larsi/h8Mbg/ -->
<div class="container theme-showcase" role="main">
    <div contenteditable="true" id="txtQs"></div>
    <table id='values' class="table table-hover">
        <tbody>
            <tr>
                <th>Name</th>
                <th>Value</th>
            </tr>
        </tbody>
    </table>
</div>

CSS

div[contenteditable] {
    border: 1px solid black;
    max-height: 200px;
    overflow: auto;
}
.qpair:hover {
    background-color:#f5f5f5;
}

JavaScript

var qs = 'https://accounts.google.com/ServiceLogin?service=lso&passive=1209600&continue=https://accounts.google.com/o/openid2/auth?zt%3DChRhSVhlbDY0dmJvSE1jMzl3SmZwYhIfOG01RTQ1X2syalFSRW5wNlVBUEZtMEVLWlRlbGlBSQ%25E2%2588%2599APsBz4gAAAAAUwbS18GnTG83mHC3WWB62jRB3nFndgou%26from_login%3D1%26hl%3Den-US%26as%3D-62aed20607f627aa&shdf=Ch0LEgZkb21haW4aEVN0YWNrb3ZlcmZsb3cuY29tDBIDbHNvIhSi49y1-Nw7bX1dzBwBoj3irdHb2igBMhR_ASnQCLNDqeLk4O0ICNlYuJy29A&sarp=1&scc=%F0%9F%98%90'

qs = 'https://www.amazon.com/ap/signin/187-2073321-1477426?_encoding=UTF8&openid.assoc_handle=usflex&openid.claimed_id=http%3A%2F%2Fspecs.openid.net%2Fauth%2F2.0%2Fidentifier_select&openid.identity=http%3A%2F%2Fspecs.openid.net%2Fauth%2F2.0%2Fidentifier_select&openid.mode=checkid_setup&openid.ns=http%3A%2F%2Fspecs.openid.net%2Fauth%2F2.0&openid.ns.pape=http%3A%2F%2Fspecs.openid.net%2Fextensions%2Fpape%2F1.0&openid.pape.max_auth_age=0&openid.return_to=https%3A%2F%2Fwww.amazon.com%2Fgp%2Fcss%2Fhomepage.html%3Fie%3DUTF8%26ref_%3Dgno_yam_ya';

//$('#txtQs').text(qs);

$('#txtQs').on("focusin", function () {
    $(this).find('span').attr('class', '');
});
$('#txtQs').on("focusout", function () {
    makeSpans($(this).text());
});

$('#txtQs').on("keyup", function () {
    updatetable($(this).text());
});

$("#values").on("mouseover", ".phover", function () {
    var pos = $(".phover").index(this);
    $('.qpair').eq(pos).css('background-color', '#f5f5f5');
});

$("#values").on("click", "button", function() {
  var pos = $("#values button").index(this);
    //need to deal with ? at the start of the qs
    // and I'm not removing the &
  $('.qpair').eq(pos).remove();
  $('.phover').eq(pos).remove();
 });

$("#values").on("mouseout", ".phover", function () {
    $('.qpair').css('background-color', '');
});

$("#txtQs").on("mouseover", ".qpair", function () {
    var pos = $(".qpair").index(this);
    $('.phover').eq(pos).css('background-color', '#f5f5f5');
});

$("#txtQs").on("mouseout", ".qpair", function () {
 ...