From de3fa1ea0134d59d42c64b7b97b819cec4612866 Mon Sep 17 00:00:00 2001 From: Vince Date: Sun, 16 Sep 2012 12:59:19 +0200 Subject: [PATCH 01/12] Refactoring localStorageService into a prototype based class --- js/LocalStorageService.js | 96 ---------------- js/piskel.js | 5 +- js/service/LocalStorageService.js | 181 ++++++++++++++++++++++++++++++ 3 files changed, 184 insertions(+), 98 deletions(-) delete mode 100644 js/LocalStorageService.js create mode 100644 js/service/LocalStorageService.js diff --git a/js/LocalStorageService.js b/js/LocalStorageService.js deleted file mode 100644 index 03ef443a..00000000 --- a/js/LocalStorageService.js +++ /dev/null @@ -1,96 +0,0 @@ -/* - * @provide pskl.LocalStrageService - * - * @require Constants - * @require Events - */ -$.namespace("pskl"); - -pskl.LocalStorageService = (function() { - - var frameSheet_; - - /** - * @private - */ - var localStorageThrottler_ = null; - - /** - * @private - */ - var persistToLocalStorageRequest_ = function() { - // Persist to localStorage when drawing. We throttle localStorage accesses - // for high frequency drawing (eg mousemove). - if(localStorageThrottler_ !== null) { - window.clearTimeout(localStorageThrottler_); - } - localStorageThrottler_ = window.setTimeout(function() { - persistToLocalStorage_(); - localStorageThrottler_ = null; - }, 1000); - }; - - /** - * @private - */ - var persistToLocalStorage_ = function() { - console.log('[LocalStorage service]: Snapshot stored'); - window.localStorage.snapShot = frameSheet_.serialize(); - }; - - /** - * @private - * TODO(vince): Move that away from LocalStorageService - */ - var restoreFromLocalStorage_ = function() { - - frameSheet_.deserialize(window.localStorage.snapShot); - frameSheet_.setCurrentFrameIndex(0); - }; - - /** - * @private - */ - var cleanLocalStorage_ = function() { - console.log('[LocalStorage service]: Snapshot removed'); - delete window.localStorage.snapShot; - }; - - return { - init: function(frameSheet) { - - if(frameSheet === undefined) { - throw "Bad LocalStorageService initialization: "; - } - frameSheet_ = frameSheet; - - $.subscribe(Events.LOCALSTORAGE_REQUEST, persistToLocalStorageRequest_); - }, - - // TODO(vincz): Find a good place to put this UI rendering, a service should not render UI. - displayRestoreNotification: function() { - if(window.localStorage && window.localStorage.snapShot) { - var reloadLink = "reload"; - var discardLink = "discard"; - var content = "Non saved version found. " + reloadLink + " or " + discardLink; - - $.publish(Events.SHOW_NOTIFICATION, [{ - "content": content, - "behavior": function(rootNode) { - rootNode = $(rootNode); - rootNode.click(function(evt) { - var target = $(evt.target); - if(target.hasClass("localstorage-restore")) { - restoreFromLocalStorage_(); - } - else if (target.hasClass("localstorage-discard")) { - cleanLocalStorage_(); - } - $.publish(Events.HIDE_NOTIFICATION); - }); - } - }]); - } - } - }; -})(); \ No newline at end of file diff --git a/js/piskel.js b/js/piskel.js index 06fa6449..3ebb6bc5 100644 --- a/js/piskel.js +++ b/js/piskel.js @@ -72,7 +72,8 @@ $.namespace("pskl"); this.keyManager = new pskl.KeyManager(); pskl.NotificationService.init(); - pskl.LocalStorageService.init(frameSheet); + this.localStorageService = new pskl.service.LocalStorageService(frameSheet); + this.localStorageService.init(); // TODO: Add comments var framesheetId = this.getFramesheetIdFromUrl(); @@ -81,7 +82,7 @@ $.namespace("pskl"); this.loadFramesheetFromService(framesheetId); } else { this.finishInit(); - pskl.LocalStorageService.displayRestoreNotification(); + this.localStorageService.displayRestoreNotification(); } var drawingLoop = new pskl.rendering.DrawingLoop(); diff --git a/js/service/LocalStorageService.js b/js/service/LocalStorageService.js new file mode 100644 index 00000000..ba746993 --- /dev/null +++ b/js/service/LocalStorageService.js @@ -0,0 +1,181 @@ +(function () { + var ns = $.namespace("pskl.service"); + + ns.LocalStorageService = function (framesheet_) { + + if(framesheet_ === undefined) { + throw "Bad LocalStorageService initialization: "; + } + this.framesheet = framesheet_; + this.localStorageThrottler_ = null; + }; + + /** + * @private + */ + ns.LocalStorageService.prototype.persistToLocalStorageRequest_ = function () { + // Persist to localStorage when drawing. We throttle localStorage accesses + // for high frequency drawing (eg mousemove). + if(this.localStorageThrottler_ !== null) { + window.clearTimeout(this.localStorageThrottler_); + } + this.localStorageThrottler_ = window.setTimeout($.proxy(function() { + this.persistToLocalStorage_(); + this.localStorageThrottler_ = null; + }, this), 1000); + }; + + /** + * @private + */ + ns.LocalStorageService.prototype.persistToLocalStorage_ = function() { + + console.log('[LocalStorage service]: Snapshot stored'); + window.localStorage.snapShot = this.framesheet.serialize(); + }; + + /** + * @private + */ + ns.LocalStorageService.prototype.restoreFromLocalStorage_ = function() { + + this.framesheet.deserialize(window.localStorage.snapShot); + this.framesheet.setCurrentFrameIndex(0); + }; + + /** + * @private + */ + ns.LocalStorageService.prototype.cleanLocalStorage_ = function() { + console.log('[LocalStorage service]: Snapshot removed'); + delete window.localStorage.snapShot; + }; + + /** + * @public + */ + ns.LocalStorageService.prototype.init = function(framesheet_) { + + $.subscribe(Events.LOCALSTORAGE_REQUEST, $.proxy(this.persistToLocalStorageRequest_, this)); + }; + + /** + * @public + */ + ns.LocalStorageService.prototype.displayRestoreNotification = function() { + if(window.localStorage && window.localStorage.snapShot) { + var reloadLink = "reload"; + var discardLink = "discard"; + var content = "Non saved version found. " + reloadLink + " or " + discardLink; + + $.publish(Events.SHOW_NOTIFICATION, [{ + "content": content, + "behavior": $.proxy(function(rootNode) { + rootNode = $(rootNode); + rootNode.click($.proxy(function(evt) { + var target = $(evt.target); + if(target.hasClass("localstorage-restore")) { + this.restoreFromLocalStorage_(); + } + else if (target.hasClass("localstorage-discard")) { + this.cleanLocalStorage_(); + } + $.publish(Events.HIDE_NOTIFICATION); + }, this)); + }, this) + }]); + } + }; + + + // var frameSheet_; + + /** + * @private + */ + // var localStorageThrottler_ = null; + + /** + * @private + */ + /*var persistToLocalStorageRequest_ = function() { + // Persist to localStorage when drawing. We throttle localStorage accesses + // for high frequency drawing (eg mousemove). + if(localStorageThrottler_ !== null) { + window.clearTimeout(localStorageThrottler_); + } + localStorageThrottler_ = window.setTimeout(function() { + persistToLocalStorage_(); + localStorageThrottler_ = null; + }, 1000); + }; + */ + /** + * @private + */ + /* + var persistToLocalStorage_ = function() { + console.log('[LocalStorage service]: Snapshot stored'); + window.localStorage.snapShot = frameSheet_.serialize(); + }; + */ + + /** + * @private + * TODO(vince): Move that away from LocalStorageService + */ + /* + + var restoreFromLocalStorage_ = function() { + + frameSheet_.deserialize(window.localStorage.snapShot); + frameSheet_.setCurrentFrameIndex(0); + }; +*/ + /** + * @private + */ + /* + var cleanLocalStorage_ = function() { + console.log('[LocalStorage service]: Snapshot removed'); + delete window.localStorage.snapShot; + }; + *//* + return { + init: function(frameSheet) { + + if(frameSheet === undefined) { + throw "Bad LocalStorageService initialization: "; + } + frameSheet_ = frameSheet; + + $.subscribe(Events.LOCALSTORAGE_REQUEST, persistToLocalStorageRequest_); + }, + + // TODO(vincz): Find a good place to put this UI rendering, a service should not render UI. + displayRestoreNotification: function() { + if(window.localStorage && window.localStorage.snapShot) { + var reloadLink = "reload"; + var discardLink = "discard"; + var content = "Non saved version found. " + reloadLink + " or " + discardLink; + + $.publish(Events.SHOW_NOTIFICATION, [{ + "content": content, + "behavior": function(rootNode) { + rootNode = $(rootNode); + rootNode.click(function(evt) { + var target = $(evt.target); + if(target.hasClass("localstorage-restore")) { + restoreFromLocalStorage_(); + } + else if (target.hasClass("localstorage-discard")) { + cleanLocalStorage_(); + } + $.publish(Events.HIDE_NOTIFICATION); + }); + } + }]); + } + } + };*/ +})(); \ No newline at end of file From b8eb3c9bd907d654872afd5babc8940e3d7a9875 Mon Sep 17 00:00:00 2001 From: Vince Date: Sun, 16 Sep 2012 12:59:47 +0200 Subject: [PATCH 02/12] Cleaning JavaScript includes in index.html --- index.html | 22 ++++++++++++++-------- 1 file changed, 14 insertions(+), 8 deletions(-) diff --git a/index.html b/index.html index 0e0f466a..4fa5c6b8 100644 --- a/index.html +++ b/index.html @@ -93,23 +93,29 @@ + - - - - - - - - + + + + + + + + + + + + + From 7d529aeaaa630bf6ccf34750bf08bfde31dcfda2 Mon Sep 17 00:00:00 2001 From: Vince Date: Sun, 16 Sep 2012 13:10:05 +0200 Subject: [PATCH 03/12] Move HistoryManager to a service --- index.html | 7 ++----- js/piskel.js | 4 ++-- .../HistoryService.js} | 14 +++++++------- 3 files changed, 11 insertions(+), 14 deletions(-) rename js/{HistoryManager.js => service/HistoryService.js} (62%) diff --git a/index.html b/index.html index 4fa5c6b8..123dafbb 100644 --- a/index.html +++ b/index.html @@ -109,13 +109,10 @@ - - - - - + + diff --git a/js/piskel.js b/js/piskel.js index 3ebb6bc5..4ec3e406 100644 --- a/js/piskel.js +++ b/js/piskel.js @@ -66,8 +66,8 @@ $.namespace("pskl"); this.animationController.init(); this.previewsController.init(); - this.historyManager = new pskl.HistoryManager(frameSheet); - this.historyManager.init(); + this.historyService = new pskl.service.HistoryService(frameSheet); + this.historyService.init(); this.keyManager = new pskl.KeyManager(); diff --git a/js/HistoryManager.js b/js/service/HistoryService.js similarity index 62% rename from js/HistoryManager.js rename to js/service/HistoryService.js index e43c6157..a65815f2 100644 --- a/js/HistoryManager.js +++ b/js/service/HistoryService.js @@ -1,26 +1,26 @@ (function () { - var ns = $.namespace("pskl"); - ns.HistoryManager = function (framesheet) { + var ns = $.namespace("pskl.service"); + ns.HistoryService = function (framesheet) { this.framesheet = framesheet; }; - ns.HistoryManager.prototype.init = function () { + ns.HistoryService.prototype.init = function () { + $.subscribe(Events.TOOL_RELEASED, this.saveState.bind(this)); - $.subscribe(Events.UNDO, this.undo.bind(this)); $.subscribe(Events.REDO, this.redo.bind(this)); }; - ns.HistoryManager.prototype.saveState = function () { + ns.HistoryService.prototype.saveState = function () { this.framesheet.getCurrentFrame().saveState(); }; - ns.HistoryManager.prototype.undo = function () { + ns.HistoryService.prototype.undo = function () { this.framesheet.getCurrentFrame().loadPreviousState(); $.publish(Events.FRAMESHEET_RESET); }; - ns.HistoryManager.prototype.redo = function () { + ns.HistoryService.prototype.redo = function () { this.framesheet.getCurrentFrame().loadNextState(); $.publish(Events.FRAMESHEET_RESET); }; From d6f1496763c5fcd6d2face79319a8a655b6b82fb Mon Sep 17 00:00:00 2001 From: Vince Date: Sun, 16 Sep 2012 13:11:10 +0200 Subject: [PATCH 04/12] Clean KeyManager.js (private semantics) --- js/KeyManager.js | 34 ++++++++++++++++++++-------------- 1 file changed, 20 insertions(+), 14 deletions(-) diff --git a/js/KeyManager.js b/js/KeyManager.js index 3e22e632..655d52b9 100644 --- a/js/KeyManager.js +++ b/js/KeyManager.js @@ -5,17 +5,10 @@ $(document.body).keydown($.proxy(this.onKeyUp_, this)); }; - // Kind of object that make you want to stop front-end _engineering_: - ns.KeyManager.prototype.CharCodeToKeyCodeMap = { - - 90 : "z", - 89 : "y", - 88 : "x", - 67 : "c", - 86 : "v" - }; - - ns.KeyManager.prototype.KeyboardActions = { + /** + * @private + */ + ns.KeyManager.prototype.KeyboardActions_ = { "ctrl" : { "z" : Events.UNDO, @@ -26,8 +19,21 @@ } }; - + /** + * @private + */ + ns.KeyManager.prototype.CharCodeToKeyCodeMap_ = { + 90 : "z", + 89 : "y", + 88 : "x", + 67 : "c", + 86 : "v" + }; + + /** + * @private + */ ns.KeyManager.prototype.onKeyUp_ = function(evt) { var isMac = false; if (navigator.appVersion.indexOf("Mac")!=-1) { @@ -37,9 +43,9 @@ if (isMac ? evt.metaKey : evt.ctrlKey) { // Get key pressed: - var letter = this.CharCodeToKeyCodeMap[evt.which]; + var letter = this.CharCodeToKeyCodeMap_[evt.which]; if(letter) { - var eventToTrigger = this.KeyboardActions.ctrl[letter]; + var eventToTrigger = this.KeyboardActions_.ctrl[letter]; if(eventToTrigger) { $.publish(eventToTrigger); } From 95bfc599e85a7eea8a19fdef4911a5943089f4e2 Mon Sep 17 00:00:00 2001 From: Vince Date: Sun, 16 Sep 2012 13:11:26 +0200 Subject: [PATCH 05/12] fix keyManager --- js/KeyManager.js | 3 +++ 1 file changed, 3 insertions(+) diff --git a/js/KeyManager.js b/js/KeyManager.js index 655d52b9..d23ef5ab 100644 --- a/js/KeyManager.js +++ b/js/KeyManager.js @@ -48,6 +48,9 @@ var eventToTrigger = this.KeyboardActions_.ctrl[letter]; if(eventToTrigger) { $.publish(eventToTrigger); + + evt.preventDefault(); + return false; } } } From c4084cf9b6aa12dcced7a922d7556afec7d50bcb Mon Sep 17 00:00:00 2001 From: Vince Date: Sun, 16 Sep 2012 13:19:31 +0200 Subject: [PATCH 06/12] move keyManager.js to KeyboardEventService.js --- js/piskel.js | 5 +++-- .../KeyboardEventService.js} | 17 +++++++++++------ 2 files changed, 14 insertions(+), 8 deletions(-) rename js/{KeyManager.js => service/KeyboardEventService.js} (74%) diff --git a/js/piskel.js b/js/piskel.js index 4ec3e406..e98b80c7 100644 --- a/js/piskel.js +++ b/js/piskel.js @@ -69,8 +69,9 @@ $.namespace("pskl"); this.historyService = new pskl.service.HistoryService(frameSheet); this.historyService.init(); - this.keyManager = new pskl.KeyManager(); - + this.KeyboardEventService = new pskl.service.KeyboardEventService(); + this.KeyboardEventService.init(); + pskl.NotificationService.init(); this.localStorageService = new pskl.service.LocalStorageService(frameSheet); this.localStorageService.init(); diff --git a/js/KeyManager.js b/js/service/KeyboardEventService.js similarity index 74% rename from js/KeyManager.js rename to js/service/KeyboardEventService.js index d23ef5ab..dc31e29f 100644 --- a/js/KeyManager.js +++ b/js/service/KeyboardEventService.js @@ -1,14 +1,12 @@ (function () { var ns = $.namespace("pskl"); - ns.KeyManager = function () { - $(document.body).keydown($.proxy(this.onKeyUp_, this)); - }; + ns.KeyboardEventService = function () {}; /** * @private */ - ns.KeyManager.prototype.KeyboardActions_ = { + ns.KeyboardEventService.prototype.KeyboardActions_ = { "ctrl" : { "z" : Events.UNDO, @@ -22,7 +20,7 @@ /** * @private */ - ns.KeyManager.prototype.CharCodeToKeyCodeMap_ = { + ns.KeyboardEventService.prototype.CharCodeToKeyCodeMap_ = { 90 : "z", 89 : "y", @@ -34,7 +32,7 @@ /** * @private */ - ns.KeyManager.prototype.onKeyUp_ = function(evt) { + ns.KeyboardEventService.prototype.onKeyUp_ = function(evt) { var isMac = false; if (navigator.appVersion.indexOf("Mac")!=-1) { // Welcome in mac world where vowels are consons and meta used instead of ctrl: @@ -55,5 +53,12 @@ } } }; + + /** + * @public + */ + ns.KeyboardEventService.prototype.init = function() { + $(document.body).keydown($.proxy(this.onKeyUp_, this)); + }; })(); \ No newline at end of file From 12680b7b8be3575d8c071d0d97a6033e98ac5b0e Mon Sep 17 00:00:00 2001 From: Vince Date: Sun, 16 Sep 2012 13:27:00 +0200 Subject: [PATCH 07/12] fix keyboard eventservice --- index.html | 2 +- js/service/KeyboardEventService.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/index.html b/index.html index 123dafbb..09a59749 100644 --- a/index.html +++ b/index.html @@ -112,7 +112,7 @@ - + diff --git a/js/service/KeyboardEventService.js b/js/service/KeyboardEventService.js index dc31e29f..2e141a26 100644 --- a/js/service/KeyboardEventService.js +++ b/js/service/KeyboardEventService.js @@ -1,5 +1,5 @@ (function () { - var ns = $.namespace("pskl"); + var ns = $.namespace("pskl.service"); ns.KeyboardEventService = function () {}; From b671d46dbf02158715c63cc5a62412e80d2de3fd Mon Sep 17 00:00:00 2001 From: Vince Date: Sun, 16 Sep 2012 13:28:53 +0200 Subject: [PATCH 08/12] moving palette.js to controller directory --- index.html | 2 +- js/{Palette.js => controller/PaletteController.js} | 0 2 files changed, 1 insertion(+), 1 deletion(-) rename js/{Palette.js => controller/PaletteController.js} (100%) diff --git a/index.html b/index.html index 09a59749..f5a4570d 100644 --- a/index.html +++ b/index.html @@ -107,7 +107,7 @@ - + diff --git a/js/Palette.js b/js/controller/PaletteController.js similarity index 100% rename from js/Palette.js rename to js/controller/PaletteController.js From 5b9bc6edb1ca7dc051184513d95b4a8a8a50df4a Mon Sep 17 00:00:00 2001 From: Vince Date: Sun, 16 Sep 2012 13:50:40 +0200 Subject: [PATCH 09/12] Prototypization of PaletteController I love new words --- js/controller/PaletteController.js | 169 +++++++++++++++-------------- js/piskel.js | 5 +- 2 files changed, 88 insertions(+), 86 deletions(-) diff --git a/js/controller/PaletteController.js b/js/controller/PaletteController.js index 8460e398..816f25d5 100644 --- a/js/controller/PaletteController.js +++ b/js/controller/PaletteController.js @@ -1,112 +1,113 @@ -/* - * @provide pskl.Palette - * - * @require Constants - * @require Events - */ -$.namespace("pskl"); +(function () { + var ns = $.namespace("pskl.controller"); -pskl.Palette = (function() { - - var paletteRoot, - paletteColors = []; + ns.PaletteController = function () { + this.paletteRoot = null; + this.paletteColors = []; + }; /** * @private */ - var onPickerChange_ = function(evt, isPrimary) { - var inputPicker = $(evt.target); - $.publish(Events.COLOR_SELECTED, [inputPicker.val(), evt.data.isPrimary]); - }; + ns.PaletteController.prototype.onPickerChange_ = function(evt, isPrimary) { + var inputPicker = $(evt.target); + $.publish(Events.COLOR_SELECTED, [inputPicker.val(), evt.data.isPrimary]); + }; /** - * @private - */ - var createPalette_ = function (colors) { + * @private + */ + ns.PaletteController.prototype.createPalette_ = function (colors) { // Always adding transparent color - paletteRoot.html(''); + this.paletteRoot.html(''); for(var color in colors) { if(color != Constants.TRANSPARENT_COLOR) { - addColorToPalette_(color); + this.addColorToPalette_(color); } } - }; + }; - /** - * @private - */ - var addColorToPalette_ = function (color) { - if (paletteColors.indexOf(color) == -1 && color != Constants.TRANSPARENT_COLOR) { - var colorEl = document.createElement("li"); - colorEl.className = "palette-color"; - colorEl.setAttribute("data-color", color); - colorEl.setAttribute("title", color); - colorEl.style.background = color; - paletteRoot[0].appendChild(colorEl); - paletteColors.push(color); - } - }; + /** + * @private + */ + ns.PaletteController.prototype.addColorToPalette_ = function (color) { + if (this.paletteColors.indexOf(color) == -1 && color != Constants.TRANSPARENT_COLOR) { + var colorEl = document.createElement("li"); + colorEl.className = "palette-color"; + colorEl.setAttribute("data-color", color); + colorEl.setAttribute("title", color); + colorEl.style.background = color; + this.paletteRoot.append(colorEl); + this.paletteColors.push(color); + } + }; - /** - * @private - */ - var onPaletteColorClick_ = function (event) { - var selectedColor = $(event.target).data("color"); - if (event.which == 1) { // left button - updateColorPicker(selectedColor, $('#color-picker')); - $.publish(Events.COLOR_SELECTED, [selectedColor, true]); - } else if (event.which == 3) { // right button - updateColorPicker(selectedColor, $('#secondary-color-picker')); - $.publish(Events.COLOR_SELECTED, [selectedColor, false]); - } - }; + /** + * @private + */ + ns.PaletteController.prototype.onPaletteColorClick_ = function (event) { + var selectedColor = $(event.target).data("color"); + if (event.which == 1) { // left button + this.updateColorPicker_(selectedColor, $('#color-picker')); + $.publish(Events.COLOR_SELECTED, [selectedColor, true]); + } else if (event.which == 3) { // right button + this.updateColorPicker_(selectedColor, $('#secondary-color-picker')); + $.publish(Events.COLOR_SELECTED, [selectedColor, false]); + } + }; - var updateColorPicker = function (color, colorPicker) { - if (color == Constants.TRANSPARENT_COLOR) { - // We can set the current palette color to transparent. - // You can then combine this transparent color with an advanced - // tool for customized deletions. - // Eg: bucket + transparent: Delete a colored area - // Stroke + transparent: hollow out the equivalent of a stroke + /** + * @private + */ + ns.PaletteController.prototype.updateColorPicker_ = function (color, colorPicker) { + if (color == Constants.TRANSPARENT_COLOR) { + // We can set the current palette color to transparent. + // You can then combine this transparent color with an advanced + // tool for customized deletions. + // Eg: bucket + transparent: Delete a colored area + // Stroke + transparent: hollow out the equivalent of a stroke - // The colorpicker can't be set to a transparent state. - // We set its background to white and insert the - // string "TRANSPARENT" to mimic this state: - colorPicker[0].color.fromString("#fff"); - colorPicker.val(Constants.TRANSPARENT_COLOR); - } else { - colorPicker[0].color.fromString(color); - } - }; + // The colorpicker can't be set to a transparent state. + // We set its background to white and insert the + // string "TRANSPARENT" to mimic this state: + colorPicker[0].color.fromString("#fff"); + colorPicker.val(Constants.TRANSPARENT_COLOR); + } else { + colorPicker[0].color.fromString(color); + } + }; - return { - init: function(framesheet) { + /** + * @public + */ + ns.PaletteController.prototype.init = function(framesheet) { - paletteRoot = $("#palette"); + this.paletteRoot = $("#palette"); + this.framesheet = framesheet; - // Initialize palette: - createPalette_(framesheet.getUsedColors()); + // Initialize palette: + this.createPalette_(this.framesheet.getUsedColors()); - $.subscribe(Events.FRAMESHEET_RESET, function(evt) { - createPalette_(framesheet.getUsedColors()); - }); + $.subscribe(Events.FRAMESHEET_RESET, $.proxy(function(evt) { + this.createPalette_(this.framesheet.getUsedColors()); + }, this)); - paletteRoot.mouseup(onPaletteColorClick_); - $.subscribe(Events.COLOR_SELECTED, function(evt, color) { - addColorToPalette_(color); - }); + this.paletteRoot.mouseup($.proxy(this.onPaletteColorClick_, this)); + + $.subscribe(Events.COLOR_SELECTED, $.proxy(function(evt, color) { + this.addColorToPalette_(color); + }, this)); - // Initialize colorpicker: - var colorPicker = $('#color-picker'); - colorPicker.val(Constants.DEFAULT_PEN_COLOR); - colorPicker.change({isPrimary : true}, onPickerChange_); + // Initialize colorpickers: + var colorPicker = $('#color-picker'); + colorPicker.val(Constants.DEFAULT_PEN_COLOR); + colorPicker.change({isPrimary : true}, $.proxy(this.onPickerChange_, this)); - var secondaryColorPicker = $('#secondary-color-picker'); - secondaryColorPicker.val(Constants.TRANSPARENT_COLOR); - secondaryColorPicker.change({isPrimary : false}, onPickerChange_); + var secondaryColorPicker = $('#secondary-color-picker'); + secondaryColorPicker.val(Constants.TRANSPARENT_COLOR); + secondaryColorPicker.change({isPrimary : false}, $.proxy(this.onPickerChange_, this)); - } }; })(); diff --git a/js/piskel.js b/js/piskel.js index e98b80c7..968fd41a 100644 --- a/js/piskel.js +++ b/js/piskel.js @@ -71,7 +71,7 @@ $.namespace("pskl"); this.KeyboardEventService = new pskl.service.KeyboardEventService(); this.KeyboardEventService.init(); - + pskl.NotificationService.init(); this.localStorageService = new pskl.service.LocalStorageService(frameSheet); this.localStorageService.init(); @@ -149,7 +149,8 @@ $.namespace("pskl"); var toolController = new pskl.controller.ToolController(); toolController.init(); - pskl.Palette.init(frameSheet); + var paletteController = new pskl.controller.PaletteController(); + paletteController.init(frameSheet); }, getFramesheetIdFromUrl : function() { From ca08d4b56a9c3208b33a2d47aa74681fbb826fd4 Mon Sep 17 00:00:00 2001 From: Vince Date: Sun, 16 Sep 2012 13:53:41 +0200 Subject: [PATCH 10/12] move notification to controller directory --- index.html | 2 +- js/{Notification.js => controller/NotificationController.js} | 0 2 files changed, 1 insertion(+), 1 deletion(-) rename js/{Notification.js => controller/NotificationController.js} (100%) diff --git a/index.html b/index.html index f5a4570d..ec107b05 100644 --- a/index.html +++ b/index.html @@ -108,7 +108,7 @@ - + diff --git a/js/Notification.js b/js/controller/NotificationController.js similarity index 100% rename from js/Notification.js rename to js/controller/NotificationController.js From 362d8ef2625eb9ff05dd28d7c1051eba64fa12a2 Mon Sep 17 00:00:00 2001 From: Vince Date: Sun, 16 Sep 2012 14:41:47 +0200 Subject: [PATCH 11/12] Prototypization of NotificationController --- js/controller/NotificationController.js | 68 ++++++++++++------------- js/piskel.js | 8 +-- 2 files changed, 39 insertions(+), 37 deletions(-) diff --git a/js/controller/NotificationController.js b/js/controller/NotificationController.js index 2ff6908f..15c106cf 100644 --- a/js/controller/NotificationController.js +++ b/js/controller/NotificationController.js @@ -1,39 +1,39 @@ -/* - * @provide pskl.NotificationService - * - */ -$.namespace("pskl"); +(function () { + var ns = $.namespace("pskl.controller"); -pskl.NotificationService = (function() { + ns.NotificationController = function () {}; - /** - * @private - */ - var displayMessage_ = function (evt, messageInfo) { - var message = document.createElement('div'); - message.id = "user-message"; - message.className = "user-message"; - message.innerHTML = messageInfo.content; - message.innerHTML = message.innerHTML + "
x
"; - document.body.appendChild(message); - $(message).find(".close").click(removeMessage_); - if(messageInfo.behavior) messageInfo.behavior(message); - }; + /** + * @private + */ + ns.NotificationController.prototype.displayMessage_ = function (evt, messageInfo) { + var message = document.createElement('div'); + message.id = "user-message"; + message.className = "user-message"; + message.innerHTML = messageInfo.content; + message.innerHTML = message.innerHTML + "
x
"; + document.body.appendChild(message); + $(message).find(".close").click($.proxy(this.removeMessage_, this)); + if(messageInfo.behavior) { + messageInfo.behavior(message); + } + }; - /** - * @private - */ - var removeMessage_ = function (evt) { - var message = $("#user-message"); - if (message.length) { - message.remove(); - } - }; + /** + * @private + */ + ns.NotificationController.prototype.removeMessage_ = function (evt) { + var message = $("#user-message"); + if (message.length) { + message.remove(); + } + }; - return { - init: function() { - $.subscribe(Events.SHOW_NOTIFICATION, displayMessage_); - $.subscribe(Events.HIDE_NOTIFICATION, removeMessage_); - } - }; + /** + * @public + */ + ns.NotificationController.prototype.init = function() { + $.subscribe(Events.SHOW_NOTIFICATION, $.proxy(this.displayMessage_, this)); + $.subscribe(Events.HIDE_NOTIFICATION, $.proxy(this.removeMessage_, this)); + }; })(); diff --git a/js/piskel.js b/js/piskel.js index 1a38d314..8b62d505 100644 --- a/js/piskel.js +++ b/js/piskel.js @@ -69,10 +69,12 @@ $.namespace("pskl"); this.historyService = new pskl.service.HistoryService(frameSheet); this.historyService.init(); - this.KeyboardEventService = new pskl.service.KeyboardEventService(); - this.KeyboardEventService.init(); + this.keyboardEventService = new pskl.service.KeyboardEventService(); + this.keyboardEventService.init(); + + this.notificationController = new pskl.controller.NotificationController(); + this.notificationController.init(); - pskl.NotificationService.init(); this.localStorageService = new pskl.service.LocalStorageService(frameSheet); this.localStorageService.init(); From e235e34e0fadf6721b2bc699a38c2b8be5dbed6c Mon Sep 17 00:00:00 2001 From: Vince Date: Sun, 16 Sep 2012 15:36:45 +0200 Subject: [PATCH 12/12] Removing dead code --- js/service/LocalStorageService.js | 92 ------------------------------- 1 file changed, 92 deletions(-) diff --git a/js/service/LocalStorageService.js b/js/service/LocalStorageService.js index ba746993..753b4fb5 100644 --- a/js/service/LocalStorageService.js +++ b/js/service/LocalStorageService.js @@ -86,96 +86,4 @@ }]); } }; - - - // var frameSheet_; - - /** - * @private - */ - // var localStorageThrottler_ = null; - - /** - * @private - */ - /*var persistToLocalStorageRequest_ = function() { - // Persist to localStorage when drawing. We throttle localStorage accesses - // for high frequency drawing (eg mousemove). - if(localStorageThrottler_ !== null) { - window.clearTimeout(localStorageThrottler_); - } - localStorageThrottler_ = window.setTimeout(function() { - persistToLocalStorage_(); - localStorageThrottler_ = null; - }, 1000); - }; - */ - /** - * @private - */ - /* - var persistToLocalStorage_ = function() { - console.log('[LocalStorage service]: Snapshot stored'); - window.localStorage.snapShot = frameSheet_.serialize(); - }; - */ - - /** - * @private - * TODO(vince): Move that away from LocalStorageService - */ - /* - - var restoreFromLocalStorage_ = function() { - - frameSheet_.deserialize(window.localStorage.snapShot); - frameSheet_.setCurrentFrameIndex(0); - }; -*/ - /** - * @private - */ - /* - var cleanLocalStorage_ = function() { - console.log('[LocalStorage service]: Snapshot removed'); - delete window.localStorage.snapShot; - }; - *//* - return { - init: function(frameSheet) { - - if(frameSheet === undefined) { - throw "Bad LocalStorageService initialization: "; - } - frameSheet_ = frameSheet; - - $.subscribe(Events.LOCALSTORAGE_REQUEST, persistToLocalStorageRequest_); - }, - - // TODO(vincz): Find a good place to put this UI rendering, a service should not render UI. - displayRestoreNotification: function() { - if(window.localStorage && window.localStorage.snapShot) { - var reloadLink = "reload"; - var discardLink = "discard"; - var content = "Non saved version found. " + reloadLink + " or " + discardLink; - - $.publish(Events.SHOW_NOTIFICATION, [{ - "content": content, - "behavior": function(rootNode) { - rootNode = $(rootNode); - rootNode.click(function(evt) { - var target = $(evt.target); - if(target.hasClass("localstorage-restore")) { - restoreFromLocalStorage_(); - } - else if (target.hasClass("localstorage-discard")) { - cleanLocalStorage_(); - } - $.publish(Events.HIDE_NOTIFICATION); - }); - } - }]); - } - } - };*/ })(); \ No newline at end of file