ink demo builds on ink code

curvenote · Feb 5, 2018 · d8f964d · d8f964d
1 parent feef227
commit d8f964d
Show file tree

Hide file tree

Showing 5 changed files with 65 additions and 116 deletions.
diff --git a/Makefile b/Makefile
@@ -6,11 +6,11 @@ install:
 
 build:
 	mkdir -p build # make a build folder
-	polymer-bundler bundle.html > build/ink.html
+	polymer build --preset="es6-bundled" --entrypoint="ink-article.html"
 	polymer analyze > analysis.json
 
 publish: build # right now to my other folder..
-	cp build/ink.html ../row1ca/website/static/html/ink.html
+	cp build/es6-bundled/ink-article.html ../row1ca/website/static/html/ink.html
 	cp bower_components/webcomponentsjs/webcomponents-lite.js ../row1ca/website/static/js/webcomponents-lite.js
 	cp node_modules/bibtex-parse-js/bibtexParse.js ../row1ca/website/static/js/bibtexParse.js
 

diff --git a/bower.json b/bower.json
@@ -2,6 +2,7 @@
   "name": "ink",
   "description": "Scientific web components",
   "main": "index.html",
+  "license": "MIT",
   "dependencies": {
     "polymer": "Polymer/polymer#^2.0.0"
   },

diff --git a/bundle.html b/bundle.html
diff --git a/ink-code.html b/ink-code.html
@@ -11,9 +11,6 @@
       hljs.registerLanguage("r",function(e){var r="([a-zA-Z]|\\.[a-zA-Z.])[a-zA-Z0-9._]*";return{c:[e.HCM,{b:r,l:r,k:{keyword:"function if in break next repeat else for return switch while try tryCatch stop warning require library attach detach source setMethod setGeneric setGroupGeneric setClass ...",literal:"NULL NA TRUE FALSE T F Inf NaN NA_integer_|10 NA_real_|10 NA_character_|10 NA_complex_|10"},r:0},{cN:"number",b:"0[xX][0-9a-fA-F]+[Li]?\\b",r:0},{cN:"number",b:"\\d+(?:[eE][+\\-]?\\d*)?L\\b",r:0},{cN:"number",b:"\\d+\\.(?!\\d)(?:i\\b)?",r:0},{cN:"number",b:"\\d+(?:\\.\\d*)?(?:[eE][+\\-]?\\d*)?i?\\b",r:0},{cN:"number",b:"\\.\\d+(?:[eE][+\\-]?\\d*)?i?\\b",r:0},{b:"`",e:"`",r:0},{cN:"string",c:[e.BE],v:[{b:'"',e:'"'},{b:"'",e:"'"}]}]}});
     </script>
     <style>
-      pre {
-        margin: 0 -10px;
-      }
       code {
         line-height: 1.2;
       }
@@ -31,9 +28,26 @@
           margin-left: -18px;
         }
       }
+      #code-wrapper{
+        position: relative;
+        padding: 10px;
+      }
+      button{
+        position: absolute;
+        top: 0;
+        right: 0;
+        text-transform: uppercase;
+        border: none;
+        cursor: pointer;
+        background: #e0e0e0;
+        outline: none;
+      }
     </style>
     <hr hidden$="[[_hideRules()]]">
-    <pre><code class$="[[ language ]]" id="code"></code></pre>
+    <div id="code-wrapper">
+      <button id="copyButton" hidden$="[[ !copy ]]" title="copy to clipboard" on-click="_copyToClipboard">Copy</button>
+      <pre><code class$="[[ language ]]" id="code"></code></pre>
+    </div>
     <hr hidden$="[[_hideRules()]]">
     <div hidden><slot></slot></div>
   </template>
@@ -51,10 +65,15 @@
             type: String,
             value: '',
             observer: 'renderCode'
+          },
+          copy: {
+            type: Boolean,
+            value: false
           }
         };
       }
