From 47d11839b72dfb5ece830ce8b0d06087eb5a6897 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Kus=20C=C3=A1mara?= <kcmr@users.noreply.github.com>
Date: Wed, 31 May 2017 00:03:52 +0200
Subject: [PATCH] Allow to update content dynamically and to render the content
 inside the template (#1)

* feat(*): allow to change content inside template dynamically and to render the content

* refactor(js): disconnect nodesObserver in disconnectedCallback

* fix(styles): CSS var name

* refactor(js): use arrow function instead of bind

* update docs, demo and remove failing test

* test(): with render attribute the code inside the template is rendered
---
 .gitignore                 |   3 +-
 README.md                  |  18 ++-
 bower.json                 |   3 +-
 code-sample.html           |  65 ++++++----
 demo/css/demo.css          |  67 ++++++++++
 demo/index.html            | 242 +++++++++++++++++++++++++++----------
 test/code-sample_test.html |  28 +++--
 7 files changed, 326 insertions(+), 100 deletions(-)
 create mode 100644 demo/css/demo.css

diff --git a/.gitignore b/.gitignore
index c1efe5b..20e9e81 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,2 +1,3 @@
+.DS_Store
 bower_components/
-coverage-reports/
\ No newline at end of file
+coverage-reports/
diff --git a/README.md b/README.md
index c34104f..0a91a3a 100644
--- a/README.md
+++ b/README.md
@@ -59,16 +59,25 @@ Forget to worry about spaces, indentation, HTML entities, etc.
 ## Usage
 
 The code to highlight must be provided inside a `<template>` tag.
-The `type` attribute is **optional** and it corresponds to the `class` applied to `<code>` in [highlight.js](https://highlightjs.org/).
 
 ```html
-<code-sample type="html">
+<code-sample>
   <template>
     <p>your code here...</p>
   </template>
 </code-sample>
 ```
 
+To render the code inside the template, use the boolean attribute `render`.
+
+```html
+<code-sample render>
+  <template>
+    <my-custom-element></my-custom-element>
+  </template>
+</code-sample>
+```
+
 ## Themes
 
 The component includes 6 themes that must be imported explicitly.
@@ -112,8 +121,11 @@ The following custom CSS properties are available for styling:
 | Custom property                | Description                                                  | Default      |
 |:-------------------------------|:-------------------------------------------------------------|:-------------|
 | --code-sample-font-family      | font-family applied to `<pre>` and `<code>` elements         | Operator Mono, Inconsolata, Roboto Mono, monaco, consolas, monospace         |
-| --code-sample-font-size        | font-size applied to `<pre>` and `<code>` elements           | 14px        |
+| --code-sample-font-size        | font-size applied to `<pre>` and `<code>` elements           | 14px         |
+| --code-sample-demo-padding     | padding applied to the container of the rendered code        | 0 0 20px     |
+| --code-sample-demo             | empty mixin applied to the container of the rendered code    | {}           |
 
+_Note:_ The [CSS mixin shim](https://www.polymer-project.org/2.0/docs/upgrade#css-custom-property-shim) is required to use mixins.
 
 Included themes contain custom CSS properties to set the background and text color.   
 You may need to add these CSS properties to your own themes.
diff --git a/bower.json b/bower.json
index d985047..1e67078 100644
--- a/bower.json
+++ b/bower.json
@@ -19,7 +19,8 @@
   },
   "devDependencies": {
     "web-component-tester": "^6.0.0",
-    "iron-test-helpers": "PolymerElements/iron-test-helpers#^2.0.0"
+    "iron-test-helpers": "PolymerElements/iron-test-helpers#^2.0.0",
+    "transburger-icon": "^3.0.1"
   },
   "license": "https://github.com/kcmr/code-sample/LICENSE.md",
   "homepage": "https://github.com/kcmr/code-sample/",
diff --git a/code-sample.html b/code-sample.html
index 3f30a98..d2f9cb5 100644
--- a/code-sample.html
+++ b/code-sample.html
@@ -1,4 +1,5 @@
 <link rel="import" href="../polymer/polymer-element.html">
+<link rel="import" href="../polymer/lib/utils/flattened-nodes-observer.html">
 <link rel="import" href="highlight-import.html">
 
 <dom-module id="code-sample">
@@ -17,9 +18,18 @@
         padding: 0 20px;
         line-height: 1.3;
       }
+
+      .demo:not(:empty) {
+        padding: var(--code-sample-demo-padding, 0 0 20px);
+      }
+
+      .demo {
+        @apply --code-sample-demo;
+      }
     </style>
 
-    <slot></slot>
+    <div id="demo" class="demo"></div>
+    <slot id="content"></slot>
     <pre id="code"></pre>
   </template>
   <script>
@@ -37,47 +47,56 @@
        */
       class CodeSample extends Polymer.Element {
         static get is() { return 'code-sample' }
+
         static get properties() {
           return {
-            _content: {
-              type: String,
-              observer: '_contentChanged'
-            },
-
             /**
-             * Code type. (eg.: html, js, css)
-             * Options are the same as the available classes for `<code>` tag using highlight.js
+             * Set to true to render the code inside the template.
              */
-            type: {
-              type: String
+            render: {
+              type: Boolean,
+              value: false
             }
           }
         }
 
-        constructor() {
-          super();
-        }
-
         connectedCallback() {
           super.connectedCallback();
           setTimeout(() => {
             if (this.querySelector('template')) {
-              this._content = this.querySelector('template').innerHTML;
+              this._observer = new Polymer.FlattenedNodesObserver(this.$.content, () => this._updateContent());
             } else if (this.childNodes.length) {
               console.error('<code-sample>:', 'content must be provided inside a <template> tag');
             }
           }, 1);
         }
 
-        _contentChanged(content) {
-          let code = document.createElement('code');
-          if (this.type) {
-            code.classList.add(this.type);
+        disconnectedCallback() {
+          if (this._observer) {
+            this._observer.disconnect();
+            this._observer = null;
           }
-          code.innerHTML = this._entitize(this._cleanIndentation(content));
-          this.$.code.appendChild(code);
-          hljs.highlightBlock(code);
-          this.innerHTML = '';
+        }
+
+        _updateContent() {
+          if (this._code) { this._code.parentNode.removeChild(this._code); }
+          if (this._demo) { this.$.demo.innerHTML = ''; }
+
+          let nodes = Polymer.FlattenedNodesObserver.getFlattenedNodes(this.$.content);
+          let template = [].filter.call(nodes, (node) => node.nodeType === Node.ELEMENT_NODE)[0];
+
+          if (this.render) {
+            this._demo = this.$.demo.appendChild(document.importNode(template.content, true));
+          }
+
+          this._highlight(template.innerHTML);
+        }
+
+        _highlight(str) {
+          this._code = document.createElement('code');
+          this._code.innerHTML = this._entitize(this._cleanIndentation(str));
+          this.$.code.appendChild(this._code);
+          hljs.highlightBlock(this._code);
         }
 
         _cleanIndentation(str) {
diff --git a/demo/css/demo.css b/demo/css/demo.css
new file mode 100644
index 0000000..7c85ea4
--- /dev/null
+++ b/demo/css/demo.css
@@ -0,0 +1,67 @@
+body {
+  font-family: Roboto, sans-serif;
+  background: #E6E8E8;
+  -webkit-tap-highlight-color: transparent;
+}
+
+h1 {
+  font-size: 18px;
+  font-weight: 500;
+  margin: 0 0 1em;
+}
+
+p { font-weight: 300; }
+
+code {
+  font-family: Roboto Mono, monospace;
+}
+
+code-sample {
+  --code-sample-font-family: Roboto Mono, monospace;
+}
+
+.wrapper {
+  max-width: 800px;
+  margin: 40px auto 0;
+}
+
+.wrapper > .demo {
+  margin-bottom: 40px;
+  padding: 40px;
+  background-color: #fff;
+}
+.demo-text {
+  text-align: left;
+  margin: 0 0 20px;
+  padding: 0;
+  border-bottom: 1px solid #e0e0e0;
+}
+
+.demo-btn {
+  font: inherit;
+  background-color: #EAEDED;
+  border: 0;
+  box-shadow: 0 1px 2px rgba(0,0,0,0.25);
+  height: 40px;
+  padding: 0 20px;
+  border-radius: 3px;
+}
+
+.demo-btn:active {
+  background-color: #D7DBDD;
+}
+
+.title-button {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+  margin-bottom: 20px;
+}
+
+.title-button h1 { margin-bottom: 0; }
+
+.center { text-align: center; }
+
+.toast-text { line-height: 1.5; font-family: Roboto Mono, monaco, monospace; font-size: 13px; }
+.toast-text > span { color: #E9D80E; }
+
diff --git a/demo/index.html b/demo/index.html
index 737ed95..054cbe9 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -4,78 +4,196 @@
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
     <title>code-sample demo</title>
-    <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
+    <script src="../../webcomponentsjs/webcomponents-loader.js"></script>
+    <link rel="import" href="../../transburger-icon/transburger-icon.html">
     <link rel="import" href="../themes/one-dark.html">
     <link rel="import" href="../code-sample.html">
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto+Mono|Roboto:300,400">
+    <link rel="stylesheet" href="css/demo.css">
     <style>
-      body { margin: auto; background: #1e2127; }
-      @media (min-width: 60em) {
-        body { max-width: 60%; }
-      }
-
-      code-sample { margin: 20px; }
+      code-sample + code-sample { margin-top: 20px; }
       .navy-bg { --code-sample-background: #000D25; }
-      .white-bg { --code-sample-background: #f9fbff; }
+      .white-bg { --code-sample-background: #eeeef1; }
     </style>
   </head>
   <body>
-    <code-sample>
-      <template>
-        const something = param => {
-          // comment
-        }
-      </template>
-    </code-sample>
-
-    <code-sample>
-      <template>
-        <my-component boolean-attribute>content</my-component>
-      </template>
-    </code-sample>
-
-    <code-sample>
-      <template>
-        <div class="something">
-          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet distinctio nam, possimus officia error delectus impedit libero corrupti, sunt, sapiente suscipit. Esse, quisquam tempore similique eveniet veritatis pariatur adipisci sit.</p>
+    <div class="wrapper">
+      <div class="demo">
+        <div class="demo-text">
+          <h1>HTML and inline JavaScript</h1>
         </div>
 
-        <script>
-          alert('hola');
-        </script>
-      </template>
-    </code-sample>
-
-    <code-sample class="navy-bg">
-      <template>
-        <resizable-panels>
-          <div class="panel-1">lorem...</div>
-          <div class="panel-2">ipsum...</div>
-          <div class="panel-3">dolor...</div>
-        </resizable-panels>
-      </template>
-    </code-sample>
-
-    <code-sample class="white-bg">
-      <template>
-        function algo(param) {
-          alert('helloooow');
-        }
-      </template>
-    </code-sample>
-
-    <code-sample>
-      <template>
-        .my-style { display: block; }
-
-        :host {
-          display: -webkit-box;
-          display: flex;
-          -webkit-box-sizing: border-box;
-          box-sizing: border-box;
+        <div class="demo-sample">
+          <code-sample>
+            <template>
+              <custom-element boolean-attribute>content</custom-element>
+
+              <div class="something">
+                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet distinctio nam, possimus officia error delectus impedit libero corrupti, sunt, sapiente suscipit. Esse, quisquam tempore similique eveniet veritatis pariatur adipisci sit.</p>
+              </div>
+
+              <script>
+                alert('hola');
+              </script>
+            </template>
+          </code-sample>
+        </div>
+      </div>
+
+      <div class="demo">
+        <div class="demo-text">
+          <h1>JavaScript</h1>
+        </div>
+
+        <div class="demo-sample">
+          <code-sample>
+            <template>
+              const something = param => {
+                // comment
+                let a = `${param}-something`;
+              }
+            </template>
+          </code-sample>
+        </div>
+      </div>
+
+      <div class="demo">
+        <div class="demo-text">
+          <h1>CSS</h1>
+        </div>
+
+        <div class="demo-sample">
+          <code-sample>
+            <template>
+              .my-style { display: block; }
+
+              :host {
+                display: flex;
+                box-sizing: border-box;
+              }
+
+              :host([hidden]) { display: none; }
+            </template>
+          </code-sample>
+        </div>
+      </div>
+
+      <div class="demo">
+        <div class="demo-text">
+          <h1>Rendered code</h1>
+        </div>
+
+        <div class="demo-sample">
+          <p>Use the boolean attribute <code>render</code> to render the code inside the <code>&lt;template&gt;</code> tag.</p>
+          <code-sample render>
+            <template>
+              <style>
+                .btn {
+                  --transburger-icon-button-font-size: inherit;
+                  --transburger-icon-button-padding: 0 0 0.13em;
+                  --transburger-icon-button-cursor: pointer;
+                  --transburger-icon-button-outline: none;
+                  --transburger-icon-button-border-radius: 0.25em;
+                  --transburger-icon-button-box-shadow: inset 0 -0.25em 0 rgba(0, 0, 0, 0.2);
+                  --transburger-icon-button-color: #fff;
+                  --transburger-icon-button-background: #006dbe;
+                }
+              </style>
+
+              <transburger-icon class="btn"></transburger-icon>
+            </template>
+          </code-sample>
+        </div>
+      </div>
+
+      <div class="demo">
+        <div class="demo-text">
+          <div class="title-button">
+            <h1>Change content dynamically</h1>
+            <button class="demo-btn" id="changeContent">Change content</button>
+          </div>
+        </div>
+        <div class="demo-sample">
+          <code-sample id="sample">
+            <template>
+              <p>Initial content.</p>
+            </template>
+          </code-sample>
+        </div>
+      </div>
+
+      <div class="demo">
+        <div class="demo-text">
+          <h1>Custom background colors</h1>
+        </div>
+
+        <div class="demo-sample">
+          <code-sample class="navy-bg">
+            <template>
+              <resizable-panels>
+                <div class="panel-1">lorem...</div>
+                <div class="panel-2">ipsum...</div>
+                <div class="panel-3">dolor...</div>
+              </resizable-panels>
+            </template>
+          </code-sample>
+
+          <code-sample class="white-bg">
+            <template>
+              function algo(param) {
+                alert('helloooow');
+              }
+            </template>
+          </code-sample>
+        </div>
+      </div>
+    </div>
+
+    <script>
+      (function(d) {
+        const btn = d.querySelector('#changeContent');
+        const sample = d.querySelector('#sample');
+        const obj = {
+          prop1: 'value',
+          prop2: {
+            subProp1: 'something',
+            subProp2: true,
+            subProp3: [{
+              subSub1: 'a',
+              subSub2: 'b'
+            }, {
+              subSub1: 'c',
+              subSub2: 'd'
+            }]
+          }
+        };
+
+        let initial = true;
+
+        function customContent() {
+          let content;
+          if (initial) {
+            content = `
+              <template>
+                ${JSON.stringify(obj, null, 2)}
+              </template>`;
+            initial = false;
+          } else {
+            content = `
+              <template>
+                <p>Initial content.</p>
+              </template>`;
+            initial = true;
+          }
+          return content;
         }
 
-        :host([hidden]) { display: none; }
-      </template>
-    </code-sample>
+        btn.addEventListener('click', changeContent);
+
+        function changeContent() {
+          sample.innerHTML = customContent();
+        }
+      }(document));
+    </script>
   </body>
 </html>
diff --git a/test/code-sample_test.html b/test/code-sample_test.html
index b010074..219af7e 100644
--- a/test/code-sample_test.html
+++ b/test/code-sample_test.html
@@ -33,6 +33,16 @@
       </template>
     </test-fixture>
 
+    <test-fixture id="render">
+      <template>
+        <code-sample render>
+          <template>
+            <p>iuuu</p>
+          </template>
+        </code-sample>
+      </template>
+    </test-fixture>
+
     <script>
       suite('<code-sample> without content inside a <template> tag', () => {
         setup(() => {fixture('noTpl')});
@@ -87,23 +97,21 @@
         });
       });
 
-      suite('<code-sample type="html"> with type attribute', () => {
+      suite('<code-sample render>', () => {
         let el;
+        setup(() => {
+          el = fixture('render');
+        });
 
-        setup((done) => {
-          el = fixture('default');
-          el.type = 'html';
+        test('renders the code inside a <template>', (done) => {
+          let demo = el.shadowRoot.querySelector('#demo');
+          let tmpl = el.querySelector('template');
           flush(() => {
-            code = el.shadowRoot.querySelector('code');
+            assert.equal(demo.innerHTML, tmpl.innerHTML);
             done();
           });
         });
-
-        test('sets type property as class for the <code>', () => {
-          assert.isTrue(code.classList.contains('html'));
-        });
       });
-
     </script>
 
   </body>