Merge remote-tracking branch 'refs/remotes/origin/master' into destroy-module

This commit is contained in:
George Berezhnoy 2017-02-11 18:23:52 +03:00
commit f9bd88743d
10 changed files with 143 additions and 99 deletions

View file

@ -238,7 +238,7 @@
display: flex; display: flex;
} }
.cdx-plugin-settings__item { .cdx-plugin-settings--horisontal .cdx-plugin-settings__item {
flex: 1 0 auto; flex: 1 0 auto;
text-align: center; text-align: center;
} }
@ -275,7 +275,8 @@
border-bottom: 1px solid #e7e9f1; border-bottom: 1px solid #e7e9f1;
} }
.ce-settings__item i { .ce-settings__item i,
.cdx-plugin-settings__item i {
min-width: 16px; min-width: 16px;
margin-right: 1.3em; margin-right: 1.3em;
} }

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View file

@ -121,14 +121,15 @@
iconClassname: 'ce-icon-list-bullet', iconClassname: 'ce-icon-list-bullet',
make: list.make, make: list.make,
appendCallback: null, appendCallback: null,
settings: list.makeSettings, makeSettings: list.makeSettings,
render: list.render, render: list.render,
validate: list.validate, validate: list.validate,
save: list.save, save: list.save,
destroy: list.destroy, destroy: list.destroy,
displayInToolbox: true, displayInToolbox: true,
showInlineToolbar: true, showInlineToolbar: true,
enableLineBreaks: true enableLineBreaks: true,
allowedToPaste: true,
}, },
quote_styled: { quote_styled: {
type: 'quote_styled', type: 'quote_styled',
@ -202,20 +203,6 @@
text : 'Привет от CodeX' text : 'Привет от CodeX'
} }
}, },
{
type : 'tweet',
data : {
"media" : true,
"conversation" : false,
"user" : null,
"id" : 12312312312,
"text" : null,
"created_at" : null,
"status_url" : 'ertertert',
"caption" : null
},
cover : false
},
{ {
type : 'paragraph', type : 'paragraph',
data : { data : {

View file

@ -810,8 +810,8 @@ module.exports = (function (callbacks) {
/** Prevent default behaviour */ /** Prevent default behaviour */
event.preventDefault(); event.preventDefault();
/** Allow paste when event target is editable */ /** Allow paste when event target placed in Editable element */
if (event.target.contentEditable != 'true') { if (!editor.content.getEditableParent(event.target)) {
return; return;

View file

@ -868,6 +868,23 @@ module.exports = (function (content) {
}; };
/**
* Finds closest Contenteditable parent from Element
* @param {Element} node element looking from
* @return {Element} node contenteditable
*/
content.getEditableParent = function (node) {
while (node && node.contentEditable != 'true') {
node = node.parentNode;
}
return node;
};
return content; return content;
})({}); })({});

View file

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

View file

@ -1,32 +1,11 @@
.ce-list { .cdx-plugin-list {
margin: 0; margin: 0;
padding: .5em 0; padding: .5em 0;
line-height: 1.7em;
} }
.ce_plugin_list--settings{ .cdx-plugin-list__li{
white-space: nowrap; display: list-item;
}
.ce_plugin_list--select_button{
display: block;
color: #306ac7;
cursor: pointer;
line-height: 1.3em;
}
.ce_plugin_list--select_button:not(:last-of-type){
margin-bottom: 0.9em;
}
.ce_plugin_list--select_button:hover{
color: #a1b4ec;
}
/**
* List style settigns icons
*/
.ce_plugin_list--select_button i{
margin-right: 1.3em;
}
.ce-list li{
background: #fff; background: #fff;
border: 1px solid #ebeef3; border: 1px solid #ebeef3;
border-radius: 3px; border-radius: 3px;
@ -35,3 +14,23 @@
list-style-position: outside; list-style-position: outside;
margin-left: 1.1em; margin-left: 1.1em;
} }
.cdx-plugin-list p {
margin: 0.6em 0;
}
.cdx-plugin-list p:first-of-type {
margin-top: 0;
}
.cdx-plugin-list p:last-of-type {
margin-bottom: 0;
}
/**
* List style settigns icons
*/
.ce_plugin_list--select_button i{
margin-right: 1.3em;
}

View file

@ -4,21 +4,29 @@
*/ */
var list = (function(list_plugin) { var list = (function(list_plugin) {
var baseClass = "tool-list"; /**
* CSS class names
var elementClasses = { */
li : "tool-list-li" var elementClasses_ = {
pluginWrapper: 'cdx-plugin-list',
li: 'cdx-plugin-list__li',
settings: 'cdx-plugin-list__settings',
settingsItem: 'cdx-plugin-settings__item'
}; };
var LIST_ITEM_TAG = 'LI';
var ui = { var ui = {
make: function (blockType) { make: function (blockType) {
var wrapper = this.block(blockType || 'UL', baseClass); var wrapper = this.block(blockType || 'UL', elementClasses_.pluginWrapper);
wrapper.dataset.type = 'UL'; wrapper.dataset.type = blockType;
wrapper.contentEditable = true; wrapper.contentEditable = true;
wrapper.addEventListener('keydown', methods_.keyDown);
return wrapper; return wrapper;
}, },
@ -36,20 +44,20 @@ var list = (function(list_plugin) {
button: function (buttonType) { button: function (buttonType) {
var types = { var types = {
unordered: '<i class="ce-icon-list-bullet"></i>Обычный список', unordered: '<i class="ce-icon-list-bullet"></i>Обычный',
ordered: '<i class="ce-icon-list-numbered"></i>Нумерованный список' ordered: '<i class="ce-icon-list-numbered"></i>Нумерованный'
}, },
button = document.createElement('SPAN'); button = document.createElement('DIV');
button.innerHTML = types[buttonType]; button.innerHTML = types[buttonType];
button.className = 'ce_plugin_list--select_button'; button.classList.add(elementClasses_.settingsItem);
return button; return button;
} }
}; };
var methods = { var methods_ = {
/** /**
* Changes block type => OL or UL * Changes block type => OL or UL
@ -64,31 +72,56 @@ var list = (function(list_plugin) {
newEditable.dataset.type = blockType; newEditable.dataset.type = blockType;
newEditable.innerHTML = oldEditable.innerHTML; newEditable.innerHTML = oldEditable.innerHTML;
newEditable.classList.add('ce-list'); newEditable.classList.add(elementClasses_.pluginWrapper);
codex.editor.content.switchBlock(currentBlock, newEditable, 'list'); codex.editor.content.switchBlock(currentBlock, newEditable, 'list');
} },
}; keyDown: function (e) {
var controlKeyPressed = e.ctrlKey || e.metaKey,
keyCodeForA = 65;
/** /**
* Make initial header block * If CTRL+A (CMD+A) was pressed, we should select only one list item,
* @param {object} JSON with block data * not all <OL> or <UI>
* @return {Element} element to append
*/ */
list_plugin.make = function () { if (controlKeyPressed && e.keyCode == keyCodeForA) {
var tag = ui.make(), e.preventDefault();
li = ui.block("li", "tool-link-li");
var br = document.createElement("br"); /**
* Select <LI> content
*/
methods_.selectListItem();
li.appendChild(br); }
tag.appendChild(li);
tag.classList.add('ce-list'); },
return tag; /**
* Select all content of <LI> with caret
*/
selectListItem : function () {
var selection = window.getSelection(),
currentSelectedNode = selection.anchorNode.parentNode,
range = new Range();
/**
* Search for <LI> element
*/
while ( currentSelectedNode && currentSelectedNode.tagName != LIST_ITEM_TAG ) {
currentSelectedNode = currentSelectedNode.parentNode;
}
range.selectNodeContents(currentSelectedNode);
selection.removeAllRanges();
selection.addRange(range);
}
}; };
/** /**
@ -96,22 +129,30 @@ var list = (function(list_plugin) {
*/ */
list_plugin.render = function (data) { list_plugin.render = function (data) {
var type = data.type == 'ordered' ? 'OL' : 'UL', var type = data && data.type == 'ordered' ? 'OL' : 'UL',
tag = ui.make(type); tag = ui.make(type),
newLi;
tag.classList.add('ce-list'); if (data && data.items) {
data.items.forEach(function (element, index, array) { data.items.forEach(function (element, index, array) {
var newLi = ui.block("li", listTool.elementClasses.li); newLi = ui.block('li', elementClasses_.li);
newLi.innerHTML = element; newLi.innerHTML = element;
tag.dataset.type = data.type;
tag.appendChild(newLi); tag.appendChild(newLi);
}); });
} else {
newLi = ui.block('li', elementClasses_.li);
tag.appendChild(newLi);
}
return tag; return tag;
}; };
@ -119,7 +160,7 @@ var list = (function(list_plugin) {
list_plugin.validate = function(data) { list_plugin.validate = function(data) {
var items = data.items.every(function(item){ var items = data.items.every(function(item){
return item.trim() != ''; return item.trim() !== '';
}); });
if (!items) if (!items)
@ -150,24 +191,23 @@ var list = (function(list_plugin) {
}; };
list_plugin.makeSettings = function(data) { list_plugin.makeSettings = function () {
var holder = document.createElement('DIV'), var holder = document.createElement('DIV');
selectTypeButton;
/** Add holder classname */ /** Add holder classname */
holder.className = 'ce_plugin_list--settings'; holder.className = elementClasses_.settings;
var orderedButton = ui.button("ordered"), var orderedButton = ui.button("ordered"),
unorderedButton = ui.button("unordered"); unorderedButton = ui.button("unordered");
orderedButton.addEventListener('click', function (event) { orderedButton.addEventListener('click', function (event) {
methods.changeBlockStyle(event, 'OL'); methods_.changeBlockStyle(event, 'OL');
codex.editor.toolbar.settings.close(); codex.editor.toolbar.settings.close();
}); });
unorderedButton.addEventListener('click', function (event) { unorderedButton.addEventListener('click', function (event) {
methods.changeBlockStyle(event, 'UL'); methods_.changeBlockStyle(event, 'UL');
codex.editor.toolbar.settings.close(); codex.editor.toolbar.settings.close();
}); });

File diff suppressed because one or more lines are too long