|
@@ -1,9 +1,9 @@ |
|
|
CKEDITOR.plugins.add( 'html5video', { |
|
|
|
|
|
|
|
|
CKEDITOR.plugins.add('html5video', { |
|
|
requires: 'widget', |
|
|
requires: 'widget', |
|
|
lang: 'bg,ca,de,en,eu,es,ru,uk,fr,ko,pt,pt-br,pl', |
|
|
|
|
|
|
|
|
lang: 'bg,ca,de,en,eu,es,ru,uk,fr,ko,pt,pt-br,pl,zh,zh-cn', |
|
|
icons: 'html5video', |
|
|
icons: 'html5video', |
|
|
init: function( editor ) { |
|
|
|
|
|
editor.widgets.add( 'html5video', { |
|
|
|
|
|
|
|
|
init: function (editor) { |
|
|
|
|
|
editor.widgets.add('html5video', { |
|
|
button: editor.lang.html5video.button, |
|
|
button: editor.lang.html5video.button, |
|
|
template: '<div class="ckeditor-html5-video"></div>', |
|
|
template: '<div class="ckeditor-html5-video"></div>', |
|
|
/* |
|
|
/* |
|
@@ -13,154 +13,154 @@ CKEDITOR.plugins.add( 'html5video', { |
|
|
*/ |
|
|
*/ |
|
|
allowedContent: 'div[data-responsive](!ckeditor-html5-video){text-align,float,margin-left,margin-right}; video[src,poster,controls,autoplay,width, height,loop]{max-width,height};', |
|
|
allowedContent: 'div[data-responsive](!ckeditor-html5-video){text-align,float,margin-left,margin-right}; video[src,poster,controls,autoplay,width, height,loop]{max-width,height};', |
|
|
requiredContent: 'div(ckeditor-html5-video); video[src];', |
|
|
requiredContent: 'div(ckeditor-html5-video); video[src];', |
|
|
upcast: function( element ) { |
|
|
|
|
|
return element.name === 'div' && element.hasClass( 'ckeditor-html5-video' ); |
|
|
|
|
|
|
|
|
upcast: function (element) { |
|
|
|
|
|
return element.name === 'div' && element.hasClass('ckeditor-html5-video'); |
|
|
}, |
|
|
}, |
|
|
dialog: 'html5video', |
|
|
dialog: 'html5video', |
|
|
init: function() { |
|
|
|
|
|
|
|
|
init: function () { |
|
|
var src = ''; |
|
|
var src = ''; |
|
|
var autoplay = ''; |
|
|
var autoplay = ''; |
|
|
var loop = ''; |
|
|
var loop = ''; |
|
|
var controls = ''; |
|
|
var controls = ''; |
|
|
var align = this.element.getStyle( 'text-align' ); |
|
|
|
|
|
|
|
|
var align = this.element.getStyle('text-align'); |
|
|
|
|
|
|
|
|
var width = ''; |
|
|
var width = ''; |
|
|
var height = ''; |
|
|
var height = ''; |
|
|
var poster = ''; |
|
|
var poster = ''; |
|
|
|
|
|
|
|
|
// If there's a child (the video element) |
|
|
// If there's a child (the video element) |
|
|
if ( this.element.getChild( 0 ) ) { |
|
|
|
|
|
|
|
|
if (this.element.getChild(0)) { |
|
|
// get it's attributes. |
|
|
// get it's attributes. |
|
|
src = this.element.getChild( 0 ).getAttribute( 'src' ); |
|
|
|
|
|
width = this.element.getChild( 0 ).getAttribute( 'width' ); |
|
|
|
|
|
height = this.element.getChild( 0 ).getAttribute( 'height' ); |
|
|
|
|
|
|
|
|
src = this.element.getChild(0).getAttribute('src'); |
|
|
|
|
|
width = this.element.getChild(0).getAttribute('width'); |
|
|
|
|
|
height = this.element.getChild(0).getAttribute('height'); |
|
|
autoplay = this.element.getChild(0).getAttribute('autoplay'); |
|
|
autoplay = this.element.getChild(0).getAttribute('autoplay'); |
|
|
allowdownload = !this.element.getChild( 0 ).getAttribute( 'controlslist' ); |
|
|
|
|
|
loop = this.element.getChild( 0 ).getAttribute( 'loop' ); |
|
|
|
|
|
advisorytitle = this.element.getChild( 0 ).getAttribute( 'title' ); |
|
|
|
|
|
|
|
|
allowdownload = !this.element.getChild(0).getAttribute('controlslist'); |
|
|
|
|
|
loop = this.element.getChild(0).getAttribute('loop'); |
|
|
|
|
|
advisorytitle = this.element.getChild(0).getAttribute('title'); |
|
|
controls = this.element.getChild(0).getAttribute('controls'); |
|
|
controls = this.element.getChild(0).getAttribute('controls'); |
|
|
responsive = this.element.getAttribute( 'data-responsive' ); |
|
|
|
|
|
poster = this.element.getChild( 0 ).getAttribute( 'poster' ); |
|
|
|
|
|
|
|
|
responsive = this.element.getAttribute('data-responsive'); |
|
|
|
|
|
poster = this.element.getChild(0).getAttribute('poster'); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
if ( src ) { |
|
|
|
|
|
this.setData( 'src', src ); |
|
|
|
|
|
|
|
|
if (src) { |
|
|
|
|
|
this.setData('src', src); |
|
|
|
|
|
|
|
|
if ( align ) { |
|
|
|
|
|
this.setData( 'align', align ); |
|
|
|
|
|
|
|
|
if (align) { |
|
|
|
|
|
this.setData('align', align); |
|
|
} else { |
|
|
} else { |
|
|
this.setData( 'align', 'none' ); |
|
|
|
|
|
|
|
|
this.setData('align', 'none'); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
if ( width ) { |
|
|
|
|
|
this.setData( 'width', width ); |
|
|
|
|
|
|
|
|
if (width) { |
|
|
|
|
|
this.setData('width', width); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
if ( height ) { |
|
|
|
|
|
this.setData( 'height', height ); |
|
|
|
|
|
|
|
|
if (height) { |
|
|
|
|
|
this.setData('height', height); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
if ( autoplay ) { |
|
|
|
|
|
this.setData( 'autoplay', 'yes' ); |
|
|
|
|
|
|
|
|
if (autoplay) { |
|
|
|
|
|
this.setData('autoplay', 'yes'); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
if ( allowdownload ) { |
|
|
|
|
|
this.setData( 'allowdownload', 'yes' ); |
|
|
|
|
|
|
|
|
if (allowdownload) { |
|
|
|
|
|
this.setData('allowdownload', 'yes'); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
if ( loop ) { |
|
|
|
|
|
this.setData( 'loop', 'yes' ); |
|
|
|
|
|
|
|
|
if (loop) { |
|
|
|
|
|
this.setData('loop', 'yes'); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
if ( advisorytitle ) { |
|
|
|
|
|
this.setData( 'advisorytitle', advisorytitle ); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
if (advisorytitle) { |
|
|
|
|
|
this.setData('advisorytitle', advisorytitle); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
if ( responsive ) { |
|
|
|
|
|
this.setData( 'responsive', responsive ); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
if (responsive) { |
|
|
|
|
|
this.setData('responsive', responsive); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
if (controls) { |
|
|
if (controls) { |
|
|
this.setData('controls', controls); |
|
|
this.setData('controls', controls); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
if ( poster ) { |
|
|
|
|
|
|
|
|
if (poster) { |
|
|
this.setData('poster', poster); |
|
|
this.setData('poster', poster); |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
}, |
|
|
}, |
|
|
data: function() { |
|
|
|
|
|
|
|
|
data: function () { |
|
|
// If there is an video source |
|
|
// If there is an video source |
|
|
if ( this.data.src ) { |
|
|
|
|
|
|
|
|
if (this.data.src) { |
|
|
// and there isn't a child (the video element) |
|
|
// and there isn't a child (the video element) |
|
|
if ( !this.element.getChild( 0 ) ) { |
|
|
|
|
|
|
|
|
if (!this.element.getChild(0)) { |
|
|
// Create a new <video> element. |
|
|
// Create a new <video> element. |
|
|
var videoElement = new CKEDITOR.dom.element( 'video' ); |
|
|
|
|
|
|
|
|
var videoElement = new CKEDITOR.dom.element('video'); |
|
|
// Set the controls attribute. |
|
|
// Set the controls attribute. |
|
|
if (this.data.controls) { |
|
|
if (this.data.controls) { |
|
|
videoElement.setAttribute('controls', 'controls'); |
|
|
videoElement.setAttribute('controls', 'controls'); |
|
|
} |
|
|
} |
|
|
// Append it to the container of the plugin. |
|
|
// Append it to the container of the plugin. |
|
|
this.element.append( videoElement ); |
|
|
|
|
|
|
|
|
this.element.append(videoElement); |
|
|
} |
|
|
} |
|
|
this.element.getChild( 0 ).setAttribute( 'src', this.data.src ); |
|
|
|
|
|
if (this.data.width) this.element.getChild( 0 ).setAttribute( 'width', this.data.width ); |
|
|
|
|
|
if (this.data.height) this.element.getChild( 0 ).setAttribute( 'height', this.data.height ); |
|
|
|
|
|
|
|
|
this.element.getChild(0).setAttribute('src', this.data.src); |
|
|
|
|
|
if (this.data.width) this.element.getChild(0).setAttribute('width', this.data.width); |
|
|
|
|
|
if (this.data.height) this.element.getChild(0).setAttribute('height', this.data.height); |
|
|
|
|
|
|
|
|
if ( this.data.responsive ) { |
|
|
|
|
|
this.element.setAttribute("data-responsive", this.data.responsive); |
|
|
|
|
|
this.element.getChild( 0 ).setStyle( 'max-width', '100%' ); |
|
|
|
|
|
this.element.getChild( 0 ).setStyle( 'height', 'auto' ); |
|
|
|
|
|
|
|
|
if (this.data.responsive) { |
|
|
|
|
|
this.element.setAttribute("data-responsive", this.data.responsive); |
|
|
|
|
|
this.element.getChild(0).setStyle('max-width', '100%'); |
|
|
|
|
|
this.element.getChild(0).setStyle('height', 'auto'); |
|
|
} else { |
|
|
} else { |
|
|
this.element.removeAttribute("data-responsive"); |
|
|
|
|
|
this.element.getChild( 0 ).removeStyle( 'max-width' ); |
|
|
|
|
|
this.element.getChild( 0 ).removeStyle( 'height' ); |
|
|
|
|
|
|
|
|
this.element.removeAttribute("data-responsive"); |
|
|
|
|
|
this.element.getChild(0).removeStyle('max-width'); |
|
|
|
|
|
this.element.getChild(0).removeStyle('height'); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
if (this.data.poster) this.element.getChild( 0 ).setAttribute('poster', this.data.poster); |
|
|
|
|
|
|
|
|
if (this.data.poster) this.element.getChild(0).setAttribute('poster', this.data.poster); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
this.element.removeStyle( 'float' ); |
|
|
|
|
|
this.element.removeStyle( 'margin-left' ); |
|
|
|
|
|
this.element.removeStyle( 'margin-right' ); |
|
|
|
|
|
|
|
|
this.element.removeStyle('float'); |
|
|
|
|
|
this.element.removeStyle('margin-left'); |
|
|
|
|
|
this.element.removeStyle('margin-right'); |
|
|
|
|
|
|
|
|
if ( this.data.align === 'none' ) { |
|
|
|
|
|
this.element.removeStyle( 'text-align' ); |
|
|
|
|
|
|
|
|
if (this.data.align === 'none') { |
|
|
|
|
|
this.element.removeStyle('text-align'); |
|
|
} else { |
|
|
} else { |
|
|
this.element.setStyle( 'text-align', this.data.align ); |
|
|
|
|
|
|
|
|
this.element.setStyle('text-align', this.data.align); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
if ( this.data.align === 'left' ) { |
|
|
|
|
|
this.element.setStyle( 'float', this.data.align ); |
|
|
|
|
|
this.element.setStyle( 'margin-right', '10px' ); |
|
|
|
|
|
} else if ( this.data.align === 'right' ) { |
|
|
|
|
|
this.element.setStyle( 'float', this.data.align ); |
|
|
|
|
|
this.element.setStyle( 'margin-left', '10px' ); |
|
|
|
|
|
|
|
|
if (this.data.align === 'left') { |
|
|
|
|
|
this.element.setStyle('float', this.data.align); |
|
|
|
|
|
this.element.setStyle('margin-right', '10px'); |
|
|
|
|
|
} else if (this.data.align === 'right') { |
|
|
|
|
|
this.element.setStyle('float', this.data.align); |
|
|
|
|
|
this.element.setStyle('margin-left', '10px'); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
if ( this.element.getChild( 0 ) ) { |
|
|
|
|
|
if ( this.data.autoplay === 'yes' ) { |
|
|
|
|
|
this.element.getChild( 0 ).setAttribute( 'autoplay', 'autoplay' ); |
|
|
|
|
|
|
|
|
if (this.element.getChild(0)) { |
|
|
|
|
|
if (this.data.autoplay === 'yes') { |
|
|
|
|
|
this.element.getChild(0).setAttribute('autoplay', 'autoplay'); |
|
|
} else { |
|
|
} else { |
|
|
this.element.getChild( 0 ).removeAttribute( 'autoplay' ); |
|
|
|
|
|
|
|
|
this.element.getChild(0).removeAttribute('autoplay'); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
if ( this.data.loop === 'yes' ) { |
|
|
|
|
|
this.element.getChild( 0 ).setAttribute( 'loop', 'loop' ); |
|
|
|
|
|
|
|
|
if (this.data.loop === 'yes') { |
|
|
|
|
|
this.element.getChild(0).setAttribute('loop', 'loop'); |
|
|
} else { |
|
|
} else { |
|
|
this.element.getChild( 0 ).removeAttribute( 'loop' ); |
|
|
|
|
|
|
|
|
this.element.getChild(0).removeAttribute('loop'); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
if ( this.data.allowdownload === 'yes' ) { |
|
|
|
|
|
this.element.getChild( 0 ).removeAttribute( 'controlslist' ); |
|
|
|
|
|
|
|
|
if (this.data.allowdownload === 'yes') { |
|
|
|
|
|
this.element.getChild(0).removeAttribute('controlslist'); |
|
|
} else { |
|
|
} else { |
|
|
this.element.getChild( 0 ).setAttribute( 'controlslist', 'nodownload' ); |
|
|
|
|
|
|
|
|
this.element.getChild(0).setAttribute('controlslist', 'nodownload'); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
if ( this.data.advisorytitle ) { |
|
|
|
|
|
this.element.getChild( 0 ).setAttribute( 'title', this.data.advisorytitle ); |
|
|
|
|
|
|
|
|
if (this.data.advisorytitle) { |
|
|
|
|
|
this.element.getChild(0).setAttribute('title', this.data.advisorytitle); |
|
|
} else { |
|
|
} else { |
|
|
this.element.getChild( 0 ).removeAttribute( 'title' ); |
|
|
|
|
|
|
|
|
this.element.getChild(0).removeAttribute('title'); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
if (this.data.controls) { |
|
|
if (this.data.controls) { |
|
@@ -170,27 +170,27 @@ CKEDITOR.plugins.add( 'html5video', { |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
} ); |
|
|
|
|
|
|
|
|
}); |
|
|
|
|
|
|
|
|
if ( editor.contextMenu ) { |
|
|
|
|
|
editor.addMenuGroup( 'html5videoGroup' ); |
|
|
|
|
|
editor.addMenuItem( 'html5videoPropertiesItem', { |
|
|
|
|
|
|
|
|
if (editor.contextMenu) { |
|
|
|
|
|
editor.addMenuGroup('html5videoGroup'); |
|
|
|
|
|
editor.addMenuItem('html5videoPropertiesItem', { |
|
|
label: editor.lang.html5video.videoProperties, |
|
|
label: editor.lang.html5video.videoProperties, |
|
|
icon: 'html5video', |
|
|
icon: 'html5video', |
|
|
command: 'html5video', |
|
|
command: 'html5video', |
|
|
group: 'html5videoGroup' |
|
|
group: 'html5videoGroup' |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
editor.contextMenu.addListener( function( element ) { |
|
|
|
|
|
if ( element && |
|
|
|
|
|
element.getChild( 0 ) && |
|
|
|
|
|
element.getChild( 0 ).hasClass && |
|
|
|
|
|
element.getChild( 0 ).hasClass( 'ckeditor-html5-video' ) ) { |
|
|
|
|
|
|
|
|
editor.contextMenu.addListener(function (element) { |
|
|
|
|
|
if (element && |
|
|
|
|
|
element.getChild(0) && |
|
|
|
|
|
element.getChild(0).hasClass && |
|
|
|
|
|
element.getChild(0).hasClass('ckeditor-html5-video')) { |
|
|
return { html5videoPropertiesItem: CKEDITOR.TRISTATE_OFF }; |
|
|
return { html5videoPropertiesItem: CKEDITOR.TRISTATE_OFF }; |
|
|
} |
|
|
} |
|
|
}); |
|
|
}); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
CKEDITOR.dialog.add( 'html5video', this.path + 'dialogs/html5video.js' ); |
|
|
|
|
|
|
|
|
CKEDITOR.dialog.add('html5video', this.path + 'dialogs/html5video.js'); |
|
|
} |
|
|
} |
|
|
} ); |
|
|
|
|
|
|
|
|
}); |