From e82198daf921f2c9699a3bf544c56c60028549f3 Mon Sep 17 00:00:00 2001 From: Paul Holden Date: Fri, 25 Nov 2022 16:43:09 +0000 Subject: [PATCH] MDL-76476 tiny_media: don't load image preview if none exists. --- lib/editor/tiny/plugins/media/amd/build/image.min.js | 2 +- lib/editor/tiny/plugins/media/amd/build/image.min.js.map | 2 +- lib/editor/tiny/plugins/media/amd/src/image.js | 6 +++--- .../plugins/media/templates/insert_image_modal.mustache | 5 ++++- 4 files changed, 9 insertions(+), 6 deletions(-) diff --git a/lib/editor/tiny/plugins/media/amd/build/image.min.js b/lib/editor/tiny/plugins/media/amd/build/image.min.js index 50e612968d6..752a38803ac 100644 --- a/lib/editor/tiny/plugins/media/amd/build/image.min.js +++ b/lib/editor/tiny/plugins/media/amd/build/image.min.js @@ -1,3 +1,3 @@ -define("tiny_media/image",["exports","core/templates","core/str","core/modal_factory","editor_tiny/utils","./selectors","./imagemodal","./options","./common"],(function(_exports,_templates,_str,ModalFactory,_utils,_selectors,_imagemodal,_options,_common){function _getRequireWildcardCache(nodeInterop){if("function"!=typeof WeakMap)return null;var cacheBabelInterop=new WeakMap,cacheNodeInterop=new WeakMap;return(_getRequireWildcardCache=function(nodeInterop){return nodeInterop?cacheNodeInterop:cacheBabelInterop})(nodeInterop)}function _interopRequireDefault(obj){return obj&&obj.__esModule?obj:{default:obj}}function _defineProperty(obj,key,value){return key in obj?Object.defineProperty(obj,key,{value:value,enumerable:!0,configurable:!0,writable:!0}):obj[key]=value,obj}Object.defineProperty(_exports,"__esModule",{value:!0}),_exports.MediaImage=void 0,_templates=_interopRequireDefault(_templates),ModalFactory=function(obj,nodeInterop){if(!nodeInterop&&obj&&obj.__esModule)return obj;if(null===obj||"object"!=typeof obj&&"function"!=typeof obj)return{default:obj};var cache=_getRequireWildcardCache(nodeInterop);if(cache&&cache.has(obj))return cache.get(obj);var newObj={},hasPropertyDescriptor=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var key in obj)if("default"!==key&&Object.prototype.hasOwnProperty.call(obj,key)){var desc=hasPropertyDescriptor?Object.getOwnPropertyDescriptor(obj,key):null;desc&&(desc.get||desc.set)?Object.defineProperty(newObj,key,desc):newObj[key]=obj[key]}newObj.default=obj,cache&&cache.set(obj,newObj);return newObj}(ModalFactory),_selectors=_interopRequireDefault(_selectors),_imagemodal=_interopRequireDefault(_imagemodal);_exports.MediaImage=class{constructor(editor){_defineProperty(this,"DEFAULTS",{WIDTH:160,HEIGHT:160}),_defineProperty(this,"form",null),_defineProperty(this,"rawImageDimensions",null),_defineProperty(this,"canShowFilePicker",!1),_defineProperty(this,"editor",null),_defineProperty(this,"currentModal",null),_defineProperty(this,"selectedImage",null),_defineProperty(this,"imageAlignment",null);const permissions=(0,_options.getImagePermissions)(editor);this.canShowFilePicker=permissions.filepicker,this.editor=editor}async displayDialogue(){this.rawImageDimensions=null;const currentImageData=await this.getCurrentImageData(),modal=await ModalFactory.create({type:_imagemodal.default.TYPE,title:(0,_str.get_string)("imageproperties","tiny_media"),templateContext:await this.getTemplateContext(currentImageData),removeOnClose:!0,large:!0});this.currentModal=modal,currentImageData&&this.loadPreviewImage(currentImageData.src),await this.registerEventListeners(modal),modal.show()}async getAlignmentTitles(){if(!this.alignmentTitles){const[top,middle,bottom]=await(0,_str.get_strings)(["alignment_top","alignment_middle","alignment_bottom"].map((key=>({key:key,component:_common.component}))));this.alignmentTitles={top:top,middle:middle,bottom:bottom}}return this.alignmentTitles}async getImageAlignment(){let selected=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"";const titles=await this.getAlignmentTitles(),alignments=[{text:titles.top,value:"align-top"},{text:titles.middle,value:"align-middle"},{text:titles.bottom,value:"align-bottom"}];return selected&&alignments.forEach(((alignment,index,array)=>{alignment.value===selected&&(array[index].selected=!0)})),alignments}async getTemplateContext(data){return{elementid:this.editor.id,showfilepicker:this.canShowFilePicker,alignoptions:await this.getImageAlignment(),...data}}async getCurrentImageData(){const selectedImageProperties=this.getSelectedImageProperties();if(!selectedImageProperties)return{};const properties={...selectedImageProperties};return properties.align&&(properties.alignoptions=await this.getImageAlignment(properties.align)),properties.src&&(properties.haspreview=!0),properties.alt||(properties.presentation=!0),properties}filePickerCallback(params,self){if(""!==params.url){self.form.querySelector(_selectors.default.IMAGE.elements.url).value=params.url,self.form.querySelector(_selectors.default.IMAGE.elements.width).value="",self.form.querySelector(_selectors.default.IMAGE.elements.height).value="",self.loadPreviewImage(params.url)}}storeImageDimensions(image){this.rawImageDimensions={width:image.width||this.DEFAULTS.WIDTH,height:image.height||this.DEFAULTS.HEIGHT};const currentWidth=(element=>(""===element.value&&(element.value=this.rawImageDimensions.width),element.value))(this.form.querySelector(_selectors.default.IMAGE.elements.width)),currentHeight=(element=>(""===element.value&&(element.value=this.rawImageDimensions.height),element.value))(this.form.querySelector(_selectors.default.IMAGE.elements.height)),preview=this.form.querySelector(_selectors.default.IMAGE.elements.preview);preview.setAttribute("src",image.src),preview.style.display="inline";const constrain=this.form.querySelector(_selectors.default.IMAGE.elements.constrain);if(this.isPercentageValue(currentWidth)&&this.isPercentageValue(currentHeight))constrain.checked=currentWidth===currentHeight;else if(0===image.width||0===image.height)constrain.disabled="disabled";else{const widthRatio=Math.round(1e3*parseInt(currentWidth,10)/image.width),heightRatio=Math.round(1e3*parseInt(currentHeight,10)/image.height);constrain.checked=widthRatio===heightRatio}}loadPreviewImage(url){const image=new Image;image.addEventListener("error",(()=>{this.form.querySelector(_selectors.default.IMAGE.elements.preview).style.display="none"})),image.addEventListener("load",(()=>{this.storeImageDimensions(image),this.autoAdjustSize()})),image.src=url}urlChanged(){const input=this.form.querySelector(_selectors.default.IMAGE.elements.url);""!==input.value&&this.loadPreviewImage(input.value)}hasErrorUrlField(){const urlError=""===this.form.querySelector(_selectors.default.IMAGE.elements.url).value;return this.toggleVisibility(_selectors.default.IMAGE.elements.urlWarning,urlError),this.toggleAriaInvalid([_selectors.default.IMAGE.elements.url],urlError),urlError}hasErrorAltField(){const alt=this.form.querySelector(_selectors.default.IMAGE.elements.alt).value,presentation=this.form.querySelector(_selectors.default.IMAGE.elements.presentation).checked,imageAltError=""===alt&&!presentation;return this.toggleVisibility(_selectors.default.IMAGE.elements.altWarning,imageAltError),this.toggleAriaInvalid([_selectors.default.IMAGE.elements.alt,_selectors.default.IMAGE.elements.presentation],imageAltError),imageAltError}toggleVisibility(selector,predicate){this.form.querySelectorAll(selector).forEach((element=>{element.style.display=predicate?"block":"none"}))}toggleAriaInvalid(selectors,predicate){selectors.forEach((selector=>{this.form.querySelectorAll(selector).forEach((element=>element.setAttribute("aria-invalid",predicate)))}))}getAlignmentClass(alignment){return alignment}updateWarning(){const urlError=this.hasErrorUrlField(),imageAltError=this.hasErrorAltField();return urlError||imageAltError}getImageContext(){if(this.updateWarning())return null;const classList=[];this.form.querySelector(_selectors.default.IMAGE.elements.constrain).value&&classList.push(_selectors.default.IMAGE.styles.responsive);const alignment=this.getAlignmentClass(this.form.querySelector(_selectors.default.IMAGE.elements.alignment).value);return classList.push(alignment),{url:this.form.querySelector(_selectors.default.IMAGE.elements.url).value,alt:this.form.querySelector(_selectors.default.IMAGE.elements.alt).value,width:this.form.querySelector(_selectors.default.IMAGE.elements.width).value,height:this.form.querySelector(_selectors.default.IMAGE.elements.height).value,presentation:this.form.querySelector(_selectors.default.IMAGE.elements.presentation).checked,customStyle:this.form.querySelector(_selectors.default.IMAGE.elements.customStyle).value,classlist:classList.join(" ")}}setImage(){if(""===this.form.querySelector(_selectors.default.IMAGE.elements.url).value)return;if(this.updateWarning())return;const width=this.form.querySelector(_selectors.default.IMAGE.elements.width).value;if(!this.isPercentageValue(width)&&isNaN(parseInt(width,10)))return void this.form.querySelector(_selectors.default.IMAGE.elements.width).focus();const height=this.form.querySelector(_selectors.default.IMAGE.elements.height).value;this.isPercentageValue(height)||!isNaN(parseInt(height,10))?_templates.default.render("tiny_media/image",this.getImageContext()).then((html=>(this.editor.insertContent(html),this.currentModal.destroy(),html))).catch():this.form.querySelector(_selectors.default.IMAGE.elements.height).focus()}handleKeyupCharacterCount(){const alt=this.form.querySelector(_selectors.default.IMAGE.elements.alt).value;this.form.querySelector("#currentcount").innerHTML=alt.length}autoAdjustSize(){let forceHeight=arguments.length>0&&void 0!==arguments[0]&&arguments[0];if(!this.rawImageDimensions)return;const widthField=this.form.querySelector(_selectors.default.IMAGE.elements.width),heightField=this.form.querySelector(_selectors.default.IMAGE.elements.height),normalizeFieldData=fieldData=>(fieldData.isPercentageValue=!!this.isPercentageValue(fieldData.field.value),fieldData.isPercentageValue?(fieldData.percentValue=parseInt(fieldData.field.value,10),fieldData.pixelSize=this.rawImageDimensions[fieldData.type]/100*fieldData.percentValue):(fieldData.pixelSize=parseInt(fieldData.field.value,10),fieldData.percentValue=fieldData.pixelSize/this.rawImageDimensions[fieldData.type]*100),fieldData),imagePreview=this.form.querySelector(_selectors.default.IMAGE.elements.preview);imagePreview.style.width="",imagePreview.style.height="";const constrainField=this.form.querySelector(_selectors.default.IMAGE.elements.constrain),keyField=(()=>{const currentValue=forceHeight?{field:heightField,type:"height"}:{field:widthField,type:"width"};return""===currentValue.field.value&&(currentValue.field.value=this.rawImageDimensions[currentValue.type]),normalizeFieldData(currentValue)})(),relativeField=normalizeFieldData(forceHeight?{field:widthField,type:"width"}:{field:heightField,type:"height"});constrainField.checked&&(keyField.isPercentageValue?(relativeField.field.value=keyField.field.value,relativeField.percentValue=keyField.percentValue):(relativeField.pixelSize=Math.round(keyField.pixelSize/this.rawImageDimensions[keyField.type]*this.rawImageDimensions[relativeField.type]),relativeField.field.value=relativeField.pixelSize)),function(image,keyField,relativeField){let forceHeight=arguments.length>3&&void 0!==arguments[3]&&arguments[3];const getStyleValue=field=>field.isPercentageValue?"".concat(field.percentValue,"%"):"".concat(field.pixelSize,"px");forceHeight?"width"===keyField.type?image.style.width=getStyleValue(keyField):image.style.width=getStyleValue(relativeField):(image.style[keyField.type]=getStyleValue(keyField),image.style[relativeField.type]=getStyleValue(relativeField))}(imagePreview,keyField,relativeField,!!constrainField.checked)}getSelectedImageProperties(){const image=this.getSelectedImage();if(!image)return this.selectedImage=null,null;const properties={src:null,alt:null,width:null,height:null,align:"",presentation:!1};this.removeLegacyAlignment(image),this.selectedImage=image,properties.customStyle=image.style.cssText;const width=(image=>this.isPercentageValue(String(image.width))?image.width:parseInt(image.width,10))(image);0!==width&&(properties.width=width);const height=(image=>this.isPercentageValue(String(image.height))?image.height:parseInt(image.height,10))(image);0!==height&&(properties.height=height);const alignment=this.getAlignmentProperties(image,properties);return alignment&&(properties.align=alignment.value),properties.src=image.getAttribute("src"),properties.alt=image.getAttribute("alt")||"",properties.presentation="presentation"===image.getAttribute("role"),properties}removeLegacyAlignment(imageNode){return imageNode.style.margin?(_selectors.default.IMAGE.alignments.some((alignment=>{if(imageNode.style[alignment.name]!==alignment.value)return!1;const normalisedNode=document.createElement("div");return normalisedNode.style.margin=alignment.margin,imageNode.style.margin===normalisedNode.style.margin&&(imageNode.classList.add(this.getAlignmentClass(alignment.value)),imageNode.style[alignment.name]=null,imageNode.style.margin=null,!0)})),imageNode):imageNode}getAlignmentProperties(image){const currentAlignment=_selectors.default.IMAGE.alignments.find((alignment=>!!image.classList.contains(this.getAlignmentClass(alignment.value))||!!alignment.legacyValues&&alignment.legacyValues.some((legacyValue=>image.classList.contains(legacyValue)))));return currentAlignment||_selectors.default.IMAGE.alignments.find((alignment=>alignment.isDefault))}getSelectedImage(){const imgElm=this.editor.selection.getNode(),figureElm=this.editor.dom.getParent(imgElm,"figure.image");return figureElm?this.editor.dom.select("img",figureElm)[0]:imgElm&&("IMG"!==imgElm.nodeName.toUpperCase()||this.isPlaceholderImage(imgElm))?null:imgElm}isPlaceholderImage(imgElm){return"IMG"===imgElm.nodeName.toUpperCase()&&(imgElm.hasAttribute("data-mce-object")||imgElm.hasAttribute("data-mce-placeholder"))}isPercentageValue(value){return value.match(/\d+%/)}async registerEventListeners(modal){await modal.getBody();const root=modal.getRoot()[0];this.form=root.querySelector(_selectors.default.IMAGE.elements.form),root.addEventListener("click",(e=>{const submitAction=e.target.closest(_selectors.default.IMAGE.actions.submit),imageBrowserAction=e.target.closest(_selectors.default.IMAGE.actions.imageBrowser);submitAction&&(e.preventDefault(),this.setImage()),imageBrowserAction&&this.canShowFilePicker&&(e.preventDefault(),(0,_utils.displayFilepicker)(this.editor,"image").then((params=>{this.filePickerCallback(params,this)})).catch())})),root.addEventListener("change",(e=>{e.target.closest(_selectors.default.IMAGE.elements.url)&&this.hasErrorUrlField();e.target.closest(_selectors.default.IMAGE.elements.presentation)&&this.hasErrorAltField();e.target.closest(_selectors.default.IMAGE.elements.constrain)&&this.autoAdjustSize(!0)})),root.addEventListener("blur",(e=>{if(e.target.nodeType===Node.ELEMENT_NODE){e.target.closest(_selectors.default.IMAGE.elements.url)&&this.urlChanged();e.target.closest(_selectors.default.IMAGE.elements.alt)&&this.hasErrorAltField();e.target.closest(_selectors.default.IMAGE.elements.width)&&this.autoAdjustSize();e.target.closest(_selectors.default.IMAGE.elements.height)&&this.autoAdjustSize(!0)}}),!0),root.addEventListener("keyup",(e=>{e.target.closest(_selectors.default.IMAGE.elements.alt)&&this.handleKeyupCharacterCount()}))}}})); +define("tiny_media/image",["exports","core/templates","core/str","core/modal_factory","editor_tiny/utils","./selectors","./imagemodal","./options","./common"],(function(_exports,_templates,_str,ModalFactory,_utils,_selectors,_imagemodal,_options,_common){function _getRequireWildcardCache(nodeInterop){if("function"!=typeof WeakMap)return null;var cacheBabelInterop=new WeakMap,cacheNodeInterop=new WeakMap;return(_getRequireWildcardCache=function(nodeInterop){return nodeInterop?cacheNodeInterop:cacheBabelInterop})(nodeInterop)}function _interopRequireDefault(obj){return obj&&obj.__esModule?obj:{default:obj}}function _defineProperty(obj,key,value){return key in obj?Object.defineProperty(obj,key,{value:value,enumerable:!0,configurable:!0,writable:!0}):obj[key]=value,obj}Object.defineProperty(_exports,"__esModule",{value:!0}),_exports.MediaImage=void 0,_templates=_interopRequireDefault(_templates),ModalFactory=function(obj,nodeInterop){if(!nodeInterop&&obj&&obj.__esModule)return obj;if(null===obj||"object"!=typeof obj&&"function"!=typeof obj)return{default:obj};var cache=_getRequireWildcardCache(nodeInterop);if(cache&&cache.has(obj))return cache.get(obj);var newObj={},hasPropertyDescriptor=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var key in obj)if("default"!==key&&Object.prototype.hasOwnProperty.call(obj,key)){var desc=hasPropertyDescriptor?Object.getOwnPropertyDescriptor(obj,key):null;desc&&(desc.get||desc.set)?Object.defineProperty(newObj,key,desc):newObj[key]=obj[key]}newObj.default=obj,cache&&cache.set(obj,newObj);return newObj}(ModalFactory),_selectors=_interopRequireDefault(_selectors),_imagemodal=_interopRequireDefault(_imagemodal);_exports.MediaImage=class{constructor(editor){_defineProperty(this,"DEFAULTS",{WIDTH:160,HEIGHT:160}),_defineProperty(this,"form",null),_defineProperty(this,"rawImageDimensions",null),_defineProperty(this,"canShowFilePicker",!1),_defineProperty(this,"editor",null),_defineProperty(this,"currentModal",null),_defineProperty(this,"selectedImage",null),_defineProperty(this,"imageAlignment",null);const permissions=(0,_options.getImagePermissions)(editor);this.canShowFilePicker=permissions.filepicker,this.editor=editor}async displayDialogue(){this.rawImageDimensions=null;const currentImageData=await this.getCurrentImageData(),modal=await ModalFactory.create({type:_imagemodal.default.TYPE,title:(0,_str.get_string)("imageproperties","tiny_media"),templateContext:await this.getTemplateContext(currentImageData),removeOnClose:!0,large:!0});this.currentModal=modal,currentImageData&¤tImageData.src&&this.loadPreviewImage(currentImageData.src),await this.registerEventListeners(modal),modal.show()}async getAlignmentTitles(){if(!this.alignmentTitles){const[top,middle,bottom]=await(0,_str.get_strings)(["alignment_top","alignment_middle","alignment_bottom"].map((key=>({key:key,component:_common.component}))));this.alignmentTitles={top:top,middle:middle,bottom:bottom}}return this.alignmentTitles}async getImageAlignment(){let selected=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"";const titles=await this.getAlignmentTitles(),alignments=[{text:titles.top,value:"align-top"},{text:titles.middle,value:"align-middle"},{text:titles.bottom,value:"align-bottom"}];return selected&&alignments.forEach(((alignment,index,array)=>{alignment.value===selected&&(array[index].selected=!0)})),alignments}async getTemplateContext(data){return{elementid:this.editor.id,showfilepicker:this.canShowFilePicker,alignoptions:await this.getImageAlignment(),...data}}async getCurrentImageData(){const selectedImageProperties=this.getSelectedImageProperties();if(!selectedImageProperties)return{};const properties={...selectedImageProperties};return properties.align&&(properties.alignoptions=await this.getImageAlignment(properties.align)),properties.src&&(properties.haspreview=!0),properties.alt||(properties.presentation=!0),properties}filePickerCallback(params,self){if(params.url){self.form.querySelector(_selectors.default.IMAGE.elements.url).value=params.url,self.form.querySelector(_selectors.default.IMAGE.elements.width).value="",self.form.querySelector(_selectors.default.IMAGE.elements.height).value="",self.loadPreviewImage(params.url)}}storeImageDimensions(image){this.rawImageDimensions={width:image.width||this.DEFAULTS.WIDTH,height:image.height||this.DEFAULTS.HEIGHT};const currentWidth=(element=>(""===element.value&&(element.value=this.rawImageDimensions.width),element.value))(this.form.querySelector(_selectors.default.IMAGE.elements.width)),currentHeight=(element=>(""===element.value&&(element.value=this.rawImageDimensions.height),element.value))(this.form.querySelector(_selectors.default.IMAGE.elements.height)),preview=this.form.querySelector(_selectors.default.IMAGE.elements.preview);preview.setAttribute("src",image.src),preview.style.display="inline";const constrain=this.form.querySelector(_selectors.default.IMAGE.elements.constrain);if(this.isPercentageValue(currentWidth)&&this.isPercentageValue(currentHeight))constrain.checked=currentWidth===currentHeight;else if(0===image.width||0===image.height)constrain.disabled="disabled";else{const widthRatio=Math.round(1e3*parseInt(currentWidth,10)/image.width),heightRatio=Math.round(1e3*parseInt(currentHeight,10)/image.height);constrain.checked=widthRatio===heightRatio}}loadPreviewImage(url){const image=new Image;image.addEventListener("error",(()=>{this.form.querySelector(_selectors.default.IMAGE.elements.preview).style.display="none"})),image.addEventListener("load",(()=>{this.storeImageDimensions(image),this.autoAdjustSize()})),image.src=url}urlChanged(){const input=this.form.querySelector(_selectors.default.IMAGE.elements.url);input.value&&this.loadPreviewImage(input.value)}hasErrorUrlField(){const urlError=""===this.form.querySelector(_selectors.default.IMAGE.elements.url).value;return this.toggleVisibility(_selectors.default.IMAGE.elements.urlWarning,urlError),this.toggleAriaInvalid([_selectors.default.IMAGE.elements.url],urlError),urlError}hasErrorAltField(){const alt=this.form.querySelector(_selectors.default.IMAGE.elements.alt).value,presentation=this.form.querySelector(_selectors.default.IMAGE.elements.presentation).checked,imageAltError=""===alt&&!presentation;return this.toggleVisibility(_selectors.default.IMAGE.elements.altWarning,imageAltError),this.toggleAriaInvalid([_selectors.default.IMAGE.elements.alt,_selectors.default.IMAGE.elements.presentation],imageAltError),imageAltError}toggleVisibility(selector,predicate){this.form.querySelectorAll(selector).forEach((element=>{element.style.display=predicate?"block":"none"}))}toggleAriaInvalid(selectors,predicate){selectors.forEach((selector=>{this.form.querySelectorAll(selector).forEach((element=>element.setAttribute("aria-invalid",predicate)))}))}getAlignmentClass(alignment){return alignment}updateWarning(){const urlError=this.hasErrorUrlField(),imageAltError=this.hasErrorAltField();return urlError||imageAltError}getImageContext(){if(this.updateWarning())return null;const classList=[];this.form.querySelector(_selectors.default.IMAGE.elements.constrain).value&&classList.push(_selectors.default.IMAGE.styles.responsive);const alignment=this.getAlignmentClass(this.form.querySelector(_selectors.default.IMAGE.elements.alignment).value);return classList.push(alignment),{url:this.form.querySelector(_selectors.default.IMAGE.elements.url).value,alt:this.form.querySelector(_selectors.default.IMAGE.elements.alt).value,width:this.form.querySelector(_selectors.default.IMAGE.elements.width).value,height:this.form.querySelector(_selectors.default.IMAGE.elements.height).value,presentation:this.form.querySelector(_selectors.default.IMAGE.elements.presentation).checked,customStyle:this.form.querySelector(_selectors.default.IMAGE.elements.customStyle).value,classlist:classList.join(" ")}}setImage(){if(""===this.form.querySelector(_selectors.default.IMAGE.elements.url).value)return;if(this.updateWarning())return;const width=this.form.querySelector(_selectors.default.IMAGE.elements.width).value;if(!this.isPercentageValue(width)&&isNaN(parseInt(width,10)))return void this.form.querySelector(_selectors.default.IMAGE.elements.width).focus();const height=this.form.querySelector(_selectors.default.IMAGE.elements.height).value;this.isPercentageValue(height)||!isNaN(parseInt(height,10))?_templates.default.render("tiny_media/image",this.getImageContext()).then((html=>(this.editor.insertContent(html),this.currentModal.destroy(),html))).catch():this.form.querySelector(_selectors.default.IMAGE.elements.height).focus()}handleKeyupCharacterCount(){const alt=this.form.querySelector(_selectors.default.IMAGE.elements.alt).value;this.form.querySelector("#currentcount").innerHTML=alt.length}autoAdjustSize(){let forceHeight=arguments.length>0&&void 0!==arguments[0]&&arguments[0];if(!this.rawImageDimensions)return;const widthField=this.form.querySelector(_selectors.default.IMAGE.elements.width),heightField=this.form.querySelector(_selectors.default.IMAGE.elements.height),normalizeFieldData=fieldData=>(fieldData.isPercentageValue=!!this.isPercentageValue(fieldData.field.value),fieldData.isPercentageValue?(fieldData.percentValue=parseInt(fieldData.field.value,10),fieldData.pixelSize=this.rawImageDimensions[fieldData.type]/100*fieldData.percentValue):(fieldData.pixelSize=parseInt(fieldData.field.value,10),fieldData.percentValue=fieldData.pixelSize/this.rawImageDimensions[fieldData.type]*100),fieldData),imagePreview=this.form.querySelector(_selectors.default.IMAGE.elements.preview);imagePreview.style.width="",imagePreview.style.height="";const constrainField=this.form.querySelector(_selectors.default.IMAGE.elements.constrain),keyField=(()=>{const currentValue=forceHeight?{field:heightField,type:"height"}:{field:widthField,type:"width"};return""===currentValue.field.value&&(currentValue.field.value=this.rawImageDimensions[currentValue.type]),normalizeFieldData(currentValue)})(),relativeField=normalizeFieldData(forceHeight?{field:widthField,type:"width"}:{field:heightField,type:"height"});constrainField.checked&&(keyField.isPercentageValue?(relativeField.field.value=keyField.field.value,relativeField.percentValue=keyField.percentValue):(relativeField.pixelSize=Math.round(keyField.pixelSize/this.rawImageDimensions[keyField.type]*this.rawImageDimensions[relativeField.type]),relativeField.field.value=relativeField.pixelSize)),function(image,keyField,relativeField){let forceHeight=arguments.length>3&&void 0!==arguments[3]&&arguments[3];const getStyleValue=field=>field.isPercentageValue?"".concat(field.percentValue,"%"):"".concat(field.pixelSize,"px");forceHeight?"width"===keyField.type?image.style.width=getStyleValue(keyField):image.style.width=getStyleValue(relativeField):(image.style[keyField.type]=getStyleValue(keyField),image.style[relativeField.type]=getStyleValue(relativeField))}(imagePreview,keyField,relativeField,!!constrainField.checked)}getSelectedImageProperties(){const image=this.getSelectedImage();if(!image)return this.selectedImage=null,null;const properties={src:null,alt:null,width:null,height:null,align:"",presentation:!1};this.removeLegacyAlignment(image),this.selectedImage=image,properties.customStyle=image.style.cssText;const width=(image=>this.isPercentageValue(String(image.width))?image.width:parseInt(image.width,10))(image);0!==width&&(properties.width=width);const height=(image=>this.isPercentageValue(String(image.height))?image.height:parseInt(image.height,10))(image);0!==height&&(properties.height=height);const alignment=this.getAlignmentProperties(image,properties);return alignment&&(properties.align=alignment.value),properties.src=image.getAttribute("src"),properties.alt=image.getAttribute("alt")||"",properties.presentation="presentation"===image.getAttribute("role"),properties}removeLegacyAlignment(imageNode){return imageNode.style.margin?(_selectors.default.IMAGE.alignments.some((alignment=>{if(imageNode.style[alignment.name]!==alignment.value)return!1;const normalisedNode=document.createElement("div");return normalisedNode.style.margin=alignment.margin,imageNode.style.margin===normalisedNode.style.margin&&(imageNode.classList.add(this.getAlignmentClass(alignment.value)),imageNode.style[alignment.name]=null,imageNode.style.margin=null,!0)})),imageNode):imageNode}getAlignmentProperties(image){const currentAlignment=_selectors.default.IMAGE.alignments.find((alignment=>!!image.classList.contains(this.getAlignmentClass(alignment.value))||!!alignment.legacyValues&&alignment.legacyValues.some((legacyValue=>image.classList.contains(legacyValue)))));return currentAlignment||_selectors.default.IMAGE.alignments.find((alignment=>alignment.isDefault))}getSelectedImage(){const imgElm=this.editor.selection.getNode(),figureElm=this.editor.dom.getParent(imgElm,"figure.image");return figureElm?this.editor.dom.select("img",figureElm)[0]:imgElm&&("IMG"!==imgElm.nodeName.toUpperCase()||this.isPlaceholderImage(imgElm))?null:imgElm}isPlaceholderImage(imgElm){return"IMG"===imgElm.nodeName.toUpperCase()&&(imgElm.hasAttribute("data-mce-object")||imgElm.hasAttribute("data-mce-placeholder"))}isPercentageValue(value){return value.match(/\d+%/)}async registerEventListeners(modal){await modal.getBody();const root=modal.getRoot()[0];this.form=root.querySelector(_selectors.default.IMAGE.elements.form),root.addEventListener("click",(e=>{const submitAction=e.target.closest(_selectors.default.IMAGE.actions.submit),imageBrowserAction=e.target.closest(_selectors.default.IMAGE.actions.imageBrowser);submitAction&&(e.preventDefault(),this.setImage()),imageBrowserAction&&this.canShowFilePicker&&(e.preventDefault(),(0,_utils.displayFilepicker)(this.editor,"image").then((params=>{this.filePickerCallback(params,this)})).catch())})),root.addEventListener("change",(e=>{e.target.closest(_selectors.default.IMAGE.elements.url)&&this.hasErrorUrlField();e.target.closest(_selectors.default.IMAGE.elements.presentation)&&this.hasErrorAltField();e.target.closest(_selectors.default.IMAGE.elements.constrain)&&this.autoAdjustSize(!0)})),root.addEventListener("blur",(e=>{if(e.target.nodeType===Node.ELEMENT_NODE){e.target.closest(_selectors.default.IMAGE.elements.url)&&this.urlChanged();e.target.closest(_selectors.default.IMAGE.elements.alt)&&this.hasErrorAltField();e.target.closest(_selectors.default.IMAGE.elements.width)&&this.autoAdjustSize();e.target.closest(_selectors.default.IMAGE.elements.height)&&this.autoAdjustSize(!0)}}),!0),root.addEventListener("keyup",(e=>{e.target.closest(_selectors.default.IMAGE.elements.alt)&&this.handleKeyupCharacterCount()}))}}})); //# sourceMappingURL=image.min.js.map \ No newline at end of file diff --git a/lib/editor/tiny/plugins/media/amd/build/image.min.js.map b/lib/editor/tiny/plugins/media/amd/build/image.min.js.map index dc0097fd619..c8453906496 100644 --- a/lib/editor/tiny/plugins/media/amd/build/image.min.js.map +++ b/lib/editor/tiny/plugins/media/amd/build/image.min.js.map @@ -1 +1 @@ -{"version":3,"file":"image.min.js","sources":["../src/image.js"],"sourcesContent":["// This file is part of Moodle - http://moodle.org/\n//\n// Moodle is free software: you can redistribute it and/or modify\n// it under the terms of the GNU General Public License as published by\n// the Free Software Foundation, either version 3 of the License, or\n// (at your option) any later version.\n//\n// Moodle is distributed in the hope that it will be useful,\n// but WITHOUT ANY WARRANTY; without even the implied warranty of\n// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n// GNU General Public License for more details.\n//\n// You should have received a copy of the GNU General Public License\n// along with Moodle. If not, see .\n\n/**\n * Tiny Media plugin Image class for Moodle.\n *\n * @module tiny_media/image\n * @copyright 2022 Huong Nguyen \n * @license http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later\n */\n\nimport Templates from 'core/templates';\nimport {get_string as getString, get_strings as getStrings} from 'core/str';\nimport * as ModalFactory from 'core/modal_factory';\nimport {displayFilepicker} from 'editor_tiny/utils';\nimport Selectors from './selectors';\nimport Modal from './imagemodal';\nimport {getImagePermissions} from './options';\nimport {component} from \"./common\";\n\nexport const MediaImage = class {\n\n DEFAULTS = {\n WIDTH: 160,\n HEIGHT: 160,\n };\n\n form = null;\n rawImageDimensions = null;\n canShowFilePicker = false;\n editor = null;\n currentModal = null;\n selectedImage = null;\n imageAlignment = null;\n\n constructor(editor) {\n const permissions = getImagePermissions(editor);\n this.canShowFilePicker = permissions.filepicker;\n this.editor = editor;\n }\n\n async displayDialogue() {\n // Reset the image dimensions.\n this.rawImageDimensions = null;\n\n const currentImageData = await this.getCurrentImageData();\n const modal = await ModalFactory.create({\n type: Modal.TYPE,\n title: getString('imageproperties', 'tiny_media'),\n templateContext: await this.getTemplateContext(currentImageData),\n removeOnClose: true,\n large: true,\n });\n\n this.currentModal = modal;\n if (currentImageData) {\n this.loadPreviewImage(currentImageData.src);\n }\n\n await this.registerEventListeners(modal);\n modal.show();\n }\n\n async getAlignmentTitles() {\n if (!this.alignmentTitles) {\n const [top, middle, bottom] = await getStrings([\n 'alignment_top',\n 'alignment_middle',\n 'alignment_bottom',\n ].map((key) => ({key, component})));\n\n this.alignmentTitles = {\n top,\n middle,\n bottom,\n };\n }\n\n return this.alignmentTitles;\n }\n\n async getImageAlignment(selected = '') {\n const titles = await this.getAlignmentTitles();\n const alignments = [\n {\n text: titles.top,\n value: 'align-top',\n },\n {\n text: titles.middle,\n value: 'align-middle',\n },\n {\n text: titles.bottom,\n value: 'align-bottom',\n },\n ];\n\n if (selected) {\n alignments.forEach((alignment, index, array) => {\n if (alignment.value === selected) {\n array[index].selected = true;\n }\n });\n }\n\n return alignments;\n }\n\n async getTemplateContext(data) {\n return {\n elementid: this.editor.id,\n showfilepicker: this.canShowFilePicker,\n alignoptions: await this.getImageAlignment(),\n ...data,\n };\n }\n\n async getCurrentImageData() {\n const selectedImageProperties = this.getSelectedImageProperties();\n if (!selectedImageProperties) {\n return {};\n }\n\n const properties = {...selectedImageProperties};\n if (properties.align) {\n properties.alignoptions = await this.getImageAlignment(properties.align);\n }\n\n if (properties.src) {\n properties.haspreview = true;\n }\n\n if (!properties.alt) {\n properties.presentation = true;\n }\n\n return properties;\n }\n\n filePickerCallback(params, self) {\n if (params.url !== '') {\n const input = self.form.querySelector(Selectors.IMAGE.elements.url);\n input.value = params.url;\n\n // Auto set the width and height.\n self.form.querySelector(Selectors.IMAGE.elements.width).value = '';\n self.form.querySelector(Selectors.IMAGE.elements.height).value = '';\n\n // Load the preview image.\n self.loadPreviewImage(params.url);\n }\n }\n\n storeImageDimensions(image) {\n // Store dimensions of the raw image, falling back to defaults for images without dimensions (e.g. SVG).\n this.rawImageDimensions = {\n width: image.width || this.DEFAULTS.WIDTH,\n height: image.height || this.DEFAULTS.HEIGHT,\n };\n\n const getCurrentWidth = (element) => {\n if (element.value === '') {\n element.value = this.rawImageDimensions.width;\n }\n return element.value;\n };\n const getCurrentHeight = (element) => {\n if (element.value === '') {\n element.value = this.rawImageDimensions.height;\n }\n return element.value;\n };\n\n const widthInput = this.form.querySelector(Selectors.IMAGE.elements.width);\n const currentWidth = getCurrentWidth(widthInput);\n\n const heightInput = this.form.querySelector(Selectors.IMAGE.elements.height);\n const currentHeight = getCurrentHeight(heightInput);\n\n const preview = this.form.querySelector(Selectors.IMAGE.elements.preview);\n preview.setAttribute('src', image.src);\n preview.style.display = 'inline';\n\n const constrain = this.form.querySelector(Selectors.IMAGE.elements.constrain);\n if (this.isPercentageValue(currentWidth) && this.isPercentageValue(currentHeight)) {\n constrain.checked = currentWidth === currentHeight;\n } else if (image.width === 0 || image.height === 0) {\n // If we don't have both dimensions of the image, we can't auto-size it, so disable control.\n constrain.disabled = 'disabled';\n } else {\n // This is the same as comparing to 3 decimal places.\n const widthRatio = Math.round(1000 * parseInt(currentWidth, 10) / image.width);\n const heightRatio = Math.round(1000 * parseInt(currentHeight, 10) / image.height);\n constrain.checked = widthRatio === heightRatio;\n }\n }\n\n loadPreviewImage(url) {\n const image = new Image();\n\n image.addEventListener('error', () => {\n const preview = this.form.querySelector(Selectors.IMAGE.elements.preview);\n preview.style.display = 'none';\n });\n image.addEventListener('load', () => {\n this.storeImageDimensions(image);\n this.autoAdjustSize();\n });\n\n image.src = url;\n }\n\n urlChanged() {\n const input = this.form.querySelector(Selectors.IMAGE.elements.url);\n\n if (input.value !== '') {\n // Load the preview image.\n this.loadPreviewImage(input.value);\n }\n }\n\n hasErrorUrlField() {\n const url = this.form.querySelector(Selectors.IMAGE.elements.url).value;\n const urlError = url === '';\n this.toggleVisibility(Selectors.IMAGE.elements.urlWarning, urlError);\n this.toggleAriaInvalid([Selectors.IMAGE.elements.url], urlError);\n\n return urlError;\n }\n\n hasErrorAltField() {\n const alt = this.form.querySelector(Selectors.IMAGE.elements.alt).value;\n const presentation = this.form.querySelector(Selectors.IMAGE.elements.presentation).checked;\n const imageAltError = alt === '' && !presentation;\n this.toggleVisibility(Selectors.IMAGE.elements.altWarning, imageAltError);\n this.toggleAriaInvalid([Selectors.IMAGE.elements.alt, Selectors.IMAGE.elements.presentation], imageAltError);\n\n return imageAltError;\n }\n\n toggleVisibility(selector, predicate) {\n const elements = this.form.querySelectorAll(selector);\n elements.forEach((element) => {\n element.style.display = predicate ? 'block' : 'none';\n });\n }\n\n toggleAriaInvalid(selectors, predicate) {\n selectors.forEach((selector) => {\n const elements = this.form.querySelectorAll(selector);\n elements.forEach((element) => element.setAttribute('aria-invalid', predicate));\n });\n }\n\n getAlignmentClass(alignment) {\n return alignment;\n }\n\n updateWarning() {\n const urlError = this.hasErrorUrlField();\n const imageAltError = this.hasErrorAltField();\n\n return urlError || imageAltError;\n }\n\n getImageContext() {\n // Check if there are any accessibility issues.\n if (this.updateWarning()) {\n return null;\n }\n\n const classList = [];\n\n const constrain = this.form.querySelector(Selectors.IMAGE.elements.constrain).value;\n if (constrain) {\n classList.push(Selectors.IMAGE.styles.responsive);\n }\n\n // Add the alignment class for the image.\n const alignment = this.getAlignmentClass(this.form.querySelector(Selectors.IMAGE.elements.alignment).value);\n classList.push(alignment);\n\n return {\n url: this.form.querySelector(Selectors.IMAGE.elements.url).value,\n alt: this.form.querySelector(Selectors.IMAGE.elements.alt).value,\n width: this.form.querySelector(Selectors.IMAGE.elements.width).value,\n height: this.form.querySelector(Selectors.IMAGE.elements.height).value,\n presentation: this.form.querySelector(Selectors.IMAGE.elements.presentation).checked,\n customStyle: this.form.querySelector(Selectors.IMAGE.elements.customStyle).value,\n classlist: classList.join(' '),\n };\n }\n\n setImage() {\n const url = this.form.querySelector(Selectors.IMAGE.elements.url).value;\n if (url === '') {\n return;\n }\n\n // Check if there are any accessibility issues.\n if (this.updateWarning()) {\n return;\n }\n\n // Check for invalid width or height.\n const width = this.form.querySelector(Selectors.IMAGE.elements.width).value;\n if (!this.isPercentageValue(width) && isNaN(parseInt(width, 10))) {\n this.form.querySelector(Selectors.IMAGE.elements.width).focus();\n return;\n }\n\n const height = this.form.querySelector(Selectors.IMAGE.elements.height).value;\n if (!this.isPercentageValue(height) && isNaN(parseInt(height, 10))) {\n this.form.querySelector(Selectors.IMAGE.elements.height).focus();\n return;\n }\n\n Templates.render('tiny_media/image', this.getImageContext())\n .then((html) => {\n this.editor.insertContent(html);\n this.currentModal.destroy();\n\n return html;\n })\n .catch();\n }\n\n handleKeyupCharacterCount() {\n const alt = this.form.querySelector(Selectors.IMAGE.elements.alt).value;\n const current = this.form.querySelector('#currentcount');\n current.innerHTML = alt.length;\n }\n\n autoAdjustSize(forceHeight = false) {\n // If we do not know the image size, do not do anything.\n if (!this.rawImageDimensions) {\n return;\n }\n\n const widthField = this.form.querySelector(Selectors.IMAGE.elements.width);\n const heightField = this.form.querySelector(Selectors.IMAGE.elements.height);\n const normalizeFieldData = (fieldData) => {\n fieldData.isPercentageValue = !!this.isPercentageValue(fieldData.field.value);\n if (fieldData.isPercentageValue) {\n fieldData.percentValue = parseInt(fieldData.field.value, 10);\n fieldData.pixelSize = this.rawImageDimensions[fieldData.type] / 100 * fieldData.percentValue;\n } else {\n fieldData.pixelSize = parseInt(fieldData.field.value, 10);\n fieldData.percentValue = fieldData.pixelSize / this.rawImageDimensions[fieldData.type] * 100;\n }\n\n return fieldData;\n };\n\n const getKeyField = () => {\n const getValue = () => {\n if (forceHeight) {\n return {\n field: heightField,\n type: 'height',\n };\n } else {\n return {\n field: widthField,\n type: 'width',\n };\n }\n };\n\n const currentValue = getValue();\n if (currentValue.field.value === '') {\n currentValue.field.value = this.rawImageDimensions[currentValue.type];\n }\n\n return normalizeFieldData(currentValue);\n };\n\n const getRelativeField = () => {\n if (forceHeight) {\n return normalizeFieldData({\n field: widthField,\n type: 'width',\n });\n } else {\n return normalizeFieldData({\n field: heightField,\n type: 'height',\n });\n }\n };\n\n\n const setImageDimensions = (image, keyField, relativeField, forceHeight = false) => {\n const getStyleValue = (field) => field.isPercentageValue ? `${field.percentValue}%` : `${field.pixelSize}px`;\n\n // If the values are constrained, then only update the width.\n if (forceHeight) {\n if (keyField.type === 'width') {\n image.style.width = getStyleValue(keyField);\n } else {\n image.style.width = getStyleValue(relativeField);\n }\n } else {\n image.style[keyField.type] = getStyleValue(keyField);\n image.style[relativeField.type] = getStyleValue(relativeField);\n }\n };\n\n const imagePreview = this.form.querySelector(Selectors.IMAGE.elements.preview);\n // Clear the existing preview sizes.\n imagePreview.style.width = '';\n imagePreview.style.height = '';\n\n // Now update with the new values.\n const constrainField = this.form.querySelector(Selectors.IMAGE.elements.constrain);\n const keyField = getKeyField();\n const relativeField = getRelativeField();\n if (constrainField.checked) {\n // We are keeping the image in proportion.\n // Calculate the size for the relative field.\n if (keyField.isPercentageValue) {\n // In proportion, so the percentages are the same.\n relativeField.field.value = keyField.field.value;\n relativeField.percentValue = keyField.percentValue;\n } else {\n relativeField.pixelSize = Math.round(\n keyField.pixelSize / this.rawImageDimensions[keyField.type] * this.rawImageDimensions[relativeField.type]\n );\n relativeField.field.value = relativeField.pixelSize;\n }\n }\n setImageDimensions(imagePreview, keyField, relativeField, !!constrainField.checked);\n }\n\n getSelectedImageProperties() {\n const image = this.getSelectedImage();\n if (!image) {\n this.selectedImage = null;\n return null;\n }\n\n const properties = {\n src: null,\n alt: null,\n width: null,\n height: null,\n align: '',\n presentation: false,\n };\n\n const getImageHeight = (image) => {\n if (!this.isPercentageValue(String(image.height))) {\n return parseInt(image.height, 10);\n }\n\n return image.height;\n };\n\n const getImageWidth = (image) => {\n if (!this.isPercentageValue(String(image.width))) {\n return parseInt(image.width, 10);\n }\n\n return image.width;\n };\n\n // Get the current selection.\n this.removeLegacyAlignment(image);\n this.selectedImage = image;\n\n properties.customStyle = image.style.cssText;\n\n const width = getImageWidth(image);\n if (width !== 0) {\n properties.width = width;\n }\n\n const height = getImageHeight(image);\n if (height !== 0) {\n properties.height = height;\n }\n\n const alignment = this.getAlignmentProperties(image, properties);\n if (alignment) {\n properties.align = alignment.value;\n }\n\n properties.src = image.getAttribute('src');\n properties.alt = image.getAttribute('alt') || '';\n properties.presentation = (image.getAttribute('role') === 'presentation');\n\n return properties;\n }\n\n removeLegacyAlignment(imageNode) {\n if (!imageNode.style.margin) {\n // There is no margin therefore this cannot match any known alignments.\n return imageNode;\n }\n\n Selectors.IMAGE.alignments.some(alignment => {\n if (imageNode.style[alignment.name] !== alignment.value) {\n // The name/value do not match. Skip.\n return false;\n }\n const normalisedNode = document.createElement('div');\n normalisedNode.style.margin = alignment.margin;\n if (imageNode.style.margin !== normalisedNode.style.margin) {\n // The margin does not match.\n return false;\n }\n\n imageNode.classList.add(this.getAlignmentClass(alignment.value));\n imageNode.style[alignment.name] = null;\n imageNode.style.margin = null;\n\n return true;\n });\n\n return imageNode;\n }\n\n getAlignmentProperties(image) {\n const currentAlignment = Selectors.IMAGE.alignments.find((alignment) => {\n if (image.classList.contains(this.getAlignmentClass(alignment.value))) {\n return true;\n }\n\n if (alignment.legacyValues) {\n return alignment.legacyValues.some((legacyValue) => image.classList.contains(legacyValue));\n }\n\n return false;\n });\n if (currentAlignment) {\n return currentAlignment;\n }\n\n return Selectors.IMAGE.alignments.find((alignment) => alignment.isDefault);\n }\n\n getSelectedImage() {\n const imgElm = this.editor.selection.getNode();\n const figureElm = this.editor.dom.getParent(imgElm, 'figure.image');\n if (figureElm) {\n return this.editor.dom.select('img', figureElm)[0];\n }\n\n if (imgElm && (imgElm.nodeName.toUpperCase() !== 'IMG' || this.isPlaceholderImage(imgElm))) {\n return null;\n }\n return imgElm;\n }\n\n isPlaceholderImage(imgElm) {\n if (imgElm.nodeName.toUpperCase() !== 'IMG') {\n return false;\n }\n\n return (imgElm.hasAttribute('data-mce-object') || imgElm.hasAttribute('data-mce-placeholder'));\n }\n\n isPercentageValue(value) {\n return value.match(/\\d+%/);\n }\n\n async registerEventListeners(modal) {\n await modal.getBody();\n const root = modal.getRoot()[0];\n\n this.form = root.querySelector(Selectors.IMAGE.elements.form);\n root.addEventListener('click', (e) => {\n const submitAction = e.target.closest(Selectors.IMAGE.actions.submit);\n const imageBrowserAction = e.target.closest(Selectors.IMAGE.actions.imageBrowser);\n if (submitAction) {\n e.preventDefault();\n this.setImage();\n }\n if (imageBrowserAction && this.canShowFilePicker) {\n e.preventDefault();\n displayFilepicker(this.editor, 'image').then((params) => {\n const self = this;\n this.filePickerCallback(params, self);\n\n return;\n }).catch();\n }\n });\n\n root.addEventListener('change', (e) => {\n const urlEle = e.target.closest(Selectors.IMAGE.elements.url);\n if (urlEle) {\n this.hasErrorUrlField();\n }\n\n const presentationEle = e.target.closest(Selectors.IMAGE.elements.presentation);\n if (presentationEle) {\n this.hasErrorAltField();\n }\n\n const constrainEle = e.target.closest(Selectors.IMAGE.elements.constrain);\n if (constrainEle) {\n this.autoAdjustSize(true);\n }\n });\n\n root.addEventListener('blur', (e) => {\n if (e.target.nodeType === Node.ELEMENT_NODE) {\n const urlEle = e.target.closest(Selectors.IMAGE.elements.url);\n if (urlEle) {\n this.urlChanged();\n }\n\n const altEle = e.target.closest(Selectors.IMAGE.elements.alt);\n if (altEle) {\n this.hasErrorAltField();\n }\n\n const widthEle = e.target.closest(Selectors.IMAGE.elements.width);\n if (widthEle) {\n this.autoAdjustSize();\n }\n\n const heightEle = e.target.closest(Selectors.IMAGE.elements.height);\n if (heightEle) {\n this.autoAdjustSize(true);\n }\n }\n }, true);\n\n // Character count.\n root.addEventListener('keyup', (e) => {\n const altEle = e.target.closest(Selectors.IMAGE.elements.alt);\n if (altEle) {\n this.handleKeyupCharacterCount();\n }\n });\n }\n};\n"],"names":["constructor","editor","WIDTH","HEIGHT","permissions","canShowFilePicker","filepicker","rawImageDimensions","currentImageData","this","getCurrentImageData","modal","ModalFactory","create","type","Modal","TYPE","title","templateContext","getTemplateContext","removeOnClose","large","currentModal","loadPreviewImage","src","registerEventListeners","show","alignmentTitles","top","middle","bottom","map","key","component","selected","titles","getAlignmentTitles","alignments","text","value","forEach","alignment","index","array","data","elementid","id","showfilepicker","alignoptions","getImageAlignment","selectedImageProperties","getSelectedImageProperties","properties","align","haspreview","alt","presentation","filePickerCallback","params","self","url","form","querySelector","Selectors","IMAGE","elements","width","height","storeImageDimensions","image","DEFAULTS","currentWidth","element","getCurrentWidth","currentHeight","getCurrentHeight","preview","setAttribute","style","display","constrain","isPercentageValue","checked","disabled","widthRatio","Math","round","parseInt","heightRatio","Image","addEventListener","autoAdjustSize","urlChanged","input","hasErrorUrlField","urlError","toggleVisibility","urlWarning","toggleAriaInvalid","hasErrorAltField","imageAltError","altWarning","selector","predicate","querySelectorAll","selectors","getAlignmentClass","updateWarning","getImageContext","classList","push","styles","responsive","customStyle","classlist","join","setImage","isNaN","focus","render","then","html","insertContent","destroy","catch","handleKeyupCharacterCount","innerHTML","length","forceHeight","widthField","heightField","normalizeFieldData","fieldData","field","percentValue","pixelSize","imagePreview","constrainField","keyField","currentValue","getKeyField","relativeField","getStyleValue","setImageDimensions","getSelectedImage","selectedImage","removeLegacyAlignment","cssText","String","getImageWidth","getImageHeight","getAlignmentProperties","getAttribute","imageNode","margin","some","name","normalisedNode","document","createElement","add","currentAlignment","find","contains","legacyValues","legacyValue","isDefault","imgElm","selection","getNode","figureElm","dom","getParent","select","nodeName","toUpperCase","isPlaceholderImage","hasAttribute","match","getBody","root","getRoot","e","submitAction","target","closest","actions","submit","imageBrowserAction","imageBrowser","preventDefault","nodeType","Node","ELEMENT_NODE"],"mappings":"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"} \ No newline at end of file +{"version":3,"file":"image.min.js","sources":["../src/image.js"],"sourcesContent":["// This file is part of Moodle - http://moodle.org/\n//\n// Moodle is free software: you can redistribute it and/or modify\n// it under the terms of the GNU General Public License as published by\n// the Free Software Foundation, either version 3 of the License, or\n// (at your option) any later version.\n//\n// Moodle is distributed in the hope that it will be useful,\n// but WITHOUT ANY WARRANTY; without even the implied warranty of\n// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n// GNU General Public License for more details.\n//\n// You should have received a copy of the GNU General Public License\n// along with Moodle. If not, see .\n\n/**\n * Tiny Media plugin Image class for Moodle.\n *\n * @module tiny_media/image\n * @copyright 2022 Huong Nguyen \n * @license http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later\n */\n\nimport Templates from 'core/templates';\nimport {get_string as getString, get_strings as getStrings} from 'core/str';\nimport * as ModalFactory from 'core/modal_factory';\nimport {displayFilepicker} from 'editor_tiny/utils';\nimport Selectors from './selectors';\nimport Modal from './imagemodal';\nimport {getImagePermissions} from './options';\nimport {component} from \"./common\";\n\nexport const MediaImage = class {\n\n DEFAULTS = {\n WIDTH: 160,\n HEIGHT: 160,\n };\n\n form = null;\n rawImageDimensions = null;\n canShowFilePicker = false;\n editor = null;\n currentModal = null;\n selectedImage = null;\n imageAlignment = null;\n\n constructor(editor) {\n const permissions = getImagePermissions(editor);\n this.canShowFilePicker = permissions.filepicker;\n this.editor = editor;\n }\n\n async displayDialogue() {\n // Reset the image dimensions.\n this.rawImageDimensions = null;\n\n const currentImageData = await this.getCurrentImageData();\n const modal = await ModalFactory.create({\n type: Modal.TYPE,\n title: getString('imageproperties', 'tiny_media'),\n templateContext: await this.getTemplateContext(currentImageData),\n removeOnClose: true,\n large: true,\n });\n\n this.currentModal = modal;\n if (currentImageData && currentImageData.src) {\n this.loadPreviewImage(currentImageData.src);\n }\n\n await this.registerEventListeners(modal);\n modal.show();\n }\n\n async getAlignmentTitles() {\n if (!this.alignmentTitles) {\n const [top, middle, bottom] = await getStrings([\n 'alignment_top',\n 'alignment_middle',\n 'alignment_bottom',\n ].map((key) => ({key, component})));\n\n this.alignmentTitles = {\n top,\n middle,\n bottom,\n };\n }\n\n return this.alignmentTitles;\n }\n\n async getImageAlignment(selected = '') {\n const titles = await this.getAlignmentTitles();\n const alignments = [\n {\n text: titles.top,\n value: 'align-top',\n },\n {\n text: titles.middle,\n value: 'align-middle',\n },\n {\n text: titles.bottom,\n value: 'align-bottom',\n },\n ];\n\n if (selected) {\n alignments.forEach((alignment, index, array) => {\n if (alignment.value === selected) {\n array[index].selected = true;\n }\n });\n }\n\n return alignments;\n }\n\n async getTemplateContext(data) {\n return {\n elementid: this.editor.id,\n showfilepicker: this.canShowFilePicker,\n alignoptions: await this.getImageAlignment(),\n ...data,\n };\n }\n\n async getCurrentImageData() {\n const selectedImageProperties = this.getSelectedImageProperties();\n if (!selectedImageProperties) {\n return {};\n }\n\n const properties = {...selectedImageProperties};\n if (properties.align) {\n properties.alignoptions = await this.getImageAlignment(properties.align);\n }\n\n if (properties.src) {\n properties.haspreview = true;\n }\n\n if (!properties.alt) {\n properties.presentation = true;\n }\n\n return properties;\n }\n\n filePickerCallback(params, self) {\n if (params.url) {\n const input = self.form.querySelector(Selectors.IMAGE.elements.url);\n input.value = params.url;\n\n // Auto set the width and height.\n self.form.querySelector(Selectors.IMAGE.elements.width).value = '';\n self.form.querySelector(Selectors.IMAGE.elements.height).value = '';\n\n // Load the preview image.\n self.loadPreviewImage(params.url);\n }\n }\n\n storeImageDimensions(image) {\n // Store dimensions of the raw image, falling back to defaults for images without dimensions (e.g. SVG).\n this.rawImageDimensions = {\n width: image.width || this.DEFAULTS.WIDTH,\n height: image.height || this.DEFAULTS.HEIGHT,\n };\n\n const getCurrentWidth = (element) => {\n if (element.value === '') {\n element.value = this.rawImageDimensions.width;\n }\n return element.value;\n };\n const getCurrentHeight = (element) => {\n if (element.value === '') {\n element.value = this.rawImageDimensions.height;\n }\n return element.value;\n };\n\n const widthInput = this.form.querySelector(Selectors.IMAGE.elements.width);\n const currentWidth = getCurrentWidth(widthInput);\n\n const heightInput = this.form.querySelector(Selectors.IMAGE.elements.height);\n const currentHeight = getCurrentHeight(heightInput);\n\n const preview = this.form.querySelector(Selectors.IMAGE.elements.preview);\n preview.setAttribute('src', image.src);\n preview.style.display = 'inline';\n\n const constrain = this.form.querySelector(Selectors.IMAGE.elements.constrain);\n if (this.isPercentageValue(currentWidth) && this.isPercentageValue(currentHeight)) {\n constrain.checked = currentWidth === currentHeight;\n } else if (image.width === 0 || image.height === 0) {\n // If we don't have both dimensions of the image, we can't auto-size it, so disable control.\n constrain.disabled = 'disabled';\n } else {\n // This is the same as comparing to 3 decimal places.\n const widthRatio = Math.round(1000 * parseInt(currentWidth, 10) / image.width);\n const heightRatio = Math.round(1000 * parseInt(currentHeight, 10) / image.height);\n constrain.checked = widthRatio === heightRatio;\n }\n }\n\n loadPreviewImage(url) {\n const image = new Image();\n\n image.addEventListener('error', () => {\n const preview = this.form.querySelector(Selectors.IMAGE.elements.preview);\n preview.style.display = 'none';\n });\n image.addEventListener('load', () => {\n this.storeImageDimensions(image);\n this.autoAdjustSize();\n });\n\n image.src = url;\n }\n\n urlChanged() {\n const input = this.form.querySelector(Selectors.IMAGE.elements.url);\n\n if (input.value) {\n // Load the preview image.\n this.loadPreviewImage(input.value);\n }\n }\n\n hasErrorUrlField() {\n const url = this.form.querySelector(Selectors.IMAGE.elements.url).value;\n const urlError = url === '';\n this.toggleVisibility(Selectors.IMAGE.elements.urlWarning, urlError);\n this.toggleAriaInvalid([Selectors.IMAGE.elements.url], urlError);\n\n return urlError;\n }\n\n hasErrorAltField() {\n const alt = this.form.querySelector(Selectors.IMAGE.elements.alt).value;\n const presentation = this.form.querySelector(Selectors.IMAGE.elements.presentation).checked;\n const imageAltError = alt === '' && !presentation;\n this.toggleVisibility(Selectors.IMAGE.elements.altWarning, imageAltError);\n this.toggleAriaInvalid([Selectors.IMAGE.elements.alt, Selectors.IMAGE.elements.presentation], imageAltError);\n\n return imageAltError;\n }\n\n toggleVisibility(selector, predicate) {\n const elements = this.form.querySelectorAll(selector);\n elements.forEach((element) => {\n element.style.display = predicate ? 'block' : 'none';\n });\n }\n\n toggleAriaInvalid(selectors, predicate) {\n selectors.forEach((selector) => {\n const elements = this.form.querySelectorAll(selector);\n elements.forEach((element) => element.setAttribute('aria-invalid', predicate));\n });\n }\n\n getAlignmentClass(alignment) {\n return alignment;\n }\n\n updateWarning() {\n const urlError = this.hasErrorUrlField();\n const imageAltError = this.hasErrorAltField();\n\n return urlError || imageAltError;\n }\n\n getImageContext() {\n // Check if there are any accessibility issues.\n if (this.updateWarning()) {\n return null;\n }\n\n const classList = [];\n\n const constrain = this.form.querySelector(Selectors.IMAGE.elements.constrain).value;\n if (constrain) {\n classList.push(Selectors.IMAGE.styles.responsive);\n }\n\n // Add the alignment class for the image.\n const alignment = this.getAlignmentClass(this.form.querySelector(Selectors.IMAGE.elements.alignment).value);\n classList.push(alignment);\n\n return {\n url: this.form.querySelector(Selectors.IMAGE.elements.url).value,\n alt: this.form.querySelector(Selectors.IMAGE.elements.alt).value,\n width: this.form.querySelector(Selectors.IMAGE.elements.width).value,\n height: this.form.querySelector(Selectors.IMAGE.elements.height).value,\n presentation: this.form.querySelector(Selectors.IMAGE.elements.presentation).checked,\n customStyle: this.form.querySelector(Selectors.IMAGE.elements.customStyle).value,\n classlist: classList.join(' '),\n };\n }\n\n setImage() {\n const url = this.form.querySelector(Selectors.IMAGE.elements.url).value;\n if (url === '') {\n return;\n }\n\n // Check if there are any accessibility issues.\n if (this.updateWarning()) {\n return;\n }\n\n // Check for invalid width or height.\n const width = this.form.querySelector(Selectors.IMAGE.elements.width).value;\n if (!this.isPercentageValue(width) && isNaN(parseInt(width, 10))) {\n this.form.querySelector(Selectors.IMAGE.elements.width).focus();\n return;\n }\n\n const height = this.form.querySelector(Selectors.IMAGE.elements.height).value;\n if (!this.isPercentageValue(height) && isNaN(parseInt(height, 10))) {\n this.form.querySelector(Selectors.IMAGE.elements.height).focus();\n return;\n }\n\n Templates.render('tiny_media/image', this.getImageContext())\n .then((html) => {\n this.editor.insertContent(html);\n this.currentModal.destroy();\n\n return html;\n })\n .catch();\n }\n\n handleKeyupCharacterCount() {\n const alt = this.form.querySelector(Selectors.IMAGE.elements.alt).value;\n const current = this.form.querySelector('#currentcount');\n current.innerHTML = alt.length;\n }\n\n autoAdjustSize(forceHeight = false) {\n // If we do not know the image size, do not do anything.\n if (!this.rawImageDimensions) {\n return;\n }\n\n const widthField = this.form.querySelector(Selectors.IMAGE.elements.width);\n const heightField = this.form.querySelector(Selectors.IMAGE.elements.height);\n const normalizeFieldData = (fieldData) => {\n fieldData.isPercentageValue = !!this.isPercentageValue(fieldData.field.value);\n if (fieldData.isPercentageValue) {\n fieldData.percentValue = parseInt(fieldData.field.value, 10);\n fieldData.pixelSize = this.rawImageDimensions[fieldData.type] / 100 * fieldData.percentValue;\n } else {\n fieldData.pixelSize = parseInt(fieldData.field.value, 10);\n fieldData.percentValue = fieldData.pixelSize / this.rawImageDimensions[fieldData.type] * 100;\n }\n\n return fieldData;\n };\n\n const getKeyField = () => {\n const getValue = () => {\n if (forceHeight) {\n return {\n field: heightField,\n type: 'height',\n };\n } else {\n return {\n field: widthField,\n type: 'width',\n };\n }\n };\n\n const currentValue = getValue();\n if (currentValue.field.value === '') {\n currentValue.field.value = this.rawImageDimensions[currentValue.type];\n }\n\n return normalizeFieldData(currentValue);\n };\n\n const getRelativeField = () => {\n if (forceHeight) {\n return normalizeFieldData({\n field: widthField,\n type: 'width',\n });\n } else {\n return normalizeFieldData({\n field: heightField,\n type: 'height',\n });\n }\n };\n\n\n const setImageDimensions = (image, keyField, relativeField, forceHeight = false) => {\n const getStyleValue = (field) => field.isPercentageValue ? `${field.percentValue}%` : `${field.pixelSize}px`;\n\n // If the values are constrained, then only update the width.\n if (forceHeight) {\n if (keyField.type === 'width') {\n image.style.width = getStyleValue(keyField);\n } else {\n image.style.width = getStyleValue(relativeField);\n }\n } else {\n image.style[keyField.type] = getStyleValue(keyField);\n image.style[relativeField.type] = getStyleValue(relativeField);\n }\n };\n\n const imagePreview = this.form.querySelector(Selectors.IMAGE.elements.preview);\n // Clear the existing preview sizes.\n imagePreview.style.width = '';\n imagePreview.style.height = '';\n\n // Now update with the new values.\n const constrainField = this.form.querySelector(Selectors.IMAGE.elements.constrain);\n const keyField = getKeyField();\n const relativeField = getRelativeField();\n if (constrainField.checked) {\n // We are keeping the image in proportion.\n // Calculate the size for the relative field.\n if (keyField.isPercentageValue) {\n // In proportion, so the percentages are the same.\n relativeField.field.value = keyField.field.value;\n relativeField.percentValue = keyField.percentValue;\n } else {\n relativeField.pixelSize = Math.round(\n keyField.pixelSize / this.rawImageDimensions[keyField.type] * this.rawImageDimensions[relativeField.type]\n );\n relativeField.field.value = relativeField.pixelSize;\n }\n }\n setImageDimensions(imagePreview, keyField, relativeField, !!constrainField.checked);\n }\n\n getSelectedImageProperties() {\n const image = this.getSelectedImage();\n if (!image) {\n this.selectedImage = null;\n return null;\n }\n\n const properties = {\n src: null,\n alt: null,\n width: null,\n height: null,\n align: '',\n presentation: false,\n };\n\n const getImageHeight = (image) => {\n if (!this.isPercentageValue(String(image.height))) {\n return parseInt(image.height, 10);\n }\n\n return image.height;\n };\n\n const getImageWidth = (image) => {\n if (!this.isPercentageValue(String(image.width))) {\n return parseInt(image.width, 10);\n }\n\n return image.width;\n };\n\n // Get the current selection.\n this.removeLegacyAlignment(image);\n this.selectedImage = image;\n\n properties.customStyle = image.style.cssText;\n\n const width = getImageWidth(image);\n if (width !== 0) {\n properties.width = width;\n }\n\n const height = getImageHeight(image);\n if (height !== 0) {\n properties.height = height;\n }\n\n const alignment = this.getAlignmentProperties(image, properties);\n if (alignment) {\n properties.align = alignment.value;\n }\n\n properties.src = image.getAttribute('src');\n properties.alt = image.getAttribute('alt') || '';\n properties.presentation = (image.getAttribute('role') === 'presentation');\n\n return properties;\n }\n\n removeLegacyAlignment(imageNode) {\n if (!imageNode.style.margin) {\n // There is no margin therefore this cannot match any known alignments.\n return imageNode;\n }\n\n Selectors.IMAGE.alignments.some(alignment => {\n if (imageNode.style[alignment.name] !== alignment.value) {\n // The name/value do not match. Skip.\n return false;\n }\n const normalisedNode = document.createElement('div');\n normalisedNode.style.margin = alignment.margin;\n if (imageNode.style.margin !== normalisedNode.style.margin) {\n // The margin does not match.\n return false;\n }\n\n imageNode.classList.add(this.getAlignmentClass(alignment.value));\n imageNode.style[alignment.name] = null;\n imageNode.style.margin = null;\n\n return true;\n });\n\n return imageNode;\n }\n\n getAlignmentProperties(image) {\n const currentAlignment = Selectors.IMAGE.alignments.find((alignment) => {\n if (image.classList.contains(this.getAlignmentClass(alignment.value))) {\n return true;\n }\n\n if (alignment.legacyValues) {\n return alignment.legacyValues.some((legacyValue) => image.classList.contains(legacyValue));\n }\n\n return false;\n });\n if (currentAlignment) {\n return currentAlignment;\n }\n\n return Selectors.IMAGE.alignments.find((alignment) => alignment.isDefault);\n }\n\n getSelectedImage() {\n const imgElm = this.editor.selection.getNode();\n const figureElm = this.editor.dom.getParent(imgElm, 'figure.image');\n if (figureElm) {\n return this.editor.dom.select('img', figureElm)[0];\n }\n\n if (imgElm && (imgElm.nodeName.toUpperCase() !== 'IMG' || this.isPlaceholderImage(imgElm))) {\n return null;\n }\n return imgElm;\n }\n\n isPlaceholderImage(imgElm) {\n if (imgElm.nodeName.toUpperCase() !== 'IMG') {\n return false;\n }\n\n return (imgElm.hasAttribute('data-mce-object') || imgElm.hasAttribute('data-mce-placeholder'));\n }\n\n isPercentageValue(value) {\n return value.match(/\\d+%/);\n }\n\n async registerEventListeners(modal) {\n await modal.getBody();\n const root = modal.getRoot()[0];\n\n this.form = root.querySelector(Selectors.IMAGE.elements.form);\n root.addEventListener('click', (e) => {\n const submitAction = e.target.closest(Selectors.IMAGE.actions.submit);\n const imageBrowserAction = e.target.closest(Selectors.IMAGE.actions.imageBrowser);\n if (submitAction) {\n e.preventDefault();\n this.setImage();\n }\n if (imageBrowserAction && this.canShowFilePicker) {\n e.preventDefault();\n displayFilepicker(this.editor, 'image').then((params) => {\n const self = this;\n this.filePickerCallback(params, self);\n\n return;\n }).catch();\n }\n });\n\n root.addEventListener('change', (e) => {\n const urlEle = e.target.closest(Selectors.IMAGE.elements.url);\n if (urlEle) {\n this.hasErrorUrlField();\n }\n\n const presentationEle = e.target.closest(Selectors.IMAGE.elements.presentation);\n if (presentationEle) {\n this.hasErrorAltField();\n }\n\n const constrainEle = e.target.closest(Selectors.IMAGE.elements.constrain);\n if (constrainEle) {\n this.autoAdjustSize(true);\n }\n });\n\n root.addEventListener('blur', (e) => {\n if (e.target.nodeType === Node.ELEMENT_NODE) {\n const urlEle = e.target.closest(Selectors.IMAGE.elements.url);\n if (urlEle) {\n this.urlChanged();\n }\n\n const altEle = e.target.closest(Selectors.IMAGE.elements.alt);\n if (altEle) {\n this.hasErrorAltField();\n }\n\n const widthEle = e.target.closest(Selectors.IMAGE.elements.width);\n if (widthEle) {\n this.autoAdjustSize();\n }\n\n const heightEle = e.target.closest(Selectors.IMAGE.elements.height);\n if (heightEle) {\n this.autoAdjustSize(true);\n }\n }\n }, true);\n\n // Character count.\n root.addEventListener('keyup', (e) => {\n const altEle = e.target.closest(Selectors.IMAGE.elements.alt);\n if (altEle) {\n this.handleKeyupCharacterCount();\n }\n });\n }\n};\n"],"names":["constructor","editor","WIDTH","HEIGHT","permissions","canShowFilePicker","filepicker","rawImageDimensions","currentImageData","this","getCurrentImageData","modal","ModalFactory","create","type","Modal","TYPE","title","templateContext","getTemplateContext","removeOnClose","large","currentModal","src","loadPreviewImage","registerEventListeners","show","alignmentTitles","top","middle","bottom","map","key","component","selected","titles","getAlignmentTitles","alignments","text","value","forEach","alignment","index","array","data","elementid","id","showfilepicker","alignoptions","getImageAlignment","selectedImageProperties","getSelectedImageProperties","properties","align","haspreview","alt","presentation","filePickerCallback","params","self","url","form","querySelector","Selectors","IMAGE","elements","width","height","storeImageDimensions","image","DEFAULTS","currentWidth","element","getCurrentWidth","currentHeight","getCurrentHeight","preview","setAttribute","style","display","constrain","isPercentageValue","checked","disabled","widthRatio","Math","round","parseInt","heightRatio","Image","addEventListener","autoAdjustSize","urlChanged","input","hasErrorUrlField","urlError","toggleVisibility","urlWarning","toggleAriaInvalid","hasErrorAltField","imageAltError","altWarning","selector","predicate","querySelectorAll","selectors","getAlignmentClass","updateWarning","getImageContext","classList","push","styles","responsive","customStyle","classlist","join","setImage","isNaN","focus","render","then","html","insertContent","destroy","catch","handleKeyupCharacterCount","innerHTML","length","forceHeight","widthField","heightField","normalizeFieldData","fieldData","field","percentValue","pixelSize","imagePreview","constrainField","keyField","currentValue","getKeyField","relativeField","getStyleValue","setImageDimensions","getSelectedImage","selectedImage","removeLegacyAlignment","cssText","String","getImageWidth","getImageHeight","getAlignmentProperties","getAttribute","imageNode","margin","some","name","normalisedNode","document","createElement","add","currentAlignment","find","contains","legacyValues","legacyValue","isDefault","imgElm","selection","getNode","figureElm","dom","getParent","select","nodeName","toUpperCase","isPlaceholderImage","hasAttribute","match","getBody","root","getRoot","e","submitAction","target","closest","actions","submit","imageBrowserAction","imageBrowser","preventDefault","nodeType","Node","ELEMENT_NODE"],"mappings":"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"} \ No newline at end of file diff --git a/lib/editor/tiny/plugins/media/amd/src/image.js b/lib/editor/tiny/plugins/media/amd/src/image.js index 91a8c9f814e..e80c178068f 100644 --- a/lib/editor/tiny/plugins/media/amd/src/image.js +++ b/lib/editor/tiny/plugins/media/amd/src/image.js @@ -65,7 +65,7 @@ export const MediaImage = class { }); this.currentModal = modal; - if (currentImageData) { + if (currentImageData && currentImageData.src) { this.loadPreviewImage(currentImageData.src); } @@ -151,7 +151,7 @@ export const MediaImage = class { } filePickerCallback(params, self) { - if (params.url !== '') { + if (params.url) { const input = self.form.querySelector(Selectors.IMAGE.elements.url); input.value = params.url; @@ -226,7 +226,7 @@ export const MediaImage = class { urlChanged() { const input = this.form.querySelector(Selectors.IMAGE.elements.url); - if (input.value !== '') { + if (input.value) { // Load the preview image. this.loadPreviewImage(input.value); } diff --git a/lib/editor/tiny/plugins/media/templates/insert_image_modal.mustache b/lib/editor/tiny/plugins/media/templates/insert_image_modal.mustache index a8993d8f7f4..22241b4d917 100644 --- a/lib/editor/tiny/plugins/media/templates/insert_image_modal.mustache +++ b/lib/editor/tiny/plugins/media/templates/insert_image_modal.mustache @@ -97,7 +97,10 @@
- +