download project

TODO.md

@@ -1,14 +1,14 @@
 # TODO list
 
 - hot keys for InfoPage
-- ! Download project button
 - switch monaco themes
 - nice css styles
 - support of smartphones
 - replace font awesome 4 for something light
     https://github.com/danklammer/bytesize-icons
 - load files with full path
 - dot files visualization
+- use JSZip for storing in localStorage
 ? Matlab language support
 ? dot language support
 ? platform.yml

package.json

@@ -54,6 +54,7 @@
     "font-awesome": "^4.7.0",
     "heta-compiler": "^0.6.20",
     "jquery": "^3.7.0",
+    "jszip": "^3.10.1",
     "monaco-editor": "^0.41.0",
     "semver": "^7.5.4",
     "w3-css": "^4.1.0"

src/app.js

@@ -6,6 +6,7 @@ import 'font-awesome/css/font-awesome.min.css';
 import './dropping.css';
 
 import * as path from 'path';
+import JSZip from 'jszip';
 import { PagesCollection, EditorPage, ConsolePage, InfoPage } from './page';
 import DnDFileController from './drug-and-drop';
 
@@ -137,6 +138,7 @@ $(async () => {
         loadDefaultPages();
       }
     });
+    $('#hc-download').on('click', () => downloadPlatform());
 
     // Drag and Drop
     new DnDFileController(async (files) => {
@@ -223,6 +225,30 @@ $(async () => {
     });
 });
 
+async function downloadPlatform() {
+  const zip = new JSZip();
+
+  [...leftCollection.pagesStorage].map(([filepath, page]) => {
+    let ab = page.getArrayBuffer();
+    let filenameRelative = path.relative('/', filepath);
+    zip.file(filenameRelative, ab, {binary: false});
+  });
+  [...rightCollection.pagesStorage].map(([filepath, page]) => {
+    let ab = page.getArrayBuffer();
+    let filenameRelative = path.relative('/', filepath);
+    zip.file(filenameRelative, ab, {binary: false});
+  });
+
+  let blob = await zip.generateAsync({type: 'blob'});
+
+  let url = window.URL.createObjectURL(blob);
+  let a = document.createElement('a');
+  a.style.display = 'none';
+  a.href = url;
+  a.download = 'platform.zip';
+  a.click();
+}
+
 function updateWindowHeight(){
     let h = document.documentElement.clientHeight - $('#topDiv').outerHeight();
     $('#mainDiv').height(h + 'px');

src/index.html

@@ -52,7 +52,7 @@ <h1>Add files or directories here</h1>
                 <div class="w3-display-right">
                   <div class="w3-bar">
                     <i class="w3-bar-item">Heta compiler of version <span id="hc-version">0.0.0</span></i>
-                    <a id="hc-download" href="#" class="w3-button w3-disabled" title="Download project files"><i class="fa fa-download"></i></a>
+                    <a id="hc-download" href="#" class="w3-button" title="Download project files"><i class="fa fa-download"></i></a>
                     <a id="hc-clean" href="#" class="w3-button"><i class="fa fa-eraser" title="Reset to the initial state"></i></a>
                     <a id="hc-github" href="#" class="w3-button"><i class="fa fa-github" title="Project homepage"></i></a>
                     <a id="hc-info" href="#" class="w3-button"><i class="fa fa-question" title="Information"></i></a>

src/page.js

@@ -220,12 +220,14 @@ export class EditorPage extends Page {
 
       return this;
     }
+    /*
     getFile() {
       let text = this.monacoEditor.getValue();
       let file = new File([text], this.id, {type: this.type});
 
       return file;
     }
+    */
     getArrayBuffer() {
       let text = this.monacoEditor.getValue();
 
@@ -275,7 +277,9 @@ export class InfoPage extends Page {
   async getArrayBuffer() {
     return await this._sourceFile.arrayBuffer();
   }
+  /*
   getFile() {
     return this._sourceFile;
   }
+  */
 }