send errors when something wrong (#76)

* send errors when something wrong

* upgrade notifications module

* re-designed error notifications

* error appending

codex-editor.js

@@ -21,6 +21,7 @@ var cEditor = (function (cEditor) {
         textarea : null,
         wrapper  : null,
         toolbar  : null,
+        notifications      : null,
         showSettingsButton : null,
         blockSettings      : null,
         toolbarButtons     : {}, // { type : DomEl, ... }
@@ -126,7 +127,9 @@ cEditor.core = {
                 if ( arg ) console[ type ]( msg , arg );
                 else console[ type ]( msg );
             }
+
         }catch(e){}
+
     },
 
     /**
@@ -340,6 +343,7 @@ cEditor.ui = {
         var wrapper,
             toolbar,
             redactor,
+            notifications,
             blockSettings,
             showSettingsButton;
 
@@ -349,6 +353,9 @@ cEditor.ui = {
         /** Append editor wrapper after initial textarea */
         cEditor.core.insertAfter(cEditor.nodes.textarea, wrapper);
 
+        /** Append block with notifications to the document */
+        notifications      = cEditor.draw.alertsHolder();
+        cEditor.nodes.notifications = document.body.appendChild(notifications);
 
         /** Make toolbar and content-editable redactor */
         toolbar            = cEditor.draw.toolbar();
@@ -412,6 +419,10 @@ cEditor.ui = {
 
         cEditor.core.log('ui.bindEvents fired', 'info');
 
+        window.addEventListener('error', function (errorMsg, url, lineNumber) {
+            cEditor.notifications.errorThrown(errorMsg, event);
+        }, false );
+
         /** All keydowns on Document */
         document.addEventListener('keydown', function (event) {
             cEditor.callback.globalKeydown(event);
@@ -1852,6 +1863,19 @@ cEditor.draw = {
         return bar;
     },
 
+    /**
+    * Block with notifications
+    */
+    alertsHolder : function() {
+
+        var block = document.createElement('div');
+
+        block.classList.add('ce_notifications-block');
+
+        return block;
+
+    },
+
     /**
     * Block settings panel
     */
@@ -1908,6 +1932,44 @@ cEditor.draw = {
 
 };
 
+/** Module which extends notifications and make different animations for logs */
+cEditor.notifications = {
+
+    /**
+    * Error notificator. Shows block with message
+    */
+    errorThrown : function(errorMsg, event) {
+
+        cEditor.notifications.send('This action is not available currently', event.type, false);
+
+    },
+
+    /**
+    * 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
+    */
+    send : function(message, type, append) {
+
+        var notification = cEditor.draw.block('div');
+
+        notification.textContent = message;
+        notification.classList.add('ce_notification-item', 'ce_notification-' + type, 'flipInX');
+
+        if (!append) {
+            cEditor.nodes.notifications.innerHTML = '';
+        }
+
+        cEditor.nodes.notifications.appendChild(notification);
+
+        setTimeout(function () {
+            notification.remove();
+        }, 3000);
+
+    },
+}
+
 
 /**
 * Developer plugins

editor.css

@@ -28,7 +28,6 @@
     /* Animation center compensation - margins should be symmetric */
     margin-left: .2em;
 
-    -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
 }
 
@@ -182,11 +181,6 @@
     }
 
 /*
-@-webkit-keyframes bounceIn {
-    0% { opacity: 0; -webkit-transform: scale(.3);}
-    50% {opacity: 1; -webkit-transform: scale(1.05);}
-    70% {-webkit-transform: scale(.9);}
-    100% {-webkit-transform: scale(1);}
 }
 
 @-moz-keyframes bounceIn {
@@ -209,9 +203,61 @@
 }
 
 .bounceIn {
-    -webkit-animation-name: bounceIn; -webkit-animation-duration: 600ms; -webkit-animation-iteration-count: 1;
     -moz-animation-name: bounceIn; -moz-animation-duration: 600ms; -moz-animation-iteration-count: 1;
     -o-animation-name: bounceIn; -o-animation-duration: 600ms; -o-animation-iteration-count: 1;
     animation-name: bounceIn; animation-duration: 600ms; animation-iteration-count: 1;
 }
 */
+
+
+/** Alerts */
+.ce_notifications-block {
+    position: fixed;
+    top: 0;
+    right: 0;
+    left: 0;
+}
+    .ce_notification-item {
+        padding: 15px 25px;
+        font-size: 14px;
+        text-align: center;
+        animation-duration: 1s;
+        animation-iteration-count: 1;
+        animation-fill-mode: both;
+    }
+
+    .ce_notification-error {
+        background: #e5f3ed;
+        color: #55818c;
+    }
+
+    @keyframes flipInX {
+      from {
+        transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
+        animation-timing-function: ease-in;
+        opacity: 0;
+      }
+
+      40% {
+        transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
+        animation-timing-function: ease-in;
+      }
+
+      60% {
+        transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
+        opacity: 1;
+      }
+
+      80% {
+        transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
+      }
+
+      to {
+        transform: perspective(400px);
+      }
+    }
+
+    .flipInX {
+      backface-visibility: visible !important;
+      animation-name: flipInX;
+    }

example.html

@@ -20,7 +20,7 @@
             font-size: 2em;
         }
     </style>
-
+    
     <link rel="stylesheet" href="plugins/images/plugin.css" />
 
 </head>