Merge pull request #31 from /issues/18-href-attr

Issues/18 href attr
Juicy · Sep 26, 2017 · 147e170 · 147e170
2 parents a7097c3 + e6cc8e2
commit 147e170
Show file tree

Hide file tree

Showing 19 changed files with 570 additions and 92 deletions.
diff --git a/.travis.yml b/.travis.yml
@@ -15,5 +15,5 @@ addons:
     packages:
       - google-chrome-stable
 script:
-  - xvfb-run wct
-  - "if [ \"${TRAVIS_PULL_REQUEST}\" = \"false\" ]; then wct -s 'default'; fi"
+  - xvfb-run wct --skip-plugin sauce
+  - "if [ \"${TRAVIS_PULL_REQUEST}\" = \"false\" ]; then wct --skip-plugin local --plugin sauce; fi"
diff --git a/README.md b/README.md
@@ -6,20 +6,20 @@
 ### External files
 To load HTML from external file all you need is:
 ```html
-<template is="juicy-html" content="./path/to/file.html"></template>
+<template is="juicy-html" href="./path/to/file.html"></template>
 ```
 
 ### Markup provided by attribute
 ```html
-<template is="juicy-html" content="<h1>Hello World</h1>"></template>
+<template is="juicy-html" html="<h1>Hello World</h1>"></template>
 ```
 
 ### Data Binding
 `juicy-html` may forward given model object to stamped elements.
 
 ```html
 <template is="juicy-html"
-  content='
+  html='
     All those nodes will get <code>.model</code> property
     with the reference to the object given in model attribute.
     <template is="dom-bind">
@@ -83,36 +83,42 @@ Please note, that loaded `<script>` and `<style>` will be executed every time HT
 	Load HTML partial from a string:
 
 	```html
-	<template is="juicy-html" content="<b>some</b> HTML"></template>
-	<!-- Or <template is="juicy-html" content$="{{var}}"></template> where {{ var }} equals "<b>some</b> HTML" -->
+	<template is="juicy-html" html="<b>some</b> HTML"></template>
+	<!-- Or <template is="juicy-html" html="{{var}}"></template> where {{ var }} equals "<b>some</b> HTML" -->
 	```
 
 	Load HTML partial from a URL:
 
 	```html
