Fix and format examples

#14
Juicy · Jan 20, 2016 · 188c75b · 188c75b
1 parent 38a987a
commit 188c75b
Show file tree

Hide file tree

Showing 14 changed files with 234 additions and 239 deletions.
diff --git a/examples/basic_file.html b/examples/basic_file.html
@@ -1,22 +1,22 @@
-<!doctype html>
+<!DOCTYPE html>
 <html lang="en">
 <head>
-  <meta charset="utf-8">
-  <title>&lt;juicy-html&gt; basic partial from file</title>
-  <script src="../../webcomponentsjs/webcomponents.js"></script>
-  <link rel="stylesheet" href="//juicy.github.io/juicy-tile-list/examples/github-markdown.css">
-  <link rel="import" href="../juicy-html.html">
-  <style>
-    body {
-      font-family: Helvetica, Arial, sans-serif;
-      color: #333;
-      padding: 2em;
-    }
-  </style>
+    <meta charset="utf-8">
+    <title>&lt;juicy-html&gt; basic partial from file</title>
+    <script src="../../webcomponentsjs/webcomponents.js"></script>
+    <link rel="stylesheet" href="//juicy.github.io/juicy-tile-list/examples/github-markdown.css">
+    <link rel="import" href="../juicy-html.html">
+    <style>
+        body {
+            font-family: Helvetica, Arial, sans-serif;
+            color: #333;
+            padding: 2em;
+        }
+    </style>
 </head>
 <body class="markdown-body">
-<template is="juicy-html" content="./partials/basic.html"></template>
-<h2>code</h2>
+    <template is="juicy-html" content="./partials/basic.html"></template>
+    <h2>code</h2>
 <pre><code>&lt;template is="juicy-html" content="./partials/basic.html"&gt;&lt;/template&gt;</code></pre>
 </body>
 </html>
diff --git a/examples/basic_inline.html b/examples/basic_inline.html
@@ -1,26 +1,22 @@
-<!doctype html>
+<!DOCTYPE html>
 <html lang="en">
 <head>
-  <meta charset="utf-8">
-  <title>&lt;juicy-html&gt; basic inline partial</title>
-  <script src="../../webcomponentsjs/webcomponents.js"></script>
-  <link rel="stylesheet" href="//juicy.github.io/juicy-tile-list/examples/github-markdown.css">
-  <link rel="import" href="../juicy-html.html">
-  <style>
-    body {
-      font-family: Helvetica, Arial, sans-serif;
-      color: #333;
-      padding: 2em;
-    }
-  </style>
+    <meta charset="utf-8">
+    <title>&lt;juicy-html&gt; basic inline partial</title>
+    <script src="../../webcomponentsjs/webcomponents.js"></script>
+    <link rel="stylesheet" href="//juicy.github.io/juicy-tile-list/examples/github-markdown.css">
+    <link rel="import" href="../juicy-html.html">
+    <style>
+        body {
+            font-family: Helvetica, Arial, sans-serif;
+            color: #333;
+            padding: 2em;
+        }
+    </style>
 </head>
 <body class="markdown-body">
-  <template is="juicy-html" content="<h1>Hello World! </h1>
-  <p>I'm <strong>inline</strong> content.</p>"></template>
-  <h2>code</h2>
-  <pre><code>&lt;template is="juicy-html" content="
-    &lt;h1&gt;Hello World! &lt;/h1&gt;
-    &lt;p&gt;I'm &lt;strong&gt;inline&lt;/strong&gt; content.&lt;/p&gt;
-  "&gt;&lt;/template&gt;</code></pre>
+    <template is="juicy-html" content="<h1>Hello World!</h1> <p>I'm <strong>inline</strong> content.</p>"></template>
+    <h2>code</h2>
+    <pre><code>&lt;template is="juicy-html" content="&lt;h1&gt;Hello World!&lt;/h1&gt; &lt;p&gt;I'm &lt;strong&gt;inline&lt;/strong&gt; content.&lt;/p&gt;"&gt;&lt;/template&gt;</code></pre>
 </body>
 </html>
diff --git a/examples/components/my-app.html b/examples/components/my-app.html
@@ -1,49 +1,45 @@
-
 <link rel="import" href="../../../polymer/polymer.html">
 <link rel="import" href="../../juicy-html.html">
 
 <link rel="stylesheet" href="../../../paper-menu/paper-menu-shared.css">
 <link rel="stylesheet" href="../../../paper-item/paper-item-shared.css">
 
-<!-- <link rel="import" href="../../../paper-icons/paper-icons.html">-->
 <link rel="import" href="../../../paper-menu/paper-menu.html">
 <link rel="import" href="../../../paper-item/paper-item.html">
 <link rel="import" href="../../../paper-menu-button/paper-menu-button.html">
 <link rel="import" href="../../../paper-icon-button/paper-icon-button.html">
 <link rel="import" href="../../../iron-icons/iron-icons.html">
 
 <dom-module id="my-app">
