diff --git a/www/api/data/generated.html b/www/api/data/generated.html index 9c9739b..575cc82 100644 --- a/www/api/data/generated.html +++ b/www/api/data/generated.html @@ -33,18 +33,18 @@ } /* style */ @import url('https://fonts.googleapis.com/css?family=Alegreya+Sans:400,400i,700,700i'); - + :root { --highlight-dark: #f16623; --highlight-light: #ff8003; --highlight-color: #fff; --highlight-background: linear-gradient( to left, var(--highlight-light), var(--highlight-dark) ); - + --support-dark: #444; --support-light: #484848; --support-color: #eee; --support-background: linear-gradient( to left, var(--support-light), var(--support-dark) ); - + --grey-dark: #38393c; --grey-medium: #7f8185; --grey-light: #e9ebec; @@ -52,23 +52,23 @@ --black: #000; --white: #fff; --grey-background: var(--grey-dark); - + --font-family: 'Alegreya Sans', sans-serif; --font-size: 14px; --line-height: 1.5em; --color: #7f8185; --background: #333; } - + /* general styling on default elements */ - + html, body { margin: 0; padding: 0; font-family: var(--font-family); font-size: var(--font-size); line-height: var(--line-height); - color: var(--color); + color: var(--color); background-color: var(--background); } body { @@ -84,7 +84,7 @@ margin: 0; margin-bottom: 0.5em; } - + h2 { font-size: 1.6em; font-weight: 400; @@ -92,25 +92,25 @@ margin: 0; margin-bottom: 0.5em; } - + * { box-sizing: border-box; } - + img { display: block; max-width: 100%; } - + a { color: var(--highlight-dark); } a:visited { color: var(--highlight-dark); } - + /* custom styling for custom elements */ - + .sb-button, a.sb-button { background: var(--support-background); @@ -120,7 +120,7 @@ border: 1px solid #ccc; text-decoration: none; } - + .sb-button:first-child { margin-left: 0; } @@ -131,7 +131,7 @@ background: var(--highlight-background); color: var(--highlight-color); } - + .text-content { padding: 2.2375em; max-width: 50em; @@ -139,13 +139,13 @@ .text-content *:first-child { margin-top: 0; } - + body { - display: grid; - grid-template-columns: 210px 2fr 2fr; - grid-template-rows: 60px 2fr 2fr; - gap: 0px 0px; - grid-template-areas: + display: grid; + grid-template-columns: 210px 2fr 2fr; + grid-template-rows: 60px 2fr 2fr; + gap: 0px 0px; + grid-template-areas: "header header header" "nav pane pane" "nav pane pane" @@ -171,7 +171,7 @@ nav ul ul { padding: 0 1.7em; } - + nav > ul > li[data-simply-command=expandMenu][open]::before { content: "[-] "; font-family: monospace; @@ -183,7 +183,7 @@ .sb-part { margin-top: 1em; } - + .sb-part-header { display: grid; grid-template-columns: 1fr 1fr; @@ -273,7 +273,7 @@ .sb-editor-code textarea { margin-top: -1px; } - + ul.sb-components-list { list-style: none; padding: 0; @@ -289,9 +289,9 @@ padding: 10px; border-radius: 2px; } - + /* Components: Toast */ - + :root { --simply-toast-height: 60px; --simply-toast-hide-delay: 3s; @@ -313,7 +313,7 @@ --simply-heading-weight: 900; --simply-heading-multiplier: 1.1; } - + ul.simply-toasts, ol.simply-toasts, .simply-toasts { @@ -354,7 +354,7 @@ li.simply-toast-warning { border-color: var(--simply-warning-color); } - + @keyframes simply-toast-show { 0% { transform: scaleX(0); @@ -413,7 +413,7 @@ animation: simply-toast-move var(--simply-toast-show-duration), simply-toast-hide var(--simply-toast-hide-duration) forwards; animation-delay: 0s, var(--simply-toast-hide-delay); } - + /* QUnit iframe */ .qunit-code { display: none; @@ -538,14 +538,14 @@ border: 0; z-index: 10; } - body:has(main.sb-fullscreen-preview) header, + body:has(main.sb-fullscreen-preview) header, body:has(main.sb-fullscreen-preview) nav { display: none; } - + @@ -4223,18 +4235,18 @@

App preview

// Handle changes of the part name var component = event.data.dataBinding.parentKey.split("/")[3]; var componentNameField = simplyApp.actions.getComponentNameField(component); - + if (event.data.arguments[0] == componentNameField) { var newname = event.data.arguments[1]; var oldname = event.data.arguments[2]; - + editor.pageData.app[component].forEach(function(appPart) { if (appPart[componentNameField] == oldname) { appPart[componentNameField] = newname; } }); } - + if (typeof autoRunPreviewTimeout !== "undefined") { window.clearTimeout(autoRunPreviewTimeout); } @@ -4260,11 +4272,11 @@

App preview

} }); } - + document.querySelectorAll("[data-simply-transformer=simplyPreviewComponent]").forEach(function(element) { element.innerHTML = editor.transformers.simplyPreviewComponent.render.call(element, element.dataBinding.get()); }); - + simplyApp.commands.autoRunPreviews() }, 500); } @@ -4356,12 +4368,12 @@

