2016-07-02 19:32:45 +02:00
|
|
|
/**
|
|
|
|
* 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");
|
|
|
|
|
2016-07-14 15:09:09 +02:00
|
|
|
var br = document.createElement("br");
|
|
|
|
|
|
|
|
li.appendChild(br);
|
2016-07-02 19:32:45 +02:00
|
|
|
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;
|
|
|
|
|
2016-07-15 17:29:54 +02:00
|
|
|
tag.dataset.type = data.type;
|
2016-07-02 19:32:45 +02:00
|
|
|
tag.appendChild(newLi);
|
|
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
return tag;
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Method to extract JSON data from HTML block
|
|
|
|
*/
|
2016-07-16 00:37:01 +02:00
|
|
|
save : function (blockContent){
|
|
|
|
|
|
|
|
var block = blockContent[0],
|
|
|
|
json = {
|
|
|
|
type : 'list',
|
|
|
|
data : {
|
|
|
|
type : null,
|
|
|
|
items : [],
|
|
|
|
}
|
|
|
|
};
|
2016-07-02 19:32:45 +02:00
|
|
|
|
2016-07-15 17:29:54 +02:00
|
|
|
for(var index = 0; index < block.childNodes.length; index++)
|
|
|
|
json.data.items[index] = block.childNodes[index].textContent;
|
2016-07-02 19:32:45 +02:00
|
|
|
|
2016-07-15 17:29:54 +02:00
|
|
|
json.data.type = block.dataset.type;
|
|
|
|
|
|
|
|
return json;
|
2016-07-02 19:32:45 +02:00
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
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]");
|
|
|
|
|
2016-07-15 17:29:54 +02:00
|
|
|
newEditable.dataset.type = blockType;
|
2016-07-02 19:32:45 +02:00
|
|
|
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
|
|
|
|
|
2016-07-14 15:09:09 +02:00
|
|
|
};
|