-  <template>
-    <h2>My-app custom element</h2>
-    <style>
-      paper-menu {
-        width: 300px;
-      }
-    </style>
-    <template is="juicy-html" content$="{{viewmodel.html}}" model="{{viewmodel}}" on-stamped="stamped"></template>
-
-  </template>
+    <template>
+        <h2>My-app custom element</h2>
+        <style>
+            paper-menu {
+                width: 300px;
+            }
+        </style>
+        <template is="juicy-html" content$="{{viewmodel.html}}" model="{{viewmodel}}" on-stamped="stamped"></template>
+    </template>
 </dom-module>
 <script>
-  Polymer({
-    is: "my-app",
-    behaviors: [Polymer.Templatizer],
-
-    ready: function() {
-      this.viewmodel= {
-        username: 'World',
-        menuItems: [
-          {label: "Item 1", icon: "add"},
-          {label: "Item 2", icon: "settings"},
-          {label: "Item 3", icon: "delete"},
-          {label: "Item 4", icon: "work"}
-        ],
-        html: './partials/page_3.html'
-      }
-    },
-    stamped: function(event){
-        // Play with Polymer's templating voodoo
-    }
+    Polymer({
+        is: "my-app",
+        behaviors: [Polymer.Templatizer],
 
-  });
+        ready: function () {
+            this.viewmodel = {
+                username: 'World',
+                menuItems: [
+                  { label: "Item 1", icon: "add" },
+                  { label: "Item 2", icon: "settings" },
+                  { label: "Item 3", icon: "delete" },
+                  { label: "Item 4", icon: "work" }
+                ],
+                html: './partials/page_3.html'
+            }
+        },
+        stamped: function (event) {
+            // Play with Polymer's templating voodoo
+        }
+    });
 </script>
diff --git a/examples/inline_markup_w_model_binding.html b/examples/inline_markup_w_model_binding.html
@@ -1,4 +1,4 @@
-<!doctype html>
+<!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="utf-8">
@@ -8,30 +8,33 @@
 
     <link rel="import" href="../juicy-html.html">
     <link rel="import" href="../../polymer/polymer.html">
-    
+
     <style>
         body {
-          font-family: Helvetica, Arial, sans-serif;
-          color: #333;
-          padding: 2em;
+            font-family: Helvetica, Arial, sans-serif;
+            color: #333;
+            padding: 2em;
         }
     </style>
 </head>
 <body class="markdown-body">
     <template is="juicy-html" content='
         All those nodes will get <code>.model</code> property with object given in model attribute.
         <template is="dom-bind">
-          <p>which can be used by <span>{{model.polymer}}</span></p>
+            <p>which can be used by <span>{{model.polymer}}</span></p>
         </template>
         <div></div>
         <script>
-          document.currentScript.previousElementSibling.innerHTML = document.currentScript.model.vanilla;
-          console.info("attached model", document.currentScript.model);
-      </script>' model='{
-        "name": "World",
-        "polymer": "Polymer&apos;s dom-bind",
-        "vanilla": "as well as by native JS <code>&amp;lt;script&amp;gt;</code> or custom elements"
-      }'>
+            var script = (document._currentScript || document.currentScript);
+            var div = script.previousElementSibling
+            div.innerHTML = script.model.vanilla;
+            console.info("attached model", script.model);
+        </script>
+        'model = '{
+            "name": "World",
+            "polymer": "Polymer&apos;s dom-bind",
+            "vanilla": "as well as by native JS <code>&amp;lt;script&amp;gt;</code> or custom elements"
+        }'>
     </template>
     <h2>Code</h2>
     <pre><code>&lt;template is="juicy-html" content='
@@ -41,14 +44,15 @@ <h2>Code</h2>
     &lt;/template&gt;
     &lt;div&gt;&lt;/div&gt;
     &lt;script&gt;
-      document.currentScript.previousElementSibling.innerHTML = document.currentScript.model.vanilla;
+      var script = (document._currentScript || document.currentScript);
+      var div = script.previousElementSibling
+      div.innerHTML = script.model.vanilla;
       console.info("attached model", document.currentScript.model);
   &lt;/script&gt;' model='{
     "name": "World",
     "polymer": "Polymer&apos;s dom-bind",
     "vanilla": "as well as by native JS &lt;code&gt;&amp;amp;lt;script&amp;amp;gt;&lt;/code&gt; or custom elements"
   }'>
 &lt;/template></code></pre>
-
 </body>
 </html>
