💥 Initial commit,

based on Juicy/imported-template@f47af98 and Juicy/juicy-html@30791de
Juicy · Sep 2, 2015 · 227050e · 227050e
commit 227050e
Show file tree

Hide file tree

Showing 14 changed files with 395 additions and 0 deletions.
diff --git a/.bowerrc b/.bowerrc
@@ -0,0 +1,3 @@
+{
+  "directory": "../"
+}
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,2 @@
+.idea
+node_modules
diff --git a/.jscsrc b/.jscsrc
@@ -0,0 +1,4 @@
+{
+    "validateIndentation": 4,
+    "validateLineBreaks": "LF",
+}
diff --git a/LICENSE b/LICENSE
@@ -0,0 +1,20 @@
+The MIT License (MIT)
+
+Copyright (c) 2013 Joachim Wester
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of
+this software and associated documentation files (the "Software"), to deal in
+the Software without restriction, including without limitation the rights to
+use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
+the Software, and to permit persons to whom the Software is furnished to do so,
+subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
+FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
+COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
+IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
diff --git a/README.md b/README.md
@@ -0,0 +1,63 @@
+&lt;juicy-iframe&gt;
+==============
+
+`<juicy-iframe>` is a custom element that lets you stamp inline or external HTML into an iframe.
+It also provides simple data binding, that works for native JS/HTML as well as for Polymer's `dom-bind`.
+See [README.md](https://github.com/Juicy/juicy-iframe">) for more information.
+
+## Demo/Examples
+
+[Check it live!](http://juicy.github.io/juicy-iframe/examples/index.html)
+
+## Install
+
+Install the component using [Bower](http://bower.io/):
+
+```sh
+$ bower install Juicy/juicy-iframe --save
+```
+
+Or [download as ZIP](https://github.com/Juicy/juicy-iframe/archive/gh-pages.zip).
+
+## Usage
+
+1. Import Web Components' polyfill, if needed:
+
+	```html
+	<script src="bower_components/webcomponentsjs/webcomponents.js">
+    ```
+
+2. Import Custom Element:
+
+    ```html
+    <link rel="import" href="bower_components/juicy-iframe/juicy-iframe.html">
+    ```
+
+3. Start using it!
+
+    ```html
+    <template is="juicy-iframe" content="./your/partial.html"></template>
+    ```
+
+## Options/Attributes
+
+Attribute    | Options           | Default     | Description
+---          | ---               | ---         | ---
+`content`    | *string*		     | `""`	       | Safe HTML code, or path (starts with `/` or `./`) to partial to be loaded.
+`model`      | *string*|*Object* | `undefined` | Data model to attach to stamped iframe.
+
+## Contributing
+
+1. Fork it!
+2. Create your feature branch: `git checkout -b my-new-feature`
+3. Commit your changes: `git commit -m 'Add some feature'`
+4. Push to the branch: `git push origin my-new-feature`
+5. Submit a pull request :D
+
+## History
+
+For detailed changelog, check [Releases](https://github.com/Juicy/juicy-iframe/releases).
+
+## License
+
+[MIT License](http://opensource.org/licenses/MIT)
diff --git a/bower.json b/bower.json
@@ -0,0 +1,27 @@
+{
+  "name": "juicy-iframe",
+  "version": "0.0.1",
+  "homepage": "https://github.com/Juicy/juicy-iframe",
+  "authors": [
+    "Tomek Wytrebowicz <[email protected]>"
+  ],
+  "description": "`<juicy-iframe>` is a custom element that lets you stamp inline or external HTML into an iframe. It also provides simple data binding, that works for native JS/HTML as well as for Polymer's `dom-bind`.",
+  "main": "./juicy-iframe.html",
+  "license": "MIT",
+  "devDependencies": {
+    "polymer": "Polymer/polymer#~1.1.0",
+  },
+  "keywords": [
+    "iframe",
+    "web-components"
+  ],
+  "ignore": [
+    "**/.*",
+    "node_modules",
+    "bower_components",
+    "test",
+    "tests",
+    "examples",
+    "preview.png"
+  ]
+}
diff --git a/examples/iframe_partial.html b/examples/iframe_partial.html
@@ -0,0 +1,35 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+    <meta charset="utf-8">
+    <title>&lt;imported-template&gt; from simple partial</title>
+    <script src="../../webcomponentsjs/webcomponents.js"></script>
+
+    <link rel="import" href="../juicy-iframe.html">
+
+    <link rel="stylesheet" href="http://juicy.github.io/juicy-tile-list/examples/github-markdown.css">
+    <style>
+        body {
+            font-family: Helvetica, Arial, sans-serif;
+            color: #333;
+            width: 80%;
+            margin: 2em auto;
+        }
+    </style>
+</head>
+
+<body class="markdown-body">
+    <h3>iframe from file</h3>
+    <pre><code>&lt;template is="juicy-iframe" content="./partial.html"&gt;&lt;/template&gt;</code></pre>
+    <template is="juicy-iframe" content="./partial.html"></template>
+
+    <h3>iframe from string</h3>
+    <pre><code>&lt;template is="juicy-iframe" content="&amp;lt;p&amp;gt;Content from &amp;lt;strong&amp;gt;inline&amp;lt;/strong&amp;gt; markup given in attribute&amp;lt;/p&amp;gt;"&gt;&lt;/template&gt;</code></pre>
+    <template is="juicy-iframe"
+        content="&lt;p&gt;Content from &lt;strong&gt;inline&lt;/strong&gt; markup given in attribute&lt;/p&gt;">
+    </template>
+
+</body>
+
+</html>
diff --git a/examples/index.html b/examples/index.html
@@ -0,0 +1,39 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>Examples</title>
+  <link rel="stylesheet" href="http://juicy.github.io/juicy-tile-list/examples/github-markdown.css">
+  <style>
+    body, .markdown-body {
+      font-family: Helvetica, Arial, sans-serif;
+      color: #333;
+      padding: 2em;
+      overflow: auto;
+    }
+    .warn{ color: indianred; }
+  </style>
+</head>
+<body class="markdown-body">
+
+<a href="https://github.com/Juicy/imported-template"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub"></a>
+
+<h1>&lt;juicy-iframe&gt;
+    <iframe src="http://ghbtns.com/github-btn.html?user=juicy&amp;repo=juicy-iframe&amp;type=watch&amp;count=true&amp;size=medium"
+  allowtransparency="true" frameborder="0" scrolling="0" width="90" height="30"></iframe></h1>
+
+<p>
+  <code>&lt;juicy-iframe&gt;</code> (precisely: <code>&lt;template is="juicy-iframe"&gt;</code>)
+  is a custom element that lets you stamp inline or external HTML into an iframe.
+  It also provides simple data binding, that works for native JS/HTML as well as for Polymer's <code>dom-bind</code>.
+  See <a href="https://github.com/Juicy/juicy-iframe">README.md</a> for more information.
+</p>
+<h2>Examples</h2>
+
+<h3><code>&lt;juicy-iframe&gt;</code> features</h3>
+<ul>
+  <li><a href="iframe_partial.html">&lt;juicy-iframe&gt; that loads markup from inline and external HTML</a></li>
+  <li><a href="polymer_partial.html">&lt;juicy-iframe&gt; with binding features</a></li>
+</ul>
+</body>
+</html>
diff --git a/examples/partial.html b/examples/partial.html
@@ -0,0 +1 @@
+<p>Content from <strong>external file: </strong><code>./partial.html</code></p>
diff --git a/examples/partial_that_requires_model.html b/examples/partial_that_requires_model.html
@@ -0,0 +1,6 @@
+<p>Content from <strong>external file: </strong><code>./partial_that_requires_model.html</code></p>
+
+<script>
+    alert("I can get model via `window.frameElement.model`:" + JSON.stringify(window.frameElement.model));
+    console.info("External file can get model via `window.frameElement.model`:", window.frameElement.model);
+</script>
diff --git a/examples/polymer_partial.html b/examples/polymer_partial.html
@@ -0,0 +1,68 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+    <meta charset="utf-8">
+    <title>&lt;imported-template&gt; from simple partial</title>
+    <script src="../../webcomponentsjs/webcomponents.js"></script>
+
+    <link rel="import" href="../../polymer/polymer.html">
+    <link rel="import" href="../juicy-iframe.html">
+
+    <link rel="stylesheet" href="http://juicy.github.io/juicy-tile-list/examples/github-markdown.css">
+    <style>
+        body {
+            font-family: Helvetica, Arial, sans-serif;
+            color: #333;
+            width: 80%;
+            margin: 2em auto;
+        }
+        .markdown-body{
+            overflow: auto;
+        }
+        textarea{
+            width: 100%;
+            height: 11em;
+        }
+    </style>
+</head>
+
+<body class="markdown-body">
+    <template id="test" is="dom-bind">
+        <h1>Fancy inline partial within Polymer's dom-bind</h1>
+        <h3>iframe from file</h3>
+        <pre><code>&lt;template is="juicy-iframe" content$="{{model.subpage.partial_path}}" model="{{model.subpage.model}}&gt;&lt;/template&gt;</code></pre>
+        <template is="juicy-iframe" content$="{{model.subpage.partial_path}}" model="{{model.subpage.model}}"></template>
+
+        <h3>iframe from string</h3>
+        <pre><code>&lt;template is="juicy-iframe"
+            content$="{{model.subpage.partial_markup}}" model="{{model.subpage.model}}"&gt;&lt;/template&gt;</code></pre>
+        <template is="juicy-iframe"
+            content$="{{model.subpage.partial_markup}}" model="{{model.subpage.model}}">
+        </template>
+        <h3>Code (live)</h3>
+        <textarea value="{{model.subpage.partial_markup::input}}"></textarea>
+    </template>
+
+    <script>
+        var model = {
+            subpage : {
+                partial_path: "./partial_that_requires_model.html",
+                partial_markup: "<h1>Inline markup</h1><"+
+                "script>"+
+                    "console.info('inlinemarkup, that uses given model, `this.frameElement.model`', this.frameElement.model);</"+
+                "script>",
+                model: {
+                    "data": {
+                        "given": "in main document"
+                    }
+                }
+            }
+        };
+        document.getElementById('test').model = model;
+    </script>
+
+
+</body>
+
+</html>
diff --git a/gruntfile.js b/gruntfile.js
@@ -0,0 +1,26 @@
+// # Globbing
+// for performance reasons we're only matching one level down:
+// 'test/spec/{,*/}*.js'
+// use this if you want to match all subfolders:
+// 'test/spec/**/*.js'
+
+module.exports = function(grunt) {
+    // grunt.loadNpmTasks('grunt-contrib-jshint');
+    grunt.loadNpmTasks('grunt-contrib-watch');
+
+    grunt.initConfig({
+        watch: {
+            all: {
+                options: {
+                    livereload: true
+                },
+                files: [
+                    '*.html',
+                    'examples/**/*.html'
+                ],
+                // tasks: ['jshint'],
+            },
+        }
+    });
+
+};
diff --git a/juicy-iframe.html b/juicy-iframe.html
@@ -0,0 +1,75 @@
+<!--
+juicy-iframe custom element to stamp HTML given as string or from given file into an iframe
+by Juicy
+MIT license
+https://github.com/Juicy/juicy-iframe
+-->
+<script>
+    (function() {
+        var JuicyIframePrototype = Object.create((HTMLTemplateElement || HTMLElement).prototype);
+
+        /**
+         * Import given file, or source as iframe.
+         * @public only for debugging.
+         * @return {imported-template}        self
+         */
+        JuicyIframePrototype.loadTemplate_ = function() {
+            var src, srcdoc, iframe;
+            var val = this.getAttribute('content');
+            if (val === null) {
+                return val;
+            }
+            this.clear();
+            iframe = this.iframe = document.createElement('iframe');
+            iframe.name = "a";
+            iframe.model={a:"b"};
+            if (val && (val.indexOf('/') === 0 || val.indexOf('./') === 0)) {
+                iframe.src = val;
+            } else {
+                iframe.srcdoc = val;// encodeURI(val);
+            }
+            this.attributeChangedCallback("model", undefined, this.model || this.getAttribute("model"));
+            this.parentNode.insertBefore(iframe, this.nextSibling);
+            return this;
+        };
+        /**
+         * Remove stamped content.
+         */
+        JuicyIframePrototype.clear = function() {
+            return this.iframe && this.iframe.parentNode.removeChild(this.iframe);
+        };
+
+        JuicyIframePrototype.isAttached = false;
+        JuicyIframePrototype.attachedCallback = function() {
+            this.isAttached = true;
+            this.loadTemplate_();
+        };
+        JuicyIframePrototype.detachedCallback = function() {
+            this.isAttached = false;
+            this.clear();
+        };
+        JuicyIframePrototype.attributeChangedCallback = function(name, oldVal, newVal) {
+            if(this.isAttached){
+                switch(name){
+                    case "model":
+                        if(typeof newVal === "string"){
+                            this.model = newVal ? JSON.parse(newVal) : null;
+                        } else {
+                            this.model = newVal;
+                        }
+                        this.iframe.model = this.model;
+                        break;
+                    case "content":
+                        this.loadTemplate_();
+                        break;
+                }
+            }
+        };
+
+        document.registerElement('juicy-iframe', {
+            prototype: JuicyIframePrototype,
+            extends: "template"
+        });
+
+    })();
+</script>
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		<p>Content from <strong>external file: </strong><code>./partial.html</code></p>