-      _trim(content){
+
+      trim(content){
         var line, leading;
         var out = [];
         var left = Infinity;
@@ -71,29 +90,60 @@
         }
         for (var i = 0; i < lines.length; i++) {
           line = lines[i];
-          if(line.trim().length === 0){
+          if(i == 0 && line.trim().length === 0){
             continue;
           }
           out.push(line.slice(left));
         }
         return out.join('\n');
       }
+
       connectedCallback() {
         super.connectedCallback();
-        this.code = this._trim(this.textContent);
+        this.code = this.trim(this.textContent);
         this._observer = new Polymer.FlattenedNodesObserver(this, (info) => {
-          this.code = this._trim(this.textContent);
+          this.code = this.trim(this.textContent);
         });
         this.renderCode();
       }
+
       renderCode(){
         this.$.code.textContent = this.code;
         if(this.code){
           hljs.highlightBlock(this.$.code);
         }
       }
+
       _hideRules(){
-        return !(this.parentElement.nodeName === 'INK-ARTICLE');
+        return !(this.parentElement && this.parentElement.nodeName === 'INK-ARTICLE');
+      }
+
+      _copyToClipboard() {
+        // From https://github.com/google/material-design-lite/blob/master/docs/_assets/snippets.js
+        var snipRange = document.createRange();
+        snipRange.selectNodeContents(this.$.code);
+        var selection = window.getSelection();
+        selection.removeAllRanges();
+        selection.addRange(snipRange);
+        var result = false;
+        try {
+          result = document.execCommand('copy');
+          this.$.copyButton.textContent = 'done';
+        } catch (err) {
+          // Copy command is not available
+          console.error(err);
+          this.$.copyButton.textContent = 'error';
+        }
+
+        // Return to the copy button after a second.
+        setTimeout(this._resetCopyButtonState.bind(this), 1000);
+
+        selection.removeAllRanges();
+        return result;
+      }
+
+      _resetCopyButtonState() {
+        this.$.copyButton.textContent = 'copy';
       }
     }
     window.customElements.define(InkCode.is, InkCode);

diff --git a/ink-demo.html b/ink-demo.html
@@ -10,33 +10,13 @@
         box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);
         margin-bottom: 40px;
       }
-      code {
-        line-height: 1.2;
-      }
-      #code-wrapper{
-        position: relative;
-        padding: 10px;
-      }
       #demo{
         padding: 25px;
         border-bottom: 1px solid #e0e0e0;
       }
-      button{
-        position: absolute;
-        top: 0;
-        right: 0;
-        text-transform: uppercase;
-        border: none;
-        cursor: pointer;
-        background: #e0e0e0;
-        outline: none;
-      }
     </style>
     <div id="demo"><slot></slot></div>
-    <div id="code-wrapper">
-      <button id="copyButton" title="copy to clipboard" on-click="_copyToClipboard">Copy</button>
-      <pre><code class$="[[ language ]]" id="code"></code></pre>
-    </div>
+    <ink-code id="code" language="[[ language ]]" copy></ink-code>
   </template>
 
   <script>
@@ -47,78 +27,15 @@
           language: {
             type: String,
             value: 'html'
-          },
-          code: {
-            type: String,
-            value: '',
-            observer: 'renderCode'
           }
         };
       }
-      _trim(content){
-        var line, leading;
-        var out = [];
-        var left = Infinity;
-        var lines = content.split('\n');
-        for (var i = 0; i < lines.length; i++) {
-          line = lines[i];
-          if(line.trim().length === 0){
-            continue;
-          }
-          leading = line.search(/\S/);
-          if(leading < left){
-            left = leading;
-          }
-        }
-        for (var i = 0; i < lines.length; i++) {
-          line = lines[i];
-          if(line.trim().length === 0){
-            continue;
-          }
-          out.push(line.slice(left));
-        }
-        return out.join('\n');
-      }
       connectedCallback() {
         super.connectedCallback();
-        this.code = this._trim(this.innerHTML);
+        this.$.code.code = this.$.code.trim(this.innerHTML);
         this._observer = new Polymer.FlattenedNodesObserver(this, (info) => {
-          this.code = this._trim(this.innerHTML);
+          this.$.code.code = this.$.code.trim(this.innerHTML);
         });
-        this.renderCode();
-      }
-      renderCode(){
-        this.$.code.textContent = this.code;
-        if(this.code){
-          hljs.highlightBlock(this.$.code);
-        }
-      }
-      _copyToClipboard() {
-        // From https://github.com/google/material-design-lite/blob/master/docs/_assets/snippets.js
-        var snipRange = document.createRange();
-        snipRange.selectNodeContents(this.$.code);
-        var selection = window.getSelection();
-        selection.removeAllRanges();
-        selection.addRange(snipRange);
-        var result = false;
-        try {
-          result = document.execCommand('copy');
-          this.$.copyButton.textContent = 'done';
-        } catch (err) {
-          // Copy command is not available
-          console.error(err);
-          this.$.copyButton.textContent = 'error';
-        }
-
-        // Return to the copy button after a second.
-        setTimeout(this._resetCopyButtonState.bind(this), 1000);
-
-        selection.removeAllRanges();
-        return result;
-      }
-
-      _resetCopyButtonState() {
-        this.$.copyButton.textContent = 'copy';
       }
     }
     window.customElements.define(InkDemo.is, InkDemo);