qms-angular 1.1.42 → 1.1.43

package/src/assets/qms-ckeditor-plugin/src/plugins/video/theme/video.css

@@ -1,17 +1,17 @@
-.ck-content .video {
-    display: table;
-    clear: both;
-    text-align: center;
-    margin: 1em auto;
-
-    & video {
-        display: block;
-        margin: 0 auto;
-        min-width: 50px;
-        width: 100%;
-    }
-}
-
-.ck.ck-editor__editable .video > figcaption.ck-placeholder::before {
-    position: static;
-}
+.ck-content .video {
+    display: table;
+    clear: both;
+    text-align: center;
+    margin: 1em auto;
+
+    & video {
+        display: block;
+        margin: 0 auto;
+        min-width: 50px;
+    }
+}
+
+.ck.ck-editor__editable .video > figcaption.ck-placeholder::before {
+    position: static;
+}
+

package/src/assets/qms-ckeditor-plugin/src/plugins/video/theme/videoresize.css

@@ -1,32 +1,33 @@
-.ck-content .video.video_resized {
-    max-width: 100%;
-    /*
-    The `<figure>` element for resized videos must not use `display:table` as browsers do not support `max-width` for it well.
-    See https://stackoverflow.com/questions/4019604/chrome-safari-ignoring-max-width-in-table/14420691#14420691 for more.
-    Fortunately, since we control the width, there is no risk that the video will look bad.
-    */
-    display: block;
-    box-sizing: border-box;
-
-    & video {
-          /* For resized videos it is the `<figure>` element that determines the video width. */
-          width: 100%;
-      }
-
-    & > figcaption {
-          /* The `<figure>` element uses `display:block`, so `<figcaption>` also has to. */
-          display: block;
-      }
-}
-
-[dir="ltr"] .ck.ck-button.ck-button_with-text.ck-resize-video-button .ck-button__icon {
-    margin-right: var(--ck-spacing-standard);
-}
-
-[dir="rtl"] .ck.ck-button.ck-button_with-text.ck-resize-video-button .ck-button__icon {
-    margin-left: var(--ck-spacing-standard);
-}
-
-.ck.ck-dropdown .ck-button.ck-resize-video-button .ck-button__label {
-    width: 4em;
-}
+.ck-content .video.video_resized {
+    max-width: 100%;
+    /*
+    The `<figure>` element for resized videos must not use `display:table` as browsers do not support `max-width` for it well.
+    See https://stackoverflow.com/questions/4019604/chrome-safari-ignoring-max-width-in-table/14420691#14420691 for more.
+    Fortunately, since we control the width, there is no risk that the video will look bad.
+    */
+    display: block;
+    box-sizing: border-box;
+
+    & video {
+          /* For resized videos it is the `<figure>` element that determines the video width. */
+          width: 100%;
+          height: 100%;
+      }
+
+    & > figcaption {
+          /* The `<figure>` element uses `display:block`, so `<figcaption>` also has to. */
+          display: block;
+      }
+}
+
+[dir="ltr"] .ck.ck-button.ck-button_with-text.ck-resize-video-button .ck-button__icon {
+    margin-right: var(--ck-spacing-standard);
+}
+
+[dir="rtl"] .ck.ck-button.ck-button_with-text.ck-resize-video-button .ck-button__icon {
+    margin-left: var(--ck-spacing-standard);
+}
+
+.ck.ck-dropdown .ck-button.ck-resize-video-button .ck-button__label {
+    width: 4em;
+}

package/src/assets/qms-ckeditor-plugin/src/plugins/video/video/videoediting.js