diff --git a/examples/partials/page_1.css b/examples/partials/page_1.css
@@ -1,8 +1,8 @@
 .specialExternal {
-  font-family: Georgia, serif;
-  font-style: italic;
-  font-size: 160%;
-  vertical-align: baseline;
-  position: relative;
-  top: 0.4em;
-}
+    font-family: Georgia, serif;
+    font-style: italic;
+    font-size: 160%;
+    vertical-align: baseline;
+    position: relative;
+    top: 0.4em;
+}
diff --git a/examples/partials/page_1.html b/examples/partials/page_1.html
@@ -1,60 +1,64 @@
-<template is="dom-bind"><h1>Hello <span>{{model.username}}</span></h1></template>
-<p>This is the Page 1.
-  <button onclick="document.getElementById('test').set('model.subpage.html', './partials/page_2.html')">Press here</button>
-  to replace the template with Page 2
+<template is="dom-bind">
+    <h1>Hello <span>{{model.username}}</span></h1>
+</template>
+<p>
+    This is the Page 1.
+    <button onclick="document.getElementById('test').set('model.subpage.html', './partials/page_2.html')">Press here</button>
+    to replace the template with Page 2
 </p>
 
-<p>This page has some styles defined <span class="specialInline">inline</span> and in a separate <span
-  class="specialExternal">stylesheet</span>.</p>
+<p>
+    This page has some styles defined <span class="specialInline">inline</span> and in a separate <span class="specialExternal">stylesheet</span>.
+</p>
 
 <style>
-  p {
-    margin-top: 2em;
-  }
-
-  .specialInline {
-    font-family: Georgia, serif;
-    font-style: italic;
-    font-size: 160%;
-    vertical-align: baseline;
-    position: relative;
-    top: -0.4em;
-  }
-
-  #scriptResult {
-    font-family: Consolas, Courier, monospace;
-    font-size: 160%;
-  }
+    p {
+        margin-top: 2em;
+    }
+
+    .specialInline {
+        font-family: Georgia, serif;
+        font-style: italic;
+        font-size: 160%;
+        vertical-align: baseline;
+        position: relative;
+        top: -0.4em;
+    }
+
+    #scriptResult {
+        font-family: Consolas, Courier, monospace;
+        font-size: 160%;
+    }
 </style>
 <link rel="stylesheet" type="text/css" href="partials/page_1.css">
 
 <p>This page executes an inline script. <span id="scriptResult"></span></p>
 
 <script>
-  var seconds = 0;
-  var interval;
+    var seconds = 0;
+    var interval;
 
-  function showNumber(num) {
-    if (num < 10) {
-      return '0' + num;
-    }
-    return num;
-  }
-
-  function showTime() {
-    var elem = document.getElementById('scriptResult');
-    if (elem) {
-      elem.innerHTML = Math.floor(seconds / 60) + ':' + showNumber(seconds % 60);
-      seconds++;
+    function showNumber(num) {
+        if (num < 10) {
+            return '0' + num;
+        }
+        return num;
     }
-    else {
-      clearInterval(interval);
+
+    function showTime() {
+        var elem = document.getElementById('scriptResult');
+
+        if (elem) {
+            elem.innerHTML = Math.floor(seconds / 60) + ':' + showNumber(seconds % 60);
+            seconds++;
+        } else {
+            clearInterval(interval);
+        }
     }
-  }
 
-  showTime();
-  interval = setInterval(function () {
     showTime();
-  }, 1000);
+    interval = setInterval(function () {
+        showTime();
+    }, 1000);
 </script>
 <script src="partials/external.js"></script>
diff --git a/examples/partials/page_2.html b/examples/partials/page_2.html
@@ -1,4 +1,5 @@
 <h1>This is Page 2</h1>
 
-<button onclick="document.getElementById('test').set('model.subpage.html', './partials/page_1.html')">Return to Page 1
+<button onclick="document.getElementById('test').set('model.subpage.html', './partials/page_1.html')">
+    Return to Page 1
 </button>
diff --git a/examples/partials/page_3.html b/examples/partials/page_3.html
@@ -1,14 +1,12 @@
-<!-- <template is="dom-template"> -->
-    <h1>Hello <span>{{username}}</span></h1>
+<h1>Hello <span>{{username}}</span></h1>
 
-    <p>This partial contains <code>&lt;paper-menu&gt;</code> Custom Element</p>
+<p>This partial contains <code>&lt;paper-menu&gt;</code> Custom Element</p>
 
-    <paper-menu selected="0" theme="paper-light-theme">
-        <template is="dom-repeat" items="{{menuItems}}">
-            <paper-item>
-              <iron-icon icon="{{item.icon}}"></iron-icon>
-              <paper-item-body>{{item.label}}</paper-item-body>
-            </paper-item>
-        </template>
-    </paper-menu>
-<!-- </template> -->
+<paper-menu selected="0" theme="paper-light-theme">
+    <template is="dom-repeat" items="{{menuItems}}">
+        <paper-item>
+            <iron-icon icon="{{item.icon}}"></iron-icon>
+            <paper-item-body>{{item.label}}</paper-item-body>
+        </paper-item>
+    </template>
+</paper-menu>
diff --git a/examples/partials/page_4.html b/examples/partials/page_4.html
@@ -1,3 +1,3 @@
 <li>
-  ..and one from <code>./partials/page_4</code> partial
+    ..and one from <code>./partials/page_4</code> partial
 </li>