|
@@ -1,35 +1,37 @@
|
|
|
/*
|
|
|
* Youtube Embed Plugin
|
|
|
*
|
|
|
-* @author Jonnas Fonini <contato@fonini.net>
|
|
|
-* @version 2.0.0
|
|
|
+* @author Jonnas Fonini <jonnasfonini@gmail.com>
|
|
|
+* @version 2.1.8
|
|
|
*/
|
|
|
-( function() {
|
|
|
- CKEDITOR.plugins.add( 'youtube',
|
|
|
- {
|
|
|
- lang: [ 'en', 'pt', 'ja', 'hu', 'it', 'fr', 'tr', 'ru', 'de', 'ar', 'nl', 'pl', 'vi', 'zh', 'el'],
|
|
|
- init: function( editor )
|
|
|
- {
|
|
|
- editor.addCommand( 'youtube', new CKEDITOR.dialogCommand( 'youtube', {
|
|
|
- allowedContent: 'iframe[!width,!height,!src,!frameborder,!allowfullscreen]; object param[*]'
|
|
|
+(function () {
|
|
|
+ CKEDITOR.plugins.add('youtube', {
|
|
|
+ lang: [ 'en', 'pt', 'pt-br', 'ja', 'hu', 'it', 'fr', 'tr', 'ru', 'de', 'ar', 'nl', 'pl', 'vi', 'zh', 'el', 'he', 'es', 'nb', 'nn', 'fi', 'et', 'sk', 'cs', 'ko', 'eu' ],
|
|
|
+ init: function (editor) {
|
|
|
+ editor.addCommand('youtube', new CKEDITOR.dialogCommand('youtube', {
|
|
|
+ allowedContent: 'div{*}(*); iframe{*}[!width,!height,!src,!frameborder,!allowfullscreen]; object param[*]; a[*]; img[*]'
|
|
|
}));
|
|
|
|
|
|
- editor.ui.addButton( 'Youtube',
|
|
|
- {
|
|
|
+ editor.ui.addButton('Youtube', {
|
|
|
label : editor.lang.youtube.button,
|
|
|
toolbar : 'insert',
|
|
|
command : 'youtube',
|
|
|
icon : this.path + 'images/icon.png'
|
|
|
});
|
|
|
|
|
|
- CKEDITOR.dialog.add( 'youtube', function ( instance )
|
|
|
- {
|
|
|
- var video;
|
|
|
+ CKEDITOR.dialog.add('youtube', function (instance) {
|
|
|
+ var video,
|
|
|
+ disabled = editor.config.youtube_disabled_fields || [];
|
|
|
|
|
|
return {
|
|
|
title : editor.lang.youtube.title,
|
|
|
- minWidth : 500,
|
|
|
+ minWidth : 510,
|
|
|
minHeight : 200,
|
|
|
+ onShow: function () {
|
|
|
+ for (var i = 0; i < disabled.length; i++) {
|
|
|
+ this.getContentElement('youtubePlugin', disabled[i]).disable();
|
|
|
+ }
|
|
|
+ },
|
|
|
contents :
|
|
|
[{
|
|
|
id : 'youtubePlugin',
|
|
@@ -39,28 +41,21 @@
|
|
|
id : 'txtEmbed',
|
|
|
type : 'textarea',
|
|
|
label : editor.lang.youtube.txtEmbed,
|
|
|
- autofocus : 'autofocus',
|
|
|
- onChange : function ( api )
|
|
|
- {
|
|
|
- handleEmbedChange( this, api );
|
|
|
+ onChange : function (api) {
|
|
|
+ handleEmbedChange(this, api);
|
|
|
},
|
|
|
- onKeyUp : function ( api )
|
|
|
- {
|
|
|
- handleEmbedChange( this, api );
|
|
|
+ onKeyUp : function (api) {
|
|
|
+ handleEmbedChange(this, api);
|
|
|
},
|
|
|
- validate : function ()
|
|
|
- {
|
|
|
- if ( this.isEnabled() )
|
|
|
- {
|
|
|
- if ( !this.getValue() )
|
|
|
- {
|
|
|
- alert( editor.lang.youtube.noCode );
|
|
|
+ validate : function () {
|
|
|
+ if (this.isEnabled()) {
|
|
|
+ if (!this.getValue()) {
|
|
|
+ alert(editor.lang.youtube.noCode);
|
|
|
return false;
|
|
|
}
|
|
|
else
|
|
|
- if ( this.getValue().length === 0 || this.getValue().indexOf( '//' ) === -1 )
|
|
|
- {
|
|
|
- alert( editor.lang.youtube.invalidEmbed );
|
|
|
+ if (this.getValue().length === 0 || this.getValue().indexOf('//') === -1) {
|
|
|
+ alert(editor.lang.youtube.invalidEmbed);
|
|
|
return false;
|
|
|
}
|
|
|
}
|
|
@@ -79,29 +74,24 @@
|
|
|
id : 'txtUrl',
|
|
|
type : 'text',
|
|
|
label : editor.lang.youtube.txtUrl,
|
|
|
- onChange : function ( api )
|
|
|
- {
|
|
|
- handleLinkChange( this, api );
|
|
|
+ onChange : function (api) {
|
|
|
+ handleLinkChange(this, api);
|
|
|
},
|
|
|
- onKeyUp : function ( api )
|
|
|
- {
|
|
|
- handleLinkChange( this, api );
|
|
|
+ onKeyUp : function (api) {
|
|
|
+ handleLinkChange(this, api);
|
|
|
},
|
|
|
- validate : function ()
|
|
|
- {
|
|
|
- if ( this.isEnabled() )
|
|
|
- {
|
|
|
- if ( !this.getValue() )
|
|
|
- {
|
|
|
- alert( editor.lang.youtube.noCode );
|
|
|
+ validate : function () {
|
|
|
+ if (this.isEnabled()) {
|
|
|
+ if (!this.getValue()) {
|
|
|
+ alert(editor.lang.youtube.noCode);
|
|
|
return false;
|
|
|
}
|
|
|
else{
|
|
|
video = ytVidId(this.getValue());
|
|
|
|
|
|
- if ( this.getValue().length === 0 || video === false)
|
|
|
+ if (this.getValue().length === 0 || video === false)
|
|
|
{
|
|
|
- alert( editor.lang.youtube.invalidUrl );
|
|
|
+ alert(editor.lang.youtube.invalidUrl);
|
|
|
return false;
|
|
|
}
|
|
|
}
|
|
@@ -114,20 +104,17 @@
|
|
|
width : '60px',
|
|
|
label : editor.lang.youtube.txtWidth,
|
|
|
'default' : editor.config.youtube_width != null ? editor.config.youtube_width : '640',
|
|
|
- validate : function ()
|
|
|
- {
|
|
|
- if ( this.getValue() )
|
|
|
- {
|
|
|
- var width = parseInt ( this.getValue() ) || 0;
|
|
|
+ validate : function () {
|
|
|
+ if (this.getValue()) {
|
|
|
+ var width = parseInt (this.getValue()) || 0;
|
|
|
|
|
|
- if ( width === 0 )
|
|
|
- {
|
|
|
- alert( editor.lang.youtube.invalidWidth );
|
|
|
+ if (width === 0) {
|
|
|
+ alert(editor.lang.youtube.invalidWidth);
|
|
|
return false;
|
|
|
}
|
|
|
}
|
|
|
else {
|
|
|
- alert( editor.lang.youtube.noWidth );
|
|
|
+ alert(editor.lang.youtube.noWidth);
|
|
|
return false;
|
|
|
}
|
|
|
}
|
|
@@ -138,20 +125,17 @@
|
|
|
width : '60px',
|
|
|
label : editor.lang.youtube.txtHeight,
|
|
|
'default' : editor.config.youtube_height != null ? editor.config.youtube_height : '360',
|
|
|
- validate : function ()
|
|
|
- {
|
|
|
- if ( this.getValue() )
|
|
|
- {
|
|
|
- var height = parseInt ( this.getValue() ) || 0;
|
|
|
+ validate : function () {
|
|
|
+ if (this.getValue()) {
|
|
|
+ var height = parseInt(this.getValue()) || 0;
|
|
|
|
|
|
- if ( height === 0 )
|
|
|
- {
|
|
|
- alert( editor.lang.youtube.invalidHeight );
|
|
|
+ if (height === 0) {
|
|
|
+ alert(editor.lang.youtube.invalidHeight);
|
|
|
return false;
|
|
|
}
|
|
|
}
|
|
|
else {
|
|
|
- alert( editor.lang.youtube.noHeight );
|
|
|
+ alert(editor.lang.youtube.noHeight);
|
|
|
return false;
|
|
|
}
|
|
|
}
|
|
@@ -160,7 +144,7 @@
|
|
|
},
|
|
|
{
|
|
|
type : 'hbox',
|
|
|
- widths : [ '100%' ],
|
|
|
+ widths : [ '55%', '45%' ],
|
|
|
children :
|
|
|
[
|
|
|
{
|
|
@@ -168,6 +152,12 @@
|
|
|
type : 'checkbox',
|
|
|
label : editor.lang.youtube.txtResponsive,
|
|
|
'default' : editor.config.youtube_responsive != null ? editor.config.youtube_responsive : false
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id : 'chkNoEmbed',
|
|
|
+ type : 'checkbox',
|
|
|
+ label : editor.lang.youtube.txtNoEmbed,
|
|
|
+ 'default' : editor.config.youtube_noembed != null ? editor.config.youtube_noembed : false
|
|
|
}
|
|
|
]
|
|
|
},
|
|
@@ -218,24 +208,22 @@
|
|
|
id : 'txtStartAt',
|
|
|
type : 'text',
|
|
|
label : editor.lang.youtube.txtStartAt,
|
|
|
- validate : function ()
|
|
|
- {
|
|
|
- if ( this.getValue() )
|
|
|
- {
|
|
|
+ validate : function () {
|
|
|
+ if (this.getValue()) {
|
|
|
var str = this.getValue();
|
|
|
|
|
|
- if ( !/^(?:(?:([01]?\d|2[0-3]):)?([0-5]?\d):)?([0-5]?\d)$/i.test( str ) )
|
|
|
- {
|
|
|
- alert( editor.lang.youtube.invalidTime );
|
|
|
+ if (!/^(?:(?:([01]?\d|2[0-3]):)?([0-5]?\d):)?([0-5]?\d)$/i.test(str)) {
|
|
|
+ alert(editor.lang.youtube.invalidTime);
|
|
|
return false;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
{
|
|
|
- id: 'empty',
|
|
|
- type: 'html',
|
|
|
- html: ''
|
|
|
+ id : 'chkControls',
|
|
|
+ type : 'checkbox',
|
|
|
+ 'default' : editor.config.youtube_controls != null ? editor.config.youtube_controls : true,
|
|
|
+ label : editor.lang.youtube.chkControls
|
|
|
}
|
|
|
]
|
|
|
}
|
|
@@ -245,19 +233,17 @@
|
|
|
onOk: function()
|
|
|
{
|
|
|
var content = '';
|
|
|
- var responsiveStyle='';
|
|
|
+ var responsiveStyle = '';
|
|
|
|
|
|
- if ( this.getContentElement( 'youtubePlugin', 'txtEmbed' ).isEnabled() )
|
|
|
- {
|
|
|
- content = this.getValueOf( 'youtubePlugin', 'txtEmbed' );
|
|
|
+ if (this.getContentElement('youtubePlugin', 'txtEmbed').isEnabled()) {
|
|
|
+ content = this.getValueOf('youtubePlugin', 'txtEmbed');
|
|
|
}
|
|
|
else {
|
|
|
- var url = '//', params = [], startSecs;
|
|
|
- var width = this.getValueOf( 'youtubePlugin', 'txtWidth' );
|
|
|
- var height = this.getValueOf( 'youtubePlugin', 'txtHeight' );
|
|
|
+ var url = 'https://', params = [], startSecs;
|
|
|
+ var width = this.getValueOf('youtubePlugin', 'txtWidth');
|
|
|
+ var height = this.getValueOf('youtubePlugin', 'txtHeight');
|
|
|
|
|
|
- if ( this.getContentElement( 'youtubePlugin', 'chkPrivacy' ).getValue() === true )
|
|
|
- {
|
|
|
+ if (this.getContentElement('youtubePlugin', 'chkPrivacy').getValue() === true) {
|
|
|
url += 'www.youtube-nocookie.com/';
|
|
|
}
|
|
|
else {
|
|
@@ -266,40 +252,40 @@
|
|
|
|
|
|
url += 'embed/' + video;
|
|
|
|
|
|
- if ( this.getContentElement( 'youtubePlugin', 'chkRelated' ).getValue() === false )
|
|
|
- {
|
|
|
+ if (this.getContentElement('youtubePlugin', 'chkRelated').getValue() === false) {
|
|
|
params.push('rel=0');
|
|
|
}
|
|
|
|
|
|
- if ( this.getContentElement( 'youtubePlugin', 'chkAutoplay' ).getValue() === true )
|
|
|
- {
|
|
|
+ if (this.getContentElement('youtubePlugin', 'chkAutoplay').getValue() === true) {
|
|
|
params.push('autoplay=1');
|
|
|
}
|
|
|
|
|
|
- startSecs = this.getValueOf( 'youtubePlugin', 'txtStartAt' );
|
|
|
- if ( startSecs ){
|
|
|
- var seconds = hmsToSeconds( startSecs );
|
|
|
+ if (this.getContentElement('youtubePlugin', 'chkControls').getValue() === false) {
|
|
|
+ params.push('controls=0');
|
|
|
+ }
|
|
|
+
|
|
|
+ startSecs = this.getValueOf('youtubePlugin', 'txtStartAt');
|
|
|
+
|
|
|
+ if (startSecs) {
|
|
|
+ var seconds = hmsToSeconds(startSecs);
|
|
|
|
|
|
params.push('start=' + seconds);
|
|
|
}
|
|
|
|
|
|
- if ( params.length > 0 )
|
|
|
- {
|
|
|
- url = url + '?' + params.join( '&' );
|
|
|
+ if (params.length > 0) {
|
|
|
+ url = url + '?' + params.join('&');
|
|
|
}
|
|
|
|
|
|
- if ( this.getContentElement( 'youtubePlugin', 'chkResponsive').getValue() === true ) {
|
|
|
- content += '<div style="position:relative;padding-bottom:56.25%;padding-top:30px;height:0;overflow:hidden;">';
|
|
|
- responsiveStyle = 'style="position: absolute;top: 0;left: 0;width: 100%;height: 100%;"';
|
|
|
+ if (this.getContentElement('youtubePlugin', 'chkResponsive').getValue() === true) {
|
|
|
+ content += '<div class="youtube-embed-wrapper" style="position:relative;padding-bottom:56.25%;padding-top:30px;height:0;overflow:hidden">';
|
|
|
+ responsiveStyle = 'style="position:absolute;top:0;left:0;width:100%;height:100%"';
|
|
|
}
|
|
|
|
|
|
- if ( this.getContentElement( 'youtubePlugin', 'chkOlderCode' ).getValue() === true )
|
|
|
- {
|
|
|
+ if (this.getContentElement('youtubePlugin', 'chkOlderCode').getValue() === true) {
|
|
|
url = url.replace('embed/', 'v/');
|
|
|
url = url.replace(/&/g, '&');
|
|
|
|
|
|
- if ( url.indexOf('?') === -1 )
|
|
|
- {
|
|
|
+ if (url.indexOf('?') === -1) {
|
|
|
url += '?';
|
|
|
}
|
|
|
else {
|
|
@@ -316,17 +302,22 @@
|
|
|
content += 'allowfullscreen="true"></embed>';
|
|
|
content += '</object>';
|
|
|
}
|
|
|
+ else
|
|
|
+ if (this.getContentElement('youtubePlugin', 'chkNoEmbed').getValue() === true) {
|
|
|
+ var imgSrc = '//img.youtube.com/vi/' + video + '/sddefault.jpg';
|
|
|
+ content += '<a href="' + url + '" ><img width="' + width + '" height="' + height + '" src="' + imgSrc + '" ' + responsiveStyle + '/></a>';
|
|
|
+ }
|
|
|
else {
|
|
|
content += '<iframe width="' + width + '" height="' + height + '" src="' + url + '" ' + responsiveStyle;
|
|
|
content += 'frameborder="0" allowfullscreen></iframe>';
|
|
|
}
|
|
|
|
|
|
- if ( this.getContentElement( 'youtubePlugin', 'chkResponsive').getValue() === true ) {
|
|
|
+ if (this.getContentElement('youtubePlugin', 'chkResponsive').getValue() === true) {
|
|
|
content += '</div>';
|
|
|
}
|
|
|
}
|
|
|
-
|
|
|
- var element = CKEDITOR.dom.element.createFromHtml( content );
|
|
|
+
|
|
|
+ var element = CKEDITOR.dom.element.createFromHtml(content);
|
|
|
var instance = this.getParentEditor();
|
|
|
instance.insertElement(element);
|
|
|
}
|
|
@@ -336,25 +327,30 @@
|
|
|
});
|
|
|
})();
|
|
|
|
|
|
-function handleLinkChange( el, api )
|
|
|
-{
|
|
|
- if ( el.getValue().length > 0 )
|
|
|
- {
|
|
|
- el.getDialog().getContentElement( 'youtubePlugin', 'txtEmbed' ).disable();
|
|
|
+function handleLinkChange(el, api) {
|
|
|
+ var video = ytVidId(el.getValue());
|
|
|
+ var time = ytVidTime(el.getValue());
|
|
|
+
|
|
|
+ if (el.getValue().length > 0) {
|
|
|
+ el.getDialog().getContentElement('youtubePlugin', 'txtEmbed').disable();
|
|
|
}
|
|
|
else {
|
|
|
- el.getDialog().getContentElement( 'youtubePlugin', 'txtEmbed' ).enable();
|
|
|
+ el.getDialog().getContentElement('youtubePlugin', 'txtEmbed').enable();
|
|
|
+ }
|
|
|
+
|
|
|
+ if (video && time) {
|
|
|
+ var seconds = timeParamToSeconds(time);
|
|
|
+ var hms = secondsToHms(seconds);
|
|
|
+ el.getDialog().getContentElement('youtubePlugin', 'txtStartAt').setValue(hms);
|
|
|
}
|
|
|
}
|
|
|
|
|
|
-function handleEmbedChange( el, api )
|
|
|
-{
|
|
|
- if ( el.getValue().length > 0 )
|
|
|
- {
|
|
|
- el.getDialog().getContentElement( 'youtubePlugin', 'txtUrl' ).disable();
|
|
|
+function handleEmbedChange(el, api) {
|
|
|
+ if (el.getValue().length > 0) {
|
|
|
+ el.getDialog().getContentElement('youtubePlugin', 'txtUrl').disable();
|
|
|
}
|
|
|
else {
|
|
|
- el.getDialog().getContentElement( 'youtubePlugin', 'txtUrl' ).enable();
|
|
|
+ el.getDialog().getContentElement('youtubePlugin', 'txtUrl').enable();
|
|
|
}
|
|
|
}
|
|
|
|
|
@@ -365,24 +361,88 @@ function handleEmbedChange( el, api )
|
|
|
* @author: Stephan Schmitz <eyecatchup@gmail.com>
|
|
|
* @url: http://stackoverflow.com/a/10315969/624466
|
|
|
*/
|
|
|
-function ytVidId( url )
|
|
|
-{
|
|
|
+function ytVidId(url) {
|
|
|
var p = /^(?:https?:\/\/)?(?:www\.)?(?:youtu\.be\/|youtube\.com\/(?:embed\/|v\/|watch\?v=|watch\?.+&v=))((\w|-){11})(?:\S+)?$/;
|
|
|
- return ( url.match( p ) ) ? RegExp.$1 : false;
|
|
|
+ return (url.match(p)) ? RegExp.$1 : false;
|
|
|
+}
|
|
|
+
|
|
|
+/**
|
|
|
+ * Matches and returns time param in YouTube Urls.
|
|
|
+ */
|
|
|
+function ytVidTime(url) {
|
|
|
+ var p = /t=([0-9hms]+)/;
|
|
|
+ return (url.match(p)) ? RegExp.$1 : false;
|
|
|
}
|
|
|
|
|
|
/**
|
|
|
* Converts time in hms format to seconds only
|
|
|
*/
|
|
|
-function hmsToSeconds( time )
|
|
|
-{
|
|
|
+function hmsToSeconds(time) {
|
|
|
var arr = time.split(':'), s = 0, m = 1;
|
|
|
|
|
|
- while (arr.length > 0)
|
|
|
- {
|
|
|
+ while (arr.length > 0) {
|
|
|
s += m * parseInt(arr.pop(), 10);
|
|
|
m *= 60;
|
|
|
}
|
|
|
|
|
|
return s;
|
|
|
}
|
|
|
+
|
|
|
+/**
|
|
|
+ * Converts seconds to hms format
|
|
|
+ */
|
|
|
+function secondsToHms(seconds) {
|
|
|
+ var h = Math.floor(seconds / 3600);
|
|
|
+ var m = Math.floor((seconds / 60) % 60);
|
|
|
+ var s = seconds % 60;
|
|
|
+
|
|
|
+ var pad = function (n) {
|
|
|
+ n = String(n);
|
|
|
+ return n.length >= 2 ? n : "0" + n;
|
|
|
+ };
|
|
|
+
|
|
|
+ if (h > 0) {
|
|
|
+ return pad(h) + ':' + pad(m) + ':' + pad(s);
|
|
|
+ }
|
|
|
+ else {
|
|
|
+ return pad(m) + ':' + pad(s);
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+/**
|
|
|
+ * Converts time in youtube t-param format to seconds
|
|
|
+ */
|
|
|
+function timeParamToSeconds(param) {
|
|
|
+ var componentValue = function (si) {
|
|
|
+ var regex = new RegExp('(\\d+)' + si);
|
|
|
+ return param.match(regex) ? parseInt(RegExp.$1, 10) : 0;
|
|
|
+ };
|
|
|
+
|
|
|
+ return componentValue('h') * 3600
|
|
|
+ + componentValue('m') * 60
|
|
|
+ + componentValue('s');
|
|
|
+}
|
|
|
+
|
|
|
+/**
|
|
|
+ * Converts seconds into youtube t-param value, e.g. 1h4m30s
|
|
|
+ */
|
|
|
+function secondsToTimeParam(seconds) {
|
|
|
+ var h = Math.floor(seconds / 3600);
|
|
|
+ var m = Math.floor((seconds / 60) % 60);
|
|
|
+ var s = seconds % 60;
|
|
|
+ var param = '';
|
|
|
+
|
|
|
+ if (h > 0) {
|
|
|
+ param += h + 'h';
|
|
|
+ }
|
|
|
+
|
|
|
+ if (m > 0) {
|
|
|
+ param += m + 'm';
|
|
|
+ }
|
|
|
+
|
|
|
+ if (s > 0) {
|
|
|
+ param += s + 's';
|
|
|
+ }
|
|
|
+
|
|
|
+ return param;
|
|
|
+}
|