Notifications improved (#152)

* Notifications improved

* Animation fix

* styles updated

* Fixes for prompt and confirm types

codex-editor.css

@@ -490,6 +490,90 @@
     100% { background-position: -56% 0 }
 }
 
+/**
+* Notifications
+*/
+
+.cdx-notifications-block {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    padding: 15px;
+}
+
+
+.cdx-notification__notification-appending div {
+    animation: notification 100ms infinite ease-in;
+}
+
+@keyframes notification {
+
+    0% { transform: translateY(20px); }
+    100% { transform: translateY(0px);  }
+
+}
+
+
+.cdx-notification {
+    width: 250px;
+    margin-top: 15px;
+    padding: 15px;
+    background: #fff;
+    border: 1px solid #e7e9f1;
+    box-shadow: 0px 2px 5px 0px rgba(16, 23, 49, 0.05);
+    border-radius: 3px;
+    font-size: 14px;
+}
+
+.cdx-notification__message {
+    margin-bottom: 15px;
+}
+
+.cdx-notification__ok-btn,
+.cdx-notification__cancel-btn {
+    padding: 4px 7px;
+    cursor: pointer;
+    background: #4584d8;
+    color: #fff;
+    min-width: 50px;
+    display: inline-block;
+    text-align: center;
+    border-radius: 2px;
+}
+
+.cdx-notification__cancel-btn {
+    margin-left: 10px;
+    background: #dae0e8;
+    color: inherit;
+}
+
+.cdx-notification__cancel-btn {
+    background: #cad5e2;
+}
+
+.cdx-notification__ok-btn:hover {
+    background: #3d77c3;
+}
+
+.cdx-notification__input {
+    display: block;
+    width: 100%;
+    margin-bottom: 15px;
+    border: none;
+    outline: none;
+    padding: 2px 0;
+    font-size: inherit;
+    border-bottom: 2px solid #d1d3da;
+}
+
+.cdx-notification-error {
+    border-left: 4px solid rgb(255, 112, 112);
+}
+
+.cdx-notification-warn {
+    border-left: 4px solid rgb(79, 146, 247);
+}
+
 
 /**
 * Mobile viewport styles

modules/draw.js

@@ -120,19 +120,6 @@ module.exports = (function (draw) {
 
     };
 
-    /**
-     * Block with notifications
-     */
-    draw.alertsHolder = function () {
-
-        var block = document.createElement('div');
-
-        block.classList.add('ce_notifications-block');
-
-        return block;
-
-    };
-
     /**
      * @todo Desc
      */

modules/notifications.js

@@ -4,46 +4,219 @@
  * @author Codex Team
  * @version 1.0
  */
