From 465b62e8ef61ef6a081fbb8a61e8da8175f425c9 Mon Sep 17 00:00:00 2001 From: Benjamin Dreux Date: Wed, 24 Jan 2018 22:12:19 -0500 Subject: [PATCH] add url that can be shared --- editor/app.js | 10 ++++++++++ editor/index.html | 10 ++++++++-- editor/style.css | 24 +++++++----------------- 3 files changed, 25 insertions(+), 19 deletions(-) diff --git a/editor/app.js b/editor/app.js index 1e77ed2..bec3378 100644 --- 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 index da65760..a8e44b6 100644 --- a/editor/index.html +++ b/editor/index.html @@ -6,6 +6,10 @@
+
+

Sharing url

+
+

Templates (syntax)

<template data-tagname="my-app"> @@ -21,10 +25,12 @@

Data

+
+ - - + + diff --git a/editor/style.css b/editor/style.css index 19d0301..a832ab6 100644 --- 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%;;