app-pages-loader

jorgecasar

by SlashBunny

HTML

<base href="https://raw-dot-custom-elements.appspot.com/jorgecasar/app-pages-loader/0.1.0/app-pages-loader/">
<script src="../webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="app-pages-loader.html">

<dom-bind id="demo">
  <template>
    <p>
      <label>Max nodes</label>
      <input value="{{maxNodes::input}}" />
    </p>
    <p>
      <label>Max history</label>
      <input value="{{maxHistory::input}}" />
    </p>
    <p>
      <label>Page</label>
      <select value="{{selected::input}}">
        <option value="view1">View 1</option>
        <option value="view2">View 2</option>
        <option value="view3">View 3</option>
        <option value="view404">View 404</option>
      </select>
    </p>
    <app-pages-loader selected="{{selected}}" fallback-selection="view404" max-nodes="{{maxNodes}}" max-history="{{maxHistory}}">
      <link rel="lazy-import" group="view1" href="./demo/components/page-test.html">
      <link rel="lazy-import" group="view2" href="./demo/components/page-test.html">
      <link rel="lazy-import" group="view3" href="./demo/components/page-test.html">
      <link rel="lazy-import" group="view404" href="./demo/components/page-test-404.html">
    </app-pages-loader>
  </template>
</dom-bind>
<script>
  var demo = document.querySelector('#demo');
  demo.selected = 'view1';

</script>