From b72593041e94dab95bc39da86fe735c340d54ccd Mon Sep 17 00:00:00 2001 From: Menshikov Alexander Date: Fri, 1 Jul 2016 21:34:29 +0300 Subject: [PATCH] Tool link plugin (#58) * Finish core functionality of the tool link * Some css beauty * Fix css border: 0 * Change to className.add() * Remove 'to' in comments * Use this where it is real Remove default type setting in Input * Code refactoring * Implement save() method * Optimise variable usage * Add UI maker * Clearfix Objects clone Css in tool-link plugin * Fix * Fix CSS --- ce_interface.js | 2 +- codex-editor.js | 4 +- example.html | 23 ++- plugins/ceditor-tool-link.css | 59 ++++++++ plugins/ceditor-tool-link.js | 277 ++++++++++++++++++++++++++++++++++ 5 files changed, 361 insertions(+), 4 deletions(-) create mode 100644 plugins/ceditor-tool-link.css create mode 100644 plugins/ceditor-tool-link.js diff --git a/ce_interface.js b/ce_interface.js index 3760bc71..aa098b53 100644 --- a/ce_interface.js +++ b/ce_interface.js @@ -45,7 +45,7 @@ var ce = function(settings) { }; // All posible tools -ce.prototype.allTools = ['header', 'picture', 'list', 'quote', 'code', 'twitter', 'instagram', 'smile']; +ce.prototype.allTools = ['header', 'picture', 'list', 'quote', 'code', 'link', 'twitter', 'instagram', 'smile']; // Default settings configuration ce.prototype.defaultSettings = { diff --git a/codex-editor.js b/codex-editor.js index af5c2125..c0ea152f 100644 --- a/codex-editor.js +++ b/codex-editor.js @@ -1842,7 +1842,7 @@ var paragraphTool = { /** * Make initial header block - * @param {object} JSON to with block data + * @param {object} JSON with block data * @return {Element} element to append */ make : function (data) { @@ -1909,7 +1909,7 @@ var headerTool = { /** * Make initial header block - * @param {object} JSON to with block data + * @param {object} JSON with block data * @return {Element} element to append */ make : function (data) { diff --git a/example.html b/example.html index c88fbe79..be0eb5d3 100644 --- a/example.html +++ b/example.html @@ -20,6 +20,7 @@ font-size: 2em; } + @@ -102,6 +103,15 @@ text : 'На днях я получил очередной проект по разработке личного кабинета.
Как обычно, я открыл консоль, чтобы посмотреть историю проекта, ветки и все ли правки закомичены (от слова commit - фиксировать). Однако ничего из этого я не узнал — проект не содержал .git репозитория.
Эта ситуация в очередной раз заставила задуматься о том, как много разработчиков до сих пор не понимают необходимость контролировать изменения в файлах с исходным кодом. А многие и вовсе не знают что это такое, и как этим пользоваться.' } }, + { + link : { + 'linkUrl' : 'http://google.com', + 'linkText' : 'google.com', + 'image' : 'http://i1.kym-cdn.com/photos/images/facebook/000/002/110/longcat.jpg', + 'title' : 'Google', + 'description' : 'Поисковик, поисковик, проч.' + } + }, { header : { type : 'H2', @@ -161,7 +171,16 @@ paragraph : { text : 'После создания нового репозитория дерево содержит только одну ветку — master. Ветка состоит из коммитов, расположенных в хронологическом порядке. Как правило, в ветке master находятся проверенные и протестированные изменения.' } - } + }, + { + link : { + 'linkUrl' : 'http://yandex.ru', + 'linkText' : 'yandex.ru', + 'image' : 'https://yastatic.net/morda-logo/i/apple-touch-icon/ru-76x76.png', + 'title' : 'Яндекс', + 'description' : 'Сайт, поисковик, проч.' + } + }, ]; @@ -189,3 +208,5 @@ }) + + diff --git a/plugins/ceditor-tool-link.css b/plugins/ceditor-tool-link.css new file mode 100644 index 00000000..330dc089 --- /dev/null +++ b/plugins/ceditor-tool-link.css @@ -0,0 +1,59 @@ +.clearfix:after { + visibility: hidden; + display: block; + font-size: 0; + content: " "; + clear: both; + height: 0; +} + +.ceditor-tool-link-input { + outline: none; + border: 0; + width: 100%; +} + +.tool-link-panel { + width: 50%; + position: relative; + margin: 25px auto; + background: #f8f7ef; + border: 1px solid transparent; + padding: 25px 30px; +} + +.ceditor-tool-link .tool-link-image { + float:right; + width: 75px; + border-radius: 50%; +} + +.ceditor-tool-link .tool-link-title { + display: block; + width: 340px; + margin-bottom: 4px; + line-height: 1.2em; + font-size: 20px; + font-weight: 700; + color: #000; +} + +.ceditor-tool-link .tool-link-description { + display: block; + width: 400px; + margin-top: 10px; + font-size: 14px; + color: #000; +} + +.ceditor-tool-link .tool-link-link { + display: block; + width: 360px; + font-size: 10px; + margin-bottom: 4px; + letter-spacing: 1px; + overflow: hidden; + text-transform: uppercase; + text-decoration: none; + color: rgba(165,156,86,.8); +} diff --git a/plugins/ceditor-tool-link.js b/plugins/ceditor-tool-link.js new file mode 100644 index 00000000..c4c26b12 --- /dev/null +++ b/plugins/ceditor-tool-link.js @@ -0,0 +1,277 @@ +/** + * Created by nostr on 29.06.16. + */ + +/** + * Link tool plugin + */ +var linkTool = { + + defaultText : 'Insert link here ...', + currentBlock : null, + currentInput : null, + elementClasses : { + link : "tool-link-link", + image : "tool-link-image", + title : "tool-link-title", + description : "tool-link-description" + }, + + /** + * Make initial header block + * @param {object} JSON with block data + * @return {Element} element to append + */ + makeNewBlock : function (data) { + + var wrapper = linkTool.ui.mainBlock(); + + var tag = linkTool.ui.input(); + + linkTool.currentInput = tag; + + wrapper.appendChild(tag); + + /* Bind callbacks **/ + + tag.addEventListener('paste', linkTool.blockPasteCallback, false); + + return wrapper; + + }, + + /** + * Method to render HTML block from JSON + */ + render : function (json) { + + var block = linkTool.ui.mainBlock(); + + var tag = linkTool.ui.make(json); + + block.appendChild(tag); + + return block; + + }, + + /** + * Method to extract JSON data from HTML block + */ + save : function (block){ + + var linkElement = linkTool.elementClasses.link; + + var data = { + fullLink : block.querySelector("." + linkElement).href, + shortLink : block.querySelector("." + linkElement).textContent, + image : block.querySelector("." + linkTool.elementClasses.image).src, + title : block.querySelector("." + linkTool.elementClasses.title).textContent, + description : block.querySelector("." + linkTool.elementClasses.description).textContent + }; + + return data; + + }, + + appendCallback : function () { + + console.log('link callback is appended...'); + + }, + + blockPasteCallback : function (event) { + + clipboardData = event.clipboardData || window.clipboardData; + + pastedData = clipboardData.getData('Text'); + + var block = event.target.parentNode; + + Promise.resolve() + + .then(function () { + return linkTool.urlify(pastedData) + }) + + .then(fetch('http://ajax.ru/link')) + + .then(function (response) { + + if (response.status == "200"){ + + return response.json(); + + } + else { + + return { + 'linkUrl' : 'http://yandex.ru', + 'linkText' : 'yandex.ru', + 'image' : 'https://yastatic.net/morda-logo/i/apple-touch-icon/ru-76x76.png', + 'title' : 'Яндекс', + 'description' : 'Сайт, поисковик, проч.' + }; + + } + + }) + + .then(function (json) { + linkTool.composeLinkPreview(json, block) + }) + + .catch(function(error) { + cEditor.core.log('Error while doing things with link paste: %o', 'error', error); + }); + + }, + + urlify : function (text) { + + var urlRegex = /(https?:\/\/\S+)/g; + + var links = text.match(urlRegex); + + if (links) { + return links[0]; + } + + return null; + + }, + + composeLinkPreview : function (json, currentBlock) { + + if (json == {}) { + + return; + + } + + var previewBlock = linkTool.ui.make(json); + + linkTool.currentInput.remove(); + + currentBlock.appendChild(previewBlock); + + } + +}; + +linkTool.ui = { + + make : function (json) { + + var wrapper = this.wrapper(), + siteImage = this.image(json.image), + siteTitle = this.title(json.title), + siteDescription = this.description(json.description), + siteLink = this.link(json.linkUrl, json.linkText); + + wrapper.appendChild(siteImage); + wrapper.appendChild(siteTitle); + wrapper.appendChild(siteLink); + wrapper.appendChild(siteDescription); + + return wrapper; + + }, + + mainBlock : function () { + + var wrapper = document.createElement('div'); + + wrapper.classList += "ceditor-tool-link"; + + return wrapper + + }, + + input : function () { + + var inpitTag = document.createElement('input'); + + inpitTag.classList += "ceditor-tool-link-input"; + + inpitTag.placeholder = linkTool.defaultText; + + inpitTag.contentEditable = false; + + return inpitTag; + + }, + + wrapper : function () { + + var wrapper = document.createElement('div'); + + wrapper.className += 'tool-link-panel clearfix'; + + return wrapper; + + }, + + image : function (imageSrc) { + + var imageTag = document.createElement('img'); + + imageTag.classList += linkTool.elementClasses.image; + + imageTag.setAttribute('src', imageSrc); + + return imageTag; + + }, + + link : function (linkUrl, linkText) { + + var linkTag = document.createElement('a'); + + linkTag.classList += linkTool.elementClasses.link; + + linkTag.href = linkUrl; + + linkTag.target = "_blank"; + + linkTag.innerText = linkText; + + return linkTag; + + }, + + title : function (titleText) { + + var titleTag = document.createElement('div'); + + titleTag.classList.add("tool-link-content", linkTool.elementClasses.title); + + titleTag.innerHTML = titleText; + + return titleTag; + }, + + description : function (descriptionText) { + + var descriptionTag = document.createElement('div'); + + descriptionTag.classList.add("tool-link-content", linkTool.elementClasses.description); + + descriptionTag.innerHTML = descriptionText; + + return descriptionTag; + } + +}; + +cEditor.tools.link = { + + type : 'link', + iconClassname : 'ce-icon-link', + make : linkTool.makeNewBlock, + appendCallback : linkTool.appendCallback, + render : linkTool.render + // settings : linkTool.makeSettings(), + // save : linkTool.save + +}; \ No newline at end of file