From 61fb6c5e6fcd36ef01f92ddc031c77de640f67ac Mon Sep 17 00:00:00 2001 From: jdescottes Date: Fri, 20 Feb 2015 01:40:34 +0100 Subject: [PATCH] Extract resize anchor code to dedicated widget file --- .../settings/resize/AnchorWidget.js | 68 +++++++++++++++++ .../settings/resize/ResizeCanvasController.js | 75 +++---------------- src/piskel-script-list.js | 1 + src/templates/settings/resize.html | 20 ++--- 4 files changed, 89 insertions(+), 75 deletions(-) create mode 100644 src/js/controller/settings/resize/AnchorWidget.js diff --git a/src/js/controller/settings/resize/AnchorWidget.js b/src/js/controller/settings/resize/AnchorWidget.js new file mode 100644 index 00000000..78ab9607 --- /dev/null +++ b/src/js/controller/settings/resize/AnchorWidget.js @@ -0,0 +1,68 @@ +(function () { + var ns = $.namespace('pskl.controller.settings.resize'); + + var OPTION_CLASSNAME = 'resize-origin-option'; + + ns.AnchorWidget = function (container) { + container.addEventListener('click', this.onResizeOriginClick_.bind(this)); + }; + + ns.AnchorWidget.ORIGIN = { + TOPLEFT : 'TOPLEFT', + TOP : 'TOP', + TOPRIGHT : 'TOPRIGHT', + MIDDLELEFT : 'MIDDLELEFT', + MIDDLE : 'MIDDLE', + MIDDLERIGHT : 'MIDDLERIGHT', + BOTTOMLEFT : 'BOTTOMLEFT', + BOTTOM : 'BOTTOM', + BOTTOMRIGHT : 'BOTTOMRIGHT' + }; + + ns.AnchorWidget.prototype.onResizeOriginClick_ = function (evt) { + var origin = evt.target.dataset.origin; + if (origin && ns.AnchorWidget.ORIGIN[origin]) { + this.setOrigin(origin); + } + }; + + ns.AnchorWidget.prototype.setOrigin = function (origin) { + this.origin = origin; + var previous = document.querySelector('.'+OPTION_CLASSNAME+'.selected'); + if (previous) { + previous.classList.remove('selected'); + } + + var selected = document.querySelector('.'+OPTION_CLASSNAME+'[data-origin="' + origin + '"]'); + if (selected) { + selected.classList.add('selected'); + this.refreshNeighbors_(selected); + } + }; + + ns.AnchorWidget.prototype.getOrigin = function () { + return this.origin; + }; + + ns.AnchorWidget.prototype.refreshNeighbors_ = function (selected) { + var options = document.querySelectorAll('.'+OPTION_CLASSNAME); + for (var i = 0 ; i < options.length ; i++) { + options[i].removeAttribute('data-neighbor'); + } + + var selectedIndex = Array.prototype.indexOf.call(options, selected); + + this.setNeighborhood_(options[selectedIndex - 1], 'left'); + this.setNeighborhood_(options[selectedIndex + 1], 'right'); + this.setNeighborhood_(options[selectedIndex - 3], 'top'); + this.setNeighborhood_(options[selectedIndex + 3], 'bottom'); + }; + + ns.AnchorWidget.prototype.setNeighborhood_ = function (el, neighborhood) { + var origin = this.origin.toLowerCase(); + var isNeighborhoodValid = origin.indexOf(neighborhood) === -1; + if (isNeighborhoodValid) { + el.setAttribute('data-neighbor', neighborhood); + } + }; +})(); \ No newline at end of file diff --git a/src/js/controller/settings/resize/ResizeCanvasController.js b/src/js/controller/settings/resize/ResizeCanvasController.js index d474654e..c504e2b1 100644 --- a/src/js/controller/settings/resize/ResizeCanvasController.js +++ b/src/js/controller/settings/resize/ResizeCanvasController.js @@ -1,32 +1,18 @@ (function () { var ns = $.namespace('pskl.controller.settings.resize'); - var ORIGIN = { - TOPLEFT : 'TOPLEFT', - TOP : 'TOP', - TOPRIGHT : 'TOPRIGHT', - MIDDLELEFT : 'MIDDLELEFT', - MIDDLE : 'MIDDLE', - MIDDLERIGHT : 'MIDDLERIGHT', - BOTTOMLEFT : 'BOTTOMLEFT', - BOTTOM : 'BOTTOM', - BOTTOMRIGHT : 'BOTTOMRIGHT' - }; - ns.ResizeCanvasController = function (piskelController, container) { this.superclass.constructor.call(this, piskelController, container); - this.origin = ORIGIN.TOPLEFT; + + var anchorWidgetContainer = document.querySelector('.resize-origin-container'); + this.anchorWidget = new ns.AnchorWidget(anchorWidgetContainer); }; pskl.utils.inherit(ns.ResizeCanvasController, ns.AbstractResizeController); ns.ResizeCanvasController.prototype.init = function () { this.superclass.init.call(this); - - this.resizeOrigin = document.querySelector('.resize-origin-container'); - this.resizeOrigin.addEventListener('click', this.onResizeOriginClick_.bind(this)); - - this.setOrigin_(ORIGIN.TOPLEFT); + this.anchorWidget.setOrigin(ns.AnchorWidget.ORIGIN.TOPLEFT); }; /****************/ @@ -56,9 +42,10 @@ }; ns.ResizeCanvasController.prototype.translateX_ = function (x, width, resizedWidth) { - if (this.origin.indexOf('LEFT') != -1) { + var origin = this.anchorWidget.getOrigin(); + if (origin.indexOf('LEFT') != -1) { return x; - } else if (this.origin.indexOf('RIGHT') != -1) { + } else if (origin.indexOf('RIGHT') != -1) { return x - (width - resizedWidth); } else { return x - Math.round((width - resizedWidth)/2); @@ -66,9 +53,10 @@ }; ns.ResizeCanvasController.prototype.translateY_ = function (y, height, resizedHeight) { - if (this.origin.indexOf('TOP') != -1) { + var origin = this.anchorWidget.getOrigin(); + if (origin.indexOf('TOP') != -1) { return y; - } else if (this.origin.indexOf('BOTTOM') != -1) { + } else if (origin.indexOf('BOTTOM') != -1) { return y - (height - resizedHeight); } else { return y - Math.round((height - resizedHeight)/2); @@ -78,47 +66,4 @@ /*****************/ /* ANCHOR WIDGET */ /*****************/ - - ns.ResizeCanvasController.prototype.onResizeOriginClick_ = function (evt) { - var origin = evt.target.dataset.origin; - if (origin && ORIGIN[origin]) { - this.setOrigin_(origin); - } - }; - - ns.ResizeCanvasController.prototype.setOrigin_ = function (origin) { - this.origin = origin; - var previous = document.querySelector('.resize-origin-option.selected'); - if (previous) { - previous.classList.remove('selected'); - } - - var selected = document.querySelector('.resize-origin-option[data-origin="' + origin + '"]'); - if (selected) { - selected.classList.add('selected'); - this.refreshNeighbors_(selected); - } - }; - - ns.ResizeCanvasController.prototype.refreshNeighbors_ = function (selected) { - var options = document.querySelectorAll('.resize-origin-option'); - for (var i = 0 ; i < options.length ; i++) { - options[i].removeAttribute('data-neighbor'); - } - - var selectedIndex = Array.prototype.indexOf.call(options, selected); - - this.setNeighborhood_(options[selectedIndex - 1], 'left'); - this.setNeighborhood_(options[selectedIndex + 1], 'right'); - this.setNeighborhood_(options[selectedIndex - 3], 'top'); - this.setNeighborhood_(options[selectedIndex + 3], 'bottom'); - }; - - ns.ResizeCanvasController.prototype.setNeighborhood_ = function (el, neighborhood) { - var origin = this.origin.toLowerCase(); - var isNeighborhoodValid = origin.indexOf(neighborhood) === -1; - if (isNeighborhoodValid) { - el.setAttribute('data-neighbor', neighborhood); - } - }; })(); \ No newline at end of file diff --git a/src/piskel-script-list.js b/src/piskel-script-list.js index 6e0f40ce..3a0c7b54 100644 --- a/src/piskel-script-list.js +++ b/src/piskel-script-list.js @@ -101,6 +101,7 @@ "js/controller/settings/exportimage/PngExportController.js", "js/controller/settings/resize/ResizeController.js", "js/controller/settings/resize/AbstractResizeController.js", + "js/controller/settings/resize/AnchorWidget.js", "js/controller/settings/resize/ResizeCanvasController.js", "js/controller/settings/resize/ResizeContentController.js", "js/controller/settings/SaveController.js", diff --git a/src/templates/settings/resize.html b/src/templates/settings/resize.html index 12a43032..457e9cfe 100644 --- a/src/templates/settings/resize.html +++ b/src/templates/settings/resize.html @@ -17,22 +17,22 @@
Anchor
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+