qms-angular 1.0.56 → 1.0.57

package/src/assets/qms-ckeditor-plugin/src/plugins/imagemap/openimagemapcommand.js

@@ -0,0 +1,58 @@
+
+import { Command } from '@ckeditor/ckeditor5-core';
+import { isImage } from '@ckeditor/ckeditor5-image/src/image/utils';
+import * as QMSCKEditorConstant from '../common/qmsCKEditorConstant';
+import * as QMSCKEditorService from '../common/qmsCKEditorService';
+import { ImageMapAttributes, ImageMapCommands, trimStart, parsePixelToFloat, findFirstMapNode } from './utils';
+import  { getSelectedImageWidget } from '@ckeditor/ckeditor5-image/src/image/utils';
+ 
+export default class OpenImageMapCommand extends Command {
+	 
+	refresh() {
+		const element = this.editor.model.document.selection.getSelectedElement();
+		this.isEnabled = isImage(element);
+	}
+ 
+	execute() {
+		const editor = this.editor;
+		const model = editor.model;
+		const view = editor.editing.view;
+		const selectedElement = model.document.selection.getSelectedElement();
+ 
+		const mapName = selectedElement.getAttribute(ImageMapAttributes.IMAGE_USE_MAP);
+		let originalImageSrc = selectedElement.getAttribute(ImageMapAttributes.IMAGE_SRC);
+		if(selectedElement.hasAttribute(ImageMapAttributes.IMAGE_SAVED_SRC) && selectedElement.getAttribute(ImageMapAttributes.IMAGE_SAVED_SRC)){
+			originalImageSrc = selectedElement.getAttribute(ImageMapAttributes.IMAGE_SAVED_SRC);
+		}
+
+		const data = {'imageUrl': originalImageSrc, 'areas': [], imageWidth: null, imageHeight: null};
+		const imageWidget = getSelectedImageWidget( view.document.selection);
+		const widgetResizePlugin = editor.plugins.get('WidgetResize');
+        const resizer = widgetResizePlugin.getResizerByViewElement( imageWidget );
+
+		if(resizer){
+			const resizerWrapper = resizer._viewResizerWrapper;
+			data.imageWidth = parsePixelToFloat(resizerWrapper.getStyle('width', 0));
+			data.imageHeight = parsePixelToFloat(resizerWrapper.getStyle('height', 0));
+		}
+ 
+		if(!!mapName){
+			const range = model.createRangeIn(model.document.getRoot());
+			const existingMapElement = findFirstMapNode(trimStart(mapName, '#'), range);
+			if(existingMapElement){
+				data.areas = JSON.parse(existingMapElement.getAttribute(ImageMapAttributes.MAP_AREAS) || []);
+			}
+		}
+ 
+		QMSCKEditorService.imageMapNotify(data);
+        window[QMSCKEditorConstant.QMSCK_IMAGEMAP_IS_PROCESSING] = false;
+        window.addEventListener(QMSCKEditorConstant.QMSCK_IMAGEMAP_PLUGIN_RESP, (evt) => {
+            if (window[QMSCKEditorConstant.QMSCK_IMAGEMAP_IS_PROCESSING]) { 
+                return; 
+            }
+            window[QMSCKEditorConstant.QMSCK_IMAGEMAP_IS_PROCESSING] = true;    
+            editor.commands.get(ImageMapCommands.INSERT).execute(evt.detail);
+        });
+	}
+}
+

package/src/assets/qms-ckeditor-plugin/src/plugins/imagemap/resizeimagemapcommand.js

@@ -1,7 +1,7 @@
 
 import { Command } from '@ckeditor/ckeditor5-core';
 import { isImage } from '@ckeditor/ckeditor5-image/src/image/utils';