@@ -1,75 +1,81 @@
-import { Plugin } from 'ckeditor5/src/core';
-import VideoLoadObserver from './videoloadobserver';
-
-import {
-	viewFigureToModel,
-	modelToViewAttributeConverter
-} from './converters';
-
-import { toVideoWidget } from './utils';
-
-import InsertVideoCommand from './insertvideocommand';
-
-export default class VideoEditing extends Plugin {
-	static get pluginName() {
-		return 'VideoEditing';
-	}
-
-	init() {
-		const editor = this.editor;
-		const schema = editor.model.schema;
-		const t = editor.t;
-		const conversion = editor.conversion;
-
-		editor.editing.view.addObserver( VideoLoadObserver );
-
-		// Configure schema.
-		schema.register( 'video', {
-			isObject: true,
-			isBlock: true,
-			allowWhere: '$block',
-			allowAttributes: [ 'src', 'controls', 'poster' ]
-		} );
-
-		conversion.for( 'dataDowncast' ).elementToElement( {
-			model: 'video',
-			view: ( modelElement, { writer } ) => createVideoViewElement( writer )
-		} );
-
-		conversion.for( 'editingDowncast' ).elementToElement( {
-			model: 'video',
-			view: ( modelElement, { writer } ) => toVideoWidget( createVideoViewElement( writer ), writer, t( 'video widget' ) )
-		} );
-
-    	conversion.for( 'downcast' ).add( modelToViewAttributeConverter( 'controls' ) );
-		conversion.for( 'downcast' ).add( modelToViewAttributeConverter( 'src' ) );
-		conversion.for( 'downcast' ).add( modelToViewAttributeConverter( 'poster' ) );
-
-		conversion.for( 'upcast' )
-			.elementToElement( {
-				view: {
-					name: 'video',
-					attributes: {
-						src: true
-					}
-				},
-				model: ( viewVideo, { writer } ) => writer.createElement( 'video', {
-          src: viewVideo.getAttribute( 'src' )
-        } )
-			} )
-			.add( viewFigureToModel() );
-
-		const insertVideoCommand = new InsertVideoCommand( editor );
-		editor.commands.add( 'insertImage', insertVideoCommand );
-		editor.commands.add( 'videoInsert', insertVideoCommand );
-	}
-}
-
-export function createVideoViewElement( writer ) {
-	const emptyElement = writer.createEmptyElement( 'video' );
-	const figure = writer.createContainerElement( 'figure', { class: 'video' } );
-
-	writer.insert( writer.createPositionAt( figure, 0 ), emptyElement );
-
-	return figure;
-}
+import { Plugin } from 'ckeditor5/src/core';
+import VideoLoadObserver from './videoloadobserver';
+
+import {
+	viewFigureToModel,
+	modelToViewAttributeConverter
+} from './converters';
+
+import { toVideoWidget } from './utils';
+
+import InsertVideoCommand from './insertvideocommand';
+
+export default class VideoEditing extends Plugin {
+	static get pluginName() {
+		return 'VideoEditing';
+	}
+
+	init() {
+		const editor = this.editor;
+		const schema = editor.model.schema;
+		const t = editor.t;
+		const conversion = editor.conversion;
+
+		editor.editing.view.addObserver( VideoLoadObserver );
+
+		// Configure schema.
+		schema.register( 'video', {
+			isObject: true,
+			isBlock: true,
+			allowWhere: '$block',
+			allowAttributes: [ 'id','src', 'controls', 'poster', 'width', 'height' ]
+		} );
+
+		conversion.for( 'dataDowncast' ).elementToElement( {
+			model: 'video',
+			view: ( modelElement, { writer } ) => createVideoViewElement( writer )
+		} );
+
+		conversion.for( 'editingDowncast' ).elementToElement( {
+			model: 'video',
+			view: ( modelElement, { writer } ) => toVideoWidget( createVideoViewElement( writer ), writer, t( 'video widget' ) )
+		} );
+
+		conversion.for( 'downcast' ).add( modelToViewAttributeConverter( 'id' ) );
+    	conversion.for( 'downcast' ).add( modelToViewAttributeConverter( 'controls' ) );
+		conversion.for( 'downcast' ).add( modelToViewAttributeConverter( 'src' ) );
+		conversion.for( 'downcast' ).add( modelToViewAttributeConverter( 'poster' ) );
+		conversion.for( 'downcast' ).add( modelToViewAttributeConverter( 'height' ) );
+
+		conversion.for( 'upcast' )
+			.elementToElement( {
+				view: {
+					name: 'video',
+					attributes: {
+						src: true
+					}
+				},
+				model: ( viewVideo, { writer } ) => writer.createElement( 'video', {
+				id: viewVideo.getAttribute( 'id' ),
+          		src: viewVideo.getAttribute( 'src' ),
+				controls: viewVideo.getAttribute( 'controls' ),
+				poster: viewVideo.getAttribute( 'poster' ) || "",
+				width: (viewVideo.getAttribute( 'width' ) !== null && viewVideo.getAttribute( 'width' ) !== undefined) ? viewVideo.getAttribute( 'width' ): "",
+				height: (viewVideo.getAttribute( 'height' ) !== null && viewVideo.getAttribute( 'height' ) !== undefined) ? viewVideo.getAttribute( 'height' ) : "",
+        } )
+			} )
+			.add( viewFigureToModel() );
+
+		const insertVideoCommand = new InsertVideoCommand( editor );
+		editor.commands.add( 'insertImage', insertVideoCommand );
+		editor.commands.add( 'videoInsert', insertVideoCommand );
+	}
+}
+
+export function createVideoViewElement( writer ) {
+	const emptyElement = writer.createEmptyElement( 'video' );
+	const figure = writer.createContainerElement( 'figure', { class: 'video' } );
+
+	writer.insert( writer.createPositionAt( figure, 0 ), emptyElement );
+	return figure;
+}

