JSFiddle - React, Tailwind, and code Playground

by Graham Dixon

HTML

<h3>Dom Outlining</h3>
   

<body>
    <h1 id="start">Start Dom Select</h1>

     <div id="test">
    <p>My first paragraph.</p>
    <div class="first class">
        <p> This is a division.</p>
    </div>
    </div>
</body>

JavaScript

// Wrap the plugin definition in a callback bubble so we can bind
// it to the dollar sign.
(function( $ ){
    // This jQuery plugin creates proxied event handlers that
    // consult with an additional conditional callback to see if
    // the original event handler should be executed.
    $.fn.bindIf = function(
        eventType,
        eventHandler,
        ifCondition
        ){
 
        // Create a new proxy function that wraps around the
        // given bind callback.
        var proxy = function( event ){
 
            // Execute the IF condition callback first to see if
            // the event handler should be executed.
            if (ifCondition()){
 
                // Pass the event onto the original event
                // handler.
                eventHandler.apply( this, arguments );
 
            }
 
        };
 
        // Bind the proxy method to the target.
        this.bind( eventType, proxy );
 
        // Return this to keep jQuery method chaining.
        return( this );
    };
 
})( jQuery );
/**
 * Firebug/Web Inspector Outline Implementation using jQuery
 * Tested to work in Chrome, FF, Safari. Buggy in IE ;(
 * Andrew Childs <[email protected]>
 *
 * Example Setup:
 * var myClickHandler = function (element) { console.log('Clicked element:', element); }
 * var myDomOutline = DomOutline({ onClick: myClickHandler });
 *
 * Public API:
 * myDomOutline.start();
 * myDomOutline.stop();
 */
var DomOutline = function (options) {
    options = options || {};

    var pub = {};
    var self = {
        opts: {
            namespace: options.namespace || 'DomOutline',
            borderWidth: options.borderWidth || 2,
            onClick: options.onClick || false
        },
        keyCodes: {
            BACKSPACE: 8,
            ESC: 27,
            DELETE: 46
        },
        active: false,
        initialized: false,
        elements: {}
    };

    function writeStylesheet(css) {
        var element =...