Merge 5cd251b into f0e82bc

ariatemplates · Aug 28, 2014 · 7128dcc · 7128dcc
2 parents f0e82bc + 5cd251b
commit 7128dcc
Show file tree

Hide file tree

Showing 4 changed files with 79 additions and 1 deletion.
diff --git a/docs/_css/site.less b/docs/_css/site.less
@@ -442,6 +442,20 @@ body.playground {
   .editor {
     left: 0px;
     width: 50%;
+
+    .plunker {
+      position: absolute;
+      top: 5px;
+      right: 23px;
+      z-index: 10000;
+      background-color: #888;
+      color: #F0F0F0;
+      border: 1px solid #666;
+      cursor: pointer;
+      height: 30px;
+      border-radius: 2px;
+    }
+
     .ace_editor {
       position: absolute;
       top: 0px;

diff --git a/docs/playground/layout.hsp b/docs/playground/layout.hsp
@@ -1,4 +1,5 @@
 var splitter = require("./splitter.hsp.js");
+var plunkerExport = require("./plunker.js");
 
 var Class = require("hsp/klass");
 
@@ -53,6 +54,7 @@ var DescriptionCtrl = Class({
         <h4 class="title">{data.sampleTitle}</h4>
 
         <div class="editor" style="width: {data.splitterPos}">
+            <button class="plunker" title="Export this code to Plunker" onclick="{plunkerExport(event, playground)}">Edit in Plunker</button>
             <div id="editor"></div>
         </div>
 

diff --git a/docs/playground/playground.js b/docs/playground/playground.js
@@ -188,7 +188,6 @@ var Playground = module.exports = klass({
 
         if (this.data.sampleIndex === sample.index) return;
 
-        console.log("loading", index);
         sample.changed = sample.changed || false;
 
         this.data.errors = [];

diff --git a/docs/playground/plunker.js b/docs/playground/plunker.js
@@ -0,0 +1,63 @@
+function createElement(str) {
+  var holder = document.createElement("div");
+  holder.innerHTML = str;
+  return holder.firstChild;
+}
+
+module.exports = function plunkerExport(event, playground) {
+  var form = createElement('<form style="display: none;" method="post" action="http://plnkr.co/edit/#/?p=preview" target="_blank"></form>');
+  var addField = function(name, value) {
+    var input = createElement('<input type="hidden" name="' + name + '">');
+    input.setAttribute('value', value);
+    form.appendChild(input);
+  };
+
+
+  addField('description', playground.data.sampleTitle + "\n" + window.location);
+  addField('tags[]', "hashspace");
+  addField('files[index.html]', [
+    '<!doctype html>',
+    '<html>',
+    '  <head>',
+    '    <link rel="stylesheet" type="text/css" href="http://hashspace.ariatemplates.com/css/samples.css" />',
+    '    <script src="http://noder-js.ariatemplates.com/dist/v1.6.0/noder.dev.js" type="text/javascript">',
+    '    {',
+    '      packaging: {',
+    '        preprocessors: [{',
+    '          pattern: /\\.hsp$/,',
+    '          module: "hsp/compiler/compile"',
+    '        }, {',
+    '          pattern: /\\.js$/,',
+    '          module: "hsp/transpiler/transpile"',
+    '        }]',
+    '      }',
+    '    }',
+    '    </script>',
+    '    <script src="http://hashspace.ariatemplates.com/dist/' + window.hashspace_version + '/hashspace-noder.js"></script>',
+    '    <script src="http://hashspace.ariatemplates.com/dist/' + window.hashspace_version + '/hashspace-noder-compiler.js"></script>',
+    '  </head>',
+    '  <body>\n',
+    '    <div id="sample"></div>',
+    '',
+    '    <script type="application/x-noder">',
+    '      var sample = require("./sample.hsp"),',
+    '          template = sample.template,',
+    '          data = sample.data || [];',
+    '',
+    '      if (typeof data === "function") {',
+    '        data = data.call(sample);',
+    '      }',
+    '      template.apply(sample, data).render("sample");',
+    '    </script>',
+    '  </body>',
+    '</html>'
+  ].join('\n'));
+  addField('files[sample.hsp]', [
+    playground.editor.getValue()
+  ].join('\n'));
+
+  document.body.appendChild(form);
+  form.submit();
+  document.body.removeChild(form);
+  event.preventDefault();
+};