-let editor = codex.editor;
 
 module.exports = (function (notifications) {
 
+    let editor = codex.editor;
+
+    var queue = [];
+
+    var addToQueue = function (settings) {
+
+        queue.push(settings);
+
+        var index = 0;
+
+        while ( index < queue.length && queue.length > 5) {
+
+            if (queue[index].type == 'confirm' || queue[index].type == 'prompt') {
+
+                index++;
+                continue;
+
+            }
+
+            queue[index].close();
+            queue.splice(index, 1);
+
+        }
+
+    };
+
+    notifications.createHolder = function () {
+
+        var holder = editor.draw.node('DIV', 'cdx-notifications-block');
+
+        editor.nodes.notifications = document.body.appendChild(holder);
+
+        return holder;
+
+    };
+
+
     /**
      * Error notificator. Shows block with message
      * @protected
      */
     notifications.errorThrown = function (errorMsg, event) {
 
-        editor.notifications.send('This action is not available currently', event.type, false);
+        editor.notifications.notification({message: 'This action is not available currently', type: event.type});
 
     };
 
     /**
-     * Appends notification with different types
-     * @param message {string} - Error or alert message
-     * @param type {string} - Type of message notification. Ex: Error, Warning, Danger ...
-     * @param append {boolean} - can be True or False when notification should be inserted after
+     *
+     * Appends notification
+     *
+     *  settings = {
+     *      type        - notification type (reserved types: alert, confirm, prompt). Just add class 'cdx-notification-'+type
+     *      message     - notification message
+     *      okMsg       - confirm button text (default - 'Ok')
+     *      cancelBtn   - cancel button text (default - 'Cancel'). Only for confirm and prompt types
+     *      confirm     - function-handler for ok button click
+     *      cancel      - function-handler for cancel button click. Only for confirm and prompt types
+     *      time        - time (in seconds) after which notification will close (default - 10s)
+     *  }
+     *
+     * @param settings
      */
-    notifications.send = function (message, type, append) {
+    notifications.notification = function (constructorSettings) {
 
-        var notification = editor.draw.block('div');
+        /** Private vars and methods */
+        var notification = null,
+            cancel       = null,
+            type         = null,
+            confirm      = null,
+            inputField   = null;
 
-        notification.textContent = message;
-        notification.classList.add('ce_notification-item', 'ce_notification-' + type, 'flipInX');
+        var confirmHandler = function () {
 
-        if (!append) {
+            close();
 
-            editor.nodes.notifications.innerHTML = '';
+            if (typeof confirm !== 'function' ) {
 
-        }
+                return;
 
-        editor.nodes.notifications.appendChild(notification);
+            }
 
-        window.setTimeout(function () {
+            if (type == 'prompt') {
+
+                confirm(inputField.value);
+                return;
+
+            }
+
+            confirm();
+
+        };
+
+        var cancelHandler = function () {
+
+            close();
+
+            if (typeof cancel !== 'function' ) {
+
+                return;
+
+            }
+
+            cancel();
+
+        };
+
+
+        /** Public methods */
+        function create(settings) {
+
+            if (!(settings && settings.message)) {
+
+                editor.core.log('Can\'t create notification. Message is missed');
+                return;
+
+            }
+
+            settings.type = settings.type || 'alert';
+            settings.time = settings.time*1000 || 10000;
+
+            var wrapper = editor.draw.node('DIV', 'cdx-notification'),
+                message = editor.draw.node('DIV', 'cdx-notification__message'),
+                input = editor.draw.node('INPUT', 'cdx-notification__input'),
+                okBtn = editor.draw.node('SPAN', 'cdx-notification__ok-btn'),
+                cancelBtn = editor.draw.node('SPAN', 'cdx-notification__cancel-btn');
+
+            message.textContent = settings.message;
+            okBtn.textContent = settings.okMsg || 'ОК';
+            cancelBtn.textContent = settings.cancelMsg || 'Отмена';
+
+            okBtn.addEventListener('click', confirmHandler);
+            cancelBtn.addEventListener('click', cancelHandler);
+
+            wrapper.appendChild(message);
+
+            if (settings.type == 'prompt') {
+
+                wrapper.appendChild(input);
+
+            }
+
+            wrapper.appendChild(okBtn);
+
+            if (settings.type == 'prompt' || settings.type == 'confirm') {
+
+                wrapper.appendChild(cancelBtn);
+
+            }
+
+            wrapper.classList.add('cdx-notification-' + settings.type);
+            wrapper.dataset.type = settings.type;
+
+            notification = wrapper;
+            type         = settings.type;
+            confirm      = settings.confirm;
+            cancel       = settings.cancel;
+            inputField   = input;
+
+            if (settings.type != 'prompt' && settings.type != 'confirm') {
+
+                window.setTimeout(close, settings.time);
+
+            }
+
+        };
+
+        function send() {
+
+            editor.nodes.notifications.appendChild(notification);
+            inputField.focus();
+
+            editor.nodes.notifications.classList.add('cdx-notification__notification-appending');
+
+            window.setTimeout(function () {
+
+                editor.nodes.notifications.classList.remove('cdx-notification__notification-appending');
+
+            }, 100);
+
+            addToQueue({type: type, close: close});
+
+        };
+
+        function close() {
 
             notification.remove();
 
-        }, 3000);
+        };
+
+
+        if (constructorSettings) {
+
+            create(constructorSettings);
+            send();
+
+        }
+
+        return {
+            create: create,
+            send: send,
+            close: close
+        };
+
+    };
+
+    notifications.clear = function () {
+
+        editor.nodes.notifications.innerHTML = '';
+        queue = [];
 
     };
 

modules/ui.js

@@ -57,7 +57,6 @@ module.exports = (function (ui) {
             toolbar,
             toolbarContent,
             redactor,
-            notifications,
             blockButtons,
             blockSettings,
             showSettingsButton,
@@ -72,8 +71,7 @@ module.exports = (function (ui) {
         editor.core.insertAfter(editor.nodes.textarea, wrapper);
 
         /** Append block with notifications to the document */
-        notifications = editor.draw.alertsHolder();
-        editor.nodes.notifications = document.body.appendChild(notifications);
+        editor.notifications.createHolder();
 
         /** Make toolbar and content-editable redactor */
         toolbar               = editor.draw.toolbar();

package.json

@@ -1,6 +1,6 @@
 {
   "name": "codex.editor",
-  "version": "1.4.5",
+  "version": "1.4.6",
   "description": "Codex Editor. Native JS, based on API and Open Source",
   "main": "index.js",
   "scripts": {