image module hotfix (#126)

* image module hotfix

* image improved configurations

* Image plugin updated

- add border settings
- show selected settings
- stretched setting

modules/callbacks.js

@@ -313,7 +313,10 @@ var callbacks = (function(callbacks) {
         }
 
 
-        var inputIsEmpty = !codex.content.currentNode.textContent.trim();
+        var inputIsEmpty = !codex.content.currentNode.textContent.trim(),
+            currentNodeType = codex.content.currentNode.dataset.tool,
+            isInitialType = currentNodeType == codex.settings.initialBlockPlugin;
+
 
         if (inputIsEmpty) {
 
@@ -325,13 +328,7 @@ var callbacks = (function(callbacks) {
             /** Hide plus buttons */
             codex.toolbar.hidePlusButton();
 
-        }
-
-        var currentNodeType = codex.content.currentNode.dataset.tool;
-
-        /** Mark current block*/
-        if (currentNodeType != codex.settings.initialBlockPlugin || !inputIsEmpty) {
-
+            /** Mark current block */
             codex.content.markBlock();
 
         }

modules/ui.js

@@ -259,9 +259,9 @@ var ui = (function(ui){
 
         codex.core.log('ui.bindEvents fired', 'info');
 
-        window.addEventListener('error', function (errorMsg, url, lineNumber) {
-            codex.notifications.errorThrown(errorMsg, event);
-        }, false );
+        // window.addEventListener('error', function (errorMsg, url, lineNumber) {
+        //     codex.notifications.errorThrown(errorMsg, event);
+        // }, false );
 
         /** All keydowns on Document */
         document.addEventListener('keydown', codex.callback.globalKeydown, false );

package.json

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

plugins/image/image.css

@@ -15,6 +15,18 @@
     filter: blur(1.7px) grayscale(1);
 }
 
+
+.ce-image__wrapper img {
+    transition: all 500ms ease-in;
+    will-change: opacity, filter;
+}
+
+.ce-image__preview img {
+    opacity: .5;
+    filter: blur(1.7px) grayscale(1);
+}
+
+
 /** upload image form */
 .ce-plugin-image__holder{
 	position: relative;
@@ -67,10 +79,18 @@
 		color: #393F52;
 	}
 
+
+
 /** Uploaded image */
 .ce-plugin-image__wrapper {
     padding: 1em 0;
 }
+
+.ce-image__wrapper--bordered {
+    border: 1px solid #eee;
+    box-sizing: border-box;
+}
+
 .ce-plugin-image__uploaded--centered {
     display: block;
     max-width: 600px;
@@ -95,6 +115,7 @@
     background: #fff;
     border: 1px solid #ebeef3;
     border-radius: 3px;
+    box-sizing: border-box;
 }
 
     .ce-plugin-image__caption:empty::before {
@@ -124,3 +145,49 @@
     .ce_plugin_image--select_button:hover{
         color: #a1b4ec;
     }
+
+.ce-image-settings__item {
+    margin-bottom: 10px;
+    cursor: pointer;
+}
+
+    .ce-image-settings__item:not(:last-of-type){
+        margin-bottom: 10px;
+    }
+
+.ce-settings-checkbox {
+    display: inline-block;
+    width: 17px;
+    background: #494361;
+    line-height: 0px;
+    border-radius: 14px;
+    padding: 2px;
+    vertical-align: text-top;
+    margin-right: 16px;
+    transition: background-color 200ms ease-out;
+    will-change: background-color;
+}
+
+.ce-settings-checkbox__toggler {
+    display: inline-block;
+    width: 12px;
+    height: 12px;
+    border-radius: 50%;
+    background: #fff;
+    transition: margin 200ms ease-out;
+}
+
+/**
+ * Setting is active
+ */
+.ce-image-settings__item--toggled {
+    color: #1FAA7E;
+}
+
+.ce-image-settings__item--toggled .ce-settings-checkbox {
+    background-color: #14DC9E;
+}
+
+.ce-image-settings__item--toggled .ce-settings-checkbox__toggler {
+    margin-left: 6px;
+}

plugins/image/image.js

@@ -24,10 +24,27 @@ var image = (function(image) {
         imageWrapper  : 'ce-plugin-image__wrapper',
         formHolder    : 'ce-plugin-image__holder',
         uploadButton  : 'ce-plugin-image__button',
-        imagePreview  : 'ce-image__preview'
+        imagePreview  : 'ce-image__preview',
+        selectorHolder: 'ce-settings-checkbox',
+        selectorButton: 'ce-settings-checkbox__toggler',
+        settingsItem: 'ce-image-settings__item',
+        imageWrapperBordered : 'ce-image__wrapper--bordered',
+        toggled : 'ce-image-settings__item--toggled'
 
     };
 
+    /**
+     * Cache settings
+     * @type {null}
+     */
+    image.cachedSettings = null;
+
+    /**
+     * Array of configurations
+     * Need to change statement
+     */
+    image.configurations = [];
+
     /**
      *
      * @private
@@ -64,11 +81,13 @@ var image = (function(image) {
          * @param {string} style - css class
          * @return {object} image - document IMG tag
          */
-        image : function(file, style) {
+        image : function(file, styles) {
 
             var image = document.createElement('IMG');
 
-            image.classList.add(style);
+            styles.map(function(item) {
+                image.classList.add(item);
+            });
 
             image.src = file.url;
             image.dataset.bigUrl = file.bigUrl;
@@ -119,18 +138,20 @@ var image = (function(image) {
          * @param {boolean} stretched - stretched or not
          * @return wrapped block with image and caption
          */
-        makeImage : function(data, imageTypeClass, stretched) {
+        makeImage : function(data, imageTypeClasses, stretched, bordered) {
 
             var file = data.file,
                 text = data.caption,
                 type     = data.type,
-                image    = ui_.image(file, imageTypeClass),
+                image    = ui_.image(file, imageTypeClasses),
                 caption  = ui_.caption(),
                 wrapper  = ui_.wrapper();
 
             caption.textContent = text;
 
             wrapper.dataset.stretched = stretched;
+            wrapper.dataset.bordered = bordered;
+
             /** Appeding to the wrapper */
             wrapper.appendChild(image);
             wrapper.appendChild(caption);
@@ -229,51 +250,84 @@ var image = (function(image) {
 
             el.addEventListener('click', function() {
 
-                methods_.selectTypeClicked(type);
+                // el - settings element
+
+                switch (type) {
+                    case 'bordered':
+                        methods_.toggleBordered(type, this); break;
+                    case 'stretched':
+                        methods_.toggleStretched(type, this); break;
+                }
+
 
             }, false);
 
         },
 
-        selectTypeClicked : function(type) {
+        toggleBordered : function(type, clickedSettingsItem ) {
 
             var current = codex.content.currentNode,
                 blockContent = current.childNodes[0],
-                image = ui_.getImage(current),
-                inFeed = false,
+                img = ui_.getImage(current),
                 wrapper = current.querySelector('.' + elementClasses_.imageWrapper);
 
-            if (!image) {
+            if (!img) {
+                return;
+            }
+
+            /**
+             * Add classes to the IMG tag and to the Settings element
+             */
+            img.classList.toggle(elementClasses_.imageWrapperBordered);
+            clickedSettingsItem.classList.toggle(elementClasses_.toggled);
+
+            /**
+             * Save settings in dataset
+             */
+            if (img.classList.contains(elementClasses_.imageWrapperBordered)) {
+                wrapper.dataset.bordered = true;
+            } else {
+                wrapper.dataset.bordered = false;
+            }
+
+            setTimeout(function() {
+                codex.toolbar.settings.close();
+            }, 200);
+
+        },
+
+        toggleStretched : function( type, clickedSettingsItem ) {
+
+            var current = codex.content.currentNode,
+                blockContent = current.childNodes[0],
+                img = ui_.getImage(current),
+                wrapper = current.querySelector('.' + elementClasses_.imageWrapper);
+
+            if (!img) {
                 return;
             }
 
             /** Clear classList */
-            current.className = '';
-            image.className = '';
+            blockContent.classList.add(elementClasses_.blockStretched);
+            img.classList.toggle(elementClasses_.uploadedImage.stretched);
+            img.classList.toggle(elementClasses_.uploadedImage.centered);
 
-            /** Add important first-level class ce_block */
-            current.classList.add(codex.ui.className.BLOCK_CLASSNAME);
+            clickedSettingsItem.classList.toggle(elementClasses_.toggled);
 
-            if (type === 'stretched') {
+            if (img.classList.contains(elementClasses_.uploadedImage.stretched)) {
 
-                image.classList.add(elementClasses_.uploadedImage.stretched);
-
-                blockContent.classList.add(elementClasses_.blockStretched);
-
-                /** Setting dataset for saver */
                 wrapper.dataset.stretched = true;
 
-            } else if (type === 'centered') {
+            } else {
 
-                image.classList.add(elementClasses_.uploadedImage.centered);
-
-                blockContent.classList.remove(elementClasses_.blockStretched);
-
-                /** Setting dataset for saver */
                 wrapper.dataset.stretched = false;
+
             }
 
-            codex.toolbar.settings.close();
+            setTimeout(function() {
+                codex.toolbar.settings.close();
+            }, 200);
+
         }
     };
 
@@ -458,12 +512,6 @@ var image = (function(image) {
         }
     };
 
-    /**
-     * Default image holder which will be replaced after image upload
-     * @type {null}
-     */
-    image.holder = null;
-
     /**
      * Image path
      * @type {null}
@@ -485,17 +533,24 @@ var image = (function(image) {
      */
     var make_ = function ( data ) {
 
-        var holder;
+        var holder,
+            classes = [];
 
         if (data) {
 
+            if (data.border) {
+                classes.push(elementClasses_.imageWrapperBordered);
+            }
+
             if ( data.isstretch || data.isstretch === 'true') {
 
-                holder = ui_.makeImage(data, elementClasses_.uploadedImage.stretched, 'true');
+                classes.push(elementClasses_.uploadedImage.stretched);
+                holder = ui_.makeImage(data, classes, 'true', data.border);
 
             } else {
 
-                holder = ui_.makeImage(data, elementClasses_.uploadedImage.centered, 'false');
+                classes.push(elementClasses_.uploadedImage.centered);
+                holder = ui_.makeImage(data, classes, 'false', data.border);
 
             }
 
@@ -565,7 +620,7 @@ var image = (function(image) {
 
         var data = {
             background : false,
-            border : false,
+            border : content.dataset.bordered === 'true' ? true : false,
             isstretch : content.dataset.stretched === 'true' ? true : false,
             file : {
                 url : image.dataset.src || image.src,
@@ -581,7 +636,6 @@ var image = (function(image) {
         return data;
     };
 
-
     /**
      * @public
      *
@@ -590,12 +644,15 @@ var image = (function(image) {
      */
     image.makeSettings = function () {
 
-        var holder  = document.createElement('DIV'),
+        var currentNode = codex.content.currentNode,
+            wrapper = currentNode.querySelector('.' + elementClasses_.imageWrapper),
+            holder  = document.createElement('DIV'),
             types   = {
-                centered  : 'По центру',
-                stretched : 'На всю ширину'
+                stretched : "На всю ширину",
+                bordered  : "Добавить рамку"
             },
-            selectTypeButton;
+            currentImageWrapper  = currentNode.querySelector('.' + elementClasses_.imageWrapper ),
+            currentImageSettings = currentImageWrapper.dataset;
 
         /** Add holder classname */
         holder.className = 'ce_plugin_image--settings';
@@ -603,14 +660,33 @@ var image = (function(image) {
         /** Now add type selectors */
         for (var type in types){
 
-            selectTypeButton = document.createElement('SPAN');
+            /**
+             * Settings template
+             */
+            var settingsItem = document.createElement('DIV'),
+                selectorsHolder = document.createElement('SPAN'),
+                selectorsButton = document.createElement('SPAN');
 
-            selectTypeButton.textContent = types[type];
-            selectTypeButton.className   = 'ce_plugin_image--select_button';
+            settingsItem.classList.add(elementClasses_.settingsItem);
+            selectorsHolder.classList.add(elementClasses_.selectorHolder);
+            selectorsButton.classList.add(elementClasses_.selectorButton);
 
-            methods_.addSelectTypeClickListener(selectTypeButton, type);
+            selectorsHolder.appendChild(selectorsButton);
+            settingsItem.appendChild(selectorsHolder);
 
-            holder.appendChild(selectTypeButton);
+            selectTypeButton = document.createTextNode(types[type]);
+            settingsItem.appendChild(selectTypeButton);
+
+            /**
+             * Activate previously selected settings
+             */
+            if ( currentImageSettings[type] == 'true' ){
+                settingsItem.classList.add(elementClasses_.toggled);
+            }
+
+            methods_.addSelectTypeClickListener(settingsItem, type);
+
+            holder.appendChild(settingsItem);
 
         }
 
@@ -623,85 +699,6 @@ var image = (function(image) {
      */
     image.uploadImageFromUri = uploadingCallbacks_.ByPaste.uploadImageFromUrl;
 
-    image.urlPastedCallbacks = {
-
-        /**
-         * Upload image by URL
-         *
-         * @uses codex Image tool
-         * @param filename
-         * @returns {Element}
-         */
-        uploadedImage : function(filename) {
-
-            var data = {
-                background: false,
-                border: false,
-                isStretch: false,
-                file: {
-                    url: "upload/redactor_images/" + filename,
-                    bigUrl: "upload/redactor_images/" + filename,
-                    width: null,
-                    height: null,
-                    additionalData: "null"
-                },
-                caption: '',
-                cover: null
-            };
-
-            /** Using Image plugin make method */
-            var image = ceImage.make(data);
-
-            return image;
-
-        },
-
-
-        /**
-         * Direct upload from pasted path
-         * @param path
-         */
-        uploadImage : function(path) {
-
-            var ajaxUrl = location.protocol + '//' + location.hostname + ':32769',
-                file,
-                image,
-                current = codex.content.currentNode,
-                beforeSend,
-                success_callback;
-
-            /** When image is uploaded to redactors folder */
-            success_callback = function(data) {
-
-                console.log(data);
-                return;
-                var file = JSON.parse(data);
-                image = ceImage.urlPastedCallbacks.uploadedImage(file.filename);
-                codex.content.switchBlock(current, image, 'image');
-
-            };
-
-            /** Before sending XMLHTTP request */
-            beforeSend = function() {
-                var content = current.querySelector('.ce-block__content');
-                content.classList.add('ce-plugin-image__loader');
-            };
-
-            /** Preparing data for XMLHTTP */
-            var data = {
-                url: '/club/fetchImage',
-                type: "POST",
-                data : {
-                    url: path
-                },
-                beforeSend : beforeSend,
-                success : success_callback
-            };
-
-            codex.core.ajax(data);
-        }
-    };
-
     return image;
 
-})({});
+})({});