Adding a preloader

krasimir · Nov 14, 2018 · 7c08f2c · 7c08f2c
1 parent 8247e7c
commit 7c08f2c
Show file tree

Hide file tree

Showing 34 changed files with 1,224 additions and 243 deletions.
diff --git a/_assets/demoit.png b/_assets/demoit.png
diff --git a/_assets/demoit.psd b/_assets/demoit.psd
diff --git a/_assets/demoit_100x100.png b/_assets/demoit_100x100.png
diff --git a/_assets/demoit_200x200.png b/_assets/demoit_200x200.png
diff --git a/_assets/demoit_32x32.png b/_assets/demoit_32x32.png
diff --git a/_assets/demoit_64x64.png b/_assets/demoit_64x64.png
diff --git a/demoit.zip b/demoit.zip
diff --git a/dist/demoit.js b/dist/demoit.js
diff --git a/dist/img/demoit_100x100.png b/dist/img/demoit_100x100.png
diff --git a/dist/img/demoit_64x64.png b/dist/img/demoit_64x64.png
diff --git a/dist/index.html b/dist/index.html
@@ -5,6 +5,7 @@
   <title>demoit</title>
   <link rel="stylesheet" href="./vendor/codemirror/codemirror.css">
   <link rel="stylesheet" href="./styles.css">
+  <link rel="shortcut icon" type="image/png" href="./img/demoit_64x64.png"/>
 </head>
 <body>
 
@@ -81,14 +82,14 @@ <h2>Dependencies</h2>
     </section>
   </div>
 
-  <script src="./vendor/codemirror/codemirror.js"></script>
-  <script src="./vendor/codemirror/javascript.js"></script>
-  <script src="./vendor/codemirror/xml.js"></script>
-  <script src="./vendor/codemirror/jsx.js"></script>
-  <script src="./vendor/codemirror/mark-selection.js"></script>
-  <script src="./vendor/split.js"></script>
-  <script src="./vendor/babel-6.26.0.min.js"></script>
-  <script src="./vendor/babel-polyfill@6.26.0.js"></script>
+  <div class="preloader">
+    <img src="./img/demoit_100x100.png" alt="demoit" class="logo"/>
+    <div class="progress">
+      <div class="value"></div>
+    </div>
+    <p class="file">...</p>
+  </div>
+
   <script src="./demoit.js"></script>
 
 </body>

diff --git a/dist/styles.css b/dist/styles.css
@@ -15,10 +15,6 @@ body {
   color: #000;
   font-size: 20px;
   line-height: 20px;
-  fill: currentColor;
-  background-image: url("data:image/svg+xml;utf8,<svg fill='#99c6cc' width='100' height='100' viewBox='0 0 2048 1792' xmlns='http://www.w3.org/2000/svg'><path d='M480 1280q-66 0-113-47t-47-113v-704q0-66 47-113t113-47h1088q66 0 113 47t47 113v704q0 66-47 113t-113 47h-1088zm-32-864v704q0 13 9.5 22.5t22.5 9.5h1088q13 0 22.5-9.5t9.5-22.5v-704q0-13-9.5-22.5t-22.5-9.5h-1088q-13 0-22.5 9.5t-9.5 22.5zm1376 928h160v96q0 40-47 68t-113 28h-1600q-66 0-113-28t-47-68v-96h1760zm-720 96q16 0 16-16t-16-16h-160q-16 0-16 16t16 16h160z'/></svg>");
-  background-repeat: no-repeat;
-  background-position: center center;
 }
 svg {
   fill: currentColor;
@@ -27,6 +23,7 @@ svg {
   width: 100%;
   height: 100%;
   opacity: 0;
+  visibility: hidden;
   transition: opacity 500ms ease;
   background-color: #263238;
 }
@@ -274,4 +271,40 @@ svg {
 /*************************** DEPENDENCIES */
 .manage-dependencies textarea.dependencies-list {
   height: 300px;
+}
+/*************************** preloader */
+.preloader {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 200px;
+  height: 200px;
+  margin-left: -100px;
+  margin-top: -100px;
+  opacity: 0;
+  transition: opacity 1000ms;
+}
+.preloader .logo {
+  display: block;
+  width: 100px;
+  margin: 0 auto;
+  opacity: 0.8;
+}
+.preloader .progress {
+  margin-top: 2em;
+  margin-bottom: 0.5em;
+  width: 200px;
+  height: 10px;
+  background: rgb(126, 126, 126);
+}
+.preloader .value {
+  width: 0;
+  height: 100%;
+  background: #000;
+}
+.preloader .file {
+  font-size: 0.6em;
+  margin: 1em 0 0 0;
+  padding: 0;
+  color: rgb(177, 177, 177);
 }
diff --git a/package.json b/package.json
@@ -8,8 +8,8 @@
     "url": "git+https://github.com/krasimir/demoit.git"
   },
   "scripts": {
-    "dev": "webpack",
-    "release": "webpack --config ./webpack.config.prod.js && node ./scripts/zipit.js"
+    "dev": "concurrently \"webpack\" \"cpx ./src/index.html ./dist --watch\" \"cpx ./src/styles.css ./dist --watch\"",
+    "release": "webpack --config ./webpack.config.prod.js && cleancss ./src/styles.css -o ./dist/styles.css && cp ./src/index.html ./dist/index.html && node ./scripts/zipit.js"
   },
   "keywords": [
     "demo",
@@ -29,8 +29,13 @@
     "@babel/preset-env": "7.1.5",
     "@babel/runtime": "7.1.5",
     "babel-loader": "8.0.4",
+    "concurrently": "4.0.1",
+    "cpx": "1.5.0",
     "webpack": "4.25.1",
     "webpack-cli": "3.1.2",
     "zip-folder": "1.0.0"
+  },
+  "dependencies": {
+    "clean-css-cli": "4.2.1"
   }
 }
