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
This commit is contained in:
Menshikov Alexander 2016-07-01 21:34:29 +03:00 committed by Peter Savchenko
parent f7e4d3393c
commit b72593041e
5 changed files with 361 additions and 4 deletions

View file

@ -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 = {

View file

@ -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) {

View file

@ -20,6 +20,7 @@
font-size: 2em;
}
</style>
<link rel="stylesheet" href="plugins/ceditor-tool-link.css" />
</head>
<body style="padding: 100px">
@ -102,6 +103,15 @@
text : 'На днях я получил очередной проект по разработке личного кабинета.<br> Как обычно, я открыл консоль, чтобы посмотреть историю проекта, ветки и все ли правки закомичены (от слова commit - фиксировать). Однако ничего из этого я не узнал — проект не содержал .git репозитория.<br> Эта ситуация в очередной раз заставила задуматься о том, как много разработчиков до сих пор не понимают необходимость контролировать изменения в файлах с исходным кодом. А многие и вовсе не знают что это такое, и как этим пользоваться.'
}
},
{
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. Ветка состоит из коммитов, расположенных в хронологическом порядке.&nbsp;Как правило, в ветке 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 @@
})
</script>
<script src="plugins/ceditor-tool-link.js"></script>

View file

@ -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);
}

View file

@ -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
};