Tool list (#69)

* Add tool-list
Add rendering
Remove unneccessary files

* Add settings for list plugin

* remove code stylws

* default paramètres iimproved

* remove logs

example.html

@@ -278,4 +278,7 @@
 <script src="plugins/ceditor-tool-quote/ceditor-tool-quote.js"></script>
 <link rel="stylesheet" href="plugins/ceditor-tool-quote/ceditor-tool-quote.css" />
 
+<script src="plugins/ceditor-tool-list/ceditor-tool-list.js"></script>
+<link rel="stylesheet" href="plugins/ceditor-tool-list/ceditor-tool-list.css" />
+
 <script src="plugins/images/plugin.js"></script>

plugins/ceditor-tool-list/ceditor-tool-list.css

@@ -0,0 +1,21 @@
+.ce_plugin_list--settings{
+    white-space: nowrap;
+}
+
+.ce_plugin_list--caption{
+    color: #b9c2c2;
+}
+
+.ce_plugin_list--select_button{
+    display: inline-block;
+    margin-left: 40px;
+    border-bottom: 1px solid #c3d5ed;
+    padding-bottom: 2px;
+    color: #5399d4;
+    cursor: pointer;
+}
+
+.ce_plugin_list--select_button:hover{
+    border-bottom-color: #f6d8da;
+    color: #cc7d74;
+}

plugins/ceditor-tool-list/ceditor-tool-list.js

@@ -0,0 +1,166 @@
+/**
+ * Code Plugin\
+ * Creates code tag and adds content to this tag
+ */
+var listTool = {
+
+    baseClass : "tool-list",
+    elementClasses : {
+        li  : "tool-list-li"
+    },
+
+    /**
+     * Make initial header block
+     * @param {object} JSON with block data
+     * @return {Element} element to append
+     */
+    make : function () {
+
+        var tag = listTool.ui.make(),
+            li  = listTool.ui.block("li", "tool-link-li");
+
+        tag.appendChild(li);
+
+        return tag;
+
+    },
+
+    /**
+     * Method to render HTML block from JSON
+     */
+    render : function (data) {
+
+        var type = data.type == 'ordered' ? 'OL' : 'UL',
+            tag  = listTool.ui.make(type);
+
+        data.items.forEach(function (element, index, array) {
+
+            var newLi = listTool.ui.block("li", listTool.elementClasses.li);
+
+            newLi.innerHTML = element;
+
+            tag.appendChild(newLi);
+
+        });
+
+        return tag;
+
+    },
+
+    /**
+     * Method to extract JSON data from HTML block
+     */
+    save : function (block){
+
+        var data = {
+            text : null
+        };
+
+        data.text = blockData.textContent;
+
+        return data;
+
+    },
+
+    makeSettings : function(data) {
+
+        var holder  = document.createElement('DIV'),
+            caption = document.createElement('SPAN'),
+            selectTypeButton;
+
+        /** Add holder classname */
+        holder.className = 'ce_plugin_list--settings';
+
+        /** Add settings helper caption */
+        caption.textContent = 'Настройки списков';
+        caption.className   = 'ce_plugin_list--caption';
+
+        var orderedButton = listTool.ui.button("ordered"),
+            unorderedButton = listTool.ui.button("unordered");
+
+        orderedButton.addEventListener('click', function (event) {
+            listTool.changeBlockStyle(event, 'ol');
+            cEditor.toolbar.settings.close();
+        });
+
+        unorderedButton.addEventListener('click', function (event) {
+            listTool.changeBlockStyle(event, 'ul');
+            cEditor.toolbar.settings.close();
+        });
+
+        holder.appendChild(caption);
+        holder.appendChild(orderedButton);
+        holder.appendChild(unorderedButton);
+
+        return holder;
+
+    },
+
+    changeBlockStyle : function (event, blockType) {
+
+        var currentBlock = cEditor.content.currentNode,
+            newEditable = listTool.ui.make(blockType),
+            oldEditable = currentBlock.querySelector("[contenteditable]");
+
+        newEditable.innerHTML = oldEditable.innerHTML;
+
+        currentBlock.appendChild(newEditable);
+        oldEditable.remove();
+
+    },
+
+};
+
+listTool.ui = {
+
+    make : function (blockType) {
+
+        var wrapper = this.block(blockType || 'UL', listTool.baseClass);
+
+        wrapper.contentEditable = true;
+
+        return wrapper;
+
+    },
+
+    block : function (blockType, blockClass) {
+
+        var block = document.createElement(blockType);
+
+        if ( blockClass ) block.classList.add(blockClass);
+
+        return block;
+
+    },
+
+    button : function (buttonType) {
+
+        var types   = {
+                unordered    : 'Обычный список',
+                ordered      : 'Нумерованный список'
+            },
+            button = document.createElement('SPAN');
+
+        button.textContent = types[buttonType];
+
+        button.className   = 'ce_plugin_list--select_button';
+
+        return button;
+    }
+};
+
+/**
+ * Now plugin is ready.
+ * Add it to redactor tools
+ */
+cEditor.tools.list = {
+
+    type           : 'list',
+    iconClassname  : 'ce-icon-list-bullet',
+    make           : listTool.make,
+    appendCallback : null,
+    settings       : listTool.makeSettings(),
+    render         : listTool.render,
+    save           : listTool.save
+
+};