App preview

localStorage.dragdrop = "dragStart"; document.currentDragItem = target; // event.dataTransfer.effectAllowed = 'move'; - + event.dataTransfer.setData("application/json", JSON.stringify(simply.dragdrop.getData(target), true)); var simplyType = "simply/" + target.parentNode.dataBinding.config.key.toLowerCase(); event.dataTransfer.setData(simplyType, "1"); event.dataTransfer.setDragImage(event.target, 0, 0); - + return true; }, dragEnter : function(event) { @@ -4394,17 +4406,17 @@

App preview

drop : function(event) { var listParent = simply.dragdrop.getListParent(event.target); var data = JSON.parse(event.dataTransfer.getData("application/json")); - + listParent.classList.remove("simply-dragdrop-receiving"); - + const expectedType = "simply/" + listParent.dataBinding.config.key.toLowerCase(); const isTypeAccepted = event.dataTransfer.types.includes(expectedType); - + if (listParent && isTypeAccepted) { var data = JSON.parse(event.dataTransfer.getData("application/json")); event.preventDefault(); let dropEffect = event.dataTransfer.dropEffect; - + switch (dropEffect) { case "move": localStorage.dragdrop = "move"; @@ -4477,4 +4489,4 @@

App preview

- + \ No newline at end of file diff --git a/www/api/data/pages/page-frame/dataApi/getPageFrame.js b/www/api/data/pages/page-frame/dataApi/getPageFrame.js index 99b284a..abe4d96 100644 --- a/www/api/data/pages/page-frame/dataApi/getPageFrame.js +++ b/www/api/data/pages/page-frame/dataApi/getPageFrame.js @@ -12,8 +12,8 @@ function() { .catch(function() { let defaults = { "componentPreview.html" : "<!DOCTYPE HTML>\n<html lang=\"en\">\n <head>\n <meta charset=\"utf-8\">\n <!-- Component CSS -->\n <style>\n {{componentCss}}\n </style>\n <!-- /Component CSS -->\n <!-- Page CSS -->\n <style>\n {{pageCss}}\n </style>\n <!-- /Page CSS -->\n <!-- Head HTML -->\n {{headHtml}}\n <!-- /Head HTML -->\n <script>\n function clone(ob) {\n return JSON.parse(JSON.stringify(ob));\n }\n function updateDataSource(name) {\n document.querySelectorAll('[data-simply-data=\"'+name+'\"]').forEach(function(list) {\n editor.list.applyDataSource(list, name);\n list.dataBindingPaused = 0;\n });\n }\n </script>\n </head>\n <body>\n <!-- Component HTML templates -->\n {{componentTemplates}}\n <!-- /Component HTML templates -->\n <div class=\"main\">\n {{componentPreview}}\n </div>\n <script src=\"js/simply.everything.js\"></script>\n <script src=\"js/simply-edit.js\" data-simply-storage=\"none\" data-api-key=\"muze\"></script>\n <script>\n /* Transformers */\n editor.transformers = {\n {{transformers}}\n };\n /* /Transformers */\n </script>\n <script>\n /* Sorters */\n editor.sorters = {\n {{sorters}}\n };\n /* /Sorters */\n </script>\n <script>\n window.addEventListener(\"simply-content-loaded\", function() {\n /* Data sources */\n {{dataSources}}\n /* /Data sources */\n });\n </script>\n <!-- Foot HTML -->\n {{footHtml}}\n <!-- /Foot HTML -->\n </body>\n</html>", - "fullApp.html" : "<!DOCTYPE HTML>\n<html lang=\"en\">\n <head>\n <meta charset=\"utf-8\">\n <!-- Component CSS -->\n <style>\n {{componentCss}}\n </style>\n <!-- /Component CSS -->\n <!-- Page CSS -->\n <style>\n {{pageCss}}\n </style>\n <!-- /Page CSS -->\n <!-- Head HTML -->\n {{headHtml}}\n <!-- /Head HTML -->\n <script>\n var simplyDataApi = {};\n var simplyApp = {};\n window.addEventListener(\"simply-content-loaded\", function() {\n simply.bind = false;\n /* Raw API */\n var simplyRawApi = {\n {{rawApi}}\n };\n /* End of Raw API */\n /* Data API */\n simplyDataApi = {\n {{dataApi}}\n };\n /* End of Data API */\n simplyApp = simply.app({\n /* Actions */\n actions: {\n {{actions}}\n },\n /* /Actions */\n /* Commands */\n commands: {\n {{commands}}\n },\n /* /Commands */\n /* Routes */\n routes: {\n {{routes}}\n }\n /* /Routes */\n });\n });\n function clone(ob) {\n return JSON.parse(JSON.stringify(ob));\n }\n function updateDataSource(name) {\n document.querySelectorAll('[data-simply-data=\"'+name+'\"]').forEach(function(list) {\n editor.list.applyDataSource(list, name);\n list.dataBindingPaused = 0;\n });\n }\n </script>\n </head>\n <body>\n <!-- Body HTML -->\n {{bodyHtml}}\n <!-- /Body HTML -->\n <!-- Component HTML templates -->\n {{componentTemplates}}\n <!-- /Component HTML templates -->\n <header data-simply-path=\"/\" data-simply-field=\"header\" data-simply-content=\"template\" data-simply-default-value=\"Header\">\n <template data-simply-template='Header' rel=\"header\"></template>\n </header>\n <nav>\n <simply-render rel=\"menu\"></simply-render>\n </nav>\n <div class=\"main\" data-simply-field=\"page\" data-simply-content=\"template\">\n <!-- Page HTML templates -->\n {{pageTemplates}}\n <!-- /Page HTML templates -->\n </div>\n <script src=\"js/simply.everything.js\"></script>\n <script src=\"js/simply-edit.js\" data-simply-storage=\"none\" data-api-key=\"muze\"></script>\n <script>\n /* Transformers */\n editor.transformers = {\n {{transformers}}\n };\n /* /Transformers */\n </script>\n <script>\n /* Sorters */\n editor.sorters = {\n {{sorters}}\n };\n /* /Sorters */\n </script>\n <script>\n window.addEventListener(\"simply-content-loaded\", function() {\n /* Data sources */\n {{dataSources}}\n /* /Data sources */\n });\n </script>\n <!-- Foot HTML -->\n {{footHtml}}\n <!-- /Foot HTML -->\n </body>\n</html>", - "pagePreview.html" : "<!DOCTYPE HTML>\n<html lang=\"en\">\n <head>\n <meta charset=\"utf-8\">\n <!-- Component CSS -->\n <style>\n {{componentCss}}\n </style>\n <!-- /Component CSS -->\n <!-- Page CSS -->\n <style>\n {{pageCss}}\n </style>\n <!-- /Page CSS -->\n <!-- Head HTML -->\n {{headHtml}}\n <!-- /Head HTML -->\n <script>\n function clone(ob) {\n return JSON.parse(JSON.stringify(ob));\n }\n function updateDataSource(name) {\n document.querySelectorAll('[data-simply-data=\"'+name+'\"]').forEach(function(list) {\n editor.list.applyDataSource(list, name);\n list.dataBindingPaused = 0;\n });\n }\n </script>\n </head>\n <body>\n <!-- Component HTML templates -->\n {{componentTemplates}}\n <!-- /Component HTML templates -->\n <header data-simply-path=\"/\" data-simply-field=\"header\" data-simply-content=\"template\" data-simply-default-value=\"Header\">\n <template data-simply-template='Header' rel=\"header\"></template>\n </header>\n <nav>\n <simply-render rel=\"menu\"></simply-render>\n </nav>\n <div class=\"main\" data-simply-field=\"page\" data-simply-content=\"template\">\n {{pagePreview}}\n </div>\n <script src=\"js/simply.everything.js\"></script>\n <script src=\"js/simply-edit.js\" data-simply-storage=\"none\" data-api-key=\"muze\"></script>\n <script>\n /* Transformers */\n editor.transformers = {\n {{transformers}}\n };\n /* /Transformers */\n </script>\n <script>\n /* Sorters */\n editor.sorters = {\n {{sorters}}\n };\n /* /Sorters */\n </script>\n <script>\n window.addEventListener(\"simply-content-loaded\", function() {\n /* Data sources */\n {{dataSources}}\n /* /Data sources */\n });\n </script>\n <!-- Foot HTML -->\n {{footHtml}}\n <!-- /Foot HTML -->\n </body>\n</html>" + "fullApp.html" : "<!DOCTYPE HTML>\n<html lang=\"en\">\n <head>\n <meta charset=\"utf-8\">\n <!-- Component CSS -->\n <style>\n {{componentCss}}\n </style>\n <!-- /Component CSS -->\n <!-- Page CSS -->\n <style>\n {{pageCss}}\n </style>\n <!-- /Page CSS -->\n <!-- Head HTML -->\n {{headHtml}}\n <!-- /Head HTML -->\n <script>\n var simplyDataApi = {};\n var simplyApp = {};\n window.addEventListener(\"simply-content-loaded\", function() {\n simply.bind = false;\n /* Raw API */\n var simplyRawApi = {\n {{rawApi}}\n };\n /* End of Raw API */\n /* Data API */\n simplyDataApi = {\n {{dataApi}}\n };\n /* End of Data API */\n simplyApp = simply.app({\n /* Actions */\n actions: {\n {{actions}}\n },\n /* /Actions */\n /* Commands */\n commands: {\n {{commands}}\n },\n /* /Commands */\n /* Routes */\n routes: {\n {{routes}}\n }\n /* /Routes */\n });\n });\n function clone(ob) {\n return JSON.parse(JSON.stringify(ob));\n }\n function updateDataSource(name) {\n document.querySelectorAll('[data-simply-data=\"'+name+'\"]').forEach(function(list) {\n editor.list.applyDataSource(list, name);\n list.dataBindingPaused = 0;\n });\n }\n </script>\n </head>\n <body>\n <!-- Body HTML -->\n {{bodyHtml}}\n <!-- /Body HTML -->\n <!-- Component HTML templates -->\n {{componentTemplates}}\n <!-- /Component HTML templates -->\n <div class=\"main\" data-simply-field=\"page\" data-simply-content=\"template\">\n <!-- Page HTML templates -->\n {{pageTemplates}}\n <!-- /Page HTML templates -->\n </div>\n <script src=\"js/simply.everything.js\"></script>\n <script src=\"js/simply-edit.js\" data-simply-storage=\"none\" data-api-key=\"muze\"></script>\n <script>\n /* Transformers */\n editor.transformers = {\n {{transformers}}\n };\n /* /Transformers */\n </script>\n <script>\n /* Sorters */\n editor.sorters = {\n {{sorters}}\n };\n /* /Sorters */\n </script>\n <script>\n window.addEventListener(\"simply-content-loaded\", function() {\n /* Data sources */\n {{dataSources}}\n /* /Data sources */\n });\n </script>\n <!-- Foot HTML -->\n {{footHtml}}\n <!-- /Foot HTML -->\n </body>\n</html>", + "pagePreview.html" : "<!DOCTYPE HTML>\n<html lang=\"en\">\n <head>\n <meta charset=\"utf-8\">\n <!-- Component CSS -->\n <style>\n {{componentCss}}\n </style>\n <!-- /Component CSS -->\n <!-- Page CSS -->\n <style>\n {{pageCss}}\n </style>\n <!-- /Page CSS -->\n <!-- Head HTML -->\n {{headHtml}}\n <!-- /Head HTML -->\n <script>\n function clone(ob) {\n return JSON.parse(JSON.stringify(ob));\n }\n function updateDataSource(name) {\n document.querySelectorAll('[data-simply-data=\"'+name+'\"]').forEach(function(list) {\n editor.list.applyDataSource(list, name);\n list.dataBindingPaused = 0;\n });\n }\n </script>\n </head>\n <body>\n <!-- Component HTML templates -->\n {{componentTemplates}}\n <!-- /Component HTML templates -->\n <div class=\"main\" data-simply-field=\"page\" data-simply-content=\"template\">\n {{pagePreview}}\n </div>\n <script src=\"js/simply.everything.js\"></script>\n <script src=\"js/simply-edit.js\" data-simply-storage=\"none\" data-api-key=\"muze\"></script>\n <script>\n /* Transformers */\n editor.transformers = {\n {{transformers}}\n };\n /* /Transformers */\n </script>\n <script>\n /* Sorters */\n editor.sorters = {\n {{sorters}}\n };\n /* /Sorters */\n </script>\n <script>\n window.addEventListener(\"simply-content-loaded\", function() {\n /* Data sources */\n {{dataSources}}\n /* /Data sources */\n });\n </script>\n <!-- Foot HTML -->\n {{footHtml}}\n <!-- /Foot HTML -->\n </body>\n</html>" }; let elements = {}; diff --git a/www/index.html b/www/index.html index 8617839..e37e2ff 100644 --- a/www/index.html +++ b/www/index.html @@ -1562,8 +1562,8 @@ .catch(function() { let defaults = { "componentPreview.html" : "<!DOCTYPE HTML>\n<html lang=\"en\">\n <head>\n <meta charset=\"utf-8\">\n <!-- Component CSS -->\n <style>\n {{componentCss}}\n </style>\n <!-- /Component CSS -->\n <!-- Page CSS -->\n <style>\n {{pageCss}}\n </style>\n <!-- /Page CSS -->\n <!-- Head HTML -->\n {{headHtml}}\n <!-- /Head HTML -->\n <script>\n function clone(ob) {\n return JSON.parse(JSON.stringify(ob));\n }\n function updateDataSource(name) {\n document.querySelectorAll('[data-simply-data=\"'+name+'\"]').forEach(function(list) {\n editor.list.applyDataSource(list, name);\n list.dataBindingPaused = 0;\n });\n }\n </script>\n </head>\n <body>\n <!-- Component HTML templates -->\n {{componentTemplates}}\n <!-- /Component HTML templates -->\n <div class=\"main\">\n {{componentPreview}}\n </div>\n <script src=\"js/simply.everything.js\"></script>\n <script src=\"js/simply-edit.js\" data-simply-storage=\"none\" data-api-key=\"muze\"></script>\n <script>\n /* Transformers */\n editor.transformers = {\n {{transformers}}\n };\n /* /Transformers */\n </script>\n <script>\n /* Sorters */\n editor.sorters = {\n {{sorters}}\n };\n /* /Sorters */\n </script>\n <script>\n window.addEventListener(\"simply-content-loaded\", function() {\n /* Data sources */\n {{dataSources}}\n /* /Data sources */\n });\n </script>\n <!-- Foot HTML -->\n {{footHtml}}\n <!-- /Foot HTML -->\n </body>\n</html>", - "fullApp.html" : "<!DOCTYPE HTML>\n<html lang=\"en\">\n <head>\n <meta charset=\"utf-8\">\n <!-- Component CSS -->\n <style>\n {{componentCss}}\n </style>\n <!-- /Component CSS -->\n <!-- Page CSS -->\n <style>\n {{pageCss}}\n </style>\n <!-- /Page CSS -->\n <!-- Head HTML -->\n {{headHtml}}\n <!-- /Head HTML -->\n <script>\n var simplyDataApi = {};\n var simplyApp = {};\n window.addEventListener(\"simply-content-loaded\", function() {\n simply.bind = false;\n /* Raw API */\n var simplyRawApi = {\n {{rawApi}}\n };\n /* End of Raw API */\n /* Data API */\n simplyDataApi = {\n {{dataApi}}\n };\n /* End of Data API */\n simplyApp = simply.app({\n /* Actions */\n actions: {\n {{actions}}\n },\n /* /Actions */\n /* Commands */\n commands: {\n {{commands}}\n },\n /* /Commands */\n /* Routes */\n routes: {\n {{routes}}\n }\n /* /Routes */\n });\n });\n function clone(ob) {\n return JSON.parse(JSON.stringify(ob));\n }\n function updateDataSource(name) {\n document.querySelectorAll('[data-simply-data=\"'+name+'\"]').forEach(function(list) {\n editor.list.applyDataSource(list, name);\n list.dataBindingPaused = 0;\n });\n }\n </script>\n </head>\n <body>\n <!-- Body HTML -->\n {{bodyHtml}}\n <!-- /Body HTML -->\n <!-- Component HTML templates -->\n {{componentTemplates}}\n <!-- /Component HTML templates -->\n <header data-simply-path=\"/\" data-simply-field=\"header\" data-simply-content=\"template\" data-simply-default-value=\"Header\">\n <template data-simply-template='Header' rel=\"header\"></template>\n </header>\n <nav>\n <simply-render rel=\"menu\"></simply-render>\n </nav>\n <div class=\"main\" data-simply-field=\"page\" data-simply-content=\"template\">\n <!-- Page HTML templates -->\n {{pageTemplates}}\n <!-- /Page HTML templates -->\n </div>\n <script src=\"js/simply.everything.js\"></script>\n <script src=\"js/simply-edit.js\" data-simply-storage=\"none\" data-api-key=\"muze\"></script>\n <script>\n /* Transformers */\n editor.transformers = {\n {{transformers}}\n };\n /* /Transformers */\n </script>\n <script>\n /* Sorters */\n editor.sorters = {\n {{sorters}}\n };\n /* /Sorters */\n </script>\n <script>\n window.addEventListener(\"simply-content-loaded\", function() {\n /* Data sources */\n {{dataSources}}\n /* /Data sources */\n });\n </script>\n <!-- Foot HTML -->\n {{footHtml}}\n <!-- /Foot HTML -->\n </body>\n</html>", - "pagePreview.html" : "<!DOCTYPE HTML>\n<html lang=\"en\">\n <head>\n <meta charset=\"utf-8\">\n <!-- Component CSS -->\n <style>\n {{componentCss}}\n </style>\n <!-- /Component CSS -->\n <!-- Page CSS -->\n <style>\n {{pageCss}}\n </style>\n <!-- /Page CSS -->\n <!-- Head HTML -->\n {{headHtml}}\n <!-- /Head HTML -->\n <script>\n function clone(ob) {\n return JSON.parse(JSON.stringify(ob));\n }\n function updateDataSource(name) {\n document.querySelectorAll('[data-simply-data=\"'+name+'\"]').forEach(function(list) {\n editor.list.applyDataSource(list, name);\n list.dataBindingPaused = 0;\n });\n }\n </script>\n </head>\n <body>\n <!-- Component HTML templates -->\n {{componentTemplates}}\n <!-- /Component HTML templates -->\n <header data-simply-path=\"/\" data-simply-field=\"header\" data-simply-content=\"template\" data-simply-default-value=\"Header\">\n <template data-simply-template='Header' rel=\"header\"></template>\n </header>\n <nav>\n <simply-render rel=\"menu\"></simply-render>\n </nav>\n <div class=\"main\" data-simply-field=\"page\" data-simply-content=\"template\">\n {{pagePreview}}\n </div>\n <script src=\"js/simply.everything.js\"></script>\n <script src=\"js/simply-edit.js\" data-simply-storage=\"none\" data-api-key=\"muze\"></script>\n <script>\n /* Transformers */\n editor.transformers = {\n {{transformers}}\n };\n /* /Transformers */\n </script>\n <script>\n /* Sorters */\n editor.sorters = {\n {{sorters}}\n };\n /* /Sorters */\n </script>\n <script>\n window.addEventListener(\"simply-content-loaded\", function() {\n /* Data sources */\n {{dataSources}}\n /* /Data sources */\n });\n </script>\n <!-- Foot HTML -->\n {{footHtml}}\n <!-- /Foot HTML -->\n </body>\n</html>" + "fullApp.html" : "<!DOCTYPE HTML>\n<html lang=\"en\">\n <head>\n <meta charset=\"utf-8\">\n <!-- Component CSS -->\n <style>\n {{componentCss}}\n </style>\n <!-- /Component CSS -->\n <!-- Page CSS -->\n <style>\n {{pageCss}}\n </style>\n <!-- /Page CSS -->\n <!-- Head HTML -->\n {{headHtml}}\n <!-- /Head HTML -->\n <script>\n var simplyDataApi = {};\n var simplyApp = {};\n window.addEventListener(\"simply-content-loaded\", function() {\n simply.bind = false;\n /* Raw API */\n var simplyRawApi = {\n {{rawApi}}\n };\n /* End of Raw API */\n /* Data API */\n simplyDataApi = {\n {{dataApi}}\n };\n /* End of Data API */\n simplyApp = simply.app({\n /* Actions */\n actions: {\n {{actions}}\n },\n /* /Actions */\n /* Commands */\n commands: {\n {{commands}}\n },\n /* /Commands */\n /* Routes */\n routes: {\n {{routes}}\n }\n /* /Routes */\n });\n });\n function clone(ob) {\n return JSON.parse(JSON.stringify(ob));\n }\n function updateDataSource(name) {\n document.querySelectorAll('[data-simply-data=\"'+name+'\"]').forEach(function(list) {\n editor.list.applyDataSource(list, name);\n list.dataBindingPaused = 0;\n });\n }\n </script>\n </head>\n <body>\n <!-- Body HTML -->\n {{bodyHtml}}\n <!-- /Body HTML -->\n <!-- Component HTML templates -->\n {{componentTemplates}}\n <!-- /Component HTML templates -->\n <div class=\"main\" data-simply-field=\"page\" data-simply-content=\"template\">\n <!-- Page HTML templates -->\n {{pageTemplates}}\n <!-- /Page HTML templates -->\n </div>\n <script src=\"js/simply.everything.js\"></script>\n <script src=\"js/simply-edit.js\" data-simply-storage=\"none\" data-api-key=\"muze\"></script>\n <script>\n /* Transformers */\n editor.transformers = {\n {{transformers}}\n };\n /* /Transformers */\n </script>\n <script>\n /* Sorters */\n editor.sorters = {\n {{sorters}}\n };\n /* /Sorters */\n </script>\n <script>\n window.addEventListener(\"simply-content-loaded\", function() {\n /* Data sources */\n {{dataSources}}\n /* /Data sources */\n });\n </script>\n <!-- Foot HTML -->\n {{footHtml}}\n <!-- /Foot HTML -->\n </body>\n</html>", + "pagePreview.html" : "<!DOCTYPE HTML>\n<html lang=\"en\">\n <head>\n <meta charset=\"utf-8\">\n <!-- Component CSS -->\n <style>\n {{componentCss}}\n </style>\n <!-- /Component CSS -->\n <!-- Page CSS -->\n <style>\n {{pageCss}}\n </style>\n <!-- /Page CSS -->\n <!-- Head HTML -->\n {{headHtml}}\n <!-- /Head HTML -->\n <script>\n function clone(ob) {\n return JSON.parse(JSON.stringify(ob));\n }\n function updateDataSource(name) {\n document.querySelectorAll('[data-simply-data=\"'+name+'\"]').forEach(function(list) {\n editor.list.applyDataSource(list, name);\n list.dataBindingPaused = 0;\n });\n }\n </script>\n </head>\n <body>\n <!-- Component HTML templates -->\n {{componentTemplates}}\n <!-- /Component HTML templates -->\n <div class=\"main\" data-simply-field=\"page\" data-simply-content=\"template\">\n {{pagePreview}}\n </div>\n <script src=\"js/simply.everything.js\"></script>\n <script src=\"js/simply-edit.js\" data-simply-storage=\"none\" data-api-key=\"muze\"></script>\n <script>\n /* Transformers */\n editor.transformers = {\n {{transformers}}\n };\n /* /Transformers */\n </script>\n <script>\n /* Sorters */\n editor.sorters = {\n {{sorters}}\n };\n /* /Sorters */\n </script>\n <script>\n window.addEventListener(\"simply-content-loaded\", function() {\n /* Data sources */\n {{dataSources}}\n /* /Data sources */\n });\n </script>\n <!-- Foot HTML -->\n {{footHtml}}\n <!-- /Foot HTML -->\n </body>\n</html>" }; let elements = {};