diff --git a/example.html b/example.html index 84629238..69483bfb 100644 --- a/example.html +++ b/example.html @@ -278,4 +278,7 @@ + + + diff --git a/plugins/ceditor-tool-code/loading.gif b/plugins/ceditor-tool-code/loading.gif deleted file mode 100644 index 72ea7ccb..00000000 Binary files a/plugins/ceditor-tool-code/loading.gif and /dev/null differ diff --git a/plugins/ceditor-tool-list/ceditor-tool-list.css b/plugins/ceditor-tool-list/ceditor-tool-list.css new file mode 100644 index 00000000..2743fae5 --- /dev/null +++ b/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; +} diff --git a/plugins/ceditor-tool-list/ceditor-tool-list.js b/plugins/ceditor-tool-list/ceditor-tool-list.js new file mode 100644 index 00000000..5e46167b --- /dev/null +++ b/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 + +}; \ No newline at end of file