1416 lines
44 KiB
JavaScript
1416 lines
44 KiB
JavaScript
if (!document.querySelector("#alertifyCSS")) {
|
||
// Prevent alertify from injecting CSS, we create our own in alertify.less.
|
||
// see: https://github.com/alertifyjs/alertify.js/blob/v1.0.11/src/js/alertify.js#L414
|
||
var head = document.getElementsByTagName("head")[0];
|
||
var css = document.createElement("span");
|
||
css.id = "alertifyCSS";
|
||
css.setAttribute('data-but-why', 'see: common-interface.js');
|
||
head.insertBefore(css, head.firstChild);
|
||
}
|
||
define([
|
||
'jquery',
|
||
'/customize/messages.js',
|
||
'/common/common-util.js',
|
||
'/common/common-hash.js',
|
||
'/common/common-notifier.js',
|
||
'/customize/application_config.js',
|
||
'/bower_components/alertifyjs/dist/js/alertify.js',
|
||
'/common/tippy/tippy.min.js',
|
||
'/common/hyperscript.js',
|
||
'/customize/loading.js',
|
||
'/common/test.js',
|
||
|
||
'/common/jquery-ui/jquery-ui.min.js',
|
||
'/bower_components/bootstrap-tokenfield/dist/bootstrap-tokenfield.js',
|
||
'css!/common/tippy/tippy.css',
|
||
'css!/common/jquery-ui/jquery-ui.min.css'
|
||
], function ($, Messages, Util, Hash, Notifier, AppConfig,
|
||
Alertify, Tippy, h, Loading, Test) {
|
||
var UI = {};
|
||
|
||
/*
|
||
* Alertifyjs
|
||
*/
|
||
UI.Alertify = Alertify;
|
||
|
||
// set notification timeout
|
||
Alertify._$$alertify.delay = AppConfig.notificationTimeout || 5000;
|
||
|
||
var setHTML = UI.setHTML = function (e, html) {
|
||
e.innerHTML = html;
|
||
return e;
|
||
};
|
||
|
||
var findCancelButton = UI.findCancelButton = function (root) {
|
||
if (root) {
|
||
return $(root).find('button.cancel').last();
|
||
}
|
||
return $('button.cancel').last();
|
||
};
|
||
|
||
var findOKButton = UI.findOKButton = function (root) {
|
||
if (root) {
|
||
return $(root).find('button.ok').last();
|
||
}
|
||
return $('button.ok').last();
|
||
};
|
||
|
||
UI.removeModals = function () {
|
||
$('div.alertify').remove();
|
||
};
|
||
|
||
var listenForKeys = UI.listenForKeys = function (yes, no, el) {
|
||
var handler = function (e) {
|
||
e.stopPropagation();
|
||
switch (e.which) {
|
||
case 27: // cancel
|
||
if (typeof(no) === 'function') { no(e); }
|
||
break;
|
||
case 13: // enter
|
||
if (typeof(yes) === 'function') { yes(e); }
|
||
break;
|
||
}
|
||
$(el || window).off('keydown', handler);
|
||
};
|
||
|
||
$(el || window).keydown(handler);
|
||
return handler;
|
||
};
|
||
var customListenForKeys = function (keys, cb, el) {
|
||
if (!keys || !keys.length || typeof cb !== "function") { return; }
|
||
var handler = function (e) {
|
||
e.stopPropagation();
|
||
keys.some(function (k) {
|
||
// k is number or array
|
||
// if it's an array, it should be [keyCode, "{ctrl|alt|shift|meta}"]
|
||
if (Array.isArray(k) && e.which === k[0] && e[k[1] + 'Key']) {
|
||
cb();
|
||
return true;
|
||
}
|
||
if (e.which === k && !e.shiftKey && !e.altKey && !e.metaKey && !e.ctrlKey) {
|
||
cb();
|
||
return true;
|
||
}
|
||
});
|
||
};
|
||
$(el || window).keydown(handler);
|
||
return handler;
|
||
};
|
||
|
||
var stopListening = UI.stopListening = function (handler) {
|
||
if (!handler) { return; } // we don't want to stop all the 'keyup' listeners
|
||
$(window).off('keyup', handler);
|
||
};
|
||
|
||
var dialog = UI.dialog = {};
|
||
|
||
var merge = function (a, b) {
|
||
var c = {};
|
||
if (a) {
|
||
Object.keys(a).forEach(function (k) {
|
||
c[k] = a[k];
|
||
});
|
||
}
|
||
if (b) {
|
||
Object.keys(b).forEach(function (k) {
|
||
c[k] = b[k];
|
||
});
|
||
}
|
||
return c;
|
||
};
|
||
|
||
dialog.selectable = function (value, opt) {
|
||
var attrs = merge({
|
||
type: 'text',
|
||
readonly: 'readonly',
|
||
}, opt);
|
||
|
||
var input = h('input', attrs);
|
||
$(input).val(value).click(function () {
|
||
input.select();
|
||
});
|
||
return input;
|
||
};
|
||
|
||
dialog.selectableArea = function (value, opt) {
|
||
var attrs = merge({
|
||
readonly: 'readonly',
|
||
}, opt);
|
||
|
||
var input = h('textarea', attrs);
|
||
$(input).val(value).click(function () {
|
||
input.select();
|
||
});
|
||
return input;
|
||
};
|
||
|
||
dialog.okButton = function (content, classString) {
|
||
var sel = typeof(classString) === 'string'? 'button.ok.' + classString:'button.btn.ok.primary';
|
||
return h(sel, { tabindex: '2', }, content || Messages.okButton);
|
||
};
|
||
|
||
dialog.cancelButton = function (content, classString) {
|
||
var sel = typeof(classString) === 'string'? 'button.' + classString:'button.btn.cancel';
|
||
return h(sel, { tabindex: '1'}, content || Messages.cancelButton);
|
||
};
|
||
|
||
dialog.message = function (text) {
|
||
return h('p.msg', text);
|
||
};
|
||
|
||
dialog.textInput = function (opt) {
|
||
var attrs = merge({
|
||
type: 'text',
|
||
'class': 'cp-text-input',
|
||
}, opt);
|
||
return h('p.msg', h('input', attrs));
|
||
};
|
||
|
||
dialog.textTypeInput = function (dropdown) {
|
||
var attrs = {
|
||
type: 'text',
|
||
'class': 'cp-text-type-input',
|
||
};
|
||
return h('p.msg.cp-alertify-type-container', h('div.cp-alertify-type', [
|
||
h('input', attrs),
|
||
dropdown // must be a "span"
|
||
]));
|
||
};
|
||
|
||
dialog.nav = function (content) {
|
||
return h('nav', content || [
|
||
dialog.cancelButton(),
|
||
dialog.okButton(),
|
||
]);
|
||
};
|
||
|
||
dialog.frame = function (content, opt) {
|
||
opt = opt || {};
|
||
var cls = opt.wide ? '.wide' : '';
|
||
var frame = h('div.alertify', {
|
||
tabindex: 1,
|
||
}, [
|
||
h('div.dialog', [
|
||
h('div'+cls, content),
|
||
])
|
||
]);
|
||
var $frame = $(frame);
|
||
frame.closeModal = function (cb) {
|
||
frame.closeModal = function () {}; // Prevent further calls
|
||
$frame.fadeOut(150, function () {
|
||
$frame.detach();
|
||
if (typeof(cb) === "function") { cb(); }
|
||
});
|
||
};
|
||
return $frame.click(function (e) {
|
||
$frame.find('.cp-dropdown-content').hide();
|
||
e.stopPropagation();
|
||
})[0];
|
||
};
|
||
|
||
/**
|
||
* tabs is an array containing objects
|
||
* each object must have the following attributes:
|
||
* - title: String
|
||
* - content: DOMElement
|
||
*/
|
||
dialog.tabs = function (tabs) {
|
||
var contents = [];
|
||
var titles = [];
|
||
var active = 0;
|
||
tabs.forEach(function (tab, i) {
|
||
if (!(tab.content || tab.disabled) || !tab.title) { return; }
|
||
var content = h('div.alertify-tabs-content', tab.content);
|
||
var title = h('span.alertify-tabs-title'+ (tab.disabled ? '.disabled' : ''), tab.title);
|
||
if (tab.icon) {
|
||
var icon = h('i', {class: tab.icon});
|
||
$(title).prepend(' ').prepend(icon);
|
||
}
|
||
$(title).click(function () {
|
||
if (tab.disabled) { return; }
|
||
var old = tabs[active];
|
||
if (old.onHide) { old.onHide(); }
|
||
titles.forEach(function (t) { $(t).removeClass('alertify-tabs-active'); });
|
||
contents.forEach(function (c) { $(c).removeClass('alertify-tabs-content-active'); });
|
||
if (tab.onShow) {
|
||
tab.onShow();
|
||
}
|
||
$(title).addClass('alertify-tabs-active');
|
||
$(content).addClass('alertify-tabs-content-active');
|
||
active = i;
|
||
});
|
||
titles.push(title);
|
||
contents.push(content);
|
||
if (tab.active && !tab.disabled) { active = i; }
|
||
});
|
||
if (contents.length) {
|
||
$(contents[active]).addClass('alertify-tabs-content-active');
|
||
$(titles[active]).addClass('alertify-tabs-active');
|
||
}
|
||
return h('div.alertify-tabs', [
|
||
h('div.alertify-tabs-titles', titles),
|
||
h('div.alertify-tabs-contents', contents),
|
||
]);
|
||
};
|
||
|
||
UI.tokenField = function (target, autocomplete) {
|
||
var t = {
|
||
element: target || h('input'),
|
||
};
|
||
var $t = t.tokenfield = $(t.element).tokenfield({
|
||
autocomplete: {
|
||
source: autocomplete,
|
||
delay: 100
|
||
},
|
||
showAutocompleteOnFocus: false
|
||
});
|
||
|
||
t.getTokens = function (ignorePending) {
|
||
var tokens = $t.tokenfield('getTokens').map(function (token) {
|
||
return token.value.toLowerCase();
|
||
});
|
||
if (ignorePending) { return tokens; }
|
||
|
||
var $pendingEl = $($t.parent().find('.token-input')[0]);
|
||
var val = ($pendingEl.val() || "").trim();
|
||
if (val && tokens.indexOf(val) === -1) {
|
||
return tokens.concat(val);
|
||
}
|
||
return tokens;
|
||
};
|
||
|
||
var $root = $t.parent();
|
||
$t.on('tokenfield:removetoken', function () {
|
||
$root.find('.token-input').focus();
|
||
});
|
||
|
||
t.preventDuplicates = function (cb) {
|
||
$t.on('tokenfield:createtoken', function (ev) {
|
||
// Close the suggest list when a token is added because we're going to wipe the input
|
||
var $input = $t.closest('.tokenfield').find('.token-input');
|
||
$input.autocomplete('close');
|
||
|
||
var val;
|
||
ev.attrs.value = ev.attrs.value.toLowerCase();
|
||
if (t.getTokens(true).some(function (t) {
|
||
if (t === ev.attrs.value) {
|
||
ev.preventDefault();
|
||
return ((val = t));
|
||
}
|
||
})) {
|
||
ev.preventDefault();
|
||
if (typeof(cb) === 'function') { cb(val); }
|
||
}
|
||
});
|
||
return t;
|
||
};
|
||
|
||
t.setTokens = function (tokens) {
|
||
$t.tokenfield('setTokens',
|
||
tokens.map(function (token) {
|
||
return {
|
||
value: token.toLowerCase(),
|
||
label: token.toLowerCase(),
|
||
};
|
||
}));
|
||
};
|
||
|
||
t.focus = function () {
|
||
var $temp = $t.closest('.tokenfield').find('.token-input');
|
||
$temp.css('width', '20%');
|
||
$t.tokenfield('focusInput', $temp[0]);
|
||
};
|
||
|
||
return t;
|
||
};
|
||
|
||
dialog.tagPrompt = function (tags, existing, cb) {
|
||
var input = dialog.textInput();
|
||
|
||
var tagger = dialog.frame([
|
||
dialog.message([ Messages.tags_add ]),
|
||
input,
|
||
h('center', h('small', Messages.tags_notShared)),
|
||
dialog.nav(),
|
||
]);
|
||
|
||
var field = UI.tokenField(input, existing).preventDuplicates(function (val) {
|
||
UI.warn(Messages._getKey('tags_duplicate', [val]));
|
||
});
|
||
|
||
var listener;
|
||
var close = Util.once(function (result, ev) {
|
||
ev.stopPropagation();
|
||
ev.preventDefault();
|
||
var $frame = $(tagger).fadeOut(150, function () {
|
||
stopListening(listener);
|
||
$frame.remove();
|
||
cb(result, ev);
|
||
});
|
||
});
|
||
|
||
var $ok = findOKButton(tagger).click(function (e) {
|
||
var tokens = field.getTokens();
|
||
close(tokens, e);
|
||
});
|
||
var $cancel = findCancelButton(tagger).click(function (e) {
|
||
close(null, e);
|
||
});
|
||
$(tagger).on('keydown', function (e) {
|
||
if (e.which === 27) {
|
||
$cancel.click();
|
||
return;
|
||
}
|
||
if (e.which === 13) {
|
||
$ok.click();
|
||
}
|
||
});
|
||
|
||
$(tagger).on('click submit', function (e) {
|
||
e.stopPropagation();
|
||
});
|
||
|
||
document.body.appendChild(tagger);
|
||
// :(
|
||
setTimeout(function () {
|
||
field.setTokens(tags);
|
||
field.focus();
|
||
});
|
||
|
||
var $field = field.tokenfield.closest('.tokenfield').find('.token-input');
|
||
$field.on('keypress', function (e) {
|
||
if (!$field.val() && e.which === 13) { return void $ok.click(); }
|
||
});
|
||
$field.on('keydown', function (e) {
|
||
if (!$field.val() && e.which === 27) { return void $cancel.click(); }
|
||
});
|
||
|
||
return tagger;
|
||
};
|
||
|
||
dialog.getButtons = function (buttons, onClose) {
|
||
if (!buttons) { return; }
|
||
if (!Array.isArray(buttons)) { return void console.error('Not an array'); }
|
||
if (!buttons.length) { return; }
|
||
var navs = [];
|
||
buttons.forEach(function (b) {
|
||
if (!b.name || !b.onClick) { return; }
|
||
var button = h('button', { tabindex: '1', 'class': b.className || '' }, [
|
||
b.iconClass ? h('i' + b.iconClass) : undefined,
|
||
b.name
|
||
]);
|
||
button.classList.add('btn');
|
||
var todo = function () {
|
||
var noClose = b.onClick();
|
||
if (noClose) { return; }
|
||
var $modal = $(button).parents('.alertify').first();
|
||
if ($modal.length && $modal[0].closeModal) {
|
||
$modal[0].closeModal(function () {
|
||
if (onClose) {
|
||
onClose();
|
||
}
|
||
});
|
||
}
|
||
};
|
||
if (b.confirm) {
|
||
UI.confirmButton(button, {
|
||
classes: 'danger',
|
||
divClasses: 'left'
|
||
}, todo);
|
||
} else {
|
||
$(button).click(function () {
|
||
todo();
|
||
});
|
||
}
|
||
if (b.keys && b.keys.length) { $(button).attr('data-keys', JSON.stringify(b.keys)); }
|
||
navs.push(button);
|
||
});
|
||
return dialog.nav(navs);
|
||
};
|
||
dialog.customModal = function (msg, opt) {
|
||
var force = false;
|
||
if (typeof(opt) === 'object') {
|
||
force = opt.force || false;
|
||
} else if (typeof(opt) === 'boolean') {
|
||
force = opt;
|
||
}
|
||
if (typeof(opt) !== 'object') {
|
||
opt = {};
|
||
}
|
||
|
||
var message;
|
||
if (typeof(msg) === 'string') {
|
||
// sanitize
|
||
if (!force) { msg = Util.fixHTML(msg); }
|
||
message = dialog.message();
|
||
message.innerHTML = msg;
|
||
} else {
|
||
message = dialog.message(msg);
|
||
}
|
||
|
||
var frame = h('div', [
|
||
message,
|
||
dialog.getButtons(opt.buttons, opt.onClose)
|
||
]);
|
||
|
||
if (opt.forefront) { $(frame).addClass('forefront'); }
|
||
return frame;
|
||
};
|
||
UI.openCustomModal = function (content, opt) {
|
||
var frame = dialog.frame([
|
||
content
|
||
], opt);
|
||
$(frame).find('button[data-keys]').each(function (i, el) {
|
||
var keys = JSON.parse($(el).attr('data-keys'));
|
||
customListenForKeys(keys, function () {
|
||
if (!$(el).is(':visible')) { return; }
|
||
$(el).click();
|
||
}, frame);
|
||
});
|
||
document.body.appendChild(frame);
|
||
$(frame).focus();
|
||
setTimeout(function () {
|
||
Notifier.notify();
|
||
});
|
||
return frame;
|
||
};
|
||
|
||
UI.createModal = function (cfg) {
|
||
var $body = cfg.$body || $('body');
|
||
var $blockContainer = cfg.id && $body.find('#'+cfg.id);
|
||
if (!$blockContainer || !$blockContainer.length) {
|
||
var id = '';
|
||
if (cfg.id) { id = '#'+cfg.id; }
|
||
$blockContainer = $(h('div.cp-modal-container'+id, {
|
||
tabindex: 1
|
||
}));
|
||
}
|
||
var deleted = false;
|
||
var hide = function () {
|
||
if (deleted) { return; }
|
||
$blockContainer.hide();
|
||
if (!cfg.id) {
|
||
deleted = true;
|
||
$blockContainer.remove();
|
||
}
|
||
if (cfg.onClose) { cfg.onClose(); }
|
||
};
|
||
$blockContainer.html('').appendTo($body);
|
||
var $block = $(h('div.cp-modal')).appendTo($blockContainer);
|
||
$(h('span.cp-modal-close.fa.fa-times', {
|
||
title: Messages.filePicker_close
|
||
})).click(hide).appendTo($block);
|
||
$body.click(hide);
|
||
$block.click(function (e) {
|
||
e.stopPropagation();
|
||
});
|
||
$body.keydown(function (e) {
|
||
if (e.which === 27) {
|
||
hide();
|
||
}
|
||
});
|
||
return {
|
||
$modal: $blockContainer,
|
||
show: function () {
|
||
$blockContainer.css('display', 'flex');
|
||
},
|
||
hide: hide
|
||
};
|
||
};
|
||
|
||
UI.alert = function (msg, cb, opt) {
|
||
var force = false;
|
||
if (typeof(opt) === 'object') {
|
||
force = opt.force || false;
|
||
} else if (typeof(opt) === 'boolean') {
|
||
force = opt;
|
||
}
|
||
if (typeof(opt) !== 'object') {
|
||
opt = {};
|
||
}
|
||
cb = cb || function () {};
|
||
|
||
var message;
|
||
if (typeof(msg) === 'string') {
|
||
// sanitize
|
||
if (!force) { msg = Util.fixHTML(msg); }
|
||
message = dialog.message();
|
||
message.innerHTML = msg;
|
||
} else {
|
||
message = dialog.message(msg);
|
||
}
|
||
|
||
var ok = dialog.okButton();
|
||
var frame = dialog.frame([
|
||
message,
|
||
dialog.nav(ok),
|
||
]);
|
||
|
||
if (opt.forefront) { $(frame).addClass('forefront'); }
|
||
var listener;
|
||
var close = Util.once(function () {
|
||
$(frame).fadeOut(150, function () { $(this).remove(); });
|
||
stopListening(listener);
|
||
cb();
|
||
});
|
||
listener = listenForKeys(close, close, frame);
|
||
var $ok = $(ok).click(close);
|
||
|
||
document.body.appendChild(frame);
|
||
setTimeout(function () {
|
||
$ok.focus();
|
||
Notifier.notify();
|
||
});
|
||
|
||
return {
|
||
element: frame,
|
||
delete: close
|
||
};
|
||
};
|
||
|
||
UI.prompt = function (msg, def, cb, opt, force) {
|
||
cb = cb || function () {};
|
||
opt = opt || {};
|
||
|
||
var inputBlock = opt.password ? UI.passwordInput() :
|
||
(opt.typeInput ? dialog.textTypeInput(opt.typeInput) : dialog.textInput());
|
||
var input = $(inputBlock).is('input') ? inputBlock : $(inputBlock).find('input')[0];
|
||
input.value = typeof(def) === 'string'? def: '';
|
||
|
||
var message;
|
||
if (typeof(msg) === 'string') {
|
||
if (!force) { msg = Util.fixHTML(msg); }
|
||
message = dialog.message();
|
||
message.innerHTML = msg;
|
||
} else {
|
||
message = dialog.message(msg);
|
||
}
|
||
|
||
var ok = dialog.okButton(opt.ok);
|
||
var cancel = dialog.cancelButton(opt.cancel);
|
||
var frame = dialog.frame([
|
||
message,
|
||
inputBlock,
|
||
dialog.nav([ cancel, ok, ]),
|
||
]);
|
||
|
||
var listener;
|
||
var close = Util.once(function (result, ev) {
|
||
var $frame = $(frame).fadeOut(150, function () {
|
||
stopListening(listener);
|
||
$frame.remove();
|
||
cb(result, ev);
|
||
});
|
||
});
|
||
|
||
var $ok = $(ok).click(function (ev) { close(input.value, ev); });
|
||
var $cancel = $(cancel).click(function (ev) { close(null, ev); });
|
||
listener = listenForKeys(function () { // yes
|
||
$ok.click();
|
||
}, function () { // no
|
||
$cancel.click();
|
||
}, input);
|
||
|
||
document.body.appendChild(frame);
|
||
setTimeout(function () {
|
||
$(input).select().focus();
|
||
Notifier.notify();
|
||
});
|
||
};
|
||
|
||
UI.confirm = function (msg, cb, opt, force) {
|
||
cb = cb || function () {};
|
||
opt = opt || {};
|
||
|
||
var message;
|
||
if (typeof(msg) === 'string') {
|
||
if (!force) { msg = Util.fixHTML(msg); }
|
||
message = dialog.message();
|
||
message.innerHTML = msg;
|
||
} else {
|
||
message = dialog.message(msg);
|
||
}
|
||
|
||
var ok = dialog.okButton(opt.ok, opt.okClass);
|
||
var cancel = dialog.cancelButton(opt.cancel, opt.cancelClass);
|
||
|
||
var frame = dialog.frame([
|
||
message,
|
||
dialog.nav(opt.reverseOrder?
|
||
[ok, cancel]: [cancel, ok]),
|
||
]);
|
||
|
||
var listener;
|
||
var close = Util.once(function (bool, ev) {
|
||
$(frame).fadeOut(150, function () { $(this).remove(); });
|
||
stopListening(listener);
|
||
cb(bool, ev);
|
||
});
|
||
|
||
var $ok = $(ok).click(function (ev) { close(true, ev); });
|
||
var $cancel = $(cancel).click(function (ev) { close(false, ev); });
|
||
|
||
listener = listenForKeys(function () {
|
||
$ok.click();
|
||
}, function () {
|
||
$cancel.click();
|
||
}, frame);
|
||
|
||
document.body.appendChild(frame);
|
||
setTimeout(function () {
|
||
Notifier.notify();
|
||
$(frame).find('.ok').focus();
|
||
if (typeof(opt.done) === 'function') {
|
||
opt.done($ok.closest('.dialog'));
|
||
}
|
||
});
|
||
};
|
||
UI.confirmButton = function (originalBtn, config, _cb) {
|
||
config = config || {};
|
||
var cb = Util.once(Util.mkAsync(_cb));
|
||
var classes = 'btn ' + (config.classes || 'btn-primary');
|
||
|
||
var button = h('button', {
|
||
"class": classes,
|
||
title: config.title || ''
|
||
}, Messages.areYouSure);
|
||
var $button = $(button);
|
||
|
||
var div = h('div', {
|
||
"class": config.classes || ''
|
||
});
|
||
var timer = h('div.cp-button-timer', div);
|
||
|
||
var content = h('div.cp-button-confirm', [
|
||
button,
|
||
timer
|
||
]);
|
||
if (config.divClasses) {
|
||
$(content).addClass(config.divClasses);
|
||
}
|
||
|
||
var to;
|
||
|
||
var done = function (res) {
|
||
if (res) { cb(res); }
|
||
clearTimeout(to);
|
||
$(content).detach();
|
||
$(originalBtn).show();
|
||
};
|
||
|
||
$button.click(function () {
|
||
done(true);
|
||
});
|
||
|
||
var TIMEOUT = 3000;
|
||
var INTERVAL = 10;
|
||
var i = 1;
|
||
|
||
var todo = function () {
|
||
var p = 100 * ((TIMEOUT - (i * INTERVAL)) / TIMEOUT);
|
||
if (i++ * INTERVAL >= TIMEOUT) {
|
||
done(false);
|
||
return;
|
||
}
|
||
$(div).css('width', p+'%');
|
||
to = setTimeout(todo, INTERVAL);
|
||
};
|
||
|
||
$(originalBtn).addClass('cp-button-confirm-placeholder').click(function () {
|
||
i = 1;
|
||
to = setTimeout(todo, INTERVAL);
|
||
$(originalBtn).hide().after(content);
|
||
});
|
||
|
||
return {
|
||
reset: function () {
|
||
done(false);
|
||
}
|
||
};
|
||
};
|
||
|
||
|
||
UI.proposal = function (content, cb) {
|
||
var buttons = [{
|
||
name: Messages.friendRequest_later,
|
||
onClick: function () {},
|
||
keys: [27]
|
||
}, {
|
||
className: 'primary',
|
||
name: Messages.friendRequest_accept,
|
||
onClick: function () {
|
||
cb(true);
|
||
},
|
||
keys: [13]
|
||
}, {
|
||
className: 'primary',
|
||
name: Messages.friendRequest_decline,
|
||
onClick: function () {
|
||
cb(false);
|
||
},
|
||
keys: [[13, 'ctrl']]
|
||
}];
|
||
var modal = dialog.customModal(content, {buttons: buttons});
|
||
UI.openCustomModal(modal);
|
||
return modal;
|
||
};
|
||
|
||
UI.log = function (msg) {
|
||
Alertify.success(Util.fixHTML(msg));
|
||
};
|
||
|
||
UI.warn = function (msg) {
|
||
Alertify.error(Util.fixHTML(msg));
|
||
};
|
||
|
||
UI.passwordInput = function (opts, displayEye) {
|
||
opts = opts || {};
|
||
var attributes = merge({
|
||
type: 'password'
|
||
}, opts);
|
||
|
||
var input = h('input.cp-password-input', attributes);
|
||
var eye = h('span.fa.fa-eye.cp-password-reveal');
|
||
|
||
var $eye = $(eye);
|
||
var $input = $(input);
|
||
|
||
if (displayEye) {
|
||
$eye.mousedown(function () {
|
||
$input.prop('type', 'text');
|
||
$input.focus();
|
||
}).mouseup(function(){
|
||
$input.prop('type', 'password');
|
||
$input.focus();
|
||
}).mouseout(function(){
|
||
$input.prop('type', 'password');
|
||
$input.focus();
|
||
});
|
||
} else {
|
||
$eye.click(function () {
|
||
if ($eye.hasClass('fa-eye')) {
|
||
$input.prop('type', 'text');
|
||
$input.focus();
|
||
$eye.removeClass('fa-eye').addClass('fa-eye-slash');
|
||
return;
|
||
}
|
||
$input.prop('type', 'password');
|
||
$input.focus();
|
||
$eye.removeClass('fa-eye-slash').addClass('fa-eye');
|
||
});
|
||
}
|
||
|
||
return h('span.cp-password-container', [
|
||
input,
|
||
eye
|
||
]);
|
||
};
|
||
|
||
UI.createHelper = function (href, text) {
|
||
var q = h('a.fa.fa-question-circle', {
|
||
'data-cptippy-html': true,
|
||
style: 'text-decoration: none !important;',
|
||
title: text,
|
||
href: href,
|
||
target: "_blank",
|
||
'data-tippy-placement': "right"
|
||
});
|
||
return q;
|
||
};
|
||
|
||
/*
|
||
* spinner
|
||
*/
|
||
UI.spinner = function (parent) {
|
||
var $target = $('<span>', {
|
||
'class': 'fa fa-circle-o-notch fa-spin fa-4x fa-fw',
|
||
}).hide();
|
||
|
||
$(parent).append($target);
|
||
|
||
return {
|
||
show: function () {
|
||
$target.css('display', 'inline');
|
||
return this;
|
||
},
|
||
hide: function () {
|
||
$target.hide();
|
||
return this;
|
||
},
|
||
get: function () {
|
||
return $target;
|
||
},
|
||
};
|
||
};
|
||
|
||
var LOADING = 'cp-loading';
|
||
|
||
var loading = {
|
||
error: false,
|
||
driveState: 0,
|
||
padState: 0
|
||
};
|
||
UI.addLoadingScreen = function (config) {
|
||
config = config || {};
|
||
var loadingText = config.loadingText;
|
||
var todo = function () {
|
||
var $loading = $('#' + LOADING);
|
||
$loading.css('display', '');
|
||
$loading.removeClass('cp-loading-hidden');
|
||
$('.cp-loading-spinner-container').show();
|
||
if (!config.noProgress && !$loading.find('.cp-loading-progress').length) {
|
||
var progress = h('div.cp-loading-progress', [
|
||
h('p.cp-loading-progress-drive'),
|
||
h('p.cp-loading-progress-pad')
|
||
]);
|
||
$(progress).hide();
|
||
$loading.find('.cp-loading-container').append(progress);
|
||
} else if (config.noProgress) {
|
||
$loading.find('.cp-loading-progress').remove();
|
||
}
|
||
if (loadingText) {
|
||
$('#' + LOADING).find('#cp-loading-message').show().text(loadingText);
|
||
} else {
|
||
$('#' + LOADING).find('#cp-loading-message').hide().text('');
|
||
}
|
||
loading.error = false;
|
||
};
|
||
if ($('#' + LOADING).length) {
|
||
todo();
|
||
} else {
|
||
Loading();
|
||
todo();
|
||
}
|
||
};
|
||
UI.updateLoadingProgress = function (data, isDrive) {
|
||
var $loading = $('#' + LOADING);
|
||
if (!$loading.length || loading.error) { return; }
|
||
$loading.find('.cp-loading-progress').show();
|
||
var $progress;
|
||
if (isDrive) {
|
||
// Drive state
|
||
if (loading.driveState === -1) { return; } // Already loaded
|
||
$progress = $loading.find('.cp-loading-progress-drive');
|
||
if (!$progress.length) { return; } // Can't find the box to display data
|
||
|
||
// If state is -1, remove the box, drive is loaded
|
||
if (data.state === -1) {
|
||
loading.driveState = -1;
|
||
$progress.remove();
|
||
} else {
|
||
if (data.state < loading.driveState) { return; } // We should not display old data
|
||
// Update the current state
|
||
loading.driveState = data.state;
|
||
data.progress = data.progress || 100;
|
||
data.msg = Messages['loading_drive_'+ Math.floor(data.state)] || '';
|
||
$progress.html(data.msg);
|
||
if (data.progress) {
|
||
$progress.append(h('div.cp-loading-progress-bar', [
|
||
h('div.cp-loading-progress-bar-value', {style: 'width:'+data.progress+'%;'})
|
||
]));
|
||
}
|
||
}
|
||
} else {
|
||
// Pad state
|
||
if (loading.padState === -1) { return; } // Already loaded
|
||
$progress = $loading.find('.cp-loading-progress-pad');
|
||
if (!$progress.length) { return; } // Can't find the box to display data
|
||
|
||
// If state is -1, remove the box, pad is loaded
|
||
if (data.state === -1) {
|
||
loading.padState = -1;
|
||
$progress.remove();
|
||
} else {
|
||
if (data.state < loading.padState) { return; } // We should not display old data
|
||
// Update the current state
|
||
loading.padState = data.state;
|
||
data.progress = data.progress || 100;
|
||
data.msg = Messages['loading_pad_'+data.state] || '';
|
||
$progress.html(data.msg);
|
||
if (data.progress) {
|
||
$progress.append(h('div.cp-loading-progress-bar', [
|
||
h('div.cp-loading-progress-bar-value', {style: 'width:'+data.progress+'%;'})
|
||
]));
|
||
}
|
||
}
|
||
}
|
||
};
|
||
UI.removeLoadingScreen = function (cb) {
|
||
// Release the test blocker, hopefully every test has been registered.
|
||
// This test is created in sframe-boot2.js
|
||
cb = cb || function () {};
|
||
if (Test.__ASYNC_BLOCKER__) { Test.__ASYNC_BLOCKER__.pass(); }
|
||
|
||
$('#' + LOADING).addClass("cp-loading-hidden");
|
||
setTimeout(cb, 750);
|
||
loading.error = false;
|
||
var $tip = $('#cp-loading-tip').css('top', '')
|
||
// loading.less sets transition-delay: $wait-time
|
||
// and transition: opacity $fadeout-time
|
||
.css({
|
||
'opacity': 0,
|
||
'pointer-events': 'none',
|
||
});
|
||
window.setTimeout(function () {
|
||
$tip.remove();
|
||
}, 3750);
|
||
// jquery.fadeout can get stuck
|
||
};
|
||
UI.errorLoadingScreen = function (error, transparent, exitable) {
|
||
var $loading = $('#' + LOADING);
|
||
if (!$loading.is(':visible') || $loading.hasClass('cp-loading-hidden')) {
|
||
UI.addLoadingScreen({hideTips: true});
|
||
}
|
||
loading.error = true;
|
||
$loading.find('.cp-loading-progress').remove();
|
||
$('.cp-loading-spinner-container').hide();
|
||
$('#cp-loading-tip').remove();
|
||
if (transparent) { $loading.css('opacity', 0.9); }
|
||
var $error = $loading.find('#cp-loading-message').show();
|
||
if (error instanceof Element) {
|
||
$error.html('').append(error);
|
||
} else {
|
||
$error.html(error || Messages.error);
|
||
}
|
||
if (exitable) {
|
||
$(window).focus();
|
||
$(window).keydown(function (e) {
|
||
if (e.which === 27) {
|
||
$loading.hide();
|
||
loading.error = false;
|
||
if (typeof(exitable) === "function") { exitable(); }
|
||
}
|
||
});
|
||
}
|
||
};
|
||
|
||
var $defaultIcon = $('<span>', {"class": "fa fa-file-text-o"});
|
||
UI.getIcon = function (type) {
|
||
var $icon = $defaultIcon.clone();
|
||
|
||
if (AppConfig.applicationsIcon && AppConfig.applicationsIcon[type]) {
|
||
var icon = AppConfig.applicationsIcon[type];
|
||
var font = icon.indexOf('cptools') === 0 ? 'cptools' : 'fa';
|
||
if (type === 'fileupload') { type = 'file'; }
|
||
if (type === 'folderupload') { type = 'file'; }
|
||
var appClass = ' cp-icon cp-icon-color-'+type;
|
||
$icon = $('<span>', {'class': font + ' ' + icon + appClass});
|
||
}
|
||
|
||
return $icon;
|
||
};
|
||
UI.getFileIcon = function (data) {
|
||
var $icon = UI.getIcon();
|
||
if (!data) { return $icon; }
|
||
var href = data.href || data.roHref;
|
||
var type = data.type;
|
||
if (!href && !type) { return $icon; }
|
||
|
||
if (!type) { type = Hash.parsePadUrl(href).type; }
|
||
$icon = UI.getIcon(type);
|
||
|
||
return $icon;
|
||
};
|
||
|
||
// Tooltips
|
||
|
||
UI.clearTooltips = function () {
|
||
// If an element is removed from the UI while a tooltip is applied on that element, the tooltip will get hung
|
||
// forever, this is a solution which just searches for tooltips which have no corrisponding element and removes
|
||
// them.
|
||
$('.tippy-popper').each(function (i, el) {
|
||
if (el._tippy && el._tippy.reference && document.body.contains(el._tippy.reference)) {
|
||
el._tippy.destroy();
|
||
el.remove();
|
||
return;
|
||
}
|
||
if ($('[aria-describedby=' + el.getAttribute('id') + ']').length === 0) {
|
||
el.remove();
|
||
}
|
||
});
|
||
};
|
||
|
||
var delay = typeof(AppConfig.tooltipDelay) === "number" ? AppConfig.tooltipDelay : 500;
|
||
$.extend(true, Tippy.defaults, {
|
||
placement: 'bottom',
|
||
performance: true,
|
||
delay: [delay, 0],
|
||
//sticky: true,
|
||
theme: 'cryptpad',
|
||
arrow: true,
|
||
maxWidth: '200px',
|
||
flip: true,
|
||
popperOptions: {
|
||
modifiers: {
|
||
preventOverflow: { boundariesElement: 'window' }
|
||
}
|
||
},
|
||
//arrowType: 'round',
|
||
dynamicTitle: false,
|
||
arrowTransform: 'scale(2)',
|
||
zIndex: 100000001
|
||
});
|
||
UI.addTooltips = function () {
|
||
var MutationObserver = window.MutationObserver;
|
||
var addTippy = function (i, el) {
|
||
if (el._tippy) { return; }
|
||
if (!el.getAttribute('title')) { return; }
|
||
if (el.nodeName === 'IFRAME') { return; }
|
||
var opts = {
|
||
distance: 15
|
||
};
|
||
Array.prototype.slice.apply(el.attributes).filter(function (obj) {
|
||
return /^data-tippy-/.test(obj.name);
|
||
}).forEach(function (obj) {
|
||
opts[obj.name.slice(11)] = obj.value;
|
||
});
|
||
if (!el.getAttribute('data-cptippy-html') && !el.fixHTML) {
|
||
el.setAttribute('title', Util.fixHTML(el.getAttribute('title'))); // fixHTML
|
||
el.fixHTML = true; // Don't clean HTML twice on the same element
|
||
}
|
||
Tippy(el, opts);
|
||
};
|
||
// This is the robust solution to remove dangling tooltips
|
||
// The mutation observer does not always find removed nodes.
|
||
//setInterval(UI.clearTooltips, delay);
|
||
|
||
$('[title]').each(addTippy);
|
||
var observer = new MutationObserver(function(mutations) {
|
||
mutations.forEach(function(mutation) {
|
||
if (mutation.type === "childList") {
|
||
for (var i = 0; i < mutation.addedNodes.length; i++) {
|
||
if ($(mutation.addedNodes[i]).attr('title')) {
|
||
addTippy(0, mutation.addedNodes[i]);
|
||
}
|
||
$(mutation.addedNodes[i]).find('[title]').each(addTippy);
|
||
}
|
||
|
||
if (mutation.removedNodes.length !== 0) {
|
||
UI.clearTooltips();
|
||
}
|
||
}
|
||
if (mutation.type === "attributes" && mutation.attributeName === "title") {
|
||
mutation.target.fixHTML = false;
|
||
addTippy(0, mutation.target);
|
||
}
|
||
});
|
||
});
|
||
observer.observe($('body')[0], {
|
||
attributes: true,
|
||
childList: true,
|
||
characterData: false,
|
||
subtree: true
|
||
});
|
||
};
|
||
|
||
UI.createCheckbox = function (id, labelTxt, checked, opts) {
|
||
opts = opts|| {};
|
||
// Input properties
|
||
var inputOpts = {
|
||
type: 'checkbox',
|
||
id: id
|
||
};
|
||
if (checked) { inputOpts.checked = 'checked'; }
|
||
$.extend(inputOpts, opts.input || {});
|
||
|
||
// Label properties
|
||
var labelOpts = {};
|
||
$.extend(labelOpts, opts.label || {});
|
||
if (labelOpts.class) { labelOpts.class += ' cp-checkmark'; }
|
||
|
||
// Mark properties
|
||
var markOpts = { tabindex: 0 };
|
||
$.extend(markOpts, opts.mark || {});
|
||
|
||
var input = h('input', inputOpts);
|
||
var $input = $(input);
|
||
var mark = h('span.cp-checkmark-mark', markOpts);
|
||
var $mark = $(mark);
|
||
var label = h('span.cp-checkmark-label', labelTxt);
|
||
|
||
$mark.keydown(function (e) {
|
||
if (e.which === 32) {
|
||
e.stopPropagation();
|
||
e.preventDefault();
|
||
$input.prop('checked', !$input.is(':checked'));
|
||
$input.change();
|
||
}
|
||
});
|
||
|
||
$input.change(function () { $mark.focus(); });
|
||
|
||
return h('label.cp-checkmark', labelOpts, [
|
||
input,
|
||
mark,
|
||
label
|
||
]);
|
||
};
|
||
|
||
UI.createRadio = function (name, id, labelTxt, checked, opts) {
|
||
opts = opts|| {};
|
||
// Input properties
|
||
var inputOpts = {
|
||
type: 'radio',
|
||
id: id,
|
||
name: name
|
||
};
|
||
if (checked) { inputOpts.checked = 'checked'; }
|
||
$.extend(inputOpts, opts.input || {});
|
||
|
||
// Label properties
|
||
var labelOpts = {};
|
||
$.extend(labelOpts, opts.label || {});
|
||
if (labelOpts.class) { labelOpts.class += ' cp-checkmark'; }
|
||
|
||
// Mark properties
|
||
var markOpts = { tabindex: 0 };
|
||
$.extend(markOpts, opts.mark || {});
|
||
|
||
var input = h('input', inputOpts);
|
||
var mark = h('span.cp-radio-mark', markOpts);
|
||
var label = h('span.cp-checkmark-label', labelTxt);
|
||
|
||
$(mark).keydown(function (e) {
|
||
if (e.which === 32) {
|
||
e.stopPropagation();
|
||
e.preventDefault();
|
||
if ($(input).is(':checked')) { return; }
|
||
$(input).prop('checked', !$(input).is(':checked'));
|
||
$(input).change();
|
||
}
|
||
});
|
||
|
||
$(input).change(function () { $(mark).focus(); });
|
||
|
||
var radio = h('label', labelOpts, [
|
||
input,
|
||
mark,
|
||
label
|
||
]);
|
||
|
||
$(radio).addClass('cp-radio');
|
||
|
||
return radio;
|
||
};
|
||
|
||
var corner = {
|
||
queue: [],
|
||
state: false
|
||
};
|
||
UI.cornerPopup = function (text, actions, footer, opts) {
|
||
opts = opts || {};
|
||
|
||
var dontShowAgain = h('div.cp-corner-dontshow', [
|
||
h('span.fa.fa-times'),
|
||
Messages.dontShowAgain
|
||
]);
|
||
|
||
var popup = h('div.cp-corner-container', [
|
||
setHTML(h('div.cp-corner-text'), text),
|
||
h('div.cp-corner-actions', actions),
|
||
setHTML(h('div.cp-corner-footer'), footer),
|
||
opts.dontShowAgain ? dontShowAgain : undefined
|
||
]);
|
||
|
||
var $popup = $(popup);
|
||
|
||
if (opts.hidden) {
|
||
$popup.addClass('cp-minimized');
|
||
}
|
||
if (opts.big) {
|
||
$popup.addClass('cp-corner-big');
|
||
}
|
||
if (opts.alt) {
|
||
$popup.addClass('cp-corner-alt');
|
||
}
|
||
|
||
var hide = function () {
|
||
$popup.hide();
|
||
};
|
||
var show = function () {
|
||
$popup.show();
|
||
};
|
||
var deletePopup = function () {
|
||
$popup.remove();
|
||
if (!corner.queue.length) {
|
||
// Make sure no other popup is displayed in the next 5s
|
||
setTimeout(function () {
|
||
if (corner.queue.length) {
|
||
$('body').append(corner.queue.pop());
|
||
return;
|
||
}
|
||
corner.state = false;
|
||
}, 5000);
|
||
return;
|
||
}
|
||
setTimeout(function () {
|
||
$('body').append(corner.queue.pop());
|
||
}, 5000);
|
||
};
|
||
|
||
$(dontShowAgain).click(function () {
|
||
deletePopup();
|
||
if (typeof(opts.dontShowAgain) === "function") {
|
||
opts.dontShowAgain();
|
||
}
|
||
});
|
||
|
||
if (corner.state) {
|
||
corner.queue.push(popup);
|
||
} else {
|
||
corner.state = true;
|
||
$('body').append(popup);
|
||
}
|
||
|
||
return {
|
||
popup: popup,
|
||
hide: hide,
|
||
show: show,
|
||
delete: deletePopup
|
||
};
|
||
};
|
||
|
||
UI.makeSpinner = function ($container) {
|
||
var $ok = $('<span>', {'class': 'fa fa-check', title: Messages.saved}).hide();
|
||
var $spinner = $('<span>', {'class': 'fa fa-spinner fa-pulse'}).hide();
|
||
|
||
var state = false;
|
||
var to;
|
||
|
||
var spin = function () {
|
||
clearTimeout(to);
|
||
state = true;
|
||
$ok.hide();
|
||
$spinner.show();
|
||
};
|
||
var hide = function () {
|
||
clearTimeout(to);
|
||
state = false;
|
||
$ok.hide();
|
||
$spinner.hide();
|
||
};
|
||
var done = function () {
|
||
clearTimeout(to);
|
||
state = false;
|
||
$ok.show();
|
||
$spinner.hide();
|
||
to = setTimeout(function () {
|
||
$ok.hide();
|
||
}, 500);
|
||
};
|
||
|
||
if ($container && $container.append) {
|
||
$container.append($ok);
|
||
$container.append($spinner);
|
||
}
|
||
|
||
return {
|
||
getState: function () { return state; },
|
||
ok: $ok[0],
|
||
spinner: $spinner[0],
|
||
spin: spin,
|
||
hide: hide,
|
||
done: done
|
||
};
|
||
};
|
||
|
||
UI.createContextMenu = function (menu) {
|
||
var $menu = $(menu).appendTo($('body'));
|
||
|
||
var display = function (e) {
|
||
$menu.css({ display: "block" });
|
||
var h = $menu.outerHeight();
|
||
var w = $menu.outerWidth();
|
||
var wH = window.innerHeight;
|
||
var wW = window.innerWidth;
|
||
if (h > wH) {
|
||
$menu.css({
|
||
top: '0px',
|
||
bottom: ''
|
||
});
|
||
} else if (e.pageY + h <= wH) {
|
||
$menu.css({
|
||
top: e.pageY+'px',
|
||
bottom: ''
|
||
});
|
||
} else {
|
||
$menu.css({
|
||
bottom: '0px',
|
||
top: ''
|
||
});
|
||
}
|
||
if(w > wW) {
|
||
$menu.css({
|
||
left: '0px',
|
||
right: ''
|
||
});
|
||
} else if (e.pageX + w <= wW) {
|
||
$menu.css({
|
||
left: e.pageX+'px',
|
||
right: ''
|
||
});
|
||
} else {
|
||
$menu.css({
|
||
left: '',
|
||
right: '0px',
|
||
});
|
||
}
|
||
};
|
||
|
||
var hide = function () {
|
||
$menu.hide();
|
||
};
|
||
var remove = function () {
|
||
$menu.remove();
|
||
};
|
||
|
||
$('body').click(hide);
|
||
|
||
return {
|
||
menu: menu,
|
||
show: display,
|
||
hide: hide,
|
||
remove: remove
|
||
};
|
||
};
|
||
|
||
/* Given two jquery objects (a 'button' and a 'drawer')
|
||
add handlers to make it such that clicking the button
|
||
displays the drawer contents, and blurring the button
|
||
hides the drawer content. Used for toolbar buttons at the moment.
|
||
*/
|
||
UI.createDrawer = function ($button, $content) {
|
||
$button.click(function () {
|
||
$content.toggle();
|
||
$button.removeClass('cp-toolbar-button-active');
|
||
if ($content.is(':visible')) {
|
||
$button.addClass('cp-toolbar-button-active');
|
||
$content.focus();
|
||
var wh = $(window).height();
|
||
var topPos = $button[0].getBoundingClientRect().bottom;
|
||
$content.css('max-height', Math.floor(wh - topPos - 1)+'px');
|
||
}
|
||
});
|
||
var onBlur = function (e) {
|
||
if (e.relatedTarget) {
|
||
var $relatedTarget = $(e.relatedTarget);
|
||
|
||
if ($relatedTarget.is('.cp-toolbar-drawer-button')) { return; }
|
||
if ($relatedTarget.parents('.cp-toolbar-drawer-content').length) {
|
||
$relatedTarget.blur(onBlur);
|
||
return;
|
||
}
|
||
}
|
||
$button.removeClass('cp-toolbar-button-active');
|
||
$content.hide();
|
||
};
|
||
$content.blur(onBlur).appendTo($button);
|
||
$('body').keydown(function (e) {
|
||
if (e.which === 27) {
|
||
$content.blur();
|
||
}
|
||
});
|
||
};
|
||
|
||
return UI;
|
||
});
|