Merge branch 'snapshots' of https://github.com/TimStallard/CryptoAssist
# Conflicts: # src/events.js # src/menu.js
This commit is contained in:
commit
bd3f5d3161
12
src/diagram/addSnapshot.js
Normal file
12
src/diagram/addSnapshot.js
Normal file
@ -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");
|
||||||
|
}
|
@ -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.");
|
accepted = confirm("This document contains Javascript. You should only allow this document to be opened if you trust the source.");
|
||||||
}
|
}
|
||||||
if(accepted){
|
if(accepted){
|
||||||
Object.assign(diagram, newDiagramObject);
|
Object.assign(diagram, JSON.parse(newDiagram));
|
||||||
$("#workspace>*").remove();
|
require("./updateState.js")();
|
||||||
for(var block of diagram.state){
|
|
||||||
require("../pageInteraction/addBlockToPage.js")(block);
|
|
||||||
}
|
|
||||||
events.emit("diagramImport");
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
11
src/diagram/updateState.js
Normal file
11
src/diagram/updateState.js
Normal file
@ -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
|
||||||
|
}
|
@ -1,11 +1,16 @@
|
|||||||
var subscriptions = {};
|
var subscriptions = {};
|
||||||
|
|
||||||
module.exports = {
|
module.exports = {
|
||||||
subscribe: function(event, callback){ //adding a new subscription
|
subscribe: function(events, callback){ //adding a new subscription
|
||||||
if(!subscriptions[event]){
|
if(!Array.isArray(events)){ //if not an array, make it a single item array
|
||||||
subscriptions[event] = [];
|
events = [events];
|
||||||
|
}
|
||||||
|
for(var event of events){
|
||||||
|
if(!subscriptions[event]){
|
||||||
|
subscriptions[event] = [];
|
||||||
|
}
|
||||||
|
subscriptions[event].push(callback);
|
||||||
}
|
}
|
||||||
subscriptions[event].push(callback);
|
|
||||||
},
|
},
|
||||||
emit: function(event, data){
|
emit: function(event, data){
|
||||||
if(subscriptions[event]){
|
if(subscriptions[event]){
|
||||||
|
@ -3,12 +3,18 @@
|
|||||||
<title>Cryptography Assistant</title>
|
<title>Cryptography Assistant</title>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div id="header">
|
<ul id="header">
|
||||||
<a href="#" id="projectName">New Diagram</a>
|
<li><a href="#" id="projectName">New Diagram</a></li>
|
||||||
<a href="#" id="import">Open File</a>
|
<li><a href="#" id="import">Open File</a></li>
|
||||||
<a href="#" id="export">Save</a>
|
<li><a href="#" id="export">Save</a></li>
|
||||||
<input type="file" id="importUpload"></input>
|
<li>
|
||||||
</div>
|
<a href="#" id="snapshotsLink">Snapshots</a>
|
||||||
|
<ul id="snapshots">
|
||||||
|
<li><a href="#" id="addSnapshot">Add Snapshot</a></li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<input type="file" id="importUpload"></input>
|
||||||
<div id="blocks">
|
<div id="blocks">
|
||||||
</div>
|
</div>
|
||||||
<div id="workspace">
|
<div id="workspace">
|
||||||
|
34
src/menu.js
34
src/menu.js
@ -2,18 +2,18 @@ var $ = require("jquery");
|
|||||||
var events = require("./events.js");
|
var events = require("./events.js");
|
||||||
var diagram = require("./diagram");
|
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 fileSaver = require("file-saver");
|
||||||
var exported = require("./diagram/export.js")();
|
var exported = require("./diagram/export.js")();
|
||||||
var exportedBlob = new Blob([exported], {type: "text/plain;chartset=utf-8"})
|
var exportedBlob = new Blob([exported], {type: "text/plain;chartset=utf-8"})
|
||||||
fileSaver.saveAs(exportedBlob, diagram.name + ".json");
|
fileSaver.saveAs(exportedBlob, diagram.name + ".json");
|
||||||
});
|
});
|
||||||
|
|
||||||
$("#header>a#import").click(function(){
|
$("#header a#import").click(function(){
|
||||||
$("#header>#importUpload").click(); //on import button click, trigger file open dialog
|
$("#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();
|
var reader = new FileReader();
|
||||||
reader.onload = function(){
|
reader.onload = function(){
|
||||||
require("./diagram/import.js")(reader.result);
|
require("./diagram/import.js")(reader.result);
|
||||||
@ -33,3 +33,29 @@ events.subscribe("diagramImport", function(){
|
|||||||
//update displayed name when new diagram imported
|
//update displayed name when new diagram imported
|
||||||
$("#header>a#projectName").html(diagram.name);
|
$("#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(
|
||||||
|
`<li class="snapshot"><a href="#" data-i="${i}">${date.getDay()}/${date.getMonth()}/${date.getFullYear()} ${date.getHours()}:${date.getMinutes()} - ${diagram.snapshots[i].name}</a></li>`
|
||||||
|
);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
$("#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")();
|
||||||
|
});
|
||||||
|
@ -9,10 +9,8 @@ body{
|
|||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
}
|
}
|
||||||
|
|
||||||
#header{
|
#importUpload{
|
||||||
#importUpload{
|
display: none;
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
#blocks{
|
#blocks{
|
||||||
|
Loading…
Reference in New Issue
Block a user