yQuerify Script / Bookmarklet Generator

This is a script/bookmarklet generator, which then uses an asynchronous conditional resource loader, to sequentially load additional JavaScript library dependencies of your choosing, and finally your own script, into web sites in order to enhance them for your specific preferences.

by Terry Young

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/modernizr/2.6.2/modernizr.min.js"></script>
<p>yQuerify Script / Bookmarklet Generator
  | <a href="http://terryyoung.blogspot.hk/2013/03/yquerify-hacking-with-more-than-just.html" target="_blank">What is this?</a>
  | <a href="http://terryyoung.blogspot.hk/2013/03/yquerify-follow-up-script-bookmarklet.html" target="_blank">How to use this?</a>
</p>
<p>Credits: <a href="http://yepnopejs.com/" target="_blank">yepnope</a>, 
  <a href="http://fmarcia.info/jsmin/test.html" target="_blank">JS Minifier</a>,
  <a href="http://www.paulund.co.uk/css-buttons-with-icons-but-no-images" target="_blank">CSS Buttons</a>
  CDN links: 
  <a href="http://cdnjs.com" target="_blank">CDNJS</a>, 
  <a href="https://developers.google.com/speed/libraries/devguide" target="_blank">Google CDN</a>,
  <a href="http://www.asp.net/ajaxlibrary/cdn.ashx" target="_blank">Microsoft Ajax CDN</a>
</p>
<div class="generator">
    <div class="entries">
        <div class="entry">
            <label>Host path:</label>
            <input type="text" class="root" />
            
            <label style="margin-left:8px;">Relative path:</label>
            <input type="text" class="script" />
                
            <button class="buttons delete">Remove</button>
            <button class="buttons add">Add</button>
        </div>
    </div>

    <button class="buttons save">Generate</button>
</div>
<div class="result">
    <br />
    <a class="bookmarklet" href="#">Generated Bookmarklet</a>
    <br /><br />
    Generated script:<br /><br/>
<textarea class="result"></textarea>
</div>

CSS

body {
    font: bold 8pt Arial, Helvetica;
    background-color:#343434;
    color:#efefef;
}
a {
    color:#00DDFF;
    text-decoration:none;
}
.result {
    width:100%;
    height:180px;
}
input[type=text] {
    width:180px;
}
.entry {
    background-color:#343434;
    padding:5px;
    cursor:move;
    border-bottom:1px dotted #898989;
}
.entry:hover {
    background-color:#454545;
}
/**
 * @url http://www.paulund.co.uk/playground/demo/css_button_icons_no_images/
 */
.buttons
{
	display: inline-block;
	white-space: nowrap;
background: #eeeeee; /* Old browsers */
background: -moz-linear-gradient(top, #eeeeee 0%, #eeeeee 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#eeeeee), color-stop(100%,#eeeeee)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #eeeeee 0%,#eeeeee 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #eeeeee 0%,#eeeeee 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, #eeeeee 0%,#eeeeee 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#eeeeee',GradientType=0 ); /* IE6-9 */
background: linear-gradient(top, #eeeeee 0%,#eeeeee 100%); /* W3C */
	border: 1px solid #a1a1a1;
	padding: 0 1.5em;
	margin: 0.2em;
	font: bold 1em/2em Arial, Helvetica;
	text-decoration: none;
	color: #333;
	text-shadow: 0 1px 0 rgba(255,255,255,.8);
	-moz-border-radius: .2em;
	-webkit-border-radius: .2em;
	border-radius: .2em;
	-moz-box-shadow: 0 0 1px 1px rgba(255,255,255,.8) inset, 0 1px 0 rgba(0,0,0,.3);
	-webkit-box-shadow: 0 0 1px 1px rgba(255,255,255,.8) inset, 0 1px 0 rgba(0,0,0,.3);
	box-shadow: 0 0 1px 1px rgba(255,255,255,.8) inset, 0 1px 0 rgba(0,0,0,.3);
}

.buttons:hover
{
background: #ffffff; /* Old browsers */
background: -moz-linear-gradient(top, #ffffff 0%, #e5e5e5 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#e5e5e5)); /*...

JavaScript

$(document).ready(function() {
    // Look ma, no IDs ;)
    var $generator = $('div.generator'),
        $result = $('div.result'),
        $bookmarklet = $result.find('a.bookmarklet'),
        $text = $result.find('textarea.result');
    
    function AddRemoveButtons () {
        var $entries = $('div.entries'),
            $addButtons = $entries.find('button.add'),
            $removeButtons = $entries.find('button.delete');

        if ($entries.find('div.entry').length == 1) {
            $removeButtons.hide();
        } else {
            $addButtons.hide();
            $removeButtons.show();
        }
        
        $addButtons.filter(':last').show();
        $result.hide();
    };
    
    $generator
        .on('click', 'button.add', function () {
            var $this = $(this),
                $entry = $this.closest('div.entry'),
                $newEntry = $entry.clone(),
                $input = $newEntry.find('input.script'),
                $entries = $entry.closest('div.entries');
          
            $entries.append($newEntry);
            $input.val('').focus();
          
            AddRemoveButtons();
        })
        .on('click', 'button.delete', function () {
            var $this = $(this),
                $entry = $this.closest('div.entry');
            $entry.remove();        
            AddRemoveButtons();
        })
        .on('click', 'button.save', function () {
            var $entries = $('div.entry'),
                J = [],
                Q = [];

            $entries.each(function (i, entry) {
                var $entry = $(entry),
                    $root = $entry.find('input.root'),
                    $script = $entry.find('input.script'),
                    root = $.trim($root.val()),
                    script = $.trim($script.val()),
                    j = $.inArray(root,J),
                    q = $.inArray(script,Q),
                    result = '',
                    storage = '',
                    def =...