diff options
author | Luke "Jared" Bennett <lbennett@gitlab.com> | 2017-05-12 20:16:47 +0300 |
---|---|---|
committer | Clement Ho <clemmakesapps@gmail.com> | 2017-05-12 20:16:47 +0300 |
commit | 0a86eba50614591cb661c5b7ba3c2582dd66a6f4 (patch) | |
tree | 0271c8187cc208ea265b113f5d73af259687dab0 /app/assets | |
parent | bec9ec9a6e8980d4354f2b577cfd2a96a83a73b7 (diff) |
Removed all instances of Object.assign by using es6 classes, also includes some …
Diffstat (limited to 'app/assets')
-rw-r--r-- | app/assets/javascripts/droplab/drop_down.js | 128 | ||||
-rw-r--r-- | app/assets/javascripts/droplab/drop_lab.js | 126 | ||||
-rw-r--r-- | app/assets/javascripts/droplab/hook.js | 29 | ||||
-rw-r--r-- | app/assets/javascripts/droplab/hook_button.js | 59 | ||||
-rw-r--r-- | app/assets/javascripts/droplab/hook_input.js | 68 |
5 files changed, 198 insertions, 212 deletions
diff --git a/app/assets/javascripts/droplab/drop_down.js b/app/assets/javascripts/droplab/drop_down.js index de3927d683c..70cd337fb8a 100644 --- a/app/assets/javascripts/droplab/drop_down.js +++ b/app/assets/javascripts/droplab/drop_down.js @@ -1,44 +1,42 @@ -/* eslint-disable */ - import utils from './utils'; import { SELECTED_CLASS, IGNORE_CLASS } from './constants'; -var DropDown = function(list) { - this.currentIndex = 0; - this.hidden = true; - this.list = typeof list === 'string' ? document.querySelector(list) : list; - this.items = []; +class DropDown { + constructor(list) { + this.currentIndex = 0; + this.hidden = true; + this.list = typeof list === 'string' ? document.querySelector(list) : list; + this.items = []; - this.eventWrapper = {}; + this.eventWrapper = {}; - this.getItems(); - this.initTemplateString(); - this.addEvents(); + this.getItems(); + this.initTemplateString(); + this.addEvents(); - this.initialState = list.innerHTML; -}; + this.initialState = list.innerHTML; + } -Object.assign(DropDown.prototype, { - getItems: function() { + getItems() { this.items = [].slice.call(this.list.querySelectorAll('li')); return this.items; - }, + } - initTemplateString: function() { - var items = this.items || this.getItems(); + initTemplateString() { + const items = this.items || this.getItems(); - var templateString = ''; + let templateString = ''; if (items.length > 0) templateString = items[items.length - 1].outerHTML; this.templateString = templateString; return this.templateString; - }, + } - clickEvent: function(e) { + clickEvent(e) { if (e.target.tagName === 'UL') return; if (e.target.classList.contains(IGNORE_CLASS)) return; - var selected = utils.closest(e.target, 'LI'); + const selected = utils.closest(e.target, 'LI'); if (!selected) return; this.addSelectedClass(selected); @@ -46,95 +44,95 @@ Object.assign(DropDown.prototype, { e.preventDefault(); this.hide(); - var listEvent = new CustomEvent('click.dl', { + const listEvent = new CustomEvent('click.dl', { detail: { list: this, - selected: selected, + selected, data: e.target.dataset, }, }); this.list.dispatchEvent(listEvent); - }, + } - addSelectedClass: function (selected) { + addSelectedClass(selected) { this.removeSelectedClasses(); selected.classList.add(SELECTED_CLASS); - }, + } - removeSelectedClasses: function () { + removeSelectedClasses() { const items = this.items || this.getItems(); items.forEach(item => item.classList.remove(SELECTED_CLASS)); - }, + } - addEvents: function() { - this.eventWrapper.clickEvent = this.clickEvent.bind(this) + addEvents() { + this.eventWrapper.clickEvent = this.clickEvent.bind(this); this.list.addEventListener('click', this.eventWrapper.clickEvent); - }, - - toggle: function() { - this.hidden ? this.show() : this.hide(); - }, + } - setData: function(data) { + setData(data) { this.data = data; this.render(data); - }, + } - addData: function(data) { + addData(data) { this.data = (this.data || []).concat(data); this.render(this.data); - }, + } - render: function(data) { + render(data) { const children = data ? data.map(this.renderChildren.bind(this)) : []; const renderableList = this.list.querySelector('ul[data-dynamic]') || this.list; renderableList.innerHTML = children.join(''); - }, + } - renderChildren: function(data) { - var html = utils.template(this.templateString, data); - var template = document.createElement('div'); + renderChildren(data) { + const html = utils.template(this.templateString, data); + const template = document.createElement('div'); template.innerHTML = html; - this.setImagesSrc(template); + DropDown.setImagesSrc(template); template.firstChild.style.display = data.droplab_hidden ? 'none' : 'block'; return template.firstChild.outerHTML; - }, - - setImagesSrc: function(template) { - const images = [].slice.call(template.querySelectorAll('img[data-src]')); - - images.forEach((image) => { - image.src = image.getAttribute('data-src'); - image.removeAttribute('data-src'); - }); - }, + } - show: function() { + show() { if (!this.hidden) return; this.list.style.display = 'block'; this.currentIndex = 0; this.hidden = false; - }, + } - hide: function() { + hide() { if (this.hidden) return; this.list.style.display = 'none'; this.currentIndex = 0; this.hidden = true; - }, + } - toggle: function () { - this.hidden ? this.show() : this.hide(); - }, + toggle() { + if (this.hidden) return this.show(); - destroy: function() { + return this.hide(); + } + + destroy() { this.hide(); this.list.removeEventListener('click', this.eventWrapper.clickEvent); } -}); + + static setImagesSrc(template) { + const images = [...template.querySelectorAll('img[data-src]')]; + + images.forEach((image) => { + const img = image; + + img.src = img.getAttribute('data-src'); + img.removeAttribute('data-src'); + }); + } +} export default DropDown; diff --git a/app/assets/javascripts/droplab/drop_lab.js b/app/assets/javascripts/droplab/drop_lab.js index 6eb9f314af7..2a02ede72bf 100644 --- a/app/assets/javascripts/droplab/drop_lab.js +++ b/app/assets/javascripts/droplab/drop_lab.js @@ -1,99 +1,99 @@ -/* eslint-disable */ - import HookButton from './hook_button'; import HookInput from './hook_input'; import utils from './utils'; import Keyboard from './keyboard'; import { DATA_TRIGGER } from './constants'; -var DropLab = function() { - this.ready = false; - this.hooks = []; - this.queuedData = []; - this.config = {}; +class DropLab { + constructor() { + this.ready = false; + this.hooks = []; + this.queuedData = []; + this.config = {}; - this.eventWrapper = {}; -}; + this.eventWrapper = {}; + } -Object.assign(DropLab.prototype, { - loadStatic: function(){ - var dropdownTriggers = [].slice.apply(document.querySelectorAll(`[${DATA_TRIGGER}]`)); + loadStatic() { + const dropdownTriggers = [].slice.apply(document.querySelectorAll(`[${DATA_TRIGGER}]`)); this.addHooks(dropdownTriggers); - }, + } - addData: function () { - var args = [].slice.apply(arguments); - this.applyArgs(args, '_addData'); - }, + addData(...args) { + this.applyArgs(args, 'processAddData'); + } - setData: function() { - var args = [].slice.apply(arguments); - this.applyArgs(args, '_setData'); - }, + setData(...args) { + this.applyArgs(args, 'processSetData'); + } - destroy: function() { + destroy() { this.hooks.forEach(hook => hook.destroy()); this.hooks = []; this.removeEvents(); - }, + } - applyArgs: function(args, methodName) { - if (this.ready) return this[methodName].apply(this, args); + applyArgs(args, methodName) { + if (this.ready) return this[methodName](...args); this.queuedData = this.queuedData || []; this.queuedData.push(args); - }, - _addData: function(trigger, data) { - this._processData(trigger, data, 'addData'); - }, + return this.ready; + } + + processAddData(trigger, data) { + this.processData(trigger, data, 'addData'); + } - _setData: function(trigger, data) { - this._processData(trigger, data, 'setData'); - }, + processSetData(trigger, data) { + this.processData(trigger, data, 'setData'); + } - _processData: function(trigger, data, methodName) { + processData(trigger, data, methodName) { this.hooks.forEach((hook) => { if (Array.isArray(trigger)) hook.list[methodName](trigger); if (hook.trigger.id === trigger) hook.list[methodName](data); }); - }, + } - addEvents: function() { - this.eventWrapper.documentClicked = this.documentClicked.bind(this) + addEvents() { + this.eventWrapper.documentClicked = this.documentClicked.bind(this); document.addEventListener('click', this.eventWrapper.documentClicked); - }, + } - documentClicked: function(e) { + documentClicked(e) { let thisTag = e.target; if (thisTag.tagName !== 'UL') thisTag = utils.closest(thisTag, 'UL'); - if (utils.isDropDownParts(thisTag, this.hooks) || utils.isDropDownParts(e.target, this.hooks)) return; + if (utils.isDropDownParts(thisTag, this.hooks)) return; + if (utils.isDropDownParts(e.target, this.hooks)) return; this.hooks.forEach(hook => hook.list.hide()); - }, + } - removeEvents: function(){ + removeEvents() { document.removeEventListener('click', this.eventWrapper.documentClicked); - }, - - changeHookList: function(trigger, list, plugins, config) { - const availableTrigger = typeof trigger === 'string' ? document.getElementById(trigger) : trigger; + } + changeHookList(trigger, list, plugins, config) { + const availableTrigger = typeof trigger === 'string' ? document.getElementById(trigger) : trigger; this.hooks.forEach((hook, i) => { - hook.list.list.dataset.dropdownActive = false; + const aHook = hook; + + aHook.list.list.dataset.dropdownActive = false; - if (hook.trigger !== availableTrigger) return; + if (aHook.trigger !== availableTrigger) return; - hook.destroy(); + aHook.destroy(); this.hooks.splice(i, 1); this.addHook(availableTrigger, list, plugins, config); }); - }, + } - addHook: function(hook, list, plugins, config) { + addHook(hook, list, plugins, config) { const availableHook = typeof hook === 'string' ? document.querySelector(hook) : hook; let availableList; @@ -111,18 +111,18 @@ Object.assign(DropLab.prototype, { this.hooks.push(new HookObject(availableHook, availableList, plugins, config)); return this; - }, + } - addHooks: function(hooks, plugins, config) { + addHooks(hooks, plugins, config) { hooks.forEach(hook => this.addHook(hook, null, plugins, config)); return this; - }, + } - setConfig: function(obj){ + setConfig(obj) { this.config = obj; - }, + } - fireReady: function() { + fireReady() { const readyEvent = new CustomEvent('ready.dl', { detail: { dropdown: this, @@ -131,10 +131,14 @@ Object.assign(DropLab.prototype, { document.dispatchEvent(readyEvent); this.ready = true; - }, + } - init: function (hook, list, plugins, config) { - hook ? this.addHook(hook, list, plugins, config) : this.loadStatic(); + init(hook, list, plugins, config) { + if (hook) { + this.addHook(hook, list, plugins, config); + } else { + this.loadStatic(); + } this.addEvents(); @@ -146,7 +150,7 @@ Object.assign(DropLab.prototype, { this.queuedData = []; return this; - }, -}); + } +} export default DropLab; diff --git a/app/assets/javascripts/droplab/hook.js b/app/assets/javascripts/droplab/hook.js index 2f840083571..cf78165b0d8 100644 --- a/app/assets/javascripts/droplab/hook.js +++ b/app/assets/javascripts/droplab/hook.js @@ -1,22 +1,15 @@ -/* eslint-disable */ - import DropDown from './drop_down'; -var Hook = function(trigger, list, plugins, config){ - this.trigger = trigger; - this.list = new DropDown(list); - this.type = 'Hook'; - this.event = 'click'; - this.plugins = plugins || []; - this.config = config || {}; - this.id = trigger.id; -}; - -Object.assign(Hook.prototype, { - - addEvents: function(){}, - - constructor: Hook, -}); +class Hook { + constructor(trigger, list, plugins, config) { + this.trigger = trigger; + this.list = new DropDown(list); + this.type = 'Hook'; + this.event = 'click'; + this.plugins = plugins || []; + this.config = config || {}; + this.id = trigger.id; + } +} export default Hook; diff --git a/app/assets/javascripts/droplab/hook_button.js b/app/assets/javascripts/droplab/hook_button.js index be8aead1303..af45eba74e7 100644 --- a/app/assets/javascripts/droplab/hook_button.js +++ b/app/assets/javascripts/droplab/hook_button.js @@ -1,65 +1,58 @@ -/* eslint-disable */ - import Hook from './hook'; -var HookButton = function(trigger, list, plugins, config) { - Hook.call(this, trigger, list, plugins, config); - - this.type = 'button'; - this.event = 'click'; +class HookButton extends Hook { + constructor(trigger, list, plugins, config) { + super(trigger, list, plugins, config); - this.eventWrapper = {}; + this.type = 'button'; + this.event = 'click'; - this.addEvents(); - this.addPlugins(); -}; + this.eventWrapper = {}; -HookButton.prototype = Object.create(Hook.prototype); + this.addEvents(); + this.addPlugins(); + } -Object.assign(HookButton.prototype, { - addPlugins: function() { + addPlugins() { this.plugins.forEach(plugin => plugin.init(this)); - }, + } - clicked: function(e){ - var buttonEvent = new CustomEvent('click.dl', { + clicked(e) { + const buttonEvent = new CustomEvent('click.dl', { detail: { hook: this, }, bubbles: true, - cancelable: true + cancelable: true, }); e.target.dispatchEvent(buttonEvent); this.list.toggle(); - }, + } - addEvents: function(){ + addEvents() { this.eventWrapper.clicked = this.clicked.bind(this); this.trigger.addEventListener('click', this.eventWrapper.clicked); - }, + } - removeEvents: function(){ + removeEvents() { this.trigger.removeEventListener('click', this.eventWrapper.clicked); - }, + } - restoreInitialState: function() { + restoreInitialState() { this.list.list.innerHTML = this.list.initialState; - }, + } - removePlugins: function() { + removePlugins() { this.plugins.forEach(plugin => plugin.destroy()); - }, + } - destroy: function() { + destroy() { this.restoreInitialState(); this.removeEvents(); this.removePlugins(); - }, - - constructor: HookButton, -}); - + } +} export default HookButton; diff --git a/app/assets/javascripts/droplab/hook_input.js b/app/assets/javascripts/droplab/hook_input.js index 05082334045..19131a64f2c 100644 --- a/app/assets/javascripts/droplab/hook_input.js +++ b/app/assets/javascripts/droplab/hook_input.js @@ -1,25 +1,23 @@ -/* eslint-disable */ - import Hook from './hook'; -var HookInput = function(trigger, list, plugins, config) { - Hook.call(this, trigger, list, plugins, config); +class HookInput extends Hook { + constructor(trigger, list, plugins, config) { + super(trigger, list, plugins, config); - this.type = 'input'; - this.event = 'input'; + this.type = 'input'; + this.event = 'input'; - this.eventWrapper = {}; + this.eventWrapper = {}; - this.addEvents(); - this.addPlugins(); -}; + this.addEvents(); + this.addPlugins(); + } -Object.assign(HookInput.prototype, { - addPlugins: function() { + addPlugins() { this.plugins.forEach(plugin => plugin.init(this)); - }, + } - addEvents: function(){ + addEvents() { this.eventWrapper.mousedown = this.mousedown.bind(this); this.eventWrapper.input = this.input.bind(this); this.eventWrapper.keyup = this.keyup.bind(this); @@ -29,19 +27,19 @@ Object.assign(HookInput.prototype, { this.trigger.addEventListener('input', this.eventWrapper.input); this.trigger.addEventListener('keyup', this.eventWrapper.keyup); this.trigger.addEventListener('keydown', this.eventWrapper.keydown); - }, + } - removeEvents: function() { + removeEvents() { this.hasRemovedEvents = true; this.trigger.removeEventListener('mousedown', this.eventWrapper.mousedown); this.trigger.removeEventListener('input', this.eventWrapper.input); this.trigger.removeEventListener('keyup', this.eventWrapper.keyup); this.trigger.removeEventListener('keydown', this.eventWrapper.keydown); - }, + } - input: function(e) { - if(this.hasRemovedEvents) return; + input(e) { + if (this.hasRemovedEvents) return; this.list.show(); @@ -51,12 +49,12 @@ Object.assign(HookInput.prototype, { text: e.target.value, }, bubbles: true, - cancelable: true + cancelable: true, }); e.target.dispatchEvent(inputEvent); - }, + } - mousedown: function(e) { + mousedown(e) { if (this.hasRemovedEvents) return; const mouseEvent = new CustomEvent('mousedown.dl', { @@ -68,21 +66,21 @@ Object.assign(HookInput.prototype, { cancelable: true, }); e.target.dispatchEvent(mouseEvent); - }, + } - keyup: function(e) { + keyup(e) { if (this.hasRemovedEvents) return; this.keyEvent(e, 'keyup.dl'); - }, + } - keydown: function(e) { + keydown(e) { if (this.hasRemovedEvents) return; this.keyEvent(e, 'keydown.dl'); - }, + } - keyEvent: function(e, eventName) { + keyEvent(e, eventName) { this.list.show(); const keyEvent = new CustomEvent(eventName, { @@ -96,17 +94,17 @@ Object.assign(HookInput.prototype, { cancelable: true, }); e.target.dispatchEvent(keyEvent); - }, + } - restoreInitialState: function() { + restoreInitialState() { this.list.list.innerHTML = this.list.initialState; - }, + } - removePlugins: function() { + removePlugins() { this.plugins.forEach(plugin => plugin.destroy()); - }, + } - destroy: function() { + destroy() { this.restoreInitialState(); this.removeEvents(); @@ -114,6 +112,6 @@ Object.assign(HookInput.prototype, { this.list.destroy(); } -}); +} export default HookInput; |