package/src/assets/qms-ckeditor-plugin/src/plugins/video/videoresize/resizevideocommand.js

@@ -1,35 +1,35 @@
-import { Command } from 'ckeditor5/src/core';
-import { isVideo } from '../video/utils';
-
-export default class ResizeVideoCommand extends Command {
-	refresh() {
-		const element = this.editor.model.document.selection.getSelectedElement();
-
-		this.isEnabled = isVideo( element );
-
-		if ( !element || !element.hasAttribute( 'width' ) ) {
-			this.value = null;
-		} else {
-			this.value = {
-				width: element.getAttribute( 'width' ),
-				height: null
-			};
-		}
-	}
-
-	execute( options ) {
-		const model = this.editor.model;
-		const videoElement = model.document.selection.getSelectedElement();
-
-		this.value = {
-			width: options.width,
-			height: null
-		};
-
-		if ( videoElement ) {
-			model.change( writer => {
-				writer.setAttribute( 'width', options.width, videoElement );
-			} );
-		}
-	}
-}
+import { Command } from 'ckeditor5/src/core';
+import { isVideo } from '../video/utils';
+
+export default class ResizeVideoCommand extends Command {
+	refresh() {
+		const element = this.editor.model.document.selection.getSelectedElement();
+
+		this.isEnabled = isVideo( element );
+
+		if ( !element || !element.hasAttribute( 'width' ) ) {
+			this.value = null;
+		} else {
+			this.value = {
+				width: element.getAttribute( 'width' ),
+				height: null
+			};
+		}
+	}
+
+	execute( options ) {
+		const model = this.editor.model;
+		const videoElement = model.document.selection.getSelectedElement();
+		this.value = {
+			width: options.width,
+			height: null
+		};
+
+		if ( videoElement ) {
+			model.change( writer => {
+				writer.setAttribute( 'width', options.width, videoElement );
+				writer.setAttribute( 'height', "", videoElement );
+			} );
+		}
+	}
+}

package/src/assets/qms-ckeditor-plugin/src/plugins/video/videoresize/videoresizeediting.js

