Skip to content

Commit

Permalink
Prepare plugins (codex-team#148)
Browse files Browse the repository at this point in the history 
* prepare plugins improvements

* prepare plugins asyncronically

* update version

* restore data from cache when plugin is unavailable

* added comments to the complicated solution

* new module tools.js for methods working with plugins

* remove ArrayOfCachedData

* build updated

* remove trash
  • Loading branch information
@khaydarov @neSpecc
khaydarov authored and neSpecc committed Feb 5, 2017
1 parent 8f9844f commit f5314df
Show file tree
Hide file tree
Showing 15 changed files with 291 additions and 81 deletions.
5 changes: 3 additions & 2 deletions .eslintrc
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,8 +39,8 @@
"no-trailing-spaces": 2,
"no-mixed-spaces-and-tabs": 2,
"padded-blocks": [2, "always"],
"space-before-blocks": 2,
"space-before-function-paren": [2, {
"space-before-blocks": 1,
"space-before-function-paren": [1, {
"anonymous": "always",
"named": "never"
}],
Expand All @@ -63,6 +63,7 @@
"module": true,
"require": true,
"window": true,
"console" : true,
"codex": true,
"VERSION" : true,
"Promise" : true,
Expand Down
11 changes: 10 additions & 1 deletion codex-editor.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,6 @@
min-height: 350px;
}


.ce-block__content a {
color: #186baa;
}
Expand Down Expand Up @@ -390,6 +389,16 @@
padding: 0;
}

.cdx-unavailable-block {
display: block;
margin: 10px 0;
padding: 80px;
background-color: #fff7f7;
text-align: center;
border-radius: 3px;
color: #ce5f5f;
}

/**
* Typographycs
*/
Expand Down
4 changes: 2 additions & 2 deletions codex-editor.js
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion codex-editor.js.map
View file

Large diffs are not rendered by default.

9 changes: 5 additions & 4 deletions codex.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ module.exports = (function (editor) {
var init = function () {

editor.core = require('./modules/core');
editor.tools = require('./modules/tools');
editor.ui = require('./modules/ui');
editor.transport = require('./modules/transport');
editor.renderer = require('./modules/renderer');
Expand Down Expand Up @@ -75,9 +76,9 @@ module.exports = (function (editor) {
* Output state
*/
editor.state = {
jsonOutput: [],
blocks : [],
inputs : []
jsonOutput : [],
blocks : [],
inputs : []
};

/**
Expand Down Expand Up @@ -127,7 +128,7 @@ module.exports = (function (editor) {
.then(editor.ui.make)
.then(editor.ui.addTools)
.then(editor.ui.bindEvents)
.then(editor.ui.preparePlugins)
.then(editor.tools.prepare)
.then(editor.transport.prepare)
.then(editor.renderer.makeBlocksFromData)
.then(editor.ui.saveInputs)
Expand Down
31 changes: 29 additions & 2 deletions example.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -176,8 +176,35 @@
}
},
data : {
items: [],
count: 0
// items: [
// {
// type : 'paragraph',
// data : {
// 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',
// data : {
// text : 'Пишите нам на team@ifmo.su'
// }
// },
// ],
// count: 2
}
});
</script>
Expand Down
11 changes: 11 additions & 0 deletions modules/core.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -130,6 +130,17 @@ module.exports = (function (core) {

};

/**
* Checks passed object for emptiness
* @require ES5 - Object.keys
* @param {object}
*/
core.isEmpty = function ( obj ) {

return Object.keys(obj).length === 0;

};

/**
* Native Ajax
*/
Expand Down
13 changes: 13 additions & 0 deletions modules/draw.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -311,6 +311,19 @@ module.exports = (function (draw) {

};

/**
* Unavailable plugin block
*/
draw.unavailableBlock = function () {

var wrapper = document.createElement('DIV');

wrapper.classList.add('cdx-unavailable-block');

return wrapper;

};

return draw;

})({});
49 changes: 35 additions & 14 deletions modules/renderer.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ module.exports = (function (renderer) {
/**
* If redactor is empty, add first paragraph to start writing
*/
if (!editor.state.blocks.items.length) {
if (editor.core.isEmpty(editor.state.blocks) || !editor.state.blocks.items.length) {

editor.ui.addInitialBlock();
return;
Expand Down Expand Up @@ -121,7 +121,10 @@ module.exports = (function (renderer) {

return Promise.resolve().then(function () {

return blocksList[index];
return {
tool : blocksList[index],
position : index
};

});

Expand All @@ -132,19 +135,22 @@ module.exports = (function (renderer) {
*
* @uses render method of each plugin
*
* @param {object} blockData looks like
* { header : {
* text: '',
* type: 'H3', ...
* }
* }
* @return {object} with type and Element
* @param {Object} toolData.tool
* { header : {
* text: '',
* type: 'H3', ...
* }
* }
* @param {Number} toolData.position - index in input-blocks array
* @return {Object} with type and Element
*/
renderer.createBlockFromData = function (blockData) {
renderer.createBlockFromData = function ( toolData ) {

/** New parser */
var pluginName = blockData.type,
cover = blockData.cover;
var block,
tool = toolData.tool,
pluginName = tool.type,
cover = tool.cover;

/** Get first key of object that stores plugin name */
// for (var pluginName in blockData) break;
Expand All @@ -163,8 +169,23 @@ module.exports = (function (renderer) {

}

/** New Parser */
var block = editor.tools[pluginName].render(blockData.data);
if ( editor.tools[pluginName].available === false ) {

block = editor.draw.unavailableBlock();

block.innerHTML = editor.tools[pluginName].loadingMessage;

/**
* Saver will extract data from initial block data by position in array
*/
block.dataset.inputPosition = toolData.position;

} else {

/** New Parser */
block = editor.tools[pluginName].render(tool.data);

}

/** is first-level block stretched */
var stretched = editor.tools[pluginName].isStretched || false;
Expand Down
44 changes: 30 additions & 14 deletions modules/saver.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -105,29 +105,45 @@ module.exports = (function (saver) {
/** Result saver */
var blockContent = block.childNodes[0],
pluginsContent = blockContent.childNodes[0],
savedData = editor.tools[pluginName].save(pluginsContent),
output;
savedData,
position,
output,
coverFlag = false;

/** If plugin wasn't available then return data from cache */
if ( editor.tools[pluginName].available === false ) {

output = {
type: pluginName,
data: savedData
};
position = pluginsContent.dataset.inputPosition;

savedData = codex.editor.state.blocks.items[position].data;
coverFlag = codex.editor.state.blocks.items[position].cover;

} else {

savedData = editor.tools[pluginName].save(pluginsContent);
coverFlag = block.classList.contains(editor.ui.className.BLOCK_IN_FEED_MODE);

if (editor.tools[pluginName].validate) {
if (editor.tools[pluginName].validate) {

var result = editor.tools[pluginName].validate(savedData);
var result = editor.tools[pluginName].validate(savedData);

/**
* Do not allow invalid data
*/
if (!result)
return;
/**
* Do not allow invalid data
*/
if (!result)
return;

}

}

output = {
type: pluginName,
data: savedData
};

/** Marks Blocks that will be in main page */
output.cover = block.classList.contains(editor.ui.className.BLOCK_IN_FEED_MODE);
output.cover = coverFlag;

editor.state.jsonOutput.push(output);

Expand Down
Loading

0 comments on commit f5314df

Please sign in to comment.