-import { ImageMapAttributes, trimStart, parsePixelToFloat, findFirstMapNode, drawMap, resizeAreaWidth, resizeAreaHeight } from './utils';
+import { ImageMapAttributes, trimStart, parsePixelToFloat, findFirstMapNode, drawMap, resizeAreaWidth, resizeAreaHeight, createResizedEvent } from './utils';
 import  { getSelectedImageWidget} from '@ckeditor/ckeditor5-image/src/image/utils';
 
 export default class ResizeImageMapCommand extends Command {
@@ -11,7 +11,7 @@ export default class ResizeImageMapCommand extends Command {
 		this.isEnabled = isImage(element) && element.hasAttribute(ImageMapAttributes.IMAGE_USE_MAP);
 	}
  
-	execute() {
+	execute( options = {}) {
         const editor = this.editor;
         const model = editor.model;
         const view = this.editor.editing.view;
@@ -68,8 +68,9 @@ export default class ResizeImageMapCommand extends Command {
                             writer.setAttribute(ImageMapAttributes.IMAGE_HEIGHT, newHeight, imageElement);
 
                             drawMap(originalImageSrc, newWidth, newHeight, areas, (oldsrc, newsrc) =>{
-                                model.enqueueChange(writer => {
+                                model.enqueueChange(writer.batch, writer => {
                                     writer.setAttribute(ImageMapAttributes.IMAGE_SRC, newsrc, imageElement);
+                                    this.fire(createResizedEvent(mapName));
                                 });
                             });
                         });

package/src/assets/qms-ckeditor-plugin/src/plugins/imagemap/utils.js

@@ -34,6 +34,7 @@ export const ImageMapAttributes = {
 }
 
 export const ImageMapCommands = {
+	OPEN: 'openImageMap',
 	INSERT: 'insertImageMap',
 	RESIZE: 'resizeImageMap'
 }
@@ -43,6 +44,18 @@ export const ImageMapElements = {
 	IMAGE: 'image'//It is already defined by the image plugin
 }
 
+export function createInsertedEvent(mapname){
+	return trimStart(mapname, '#') + '_inserted';
+}
+
+export function createRemovedEvent(mapname){
+	return trimStart(mapname, '#') + '_removed';
+}
+
+export function createResizedEvent(mapname){
+	return trimStart(mapname, '#') + '_resized';
+}
+
 export function trimStart(text, charToRemove){
 	if(text && text.length > 0){
 		if(text.charAt(0) == charToRemove){

package/src/assets/qms-ckeditor-plugin/src/plugins/timestamp/timestamp.js

@@ -10,19 +10,19 @@ import { toMap } from '@ckeditor/ckeditor5-utils';
  * The default DateTime pattern is dd/MM/yyyy hh:mm:ss aaa
  *
  * DateTime Patterns:
- * 
+ *
  * yy = 2-digit year; yyyy = full year
- * 
+ *
  * M = digit month; MM = 2-digit month
- * 
+ *
  * d = digit day; dd = 2-digit day
- * 
+ *
  * h = hours am/pm; hh = 2-digit hours am/pm; H = hours; HH = 2-digit hours
- * 
+ *
  * m = minutes; mm = 2-digit minutes; aaa = AM/PM
- * 
+ *
  * s = seconds; ss = 2-digit seconds
- * 
+ *
  * S = miliseconds
  */
 export default class Timestamp extends Plugin {
@@ -37,7 +37,7 @@ export default class Timestamp extends Plugin {
             buttonView.set( {
                 label: t('Timestamp'),
                 icon: timestampIcon,
-                withText: true,
+                withText: false,
                 tooltip: true
             } );
 

package/src/assets/qms-ckeditor-plugin/src/plugins/tooltip/tooltipui.js

@@ -1,6 +1,6 @@
 
 import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
-import informationIcon from '../../themes/icons/information.svg';
+import tooltipIcon from '../../themes/icons/tooltip.svg';
 import * as QMSCKEditorConstant from '../common/qmsCKEditorConstant';
 import * as QMSCKEditorService from '../common/qmsCKEditorService';
 import ActionsView from './ui/actionsview';
@@ -12,7 +12,7 @@ export default class TooltipUI extends Plugin {
 	static get requires() {
 		return [ContextualBalloon];
 	}
- 
+
 	static get pluginName() {
 		return 'TooltipUI';
 	}
@@ -24,25 +24,25 @@ export default class TooltipUI extends Plugin {
 	get _isInBalloon() {
 		return this._balloon.hasView(this._actionView);
 	}
- 
+
     init() {
         const editor = this.editor;
         const t = editor.t;
         const view = editor.editing.view;
- 
+
         view.addObserver(ClickObserver);
         this._createActionsView();
- 
+
         editor.ui.componentFactory.add('tooltip', locale => {
             const buttonView = new ButtonView(locale);
 
             buttonView.set({
                 label: t('Tooltip'),
-                icon: informationIcon,
-                withText: true,
+                icon: tooltipIcon,
+                withText: false,
                 tooltip: true
             });
- 
+
 			// Bind button to the command.
             const insertTooltipCommand = editor.commands.get(INSERT_TOOLTIP_COMMAND);
 			buttonView.bind('isEnabled').to(insertTooltipCommand, 'isEnabled' );
@@ -55,26 +55,26 @@ export default class TooltipUI extends Plugin {
             return buttonView;
         });
     }
- 
+
 	destroy() {
 		super.destroy();
 		this._actionView.destroy();
 	}
- 
+
 	_createActionsView() {
 		const editor = this.editor;
 		const view = editor.editing.view;
 		const viewDocument = view.document;
 		this._balloon = this.editor.plugins.get('ContextualBalloon');
-		this._actionView = new ActionsView(editor.locale); 
+		this._actionView = new ActionsView(editor.locale);
 
 		const insertTooltipCommand = editor.commands.get(INSERT_TOOLTIP_COMMAND);
 		const removeTooltipCommand = editor.commands.get(REMOVE_TOOLTIP_COMMAND);
- 
+
 		this._actionView.bind(TOOLTIP_ATTRIBUTE).to( insertTooltipCommand, 'value');
 		this._actionView.editButtonView.bind('isEnabled').to(insertTooltipCommand);
 		this._actionView.removeButtonView.bind('isEnabled').to(removeTooltipCommand);
-	 
+
 		this.listenTo(this._actionView, 'edit', () => {
             const tooltip = { text: '', content: '' };
             const selectedElement = this._getSelectedTooltipElement();
@@ -93,7 +93,7 @@ export default class TooltipUI extends Plugin {
             editor.execute(REMOVE_TOOLTIP_COMMAND);
 			this._hideActionsView(true);
 		});
- 
+
 		this._actionView.keystrokes.set('Esc', (data, cancel) => {
 			this._hideActionsView(true);
 			cancel();
@@ -106,7 +106,7 @@ export default class TooltipUI extends Plugin {
 				this._showActionsView();
 			}
 		});
- 
+
 		// Close on click outside of balloon panel element.
 		clickOutsideHandler({
 			emitter: this._actionView,
@@ -124,18 +124,18 @@ export default class TooltipUI extends Plugin {
 		const viewDocument = editor.editing.view.document;
 		//const command = editor.commands.get('imageTextAlternative');
 		//const labeledInput = this._actionView.labeledInput;
- 
+
 		if (!this._isInBalloon) {
 			this._balloon.add({
 				view: this._actionView,
 				position: this._getBalloonPositionData()
 			});
 		}
- 
+
 		// Reposition the balloon or hide the form if an tooltip is no longer selected.
 		const prevSelectedElement = this._getSelectedTooltipElement();
 		const prevSelectionParent = getSelectionParent(viewDocument);
-		 
+
 		this.listenTo(editor.ui, 'update', () => {
 			const selectedElement = this._getSelectedTooltipElement();
 			const selectionParent = getSelectionParent(viewDocument);
@@ -143,9 +143,9 @@ export default class TooltipUI extends Plugin {
 			if ((prevSelectedElement && !selectedElement) || (!prevSelectedElement && selectionParent !== prevSelectionParent)) {
 				this._hideActionsView(true);
 			}
-			else if (this._isVisible) 
+			else if (this._isVisible)
 			{
-				this._balloon.updatePosition(this._getBalloonPositionData());              
+				this._balloon.updatePosition(this._getBalloonPositionData());
 			}
 		});
 	}
@@ -162,7 +162,7 @@ export default class TooltipUI extends Plugin {
 		if (!this._isInBalloon) {
 			return;
 		}
- 
+
 		if (this._actionView.focusTracker.isFocused) {
 			this._actionView.removeButtonView.focus();
 		}
@@ -179,7 +179,7 @@ export default class TooltipUI extends Plugin {
 		const selection = view.document.selection;
 		if (selection.isCollapsed) {
 			return findTooltipElementAncestor(selection.getFirstPosition());
-		} 
+		}
         else {
 			// The range for fully selected link is usually anchored in adjacent text nodes.
 			// Trim it to get closer to the actual link element.
@@ -193,11 +193,10 @@ export default class TooltipUI extends Plugin {
 			// Check if the link element is fully selected.
 			if (view.createRangeIn(startTooltip).getTrimmed().isEqual(range)) {
 				return startTooltip;
-			} 
+			}
 			else {
 				return null;
 			}
 		}
 	}
 }
-