Merge pull request #23 from benzen/editor-url

add url that can be shared in editor
caolan · Jan 25, 2018 · 28d2858 · 28d2858
2 parents fec66d2 + 465b62e
commit 28d2858
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 19 deletions.
diff --git a/editor/app.js b/editor/app.js
@@ -96,15 +96,25 @@ function updateJSON() {
 templates_editor.getSession().on('change', function () {
     if (updateTemplates()) {
         patch();
+        updateUrl();
     }
 });
 
 json_editor.getSession().on('change', function () {
     if (updateJSON()) {
         patch();
+        updateUrl();
     }
 });
 
+function updateUrl(){
+  var json = window.escape(json_editor.getValue());
+  var template =  window.escape(templates_editor.getValue());
+  var url = window.location.href.replace(/\?.*/, "")+"?data="+json+"&templates="+template;
+  document.getElementById("url").innerText = "";
+  document.getElementById("url").innerText = url;
+
+}
 // initial render
 updateTemplates();
 updateJSON();

diff --git a/editor/index.html b/editor/index.html
@@ -6,6 +6,10 @@
     </head>
     <body>
         <div class="editor-container">
+            <div class="editor">
+              <h2 style=>Sharing url</h2>
+              <div id="url"></div>
+            </div>
             <div class="editor open">
                 <h2 onclick="toggleEditor">Templates (<a href="https://github.com/caolan/magery#template-syntax">syntax</a>)</h2>
                 <div id="templates">&lt;template data-tagname=&quot;my-app&quot;&gt;
@@ -21,10 +25,12 @@ <h2 onclick="toggleEditor">Data</h2>
         </div>
         <div class="result-container">
             <my-app></my-app>
+
         </div>
+
         <div style="display:none" id="active-templates"></div>
-        <script src="../build/magery-compiler.min.js"></script>
-        <script src="../build/magery-runtime.min.js"></script>
+        <script src="../build/magery-compiler.js"></script>
+        <script src="../build/magery-runtime.js"></script>
         <script src="ace/ace.js"></script>
         <script src="app.js"></script>
     </body>

diff --git a/editor/style.css b/editor/style.css
@@ -16,23 +16,6 @@ body {
     flex: 1 1 auto;
     position: relative;
 }
-/*
-.editor.closed {
-    flex-grow: 0;
-}
-.editor > h2::before {
-    content: "\25BC";
-    margin-right: 5px;
-    position: relative;
-    top: -2px;
-}
-.editor.closed > h2::before {
-    content: "\25BA";
-    position: relative;
-    top: -2px;
-    margin-right: 5px;
-}
-*/
 .editor > h2 {
     cursor: pointer;
     text-transform: uppercase;
@@ -45,6 +28,13 @@ body {
     color: #839496;
     background-color: #eee8d5;
 }
+.editor > #url {
+  background-color: #FDF6E3; 
+  color: #586E75; 
+  padding: 10px 0px; 
+  height: inherit; 
+  word-wrap: break-word;
+}
 .editor > div {
     width: 100%;
     height: 100%;;