diff --git a/src/index.html b/src/index.html
@@ -0,0 +1,96 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>demoit</title>
+  <link rel="stylesheet" href="./vendor/codemirror/codemirror.css">
+  <link rel="stylesheet" href="./styles.css">
+  <link rel="shortcut icon" type="image/png" href="./img/demoit_64x64.png"/>
+</head>
+<body>
+
+  <div class="container">
+    <div class="left">
+      <div class="output" id="output">
+        <div class="hint">&lt;div id="output" /&gt;</div>
+      </div>
+      <div class="console">
+        <div class="hint">console.log</div>
+      </div>
+    </div>
+    <div class="right">
+      <div class="files">
+        <div class="nav"></div>
+        <div class="options">
+          <ul>
+            <li class="dependencies">
+              <a href="javascript:void(0);" title="Manage your dependencies">
+                <svg width="24" height="24" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M896 1629l640-349v-636l-640 233v752zm-64-865l698-254-698-254-698 254zm832-252v768q0 35-18 65t-49 47l-704 384q-28 16-61 16t-61-16l-704-384q-31-17-49-47t-18-65v-768q0-40 23-73t61-47l704-256q22-8 44-8t44 8l704 256q38 14 61 47t23 73z"/></svg>
+                <!-- <span>Dependencies</span> -->
+              </a>
+            </li>
+            <li class="storage">
+              <a href="javascript:void(0);" title="Storage">
+                <svg width="24" height="24" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M128 1408h1024v-128h-1024v128zm0-512h1024v-128h-1024v128zm1568 448q0-40-28-68t-68-28-68 28-28 68 28 68 68 28 68-28 28-68zm-1568-960h1024v-128h-1024v128zm1568 448q0-40-28-68t-68-28-68 28-28 68 28 68 68 28 68-28 28-68zm0-512q0-40-28-68t-68-28-68 28-28 68 28 68 68 28 68-28 28-68zm96 832v384h-1792v-384h1792zm0-512v384h-1792v-384h1792zm0-512v384h-1792v-384h1792z"/></svg>
+                <!-- <span>Local storage</span> -->
+              </a>
+            </li>
+            <li class="github">
+              <a href="https://github.com/krasimir/demoit" title="Check out Demoit on Github" target="_blank">
+                <svg width="24" height="24" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M896 128q209 0 385.5 103t279.5 279.5 103 385.5q0 251-146.5 451.5t-378.5 277.5q-27 5-40-7t-13-30q0-3 .5-76.5t.5-134.5q0-97-52-142 57-6 102.5-18t94-39 81-66.5 53-105 20.5-150.5q0-119-79-206 37-91-8-204-28-9-81 11t-92 44l-38 24q-93-26-192-26t-192 26q-16-11-42.5-27t-83.5-38.5-85-13.5q-45 113-8 204-79 87-79 206 0 85 20.5 150t52.5 105 80.5 67 94 39 102.5 18q-39 36-49 103-21 10-45 15t-57 5-65.5-21.5-55.5-62.5q-19-32-48.5-52t-49.5-24l-20-3q-21 0-29 4.5t-5 11.5 9 14 13 12l7 5q22 10 43.5 38t31.5 51l10 23q13 38 44 61.5t67 30 69.5 7 55.5-3.5l23-4q0 38 .5 88.5t.5 54.5q0 18-13 30t-40 7q-232-77-378.5-277.5t-146.5-451.5q0-209 103-385.5t279.5-279.5 385.5-103zm-477 1103q3-7-7-12-10-3-13 2-3 7 7 12 9 6 13-2zm31 34q7-5-2-16-10-9-16-3-7 5 2 16 10 10 16 3zm30 45q9-7 0-19-8-13-17-6-9 5 0 18t17 7zm42 42q8-8-4-19-12-12-20-3-9 8 4 19 12 12 20 3zm57 25q3-11-13-16-15-4-19 7t13 15q15 6 19-6zm63 5q0-13-17-11-16 0-16 11 0 13 17 11 16 0 16-11zm58-10q-2-11-18-9-16 3-14 15t18 8 14-14z"/></svg>
+              </a>
+            </li>
+          </ul>
+        </div>
+      </div>
+      <div class="js-code-editor"></div>
+    </div>
+  </div>
+
+  <div class="modal edit-file">
+    <section>
+      <input name="filename"/>
+      <button class="save">Save</button>
+      <button class="cancel secondary"><svg width="24" height="24" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M1490 1322q0 40-28 68l-136 136q-28 28-68 28t-68-28l-294-294-294 294q-28 28-68 28t-68-28l-136-136q-28-28-28-68t28-68l294-294-294-294q-28-28-28-68t28-68l136-136q28-28 68-28t68 28l294 294 294-294q28-28 68-28t68 28l136 136q28 28 28 68t-28 68l-294 294 294 294q28 28 28 68z"/></svg></button>
+      <hr />
+      <button class="delete secondary"><svg width="24" height="24" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M704 1376v-704q0-14-9-23t-23-9h-64q-14 0-23 9t-9 23v704q0 14 9 23t23 9h64q14 0 23-9t9-23zm256 0v-704q0-14-9-23t-23-9h-64q-14 0-23 9t-9 23v704q0 14 9 23t23 9h64q14 0 23-9t9-23zm256 0v-704q0-14-9-23t-23-9h-64q-14 0-23 9t-9 23v704q0 14 9 23t23 9h64q14 0 23-9t9-23zm-544-992h448l-48-117q-7-9-17-11h-317q-10 2-17 11zm928 32v64q0 14-9 23t-23 9h-96v948q0 83-47 143.5t-113 60.5h-832q-66 0-113-58.5t-47-141.5v-952h-96q-14 0-23-9t-9-23v-64q0-14 9-23t23-9h309l70-167q15-37 54-63t79-26h320q40 0 79 26t54 63l70 167h309q14 0 23 9t9 23z"/></svg></button>
+    </section>
+  </div>
+
+  <div class="modal manage-storage">
+    <section>
+      <h2>Type of storage</h2>
+      <p>At the moment Demoit uses <a href="https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage">localStorage API</a> to save your progress.</p>
+      <hr />
+      <h2>Transfer your work</h2>
+      <p>Download <a href="https://github.com/krasimir/demoit/raw/master/demoit.zip">Demoit.zip</a>. Unzip. Get the JSON below and save it in <i>settings.json</i> file.</p>
+      <textarea class="settings-json"></textarea>
+      <button class="cancel secondary"><svg width="24" height="24" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M1490 1322q0 40-28 68l-136 136q-28 28-68 28t-68-28l-294-294-294 294q-28 28-68 28t-68-28l-136-136q-28-28-28-68t28-68l294-294-294-294q-28-28-28-68t28-68l136-136q28-28 68-28t68 28l294 294 294-294q28-28 68-28t68 28l136 136q28 28 28 68t-28 68l-294 294 294 294q28 28 28 68z"/></svg></button>
+      <hr />
+      <p>You can reset to the data in your <a href="./settings.json" target="_blank">settings.json</a> file.</p>
+      <button class="clear-storage secondary"><svg width="24" height="24" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M704 1376v-704q0-14-9-23t-23-9h-64q-14 0-23 9t-9 23v704q0 14 9 23t23 9h64q14 0 23-9t9-23zm256 0v-704q0-14-9-23t-23-9h-64q-14 0-23 9t-9 23v704q0 14 9 23t23 9h64q14 0 23-9t9-23zm256 0v-704q0-14-9-23t-23-9h-64q-14 0-23 9t-9 23v704q0 14 9 23t23 9h64q14 0 23-9t9-23zm-544-992h448l-48-117q-7-9-17-11h-317q-10 2-17 11zm928 32v64q0 14-9 23t-23 9h-96v948q0 83-47 143.5t-113 60.5h-832q-66 0-113-58.5t-47-141.5v-952h-96q-14 0-23-9t-9-23v-64q0-14 9-23t23-9h309l70-167q15-37 54-63t79-26h320q40 0 79 26t54 63l70 167h309q14 0 23 9t9 23z"/></svg><span>Clean up localStorage</span></button>
+    </section>
+  </div>
+
+  <div class="modal manage-dependencies">
+    <section>
+      <h2>Dependencies</h2>
+      <button class="cancel secondary"><svg width="24" height="24" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M1490 1322q0 40-28 68l-136 136q-28 28-68 28t-68-28l-294-294-294 294q-28 28-68 28t-68-28l-136-136q-28-28-28-68t28-68l294-294-294-294q-28-28-28-68t28-68l136-136q28-28 68-28t68 28l294 294 294-294q28-28 68-28t68 28l136 136q28 28 28 68t-28 68l-294 294 294 294q28 28 28 68z"/></svg></button>
+      <textarea class="dependencies-list"></textarea>
+      <p><small>(Separate your dependencies by a new line)</small></p>
+      <button class="save">Save</button>
+    </section>
+  </div>
+
+  <div class="preloader">
+    <img src="./img/demoit_100x100.png" alt="demoit" class="logo"/>
+    <div class="progress">
+      <div class="value"></div>
+    </div>
+    <p class="file">...</p>
+  </div>
+
+  <script src="./demoit.js"></script>
+
+</body>
+</html>
diff --git a/src/console.js → src/js/console.js b/src/console.js → src/js/console.js
diff --git a/src/js/dependencies.js b/src/js/dependencies.js
@@ -0,0 +1,104 @@
+import { el } from './utils';
+
+const LOADED_FILES_CACHE = {};
+
+export const addJSFile = function (path, done) {
+  if (LOADED_FILES_CACHE[path]) return done();
+
+  const node = document.createElement('script');
+
+  node.src = path;
+  node.addEventListener('load', () => {
+    LOADED_FILES_CACHE[path] = true;
+    done();
+  });
+  document.body.appendChild(node);
+}
+export const addCSSFile = function (path, done) {
+  if (LOADED_FILES_CACHE[path]) return done();
+
+  const node = document.createElement('link');
+
+  node.setAttribute('rel', 'stylesheet');
+  node.setAttribute('type', 'text/css');
+  node.setAttribute('href', path);
+  node.addEventListener('load', () => {
+    LOADED_FILES_CACHE[path] = true;
+    done();
+  });
+  document.body.appendChild(node);
+}
+export const addStyleString = function (str) {
+  const node = document.createElement('style');
+
+  node.innerHTML = str;
+  document.body.appendChild(node);
+}
+export const addScriptString = function (str) {
+  const node = document.createElement('script');
+
+  node.innerHTML = str;
+  document.body.appendChild(node);
+}
+export const getDistFolderURL = function () {
+  try {
+    return [].slice.call(document.querySelectorAll('script[src]'))
+      .map(({ src }) => src)
+      .find(url => url.match('demoit.js'))
+      .replace('demoit.js', '');
+  } catch(error) {
+    return './';
+  }
+}
+export const load = async function (dependencies, status = () => {}) {
+  return new Promise(done => {
+    (function load(index) {
+      status(index);
+      if (index === dependencies.length) {
+        done();
+        return;
+      }
+
+      const resource = dependencies[index];
+      const extension = resource.split('.').pop().toLowerCase();
+
+      if (extension === 'js') {
+        addJSFile(resource, () => load(index + 1))
+      } else if (extension === 'css') {
+        addCSSFile(resource, () => load(index + 1));
+      } else {
+        load(index + 1)
+      }
+    })(0);
+  });
+}
+
+export default async function dependencies(storage) {
+  const preloader = el('.preloader');
+  const progress = el('.value');
+  const currentFile = el('.file');
+  const dependencies = [
+    './vendor/codemirror/codemirror.js',
+    './vendor/codemirror/javascript.js',
+    './vendor/codemirror/xml.js',
+    './vendor/codemirror/jsx.js',
+    './vendor/codemirror/mark-selection.js',
+    './vendor/split.js',
+    './vendor/babel-6.26.0.min.js',
+    './vendor/babel-polyfill@6.26.0.js',
+    `./vendor/codemirror/theme/${ storage.getEditorSettings().theme }.css`,
+    ...storage.getDependencies()
+  ];
+
+  preloader.style.opacity = 1;
+
+  await load(dependencies, index => {
+    progress.style.width = (100 * (index / dependencies.length)) + '%';
+    if (index < dependencies.length) {
+      currentFile.innerHTML = dependencies[index].split(/\//).pop();
+    } else {
+      currentFile.style.display = 'none';
+      preloader.style.opacity = 0;
+    }
+  });
+}
diff --git a/src/editor.js → src/js/editor.js b/src/editor.js → src/js/editor.js
@@ -1,6 +1,6 @@
-import { addStyleString, el, getDistFolderURL } from './utils';
+import { el } from './utils';
 
-export const createEditor = async function (editorSettings, value, onSave, onChange) {
+export default async function editor(editorSettings, value, onSave, onChange) {
   const container = el('.js-code-editor');
   const editor = CodeMirror(container, {
     value: value || '',
@@ -22,14 +22,4 @@ export const createEditor = async function (editorSettings, value, onSave, onCha
   editor.focus();
 
   return editor;
-};
-export const loadEditorTheme = async function({ theme }) {
-  try {
-    const res = await fetch(`${ getDistFolderURL() }vendor/codemirror/theme/${ theme }.css`);
-    const css = await res.text();
-
-    addStyleString(css);
-  } catch (error) {
-    console.log(error);
-  }
-}
+};
diff --git a/src/execute.js → src/js/execute.js b/src/execute.js → src/js/execute.js
diff --git a/src/index.js → src/js/index.js b/src/index.js → src/js/index.js
@@ -1,6 +1,6 @@
+import { el } from './utils';
 import createStorage from './storage';
-import { loadDependencies, el } from './utils';
-import { loadEditorTheme, createEditor } from './editor';
+import createEditor from './editor';
 import createConsolePanel from './console';
 import screenSplit from './screenSplit';
 import navigation from './navigation';
@@ -9,9 +9,9 @@ import teardown from './teardown';
 import FileModal from './modals/FileModal';
 import StorageModal from './modals/StorageModal';
 import DependenciesModal from './modals/DependenciesModal';
+import dependencies from './dependencies';
 
 window.onload = async function () {
-  screenSplit();
 
   const storage = await createStorage();
   const { content: initialEditorValue } = storage.getCurrentFile();
@@ -24,8 +24,7 @@ window.onload = async function () {
   DependenciesModal(storage);
 
   // loading initial resources
-  await loadDependencies(storage.getDependencies());
-  await loadEditorTheme(storage.getEditorSettings());
+  await dependencies(storage);
 
   // editor
   const editor = await createEditor(
@@ -68,8 +67,10 @@ window.onload = async function () {
     }
   );
 
-  execute();
-
+  el('.container').style.visibility = 'visible';
   el('.container').style.opacity = 1;
-  el('body').style.backgroundImage = 'none';
+
+  setTimeout(() => screenSplit(), 100);
+
+  execute();
 };