improve confirm-notification

codex-editor.css

@@ -504,64 +504,65 @@
     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;
+    width: 330px;
     margin-top: 15px;
-    padding: 15px;
+    padding: 25px;
     background: #fff;
-    border: 1px solid #e7e9f1;
-    box-shadow: 0px 2px 5px 0px rgba(16, 23, 49, 0.05);
-    border-radius: 3px;
+    box-shadow: 0px 4px 17px 0px rgba(16, 23, 49, 0.12);
+    border-radius: 7px;
     font-size: 14px;
+    z-index: 9999;
+    transform: translateY(35px);
+    transition: transform 150ms ease-in;
+    will-change: transform;
+    visibility: hidden;
+}
+
+.cdx-notification--showed {
+    visibility: visible;
+    transform: translateY(0);
 }
 
 .cdx-notification__message {
-    margin-bottom: 15px;
+    margin-bottom: 20px;
 }
 
 .cdx-notification__ok-btn,
 .cdx-notification__cancel-btn {
-    padding: 4px 7px;
+    padding: 7px 18px;
     cursor: pointer;
     background: #4584d8;
     color: #fff;
     min-width: 50px;
     display: inline-block;
     text-align: center;
-    border-radius: 2px;
+    border-radius: 42px;
 }
 
 .cdx-notification__cancel-btn {
-    margin-left: 10px;
+    margin-left: 20px;
     background: #dae0e8;
     color: inherit;
 }
 
 .cdx-notification__cancel-btn {
-    background: #cad5e2;
+    background: #dde8f5;
+    color: #37435a;
 }
 
 .cdx-notification__ok-btn:hover {
-    background: #3d77c3;
+    background: #2163b9;
+}
+
+.cdx-notification__cancel-btn:hover {
+    background: #c4d7ec;
 }
 
 .cdx-notification__input {
     display: block;
     width: 100%;
-    margin-bottom: 15px;
+    margin-bottom: 25px;
     border: none;
     outline: none;
     padding: 2px 0;

example.html

@@ -191,12 +191,16 @@
             storage: {
                 type: 'storage',
                 prepare: localHistoryPlugin.prepare,
-                destroy: localHistoryPlugin.destroy
+                destroy: localHistoryPlugin.destroy,
+                config : {
+                    retainDays: 1,
+                    savingInterval : 5000
+                }
             },
         },
         data : {
-            hash: 1486992960067,
-            savingDate: 0,
+            hash: 1487164774474,
+            savingDate: 1487164774474,
             items: [
                 {
                     type : 'paragraph',

modules/notifications.js

@@ -134,7 +134,7 @@ module.exports = (function (notifications) {
                 okBtn = editor.draw.node('SPAN', 'cdx-notification__ok-btn'),
                 cancelBtn = editor.draw.node('SPAN', 'cdx-notification__cancel-btn');
 
-            message.textContent = settings.message;
+            message.innerHTML = settings.message;
             okBtn.textContent = settings.okMsg || 'ОК';
             cancelBtn.textContent = settings.cancelMsg || 'Отмена';
 
@@ -172,30 +172,28 @@ module.exports = (function (notifications) {
 
             }
 
-        };
+        }
 
         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');
+                notification.classList.add('cdx-notification--showed');
 
-            }, 100);
+            }, 50);
 
             addToQueue({type: type, close: close});
 
-        };
+        }
 
         function close() {
 
             notification.remove();
 
-        };
+        }
 
 
         if (constructorSettings) {

plugins/localHistory/localHistory.js

@@ -14,8 +14,8 @@ var localHistoryPlugin = function () {
         STORAGE_TIME         = null,
         interval             = null,
         config_ = {
-            savingInterval: 1000, // ms
-            storageTime: 4 // days
+            savingInterval: 5000, // ms
+            retainDays: 4 // days
         };
 
     /**
@@ -26,9 +26,44 @@ var localHistoryPlugin = function () {
         return typeof(Storage) !== "undefined";
     }
 
+    /**
+    * Formats date object
+    * @param {number} timestamp
+    */
+    function formatDate_ ( timestamp ) {
+
+        var date  = new Date(timestamp),
+            hours = date.getHours(),
+            mins  = date.getMinutes(),
+            secs  = date.getSeconds(),
+            now   = new Date();
+
+        hours = hours < 10 ? '0' + hours : hours;
+        mins  = mins  < 10 ? '0' + mins  : mins;
+        secs  = secs  < 10 ? '0' + secs  : secs;
+
+        var localeMonth = function ( month ) {
+
+            if ( isNaN(month) ) return false;
+
+            var lang = navigator.language == 'ru' ? 0 : 1,
+                map  = {
+                    ru : ['Янв','Фев','Мар','Апр','Мая','Июн','Июл','Авг','Сен','Окт','Ноя','Дек'],
+                    en : ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec']
+                };
+
+            return lang ? map.en[month] : map.ru[month];
+
+        };
+
+        return date.getDate() + ' ' + localeMonth(date.getMonth()) + ' ' + date.getFullYear() + ' ' + hours + ':' + mins + ':' + secs;
+    }
+
     /**
     * Calls on editor initialize
-    * @param {object} config passed form user in codex.editor.start
+    * @param {object} config                    - settings passed form user in codex.editor.start
+    * @param {Number} config.retainDays         - how many days should retain local versions
+    * @param {Number} config.savingInterval     - interval for saving
     */
     var prepare = function (config) {
 
@@ -40,22 +75,29 @@ var localHistoryPlugin = function () {
         }
 
         CURRENT_ARTICLE_HASH = editor.currentHash;
-        CURRENT_STORAGE_KEY    = STORAGE_KEY+CURRENT_ARTICLE_HASH;
+        CURRENT_STORAGE_KEY  = STORAGE_KEY + CURRENT_ARTICLE_HASH;
 
-        config_ = config || config_;
+        if ( config.savingInterval ) config_.savingInterval = config.savingInterval;
+        if ( config.retainDays ) config_.retainDays = config.retainDays;
 
-        STORAGE_TIME = config_.storageTime*24*60*60*1000;
+        STORAGE_TIME = config_.retainDays * 24 * 60 * 60 * 1000;
 
         clearKeys();
 
-        var localData = get();
+        var localData = get(),
+            message,
+            timeStyle = 'margin-top: 0.6em; color: #6e758a;';
 
         if (localData && editor.state.blocks.savingDate < localData.savingDate) {
 
+            message = 'В вашем браузере сохранена более актуальная версия материала, чем на сервере' +
+                      '<div style="' + timeStyle + '">Текущая версия: ' + formatDate_(editor.state.blocks.savingDate) + '</div>' +
+                      '<div style="' + timeStyle + '">Сохраненная версия: ' + formatDate_(localData.savingDate) + '</div>';
+
             editor.notifications.notification({
                 type        : 'confirm',
-                message     : 'В вашем браузере сохранена более актаульная версия материала',
-                okMsg       : 'Показать',
+                message     : message,
+                okMsg       : 'Переключиться',
                 cancelMsg   : 'Отмена',
                 confirm     : function () {