diff --git a/img/local-storage-icon.png b/img/local-storage-icon.png new file mode 100644 index 00000000..d9b757e7 Binary files /dev/null and b/img/local-storage-icon.png differ diff --git a/js/controller/ToolController.js b/js/controller/ToolController.js index 0e2d42dc..9126cb44 100644 --- a/js/controller/ToolController.js +++ b/js/controller/ToolController.js @@ -36,7 +36,7 @@ // Set SimplePen as default selected tool: this.selectTool_(this.tools[0]); // Activate listener on tool panel: - $("#tool-section").click($.proxy(this.onToolIconClicked_, this)); + $("#tool-section").mousedown($.proxy(this.onToolIconClicked_, this)); }; /** @@ -47,6 +47,7 @@ var previousSelectedToolClass = stage.data("selected-tool-class"); if(previousSelectedToolClass) { stage.removeClass(previousSelectedToolClass); + stage.removeClass(pskl.drawingtools.Move.TOOL_ID); } stage.addClass(tool.instance.toolId); stage.data("selected-tool-class", tool.instance.toolId); diff --git a/js/controller/settings/LocalStorageController.js b/js/controller/settings/LocalStorageController.js new file mode 100644 index 00000000..9e6fc80f --- /dev/null +++ b/js/controller/settings/LocalStorageController.js @@ -0,0 +1,70 @@ +(function () { + var ns = $.namespace("pskl.controller.settings"); + + ns.LocalStorageController = function () {}; + + /** + * @public + */ + ns.LocalStorageController.prototype.init = function() { + this.localStorageItemTemplate_ = pskl.utils.Template.get("local-storage-item-template"); + this.service_ = pskl.app.localStorageService; + this.piskelsList = $('.local-piskels-list'); + + this.fillLocalPiskelsList_(); + + this.piskelsList.click(this.onPiskelsListClick_.bind(this)); + }; + + ns.LocalStorageController.prototype.onPiskelsListClick_ = function (evt) { + var action = evt.target.getAttribute('data-action'); + var name = evt.target.getAttribute('data-name'); + if (action === 'load') { + if (window.confirm('This will erase your current piskel. Continue ?')) { + this.service_.load(name); + $.publish(Events.CLOSE_SETTINGS_DRAWER); + } + } else if (action === 'delete') { + if (window.confirm('This will permanently DELETE this piskel from your computer. Continue ?')) { + this.service_.remove(name); + $.publish(Events.CLOSE_SETTINGS_DRAWER); + } + } + }; + + ns.LocalStorageController.prototype.fillLocalPiskelsList_ = function () { + var html = ""; + var keys = this.service_.getKeys(); + + var pad = function (num) { + if (num < 10) { + return "0" + num; + } else { + return "" + num; + } + }; + + + keys.sort(function (k1, k2) { + if (k1.date < k2.date) {return 1;} + if (k1.date > k2.date) {return -1;} + return 0; + }); + + keys.forEach((function (key) { + var date = new Date(key.date); + var formattedDate = pskl.utils.Template.replace("{{Y}}/{{M}}/{{D}} {{H}}:{{m}}", { + Y : date.getFullYear(), + M : pad(date.getMonth() + 1), + D : pad(date.getDate()), + H : pad(date.getHours()), + m : pad(date.getMinutes()) + }); + html += pskl.utils.Template.replace(this.localStorageItemTemplate_, {name : key.name, date : formattedDate}); + }).bind(this)); + + var tableBody_ = this.piskelsList.get(0).tBodies[0]; + tableBody_.innerHTML = html; + }; + +})(); \ No newline at end of file diff --git a/js/drawingtools/Move.js b/js/drawingtools/Move.js index 1635e0cf..0ff49857 100644 --- a/js/drawingtools/Move.js +++ b/js/drawingtools/Move.js @@ -7,7 +7,7 @@ var ns = $.namespace("pskl.drawingtools"); ns.Move = function() { - this.toolId = "tool-move"; + this.toolId = ns.Move.TOOL_ID; this.helpText = "Move tool"; // Stroke's first point coordinates (set in applyToolAt) @@ -15,6 +15,8 @@ this.startRow = null; }; + ns.Move.TOOL_ID = "tool-move"; + pskl.utils.inherit(ns.Move, ns.BaseTool); /** diff --git a/js/drawingtools/selectiontools/BaseSelect.js b/js/drawingtools/selectiontools/BaseSelect.js index b5ca0da1..b6cb3b0b 100644 --- a/js/drawingtools/selectiontools/BaseSelect.js +++ b/js/drawingtools/selectiontools/BaseSelect.js @@ -7,7 +7,7 @@ var ns = $.namespace("pskl.drawingtools"); ns.BaseSelect = function() { - this.secondaryToolId = "tool-move"; + this.secondaryToolId = pskl.drawingtools.Move.TOOL_ID; this.BodyRoot = $('body'); // Select's first point coordinates (set in applyToolAt) diff --git a/templates/settings/localstorage.html b/templates/settings/localstorage.html new file mode 100644 index 00000000..524cb15e --- /dev/null +++ b/templates/settings/localstorage.html @@ -0,0 +1,18 @@ +
+
+ Browse Local Piskels +
+
+ + +
+
+ +
\ No newline at end of file