-	<template is="juicy-html" content="./path/to/file.html"></template>
-	<!-- Or <template is="juicy-html" content$="{{var}}"></template>
+	<template is="juicy-html" href="./path/to/file.html"></template>
+	<!-- Or <template is="juicy-html" href="{{var}}"></template>
 	     where {{var}} equals "./path/to/file.html", a path relative to the document that must start with / or ./ -->
 	```
 
-## Options/Attributes
+## Attributes
 
 Attribute           | Options         | Default     | Description
 ---                 | ---             | ---         | ---
-`content`           | *string*		  | `""`	    | Safe HTML code, or path (starts with `/`, `./`, or `../`) to partial to be loaded.
+`html`              | *string*		  | `""`	    | Safe HTML code to be stamped. Setting this one will skip any pending request for `href` and remove `href` attribute.
+`href`              | *string*		  | `""`	    | Path of a partial to be loaded. Setting this one will remove `html` attribute.
 `model`(_optional_) | *Object|String* | `undefined` | Object (or `JSON.stringify`'ied Object) to be attached to every root node of loaded document
 
 ## Properties
 
 Property  | Type             | Default     | Description
 ---       | ---              | ---         | ---
-`model`   | *Object*         | `undefined` | see above
+`model`   | *Object*         | `undefined` | See [attributes](#Attributes)
+`html`    | *string*         | `""`	       | See [attributes](#Attributes)
+`href`    | *string*         | `""`	       | See [attributes](#Attributes)
 `pending` | *XMLHttpRequest* |             | pending XHR if any
 
+Please note, that properties are available after element is upgraded.
+To provide a state before element is upgraded, please use attributes.
+
 ## Events
 
-Name      | details            | Description
----       | ---                | ---
+Name      | details             | Description
+---       | ---                 | ---
 `stamped` | *Array* of *Node* s | Trigger every time content is (re-)stamped, with array of stamped nodes in `event.detail`
 
 ## Methods
@@ -128,14 +134,14 @@ However, it plays really nice with [Polymer](http://www.polymer-project.org/) [A
 
 ## Browser compatibility
 
-Name       | Support    | Comments
------------|------------|---------
-Chrome 48  | yes        |
-Firefox 43 | yes        |
-IE 11      | partially  | `document._currentScript` behaves wrong in inserted scripts
-Edge 25    | yes        |
-Safari 9   | yes        |
-Safari 8   | not tested |
+Name         | Support    | Comments
+-------------|------------|---------
+Chrome 48    | yes        |
+Firefox 43   | yes        |
+IE 11        | partially  | `document._currentScript` behaves wrong in inserted scripts
+Edge 25      | yes        |
+Safari 10-11 | yes        |
+Safari 9-    | not tested |
 
 ## Contributing
 

diff --git a/bower.json b/bower.json
@@ -11,10 +11,10 @@
   "main": "juicy-html.html",
   "license": "https://github.com/Juicy/juicy-html/blob/master/LICENSE",
   "keywords": [
-     "partials",
-     "html",
-     "include",
-     "web-components"
+    "partials",
+    "html",
+    "include",
+    "web-components"
   ],
   "ignore": [
     "examples",
@@ -23,10 +23,10 @@
     "test",
     ".github"
   ],
-  "dependencies": {
-  },
+  "dependencies": {},
   "devDependencies": {
-    "polymer": "Polymer/polymer#>=1.1.5",
-    "web-component-tester": "Polymer/web-component-tester#>=4.2.2"
+    "polymer": "^1.9.1",
+    "web-component-tester": "^6.0.0",
+    "webcomponentsjs": "^0.7.24"
   }
 }
diff --git a/examples/basic_file.html b/examples/basic_file.html
@@ -15,8 +15,8 @@
     </style>
 </head>
 <body class="markdown-body">
-    <template is="juicy-html" content="./partials/basic.html"></template>
+    <template is="juicy-html" href="./partials/basic.html"></template>
     <h2>code</h2>
-<pre><code>&lt;template is="juicy-html" content="./partials/basic.html"&gt;&lt;/template&gt;</code></pre>
+<pre><code>&lt;template is="juicy-html" href="./partials/basic.html"&gt;&lt;/template&gt;</code></pre>
 </body>
 </html>
diff --git a/examples/basic_inline.html b/examples/basic_inline.html
@@ -15,8 +15,8 @@
     </style>
 </head>
 <body class="markdown-body">
-    <template is="juicy-html" content="<h1>Hello World!</h1> <p>I'm <strong>inline</strong> content.</p>"></template>
+    <template is="juicy-html" href="<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>
+    <pre><code>&lt;template is="juicy-html" href="&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
@@ -18,7 +18,7 @@ <h2>My-app custom element</h2>
                 width: 300px;
             }
         </style>
-        <template is="juicy-html" content$="{{viewmodel.html}}" model="{{viewmodel}}" on-stamped="stamped"></template>
+        <template is="juicy-html" href="{{viewmodel.html}}" model="{{viewmodel}}" on-stamped="stamped"></template>
     </template>
 </dom-module>
 <script>

diff --git a/examples/polymer_template_inline.html b/examples/polymer_template_inline.html
@@ -25,7 +25,7 @@
 <body class="markdown-body">
     <template id="test" is="dom-bind">
         <h1>Fancy inline partial within Polymer's dom-bind</h1>
-        <template is="juicy-html" content$="{{model.subpage.Html}}" model="{{model.subpage}}">
+        <template is="juicy-html" href="{{model.subpage.Html}}" model="{{model.subpage}}">
         </template>
         <h3>Code (live)</h3>
         <textarea value="{{model.subpage.Html::input}}"></textarea>

diff --git a/examples/polymer_template_partial.html b/examples/polymer_template_partial.html
@@ -17,7 +17,7 @@
 </head>
 <body>
     <template id="test" is="dom-bind">
-        <template model="{{model.subpage}}" is="juicy-html" content$="{{model.subpage.html}}"></template>
+        <template model="{{model.subpage}}" is="juicy-html" href="{{model.subpage.html}}"></template>
     </template>
     <script>
         var model = {

diff --git a/examples/template_partial_sibling.html b/examples/template_partial_sibling.html
@@ -19,7 +19,7 @@
     <h2>Hey! those are siblings:</h2>
     <ul>
         <li class="specialExternal">Just plain <code>&lt;li&gt;</code></li>
-        <template is="juicy-html" content="./partials/page_4.html"></template>
+        <template is="juicy-html" href="./partials/page_4.html"></template>
     </ul>
 </body>
 </html>
diff --git a/juicy-html.html b/juicy-html.html
@@ -7,18 +7,75 @@
 -->
 <script>
     (function(scope) {
+        /**
+         * Throw a warning to the console about deprecated content attribute
+         * @param  {JuicyHTMLElement} element reference to the element
+         */
+        function warnAboutDeprecatedContentOn(element){
+            console.warn(
+                '`content` attribute is deprecated! Please, use `href` or `html` instead.',
+                element,
+                'We will drop support for it in next release.'
+            );
+        }
+        /**
+         * Translate content tag changes to href and html attributes
+         * @param {JuicyHTMLElement} element to set attibutes on
+         * @param {String} value value of content attr
+         */
+        function forwardContentValue(element, value){
+            if (value && (value.indexOf('/') === 0 || value.indexOf('./') === 0 || value.indexOf('../') === 0)) {
+                //value is a URL, load the partial from external file
+                element.removeAttribute('html');
+                element.setAttribute('href', value);
+            } else if (value === null) {
+                element.removeAttribute('html');
+                element.removeAttribute('href');
+            } else {
+                //value is HTML code, insert the partial from the string
+                element.removeAttribute('href');
+                element.setAttribute('html', value);
+            }
+        }
+
         var JuicyHTMLPrototype = Object.create((HTMLTemplateElement || HTMLElement).prototype);
         var isSafari = navigator.vendor && navigator.vendor.indexOf("Apple") > -1 && navigator.userAgent && !navigator.userAgent.match("CriOS");
 
         JuicyHTMLPrototype.createdCallback = function() {
-            var model = null;
-            Object.defineProperty(this, "model", {
-                set: function(newValue) {
-                    model = newValue;
-                    this.attachModel(newValue);
+            var model = null; // XXX(tomalec): || this.model ? // to consider for https://github.com/Juicy/juicy-html/issues/30
+            Object.defineProperties(this, {
+                'model': {
+                    set: function(newValue) {
+                        model = newValue;
+                        this.attachModel(newValue);
+                    },
+                    get: function() {
+                        return model;
+                    }
+                },
+                'href': {
+                    set: function(newValue) {
+                        if(newValue === null){
+                            this.removeAttribute('href');
+                        } else {
+                            this.setAttribute('href', newValue);
+                        }
+                    },
+                    get: function() {
+                        return this.getAttribute('href');
+                    }
                 },
-                get: function() {
-                    return model;
+                'html': {
+                    set: function(newValue) {
+                        if(newValue === null){
+                            this.removeAttribute('html');
+                        } else {
+                            this.setAttribute('html', newValue);
+                        }
+                    },
+                    get: function() {
+                        return this.getAttribute('html');
+                    }
                 }
             });
         };
@@ -29,20 +86,6 @@
         JuicyHTMLPrototype.pending = null;
 
         JuicyHTMLPrototype.stampedNodes = null;
-        JuicyHTMLPrototype.loadTemplate_ = function() {
-            // skip pending request
-            this.skipStampingPendingFile();
-            var val = this.getAttribute('content');
-            if (val && (val.indexOf('/') === 0 || val.indexOf('./') === 0 || val.indexOf('../') === 0)) {
-                //val is a URL, load the partial from external file
-                this._loadExternalFile(val);
-            } else if (val === null) {
-                this.clear();
-            } else {
-                //val is HTML code, insert the partial from the string
-                this.reattachTemplate_(val);
-            }
-        };
         /**
          * Skips/disregards pending request if any.
          */
@@ -72,9 +115,9 @@
             this.clear();
             if(html === ''){
                 if(statusCode === 204){
-                    console.info('no content was returned for juicy-html (', this, ')');
+                    console.info('no content was returned for juicy-html', this);
                 } else {
-                    console.warn('content given for juicy-html (', this, ') is an empty file');
+                    console.warn('content given for juicy-html is an empty file', this);
                 }
             }
             // fragmentFromString(strHTML) from http://stackoverflow.com/a/25214113/868184
@@ -118,7 +161,12 @@
         JuicyHTMLPrototype.isAttached = false;
         JuicyHTMLPrototype.attachedCallback = function() {
             this.isAttached = true;
-            this.loadTemplate_();
+            // autostamp
+            // TODO(tomalec): read pre-upgrade properties in cheap manner
+            this.hasAttribute('href') && this.attributeChangedCallback('href', null, this.getAttribute('href'));
+            this.hasAttribute('html') && this.attributeChangedCallback('html', null, this.getAttribute('html'));
+            // translate legacy `content` attribute
+            this.hasAttribute('content') && this.attributeChangedCallback('content', null, this.getAttribute('content'));
         };
         JuicyHTMLPrototype.detachedCallback = function() {
             this.isAttached = false;
@@ -134,7 +182,26 @@
                         this.model = newVal;
                         break;
                     case "content":
-                        this.loadTemplate_();
+                        warnAboutDeprecatedContentOn(this);
+                        forwardContentValue(this, newVal);
+                        break;
+                    case "href":
+                        // skip pending request
+                        this.skipStampingPendingFile();
+                        if(newVal !== null){
+                            this.removeAttribute('html');
+                            this._loadExternalFile(newVal);
+                        } else {
+                            this.clear();
+                        }
+                        break;
+                    case "html":
+                        if(newVal !== null){
+                            this.removeAttribute('href');
+                            this.reattachTemplate_(newVal);
+                        } else {
+                            this.clear();
+                        }
                         break;
                 }
             }