deblan-mirror/editor.js
deblan-mirror/editor.js
1
0
Fork 0
mirror of https://github.com/codex-team/editor.js synced 2024-05-13 20:07:22 +02:00
Code Issues Projects Releases Wiki Activity

Yandex music added

Browse source
This commit is contained in:
George Berezhnoy 2017-01-26 02:55:40 +03:00
parent cd58297a9e
commit 7a37809532
7 changed files with 118 additions and 46 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
example.html
View file

@ -42,8 +42,8 @@
<script src="plugins/twitter/twitter.js"></script>
<link rel="stylesheet" href="plugins/twitter/twitter.css">
<script src="plugins/video/embed.js"></script>
<link rel="stylesheet" href="plugins/video/embed.css">
<script src="plugins/embed/embed.js"></script>
<link rel="stylesheet" href="plugins/embed/embed.css">
<script src="plugins/paste/paste.js"></script>
<script src="plugins/paste/patterns.js"></script>
@ -70,14 +70,14 @@
paste: {
type: 'paste',
iconClassname: '',
prepare: pasteTool.prepare,
make: pasteTool.make,
prepare: paste.prepare,
make: paste.make,
appendCallback: null,
settings: null,
render: null,
save: pasteTool.save,
save: paste.save,
enableLineBreaks: false,
callbacks: pasteTool.pasted,
callbacks: paste.pasted,
allowedToPaste: false
},
header: {

2
modules/toolbar/toolbox.js
View file

@ -121,7 +121,7 @@ var toolbox = (function(toolbox) {
/**
* UNREPLACEBLE_TOOLS this types of tools are forbidden to replace even they are empty
*/
var UNREPLACEBLE_TOOLS = ['image', 'link', 'list', 'instagram', 'twitter', 'video'],
var UNREPLACEBLE_TOOLS = ['image', 'link', 'list', 'instagram', 'twitter', 'embed'],
tool = codex.tools[codex.toolbar.current],
workingNode = codex.content.currentNode,
currentInputIndex = codex.caret.inputIndex,

6
plugins/video/embed.css → plugins/embed/embed.css
View file

@ -1,7 +1,7 @@
.ce-redactor .embed {
width: 100%;
max-width: 650px;
margin: 10px auto;
max-width: 600px;
margin: 15px 0;
background: #fff;
}
.embed__loader {

103
plugins/video/embed.js → plugins/embed/embed.js
View file

@ -24,62 +24,101 @@ var embed = function(embed){
makeElementFromHtml: function(html) {
var wrapper = document.createElement('DIV');
wrapper.innerHTML = html;
return wrapper.firstElementChild;
return wrapper;
}
};
var services = {
vimeo: {
regex: /(?:http[s]?:\/\/)?(?:www.)?vimeo\.co(?:.+\/([^\/]\d+)(?:#t=[\d]+)?s?$)/,
html: "<iframe src=\"https://player.vimeo.com/video/<%= remote_id %>?title=0&byline=0\" width=\"580\" height=\"320\" frameborder=\"0\"></iframe>"
html: "<iframe src=\"https://player.vimeo.com/video/<%= remote_id %>?title=0&byline=0\" width=\"580\" height=\"320\" frameborder=\"0\"></iframe>",
height: 320,
width: 580
},
youtube: {
regex: /^.*(?:(?:youtu\.be\/)|(?:youtube\.com)\/|v\/|u\/\w\/|embed\/|watch\?v=|\&v=)([^#\&\?]*)(?:[\?\&]t\=(\d*)|)/,
html: "<iframe src=\"https://www.youtube.com/embed/<%= remote_id %>\" width=\"580\" height=\"320\" frameborder=\"0\" allowfullscreen></iframe>",
timestamp: '?t='
height: 320,
width: 580
},
coub: {
regex: /https?:\/\/coub\.com\/view\/([^\/\?\&]+)/,
html: "<iframe src=\"//coub.com/embed/<%= remote_id %>\" width=\"580\" height=\"320\" frameborder=\"0\" allowfullscreen></iframe>"
html: "<iframe src=\"//coub.com/embed/<%= remote_id %>\" width=\"580\" height=\"320\" frameborder=\"0\" allowfullscreen></iframe>",
height: 320,
width: 580
},
vine: {
regex: /https?:\/\/vine\.co\/v\/([^\/\?\&]+)/,
html: "<iframe src=\"https://vine.co/v/<%= remote_id %>/embed/simple/\" width=\"580\" height=\"320\" frameborder=\"0\" allowfullscreen></iframe>"
},
vk: {
regex: /https?:\/\/vk\.com\/.*(?:video)([-_0-9]+)/,
html: "<iframe src=\"//vk.com/video_ext.php?id=<%= remote_id %>\" width=\"853\" height=\"480\" frameborder=\"0\" allowfullscreen></iframe>"
html: "<iframe src=\"https://vine.co/v/<%= remote_id %>/embed/simple/\" width=\"580\" height=\"320\" frameborder=\"0\" allowfullscreen></iframe>",
height: 320,
width: 580
},
imgur: {
regex: /https?:\/\/(?:i\.)?imgur\.com.*\/([a-zA-Z0-9]+)(?:\.gifv)?/,
html: "<iframe allowfullscreen=\"true\" scrolling=\"no\" src=\"http://imgur.com/<%= remote_id %>/embed\" id=\"imgur-embed-iframe-pub-<%= remote_id %>\" class=\"imgur-embed-iframe-pub\" style=\"height: 500px; width: 540px; border: 1px solid #000\"></iframe>"
html: "<iframe allowfullscreen=\"true\" scrolling=\"no\" src=\"http://imgur.com/<%= remote_id %>/embed\" id=\"imgur-embed-iframe-pub-<%= remote_id %>\" class=\"imgur-embed-iframe-pub\" style=\"height: 500px; width: 540px; border: 1px solid #000\"></iframe>",
height: 500,
width: 540
},
gfycat: {
regex: /https?:\/\/gfycat\.com(?:\/detail)?\/([a-zA-Z]+)/,
html: "<iframe src='https://gfycat.com/ifr/<%= remote_id %>' frameborder='0' scrolling='no' width='580' height='436' allowfullscreen ></iframe>",
height: 436,
width: 580
},
'twitch-channel': {
regex: /https?:\/\/twitch.tv\/([^\/\?\&]*)/,
html: "<iframe src=\"https://player.twitch.tv/?channel=<%= remote_id %>\" frameborder=\"0\" allowfullscreen=\"true\" scrolling=\"no\" height=\"378\" width=\"620\"></iframe>"
html: "<iframe src=\"https://player.twitch.tv/?channel=<%= remote_id %>\" frameborder=\"0\" allowfullscreen=\"true\" scrolling=\"no\" height=\"366\" width=\"600\"></iframe>",
height: 366,
width: 600
},
'twitch-video': {
regex: /https?:\/\/www.twitch.tv\/[^\/\?\&]*\/v\/([0-9]*)/,
html: "<iframe src=\"https://player.twitch.tv/?video=v<%= remote_id %>\" frameborder=\"0\" allowfullscreen=\"true\" scrolling=\"no\" height=\"378\" width=\"620\"></iframe>"
html: "<iframe src=\"https://player.twitch.tv/?video=v<%= remote_id %>\" frameborder=\"0\" allowfullscreen=\"true\" scrolling=\"no\" height=\"366\" width=\"600\"></iframe>",
height: 366,
width: 600
},
'yandex-music-album': {
regex: '',
html: "<iframe frameborder=\"0\" style=\"border:none;width:540px;height:400px;\" width=\"540\" height=\"400\" src=\"https://music.yandex.ru/iframe/#album/<%= remote_id %>/\"></iframe>",
height: 400,
width: 540
},
'yandex-music-track': {
regex: '',
html: "<iframe frameborder=\"0\" style=\"border:none;width:540px;height:100px;\" width=\"540\" height=\"100\" src=\"https://music.yandex.ru/iframe/#track/<%= remote_id %>/\"></iframe>",
height: 100,
width: 540
},
'yandex-music-playlist': {
regex: '',
html: "<iframe frameborder=\"0\" style=\"border:none;width:540px;height:400px;\" width=\"540\" height=\"400\" src=\"https://music.yandex.ru/iframe/#playlist/<%= remote_id %>/show/cover/description/\"></iframe>",
height: 400,
width: 540
}
};
embed.make = function(data, isInternal) {
if (!data.embed_id)
if (!data.remote_id)
return;
var html = methods.getHtmlWithEmbedId(data.service, data.embed_id),
var html = methods.getHtmlWithEmbedId(data.source, data.remote_id),
block = methods.makeElementFromHtml(html);
block.dataset.id = data.embed_id;
block.dataset.embedSeirvice = data.service;
block.dataset.remoteId = data.remote_id;
block.dataset.source = data.source;
block.dataset.thumbnailUrl = data.thumbnailUrl;
block.classList.add('embed');
var sidePadding = (600 - services[data.source].width) / 2 + 'px';
block.style.padding = '30px ' + sidePadding;
if (isInternal) {
methods.addInternal(block);
@ -95,14 +134,18 @@ var embed = function(embed){
*/
embed.save = function(blockContent) {
var data;
if (!blockContent)
return;
var data,
source = blockContent.dataset.source;
data = {
embed_id: blockContent.dataset.id,
service: blockContent.dataset.embedService
source: source,
remote_id: blockContent.dataset.remoteId,
thumbnailUrl: blockContent.dataset.thumbnailUrl,
height: services[source].height,
width: services[source].width
};
return data;
@ -118,11 +161,25 @@ var embed = function(embed){
embed.urlPastedCallback = function(url, pattern) {
var id = pattern.regex.exec(url)[1];
var execArray = pattern.regex.exec(url),
id;
switch(pattern.type) {
case 'yandex-music-track':
id = execArray[2]+'/'+execArray[1];
break;
case 'yandex-music-playlist':
id = execArray[1]+'/'+execArray[2];
break;
default:
id = execArray[1];
}
var data = {
embed_id: id,
service: pattern.type
source: pattern.type,
remote_id: id,
thumbnailUrl: url
};
embed.make(data, true);

0
plugins/video/loading.gif → plugins/embed/loading.gif
View file

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.5 KiB

After

Width:  |  Height:  |  Size: 1.5 KiB

17
plugins/paste/paste.js
View file

@ -9,31 +9,34 @@
*
* Main tool settings.
*/
var pasteTool = {
var paste = function(paste){
/**
* Saves data
* @param event
*/
pasted : function(event) {
paste.pasted = function(event) {
var clipBoardData = event.clipboardData || window.clipboardData,
content = clipBoardData.getData('Text');
pasteTool.analize(content);
},
analize(content);
};
/**
* Analizes pated string and calls necessary method
*/
analize : function(string) {
var analize = function(string) {
pasteTool.patterns.map(function(pattern, i){
paste.patterns.map(function(pattern, i){
if (pattern.regex.test(string)) {
pattern.callback.call(null, string, pattern);
}
})
}
};
return paste;
}(paste || {});

24
plugins/paste/patterns.js
View file

@ -10,7 +10,9 @@
*
*/
pasteTool.patterns = [
var paste = paste || {};
paste.patterns = [
{
type: 'image',
regex: /(?:([^:\/?#]+):)?(?:\/\/([^\/?#]*))?([^?#]*\.(?:jpe?g|gif|png))(?:\?([^#]*))?(?:#(.*))?/i,
@ -56,11 +58,6 @@ pasteTool.patterns = [
regex: /https?:\/\/vine\.co\/v\/([^\/\?\&]+)/,
callback: embed.urlPastedCallback
},
{
type: 'vk',
regex: /https?:\/\/vk\.com\/.*(?:video)[-0-9]+_([0-9]+)/,
callback: embed.urlPastedCallback
},
{
type: 'imgur',
regex: /https?:\/\/(?:i\.)?imgur\.com.*\/([a-zA-Z0-9]+)(?:\.gifv)?/,
@ -81,5 +78,20 @@ pasteTool.patterns = [
regex: /https?:\/\/www.twitch.tv\/[^\/\?\&]*\/v\/([0-9]*)/,
callback: embed.urlPastedCallback
},
{
type: 'yandex-music-album',
regex: /https?:\/\/music.yandex.ru\/album\/([0-9]*)/,
callback: embed.urlPastedCallback
},
{
type: 'yandex-music-track',
regex: /https?:\/\/music.yandex.ru\/album\/([0-9]*)\/track\/([0-9]*)/,
callback: embed.urlPastedCallback
},
{
type: 'yandex-music-playlist',
regex: /https?:\/\/music.yandex.ru\/users\/([^\/\?\&]*)\/playlists\/([0-9]*)/,
callback: embed.urlPastedCallback
}
];