gitlab-org--gitlab-foss/app/assets/javascripts/droplab/droplab.js

742 lines
20 KiB
JavaScript

/* eslint-disable */
// Determine where to place this
if (typeof Object.assign != 'function') {
Object.assign = function (target, varArgs) { // .length of function is 2
'use strict';
if (target == null) { // TypeError if undefined or null
throw new TypeError('Cannot convert undefined or null to object');
}
var to = Object(target);
for (var index = 1; index < arguments.length; index++) {
var nextSource = arguments[index];
if (nextSource != null) { // Skip over if undefined or null
for (var nextKey in nextSource) {
// Avoid bugs when hasOwnProperty is shadowed
if (Object.prototype.hasOwnProperty.call(nextSource, nextKey)) {
to[nextKey] = nextSource[nextKey];
}
}
}
}
return to;
};
}
(function(f){if(typeof exports==="object"&&typeof module!=="undefined"){module.exports=f()}else if(typeof define==="function"&&define.amd){define([],f)}else{var g;if(typeof window!=="undefined"){g=window}else if(typeof global!=="undefined"){g=global}else if(typeof self!=="undefined"){g=self}else{g=this}g.droplab = f()}})(function(){var define,module,exports;return (function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
var DATA_TRIGGER = 'data-dropdown-trigger';
var DATA_DROPDOWN = 'data-dropdown';
module.exports = {
DATA_TRIGGER: DATA_TRIGGER,
DATA_DROPDOWN: DATA_DROPDOWN,
}
},{}],2:[function(require,module,exports){
// Custom event support for IE
if ( typeof CustomEvent === "function" ) {
module.exports = CustomEvent;
} else {
require('./window')(function(w){
var CustomEvent = function ( event, params ) {
params = params || { bubbles: false, cancelable: false, detail: undefined };
var evt = document.createEvent( 'CustomEvent' );
evt.initCustomEvent( event, params.bubbles, params.cancelable, params.detail );
return evt;
}
CustomEvent.prototype = w.Event.prototype;
w.CustomEvent = CustomEvent;
});
module.exports = CustomEvent;
}
},{"./window":11}],3:[function(require,module,exports){
var CustomEvent = require('./custom_event_polyfill');
var utils = require('./utils');
var DropDown = function(list) {
this.currentIndex = 0;
this.hidden = true;
this.list = list;
this.items = [];
this.getItems();
this.initTemplateString();
this.addEvents();
this.initialState = list.innerHTML;
};
Object.assign(DropDown.prototype, {
getItems: function() {
this.items = [].slice.call(this.list.querySelectorAll('li'));
return this.items;
},
initTemplateString: function() {
var items = this.items || this.getItems();
var templateString = '';
if(items.length > 0) {
templateString = items[items.length - 1].outerHTML;
}
this.templateString = templateString;
return this.templateString;
},
clickEvent: function(e) {
// climb up the tree to find the LI
var selected = utils.closest(e.target, 'LI');
if(selected) {
e.preventDefault();
this.hide();
var listEvent = new CustomEvent('click.dl', {
detail: {
list: this,
selected: selected,
data: e.target.dataset,
},
});
this.list.dispatchEvent(listEvent);
}
},
addEvents: function() {
this.clickWrapper = this.clickEvent.bind(this);
// event delegation.
this.list.addEventListener('click', this.clickWrapper);
},
toggle: function() {
if(this.hidden) {
this.show();
} else {
this.hide();
}
},
setData: function(data) {
this.data = data;
this.render(data);
},
addData: function(data) {
this.data = (this.data || []).concat(data);
this.render(this.data);
},
// call render manually on data;
render: function(data){
// debugger
// empty the list first
var templateString = this.templateString;
var newChildren = [];
var toAppend;
newChildren = (data ||[]).map(function(dat){
var html = utils.t(templateString, dat);
var template = document.createElement('div');
template.innerHTML = html;
// Help set the image src template
var imageTags = template.querySelectorAll('img[data-src]');
// debugger
for(var i = 0; i < imageTags.length; i++) {
var imageTag = imageTags[i];
imageTag.src = imageTag.getAttribute('data-src');
imageTag.removeAttribute('data-src');
}
if(dat.hasOwnProperty('droplab_hidden') && dat.droplab_hidden){
template.firstChild.style.display = 'none'
}else{
template.firstChild.style.display = 'block';
}
return template.firstChild.outerHTML;
});
toAppend = this.list.querySelector('ul[data-dynamic]');
if(toAppend) {
toAppend.innerHTML = newChildren.join('');
} else {
this.list.innerHTML = newChildren.join('');
}
},
show: function() {
if (this.hidden) {
// debugger
this.list.style.display = 'block';
this.currentIndex = 0;
this.hidden = false;
}
},
hide: function() {
if (!this.hidden) {
// debugger
this.list.style.display = 'none';
this.currentIndex = 0;
this.hidden = true;
}
},
destroy: function() {
this.hide();
this.list.removeEventListener('click', this.clickWrapper);
}
});
module.exports = DropDown;
},{"./custom_event_polyfill":2,"./utils":10}],4:[function(require,module,exports){
require('./window')(function(w){
module.exports = function(deps) {
deps = deps || {};
var window = deps.window || w;
var document = deps.document || window.document;
var CustomEvent = deps.CustomEvent || require('./custom_event_polyfill');
var HookButton = deps.HookButton || require('./hook_button');
var HookInput = deps.HookInput || require('./hook_input');
var utils = deps.utils || require('./utils');
var DATA_TRIGGER = require('./constants').DATA_TRIGGER;
var DropLab = function(hook){
if (!(this instanceof DropLab)) return new DropLab(hook);
this.ready = false;
this.hooks = [];
this.queuedData = [];
this.config = {};
this.loadWrapper;
if(typeof hook !== 'undefined'){
this.addHook(hook);
}
};
Object.assign(DropLab.prototype, {
load: function() {
this.loadWrapper();
},
loadWrapper: function(){
var dropdownTriggers = [].slice.apply(document.querySelectorAll('['+DATA_TRIGGER+']'));
this.addHooks(dropdownTriggers).init();
},
addData: function () {
var args = [].slice.apply(arguments);
this.applyArgs(args, '_addData');
},
setData: function() {
var args = [].slice.apply(arguments);
this.applyArgs(args, '_setData');
},
destroy: function() {
for(var i = 0; i < this.hooks.length; i++) {
this.hooks[i].destroy();
}
this.hooks = [];
this.removeEvents();
},
applyArgs: function(args, methodName) {
if(this.ready) {
this[methodName].apply(this, args);
} else {
this.queuedData = this.queuedData || [];
this.queuedData.push(args);
}
},
_addData: function(trigger, data) {
this._processData(trigger, data, 'addData');
},
_setData: function(trigger, data) {
this._processData(trigger, data, 'setData');
},
_processData: function(trigger, data, methodName) {
for(var i = 0; i < this.hooks.length; i++) {
var hook = this.hooks[i];
if(hook.trigger.dataset.hasOwnProperty('id')) {
if(hook.trigger.dataset.id === trigger) {
hook.list[methodName](data);
}
}
}
},
addEvents: function() {
var self = this;
this.windowClickedWrapper = function(e){
var thisTag = e.target;
if(thisTag.tagName !== 'UL'){
// climb up the tree to find the UL
thisTag = utils.closest(thisTag, 'UL');
}
if(utils.isDropDownParts(thisTag)){ return }
if(utils.isDropDownParts(e.target)){ return }
for(var i = 0; i < self.hooks.length; i++) {
self.hooks[i].list.hide();
}
}.bind(this);
document.addEventListener('click', this.windowClickedWrapper);
},
removeEvents: function(){
w.removeEventListener('click', this.windowClickedWrapper);
w.removeEventListener('load', this.loadWrapper);
},
changeHookList: function(trigger, list, plugins, config) {
trigger = document.querySelector('[data-id="'+trigger+'"]');
// list = document.querySelector(list);
this.hooks.every(function(hook, i) {
if(hook.trigger === trigger) {
hook.destroy();
this.hooks.splice(i, 1);
this.addHook(trigger, list, plugins, config);
return false;
}
return true
}.bind(this));
},
addHook: function(hook, list, plugins, config) {
if(!(hook instanceof HTMLElement) && typeof hook === 'string'){
hook = document.querySelector(hook);
}
if(!list){
list = document.querySelector(hook.dataset[utils.toDataCamelCase(DATA_TRIGGER)]);
}
if(hook) {
if(hook.tagName === 'A' || hook.tagName === 'BUTTON') {
this.hooks.push(new HookButton(hook, list, plugins, config));
} else if(hook.tagName === 'INPUT') {
this.hooks.push(new HookInput(hook, list, plugins, config));
}
}
return this;
},
addHooks: function(hooks, plugins, config) {
for(var i = 0; i < hooks.length; i++) {
var hook = hooks[i];
this.addHook(hook, null, plugins, config);
}
return this;
},
setConfig: function(obj){
this.config = obj;
},
init: function () {
this.addEvents();
var readyEvent = new CustomEvent('ready.dl', {
detail: {
dropdown: this,
},
});
window.dispatchEvent(readyEvent);
this.ready = true;
for(var i = 0; i < this.queuedData.length; i++) {
this.addData.apply(this, this.queuedData[i]);
}
this.queuedData = [];
return this;
},
});
return DropLab;
};
});
},{"./constants":1,"./custom_event_polyfill":2,"./hook_button":6,"./hook_input":7,"./utils":10,"./window":11}],5:[function(require,module,exports){
var DropDown = require('./dropdown');
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.dataset.id;
};
Object.assign(Hook.prototype, {
addEvents: function(){},
constructor: Hook,
});
module.exports = Hook;
},{"./dropdown":3}],6:[function(require,module,exports){
var CustomEvent = require('./custom_event_polyfill');
var Hook = require('./hook');
var HookButton = function(trigger, list, plugins, config) {
Hook.call(this, trigger, list, plugins, config);
this.type = 'button';
this.event = 'click';
this.addEvents();
this.addPlugins();
};
HookButton.prototype = Object.create(Hook.prototype);
Object.assign(HookButton.prototype, {
addPlugins: function() {
for(var i = 0; i < this.plugins.length; i++) {
this.plugins[i].init(this);
}
},
clicked: function(e){
var buttonEvent = new CustomEvent('click.dl', {
detail: {
hook: this,
},
bubbles: true,
cancelable: true
});
this.list.show();
e.target.dispatchEvent(buttonEvent);
},
addEvents: function(){
this.clickedWrapper = this.clicked.bind(this);
this.trigger.addEventListener('click', this.clickedWrapper);
},
removeEvents: function(){
this.trigger.removeEventListener('click', this.clickedWrapper);
},
restoreInitialState: function() {
this.list.list.innerHTML = this.list.initialState;
},
removePlugins: function() {
for(var i = 0; i < this.plugins.length; i++) {
this.plugins[i].destroy();
}
},
destroy: function() {
this.restoreInitialState();
this.removeEvents();
this.removePlugins();
},
constructor: HookButton,
});
module.exports = HookButton;
},{"./custom_event_polyfill":2,"./hook":5}],7:[function(require,module,exports){
var CustomEvent = require('./custom_event_polyfill');
var Hook = require('./hook');
var HookInput = function(trigger, list, plugins, config) {
Hook.call(this, trigger, list, plugins, config);
this.type = 'input';
this.event = 'input';
this.addPlugins();
this.addEvents();
};
Object.assign(HookInput.prototype, {
addPlugins: function() {
var self = this;
for(var i = 0; i < this.plugins.length; i++) {
this.plugins[i].init(self);
}
},
addEvents: function(){
var self = this;
this.mousedown = function mousedown(e) {
if(self.hasRemovedEvents) return;
var mouseEvent = new CustomEvent('mousedown.dl', {
detail: {
hook: self,
text: e.target.value,
},
bubbles: true,
cancelable: true
});
e.target.dispatchEvent(mouseEvent);
}
this.input = function input(e) {
if(self.hasRemovedEvents) return;
self.list.show();
var inputEvent = new CustomEvent('input.dl', {
detail: {
hook: self,
text: e.target.value,
},
bubbles: true,
cancelable: true
});
e.target.dispatchEvent(inputEvent);
}
this.keyup = function keyup(e) {
if(self.hasRemovedEvents) return;
keyEvent(e, 'keyup.dl');
}
this.keydown = function keydown(e) {
if(self.hasRemovedEvents) return;
keyEvent(e, 'keydown.dl');
}
function keyEvent(e, keyEventName){
self.list.show();
var keyEvent = new CustomEvent(keyEventName, {
detail: {
hook: self,
text: e.target.value,
which: e.which,
key: e.key,
},
bubbles: true,
cancelable: true
});
e.target.dispatchEvent(keyEvent);
}
this.events = this.events || {};
this.events.mousedown = this.mousedown;
this.events.input = this.input;
this.events.keyup = this.keyup;
this.events.keydown = this.keydown;
this.trigger.addEventListener('mousedown', this.mousedown);
this.trigger.addEventListener('input', this.input);
this.trigger.addEventListener('keyup', this.keyup);
this.trigger.addEventListener('keydown', this.keydown);
},
removeEvents: function() {
this.hasRemovedEvents = true;
this.trigger.removeEventListener('mousedown', this.mousedown);
this.trigger.removeEventListener('input', this.input);
this.trigger.removeEventListener('keyup', this.keyup);
this.trigger.removeEventListener('keydown', this.keydown);
},
restoreInitialState: function() {
this.list.list.innerHTML = this.list.initialState;
},
removePlugins: function() {
for(var i = 0; i < this.plugins.length; i++) {
this.plugins[i].destroy();
}
},
destroy: function() {
this.restoreInitialState();
this.removeEvents();
this.removePlugins();
this.list.destroy();
}
});
module.exports = HookInput;
},{"./custom_event_polyfill":2,"./hook":5}],8:[function(require,module,exports){
var DropLab = require('./droplab')();
var DATA_TRIGGER = require('./constants').DATA_TRIGGER;
var keyboard = require('./keyboard')();
var setup = function() {
window.DropLab = DropLab;
};
module.exports = setup();
},{"./constants":1,"./droplab":4,"./keyboard":9}],9:[function(require,module,exports){
require('./window')(function(w){
module.exports = function(){
var currentKey;
var currentFocus;
var isUpArrow = false;
var isDownArrow = false;
var removeHighlight = function removeHighlight(list) {
var listItems = Array.prototype.slice.call(list.list.querySelectorAll('li:not(.divider)'), 0);
var listItemsTmp = [];
for(var i = 0; i < listItems.length; i++) {
var listItem = listItems[i];
listItem.classList.remove('dropdown-active');
if (listItem.style.display !== 'none') {
listItemsTmp.push(listItem);
}
}
return listItemsTmp;
};
var setMenuForArrows = function setMenuForArrows(list) {
var listItems = removeHighlight(list);
if(list.currentIndex>0){
if(!listItems[list.currentIndex-1]){
list.currentIndex = list.currentIndex-1;
}
if (listItems[list.currentIndex-1]) {
var el = listItems[list.currentIndex-1];
var filterDropdownEl = el.closest('.filter-dropdown');
el.classList.add('dropdown-active');
if (filterDropdownEl) {
var filterDropdownBottom = filterDropdownEl.offsetHeight;
var elOffsetTop = el.offsetTop - 30;
if (elOffsetTop > filterDropdownBottom) {
filterDropdownEl.scrollTop = elOffsetTop - filterDropdownBottom;
}
}
}
}
};
var mousedown = function mousedown(e) {
var list = e.detail.hook.list;
removeHighlight(list);
list.show();
list.currentIndex = 0;
isUpArrow = false;
isDownArrow = false;
};
var selectItem = function selectItem(list) {
var listItems = removeHighlight(list);
var currentItem = listItems[list.currentIndex-1];
var listEvent = new CustomEvent('click.dl', {
detail: {
list: list,
selected: currentItem,
data: currentItem.dataset,
},
});
list.list.dispatchEvent(listEvent);
list.hide();
}
var keydown = function keydown(e){
var typedOn = e.target;
var list = e.detail.hook.list;
var currentIndex = list.currentIndex;
isUpArrow = false;
isDownArrow = false;
if(e.detail.which){
currentKey = e.detail.which;
if(currentKey === 13){
selectItem(e.detail.hook.list);
return;
}
if(currentKey === 38) {
isUpArrow = true;
}
if(currentKey === 40) {
isDownArrow = true;
}
} else if(e.detail.key) {
currentKey = e.detail.key;
if(currentKey === 'Enter'){
selectItem(e.detail.hook.list);
return;
}
if(currentKey === 'ArrowUp') {
isUpArrow = true;
}
if(currentKey === 'ArrowDown') {
isDownArrow = true;
}
}
if(isUpArrow){ currentIndex--; }
if(isDownArrow){ currentIndex++; }
if(currentIndex < 0){ currentIndex = 0; }
list.currentIndex = currentIndex;
setMenuForArrows(e.detail.hook.list);
};
w.addEventListener('mousedown.dl', mousedown);
w.addEventListener('keydown.dl', keydown);
};
});
},{"./window":11}],10:[function(require,module,exports){
var DATA_TRIGGER = require('./constants').DATA_TRIGGER;
var DATA_DROPDOWN = require('./constants').DATA_DROPDOWN;
var toDataCamelCase = function(attr){
return this.camelize(attr.split('-').slice(1).join(' '));
};
// the tiniest damn templating I can do
var t = function(s,d){
for(var p in d)
s=s.replace(new RegExp('{{'+p+'}}','g'), d[p]);
return s;
};
var camelize = function(str) {
return str.replace(/(?:^\w|[A-Z]|\b\w)/g, function(letter, index) {
return index == 0 ? letter.toLowerCase() : letter.toUpperCase();
}).replace(/\s+/g, '');
};
var closest = function(thisTag, stopTag) {
while(thisTag && thisTag.tagName !== stopTag && thisTag.tagName !== 'HTML'){
thisTag = thisTag.parentNode;
}
return thisTag;
};
var isDropDownParts = function(target) {
if(!target || target.tagName === 'HTML') { return false; }
return (
target.hasAttribute(DATA_TRIGGER) ||
target.hasAttribute(DATA_DROPDOWN)
);
};
module.exports = {
toDataCamelCase: toDataCamelCase,
t: t,
camelize: camelize,
closest: closest,
isDropDownParts: isDropDownParts,
};
},{"./constants":1}],11:[function(require,module,exports){
module.exports = function(callback) {
return (function() {
callback(this);
}).call(null);
};
},{}]},{},[8])(8)
});