refactor ui elements
ansuz
parent
bca9ba66cb
commit
809b56625d
|
|
@ -65,6 +65,12 @@
|
|||
height: 100%;
|
||||
z-index: 99999;
|
||||
|
||||
.message {
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
color: @alertify-fg;
|
||||
}
|
||||
}
|
||||
|
||||
h1, h2, h3 {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -56,21 +56,161 @@ define([
|
|||
$(window).off('keyup', handler);
|
||||
};
|
||||
|
||||
var dialog = UI.dialog = {};
|
||||
|
||||
dialog.selectable = function (value) {
|
||||
var input = h('input', {
|
||||
type: 'text',
|
||||
readonly: 'readonly',
|
||||
});
|
||||
$(input).val(value).click(function () {
|
||||
input.select();
|
||||
});
|
||||
return input;
|
||||
};
|
||||
|
||||
dialog.okButton = function () {
|
||||
return h('button.ok', { tabindex: '2', }, Messages.okButton);
|
||||
};
|
||||
|
||||
dialog.cancelButton = function () {
|
||||
return h('button.cancel', { tabindex: '1'}, Messages.cancelButton);
|
||||
};
|
||||
|
||||
dialog.message = function (text) {
|
||||
return h('p.message', text);
|
||||
};
|
||||
|
||||
dialog.textInput = function (opt) {
|
||||
return h('input', opt || {
|
||||
placeholder: '',
|
||||
type: 'text',
|
||||
'class': 'cp-text-input',
|
||||
});
|
||||
};
|
||||
|
||||
dialog.nav = function (content) {
|
||||
return h('nav', content || [
|
||||
dialog.cancelButton(),
|
||||
dialog.okButton(),
|
||||
]);
|
||||
};
|
||||
|
||||
dialog.frame = function (content) {
|
||||
return h('div.alertify', [
|
||||
h('div.dialog', [
|
||||
h('div', content),
|
||||
])
|
||||
]);
|
||||
};
|
||||
|
||||
UI.tokenField = function (target) {
|
||||
var t = {
|
||||
element: target || h('input'),
|
||||
};
|
||||
var $t = t.tokenfield = $(t.element).tokenfield();
|
||||
t.getTokens = function () {
|
||||
return $t.tokenfield('getTokens').map(function (token) {
|
||||
return token.value;
|
||||
});
|
||||
};
|
||||
|
||||
t.preventDuplicates = function (cb) {
|
||||
$t.on('tokenfield:createtoken', function (ev) {
|
||||
var val;
|
||||
if (t.getTokens().some(function (t) {
|
||||
if (t === ev.attrs.value) { 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,
|
||||
label: token,
|
||||
};
|
||||
}));
|
||||
};
|
||||
|
||||
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, cb) {
|
||||
var input = dialog.textInput();
|
||||
|
||||
var tagger = dialog.frame([
|
||||
dialog.message('make some tags'), // TODO translate
|
||||
input,
|
||||
dialog.nav(),
|
||||
]);
|
||||
|
||||
var field = UI.tokenField(input).preventDuplicates(function (val) {
|
||||
UI.warn('Duplicate tag: ' + val); // TODO translate
|
||||
});
|
||||
|
||||
var close = Util.once(function () {
|
||||
var $t = $(tagger).fadeOut(150, function () { $t.remove(); });
|
||||
});
|
||||
|
||||
var listener = listenForKeys(function () {}, function () {
|
||||
close();
|
||||
stopListening(listener);
|
||||
});
|
||||
|
||||
var CB = Util.once(cb);
|
||||
findOKButton(tagger).click(function () {
|
||||
var tokens = field.getTokens();
|
||||
close();
|
||||
CB(tokens);
|
||||
});
|
||||
findCancelButton(tagger).click(function () {
|
||||
close();
|
||||
CB(null);
|
||||
});
|
||||
|
||||
// :(
|
||||
setTimeout(function () {
|
||||
field.setTokens(tags);
|
||||
field.focus();
|
||||
});
|
||||
|
||||
return tagger;
|
||||
};
|
||||
|
||||
UI.alert = function (msg, cb, force) {
|
||||
cb = cb || function () {};
|
||||
if (force !== true) { msg = Util.fixHTML(msg); }
|
||||
var close = function () {
|
||||
findOKButton().click();
|
||||
};
|
||||
var keyHandler = listenForKeys(close, close);
|
||||
Alertify
|
||||
.okBtn(Messages.okButton || 'OK')
|
||||
.alert(msg, function (ev) {
|
||||
cb(ev);
|
||||
stopListening(keyHandler);
|
||||
});
|
||||
window.setTimeout(function () {
|
||||
findOKButton().focus();
|
||||
if (typeof(msg) === 'string' && force !== true) {
|
||||
msg = Util.fixHTML(msg);
|
||||
}
|
||||
var ok = dialog.okButton();
|
||||
var frame = dialog.frame([
|
||||
dialog.message(msg),
|
||||
dialog.nav(ok),
|
||||
]);
|
||||
|
||||
var listener;
|
||||
var close = Util.once(function () {
|
||||
$(frame).fadeOut(150, function () { $(this).remove(); });
|
||||
stopListening(listener);
|
||||
});
|
||||
listener = listenForKeys(close, close);
|
||||
var $ok = $(ok).click(close);
|
||||
|
||||
document.body.appendChild(frame);
|
||||
setTimeout(function () {
|
||||
$ok.focus();
|
||||
if (typeof(UI.notify) === 'function') {
|
||||
UI.notify();
|
||||
}
|
||||
|
|
@ -369,126 +509,5 @@ define([
|
|||
}
|
||||
};
|
||||
|
||||
UI.tokenField = function (target) {
|
||||
var t = {
|
||||
element: target || h('input'),
|
||||
};
|
||||
var $t = t.tokenfield = $(t.element).tokenfield();
|
||||
t.getTokens = function () {
|
||||
return $t.tokenfield('getTokens').map(function (token) {
|
||||
return token.value;
|
||||
});
|
||||
};
|
||||
|
||||
t.preventDuplicates = function (cb) {
|
||||
$t.on('tokenfield:createtoken', function (ev) {
|
||||
var val;
|
||||
if (t.getTokens().some(function (t) {
|
||||
if (t === ev.attrs.value) { 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,
|
||||
label: token,
|
||||
};
|
||||
}));
|
||||
};
|
||||
|
||||
t.focus = function () {
|
||||
var $temp = $t.closest('.tokenfield').find('.token-input');
|
||||
$temp.css('width', '20%');
|
||||
$t.tokenfield('focusInput', $temp[0]);
|
||||
};
|
||||
|
||||
return t;
|
||||
};
|
||||
|
||||
var dialog = UI.dialog = {};
|
||||
dialog.okButton = function () {
|
||||
return h('button.ok', { tabindex: '2', }, Messages.okButton);
|
||||
};
|
||||
|
||||
dialog.cancelButton = function () {
|
||||
return h('button.cancel', { tabindex: '1'}, Messages.cancelButton);
|
||||
};
|
||||
|
||||
dialog.message = function (text) {
|
||||
return h('p.message', text);
|
||||
};
|
||||
|
||||
dialog.textInput = function (opt) {
|
||||
return h('input', opt || {
|
||||
placeholder: '',
|
||||
type: 'text',
|
||||
'class': 'cp-text-input',
|
||||
});
|
||||
};
|
||||
|
||||
dialog.nav = function (content) {
|
||||
return h('nav', content || [
|
||||
dialog.cancelButton(),
|
||||
dialog.okButton(),
|
||||
]);
|
||||
};
|
||||
|
||||
dialog.frame = function (content) {
|
||||
return h('div.alertify', [
|
||||
h('div.dialog', [
|
||||
h('div', content),
|
||||
])
|
||||
]);
|
||||
};
|
||||
|
||||
dialog.tagPrompt = function (tags, cb) {
|
||||
var input = dialog.textInput();
|
||||
|
||||
var tagger = dialog.frame([
|
||||
dialog.message('make some tags'), // TODO translate
|
||||
input,
|
||||
dialog.nav(),
|
||||
]);
|
||||
|
||||
var field = UI.tokenField(input).preventDuplicates(function (val) {
|
||||
UI.warn('Duplicate tag: ' + val); // TODO translate
|
||||
});
|
||||
|
||||
var close = Util.once(function () {
|
||||
var $t = $(tagger).fadeOut(150, function () { $t.remove(); });
|
||||
});
|
||||
|
||||
var listener = listenForKeys(function () {}, function () {
|
||||
close();
|
||||
stopListening(listener);
|
||||
});
|
||||
|
||||
var CB = Util.once(cb);
|
||||
findOKButton(tagger).click(function () {
|
||||
var tokens = field.getTokens();
|
||||
close();
|
||||
CB(tokens);
|
||||
});
|
||||
findCancelButton(tagger).click(function () {
|
||||
close();
|
||||
CB(null);
|
||||
});
|
||||
|
||||
// :(
|
||||
setTimeout(function () {
|
||||
field.setTokens(tags);
|
||||
field.focus();
|
||||
});
|
||||
|
||||
return tagger;
|
||||
};
|
||||
|
||||
return UI;
|
||||
});
|
||||
|
|
|
|||
|
|
@ -516,29 +516,11 @@ define([
|
|||
$('<h3>').text(Messages.fileEmbedTitle).appendTo($content);
|
||||
var $script = $('<p>').text(Messages.fileEmbedScript).appendTo($content);
|
||||
$('<br>').appendTo($script);
|
||||
var scriptId = uid();
|
||||
$('<input>', {
|
||||
type: 'text',
|
||||
id: scriptId,
|
||||
readonly: 'readonly',
|
||||
value: Cryptpad.getMediatagScript(),
|
||||
}).appendTo($script);
|
||||
$script.append(Cryptpad.dialog.selectable(Cryptpad.getMediatagScript()));
|
||||
var $tag = $('<p>').text(Messages.fileEmbedTag).appendTo($content);
|
||||
$('<br>').appendTo($tag);
|
||||
var tagId = uid();
|
||||
$('<input>', {
|
||||
type:'text',
|
||||
id: tagId,
|
||||
readonly:'readonly',
|
||||
value:Cryptpad.getMediatagFromHref(url),
|
||||
}).appendTo($tag);
|
||||
Cryptpad.alert($content.html(), null, true);
|
||||
$('#'+scriptId).click(function () {
|
||||
this.select();
|
||||
});
|
||||
$('#'+tagId).click(function () {
|
||||
this.select();
|
||||
});
|
||||
$tag.append(Cryptpad.dialog.selectable(Cryptpad.getMediatagFromHref(url)));
|
||||
Cryptpad.alert($content[0], null, true);
|
||||
});
|
||||
|
||||
toolbar.$leftside.append($shareBlock);
|
||||
|
|
|
|||
Loading…
Reference in New Issue