JSFiddle - React, Tailwind, and code Playground

by lbstr

CSS

#internalHelper{
    background: #e1eff8;
    border: 5px solid #0052A3;
    border-radius: 5px;
    -moz-border-radius: 5px;

    -moz-box-shadow: 10px 10px 5px #999;
    -webkit-box-shadow: 10px 10px 5px #999;
    box-shadow: 10px 10px 5px #999;

    padding: 10px;
    position: fixed;
    right: -0px;
    top: -0px;
    z-index: 1000;
}

#internalHelper h1{
    color: #0051A3;
    font-size: 18px;
    font-weight: bold;
    left: 17px;
    margin: 0 0 36px;
    position: relative;
    top: 15px;
}

#internalHelper .content{
    display: none;
    width: 300px;
}

JavaScript

(function($){
    $.fn.internalHelper = function(config){
        $helper = this;
        $content = $("div.content", this);

        $content.append($("<h1>" + config.header + "</h1>"));

        //    Add the helper functions
        (function(){
            $functionList = $("<ul class='helperFunctions'></ul>");
            var actions = config.actions;
            for(var item in actions){
                if( !actions.hasOwnProperty(item) ){ continue; }
                $functionList.append("<li><a href='#' title='" + actions[item].opTitle + "'>" + actions[item].opTitle + "</a></li>");
            }
            $content.append($functionList);
        })();

        //    Add the common symbols
        (function(){
            var commonSymbols = config.commonSymbols;

            $symbolList = $("<ul class='commonSymbols'></ul>");
            for(var symbol in commonSymbols){
                if( !commonSymbols.hasOwnProperty(symbol) ){ continue; }

                $symbolList.append(
                    "<li><a href='?symbol="
                    + commonSymbols[symbol]
                    + "'>"
                    + commonSymbols[symbol].toUpperCase()
                    + "</a>" );
            }

            $content.append($symbolList);
        })();
        

        $helper.mouseenter(function(){
            $content.show(10000);
        })
        .mouseleave(function(){
            $content.hide(10000, function(){$(this).css('display', '')});
        });

        return this;
    };

    $(document).ready(function(){
        $("body").append("<div id='internalHelper'><div class='content'></div></div>");
        $("#internalHelper").internalHelper({
            header: "TTCBOPA"

            , actions: [
            //    This is an array of operations
            //    objects that we pass to the helper
            {
                opTitle: "Tiaa-Cref QA"
                , opDescription: "Switch to Tiaa-Cref's QA Environment"
                ,...