Remove common-interface dependency from cryptpad-common

customize.dist/main.js

@@ -88,7 +88,7 @@ define([
         $('button.login').click(function () {
             // setTimeout 100ms to remove the keyboard on mobile devices before the loading screen pops up
             window.setTimeout(function () {
-                Cryptpad.addLoadingScreen({loadingText: Messages.login_hashing});
+                UI.addLoadingScreen({loadingText: Messages.login_hashing});
                 // We need a setTimeout(cb, 0) otherwise the loading screen is only displayed after hashing the password
                 window.setTimeout(function () {
                     loginReady(function () {
@@ -116,22 +116,22 @@ define([
                             }
                             switch (err) {
                                 case 'NO_SUCH_USER':
-                                    Cryptpad.removeLoadingScreen(function () {
+                                    UI.removeLoadingScreen(function () {
                                         UI.alert(Messages.login_noSuchUser);
                                     });
                                     break;
                                 case 'INVAL_USER':
-                                    Cryptpad.removeLoadingScreen(function () {
+                                    UI.removeLoadingScreen(function () {
                                         UI.alert(Messages.login_invalUser);
                                     });
                                     break;
                                 case 'INVAL_PASS':
-                                    Cryptpad.removeLoadingScreen(function () {
+                                    UI.removeLoadingScreen(function () {
                                         UI.alert(Messages.login_invalPass);
                                     });
                                     break;
                                 default: // UNHANDLED ERROR
-                                    Cryptpad.errorLoadingScreen(Messages.login_unhandledError);
+                                    UI.errorLoadingScreen(Messages.login_unhandledError);
                             }
                         });
                     });

www/common/common-interface.js

@@ -2,16 +2,17 @@ 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/notify.js',
-    '/common/visible.js',
     '/common/tippy.min.js',
     '/customize/pages.js',
     '/common/hyperscript.js',
     '/bower_components/bootstrap-tokenfield/dist/bootstrap-tokenfield.js',
     'css!/common/tippy.css',
-], function ($, Messages, Util, AppConfig, Alertify, Notify, Visible, Tippy, Pages, h) {
+], function ($, Messages, Util, Hash, Notifier, AppConfig,
+            Alertify, Tippy, Pages, h) {
     var UI = {};
 
     /*
@@ -270,7 +271,7 @@ define([
         document.body.appendChild(frame);
         setTimeout(function () {
             $ok.focus();
-            UI.notify();
+            Notifier.notify();
         });
     };
 
@@ -318,7 +319,7 @@ define([
         document.body.appendChild(frame);
         setTimeout(function () {
             $(input).select().focus();
-            UI.notify();
+            Notifier.notify();
         });
     };
 
@@ -365,7 +366,7 @@ define([
 
         document.body.appendChild(frame);
         setTimeout(function () {
-            UI.notify();
+            Notifier.notify();
             $(frame).find('.ok').focus();
             if (typeof(opt.done) === 'function') {
                 opt.done($ok.closest('.dialog'));
@@ -468,44 +469,6 @@ define([
         $('#' + LOADING).find('p').html(error || Messages.error);
     };
 
-    // Notify
-    var notify = {};
-    UI.unnotify = function () {
-        if (notify.tabNotification &&
-            typeof(notify.tabNotification.cancel) === 'function') {
-            notify.tabNotification.cancel();
-        }
-    };
-
-    UI.notify = function () {
-        if (Visible.isSupported() && !Visible.currently()) {
-            UI.unnotify();
-            notify.tabNotification = Notify.tab(1000, 10);
-        }
-    };
-
-    if (Visible.isSupported()) {
-        Visible.onChange(function (yes) {
-            if (yes) { UI.unnotify(); }
-        });
-    }
-
-    UI.importContent = function (type, f, cfg) {
-        return function () {
-            var $files = $('<input>', {type:"file"});
-            if (cfg && cfg.accept) {
-                $files.attr('accept', cfg.accept);
-            }
-            $files.click();
-            $files.on('change', function (e) {
-                var file = e.target.files[0];
-                var reader = new FileReader();
-                reader.onload = function (e) { f(e.target.result, file); };
-                reader.readAsText(file, type);
-            });
-        };
-    };
-
     var $defaultIcon = $('<span>', {"class": "fa fa-file-text-o"});
     UI.getIcon = function (type) {
         var $icon = $defaultIcon.clone();
@@ -517,6 +480,17 @@ define([
 
         return $icon;
     };
+    UI.getFileIcon = function (data) {
+        var $icon = UI.getIcon();
+        if (!data) { return $icon; }
+        var href = data.href;
+        if (!href) { return $icon; }
+
+        var type = Hash.parsePadUrl(href).type;
+        $icon = UI.getIcon(type);
+
+        return $icon;
+    };
 
     // Tooltips
 
@@ -524,11 +498,8 @@ define([
         // 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.
-        var win;
         $('.tippy-popper').each(function (i, el) {
-            win = win || $('#pad-iframe').length? $('#pad-iframe')[0].contentWindow: undefined;
+            if ($('[aria-describedby=' + el.getAttribute('id') + ']').length === 0) {
-            if (!win) { return; }
-            if (win.$('[aria-describedby=' + el.getAttribute('id') + ']').length === 0) {
                 el.remove();
             }
         });
@@ -536,9 +507,9 @@ define([
 
     UI.addTooltips = function () {
         var MutationObserver = window.MutationObserver;
-        var addTippy = function (el) {
-            if (el.nodeName === 'IFRAME') { return; }
         var delay = typeof(AppConfig.tooltipDelay) === "number" ? AppConfig.tooltipDelay : 500;
+        var addTippy = function (i, el) {
+            if (el.nodeName === 'IFRAME') { return; }
             Tippy(el, {
                 position: 'bottom',
                 distance: 0,
@@ -547,26 +518,30 @@ define([
                 delay: [delay, 0]
             });
         };
-        var $body = $('body');
+        // This is the robust solution to remove dangling tooltips
-        var $padIframe = $('#pad-iframe').contents().find('body');
+        // The mutation observer does not always find removed nodes.
-        $('[title]').each(function (i, el) {
+        setInterval(UI.clearTooltips, delay);
-            addTippy(el);
+        var checkRemoved = function (x) {
-        });
+            var out = false;
-        $('#pad-iframe').contents().find('[title]').each(function (i, el) {
+            $(x).find('[aria-describedby]').each(function (i, el) {
-            addTippy(el);
+                var id = el.getAttribute('aria-describedby');
+                if (id.indexOf('tippy-tooltip-') !== 0) { return; }
+                out = true;
             });
+            return out;
+        };
+        $('[title]').each(addTippy);
         var observer = new MutationObserver(function(mutations) {
+            var removed = false;
             mutations.forEach(function(mutation) {
-                if (mutation.type === 'childList' && mutation.addedNodes.length) {
+                for (var i = 0; i < mutation.addedNodes.length; i++) {
-                    $body.find('[title]').each(function (i, el) {
+                    $(mutation.addedNodes[i]).find('[title]').each(addTippy);
-                        addTippy(el);
+                }
-                    });
+                for (var j = 0; j < mutation.removedNodes.length; j++) {
-                    if (!$padIframe.length) { return; }
+                    removed |= checkRemoved(mutation.removedNodes[j]);
-                    $padIframe.find('[title]').each(function (i, el) {
-                        addTippy(el);
-                    });
                 }
             });
+            if (removed) { UI.clearTooltips(); }
         });
         observer.observe($('body')[0], {
             attributes: false,
@@ -574,14 +549,6 @@ define([
             characterData: false,
             subtree: true
         });
-        if ($('#pad-iframe').length) {
-            observer.observe($('#pad-iframe').contents().find('body')[0], {
-                attributes: false,
-                childList: true,
-                characterData: false,
-                subtree: true
-            });
-        }
     };
 
     return UI;

www/common/common-notifier.js

@@ -0,0 +1,29 @@
+define([
+    '/common/visible.js',
+    '/common/notify.js'
+], function (Visible, Notify) {
+    var Notifier = {};
+
+    var notify = {};
+    Notifier.unnotify = function () {
+        if (notify.tabNotification &&
+            typeof(notify.tabNotification.cancel) === 'function') {
+            notify.tabNotification.cancel();
+        }
+    };
+
+    Notifier.notify = function () {
+        if (Visible.isSupported() && !Visible.currently()) {
+            Notifier.unnotify();
+            notify.tabNotification = Notify.tab(1000, 10);
+        }
+    };
+
+    if (Visible.isSupported()) {
+        Visible.onChange(function (yes) {
+            if (yes) { Notifier.unnotify(); }
+        });
+    }
+
+    return Notifier;
+});

www/common/common-ui-elements.js

@@ -6,11 +6,9 @@ define([
     '/common/common-language.js',
     '/common/common-interface.js',
     '/common/media-tag.js',
-    '/common/tippy.min.js',
-    '/customize/application_config.js',
 
     'css!/common/tippy.css',
-], function ($, Config, Cryptpad, Util, UI, Language, MediaTag, Tippy, AppConfig) {
+], function ($, Config, Cryptpad, Util, Language, UI, MediaTag) {
     var UIElements = {};
     var Messages = Cryptpad.Messages;
 
@@ -36,7 +34,7 @@ define([
                 }
                 return void console.error(err || res.error);
             }
-            Cryptpad.dialog.tagPrompt(res.data, function (tags) {
+            UI.dialog.tagPrompt(res.data, function (tags) {
                 if (!Array.isArray(tags)) { return; }
                 sframeChan.event('EV_TAGS_SET', {
                     tags: tags,
@@ -46,6 +44,22 @@ define([
         });
     };
 
+    var importContent = function (type, f, cfg) {
+        return function () {
+            var $files = $('<input>', {type:"file"});
+            if (cfg && cfg.accept) {
+                $files.attr('accept', cfg.accept);
+            }
+            $files.click();
+            $files.on('change', function (e) {
+                var file = e.target.files[0];
+                var reader = new FileReader();
+                reader.onload = function (e) { f(e.target.result, file); };
+                reader.readAsText(file, type);
+            });
+        };
+    };
+
     UIElements.createButton = function (common, type, rightside, data, callback) {
         var AppConfig = common.getAppConfig();
         var button;
@@ -71,7 +85,7 @@ define([
                 if (callback) {
                     button
                     .click(common.prepareFeedback(type))
-                    .click(Cryptpad.importContent('text/plain', function (content, file) {
+                    .click(importContent('text/plain', function (content, file) {
                         callback(content, file);
                     }, {accept: data ? data.accept : undefined}));
                 }
@@ -781,6 +795,37 @@ define([
         return $block;
     };
 
+    UIElements.createModal = function (cfg) {
+        var $body = cfg.$body || $('body');
+        var $blockContainer = $body.find('#'+cfg.id);
+        if (!$blockContainer.length) {
+            $blockContainer = $('<div>', {
+                'class': 'cp-modal-container',
+                'id': cfg.id
+            });
+        }
+        var hide = function () {
+            if (cfg.onClose) { return void cfg.onClose(); }
+            $blockContainer.hide();
+        };
+        $blockContainer.html('').appendTo($body);
+        var $block = $('<div>', {'class': 'cp-modal'}).appendTo($blockContainer);
+        $('<span>', {
+            'class': '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 $blockContainer;
+    };
+
 
     UIElements.initFilePicker = function (common, cfg) {
         var onSelect = cfg.onSelect || $.noop;
@@ -816,10 +861,10 @@ define([
             var fileDialogCfg = {
                 onSelect: function (data) {
                     if (data.type === type && first) {
-                        Cryptpad.addLoadingScreen({hideTips: true});
+                        UI.addLoadingScreen({hideTips: true});
                         sframeChan.query('Q_TEMPLATE_USE', data.href, function () {
                             first = false;
-                            Cryptpad.removeLoadingScreen();
+                            UI.removeLoadingScreen();
                             common.feedback('TEMPLATE_USED');
                         });
                         if (focus) { focus.focus(); }
@@ -842,58 +887,5 @@ define([
         });
     };
 
-    UIElements.addTooltips = function () {
-        var MutationObserver = window.MutationObserver;
-        var delay = typeof(AppConfig.tooltipDelay) === "number" ? AppConfig.tooltipDelay : 500;
-        var addTippy = function (i, el) {
-            if (el.nodeName === 'IFRAME') { return; }
-            Tippy(el, {
-                position: 'bottom',
-                distance: 0,
-                performance: true,
-                dynamicTitle: true,
-                delay: [delay, 0]
-            });
-        };
-        var clearTooltips = function () {
-            $('.tippy-popper').each(function (i, el) {
-                if ($('[aria-describedby=' + el.getAttribute('id') + ']').length === 0) {
-                    el.remove();
-                }
-            });
-        };
-        // This is the robust solution to remove dangling tooltips
-        // The mutation observer does not always find removed nodes.
-        setInterval(clearTooltips, delay);
-        var checkRemoved = function (x) {
-            var out = false;
-            $(x).find('[aria-describedby]').each(function (i, el) {
-                var id = el.getAttribute('aria-describedby');
-                if (id.indexOf('tippy-tooltip-') !== 0) { return; }
-                out = true;
-            });
-            return out;
-        };
-        $('[title]').each(addTippy);
-        var observer = new MutationObserver(function(mutations) {
-            var removed = false;
-            mutations.forEach(function(mutation) {
-                for (var i = 0; i < mutation.addedNodes.length; i++) {
-                    $(mutation.addedNodes[i]).find('[title]').each(addTippy);
-                }
-                for (var j = 0; j < mutation.removedNodes.length; j++) {
-                    removed |= checkRemoved(mutation.removedNodes[j]);
-                }
-            });
-            if (removed) { clearTooltips(); }
-        });
-        observer.observe($('body')[0], {
-            attributes: false,
-            childList: true,
-            characterData: false,
-            subtree: true
-        });
-    };
-
     return UIElements;
 });

www/common/cryptpad-common.js

@@ -5,7 +5,6 @@ define([
     '/common/fsStore.js',
     '/common/common-util.js',
     '/common/common-hash.js',
-    '/common/common-interface.js',
     '/common/common-messaging.js',
     '/file/file-crypto.js',
     '/common/common-realtime.js',
@@ -17,7 +16,7 @@ define([
     '/common/media-tag.js',
     '/bower_components/nthen/index.js',
     '/bower_components/localforage/dist/localforage.min.js',
-], function ($, Config, Messages, Store, Util, Hash, UI,
+], function ($, Config, Messages, Store, Util, Hash,
             Messaging, FileCrypto, Realtime, Language, Clipboard,
             Pinpad, AppConfig, MediaTag, Nthen, localForage) {
 
@@ -58,29 +57,6 @@ define([
     var rpc;
     var anon_rpc;
 
-    // import UI elements
-    //common.findCancelButton = UI.findCancelButton; REFACTOR
-    //common.findOKButton = UI.findOKButton;
-    //common.listenForKeys = UI.listenForKeys;
-    //common.stopListening = UI.stopListening;
-    //common.prompt = UI.prompt;
-    //common.confirm = UI.confirm;
-    //common.alert = UI.alert;
-    //common.log = UI.log;
-    common.warn = UI.warn;
-    common.spinner = UI.spinner;
-    common.addLoadingScreen = UI.addLoadingScreen;
-    common.removeLoadingScreen = UI.removeLoadingScreen;
-    common.errorLoadingScreen = UI.errorLoadingScreen;
-    common.notify = UI.notify;
-    common.unnotify = UI.unnotify;
-    common.getIcon = UI.getIcon;
-    common.addTooltips = UI.addTooltips;
-    common.clearTooltips = UI.clearTooltips;
-    common.importContent = UI.importContent;
-    common.tokenField = UI.tokenField;
-    common.dialog = UI.dialog;
-
     // import common utilities for export
     common.find = Util.find;
     common.hexToBase64 = Util.hexToBase64;
@@ -626,35 +602,7 @@ define([
             return t.href === rhref;
         });
     };
-    common.selectTemplate = function (type, rt, Crypt) {
+
-        if (!AppConfig.enableTemplates) { return; }
-        var temps = listTemplates(type);
-        if (temps.length === 0) { return; }
-        var $content = $('<div>');
-        $('<b>').text(Messages.selectTemplate).appendTo($content);
-        $('<p>', {id:"selectTemplate"}).appendTo($content);
-        UI.alert($content.html(), null, true);
-        var $p = $('#selectTemplate');
-        temps.forEach(function (t, i) {
-            $('<a>', {href: t.href, title: t.title}).text(t.title).click(function (e) {
-                e.preventDefault();
-                var parsed = parsePadUrl(t.href);
-                if(!parsed) { throw new Error("Cannot get template hash"); }
-                common.addLoadingScreen({hideTips: true});
-                Crypt.get(parsed.hash, function (err, val) {
-                    if (err) { throw new Error(err); }
-                    var p = parsePadUrl(window.location.href);
-                    Crypt.put(p.hash, val, function () {
-                        UI.findOKButton().click();
-                        common.removeLoadingScreen();
-                        common.feedback('TEMPLATE_USED');
-                    });
-                });
-            }).appendTo($p);
-            if (i !== temps.length) { $('<br>').appendTo($p); }
-        });
-        UI.findOKButton().text(Messages.cancelButton);
-    };
     // Secure iframes
     common.useTemplate = function (href, Crypt, cb) {
         var parsed = parsePadUrl(href);
@@ -696,7 +644,6 @@ define([
         _onDisplayNameChanged.forEach(function (h) {
             h(newName, isLocal);
         });
-        common.clearTooltips();
     };
 
     // STORAGE
@@ -781,9 +728,6 @@ define([
                 var data = makePad(href, name);
                 getStore().pushData(data, function (e, id) {
                     if (e) {
-                        if (e === 'E_OVER_LIMIT') {
-                            UI.alert(Messages.pinLimitNotPinned, null, true);
-                        }
                         return void cb(e);
                     }
                     getStore().addPad(id, common.initialPath);
@@ -1299,105 +1243,6 @@ define([
         'image/gif',
     ];
 
-    // This is duplicated in drive/main.js, it should be unified
-    var getFileIcon = common.getFileIcon = function (data) {
-        var $icon = common.getIcon();
-
-        if (!data) { return $icon; }
-
-        var href = data.href;
-        if (!href) { return $icon; }
-
-        var type = common.parsePadUrl(href).type;
-        $icon = common.getIcon(type);
-
-        return $icon;
-    };
-
-    common.createModal = function (cfg) {
-        var $body = cfg.$body || $('body');
-        var $blockContainer = $body.find('#'+cfg.id);
-        if (!$blockContainer.length) {
-            $blockContainer = $('<div>', {
-                'class': 'cp-modal-container',
-                'id': cfg.id
-            });
-        }
-        var hide = function () {
-            if (cfg.onClose) { return void cfg.onClose(); }
-            $blockContainer.hide();
-        };
-        $blockContainer.html('').appendTo($body);
-        var $block = $('<div>', {'class': 'cp-modal'}).appendTo($blockContainer);
-        $('<span>', {
-            'class': '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 $blockContainer;
-    };
-    common.createFileDialog = function (cfg) {
-        var $blockContainer = common.createModal({
-            id: 'fileDialog',
-            $body: cfg.$body
-        });
-        var $block = $blockContainer.find('.cp-modal');
-        var $description = $('<p>').text(Messages.filePicker_description);
-        $block.append($description);
-        var $filter = $('<p>', {'class': 'cp-modal-form'}).appendTo($block);
-        var $container = $('<span>', {'class': 'fileContainer'}).appendTo($block);
-        var updateContainer = function () {
-            $container.html('');
-            var filter = $filter.find('.filter').val().trim();
-            var list = common.getUserFilesList();
-            var fo = common.getFO();
-            list.forEach(function (id) {
-                var data = fo.getFileData(id);
-                var name = fo.getTitle(id);
-                if (filter && name.toLowerCase().indexOf(filter.toLowerCase()) === -1) {
-                    return;
-                }
-                var $span = $('<span>', {
-                    'class': 'element',
-                    'title': name,
-                }).appendTo($container);
-                $span.append(getFileIcon(data));
-                $span.append(name);
-                $span.click(function () {
-                    if (typeof cfg.onSelect === "function") { cfg.onSelect(data.href); }
-                    $blockContainer.hide();
-                });
-            });
-        };
-        var to;
-        $('<input>', {
-            type: 'text',
-            'class': 'filter',
-            'placeholder': Messages.filePicker_filter
-        }).appendTo($filter).on('keypress', function () {
-            if (to) { window.clearTimeout(to); }
-            to = window.setTimeout(updateContainer, 300);
-        });
-        //$filter.append(' '+Messages.or+' ');
-        var data = {FM: cfg.data.FM};
-        $filter.append(common.createButton('upload', false, data, function () {
-            $blockContainer.hide();
-        }));
-        updateContainer();
-        $blockContainer.show();
-    };
-
-
-
-
     common.getShareHashes = function (secret, cb) {
         if (!window.location.hash) {
             var hashes = common.getHashes(secret.channel, secret);
@@ -1443,7 +1288,6 @@ define([
                            (parseInt(verArr[0]) === parseInt(storedArr[0]) &&
                             parseInt(verArr[1]) > parseInt(storedArr[1]));
         if (!shouldUpdate) { return; }
-        //UI.alert(Messages._getKey('newVersion', [verArr.join('.')]), null, true);
         localStorage[CRYPTPAD_VERSION] = ver;
     };
 
@@ -1464,12 +1308,6 @@ define([
             common.initialPath = sessionStorage[newPadPathKey];
             delete sessionStorage[newPadPathKey];
         }
-        common.onFriendRequest = function (confirmText, cb) {
-            UI.confirm(confirmText, cb, null, true);
-        };
-        common.onFriendComplete = function (data) {
-            UI.log(data.logText);
-        };
 
         var proxy;
         var network;
@@ -1515,12 +1353,6 @@ define([
         }).nThen(function (waitFor) {
             $(waitFor());
         }).nThen(function (waitFor) {
-            // Race condition : if document.body is undefined when alertify.js is loaded, Alertify
-            // won't work. We have to reset it now to make sure it uses a correct "body"
-            UI.Alertify.reset();
-            // clear any tooltips that might get hung
-            setInterval(function () { common.clearTooltips(); }, 5000);
-
             // Load the new pad when the hash has changed
             var oldHref  = document.location.href;
             window.onhashchange = function () {
@@ -1644,7 +1476,6 @@ define([
             }
         }).nThen(function () {
             updateLocalVersion();
-            common.addTooltips();
             f(void 0, env);
             if (typeof(window.onhashchange) === 'function') { window.onhashchange(); }
         });

www/common/fsStore.js

@@ -312,12 +312,13 @@ define([
             } else if (o && !n) {
                 $(window).on('keyup', function (e) {
                     if (e.keyCode === 27) {
-                        Cryptpad.removeLoadingScreen();
+                        //UI.removeLoadingScreen();
                     }
                 });
                 Cryptpad.logout();
-                Cryptpad.addLoadingScreen({hideTips: true});
+                UI.alert(Cryptpad.Messages.onLogout, null, true);
-                Cryptpad.errorLoadingScreen(Cryptpad.Messages.onLogout, true);
+                //UI.addLoadingScreen({hideTips: true});
+                //UI.errorLoadingScreen(Cryptpad.Messages.onLogout, true);
                 if (exp.info) {
                     exp.info.network.disconnect();
                 }

www/common/sframe-app-framework.js

@@ -50,7 +50,7 @@ define([
         AppConfig.badStateTimeout : 30000;
 
     var onConnectError = function () {
-        Cryptpad.errorLoadingScreen(Messages.websocketError);
+        UI.errorLoadingScreen(Messages.websocketError);
     };
 
     var create = function (options, cb) {
@@ -153,7 +153,7 @@ define([
                 evContentUpdate.fire(newContent);
             } catch (e) {
                 console.log(e.stack);
-                Cryptpad.errorLoadingScreen(e.message);
+                UI.errorLoadingScreen(e.message);
             }
         };
 
@@ -266,7 +266,7 @@ define([
             if (!readOnly) { onLocal(); }
             evOnReady.fire(newPad);
 
-            Cryptpad.removeLoadingScreen(emitResize);
+            UI.removeLoadingScreen(emitResize);
 
             var privateDat = cpNfInner.metadataMgr.getPrivateData();
             if (options.thumbnail && privateDat.thumbnails) {
@@ -375,7 +375,7 @@ define([
         };
 
         nThen(function (waitFor) {
-            Cryptpad.addLoadingScreen();
+            UI.addLoadingScreen();
             SFCommon.create(waitFor(function (c) { common = c; }));
         }).nThen(function (waitFor) {
             cpNfInner = common.startRealtime({

www/common/sframe-common-history.js

@@ -85,7 +85,6 @@ define([
         var onReady = function () { };
 
         var Messages = common.Messages;
-        var Cryptpad = common.getCryptpadCommon();
 
         var realtime;
 
@@ -102,7 +101,7 @@ define([
         $right.hide();
         $cke.hide();
 
-        Cryptpad.spinner($hist).get().show();
+        UI.spinner($hist).get().show();
 
         var onUpdate;
 

www/common/sframe-common-outer.js

@@ -18,6 +18,7 @@ define([
         var sframeChan;
         var FilePicker;
         var Messenger;
+        var Notifier;
 
         nThen(function (waitFor) {
             // Load #2, the loading screen is up so grab whatever you need...
@@ -29,14 +30,16 @@ define([
                 '/common/sframe-channel.js',
                 '/filepicker/main.js',
                 '/common/common-messenger.js',
+                '/common/common-notifier.js',
             ], waitFor(function (_CpNfOuter, _Cryptpad, _Crypto, _Cryptget, SFrameChannel,
-            _FilePicker, _Messenger) {
+            _FilePicker, _Messenger, _Notifier) {
                 CpNfOuter = _CpNfOuter;
                 Cryptpad = _Cryptpad;
                 Crypto = _Crypto;
                 Cryptget = _Cryptget;
                 FilePicker = _FilePicker;
                 Messenger = _Messenger;
+                Notifier = _Notifier;
 
                 if (localStorage.CRYPTPAD_URLARGS !== ApiConfig.requireConf.urlArgs) {
                     console.log("New version, flushing cache");
@@ -176,7 +179,7 @@ define([
                 currentTitle = newTitle;
                 setDocumentTitle();
                 Cryptpad.renamePad(newTitle, undefined, function (err) {
-                    if (err) { cb('ERROR'); } else { cb(); }
+                    cb(err);
                 });
             });
             sframeChan.on('EV_SET_TAB_TITLE', function (newTabTitle) {
@@ -203,7 +206,7 @@ define([
             });
 
             sframeChan.on('EV_NOTIFY', function () {
-                Cryptpad.notify();
+                Notifier.notify();
             });
 
             sframeChan.on('Q_SET_LOGIN_REDIRECT', function (data, cb) {

www/common/sframe-common-title.js

@@ -1,7 +1,9 @@
 define([
     'jquery',
-    '/common/common-util.js'
+    '/common/common-util.js',
-], function ($, Util) {
+    '/common/common-interface.js',
+    '/customize/messages.js'
+], function ($, Util, UI, Messages) {
     var module = {};
 
     module.create = function (Common, cfg) {
@@ -54,7 +56,9 @@ define([
         });
         metadataMgr.onTitleChange(function (title) {
             sframeChan.query('Q_SET_PAD_TITLE_IN_DRIVE', title, function (err) {
-                if (err) { return; }
+                if (err === 'E_OVER_LIMIT') {
+                    return void UI.alert(Messages.pinLimitNotPinned, null, true);
+                } else if (err) { return; }
                 evTitleChange.fire(title);
                 if (titleUpdated) { titleUpdated(undefined, title); }
             });

www/common/sframe-common.js

@@ -359,7 +359,7 @@ define([
                 };
             });
 
-            UIElements.addTooltips();
+            UI.addTooltips();
 
             ctx.sframeChan.on('EV_RT_CONNECT', function () { CommonRealtime.setConnectionState(true); });
             ctx.sframeChan.on('EV_RT_DISCONNECT', function () { CommonRealtime.setConnectionState(false); });

www/common/toolbar3.js

@@ -529,10 +529,10 @@ define([
             $('<h3>').text(Messages.fileEmbedTitle).appendTo($content);
             var $script = $('<p>').text(Messages.fileEmbedScript).appendTo($content);
             $('<br>').appendTo($script);
-            $script.append(Cryptpad.dialog.selectable(Common.getMediatagScript()));
+            $script.append(UI.dialog.selectable(Common.getMediatagScript()));
             var $tag = $('<p>').text(Messages.fileEmbedTag).appendTo($content);
             $('<br>').appendTo($tag);
-            $tag.append(Cryptpad.dialog.selectable(Common.getMediatagFromHref(url)));
+            $tag.append(UI.dialog.selectable(Common.getMediatagFromHref(url)));
             UI.alert($content[0], null, true);
         });
 
@@ -787,7 +787,7 @@ define([
                     'target': '_blank',
                     'href': origin + '/' + p + '/',
                 },
-                content: $('<div>').append(Cryptpad.getIcon(p)).html() + Messages.type[p]
+                content: $('<div>').append(UI.getIcon(p)).html() + Messages.type[p]
             });
         });
         var dropdownConfig = {

www/contacts/inner.js

@@ -29,13 +29,13 @@ define([
     var Messages = Cryptpad.Messages;
     var APP = {};
     var onConnectError = function () {
-        Cryptpad.errorLoadingScreen(Messages.websocketError);
+        UI.errorLoadingScreen(Messages.websocketError);
     };
 
     var common;
     var sFrameChan;
     nThen(function (waitFor) {
-        $(waitFor(Cryptpad.addLoadingScreen));
+        $(waitFor(UI.addLoadingScreen));
         SFCommon.create(waitFor(function (c) { APP.common = common = c; }));
     }).nThen(function (waitFor) {
         sFrameChan = common.getSframeChannel();
@@ -87,13 +87,13 @@ define([
 
         UI.create(messenger, $(friendList), $(messaging), common);
 
-        Cryptpad.removeLoadingScreen();
+        UI.removeLoadingScreen();
 
 /*
         sFrameChan.query('Q_HEY_BUDDY', null, function (err, data) {
             if (!data) { return; }
             if (data.error) {
-                Cryptpad.warn(data.error);
+                UI.warn(data.error);
             } else {
                 UI.log(data.response);
             }

www/contacts/messenger-ui.js

@@ -4,13 +4,14 @@ define([
     '/customize/messages.js',
     '/common/common-util.js',
     '/common/common-interface.js',
+    '/common/common-notifier.js',
     '/common/hyperscript.js',
     '/bower_components/marked/marked.min.js',
     '/common/media-tag.js',
-], function ($, Cryptpad, Messages, Util, UI, h, Marked, MediaTag) {
+], function ($, Cryptpad, Messages, Util, UI, Notifier, h, Marked, MediaTag) {
     'use strict';
 
-    var UI = {};
+    var MessengerUI = {};
 
     var m = function (md) {
         var d = h('div.cp-app-contacts-content');
@@ -42,7 +43,7 @@ define([
         };
     };
 
-    UI.create = function (messenger, $userlist, $messages, common) {
+    MessengerUI.create = function (messenger, $userlist, $messages, common) {
         var origin = common.getMetadataMgr().getPrivateData().origin;
 
         var state = window.state = {
@@ -391,7 +392,7 @@ define([
 
         var initializing = true;
         messenger.on('message', function (message) {
-            if (!initializing) { Cryptpad.notify(); }
+            if (!initializing) { Notifier.notify(); }
             var curvePublic = message.curve;
 
             var name = displayNames[curvePublic];
@@ -516,7 +517,7 @@ define([
                 count--;
                 if (count === 0) {
                     initializing = false;
-                    Cryptpad.removeLoadingScreen();
+                    UI.removeLoadingScreen();
                 }
             };
             ready();
@@ -526,5 +527,5 @@ define([
         });
     };
 
-    return UI;
+    return MessengerUI;
 });

www/drive/inner.js

@@ -48,7 +48,7 @@ define([
     };
 
     var onConnectError = function () {
-        Cryptpad.errorLoadingScreen(Messages.websocketError);
+        UI.errorLoadingScreen(Messages.websocketError);
     };
 
     var E_OVER_LIMIT = 'E_OVER_LIMIT';
@@ -1215,9 +1215,9 @@ define([
         // This is duplicated in cryptpad-common, it should be unified
         var getFileIcon = function (id) {
             var data = filesOp.getFileData(id);
-            return Cryptpad.getFileIcon(data);
+            return UI.getFileIcon(data);
         };
-        var getIcon = Cryptpad.getIcon;
+        var getIcon = UI.getIcon;
 
         // Create the "li" element corresponding to the file/folder located in "path"
         var createElement = function (path, elPath, root, isFolder) {
@@ -1803,7 +1803,7 @@ define([
                 .text(Messages.fm_newFile));
             $element.attr('title', Messages.fm_newFile);
             $element.click(function () {
-                var $modal = Cryptpad.createModal({
+                var $modal = UIElements.createModal({
                     id: 'cp-app-drive-new-ghost-dialog',
                     $body: $('body')
                 });
@@ -2481,7 +2481,7 @@ define([
             $('<br>').appendTo($d);
             if (!ro) {
                 $('<label>', {'for': 'cp-app-drive-prop-link'}).text(Messages.editShare).appendTo($d);
-                $d.append(Cryptpad.dialog.selectable(base + data.href, {
+                $d.append(UI.dialog.selectable(base + data.href, {
                     id: 'cp-app-drive-prop-link',
                 }));
             }
@@ -2491,7 +2491,7 @@ define([
                 var roLink = ro ? base + data.href : base + getReadOnlyUrl(el);
                 if (roLink) {
                     $('<label>', {'for': 'cp-app-drive-prop-rolink'}).text(Messages.viewShare).appendTo($d);
-                    $d.append(Cryptpad.dialog.selectable(roLink, {
+                    $d.append(UI.dialog.selectable(roLink, {
                         id: 'cp-app-drive-prop-rolink',
                     }));
                 }
@@ -2499,20 +2499,20 @@ define([
 
             if (data.tags && Array.isArray(data.tags)) {
                 $('<label>', {'for': 'cp-app-drive-prop-tags'}).text(Messages.fm_prop_tagsList).appendTo($d);
-                $d.append(Cryptpad.dialog.selectable(data.tags.join(', '), {
+                $d.append(UI.dialog.selectable(data.tags.join(', '), {
                     id: 'cp-app-drive-prop-tags',
                 }));
             }
 
             $('<label>', {'for': 'cp-app-drive-prop-ctime'}).text(Messages.fm_creation)
                 .appendTo($d);
-            $d.append(Cryptpad.dialog.selectable(new Date(data.ctime).toLocaleString(), {
+            $d.append(UI.dialog.selectable(new Date(data.ctime).toLocaleString(), {
                 id: 'cp-app-drive-prop-ctime',
             }));
 
             $('<label>', {'for': 'cp-app-drive-prop-atime'}).text(Messages.fm_lastAccess)
                 .appendTo($d);
-            $d.append(Cryptpad.dialog.selectable(new Date(data.atime).toLocaleString(), {
+            $d.append(UI.dialog.selectable(new Date(data.atime).toLocaleString(), {
                 id: 'cp-app-drive-prop-atime',
             }));
 
@@ -2537,7 +2537,7 @@ define([
                         'for': 'cp-app-drive-prop-size'
                     }).text(Messages.fc_sizeInKilobytes).appendTo($d);
 
-                    $d.append(Cryptpad.dialog.selectable(formatted, {
+                    $d.append(UI.dialog.selectable(formatted, {
                         id: 'cp-app-drive-prop-size',
                     }));
                     cb(void 0, $d);
@@ -2888,7 +2888,7 @@ define([
         APP.FM = common.createFileManager(fmConfig);
 
         refresh();
-        Cryptpad.removeLoadingScreen();
+        UI.removeLoadingScreen();
     };
 
     var setHistory = function (bool, update) {
@@ -2906,7 +2906,7 @@ define([
 
         nThen(function (waitFor) {
             $(waitFor(function () {
-                Cryptpad.addLoadingScreen();
+                UI.addLoadingScreen();
             }));
             window.cryptpadStore.getAll(waitFor(function (val) {
                 APP.store = JSON.parse(JSON.stringify(val));
@@ -3023,7 +3023,7 @@ define([
                 APP.files = proxy;
                 if (!proxy.drive || typeof(proxy.drive) !== 'object') { proxy.drive = {}; }
                 andThen(common, proxy);
-                Cryptpad.removeLoadingScreen();
+                UI.removeLoadingScreen();
             };
             var onDisconnect = APP.onDisconnect = function (noAlert) {
                 setEditable(false);

www/examples/board/main.js

@@ -7,10 +7,11 @@ define([
     '/bower_components/chainpad-listmap/chainpad-listmap.js',
     '/bower_components/chainpad-crypto/crypto.js',
     '/common/cryptpad-common.js',
+    '/common/common-interface.js',
     //'/common/visible.js',
     //'/common/notify.js',
     '/bower_components/file-saver/FileSaver.min.js'
-], function ($, Config, Messages, Board, TextPatcher, Listmap, Crypto, Cryptpad /*, Visible, Notify*/) {
+], function ($, Config, Messages, Board, TextPatcher, Listmap, Crypto, Cryptpad, UI /*, Visible, Notify*/) {
 
     // var saveAs = window.saveAs;
 
@@ -87,7 +88,7 @@ define([
             });
         })
         .on('disconnect', function () {
-            Cryptpad.warn("Disconnected!");
+            UI.warn("Disconnected!");
         });
     });
 });

www/file/inner.js

@@ -207,7 +207,7 @@ define([
 
                 var todoBigFile = function (sizeMb) {
                     $dlform.show();
-                    Cryptpad.removeLoadingScreen();
+                    UI.removeLoadingScreen();
                     $dllabel.append($('<br>'));
                     $dllabel.append(Util.fixHTML(metadata.name));
 
@@ -230,7 +230,7 @@ define([
                 var href = priv.origin + priv.pathname + priv.filehash;
                 common.getFileSize(href, function (e, data) {
                     if (e) {
-                        return void Cryptpad.errorLoadingScreen(e);
+                        return void UI.errorLoadingScreen(e);
                     }
                     var size = Cryptpad.bytesToMegabytes(data);
                     return void todoBigFile(size);
@@ -243,7 +243,7 @@ define([
 
         if (!common.isLoggedIn()) {
             return UI.alert(Messages.upload_mustLogin, function () {
-                Cryptpad.errorLoadingScreen(Messages.upload_mustLogin);
+                UI.errorLoadingScreen(Messages.upload_mustLogin);
                 common.setLoginRedirect(function () {
                     common.gotoURL('/login/');
                 });
@@ -268,7 +268,7 @@ define([
             FM.handleFile(file);
         });
 
-        Cryptpad.removeLoadingScreen();
+        UI.removeLoadingScreen();
     };
 
     var main = function () {
@@ -276,7 +276,7 @@ define([
 
         nThen(function (waitFor) {
             $(waitFor(function () {
-                Cryptpad.addLoadingScreen();
+                UI.addLoadingScreen();
             }));
             SFCommon.create(waitFor(function (c) { APP.common = common = c; }));
         }).nThen(function (/*waitFor*/) {

www/filepicker/inner.js

@@ -6,6 +6,8 @@ define([
     '/common/cryptpad-common.js',
     '/bower_components/nthen/index.js',
     '/common/sframe-common.js',
+    '/common/common-interface.js',
+    '/common/common-ui-elements.js',
     'json.sortify',
 
     'css!/bower_components/bootstrap/dist/css/bootstrap.min.css',
@@ -19,6 +21,8 @@ define([
     Cryptpad,
     nThen,
     SFCommon,
+    UI,
+    UIElements,
     Sortify)
 {
     var Messages = Cryptpad.Messages;
@@ -28,7 +32,7 @@ define([
     };
 
     var onConnectError = function () {
-        Cryptpad.errorLoadingScreen(Messages.websocketError);
+        UI.errorLoadingScreen(Messages.websocketError);
     };
 
     var andThen = function (common) {
@@ -80,7 +84,7 @@ define([
         var createFileDialog = function () {
             var types = filters.types || [];
             // Create modal
-            var $blockContainer = Cryptpad.createModal({
+            var $blockContainer = UIElements.createModal({
                 id: 'cp-filepicker-dialog',
                 $body: $body,
                 onClose: hideFileDialog
@@ -132,7 +136,7 @@ define([
                             'class': 'cp-filepicker-content-element',
                             'title': name,
                         }).appendTo($container);
-                        $span.append(Cryptpad.getFileIcon(data));
+                        $span.append(UI.getFileIcon(data));
                         $('<span>', {'class': 'cp-filepicker-content-element-name'}).text(name)
                             .appendTo($span);
                         $span.click(function () {
@@ -160,7 +164,7 @@ define([
         });
         createFileDialog();
 
-        Cryptpad.removeLoadingScreen();
+        UI.removeLoadingScreen();
     };
 
     var main = function () {
@@ -168,7 +172,7 @@ define([
 
         nThen(function (waitFor) {
             $(waitFor(function () {
-                Cryptpad.addLoadingScreen({hideTips: true, hideLogo: true});
+                UI.addLoadingScreen({hideTips: true, hideLogo: true});
             }));
             SFCommon.create(waitFor(function (c) { APP.common = common = c; }));
         }).nThen(function (/*waitFor*/) {

www/invite/main.js

@@ -16,7 +16,7 @@ define([
     };
 
     $(function () {
-        Cryptpad.removeLoadingScreen();
+        UI.removeLoadingScreen();
         console.log("wut");
         $('body #mainBlock').append(comingSoon());
     });
@@ -38,7 +38,7 @@ define([
         console.log(info);
 
         if (!info.pubkey) {
-            Cryptpad.removeLoadingScreen();
+            UI.removeLoadingScreen();
             UI.alert('invalid invite');
             return;
         }
@@ -49,7 +49,7 @@ define([
         var keys = Curve.deriveKeys(info.pubkey, mySecret);
         var encryptor = Curve.createEncryptor(keys);
 
-        Cryptpad.removeLoadingScreen();
+        UI.removeLoadingScreen();
 
         var listmapConfig = {
             data: {},

www/login/main.js

@@ -57,7 +57,7 @@ define([
 
             // setTimeout 100ms to remove the keyboard on mobile devices before the loading screen pops up
             window.setTimeout(function () {
-                Cryptpad.addLoadingScreen({
+                UI.addLoadingScreen({
                     loadingText: Messages.login_hashing,
                     hideTips: true,
                 });
@@ -103,28 +103,28 @@ define([
                             }
                             switch (err) {
                                 case 'NO_SUCH_USER':
-                                    Cryptpad.removeLoadingScreen(function () {
+                                    UI.removeLoadingScreen(function () {
                                         UI.alert(Messages.login_noSuchUser, function () {
                                             hashing = false;
                                         });
                                     });
                                     break;
                                 case 'INVAL_USER':
-                                    Cryptpad.removeLoadingScreen(function () {
+                                    UI.removeLoadingScreen(function () {
                                         UI.alert(Messages.login_invalUser, function () {
                                             hashing = false;
                                         });
                                     });
                                     break;
                                 case 'INVAL_PASS':
-                                    Cryptpad.removeLoadingScreen(function () {
+                                    UI.removeLoadingScreen(function () {
                                         UI.alert(Messages.login_invalPass, function () {
                                             hashing = false;
                                         });
                                     });
                                     break;
                                 default: // UNHANDLED ERROR
-                                    Cryptpad.errorLoadingScreen(Messages.login_unhandledError);
+                                    UI.errorLoadingScreen(Messages.login_unhandledError);
                             }
                         });
                     });

www/poll/inner.js

@@ -884,7 +884,7 @@ define([
                 (proxy.metadata && typeof(proxy.metadata.type) !== 'undefined' &&
                  proxy.metadata.type !== 'poll')) {
                 var errorText = Messages.typeError;
-                Cryptpad.errorLoadingScreen(errorText);
+                UI.errorLoadingScreen(errorText);
                 throw new Error(errorText);
             }
         } else {
@@ -1043,7 +1043,7 @@ define([
             publish(true);
         }
 
-        Cryptpad.removeLoadingScreen();
+        UI.removeLoadingScreen();
         if (isNew) {
             common.openTemplatePicker();
         }
@@ -1167,7 +1167,7 @@ define([
 
         nThen(function (waitFor) {
             $(waitFor(function () {
-                Cryptpad.addLoadingScreen();
+                UI.addLoadingScreen();
                 var $div = $('<div>').append(Pages['/poll/']());
                 $('body').append($div.html());
             }));

www/profile/inner.js

@@ -38,7 +38,7 @@ define([
         _onRefresh: []
     };
     var onConnectError = function () {
-        Cryptpad.errorLoadingScreen(Messages.websocketError);
+        UI.errorLoadingScreen(Messages.websocketError);
     };
 
     // Decryption event for avatar mediatag (TODO not needed anymore?)
@@ -412,7 +412,7 @@ define([
             createLeftside();
         }
 
-        Cryptpad.removeLoadingScreen();
+        UI.removeLoadingScreen();
     };
 
     var createToolbar = function () {
@@ -430,7 +430,7 @@ define([
     };
 
     nThen(function (waitFor) {
-        $(waitFor(Cryptpad.addLoadingScreen));
+        $(waitFor(UI.addLoadingScreen));
         SFCommon.create(waitFor(function (c) { APP.common = common = c; }));
     }).nThen(function (waitFor) {
         APP.$container = $('#cp-sidebarlayout-container');
@@ -455,7 +455,7 @@ define([
 
         // If not logged in, you can only view other users's profile
         if (!privateData.readOnly && !common.isLoggedIn()) {
-            Cryptpad.removeLoadingScreen();
+            UI.removeLoadingScreen();
 
             var $p = $('<p>', {id: CREATE_ID}).append(Messages.profile_register);
             var $a = $('<a>', {

www/register/main.js

@@ -122,7 +122,7 @@ define([
                 registering = true;
                 // setTimeout 100ms to remove the keyboard on mobile devices before the loading screen pops up
                 window.setTimeout(function () {
-                    Cryptpad.addLoadingScreen({
+                    UI.addLoadingScreen({
                         loadingText: Messages.login_hashing,
                         hideTips: true,
                     });
@@ -135,28 +135,28 @@ define([
                             if (err) {
                                 switch (err) {
                                     case 'NO_SUCH_USER':
-                                        Cryptpad.removeLoadingScreen(function () {
+                                        UI.removeLoadingScreen(function () {
                                             UI.alert(Messages.login_noSuchUser, function () {
                                                 registering = false;
                                             });
                                         });
                                         break;
                                     case 'INVAL_USER':
-                                        Cryptpad.removeLoadingScreen(function () {
+                                        UI.removeLoadingScreen(function () {
                                             UI.alert(Messages.login_invalUser, function () {
                                                 registering = false;
                                             });
                                         });
                                         break;
                                     case 'INVAL_PASS':
-                                        Cryptpad.removeLoadingScreen(function () {
+                                        UI.removeLoadingScreen(function () {
                                             UI.alert(Messages.login_invalPass, function () {
                                                 registering = false;
                                             });
                                         });
                                         break;
                                     case 'PASS_TOO_SHORT':
-                                        Cryptpad.removeLoadingScreen(function () {
+                                        UI.removeLoadingScreen(function () {
                                             var warning = Messages._getKey('register_passwordTooShort', [
                                                 Cred.MINIMUM_PASSWORD_LENGTH
                                             ]);
@@ -167,7 +167,7 @@ define([
                                         break;
                                     case 'ALREADY_REGISTERED':
                                         // logMeIn should reset registering = false
-                                        Cryptpad.removeLoadingScreen(function () {
+                                        UI.removeLoadingScreen(function () {
                                             UI.confirm(Messages.register_alreadyRegistered, function (yes) {
                                                 if (!yes) { return; }
                                                 proxy.login_name = uname;
@@ -182,7 +182,7 @@ define([
                                         break;
                                     default: // UNHANDLED ERROR
                                         registering = false;
-                                        Cryptpad.errorLoadingScreen(Messages.login_unhandledError);
+                                        UI.errorLoadingScreen(Messages.login_unhandledError);
                                 }
                                 return;
                             }

www/settings/inner.js

@@ -25,7 +25,7 @@ define([
         Cryptpad: Cryptpad,
     };
     var onConnectError = function () {
-        Cryptpad.errorLoadingScreen(Messages.websocketError);
+        UI.errorLoadingScreen(Messages.websocketError);
     };
 
     var common;
@@ -73,7 +73,7 @@ define([
             var userHref = Cryptpad.getUserHrefFromKeys(accountName, publicKey);
             var $pubLabel = $('<span>', {'class': 'label'})
                 .text(Messages.settings_publicSigningKey);
-            $key.append($pubLabel).append(Cryptpad.dialog.selectable(userHref));
+            $key.append($pubLabel).append(UI.dialog.selectable(userHref));
         }
 
         return $div;
@@ -490,7 +490,7 @@ define([
 
 
     nThen(function (waitFor) {
-        $(waitFor(Cryptpad.addLoadingScreen));
+        $(waitFor(UI.addLoadingScreen));
         SFCommon.create(waitFor(function (c) { APP.common = common = c; }));
     }).nThen(function (waitFor) {
         APP.$container = $('#cp-sidebarlayout-container');
@@ -548,6 +548,6 @@ define([
         createLeftside();
         createUsageButton();
 
-        Cryptpad.removeLoadingScreen();
+        UI.removeLoadingScreen();
     });
 });

www/todo/inner.js

@@ -6,6 +6,7 @@ define([
     '/common/cryptpad-common.js',
     '/bower_components/nthen/index.js',
     '/common/sframe-common.js',
+    '/common/common-interface.js',
     '/todo/todo.js',
 
     'css!/bower_components/bootstrap/dist/css/bootstrap.min.css',
@@ -19,19 +20,20 @@ define([
     Cryptpad,
     nThen,
     SFCommon,
+    UI,
     Todo
     )
 {
     var Messages = Cryptpad.Messages;
     var APP = window.APP = {};
     var onConnectError = function () {
-        Cryptpad.errorLoadingScreen(Messages.websocketError);
+        UI.errorLoadingScreen(Messages.websocketError);
     };
 
     var common;
     var sFrameChan;
     nThen(function (waitFor) {
-        $(waitFor(Cryptpad.addLoadingScreen));
+        $(waitFor(UI.addLoadingScreen));
         SFCommon.create(waitFor(function (c) { APP.common = common = c; }));
     }).nThen(function (waitFor) {
         sFrameChan = common.getSframeChannel();
@@ -47,7 +49,7 @@ define([
         var $list = $('#cp-app-todo-taskslist');
 
         var removeTips = function () {
-            Cryptpad.clearTooltips();
+            UI.clearTooltips();
         };
 
         var onReady = function () {
@@ -188,11 +190,11 @@ define([
             editTask = editTask;
 
             display();
-            Cryptpad.removeLoadingScreen();
+            UI.removeLoadingScreen();
         };
 
         var onInit = function () {
-            Cryptpad.addLoadingScreen();
+            UI.addLoadingScreen();
 
             $body.on('dragover', function (e) { e.preventDefault(); });
             $body.on('drop', function (e) { e.preventDefault(); });

www/whiteboard/inner.js

@@ -61,7 +61,7 @@ define([
     var toolbar;
 
     var onConnectError = function () {
-        Cryptpad.errorLoadingScreen(Messages.websocketError);
+        UI.errorLoadingScreen(Messages.websocketError);
     };
 
     var andThen = function (common) {
@@ -537,7 +537,7 @@ define([
                     (hjson.metadata && typeof(hjson.metadata.type) !== 'undefined' &&
                      hjson.metadata.type !== 'whiteboard')) {
                     var errorText = Messages.typeError;
-                    Cryptpad.errorLoadingScreen(errorText);
+                    UI.errorLoadingScreen(errorText);
                     throw new Error(errorText);
                 }
                 newDoc = hjson.content;
@@ -556,7 +556,7 @@ define([
                 setEditable(!readOnly);
                 initializing = false;
                 config.onLocal();
-                Cryptpad.removeLoadingScreen();
+                UI.removeLoadingScreen();
 
                 initThumbnails();
 
@@ -637,7 +637,7 @@ define([
 
         nThen(function (waitFor) {
             $(waitFor(function () {
-                Cryptpad.addLoadingScreen();
+                UI.addLoadingScreen();
                 var $div = $('<div>').append(Pages['/whiteboard/']());
                 $('body').append($div.html());
             }));