suneditor
Advanced tools
Comparing version 2.45.1 to 2.46.0
| { | ||
| "name": "suneditor", | ||
| "version": "2.45.1", | ||
| "version": "2.46.0", | ||
| "description": "Vanilla javascript based WYSIWYG web editor, with no dependencies", | ||
@@ -33,2 +33,3 @@ "author": "JiHong.Lee", | ||
| "@babel/core": "^7.21.3", | ||
| "@octokit/rest": "^20.1.0", | ||
| "@webpack-cli/init": "^0.2.2", | ||
@@ -40,2 +41,3 @@ "babel-loader": "^8.1.0", | ||
| "csstype": "^2.6.13", | ||
| "dotenv": "^16.4.5", | ||
| "file-loader": "^2.0.0", | ||
@@ -49,3 +51,3 @@ "html-webpack-plugin": "^3.2.0", | ||
| "karma-jasmine": "^1.1.2", | ||
| "katex": "^0.11.1", | ||
| "katex": "^0.16.10", | ||
| "mini-css-extract-plugin": "^0.4.5", | ||
@@ -59,3 +61,2 @@ "optimize-css-assets-webpack-plugin": "^5.0.4", | ||
| }, | ||
| "dependencies": {}, | ||
| "keywords": [ | ||
@@ -62,0 +63,0 @@ "wysiwyg", |
@@ -87,2 +87,8 @@ /* | ||
| /// focus temp | ||
| const focusTemp = doc.createElement('INPUT'); | ||
| focusTemp.tabIndex = -1; | ||
| focusTemp.style.width = '0 !important'; | ||
| focusTemp.style.height = '0 !important'; | ||
| // toolbar container | ||
@@ -113,2 +119,3 @@ const toolbarContainer = options.toolbarContainer; | ||
| relative.appendChild(line_breaker_b); | ||
| relative.appendChild(focusTemp); | ||
| if (resizing_bar && !resizingBarContainer) relative.appendChild(resizing_bar); | ||
@@ -140,3 +147,4 @@ top_div.appendChild(relative); | ||
| _stickyDummy: sticky_dummy, | ||
| _arrow: arrow | ||
| _arrow: arrow, | ||
| _focusTemp: focusTemp | ||
| }, | ||
@@ -313,2 +321,3 @@ options: options, | ||
| wysiwygDiv.setAttribute('contenteditable', true); | ||
| wysiwygDiv.setAttribute('autocorrect', "off"); | ||
| wysiwygDiv.setAttribute('scrolling', 'auto'); | ||
@@ -414,2 +423,3 @@ for (let key in options.iframeAttributes) { | ||
| /** Values */ | ||
| options.strictMode = options.strictMode !== false; | ||
| options.lang = options.lang || _defaultLang; | ||
@@ -416,0 +426,0 @@ options.value = typeof options.value === 'string' ? options.value : null; |
@@ -43,3 +43,4 @@ /* | ||
| _stickyDummy: cons._stickyDummy, | ||
| _arrow: cons._arrow | ||
| _arrow: cons._arrow, | ||
| _focusTemp: cons._focusTemp | ||
| }, | ||
@@ -46,0 +47,0 @@ tool: { |
@@ -609,3 +609,3 @@ import { History } from './history.d'; | ||
| * @description Remove events from document. | ||
| * When created as an Iframe, the event of the document inside the Iframe is also removed. | ||
| * When created as an Iframe, the event of the document inside the Iframe is also removed. | ||
| * @param type Event type | ||
@@ -925,2 +925,35 @@ * @param listener Event listener | ||
| /** | ||
| * @description Called when the audio image delete before. | ||
| * "false" is returned, the event will be aborted. | ||
| * @param targetElement target element | ||
| * @param container target's container | ||
| * @param dataIndex target's dataIndex | ||
| * @param core Core object | ||
| * @returns {boolean|undefined} | ||
| */ | ||
| onAudioDeleteBefore: (targetElement: Element, container: Element, dataIndex: number, core: Core) => boolean; | ||
| /** | ||
| * @description Called when the image image delete before. | ||
| * "false" is returned, the event will be aborted. | ||
| * @param targetElement target element | ||
| * @param container target's container | ||
| * @param dataIndex target's dataIndex | ||
| * @param core Core object | ||
| * @returns {boolean|undefined} | ||
| */ | ||
| onImageDeleteBefore: (targetElement: Element, container: Element, dataIndex: number, core: Core) => boolean; | ||
| /** | ||
| * @description Called when the image image delete before. | ||
| * "false" is returned, the event will be aborted. | ||
| * @param targetElement target element | ||
| * @param container target's container | ||
| * @param dataIndex target's dataIndex | ||
| * @param core Core object | ||
| * @returns {boolean|undefined} | ||
| */ | ||
| onVideoDeleteBefore: (targetElement: Element, container: Element, dataIndex: number, core: Core) => boolean; | ||
| /** | ||
| * @description Called when the audio upload failed | ||
@@ -927,0 +960,0 @@ * @param height Height after resized (px) |
@@ -211,4 +211,6 @@ /* | ||
| const dataIndex = element.getAttribute('data-index') * 1; | ||
| if (typeof this.functions.onAudioDeleteBefore === 'function' && (this.functions.onAudioDeleteBefore(element, container, dataIndex, this) === false)) return; | ||
| const focusEl = (container.previousElementSibling || container.nextElementSibling); | ||
| const emptyDiv = container.parentNode; | ||
@@ -215,0 +217,0 @@ this.util.removeItem(container); |
@@ -246,3 +246,3 @@ /* | ||
| this.altText.value = target.alt; | ||
| this._v_src._linkValue = this.previewSrc.textContent = this.imgUrlFile.value = target.src; | ||
| this._v_src._linkValue = this.previewSrc.textContent = this.imgUrlFile.value = target.getAttribute('data-value') || target.src; | ||
| this.imgUrlFile.focus(); | ||
@@ -277,2 +277,6 @@ }, | ||
| const dataIndex = imageEl.getAttribute('data-index') * 1; | ||
| // event | ||
| if (typeof this.functions.onImageDeleteBefore === 'function' && (this.functions.onImageDeleteBefore(imageEl, imageContainer, dataIndex, this) === false)) return; | ||
| let focusEl = (imageContainer.previousElementSibling || imageContainer.nextElementSibling); | ||
@@ -521,2 +525,8 @@ | ||
| try { | ||
| if (filesLen === 0) { | ||
| this.closeLoading(); | ||
| console.warn('[SUNEDITOR.image.base64.fail] cause : No applicable files'); | ||
| return; | ||
| } | ||
| this.context.image.base64RenderIndex = filesLen; | ||
@@ -799,2 +809,3 @@ const wFileReader = this._w.FileReader; | ||
| } else { | ||
| existElement = this.util.isFigures(existElement.parentNode) ? existElement.parentNode : existElement; | ||
| existElement.parentNode.replaceChild(container, existElement); | ||
@@ -801,0 +812,0 @@ } |
@@ -280,4 +280,6 @@ /* | ||
| const dataIndex = frame.getAttribute('data-index') * 1; | ||
| if (typeof this.functions.onVideoDeleteBefore === 'function' && (this.functions.onVideoDeleteBefore(frame, container, dataIndex, this) === false)) return; | ||
| let focusEl = (container.previousElementSibling || container.nextElementSibling); | ||
| const emptyDiv = container.parentNode; | ||
@@ -572,3 +574,3 @@ this.util.removeItem(container); | ||
| contextVideo._element = oFrame = newTag; | ||
| } else if (!isYoutube && !isVimeo && !/^videoo$/i.test(oFrame.nodeName)) { | ||
| } else if (!isYoutube && !isVimeo && !/^video$/i.test(oFrame.nodeName)) { | ||
| const newTag = this.plugins.video.createVideoTag.call(this); | ||
@@ -575,0 +577,0 @@ newTag.src = src; |
@@ -306,3 +306,3 @@ /* | ||
| const reservedProtocol = /^(mailto\:|tel\:|sms\:|https*\:\/\/|#)/.test(value) || value.indexOf(protocol) === 0; | ||
| const sameProtocol = !protocol ? false : this._w.RegExp('^' + value.substr(0, protocol.length)).test(protocol); | ||
| const sameProtocol = !protocol ? false : this._w.RegExp('^' + this.util.escapeStringRegexp(value.substr(0, protocol.length))).test(protocol); | ||
| value = context.linkValue = preview.textContent = !value ? '' : noPrefix ? value : (protocol && !reservedProtocol && !sameProtocol) ? protocol + value : reservedProtocol ? value : /^www\./.test(value) ? 'http://' + value : this.context.anchor.host + (/^\//.test(value) ? '' : '/') + value; | ||
@@ -309,0 +309,0 @@ |
@@ -80,14 +80,14 @@ /* | ||
| }; | ||
| /** resize controller, button */ | ||
| let resize_div_container = this.setController_resize(core); | ||
| context.resizing.resizeContainer = resize_div_container; | ||
| context.resizing.resizeDiv = resize_div_container.querySelector('.se-modal-resize'); | ||
| context.resizing.resizeDot = resize_div_container.querySelector('.se-resize-dot'); | ||
| context.resizing.resizeDisplay = resize_div_container.querySelector('.se-resize-display'); | ||
| let resize_button = this.setController_button(core); | ||
| context.resizing.resizeButton = resize_button; | ||
| let resize_handles = context.resizing.resizeHandles = context.resizing.resizeDot.querySelectorAll('span'); | ||
@@ -97,10 +97,10 @@ context.resizing.resizeButtonGroup = resize_button.querySelector('._se_resizing_btn_group'); | ||
| context.resizing.percentageButtons = resize_button.querySelectorAll('._se_resizing_btn_group ._se_percentage'); | ||
| context.resizing.alignMenu = resize_button.querySelector('.se-resizing-align-list'); | ||
| context.resizing.alignMenuList = context.resizing.alignMenu.querySelectorAll('button'); | ||
| context.resizing.alignButton = resize_button.querySelector('._se_resizing_align_button'); | ||
| context.resizing.autoSizeButton = resize_button.querySelector('._se_resizing_btn_group ._se_auto_size'); | ||
| context.resizing.captionButton = resize_button.querySelector('._se_resizing_caption_button'); | ||
| /** add event listeners */ | ||
@@ -117,15 +117,15 @@ resize_div_container.addEventListener('mousedown', function (e) { e.preventDefault(); }); | ||
| resize_button.addEventListener('click', this.onClick_resizeButton.bind(core)); | ||
| /** append html */ | ||
| context.element.relative.appendChild(resize_div_container); | ||
| context.element.relative.appendChild(resize_button); | ||
| /** empty memory */ | ||
| resize_div_container = null, resize_button = null, resize_handles = null; | ||
| }, | ||
| /** resize controller, button (image, iframe, video) */ | ||
| setController_resize: function (core) { | ||
| const resize_container = core.util.createElement('DIV'); | ||
| resize_container.className = 'se-controller se-resizing-container'; | ||
@@ -136,16 +136,16 @@ resize_container.style.display = 'none'; | ||
| '<div class="se-resize-dot">' + | ||
| '<span class="tl"></span>' + | ||
| '<span class="tr"></span>' + | ||
| '<span class="bl"></span>' + | ||
| '<span class="br"></span>' + | ||
| '<span class="lw"></span>' + | ||
| '<span class="th"></span>' + | ||
| '<span class="rw"></span>' + | ||
| '<span class="bh"></span>' + | ||
| '<div class="se-resize-display"></div>' + | ||
| '<span class="tl"></span>' + | ||
| '<span class="tr"></span>' + | ||
| '<span class="bl"></span>' + | ||
| '<span class="br"></span>' + | ||
| '<span class="lw"></span>' + | ||
| '<span class="th"></span>' + | ||
| '<span class="rw"></span>' + | ||
| '<span class="bh"></span>' + | ||
| '<div class="se-resize-display"></div>' + | ||
| '</div>'; | ||
| return resize_container; | ||
| }, | ||
| setController_button: function (core) { | ||
@@ -155,3 +155,3 @@ const lang = core.lang; | ||
| const resize_button = core.util.createElement("DIV"); | ||
| resize_button.className = "se-controller se-controller-resizing"; | ||
@@ -161,83 +161,83 @@ resize_button.innerHTML = '' + | ||
| '<div class="se-btn-group _se_resizing_btn_group">' + | ||
| '<button type="button" data-command="percent" data-value="1" class="se-tooltip _se_percentage">' + | ||
| '<span>100%</span>' + | ||
| '<span class="se-tooltip-inner"><span class="se-tooltip-text">' + lang.controller.resize100 + '</span></span>' + | ||
| '</button>' + | ||
| '<button type="button" data-command="percent" data-value="0.75" class="se-tooltip _se_percentage">' + | ||
| '<span>75%</span>' + | ||
| '<span class="se-tooltip-inner"><span class="se-tooltip-text">' + lang.controller.resize75 + '</span></span>' + | ||
| '</button>' + | ||
| '<button type="button" data-command="percent" data-value="0.5" class="se-tooltip _se_percentage">' + | ||
| '<span>50%</span>' + | ||
| '<span class="se-tooltip-inner"><span class="se-tooltip-text">' + lang.controller.resize50 + '</span></span>' + | ||
| '</button>' + | ||
| '<button type="button" data-command="auto" class="se-btn se-tooltip _se_auto_size">' + | ||
| icons.auto_size + | ||
| '<span class="se-tooltip-inner"><span class="se-tooltip-text">' + lang.controller.autoSize + '</span></span>' + | ||
| '</button>' + | ||
| '<button type="button" data-command="rotate" data-value="-90" class="se-btn se-tooltip _se_rotation">' + | ||
| icons.rotate_left + | ||
| '<span class="se-tooltip-inner"><span class="se-tooltip-text">' + lang.controller.rotateLeft + '</span></span>' + | ||
| '</button>' + | ||
| '<button type="button" data-command="rotate" data-value="90" class="se-btn se-tooltip _se_rotation">' + | ||
| icons.rotate_right + | ||
| '<span class="se-tooltip-inner"><span class="se-tooltip-text">' + lang.controller.rotateRight + '</span></span>' + | ||
| '</button>' + | ||
| '<button type="button" data-command="percent" data-value="1" class="se-tooltip _se_percentage">' + | ||
| '<span>100%</span>' + | ||
| '<span class="se-tooltip-inner"><span class="se-tooltip-text">' + lang.controller.resize100 + '</span></span>' + | ||
| '</button>' + | ||
| '<button type="button" data-command="percent" data-value="0.75" class="se-tooltip _se_percentage">' + | ||
| '<span>75%</span>' + | ||
| '<span class="se-tooltip-inner"><span class="se-tooltip-text">' + lang.controller.resize75 + '</span></span>' + | ||
| '</button>' + | ||
| '<button type="button" data-command="percent" data-value="0.5" class="se-tooltip _se_percentage">' + | ||
| '<span>50%</span>' + | ||
| '<span class="se-tooltip-inner"><span class="se-tooltip-text">' + lang.controller.resize50 + '</span></span>' + | ||
| '</button>' + | ||
| '<button type="button" data-command="auto" class="se-btn se-tooltip _se_auto_size">' + | ||
| icons.auto_size + | ||
| '<span class="se-tooltip-inner"><span class="se-tooltip-text">' + lang.controller.autoSize + '</span></span>' + | ||
| '</button>' + | ||
| '<button type="button" data-command="rotate" data-value="-90" class="se-btn se-tooltip _se_rotation">' + | ||
| icons.rotate_left + | ||
| '<span class="se-tooltip-inner"><span class="se-tooltip-text">' + lang.controller.rotateLeft + '</span></span>' + | ||
| '</button>' + | ||
| '<button type="button" data-command="rotate" data-value="90" class="se-btn se-tooltip _se_rotation">' + | ||
| icons.rotate_right + | ||
| '<span class="se-tooltip-inner"><span class="se-tooltip-text">' + lang.controller.rotateRight + '</span></span>' + | ||
| '</button>' + | ||
| '</div>' + | ||
| '<div class="se-btn-group" style="padding-top: 0;">' + | ||
| '<button type="button" data-command="mirror" data-value="h" class="se-btn se-tooltip">' + | ||
| icons.mirror_horizontal + | ||
| '<span class="se-tooltip-inner"><span class="se-tooltip-text">' + lang.controller.mirrorHorizontal + '</span></span>' + | ||
| '</button>' + | ||
| '<button type="button" data-command="mirror" data-value="v" class="se-btn se-tooltip">' + | ||
| icons.mirror_vertical + | ||
| '<span class="se-tooltip-inner"><span class="se-tooltip-text">' + lang.controller.mirrorVertical + '</span></span>' + | ||
| '</button>' + | ||
| '<button type="button" data-command="onalign" class="se-btn se-tooltip _se_resizing_align_button">' + | ||
| icons.align_justify + | ||
| '<span class="se-tooltip-inner"><span class="se-tooltip-text">' + lang.toolbar.align + '</span></span>' + | ||
| '</button>' + | ||
| '<div class="se-btn-group-sub sun-editor-common se-list-layer se-resizing-align-list">' + | ||
| '<div class="se-list-inner">' + | ||
| '<ul class="se-list-basic">' + | ||
| '<li><button type="button" class="se-btn-list se-tooltip" data-command="align" data-value="basic">' + | ||
| icons.align_justify + | ||
| '<span class="se-tooltip-inner"><span class="se-tooltip-text">' + lang.dialogBox.basic + '</span></span>' + | ||
| '</button></li>' + | ||
| '<li><button type="button" class="se-btn-list se-tooltip" data-command="align" data-value="left">' + | ||
| icons.align_left + | ||
| '<span class="se-tooltip-inner"><span class="se-tooltip-text">' + lang.dialogBox.left + '</span></span>' + | ||
| '</button></li>' + | ||
| '<li><button type="button" class="se-btn-list se-tooltip" data-command="align" data-value="center">' + | ||
| icons.align_center + | ||
| '<span class="se-tooltip-inner"><span class="se-tooltip-text">' + lang.dialogBox.center + '</span></span>' + | ||
| '</button></li>' + | ||
| '<li><button type="button" class="se-btn-list se-tooltip" data-command="align" data-value="right">' + | ||
| icons.align_right + | ||
| '<span class="se-tooltip-inner"><span class="se-tooltip-text">' + lang.dialogBox.right + '</span></span>' + | ||
| '</button></li>' + | ||
| '</ul>' + | ||
| '</div>' + | ||
| '</div>' + | ||
| '<button type="button" data-command="caption" class="se-btn se-tooltip _se_resizing_caption_button">' + | ||
| icons.caption + | ||
| '<span class="se-tooltip-inner"><span class="se-tooltip-text">' + lang.dialogBox.caption + '</span></span>' + | ||
| '</button>' + | ||
| '<button type="button" data-command="revert" class="se-btn se-tooltip">' + | ||
| icons.revert + | ||
| '<span class="se-tooltip-inner"><span class="se-tooltip-text">' + lang.dialogBox.revertButton + '</span></span>' + | ||
| '</button>' + | ||
| '<button type="button" data-command="update" class="se-btn se-tooltip">' + | ||
| icons.modify + | ||
| '<span class="se-tooltip-inner"><span class="se-tooltip-text">' + lang.controller.edit + '</span></span>' + | ||
| '</button>' + | ||
| '<button type="button" data-command="delete" class="se-btn se-tooltip">' + | ||
| icons.delete + | ||
| '<span class="se-tooltip-inner"><span class="se-tooltip-text">' + lang.controller.remove + '</span></span>' + | ||
| '</button>' + | ||
| '<button type="button" data-command="mirror" data-value="h" class="se-btn se-tooltip">' + | ||
| icons.mirror_horizontal + | ||
| '<span class="se-tooltip-inner"><span class="se-tooltip-text">' + lang.controller.mirrorHorizontal + '</span></span>' + | ||
| '</button>' + | ||
| '<button type="button" data-command="mirror" data-value="v" class="se-btn se-tooltip">' + | ||
| icons.mirror_vertical + | ||
| '<span class="se-tooltip-inner"><span class="se-tooltip-text">' + lang.controller.mirrorVertical + '</span></span>' + | ||
| '</button>' + | ||
| '<button type="button" data-command="onalign" class="se-btn se-tooltip _se_resizing_align_button">' + | ||
| icons.align_justify + | ||
| '<span class="se-tooltip-inner"><span class="se-tooltip-text">' + lang.toolbar.align + '</span></span>' + | ||
| '</button>' + | ||
| '<div class="se-btn-group-sub sun-editor-common se-list-layer se-resizing-align-list">' + | ||
| '<div class="se-list-inner">' + | ||
| '<ul class="se-list-basic">' + | ||
| '<li><button type="button" class="se-btn-list se-tooltip" data-command="align" data-value="basic">' + | ||
| icons.align_justify + | ||
| '<span class="se-tooltip-inner"><span class="se-tooltip-text">' + lang.dialogBox.basic + '</span></span>' + | ||
| '</button></li>' + | ||
| '<li><button type="button" class="se-btn-list se-tooltip" data-command="align" data-value="left">' + | ||
| icons.align_left + | ||
| '<span class="se-tooltip-inner"><span class="se-tooltip-text">' + lang.dialogBox.left + '</span></span>' + | ||
| '</button></li>' + | ||
| '<li><button type="button" class="se-btn-list se-tooltip" data-command="align" data-value="center">' + | ||
| icons.align_center + | ||
| '<span class="se-tooltip-inner"><span class="se-tooltip-text">' + lang.dialogBox.center + '</span></span>' + | ||
| '</button></li>' + | ||
| '<li><button type="button" class="se-btn-list se-tooltip" data-command="align" data-value="right">' + | ||
| icons.align_right + | ||
| '<span class="se-tooltip-inner"><span class="se-tooltip-text">' + lang.dialogBox.right + '</span></span>' + | ||
| '</button></li>' + | ||
| '</ul>' + | ||
| '</div>' + | ||
| '</div>' + | ||
| '<button type="button" data-command="caption" class="se-btn se-tooltip _se_resizing_caption_button">' + | ||
| icons.caption + | ||
| '<span class="se-tooltip-inner"><span class="se-tooltip-text">' + lang.dialogBox.caption + '</span></span>' + | ||
| '</button>' + | ||
| '<button type="button" data-command="revert" class="se-btn se-tooltip">' + | ||
| icons.revert + | ||
| '<span class="se-tooltip-inner"><span class="se-tooltip-text">' + lang.dialogBox.revertButton + '</span></span>' + | ||
| '</button>' + | ||
| '<button type="button" data-command="update" class="se-btn se-tooltip">' + | ||
| icons.modify + | ||
| '<span class="se-tooltip-inner"><span class="se-tooltip-text">' + lang.controller.edit + '</span></span>' + | ||
| '</button>' + | ||
| '<button type="button" data-command="delete" class="se-btn se-tooltip">' + | ||
| icons.delete + | ||
| '<span class="se-tooltip-inner"><span class="se-tooltip-text">' + lang.controller.remove + '</span></span>' + | ||
| '</button>' + | ||
| '</div>'; | ||
| return resize_button; | ||
| }, | ||
| /** | ||
@@ -255,8 +255,8 @@ * @description Gets the width size | ||
| if (!container) container = contextPlugin._container; | ||
| if (!element) return ''; | ||
| return !/%$/.test(element.style.width) ? element.style.width : ((container && this.util.getNumber(container.style.width, 2)) || 100) + '%'; | ||
| }, | ||
| /** | ||
@@ -274,5 +274,5 @@ * @description Gets the height size | ||
| if (!container) container = contextPlugin._container; | ||
| if (!container || !cover) return (element && element.style.height) || ''; | ||
| return this.util.getNumber(cover.style.paddingBottom, 0) > 0 && !this.context.resizing._rotateVertical ? cover.style.height : (!/%$/.test(element.style.height) || !/%$/.test(element.style.width) ? element.style.height : ((container && this.util.getNumber(container.style.height, 2)) || 100) + '%'); | ||
@@ -289,3 +289,3 @@ }, | ||
| contextPlugin.proportion.checked = contextPlugin._proportionChecked = contextPlugin._element.getAttribute('data-proportion') !== 'false'; | ||
| let x = percentageRotation ? '' : this.plugins.resizing._module_getSizeX.call(this, contextPlugin); | ||
@@ -296,3 +296,3 @@ if (x === contextPlugin._defaultSizeX) x = ''; | ||
| pluginObj.setInputSize.call(this, 'x'); | ||
| if (!contextPlugin._onlyPercentage) { | ||
@@ -304,10 +304,10 @@ let y = percentageRotation ? '' : this.plugins.resizing._module_getSizeY.call(this, contextPlugin); | ||
| } | ||
| contextPlugin.inputX.disabled = percentageRotation ? true : false; | ||
| contextPlugin.inputY.disabled = percentageRotation ? true : false; | ||
| contextPlugin.proportion.disabled = percentageRotation ? true : false; | ||
| pluginObj.setRatio.call(this); | ||
| }, | ||
| /** | ||
@@ -325,11 +325,11 @@ * @description It is called in "setInputSize" (input tag keyupEvent), | ||
| } | ||
| if (contextPlugin.proportion.checked && contextPlugin._ratio && /\d/.test(contextPlugin.inputX.value) && /\d/.test(contextPlugin.inputY.value)) { | ||
| const xUnit = contextPlugin.inputX.value.replace(/\d+|\./g, '') || contextPlugin.sizeUnit; | ||
| const yUnit = contextPlugin.inputY.value.replace(/\d+|\./g, '') || contextPlugin.sizeUnit; | ||
| if (xUnit !== yUnit) return; | ||
| const dec = xUnit === '%' ? 2 : 0; | ||
| if (xy === 'x') { | ||
@@ -342,3 +342,3 @@ contextPlugin.inputY.value = this.util.getNumber(contextPlugin._ratioY * this.util.getNumber(contextPlugin.inputX.value, dec), dec) + yUnit; | ||
| }, | ||
| /** | ||
@@ -352,7 +352,7 @@ * @description It is called in "setRatio" (input and proportionCheck tags changeEvent), | ||
| const yValue = contextPlugin.inputY.value; | ||
| if (contextPlugin.proportion.checked && /\d+/.test(xValue) && /\d+/.test(yValue)) { | ||
| const xUnit = xValue.replace(/\d+|\./g, '') || contextPlugin.sizeUnit; | ||
| const yUnit = yValue.replace(/\d+|\./g, '') || contextPlugin.sizeUnit; | ||
| if (xUnit !== yUnit) { | ||
@@ -363,3 +363,3 @@ contextPlugin._ratio = false; | ||
| const y = this.util.getNumber(yValue, 0); | ||
| contextPlugin._ratio = true; | ||
@@ -373,3 +373,3 @@ contextPlugin._ratioX = x / y; | ||
| }, | ||
| /** | ||
@@ -387,3 +387,3 @@ * @description Revert size of element to origin size (plugin._origin_w, plugin._origin_h) | ||
| }, | ||
| /** | ||
@@ -397,6 +397,9 @@ * @description Save the size data (element.setAttribute("data-size")) | ||
| const y = this.plugins.resizing._module_getSizeY.call(this, contextPlugin); | ||
| // add too width, height attribute | ||
| contextPlugin._element.setAttribute('width', x.replace('px', '')); | ||
| contextPlugin._element.setAttribute('height', y.replace('px', '')); | ||
| contextPlugin._element.setAttribute('data-size', x + ',' + y); | ||
| if (!!contextPlugin._videoRatio) contextPlugin._videoRatio = y; | ||
| }, | ||
| /** | ||
@@ -412,9 +415,9 @@ * @description Call the resizing module | ||
| contextResizing._resize_plugin = plugin; | ||
| const resizeContainer = contextResizing.resizeContainer; | ||
| const resizeDiv = contextResizing.resizeDiv; | ||
| const offset = this.util.getOffset(targetElement, this.context.element.wysiwygFrame); | ||
| const isVertical = contextResizing._rotateVertical = /^(90|270)$/.test(Math.abs(targetElement.getAttribute('data-rotate')).toString()); | ||
| const w = isVertical ? targetElement.offsetHeight : targetElement.offsetWidth; | ||
@@ -424,3 +427,3 @@ const h = isVertical ? targetElement.offsetWidth : targetElement.offsetHeight; | ||
| const l = offset.left - this.context.element.wysiwygFrame.scrollLeft; | ||
| resizeContainer.style.top = t + 'px'; | ||
@@ -430,3 +433,3 @@ resizeContainer.style.left = l + 'px'; | ||
| resizeContainer.style.height = h + 'px'; | ||
| resizeDiv.style.top = '0px'; | ||
@@ -436,6 +439,6 @@ resizeDiv.style.left = '0px'; | ||
| resizeDiv.style.height = h + 'px'; | ||
| let align = targetElement.getAttribute('data-align') || 'basic'; | ||
| align = align === 'none' ? 'basic' : align; | ||
| // text | ||
@@ -447,3 +450,3 @@ const container = this.util.getParentElement(targetElement, this.util.isComponent); | ||
| this.util.changeTxt(contextResizing.resizeDisplay, this.lang.dialogBox[align] + ' (' + displayX + displayY + ')'); | ||
| // resizing display | ||
@@ -456,3 +459,3 @@ contextResizing.resizeButtonGroup.style.display = contextPlugin._resizing ? '' : 'none'; | ||
| } | ||
| if (contextPlugin._resizing) { | ||
@@ -462,3 +465,3 @@ const rotations = contextResizing.rotationButtons; | ||
| } | ||
| // align icon | ||
@@ -476,3 +479,3 @@ if (contextPlugin._alignHide) { | ||
| } | ||
| // percentage active | ||
@@ -488,3 +491,3 @@ const pButtons = contextResizing.percentageButtons; | ||
| } | ||
| // caption display, active | ||
@@ -513,12 +516,16 @@ if (!contextPlugin._captionShow) { | ||
| this.setControllerPosition(contextResizing.resizeButton, resizeContainer, 'bottom', addOffset); | ||
| this.controllersOn(resizeContainer, contextResizing.resizeButton, this.util.setDisabledButtons.bind(this.util, false, this.resizingDisabledButtons), targetElement, plugin); | ||
| const onControlsOff = function () { | ||
| this.util.setDisabledButtons.call(this.util, false, this.resizingDisabledButtons); | ||
| this.history._resetCachingButton(); | ||
| }; | ||
| this.controllersOn(resizeContainer, contextResizing.resizeButton, onControlsOff.bind(this), targetElement, plugin); | ||
| this.util.setDisabledButtons(true, this.resizingDisabledButtons); | ||
| contextResizing._resize_w = w; | ||
| contextResizing._resize_h = h; | ||
| const originSize = (targetElement.getAttribute('origin-size') || '').split(','); | ||
| contextResizing._origin_w = originSize[0] || targetElement.naturalWidth; | ||
| contextResizing._origin_h = originSize[1] || targetElement.naturalHeight; | ||
| return { | ||
@@ -531,3 +538,3 @@ w: w, | ||
| }, | ||
| _closeAlignMenu: null, | ||
@@ -544,3 +551,3 @@ | ||
| this.context.resizing.alignMenu.style.display = 'block'; | ||
| this.plugins.resizing._closeAlignMenu = function () { | ||
@@ -552,6 +559,6 @@ this.util.removeClass(this.context.resizing.alignButton, 'on'); | ||
| }.bind(this); | ||
| this.addDocEvent('click', this.plugins.resizing._closeAlignMenu); | ||
| }, | ||
| /** | ||
@@ -564,10 +571,10 @@ * @description Click event of resizing toolbar | ||
| e.stopPropagation(); | ||
| const target = e.target; | ||
| const command = target.getAttribute('data-command') || target.parentNode.getAttribute('data-command'); | ||
| if (!command) return; | ||
| const value = target.getAttribute('data-value') || target.parentNode.getAttribute('data-value'); | ||
| const pluginName = this.context.resizing._resize_plugin; | ||
@@ -577,5 +584,5 @@ const currentContext = this.context[pluginName]; | ||
| const currentModule = this.plugins[pluginName]; | ||
| e.preventDefault(); | ||
| if (typeof this.plugins.resizing._closeAlignMenu === 'function') { | ||
@@ -585,3 +592,3 @@ this.plugins.resizing._closeAlignMenu(); | ||
| } | ||
| switch (command) { | ||
@@ -599,3 +606,3 @@ case 'auto': | ||
| } | ||
| this.plugins.resizing.resetTransform.call(this, contextEl); | ||
@@ -609,3 +616,3 @@ currentModule.setPercentSize.call(this, (value * 100), (this.util.getNumber(percentY, 0) === null || !/%$/.test(percentY)) ? '' : percentY); | ||
| let y = contextEl.getAttribute('data-rotateY') || ''; | ||
| if ((value === 'h' && !this.context.resizing._rotateVertical) || (value === 'v' && this.context.resizing._rotateVertical)) { | ||
@@ -616,6 +623,6 @@ y = y ? '' : '180'; | ||
| } | ||
| contextEl.setAttribute('data-rotateX', x); | ||
| contextEl.setAttribute('data-rotateY', y); | ||
| this.plugins.resizing._setTransForm(contextEl, r, x, y); | ||
@@ -627,7 +634,7 @@ break; | ||
| const deg = this._w.Math.abs(slope) >= 360 ? 0 : slope; | ||
| contextEl.setAttribute('data-rotate', deg); | ||
| contextResizing._rotateVertical = /^(90|270)$/.test(this._w.Math.abs(deg).toString()); | ||
| this.plugins.resizing.setTransformSize.call(this, contextEl, null, null); | ||
| this.selectComponent(contextEl, pluginName); | ||
@@ -647,5 +654,5 @@ break; | ||
| currentContext._captionChecked = currentContext.captionCheckEl.checked = caption; | ||
| currentModule.update_image.call(this, false, false, false); | ||
| if (caption) { | ||
@@ -655,3 +662,3 @@ const captionText = this.util.getChildElement(currentContext._caption, function (current) { | ||
| }); | ||
| if (!captionText) { | ||
@@ -662,3 +669,3 @@ currentContext._caption.focus(); | ||
| } | ||
| this.controllersOff(); | ||
@@ -669,3 +676,3 @@ } else { | ||
| } | ||
| break; | ||
@@ -684,7 +691,7 @@ case 'revert': | ||
| } | ||
| // history stack | ||
| this.history.push(false); | ||
| }, | ||
| /** | ||
@@ -697,3 +704,3 @@ * @description Initialize the transform style (rotation) of the element. | ||
| this.context.resizing._rotateVertical = false; | ||
| element.style.maxWidth = ''; | ||
@@ -705,6 +712,6 @@ element.style.transform = ''; | ||
| element.setAttribute('data-rotateY', ''); | ||
| this.plugins[this.context.resizing._resize_plugin].setSize.call(this, size[0] ? size[0] : 'auto', size[1] ? size[1] : '', true); | ||
| }, | ||
| /** | ||
@@ -721,3 +728,3 @@ * @description Set the transform style (rotation) of the element. | ||
| let transOrigin = ''; | ||
| if (percentage && !isVertical) { | ||
@@ -732,3 +739,3 @@ percentage = percentage.split(','); | ||
| const cover = this.util.getParentElement(element, 'FIGURE'); | ||
| const offsetW = width || element.offsetWidth; | ||
@@ -738,32 +745,32 @@ const offsetH = height || element.offsetHeight; | ||
| const h = (isVertical ? offsetW : offsetH) + 'px'; | ||
| this.plugins[this.context.resizing._resize_plugin].cancelPercentAttr.call(this); | ||
| this.plugins[this.context.resizing._resize_plugin].setSize.call(this, offsetW + 'px', offsetH + 'px', true); | ||
| cover.style.width = w; | ||
| cover.style.height = (!!this.context[this.context.resizing._resize_plugin]._caption ? '' : h); | ||
| if (isVertical) { | ||
| let transW = (offsetW/2) + 'px ' + (offsetW/2) + 'px 0'; | ||
| let transH = (offsetH/2) + 'px ' + (offsetH/2) + 'px 0'; | ||
| let transW = (offsetW / 2) + 'px ' + (offsetW / 2) + 'px 0'; | ||
| let transH = (offsetH / 2) + 'px ' + (offsetH / 2) + 'px 0'; | ||
| transOrigin = deg === 90 || deg === -270 ? transH : transW; | ||
| } | ||
| } | ||
| element.style.transformOrigin = transOrigin; | ||
| this.plugins.resizing._setTransForm(element, deg.toString(), element.getAttribute('data-rotateX') || '', element.getAttribute('data-rotateY') || ''); | ||
| if (isVertical) element.style.maxWidth = 'none'; | ||
| else element.style.maxWidth = ''; | ||
| this.plugins.resizing.setCaptionPosition.call(this, element); | ||
| }, | ||
| _setTransForm: function (element, r, x, y) { | ||
| let width = (element.offsetWidth - element.offsetHeight) * (/-/.test(r) ? 1 : -1); | ||
| let translate = ''; | ||
| if (/[1-9]/.test(r) && (x || y)) { | ||
| translate = x ? 'Y' : 'X'; | ||
| switch (r) { | ||
@@ -788,10 +795,10 @@ case '90': | ||
| } | ||
| if (r % 180 === 0) { | ||
| element.style.maxWidth = ''; | ||
| } | ||
| element.style.transform = 'rotate(' + r + 'deg)' + (x ? ' rotateX(' + x + 'deg)' : '') + (y ? ' rotateY(' + y + 'deg)' : '') + (translate ? ' translate' + translate + '(' + width + 'px)' : ''); | ||
| }, | ||
| /** | ||
@@ -807,3 +814,3 @@ * @description The position of the caption is set automatically. | ||
| }, | ||
| /** | ||
@@ -816,6 +823,6 @@ * @description Mouse down event of resize handles | ||
| e.preventDefault(); | ||
| const contextResizing = this.context.resizing; | ||
| const direction = contextResizing._resize_direction = e.target.classList[0]; | ||
| contextResizing._resizeClientX = e.clientX; | ||
@@ -826,13 +833,13 @@ contextResizing._resizeClientY = e.clientY; | ||
| contextResizing.resizeDiv.style.float = /l/.test(direction) ? 'right' : /r/.test(direction) ? 'left' : 'none'; | ||
| const closureFunc_bind = function closureFunc(e) { | ||
| if (e.type === 'keydown' && e.keyCode !== 27) return; | ||
| const change = contextResizing._isChange; | ||
| contextResizing._isChange = false; | ||
| this.removeDocEvent('mousemove', resizing_element_bind); | ||
| this.removeDocEvent('mouseup', closureFunc_bind); | ||
| this.removeDocEvent('keydown', closureFunc_bind); | ||
| if (e.type === 'keydown') { | ||
@@ -849,3 +856,3 @@ this.controllersOff(); | ||
| }.bind(this); | ||
| const resizing_element_bind = this.plugins.resizing.resizing_element.bind(this, contextResizing, direction, this.context[contextResizing._resize_plugin]); | ||
@@ -856,3 +863,3 @@ this.addDocEvent('mousemove', resizing_element_bind); | ||
| }, | ||
| /** | ||
@@ -869,13 +876,13 @@ * @description Mouse move event after call "onMouseDown_resize_handle" of resize handles | ||
| const clientY = e.clientY; | ||
| let resultW = plugin._element_w; | ||
| let resultH = plugin._element_h; | ||
| const w = plugin._element_w + (/r/.test(direction) ? clientX - contextResizing._resizeClientX : contextResizing._resizeClientX - clientX); | ||
| const h = plugin._element_h + (/b/.test(direction) ? clientY - contextResizing._resizeClientY : contextResizing._resizeClientY - clientY); | ||
| const wh = ((plugin._element_h / plugin._element_w) * w); | ||
| if (/t/.test(direction)) contextResizing.resizeDiv.style.top = (plugin._element_h - (/h/.test(direction) ? h : wh)) + 'px'; | ||
| if (/l/.test(direction)) contextResizing.resizeDiv.style.left = (plugin._element_w - w) + 'px'; | ||
| if (/r|l/.test(direction)) { | ||
@@ -885,3 +892,3 @@ contextResizing.resizeDiv.style.width = w + 'px'; | ||
| } | ||
| if (/^(t|b)[^h]$/.test(direction)) { | ||
@@ -895,3 +902,3 @@ contextResizing.resizeDiv.style.height = wh + 'px'; | ||
| } | ||
| contextResizing._resize_w = resultW; | ||
@@ -902,3 +909,3 @@ contextResizing._resize_h = resultH; | ||
| }, | ||
| /** | ||
@@ -913,10 +920,10 @@ * @description Resize the element to the size of the "div" adjusted in the "resizing_element" method. | ||
| this.context.element.resizeBackground.style.display = 'none'; | ||
| let w = this._w.Math.round(isVertical ? this.context.resizing._resize_h : this.context.resizing._resize_w); | ||
| let h = this._w.Math.round(isVertical ? this.context.resizing._resize_w : this.context.resizing._resize_h); | ||
| if (!isVertical && !/%$/.test(w)) { | ||
| const padding = 16; | ||
| const limit = this.context.element.wysiwygFrame.clientWidth - (padding * 2) - 2; | ||
| if (this.util.getNumber(w, 0) > limit) { | ||
@@ -927,3 +934,3 @@ h = this._w.Math.round((h / w) * limit); | ||
| } | ||
| const pluginName = this.context.resizing._resize_plugin; | ||
@@ -930,0 +937,0 @@ this.plugins[pluginName].setSize.call(this, w, h, false, direction); |
Sorry, the diff of this file is too big to display
Sorry, the diff of this file is too big to display
Sorry, the diff of this file is too big to display
Sorry, the diff of this file is too big to display
New alerts
Deprecated
MaintenanceThe maintainer of the package marked it as deprecated. This could indicate that a single version should not be used, or that the package is no longer maintained and any new vulnerabilities will not be fixed.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by1.39%
4054644
- Number of package files
- increased by3.03%
136
- Lines of code
- increased by2.38%
29658
- Number of lines in readme file
- increased by0.13%
1592
Worsened metrics
- Dev dependency count
- increased by8.7%
25
- Number of high maintenance alerts
- increased byInfinity%
1
No dependency changes