Permalink
Browse files

Fix : Settings drawer close usability bug

+ Settings drawer could not be closed when clicking above or below its
container. This has been fixed by changin the logic used for determining
if the click was inside/outside of the Settings drawer.

+ Added DOM utility to compensate for the limitations of JQuery
contains...
  • Loading branch information...
1 parent c105619 commit 676bf1c7fd1cdb3398126bfcc15ac0bb7628e3ab @juliandescottes committed Feb 9, 2014
Showing with 58 additions and 22 deletions.
  1. +28 −22 js/controller/settings/SettingsController.js
  2. +29 −0 js/utils/Dom.js
  3. +1 −0 piskel-script-list.js
@@ -1,5 +1,5 @@
(function () {
- var ns = $.namespace("pskl.controller.settings");
+ var ns = $.namespace('pskl.controller.settings');
var settings = {
'user' : {
@@ -29,35 +29,41 @@
ns.SettingsController = function (piskelController) {
this.piskelController = piskelController;
- this.drawerContainer = document.getElementById("drawer-container");
+ this.drawerContainer = document.getElementById('drawer-container');
this.settingsContainer = $('[data-pskl-controller=settings]');
- this.expanded = false;
+ this.isExpanded = false;
this.currentSetting = null;
};
/**
* @public
*/
ns.SettingsController.prototype.init = function() {
- // Expand drawer when clicking 'Settings' tab.
- $('[data-setting]').click(function(evt) {
- var el = evt.originalEvent.currentTarget;
- var setting = el.getAttribute("data-setting");
- if (this.currentSetting != setting) {
- this.loadSetting(setting);
- } else {
- this.closeDrawer();
- }
- }.bind(this));
+ $('[data-setting]').click(this.onSettingIconClick.bind(this));
+ $('body').click(this.onBodyClick.bind(this));
+ $.subscribe(Events.CLOSE_SETTINGS_DRAWER, this.closeDrawer.bind(this));
+ };
+
+ ns.SettingsController.prototype.onSettingIconClick = function (evt) {
+ var el = evt.originalEvent.currentTarget;
+ var setting = el.getAttribute('data-setting');
+ if (this.currentSetting != setting) {
+ this.loadSetting(setting);
+ } else {
+ this.closeDrawer();
+ }
+ };
- $('body').click(function (evt) {
- var isInSettingsContainer = $.contains(this.settingsContainer.get(0), evt.target);
- if (this.expanded && !isInSettingsContainer) {
- this.closeDrawer();
- }
- }.bind(this));
+ ns.SettingsController.prototype.onBodyClick = function (evt) {
+ var target = evt.target;
- $.subscribe(Events.CLOSE_SETTINGS_DRAWER, this.closeDrawer.bind(this));
+ var isInDrawerContainer = pskl.utils.Dom.isParent(target, this.drawerContainer);
+ var isInSettingsIcon = target.getAttribute('data-setting');
+ var isInSettingsContainer = isInDrawerContainer || isInSettingsIcon;
+
+ if (this.isExpanded && !isInSettingsContainer) {
+ this.closeDrawer();
+ }
};
ns.SettingsController.prototype.loadSetting = function (setting) {
@@ -69,15 +75,15 @@
$('.' + SEL_SETTING_CLS).removeClass(SEL_SETTING_CLS);
$('[data-setting='+setting+']').addClass(SEL_SETTING_CLS);
- this.expanded = true;
+ this.isExpanded = true;
this.currentSetting = setting;
};
ns.SettingsController.prototype.closeDrawer = function () {
this.settingsContainer.removeClass(EXP_DRAWER_CLS);
$('.' + SEL_SETTING_CLS).removeClass(SEL_SETTING_CLS);
- this.expanded = false;
+ this.isExpanded = false;
this.currentSetting = null;
};
View
@@ -0,0 +1,29 @@
+(function () {
+ var ns = $.namespace('pskl.utils');
+
+ ns.Dom = {
+ /**
+ * Check if a given HTML element is nested inside another
+ * @param {HTMLElement} node Element to test
+ * @param {HTMLElement} parent Potential Ancestor for node
+ * @param {Boolean} excludeParent set to true if the parent should be excluded from potential matches
+ * @return {Boolean} true if parent was found amongst the parentNode chain of node
+ */
+ isParent : function (node, parent, excludeParent) {
+ if (node && parent) {
+
+ if (excludeParent) {
+ node = node.parentNode;
+ }
+
+ while (node) {
+ if (node === parent) {
+ return true;
+ }
+ node = node.parentNode;
+ }
+ }
+ return false;
+ }
+ };
+})();
@@ -18,6 +18,7 @@ exports.scripts = [
"js/utils/core.js",
"js/utils/UserAgent.js",
"js/utils/CanvasUtils.js",
+ "js/utils/Dom.js",
"js/utils/Math.js",
"js/utils/FileUtils.js",
"js/utils/FrameUtils.js",

0 comments on commit 676bf1c

Please sign in to comment.