Surgical CSS Inception with KRL

CSS-Inception.krl.txt

ruleset a169x448 {
  meta {
    name "CSS-Inception"
    description <<
      Surgical CSS Inception
    >>

    author "Ed Orcutt, LOBOSLLC"
    logging on

    // --------------------------------------------
    // Test development version of Ruleset
    // http://ktest.heroku.com/a169x448
  }

  global {
     // --------------------------------------------
    // Dynamically load an external Stylesheet

    loadStylesheet = defaction(cssURL) {
      loadCode = <<
        var head=document.getElementsByTagName('head')[0];
        var new_style_sheet=document.createElement("link");
        new_style_sheet.href="#{cssURL}";
        new_style_sheet.rel="stylesheet";
        new_style_sheet.type="text/css";
        head.appendChild(new_style_sheet);
      >>;
      emit << eval(loadCode);  >>;
    };

   css <<
      .inception {
        text-align: center;
        font-weight: bold;
        margin-top: 100px;
        margin-bottom: 100px;
      }
      .ignite {
        text-align: center;
      }
    >>
  }

  // ------------------------------------------------------------------------
  rule init_demo {
    select when pageview ".*"
    pre {
      button = <<
        <div class="ignite"><button id="ignite">Inject CSS</button></div>
      >>;
      msg = <<
        <div class="inception">
          CSS Inception Demo
        </div>
      >>;
    }
    {
      append("body", msg);
      append("body", button);
      watch("#ignite", "click");
    }
  }

  // ------------------------------------------------------------------------
  rule inject_css {
    select when click "#ignite"
    {
      loadStylesheet("http://assets.lobosllc.com/css/inception.css");
    }
  }

  // ------------------------------------------------------------------------
  // Beyond here there be dragons :)
  // ------------------------------------------------------------------------
}