Load/Unload String Style Using Jquery

by lid0

HTML

<span>Green Span</span>
<div>Red Div</div>

<pre class='onebox' style=''>
    <code class='hljs' style=''>
<ol  class='start' start="4" style='counter-reset: li-counter 4 ;'>
<li>  GoodPost = 7</li>
<li>  GreatPost = 8</li>
<li>  Autobiographer = 9</li>
<li>  Editor = 10</li>
<li>  FirstLike = 11</li>
<li class="selected">  FirstShare = 12</li>
<li>  FirstFlag = 13</li>
<li>  FirstLink = 14</li>
<li>  FirstQuote = 15</li>
<li>  ReadGuidelines = 16</li>
<li>  Reader = 17</li>
<li>  NiceTopic = 18</li>
<li>  GoodTopic = 19</li>
<li>  GreatTopic = 20</li>
<li>  NiceShare = 21</li>
<li>  GoodShare = 22</li>
</ol>
    </code>
</pre>

JavaScript

cssRule = "pre.onebox ol{background:#EBEBEB;padding-top:5px;padding-bottom:5px;overflow:auto;color:#fff;word-break:break-word;padding-left:5px;margin:0;counter-reset:li-counter;list-style-type:none}pre.onebox ol li{background:#fff;font-size:small;color:#000;border-bottom:1px solid #E3E3E3;width:inherit;padding-left:45px;position:relative}pre.onebox ol li.selected{background-color:#F8EEC7}pre.onebox ol li:before{background-color:#cfcfcf;position:absolute;left:0;width:40px;display:inline-block;color:#fff;font-weight:700;text-align:right;z-index:1;overflow:hidden;content:counter(li-counter);counter-increment:li-counter}pre.onebox code{white-space:normal;padding:0;margin:0;position:relative}pre.onebox{white-space:normal}";


(function ($){
    //Lidlanca
    if(!!$.Onebox) {return }
    $.Onebox = new function (){
        var loaded_styles = {};
        var dom_id_prefix_ = "onebox_";
        this.loadStyle = function(styleName,styleContent){
            if (!loaded_styles.hasOwnProperty(styleName)){
                loaded_styles[styleName] = {content:styleContent,added:false};
                this.appendStyle(styleName);
            } else {
                if (loaded_styles[styleName].added == false){
                    console.log(styleContent);
                    loaded_styles[styleName].content = styleContent;
                    this.appendStyle(styleName);
                } else {
                   //style already loaded
                }
            }
        }
        this.listLoadedStyles = function(){
            console.log(loaded_styles);
        }
        this.removeStyle = function(styleName){
            if (loaded_styles.hasOwnProperty(styleName)){
              loaded_styles[styleName].added = false;
              $("#" + dom_id_prefix_ +styleName).remove();
            } else {
            //style not exists
            }
        }
        this.appendStyle = function (styleName){
         if (!loaded_styles.hasOwnProperty(styleName)) return  
  ...