framework7
Version:
Full featured mobile HTML framework for building iOS & Android apps
2 lines (1 loc) • 13.1 kB
JavaScript
(function framework7ComponentLoader(e,t){void 0===t&&(t=!0);var o=e.$,r=e.utils,n=e.getDevice,a=(e.getSupport,e.Class),i=(e.Modal,e.ConstructorMethods),l=(e.ModalMethods,e.$jsx,r.extend),s=r.deleteProps;const c={bold:["bold","format_bold","bold"],italic:["italic","format_italic","italic"],underline:["underline","format_underlined","underline"],strikeThrough:["strikethrough","strikethrough_s","strikeThrough"],orderedList:["list_number","format_list_numbered","insertOrderedList"],unorderedList:["list_bullet","format_list_bulleted","insertUnorderedList"],link:["link","link","createLink"],image:["photo","image","insertImage"],paragraph:["paragraph",'<i class="icon">¶</i>',"formatBlock.P"],h1:['<i class="icon">H<sub>1</sub></i>','<i class="icon">H<sub>1</sub></i>',"formatBlock.H1"],h2:['<i class="icon">H<sub>2</sub></i>','<i class="icon">H<sub>2</sub></i>',"formatBlock.H2"],h3:['<i class="icon">H<sub>3</sub></i>','<i class="icon">H<sub>3</sub></i>',"formatBlock.H3"],alignLeft:["text_alignleft","format_align_left","justifyLeft"],alignCenter:["text_aligncenter","format_align_center","justifyCenter"],alignRight:["text_alignright","format_align_right","justifyRight"],alignJustify:["text_justify","format_align_justify","justifyFull"],subscript:["textformat_subscript",'<i class="icon">A<sub>1</sub></i>',"subscript"],superscript:["textformat_superscript",'<i class="icon">A<sup>1</sup></i>',"superscript"],indent:["increase_indent","format_indent_increase","indent"],outdent:["decrease_indent","format_indent_decrease","outdent"]};class d extends a{constructor(e,t){super(t,[e]);const r=this,a=n(),i=l({},e.params.textEditor);r.useModulesParams(i),r.params=l(i,t);const s=r.params.el;if(!s)return r;const c=o(s);if(0===c.length)return r;if(c[0].f7TextEditor)return c[0].f7TextEditor;let d=c.children(".text-editor-content");if(d.length||(c.append('<div class="text-editor-content" contenteditable></div>'),d=c.children(".text-editor-content")),l(r,{app:e,$el:c,el:c[0],$contentEl:d,contentEl:d[0]}),"value"in t&&(r.value=r.params.value),"keyboard-toolbar"===r.params.mode&&(a.cordova||a.capacitor||a.android||(r.params.mode="popover")),"string"==typeof r.params.buttons)try{r.params.buttons=JSON.parse(r.params.buttons)}catch(e){throw new Error('Framework7: TextEditor: wrong "buttons" parameter format')}return c[0].f7TextEditor=r,r.onButtonClick=r.onButtonClick.bind(r),r.onFocus=r.onFocus.bind(r),r.onBlur=r.onBlur.bind(r),r.onInput=r.onInput.bind(r),r.onPaste=r.onPaste.bind(r),r.onSelectionChange=r.onSelectionChange.bind(r),r.closeKeyboardToolbar=r.closeKeyboardToolbar.bind(r),r.attachEvents=function(){"toolbar"===r.params.mode&&r.$el.find(".text-editor-toolbar").on("click","button",r.onButtonClick),"keyboard-toolbar"===r.params.mode&&(r.$keyboardToolbarEl.on("click","button",r.onButtonClick),r.$el.parents(".page").on("page:beforeout",r.closeKeyboardToolbar)),"popover"===r.params.mode&&r.popover&&r.popover.$el.on("click","button",r.onButtonClick),r.$contentEl.on("paste",r.onPaste),r.$contentEl.on("focus",r.onFocus),r.$contentEl.on("blur",r.onBlur),r.$contentEl.on("input",r.onInput,!0),o(document).on("selectionchange",r.onSelectionChange)},r.detachEvents=function(){"toolbar"===r.params.mode&&r.$el.find(".text-editor-toolbar").off("click","button",r.onButtonClick),"keyboard-toolbar"===r.params.mode&&(r.$keyboardToolbarEl.off("click","button",r.onButtonClick),r.$el.parents(".page").off("page:beforeout",r.closeKeyboardToolbar)),"popover"===r.params.mode&&r.popover&&r.popover.$el.off("click","button",r.onButtonClick),r.$contentEl.off("paste",r.onPaste),r.$contentEl.off("focus",r.onFocus),r.$contentEl.off("blur",r.onBlur),r.$contentEl.off("input",r.onInput,!0),o(document).off("selectionchange",r.onSelectionChange)},r.useModules(),r.init(),r}setValue(e){const t=this;return t.value===e||(t.value=e,t.$contentEl.html(e),t.$el.trigger("texteditor:change",t.value),t.emit("local::change textEditorChange",t,t.value)),t}getValue(){return this.value}clearValue(){const e=this;return e.setValue(""),e.params.placeholder&&!e.$contentEl.html()&&e.insertPlaceholder(),e}createLink(){const e=this,t=window.getSelection(),r=[];let n;if(t&&t.anchorNode&&o(t.anchorNode).parents(e.$el).length){let e=t.anchorNode;for(;e;)r.push(e),e.nextSibling&&e!==t.focusNode||(e=null),e&&(e=e.nextSibling);const a=[],i=o(r);for(let e=0;e<i.length;e+=1){const t=i[e].children;if(t)for(let e=0;e<t.length;e+=1)o(t[e]).is("a")&&a.push(t[e])}n=i.closest("a").add(o(a))}if(n&&n.length)return n.each((e=>{const t=window.getSelection(),o=document.createRange();o.selectNodeContents(e),t.removeAllRanges(),t.addRange(o),document.execCommand("unlink",!1),t.removeAllRanges()})),e;const a=e.getSelectionRange();if(!a)return e;return e.app.dialog.prompt(e.params.linkUrlText,"",(t=>{t&&t.trim().length&&(e.setSelectionRange(a),document.execCommand("createLink",!1,t.trim()),e.$el.trigger("texteditor:insertlink",{url:t.trim()}),e.emit("local:insertLink textEditorInsertLink",e,t.trim()))})).$el.find("input").focus(),e}insertImage(){const e=this,t=e.getSelectionRange();if(!t)return e;return e.app.dialog.prompt(e.params.imageUrlText,"",(o=>{o&&o.trim().length&&(e.setSelectionRange(t),document.execCommand("insertImage",!1,o.trim()),e.$el.trigger("texteditor:insertimage",{url:o.trim()}),e.emit("local:insertImage textEditorInsertImage",e,o.trim()))})).$el.find("input").focus(),e}removePlaceholder(){this.$contentEl.find(".text-editor-placeholder").remove()}insertPlaceholder(){this.$contentEl.append(`<div class="text-editor-placeholder">${this.params.placeholder}</div>`)}onSelectionChange(){const e=this;if("toolbar"===e.params.mode)return;const t=window.getSelection(),r=o(t.anchorNode).parents(e.contentEl).length||t.anchorNode===e.contentEl;if("keyboard-toolbar"!==e.params.mode){if("popover"===e.params.mode){const n=o(t.anchorNode).parents(e.popover.el).length||t.anchorNode===e.popover.el;if(!r&&!n)return void e.closePopover();if(!t.isCollapsed&&t.rangeCount){const o=t.getRangeAt(0).getBoundingClientRect(),r=e.app.$el[0]||document.body;e.openPopover(o.x+(window.scrollX||0)-r.offsetLeft,o.y+(window.scrollY||0)-r.offsetTop,o.width,o.height)}else t.isCollapsed&&e.closePopover()}}else r?e.openKeyboardToolbar():e.closeKeyboardToolbar()}onPaste(e){if(this.params.clearFormattingOnPaste&&e.clipboardData&&e.clipboardData.getData){const t=e.clipboardData.getData("text/plain");e.preventDefault(),document.execCommand("insertText",!1,t)}}onInput(){const e=this,t=e.$contentEl.html();e.value=t,e.$el.trigger("texteditor:input"),e.emit("local:input textEditorInput",e,e.value),e.$el.trigger("texteditor:change",e.value),e.emit("local::change textEditorChange",e,e.value)}onFocus(){const e=this;e.removePlaceholder(),e.$contentEl.focus(),e.$el.trigger("texteditor:focus"),e.emit("local::focus textEditorFocus",e)}onBlur(){const e=this;if(e.params.placeholder&&""===e.$contentEl.html()&&e.insertPlaceholder(),"popover"===e.params.mode){const t=window.getSelection(),r=o(t.anchorNode).parents(e.contentEl).length||t.anchorNode===e.contentEl;document.activeElement&&e.popover&&o(document.activeElement).closest(e.popover.$el).length||r||e.closePopover()}if("keyboard-toolbar"===e.params.mode){const t=window.getSelection();o(t.anchorNode).parents(e.contentEl).length||t.anchorNode===e.contentEl||e.closeKeyboardToolbar()}e.$el.trigger("texteditor:blur"),e.emit("local::blur textEditorBlur",e)}onButtonClick(e){const t=this,r=window.getSelection();if(!(o(r.anchorNode).parents(t.contentEl).length||r.anchorNode===t.contentEl))return;const n=o(e.target).closest("button");n.parents("form").length&&e.preventDefault();const a=n.attr("data-button"),i=t.params.customButtons&&t.params.customButtons[a];if(!a||!c[a]&&!i)return;if(n.trigger("texteditor:buttonclick",a),t.emit("local::buttonClick textEditorButtonClick",t,a),i)return void(i.onClick&&i.onClick(t,n[0]));const l=c[a][2];if("createLink"!==l)if("insertImage"!==l)if(0!==l.indexOf("formatBlock"))document.execCommand(l,!1);else{const e=l.split(".")[1],t=o(r.anchorNode);t.parents(e.toLowerCase()).length||t.is(e)?document.execCommand("formatBlock",!1,"div"):document.execCommand("formatBlock",!1,e)}else t.insertImage();else t.createLink()}getSelectionRange(){if(window.getSelection){const e=window.getSelection();if(e.getRangeAt&&e.rangeCount)return e.getRangeAt(0)}else if(document.selection&&document.selection.createRange)return document.selection.createRange();return null}setSelectionRange(e){if(e)if(window.getSelection){const t=window.getSelection();t.removeAllRanges(),t.addRange(e)}else document.selection&&e.select&&e.select()}renderButtons(){const e=this;let t="";function o(t){const o="md"===e.app.theme?"material-icons":"f7-icons";if(e.params.customButtons&&e.params.customButtons[t]){return`<button type="button" class="text-editor-button" data-button="${t}">${e.params.customButtons[t].content||""}</button>`}if(!c[t])return"";const r=c[t]["md"===e.app.theme?1:0];return`<button type="button" class="text-editor-button" data-button="${t}">${r.indexOf("<")>=0?r:`<i class="${o}">${r}</i>`}</button>`.trim()}return e.params.buttons.forEach(((r,n)=>{Array.isArray(r)?(r.forEach((e=>{t+=o(e)})),n<e.params.buttons.length-1&&e.params.dividers&&(t+='<div class="text-editor-button-divider"></div>')):t+=o(r)})),t}createToolbar(){this.$el.prepend(`<div class="text-editor-toolbar">${this.renderButtons()}</div>`)}createKeyboardToolbar(){this.$keyboardToolbarEl=o(`<div class="toolbar toolbar-bottom text-editor-keyboard-toolbar"><div class="toolbar-inner">${this.renderButtons()}</div></div>`)}createPopover(){const e=this;e.popover=e.app.popover.create({content:`\n <div class="popover dark text-editor-popover">\n <div class="popover-inner">${e.renderButtons()}</div>\n </div>\n `,closeByOutsideClick:!1,backdrop:!1})}openKeyboardToolbar(){const e=this;e.$keyboardToolbarEl.parent(e.app.$el).length||(e.$el.trigger("texteditor:keyboardopen"),e.emit("local::keyboardOpen textEditorKeyboardOpen",e),e.app.$el.append(e.$keyboardToolbarEl))}closeKeyboardToolbar(){const e=this;e.$keyboardToolbarEl.remove(),e.$el.trigger("texteditor:keyboardclose"),e.emit("local::keyboardClose textEditorKeyboardClose",e)}openPopover(e,t,o,r){const n=this;n.popover&&(Object.assign(n.popover.params,{targetX:e,targetY:t,targetWidth:o,targetHeight:r}),clearTimeout(n.popoverTimeout),n.popoverTimeout=setTimeout((()=>{n.popover&&(n.popover.opened?n.popover.resize():(n.$el.trigger("texteditor:popoveropen"),n.emit("local::popoverOpen textEditorPopoverOpen",n),n.popover.open()))}),400))}closePopover(){const e=this;clearTimeout(e.popoverTimeout),e.popover&&e.popover.opened&&(e.popoverTimeout=setTimeout((()=>{e.popover&&(e.$el.trigger("texteditor:popoverclose"),e.emit("local::popoverClose textEditorPopoverClose",e),e.popover.close())}),400))}init(){const e=this;return e.value?e.$contentEl.html(e.value):e.value=e.$contentEl.html(),e.params.placeholder&&""===e.value&&e.insertPlaceholder(),"toolbar"===e.params.mode?e.createToolbar():"popover"===e.params.mode?e.createPopover():"keyboard-toolbar"===e.params.mode&&e.createKeyboardToolbar(),e.attachEvents(),e.$el.trigger("texteditor:init"),e.emit("local::init textEditorInit",e),e}destroy(){let e=this;e.$el.trigger("texteditor:beforedestroy"),e.emit("local::beforeDestroy textEditorBeforeDestroy",e),e.detachEvents(),"keyboard-toolbar"===e.params.mode&&e.$keyboardToolbarEl&&e.$keyboardToolbarEl.remove(),e.popover&&(e.popover.close(!1),e.popover.destroy()),delete e.$el[0].f7TextEditor,s(e),e=null}}var p={name:"textEditor",params:{textEditor:{el:null,mode:"toolbar",value:void 0,customButtons:null,buttons:[["bold","italic","underline","strikeThrough"],["orderedList","unorderedList"],["link","image"],["paragraph","h1","h2","h3"],["alignLeft","alignCenter","alignRight","alignJustify"],["subscript","superscript"],["indent","outdent"]],dividers:!0,imageUrlText:"Insert image URL",linkUrlText:"Insert link URL",placeholder:null,clearFormattingOnPaste:!0}},create(){this.textEditor=l(i({defaultSelector:".text-editor",constructor:d,app:this,domProp:"f7TextEditor"}))},static:{TextEditor:d},on:{tabMounted(e){const t=this;o(e).find(".text-editor-init").each((e=>{const r=o(e).dataset();t.textEditor.create(l({el:e},r||{}))}))},tabBeforeRemove(e){o(e).find(".text-editor-init").each((e=>{e.f7TextEditor&&e.f7TextEditor.destroy()}))},pageInit(e){const t=this;e.$el.find(".text-editor-init").each((e=>{const r=o(e).dataset();t.textEditor.create(l({el:e},r||{}))}))},pageBeforeRemove(e){e.$el.find(".text-editor-init").each((e=>{e.f7TextEditor&&e.f7TextEditor.destroy()}))}},vnode:{"text-editor-init":{insert(e){const t=e.elm,r=o(t).dataset();this.textEditor.create(l({el:t},r||{}))},destroy(e){const t=e.elm;t.f7TextEditor&&t.f7TextEditor.destroy()}}}};if(t){if(e.prototype.modules&&e.prototype.modules[p.name])return;e.use(p),e.instance&&(e.instance.useModuleParams(p,e.instance.params),e.instance.useModule(p))}return p}(Framework7, typeof Framework7AutoInstallComponent === 'undefined' ? undefined : Framework7AutoInstallComponent))