diff --git a/src/dat/dom/CenteredDiv.js b/src/dat/dom/CenteredDiv.js index 91d01b6..a422ba5 100644 --- a/src/dat/dom/CenteredDiv.js +++ b/src/dat/dom/CenteredDiv.js @@ -16,7 +16,6 @@ import common from '../utils/common'; class CenteredDiv { constructor() { - this.backgroundElement = document.createElement('div'); common.extend(this.backgroundElement.style, { backgroundColor: 'rgba(0,0,0,0.8)', @@ -46,14 +45,14 @@ class CenteredDiv { document.body.appendChild(this.backgroundElement); document.body.appendChild(this.domElement); - var _this = this; - dom.bind(this.backgroundElement, 'click', function () { + const _this = this; + dom.bind(this.backgroundElement, 'click', function() { _this.hide(); }); } show() { - var _this = this; + const _this = this; this.backgroundElement.style.display = 'block'; @@ -64,29 +63,26 @@ class CenteredDiv { this.layout(); - common.defer(function () { + common.defer(function() { _this.backgroundElement.style.opacity = 1; _this.domElement.style.opacity = 1; _this.domElement.style.webkitTransform = 'scale(1)'; }); - - }; + } /** * Hide centered div */ hide() { - var _this = this; - - var hide = function () { + const _this = this; + const hide = function() { _this.domElement.style.display = 'none'; _this.backgroundElement.style.display = 'none'; dom.unbind(_this.domElement, 'webkitTransitionEnd', hide); dom.unbind(_this.domElement, 'transitionend', hide); dom.unbind(_this.domElement, 'oTransitionEnd', hide); - }; dom.bind(this.domElement, 'webkitTransitionEnd', hide); @@ -97,8 +93,7 @@ class CenteredDiv { // this.domElement.style.top = '48%'; this.domElement.style.opacity = 0; this.domElement.style.webkitTransform = 'scale(1.1)'; - - }; + } layout() { this.domElement.style.left = window.innerWidth / 2 - dom.getWidth(this.domElement) / 2 + 'px'; @@ -106,8 +101,4 @@ class CenteredDiv { } } -function lockScroll(e) { - console.log(e); -} - export default CenteredDiv; diff --git a/src/dat/dom/dom.js b/src/dat/dom/dom.js index 2438058..15f92f5 100644 --- a/src/dat/dom/dom.js +++ b/src/dat/dom/dom.js @@ -13,26 +13,27 @@ import common from '../utils/common'; -var EVENT_MAP = { +const EVENT_MAP = { 'HTMLEvents': ['change'], 'MouseEvents': ['click', 'mousemove', 'mousedown', 'mouseup', 'mouseover'], 'KeyboardEvents': ['keydown'] }; -var EVENT_MAP_INV = {}; -common.each(EVENT_MAP, function (v, k) { - common.each(v, function (e) { +const EVENT_MAP_INV = {}; +common.each(EVENT_MAP, function(v, k) { + common.each(v, function(e) { EVENT_MAP_INV[e] = k; }); }); -var CSS_VALUE_PIXELS = /(\d+(\.\d+)?)px/; +const CSS_VALUE_PIXELS = /(\d+(\.\d+)?)px/; function cssValueToPixels(val) { + if (val === '0' || common.isUndefined(val)) { + return 0; + } - if (val === '0' || common.isUndefined(val)) return 0; - - var match = val.match(CSS_VALUE_PIXELS); + const match = val.match(CSS_VALUE_PIXELS); if (!common.isNull(match)) { return parseFloat(match[1]); @@ -41,45 +42,49 @@ function cssValueToPixels(val) { // TODO ...ems? %? return 0; - } /** * @namespace * @member dat.dom */ -var dom = { +const dom = { /** * * @param elem * @param selectable */ - makeSelectable: function (elem, selectable) { - + makeSelectable: function(elem, selectable) { if (elem === undefined || elem.style === undefined) return; - elem.onselectstart = selectable ? function () { + elem.onselectstart = selectable ? function() { return false; - } : function () { + } : function() { }; elem.style.MozUserSelect = selectable ? 'auto' : 'none'; elem.style.KhtmlUserSelect = selectable ? 'auto' : 'none'; elem.unselectable = selectable ? 'on' : 'off'; - }, /** * * @param elem * @param horizontal - * @param vertical + * @param vert */ - makeFullscreen: function (elem, horizontal, vertical) { + makeFullscreen: function(elem, hor, vert) { + let vertical = vert; + let horizontal = hor; - if (common.isUndefined(horizontal)) horizontal = true; - if (common.isUndefined(vertical)) vertical = true; + if (common.isUndefined(horizontal)) { + horizontal = true; + } + + if (common.isUndefined(vertical)) { + vertical = true; + } elem.style.position = 'absolute'; @@ -91,7 +96,6 @@ var dom = { elem.style.top = 0; elem.style.bottom = 0; } - }, /** @@ -100,27 +104,30 @@ var dom = { * @param eventType * @param params */ - fakeEvent: function (elem, eventType, params, aux) { - params = params || {}; - var className = EVENT_MAP_INV[eventType]; + fakeEvent: function(elem, eventType, pars, aux) { + const params = pars || {}; + const className = EVENT_MAP_INV[eventType]; if (!className) { throw new Error('Event type ' + eventType + ' not supported.'); } - var evt = document.createEvent(className); + const evt = document.createEvent(className); switch (className) { - case 'MouseEvents': - var clientX = params.x || params.clientX || 0; - var clientY = params.y || params.clientY || 0; + case 'MouseEvents': + { + const clientX = params.x || params.clientX || 0; + const clientY = params.y || params.clientY || 0; evt.initMouseEvent(eventType, params.bubbles || false, params.cancelable || true, window, params.clickCount || 1, - 0, //screen X - 0, //screen Y - clientX, //client X - clientY, //client Y + 0, // screen X + 0, // screen Y + clientX, // client X + clientY, // client Y false, false, false, false, 0, null); break; - case 'KeyboardEvents': - var init = evt.initKeyboardEvent || evt.initKeyEvent; // webkit || moz + } + case 'KeyboardEvents': + { + const init = evt.initKeyboardEvent || evt.initKeyEvent; // webkit || moz common.defaults(params, { cancelable: true, ctrlKey: false, @@ -136,10 +143,12 @@ var dom = { params.shiftKey, params.metaKey, params.keyCode, params.charCode); break; - default: - evt.initEvent(eventType, params.bubbles || false, - params.cancelable || true); + } + default: + { + evt.initEvent(eventType, params.bubbles || false, params.cancelable || true); break; + } } common.defaults(evt, aux); elem.dispatchEvent(evt); @@ -152,12 +161,13 @@ var dom = { * @param func * @param bool */ - bind: function (elem, event, func, bool) { - bool = bool || false; - if (elem.addEventListener) + bind: function(elem, event, func, newBool) { + const bool = newBool || false; + if (elem.addEventListener) { elem.addEventListener(event, func, bool); - else if (elem.attachEvent) + } else if (elem.attachEvent) { elem.attachEvent('on' + event, func); + } return dom; }, @@ -168,12 +178,13 @@ var dom = { * @param func * @param bool */ - unbind: function (elem, event, func, bool) { - bool = bool || false; - if (elem.removeEventListener) + unbind: function(elem, event, func, newBool) { + const bool = newBool || false; + if (elem.removeEventListener) { elem.removeEventListener(event, func, bool); - else if (elem.detachEvent) + } else if (elem.detachEvent) { elem.detachEvent('on' + event, func); + } return dom; }, @@ -182,12 +193,12 @@ var dom = { * @param elem * @param className */ - addClass: function (elem, className) { + addClass: function(elem, className) { if (elem.className === undefined) { elem.className = className; } else if (elem.className !== className) { - var classes = elem.className.split(/ +/); - if (classes.indexOf(className) == -1) { + const classes = elem.className.split(/ +/); + if (classes.indexOf(className) === -1) { classes.push(className); elem.className = classes.join(' ').replace(/^\s+/, '').replace(/\s+$/, ''); } @@ -200,16 +211,14 @@ var dom = { * @param elem * @param className */ - removeClass: function (elem, className) { + removeClass: function(elem, className) { if (className) { - if (elem.className === undefined) { - // elem.className = className; - } else if (elem.className === className) { + if (elem.className === className) { elem.removeAttribute('class'); } else { - var classes = elem.className.split(/ +/); - var index = classes.indexOf(className); - if (index != -1) { + const classes = elem.className.split(/ +/); + const index = classes.indexOf(className); + if (index !== -1) { classes.splice(index, 1); elem.className = classes.join(' '); } @@ -220,7 +229,7 @@ var dom = { return dom; }, - hasClass: function (elem, className) { + hasClass: function(elem, className) { return new RegExp('(?:^|\\s+)' + className + '(?:\\s+|$)').test(elem.className) || false; }, @@ -228,43 +237,43 @@ var dom = { * * @param elem */ - getWidth: function (elem) { - - var style = getComputedStyle(elem); + getWidth: function(elem) { + const style = getComputedStyle(elem); return cssValueToPixels(style['border-left-width']) + cssValueToPixels(style['border-right-width']) + cssValueToPixels(style['padding-left']) + cssValueToPixels(style['padding-right']) + - cssValueToPixels(style['width']); + cssValueToPixels(style.width); }, /** * * @param elem */ - getHeight: function (elem) { - - var style = getComputedStyle(elem); + getHeight: function(elem) { + const style = getComputedStyle(elem); return cssValueToPixels(style['border-top-width']) + cssValueToPixels(style['border-bottom-width']) + cssValueToPixels(style['padding-top']) + cssValueToPixels(style['padding-bottom']) + - cssValueToPixels(style['height']); + cssValueToPixels(style.height); }, /** * - * @param elem + * @param el */ - getOffset: function (elem) { - var offset = {left: 0, top: 0}; + getOffset: function(el) { + let elem = el; + const offset = {left: 0, top: 0}; if (elem.offsetParent) { do { offset.left += elem.offsetLeft; offset.top += elem.offsetTop; - } while (elem = elem.offsetParent); + elem = elem.offsetParent; + } while (elem); } return offset; }, @@ -274,7 +283,7 @@ var dom = { * * @param elem */ - isActive: function (elem) { + isActive: function(elem) { return elem === document.activeElement && ( elem.type || elem.href ); }