@@ -1,92 +1,104 @@
-import { Plugin } from 'ckeditor5/src/core';
-import ResizeVideoCommand from './resizevideocommand';
-
-export default class VideoResizeEditing extends Plugin {
-	static get pluginName() {
-		return 'VideoResizeEditing';
-	}
-
-	constructor( editor ) {
-		super( editor );
-
-		editor.config.define( 'video', {
-			resizeUnit: '%',
-			resizeOptions: [ {
-				name: 'resizeVideo:original',
-				value: null,
-				icon: 'original'
-			},
-			{
-				name: 'resizeVideo:25',
-				value: '25',
-				icon: 'small'
-			},
-			{
-				name: 'resizeVideo:50',
-				value: '50',
-				icon: 'medium'
-			},
-			{
-				name: 'resizeVideo:75',
-				value: '75',
-				icon: 'large'
-			} ]
-		} );
-	}
-
-	init() {
-		const editor = this.editor;
-		const resizeVideoCommand = new ResizeVideoCommand( editor );
-
-		this._registerSchema();
-		this._registerConverters();
-
-		editor.commands.add( 'resizeVideo', resizeVideoCommand );
-		editor.commands.add( 'videoResize', resizeVideoCommand );
-	}
-
-	_registerSchema() {
-		this.editor.model.schema.extend( 'video', { allowAttributes: 'width' } );
-		this.editor.model.schema.setAttributeProperties( 'width', {
-			isFormatting: true
-		} );
-	}
-
-	_registerConverters() {
-		const editor = this.editor;
-
-		// Dedicated converter to propagate video's attribute to the video tag.
-		editor.conversion.for( 'downcast' ).add( dispatcher =>
-			dispatcher.on( 'attribute:width:video', ( evt, data, conversionApi ) => {
-				if ( !conversionApi.consumable.consume( data.item, evt.name ) ) {
-					return;
-				}
-
-				const viewWriter = conversionApi.writer;
-				const figure = conversionApi.mapper.toViewElement( data.item );
-
-				if ( data.attributeNewValue !== null ) {
-					viewWriter.setStyle( 'width', data.attributeNewValue, figure );
-					viewWriter.addClass( 'video_resized', figure );
-				} else {
-					viewWriter.removeStyle( 'width', figure );
-					viewWriter.removeClass( 'video_resized', figure );
-				}
-			} )
-		);
-
-		editor.conversion.for( 'upcast' )
-			.attributeToAttribute( {
-				view: {
-					name: 'figure',
-					styles: {
-						width: /.+/
-					}
-				},
-				model: {
-					key: 'width',
-					value: viewElement => viewElement.getStyle( 'width' )
-				}
-			} );
-	}
-}
+import { Plugin } from 'ckeditor5/src/core';
+import ResizeVideoCommand from './resizevideocommand';
+import { getViewVideoFromWidget } from './../../video/video/utils';
+export default class VideoResizeEditing extends Plugin {
+	static get pluginName() {
+		return 'VideoResizeEditing';
+	}
+
+	constructor( editor ) {
+		super( editor );
+
+		editor.config.define( 'video', {
+			resizeUnit: '%',
+			resizeOptions: [ {
+				name: 'resizeVideo:original',
+				value: null,
+				icon: 'original'
+			},
+			{
+				name: 'resizeVideo:25',
+				value: '25',
+				icon: 'small'
+			},
+			{
+				name: 'resizeVideo:50',
+				value: '50',
+				icon: 'medium'
+			},
+			{
+				name: 'resizeVideo:75',
+				value: '75',
+				icon: 'large'
+			} ]
+		} );
+	}
+
+	init() {
+		const editor = this.editor;
+		const resizeVideoCommand = new ResizeVideoCommand( editor );
+
+		this._registerSchema();
+		this._registerConverters();
+
+		editor.commands.add( 'resizeVideo', resizeVideoCommand );
+		editor.commands.add( 'videoResize', resizeVideoCommand );
+	}
+
+	_registerSchema() {
+		this.editor.model.schema.extend( 'video', { allowAttributes: 'width' } );
+		this.editor.model.schema.setAttributeProperties( 'width', {
+			isFormatting: true
+		} );
+	}
+
+	_registerConverters() {
+		const editor = this.editor;
+
+		// Dedicated converter to propagate video's attribute to the video tag.
+		editor.conversion.for( 'downcast' ).add( dispatcher =>
+			dispatcher.on( 'attribute:width:video', ( evt, data, conversionApi ) => {
+				if ( !conversionApi.consumable.consume( data.item, evt.name ) ) {
+					return;
+				}
+
+				const viewWriter = conversionApi.writer;
+				const figure = conversionApi.mapper.toViewElement( data.item );
+
+				if ( data.attributeNewValue !== null && data.attributeNewValue !== undefined ) {
+					if(data.attributeNewValue.toString().indexOf('%') >=0)
+					{
+						viewWriter.setStyle( 'width', data.attributeNewValue, figure );
+						viewWriter.addClass( 'video_resized', figure );
+					}
+					else
+					{
+						viewWriter.removeStyle( 'width', figure );
+						viewWriter.removeClass( 'video_resized', figure );
+						
+						const video = getViewVideoFromWidget( figure );
+
+						viewWriter.setAttribute( data.attributeKey, data.attributeNewValue || '', video );
+					}
+				} else {
+					viewWriter.removeStyle( 'width', figure );
+					viewWriter.removeClass( 'video_resized', figure );
+				}
+			} )
+		);
+
+		editor.conversion.for( 'upcast' )
+			.attributeToAttribute( {
+				view: {
+					name: 'figure',
+					styles: {
+						width: /.+/
+					}
+				},
+				model: {
+					key: 'width',
+					value: viewElement => viewElement.getStyle( 'width' )
+				}
+			} );
+	}
+}

