diff --git a/src/diagram/addSnapshot.js b/src/diagram/addSnapshot.js new file mode 100644 index 0000000..e9bb625 --- /dev/null +++ b/src/diagram/addSnapshot.js @@ -0,0 +1,12 @@ +var diagram = require("./index.js"); +var events = require("../events.js"); + +module.exports = function(snapshotName){ + var state = JSON.parse(require("./export.js")()).state; + diagram.snapshots.push({ + date: new Date().getTime(), + name: snapshotName, + state: state + }); + events.emit("snapshotsChanged"); +} diff --git a/src/diagram/import.js b/src/diagram/import.js index 6e8c962..c4140f4 100644 --- a/src/diagram/import.js +++ b/src/diagram/import.js @@ -14,11 +14,7 @@ module.exports = function(newDiagram){ accepted = confirm("This document contains Javascript. You should only allow this document to be opened if you trust the source."); } if(accepted){ - Object.assign(diagram, newDiagramObject); - $("#workspace>*").remove(); - for(var block of diagram.state){ - require("../pageInteraction/addBlockToPage.js")(block); - } - events.emit("diagramImport"); + Object.assign(diagram, JSON.parse(newDiagram)); + require("./updateState.js")(); } } diff --git a/src/diagram/updateState.js b/src/diagram/updateState.js new file mode 100644 index 0000000..617f145 --- /dev/null +++ b/src/diagram/updateState.js @@ -0,0 +1,11 @@ +var diagram = require("./index.js"); +var events = require("../events.js"); +var $ = require("jquery"); + +module.exports = function(){ + $("#workspace>*").remove(); //remove old lines + block + for(var block of diagram.state){ //add blocks to page + require("../pageInteraction/addBlockToPage.js")(block); + } + events.emit("diagramImport"); //trigger line re-draw +} diff --git a/src/events.js b/src/events.js index 5e306f6..2f8e65d 100644 --- a/src/events.js +++ b/src/events.js @@ -1,11 +1,16 @@ var subscriptions = {}; module.exports = { - subscribe: function(event, callback){ //adding a new subscription - if(!subscriptions[event]){ - subscriptions[event] = []; + subscribe: function(events, callback){ //adding a new subscription + if(!Array.isArray(events)){ //if not an array, make it a single item array + events = [events]; + } + for(var event of events){ + if(!subscriptions[event]){ + subscriptions[event] = []; + } + subscriptions[event].push(callback); } - subscriptions[event].push(callback); }, emit: function(event, data){ if(subscriptions[event]){ diff --git a/src/index.html b/src/index.html index 591c80e..6c9e411 100644 --- a/src/index.html +++ b/src/index.html @@ -3,12 +3,18 @@ Cryptography Assistant - + +
diff --git a/src/menu.js b/src/menu.js index 044f8ba..866dc05 100644 --- a/src/menu.js +++ b/src/menu.js @@ -2,18 +2,18 @@ var $ = require("jquery"); var events = require("./events.js"); var diagram = require("./diagram"); -$("#header>a#export").click(function(){ //export button clicked +$("#header a#export").click(function(){ //export button clicked var fileSaver = require("file-saver"); var exported = require("./diagram/export.js")(); var exportedBlob = new Blob([exported], {type: "text/plain;chartset=utf-8"}) fileSaver.saveAs(exportedBlob, diagram.name + ".json"); }); -$("#header>a#import").click(function(){ - $("#header>#importUpload").click(); //on import button click, trigger file open dialog +$("#header a#import").click(function(){ + $("#importUpload").click(); //on import button click, trigger file open dialog }); -$("#header>#importUpload").change(function(){ //when a file is selected +$("#importUpload").change(function(){ //when a file is selected var reader = new FileReader(); reader.onload = function(){ require("./diagram/import.js")(reader.result); @@ -33,3 +33,29 @@ events.subscribe("diagramImport", function(){ //update displayed name when new diagram imported $("#header>a#projectName").html(diagram.name); }); + +$("#header a#addSnapshot").click(function(){ + var name = prompt("Please enter a name for the snapshot"); + require("./diagram/addSnapshot.js")(name); +}); + +events.subscribe(["snapshotsChanged", "diagramImport"], function(){ + $("#snapshots>.snapshot").remove(); + diagram.snapshots.sort((a, b)=>(b.date - a.date)); + for(var i in diagram.snapshots){ + var date = new Date(diagram.snapshots[i].date); + $("#snapshots").append( + `
  • ${date.getDay()}/${date.getMonth()}/${date.getFullYear()} ${date.getHours()}:${date.getMinutes()} - ${diagram.snapshots[i].name}
    • ` + ); + } +}); + +$("#header #snapshots").on("click", ".snapshot>a", function(){ + var snapshot = diagram.snapshots[parseInt($(this).data("i"))] + var newSnapshotName = prompt("Reverting to this snapshot will cause you to lose your current work. If you would like to make a snapshot of your current workspace, please enter a name for it:"); + if(newSnapshotName){ + require("./diagram/addSnapshot.js")(newSnapshotName); + } + diagram.state = JSON.parse(JSON.stringify(snapshot.state)); + require("./diagram/updateState.js")(); +}); diff --git a/src/styles.scss b/src/styles.scss index ef228b2..82d3871 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -9,10 +9,8 @@ body{ flex-direction: column; } -#header{ - #importUpload{ - display: none; - } +#importUpload{ + display: none; } #blocks{