refactor ui elements

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;
         }

www/common/common-interface.js

@@ -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); }
+        if (typeof(msg) === 'string' && force !== true) {
-        var close = function () {
+            msg = Util.fixHTML(msg);
-            findOKButton().click();
+        }
-        };
+        var ok = dialog.okButton();
-        var keyHandler = listenForKeys(close, close);
+        var frame = dialog.frame([
-        Alertify
+            dialog.message(msg),
-            .okBtn(Messages.okButton || 'OK')
+            dialog.nav(ok),
-            .alert(msg, function (ev) {
+        ]);
-                cb(ev);
+
-                stopListening(keyHandler);
+        var listener;
-            });
+        var close = Util.once(function () {
-        window.setTimeout(function () {
+            $(frame).fadeOut(150, function () { $(this).remove(); });
-            findOKButton().focus();
+            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;
 });

www/common/toolbar2.js

@@ -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();
+            $script.append(Cryptpad.dialog.selectable(Cryptpad.getMediatagScript()));
-            $('<input>', {
-                type: 'text',
-                id: scriptId,
-                readonly: 'readonly',
-                value: Cryptpad.getMediatagScript(),
-            }).appendTo($script);
             var $tag = $('<p>').text(Messages.fileEmbedTag).appendTo($content);
             $('<br>').appendTo($tag);
-            var tagId = uid();
+            $tag.append(Cryptpad.dialog.selectable(Cryptpad.getMediatagFromHref(url)));
-            $('<input>', {
+            Cryptpad.alert($content[0], null, true);
-                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();
-            });
         });
 
         toolbar.$leftside.append($shareBlock);