Feature/imports UI

components/component-import-url/actions/build.js

@@ -0,0 +1,34 @@
+function(builderTemplate, data) {
+  var build = builderTemplate;
+  let replacements = {
+    "shortcuts" : editor.transformers.simplyPreviewShortcuts.render(data.shortcuts ?? []),
+    "actions" : editor.transformers.simplyPreviewActions.render(data.actions ?? []),
+    "commands" : editor.transformers.simplyPreviewCommands.render(data.commands ?? []),
+    "dataApi" : editor.transformers.simplyPreviewDataApi.render(data.dataApi ?? []),
+    "rawApi" : editor.transformers.simplyPreviewRawApi.render(data.rawApi ?? []),
+    "routes" : editor.transformers.simplyPreviewRoutes.render(data.routes ?? []),
+    "dataSources" : editor.transformers.simplyPreviewDataSources.render(data.dataSources ?? []),
+    "transformers" : editor.transformers.simplyPreviewTransformers.render(data.transformers ?? []),
+    "sorters" : editor.transformers.simplyPreviewSorters.render(data.sorters ?? []),
+    "pageTemplates" :editor.transformers.simplyPreviewPageTemplates.render(data.pageTemplates ?? []),
+    "pageCss" : editor.transformers.simplyPreviewPageCss.render(data.pageCss ?? []),
+    "componentCss" : editor.transformers.simplyPreviewComponentCss.render(data.componentCss ?? []),
+    "componentTemplates" : editor.transformers.simplyPreviewComponentTemplates.render(data.componentTemplates ?? []),
+    "headHtml": editor.transformers.simplyPreviewHeadHtml.render(data.headHtml ?? []),
+    "footHtml": editor.transformers.simplyPreviewFootHtml.render(data.footHtml ?? []),
+    "bodyHtml" : editor.transformers.simplyPreviewBodyHtml.render(data.bodyHtml ?? [])
+  };
+
+  Object.keys(replacements).forEach(function(replacement) {
+    matches = build.match("(\\s*){{" + replacement + "}}");
+    if (matches) {
+      let indentedNewline = matches[1];
+      if (indentedNewline == '') {
+        indentedNewline = "\n";
+      }
+      build = build.replace("{{" + replacement + "}}", replacements[replacement].replace(/\n/g, indentedNewline));
+    }
+  });
+
+  return build;
+}

components/component-import-url/commands/addImportUrl.js

@@ -0,0 +1,3 @@
+function(el) {
+  editor.pageData.component.parts.importUrls.push({});
+}

components/component-import-url/componentCss/simplycode-import-url.css

@@ -0,0 +1,5 @@
+.simplycode-editor-url input {
+  width: 100%;
+  padding: 10px;
+  font-size: 1.2em;
+}

components/component-import-url/componentTemplates/componentImportUrl.html

@@ -0,0 +1,36 @@
+<details class="simplycode-component">
+  <summary data-simply-command="initEditors" title="These imports are fetched as modules for your project.">
+    <span data-simply-field="count.imports" data-simply-content="attributes" data-simply-attributes="data-count">
+      Import URL
+    </span>
+    <span class="simplycode-controls">
+      <button class="simplycode-button" data-simply-command="addImportUrl">Add import URL</button>
+    </span>
+  </summary>
+  <div class="simplycode-code-method" data-simply-list="component.parts.importUrls">
+    <template>
+      <div class="simplycode-part" data-simply-field="deleted" data-simply-content="attributes" data-simply-attributes="data-deleted">
+        <div class="simplycode-part-header">
+          <div class="simplycode-tabs">
+            <input class="simplycode-tab" data-simply-field="import" required placeholder="Import name">
+            <label class="simplycode-tab">
+              <input type="radio" name="importEditor" checked value="url" data-simply-field="editor">
+              <span>URL</span>
+            </label>
+          </div>
+          <div class="simplycode-options">
+            <button class="simplycode-button" draggable="true">Drag to move</button>
+            <button class="simplycode-button" data-simply-field="deleted" data-simply-content="attributes" data-simply-attributes="data-deleted" data-simply-command="deleteEntry">Delete import URL</button>
+          </div>
+        </div>
+        <div class="simplycode-editors">
+          <div class="simplycode-editor-url" data-simply-field="editor" data-simply-content="template" data-simply-default-template="url">
+            <template data-simply-template="url">
+              <input type="text" data-simply-field="url" placeholder="https://....">
+            </template>
+          </div>
+        </div>
+      </div>
+    </template>
+  </div>
+</details>

