diff --git a/customize.dist/src/less2/include/alertify.less b/customize.dist/src/less2/include/alertify.less index f9f2c28b8..16688f179 100644 --- a/customize.dist/src/less2/include/alertify.less +++ b/customize.dist/src/less2/include/alertify.less @@ -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; } diff --git a/www/common/common-interface.js b/www/common/common-interface.js index 466c1aec2..609317ea3 100644 --- a/www/common/common-interface.js +++ b/www/common/common-interface.js @@ -56,21 +56,161 @@ define([ $(window).off('keyup', handler); }; - UI.alert = function (msg, cb, force) { - cb = cb || function () {}; - if (force !== true) { msg = Util.fixHTML(msg); } - var close = function () { - findOKButton().click(); + 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 keyHandler = listenForKeys(close, close); - Alertify - .okBtn(Messages.okButton || 'OK') - .alert(msg, function (ev) { - cb(ev); - stopListening(keyHandler); + var $t = t.tokenfield = $(t.element).tokenfield(); + t.getTokens = function () { + return $t.tokenfield('getTokens').map(function (token) { + return token.value; }); - window.setTimeout(function () { - findOKButton().focus(); + }; + + 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 (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; }); diff --git a/www/common/toolbar2.js b/www/common/toolbar2.js index e49a490ab..c79a9c233 100644 --- a/www/common/toolbar2.js +++ b/www/common/toolbar2.js @@ -516,29 +516,11 @@ define([ $('

').text(Messages.fileEmbedTitle).appendTo($content); var $script = $('

').text(Messages.fileEmbedScript).appendTo($content); $('
').appendTo($script); - var scriptId = uid(); - $('', { - type: 'text', - id: scriptId, - readonly: 'readonly', - value: Cryptpad.getMediatagScript(), - }).appendTo($script); + $script.append(Cryptpad.dialog.selectable(Cryptpad.getMediatagScript())); var $tag = $('

').text(Messages.fileEmbedTag).appendTo($content); $('
').appendTo($tag); - var tagId = uid(); - $('', { - 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);