diff --git a/dist/bundle.js b/dist/bundle.js index bcdf40c..0c1ef12 100644 --- a/dist/bundle.js +++ b/dist/bundle.js @@ -1 +1 @@ -!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports.NoticeTune=e():t.NoticeTune=e()}(self,(()=>(()=>{"use strict";var t={822:(t,e,n)=>{n.d(e,{Z:()=>o});var i=n(645),r=n.n(i)()((function(t){return t[1]}));r.push([t.id,".notice-tune__input {\r\n padding-left: 45px;\r\n background-repeat: no-repeat;\r\n background-position: 15px;\r\n margin: 10px 0;\r\n }\r\n .notice-tune__content {\r\n position: relative;\r\n max-width: 650px;\r\n margin: 0 auto;\r\n display: none;\r\n }\r\n .notice-tune .notice-tune__content {\r\n display: block;\r\n }\r\n .notice-tune~.notice-tune .notice-tune__content {\r\n margin-top: 1.5em;\r\n }\r\n .notice-tune--info+.notice-tune--info .notice-tune__content,\r\n .notice-tune--warning+.notice-tune--warning .notice-tune__content,\r\n .notice-tune--spoiler+.notice-tune--spoiler .notice-tune__content {\r\n display: none;\r\n }\r\n .notice-tune--info .notice-tune__wrapper {\r\n border-left: 10px solid #5cb6ff;\r\n padding-left: 12px;\r\n }\r\n .notice-tune--info .notice-tune__input {\r\n border-color: #5cb6ff;\r\n }\r\n .notice-tune--warning .notice-tune__wrapper {\r\n border-left: 10px solid #ffd025;\r\n padding-left: 12px;\r\n }\r\n .notice-tune--warning .notice-tune__input {\r\n border-color: #ffd025;\r\n }\r\n .notice-tune--spoiler .notice-tune__wrapper {\r\n border-left: 10px solid #424242;\r\n padding-left: 12px;\r\n }\r\n .notice-tune--spoiler .notice-tune__input {\r\n border-color: #424242;\r\n }",""]);const o=r},645:t=>{t.exports=function(t){var e=[];return e.toString=function(){return this.map((function(e){var n=t(e);return e[2]?"@media ".concat(e[2]," {").concat(n,"}"):n})).join("")},e.i=function(t,n,i){"string"==typeof t&&(t=[[null,t,""]]);var r={};if(i)for(var o=0;o{var i,r=function(){var t={};return function(e){if(void 0===t[e]){var n=document.querySelector(e);if(window.HTMLIFrameElement&&n instanceof window.HTMLIFrameElement)try{n=n.contentDocument.head}catch(t){n=null}t[e]=n}return t[e]}}(),o=[];function a(t){for(var e=-1,n=0;n{var e=t&&t.__esModule?()=>t.default:()=>t;return n.d(e,{a:e}),e},n.d=(t,e)=>{for(var i in e)n.o(e,i)&&!n.o(t,i)&&Object.defineProperty(t,i,{enumerable:!0,get:e[i]})},n.o=(t,e)=>Object.prototype.hasOwnProperty.call(t,e),n.nc=void 0;var i={};return(()=>{n.d(i,{default:()=>l});var t=n(379),e=n.n(t),r=n(822);function o(t){return function(t){if(Array.isArray(t))return a(t)}(t)||function(t){if("undefined"!=typeof Symbol&&null!=t[Symbol.iterator]||null!=t["@@iterator"])return Array.from(t)}(t)||function(t,e){if(t){if("string"==typeof t)return a(t,e);var n=Object.prototype.toString.call(t).slice(8,-1);return"Object"===n&&t.constructor&&(n=t.constructor.name),"Map"===n||"Set"===n?Array.from(t):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?a(t,e):void 0}}(t)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function a(t,e){(null==e||e>t.length)&&(e=t.length);for(var n=0,i=new Array(e);n\r\n \r\n \r\n \r\n',title:"Spoiler"},{name:"info",icon:'\r\n \r\n \r\n',title:"Info"},{name:"warning",icon:'\r\n \r\n \r\n',title:"Warning"}]}}],(n=[{key:"CSS",get:function(){return{input:this.api.styles.input,buttonBase:this.api.styles.settingsButton,buttonActive:this.api.styles.settingsButtonActive,baseTemplate:"notice-tune",tuneWrapper:"notice-tune__tune-wrapper",tuneButton:"notice-tune__tune-button",blockWrapper:"notice-tune__wrapper",blockContent:"notice-tune__content",blockInput:"notice-tune__input"}}},{key:"fillIcon",value:function(){var e=this;if(this.data.style){var n=t.tunes.find((function(t){return t.name===e.data.style})),i=encodeURIComponent(n.icon);this.input.style.backgroundImage="url(data:image/svg+xml,".concat(i,")")}else this.input.style.backgroundImage=""}},{key:"fillTunes",value:function(){var t=this;this.buttons.forEach((function(e){e.classList.toggle(t.CSS.buttonActive,e.dataset.tune===t.data.style),t.block.holder.classList.toggle("".concat(t.CSS.baseTemplate,"--").concat(e.dataset.tune),e.dataset.tune===t.data.style)}))}},{key:"render",value:function(){var e=this,n=s("div",this.CSS.tuneWrapper);return this.buttons=[],t.tunes.forEach((function(t){var i=e.api.i18n.t(t.title),r=s("div",[e.CSS.buttonBase,e.CSS.tuneButton],{innerHTML:t.icon,title:i});r.addEventListener("click",(function(){e.tuneClicked(t.name)})),r.dataset.tune=t.name,e.buttons.push(r),e.api.tooltip.onHover(r,i,{placement:"top"}),n.appendChild(r)})),this.fillTunes(),n}},{key:"wrap",value:function(t){var e=s("div",this.CSS.blockWrapper),n=s("div",this.CSS.blockContent);return this.input.value=this.data.caption,this.fillIcon(),n.appendChild(this.input),e.appendChild(n),e.appendChild(t),e}},{key:"tuneClicked",value:function(e){var n=this.data.style;this.data.style===e?(this.data.style=void 0,this.block.holder.classList.remove(this.CSS.baseTemplate)):t.tunes.find((function(t){return t.name===e}))&&(this.data.style=e,this.block.holder.classList.add(this.CSS.baseTemplate));var i=this.data.style;n!==i&&(this.checkNeighbor(n,i),this.fillIcon(),this.fillTunes())}},{key:"checkNeighbor",value:function(t,e){var n=this.api.blocks.getCurrentBlockIndex(),i=this.api.blocks.getBlockByIndex(n-1),r=this.api.blocks.getBlockByIndex(n+1);if(void 0!==t&&(void 0===i||!i.holder.classList.contains("".concat(this.CSS.baseTemplate,"--").concat(t)))&&void 0!==r&&r.holder.classList.contains("".concat(this.CSS.baseTemplate,"--").concat(t))&&0!==this.input.value.length){var o=r.holder.querySelector(".".concat(this.CSS.blockInput));o&&(o.value=this.input.value)}if(void 0!==e&&(void 0===i||!i.holder.classList.contains("".concat(this.CSS.baseTemplate,"--").concat(e)))&&void 0!==r&&r.holder.classList.contains("".concat(this.CSS.baseTemplate,"--").concat(e))){var a=r.holder.querySelector(".".concat(this.CSS.blockInput));a&&0!==a.value.length&&(this.input.value=a.value)}}},{key:"save",value:function(){if(this.data.style)return this.data.caption=this.input.value,this.data}}])&&c(e.prototype,n),i&&c(e,i),Object.defineProperty(e,"prototype",{writable:!1}),t}(),s=function(t){var e,n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:null,i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{},r=document.createElement(t);for(var a in Array.isArray(n)?(e=r.classList).add.apply(e,o(n)):n&&r.classList.add(n),i)r[a]=i[a];return r}})(),i.default})())); \ No newline at end of file +!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports.NoticeTune=e():t.NoticeTune=e()}(self,(()=>(()=>{"use strict";var t={822:(t,e,n)=>{n.d(e,{Z:()=>o});var i=n(645),r=n.n(i)()((function(t){return t[1]}));r.push([t.id,".notice-tune__input {\r\n padding-left: 45px;\r\n background-repeat: no-repeat;\r\n background-position: 15px;\r\n margin: 10px 0;\r\n }\r\n .notice-tune__content {\r\n position: relative;\r\n max-width: 650px;\r\n margin: 0 auto;\r\n display: none;\r\n }\r\n .notice-tune .notice-tune__content {\r\n display: block;\r\n }\r\n .notice-tune~.notice-tune .notice-tune__content {\r\n margin-top: 1.5em;\r\n }\r\n .notice-tune--info+.notice-tune--info .notice-tune__content,\r\n .notice-tune--warning+.notice-tune--warning .notice-tune__content,\r\n .notice-tune--spoiler+.notice-tune--spoiler .notice-tune__content {\r\n display: none;\r\n }\r\n .notice-tune--info .notice-tune__wrapper {\r\n border-left: 10px solid #5cb6ff;\r\n padding-left: 12px;\r\n }\r\n .notice-tune--info .notice-tune__input {\r\n border-color: #5cb6ff;\r\n }\r\n .notice-tune--warning .notice-tune__wrapper {\r\n border-left: 10px solid #ffd025;\r\n padding-left: 12px;\r\n }\r\n .notice-tune--warning .notice-tune__input {\r\n border-color: #ffd025;\r\n }\r\n .notice-tune--spoiler .notice-tune__wrapper {\r\n border-left: 10px solid #424242;\r\n padding-left: 12px;\r\n }\r\n .notice-tune--spoiler .notice-tune__input {\r\n border-color: #424242;\r\n }",""]);const o=r},645:t=>{t.exports=function(t){var e=[];return e.toString=function(){return this.map((function(e){var n=t(e);return e[2]?"@media ".concat(e[2]," {").concat(n,"}"):n})).join("")},e.i=function(t,n,i){"string"==typeof t&&(t=[[null,t,""]]);var r={};if(i)for(var o=0;o{var i,r=function(){var t={};return function(e){if(void 0===t[e]){var n=document.querySelector(e);if(window.HTMLIFrameElement&&n instanceof window.HTMLIFrameElement)try{n=n.contentDocument.head}catch(t){n=null}t[e]=n}return t[e]}}(),o=[];function a(t){for(var e=-1,n=0;n{var e=t&&t.__esModule?()=>t.default:()=>t;return n.d(e,{a:e}),e},n.d=(t,e)=>{for(var i in e)n.o(e,i)&&!n.o(t,i)&&Object.defineProperty(t,i,{enumerable:!0,get:e[i]})},n.o=(t,e)=>Object.prototype.hasOwnProperty.call(t,e),n.nc=void 0;var i={};return(()=>{n.d(i,{default:()=>l});var t=n(379),e=n.n(t),r=n(822);function o(t){return function(t){if(Array.isArray(t))return a(t)}(t)||function(t){if("undefined"!=typeof Symbol&&null!=t[Symbol.iterator]||null!=t["@@iterator"])return Array.from(t)}(t)||function(t,e){if(t){if("string"==typeof t)return a(t,e);var n=Object.prototype.toString.call(t).slice(8,-1);return"Object"===n&&t.constructor&&(n=t.constructor.name),"Map"===n||"Set"===n?Array.from(t):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?a(t,e):void 0}}(t)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function a(t,e){(null==e||e>t.length)&&(e=t.length);for(var n=0,i=new Array(e);n\r\n \r\n \r\n \r\n',title:"Spoiler"},{name:"info",icon:'\r\n \r\n \r\n',title:"Info"},{name:"warning",icon:'\r\n \r\n \r\n',title:"Warning"}]}}],(n=[{key:"CSS",get:function(){return{input:this.api.styles.input,buttonBase:this.api.styles.settingsButton,buttonActive:this.api.styles.settingsButtonActive,baseTemplate:"notice-tune",tuneWrapper:"notice-tune__tune-wrapper",tuneButton:"notice-tune__tune-button",blockWrapper:"notice-tune__wrapper",blockContent:"notice-tune__content",blockInput:"notice-tune__input"}}},{key:"fillIcon",value:function(){var e=this;if(this.data.style){var n=t.tunes.find((function(t){return t.name===e.data.style})),i=encodeURIComponent(n.icon);this.input.style.backgroundImage="url(data:image/svg+xml,".concat(i,")")}else this.input.style.backgroundImage=""}},{key:"fillTunes",value:function(){var t=this;this.buttons.forEach((function(e){e.classList.toggle(t.CSS.buttonActive,e.dataset.tune===t.data.style),t.block.holder.classList.toggle("".concat(t.CSS.baseTemplate,"--").concat(e.dataset.tune),e.dataset.tune===t.data.style)}))}},{key:"render",value:function(){var e=this,n=s("div",this.CSS.tuneWrapper);return this.buttons=[],t.tunes.forEach((function(t){var i=e.api.i18n.t(t.title),r=s("div",[e.CSS.buttonBase,e.CSS.tuneButton],{innerHTML:t.icon,title:i});r.addEventListener("click",(function(){e.tuneClicked(t.name)})),r.dataset.tune=t.name,e.buttons.push(r),e.api.tooltip.onHover(r,i,{placement:"top"}),n.appendChild(r)})),this.fillTunes(),n}},{key:"wrap",value:function(t){var e=s("div",this.CSS.blockWrapper),n=s("div",this.CSS.blockContent);return this.input.value=this.data.caption,this.fillIcon(),n.appendChild(this.input),e.appendChild(n),e.appendChild(t),e}},{key:"tuneClicked",value:function(e){var n=this.data.style;this.data.style===e?(this.data.style=void 0,this.block.holder.classList.remove(this.CSS.baseTemplate)):t.tunes.find((function(t){return t.name===e}))&&(this.data.style=e,this.block.holder.classList.add(this.CSS.baseTemplate));var i=this.data.style;n!==i&&(this.checkNeighbor(n,i),this.fillIcon(),this.fillTunes())}},{key:"checkNeighbor",value:function(t,e){var n=this.api.blocks.getCurrentBlockIndex(),i=this.api.blocks.getBlockByIndex(n-1),r=this.api.blocks.getBlockByIndex(n+1);if(void 0!==t&&(void 0===i||!i.holder.classList.contains("".concat(this.CSS.baseTemplate,"--").concat(t)))&&void 0!==r&&r.holder.classList.contains("".concat(this.CSS.baseTemplate,"--").concat(t))&&0!==this.input.value.length){var o=r.holder.querySelector(".".concat(this.CSS.blockInput));o&&(o.value=this.input.value)}if(void 0!==e&&(void 0===i||!i.holder.classList.contains("".concat(this.CSS.baseTemplate,"--").concat(e)))&&void 0!==r&&r.holder.classList.contains("".concat(this.CSS.baseTemplate,"--").concat(e))){var a=r.holder.querySelector(".".concat(this.CSS.blockInput));a&&0!==a.value.length&&(this.input.value=a.value)}}},{key:"save",value:function(){if(this.data.style)return this.data.caption=this.input.value,this.data}}])&&c(e.prototype,n),i&&c(e,i),Object.defineProperty(e,"prototype",{writable:!1}),t}(),s=function(t){var e,n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:null,i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{},r=document.createElement(t);for(var a in Array.isArray(n)?(e=r.classList).add.apply(e,o(n)):n&&r.classList.add(n),i)r[a]=i[a];return r}})(),i.default})())); \ No newline at end of file diff --git a/package.json b/package.json index d2e6042..75b4d27 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "editorjs-notice", - "version": "1.0.0", + "version": "1.0.1", "main": "./dist/bundle.js", "license": "MIT", "keywords": [ diff --git a/src/index.js b/src/index.js index 7d90a11..8e88047 100644 --- a/src/index.js +++ b/src/index.js @@ -52,6 +52,20 @@ export default class NoticeTune { type: 'text', placeholder: this.config.captionPlaceholder }); + + if (this.data.style) { + let observer = new MutationObserver(() => { + if (this.block.holder) { + this.block.holder.classList.add(this.CSS.baseTemplate); + this.block.holder.classList.add(`${this.CSS.baseTemplate}--${this.data.style}`); + observer.disconnect(); + } + }); + + observer.observe(this.api.ui.nodes.redactor, { + childList: true + }); + } } /** @@ -172,6 +186,7 @@ export default class NoticeTune { const content = make('div', this.CSS.blockContent); this.input.value = this.data.caption; + this.fillIcon(); content.appendChild(this.input);