components/component-import-url/meta.json

@@ -0,0 +1 @@
+{"id":"component-import-url","description":"Edit form for component import URL"}

components/data-format/dataApi/mergeComponent.js

@@ -118,6 +118,23 @@ function(component) {
           componentPart.contents = JSON.stringify(Object.values(contents));
         }
         break;
+      case "importUrls":
+        if (typeof componentPart.contents === "object") {
+          var contents = {};
+          componentPart.contents.forEach(function(partFile) {
+            if (partFile.id.match(/\.url$/)) {
+              partId = partFile.id.replace(/\.url$/, '');
+              if (typeof contents[partId] === "undefined") {
+                contents[partId] = {
+                  import : partId
+                }
+              }
+              contents[partId]['url'] = partFile.contents;
+            }
+          });
+          componentPart.contents = JSON.stringify(Object.values(contents));
+        }
+        break;
       case "rawApi":
       case "dataApi":
         if (typeof componentPart.contents === "object") {

components/data-format/dataApi/savePart.js

@@ -109,6 +109,22 @@ function(basePath, part, contents) {
         }
       });
       break;
+    case "importUrls":
+      contents.forEach(function(componentPart, componentIndex) {
+        if (!componentPart.url) {
+          throw new Error("Required part name is empty");
+        }
+        if (componentPart.deleted == "true") {
+          results.push(simplyRawApi.delete(basePath + "/" + part + "/" + componentPart.import + ".url"));
+          contents.splice(componentIndex, 1);
+        } else {
+          results.push(simplyRawApi.putRaw(
+            basePath + "/" + part + "/" + componentPart.import + ".url", {},
+            componentPart.url
+          ));
+        }
+      });
+      break;
     case "rawApi":
     case "dataApi":
       contents.forEach(function(componentPart, componentIndex) {

components/navigation/actions/getMainMenu.js

@@ -36,6 +36,13 @@ function() {
             href : "#builders",
             "data-path" : "builders"
           }
+        },
+        {
+          item : {
+            innerHTML : "Imports",
+            href : "#imports",
+            "data-path" : "imports"
+          }
         }
       ]
     );

components/simply-toolbar/componentTemplates/simply-toolbar-import.html

@@ -0,0 +1,28 @@
+<div class="simply-toolbar-title">
+  <simply-render rel="logo"></simply-render>
+</div>
+<button data-simply-accesskey="Control+s" class="ds-button simply-toolbar-button" data-simply-command="saveImport">
+  <svg class="ds-icon ds-icon-feather">
+    <use xlink:href="/assets/img/feather-sprite.svg#save">
+    </use></svg>
+  Save
+</button>
+<button class="ds-button simply-toolbar-button" data-simply-command="deleteImport">
+  <svg class="ds-icon ds-icon-feather">
+    <use xlink:href="/assets/img/feather-sprite.svg#trash">
+    </use></svg>
+  Delete
+</button>
+<span class="simply-toolbar-push-right"></span>
+<button class="ds-button simply-toolbar-button" data-simply-command="preview">
+  <svg class="ds-icon ds-icon-feather">
+    <use xlink:href="/assets/img/feather-sprite.svg#eye">
+    </use></svg>
+  Preview
+</button>
+<button disabled class="ds-button simply-toolbar-button">
+  <svg class="ds-icon ds-icon-feather">
+    <use xlink:href="/assets/img/feather-sprite.svg#check">
+    </use></svg>
+  Publish
+</button>

components/simply-toolbar/componentTemplates/simply-toolbar.html

@@ -1,6 +1,7 @@
 <nav class="simply-toolbar simply-toolbar-main" data-simply-field="page" data-simply-section="simply-code-management" data-simply-content="template" data-simply-default-template="default" data-simply-default-value="default">
   <template data-simply-template="default" rel="simply-toolbar-default"></template>
   <template data-simply-template="Edit builder" rel="simply-toolbar-builder"></template>
+  <template data-simply-template="Edit import" rel="simply-toolbar-import"></template>
   <template data-simply-template="Edit page" rel="simply-toolbar-page"></template>
   <template data-simply-template="Edit component" rel="simply-toolbar-component"></template>
   <template data-simply-template="Edit base component" rel="simply-toolbar-base-component"></template>