package/src/assets/qms-ckeditor-plugin/src/plugins/video/videoupload/browsevideodialogcommand.js

@@ -1,25 +1,69 @@
-import { Command } from 'ckeditor5/src/core';
-import { isVideoAllowed } from "../video/utils";
-import * as QMSCKEditorService from '../../common/qmsCKEditorService';
-import * as QMSCKEditorConstant from '../../common/qmsCKEditorConstant';
-
-export default class BrowseVideoDialogCommand extends Command {
-    refresh() {
-        const videoElement = this.editor.model.document.selection.getSelectedElement();
-        const isVideo = videoElement && videoElement.name === 'video' || false;
-        this.isEnabled = isVideoAllowed( this.editor.model ) || isVideo;
-    }
-
-    execute(options) {
-      const editor = this.editor;
-      QMSCKEditorService.uploadVideoNotify({...options}, editor.id);
-      window[QMSCKEditorConstant.QMSCK_BROWSE_VIDEO_IS_PROCESSING] = false;
-      window.addEventListener(QMSCKEditorConstant.QMSCK_BROWSE_VIDEO_RESP, (evt) => {
-            if(window[QMSCKEditorConstant.QMSCK_BROWSE_VIDEO_IS_PROCESSING] || !evt.detail){
-              return;
-            }
-            window[QMSCKEditorConstant.QMSCK_BROWSE_VIDEO_IS_PROCESSING] = true;
-            editor.commands.get('uploadVideo').execute(evt.detail);
-      }, { once: true});
-    }
-}
+import { Command } from 'ckeditor5/src/core';
+import { isVideoAllowed } from "../video/utils";
+import * as QMSCKEditorService from '../../common/qmsCKEditorService';
+import * as QMSCKEditorConstant from '../../common/qmsCKEditorConstant';
+import { toArray } from 'ckeditor5/src/utils';
+
+export default class BrowseVideoDialogCommand extends Command {
+    refresh() {
+        const videoElement = this.editor.model.document.selection.getSelectedElement();
+        const isVideo = videoElement && videoElement.name === 'video' || false;
+        this.isEnabled = isVideoAllowed( this.editor.model ) || isVideo;
+    }
+
+    execute(options) {
+      const editor = this.editor;
+      const videoElement = editor.model.document.selection.getSelectedElement();
+      if(videoElement)
+      {
+        options.src =  videoElement.getAttribute( 'src' );
+        if(options.src)
+        {
+          options.selectedId = videoElement.getAttribute( 'src' ).split('id=')[1].split(/&(.*)/s)[0];
+        }
+        options.poster =  videoElement.getAttribute( 'poster' );
+        options.width =  videoElement.getAttribute( 'width' );
+        options.height =  videoElement.getAttribute( 'height' );
+        options.id =  videoElement.getAttribute( 'id' );
+      }
+
+      QMSCKEditorService.uploadVideoNotify({...options}, editor.id);
+      window[QMSCKEditorConstant.QMSCK_BROWSE_VIDEO_IS_PROCESSING] = false;
+      window.addEventListener(QMSCKEditorConstant.QMSCK_BROWSE_VIDEO_RESP, (evt) => {
+            if(window[QMSCKEditorConstant.QMSCK_BROWSE_VIDEO_IS_PROCESSING] || !evt.detail){
+              return;
+            }
+
+            if(videoElement)
+            {
+              editor.model.change( writer => {
+                if(evt.detail.urls.length)
+                {
+                  for ( const url of toArray( evt.detail.urls ) ) {
+                    writer.setAttribute( 'src', url, videoElement );
+                  }
+                }
+                if(evt.detail.id)
+                {
+                  writer.setAttribute( 'id', evt.detail.id, videoElement );
+                }
+                
+                writer.setAttribute( 'poster', evt.detail.thumbnailUrl || "", videoElement );
+
+                if(evt.detail.width)
+                {
+                  writer.setAttribute( 'width', evt.detail.width, videoElement );
+                }
+                if(evt.detail.height)
+                {
+                  writer.setAttribute( 'height', evt.detail.height, videoElement );
+                }
+              });
+              return;
+            }
+
+            window[QMSCKEditorConstant.QMSCK_BROWSE_VIDEO_IS_PROCESSING] = true;
+            editor.commands.get('uploadVideo').execute(evt.detail);
+      }, { once: true});
+    }
+}