framework7
Version:
Full featured mobile HTML framework for building iOS & Android apps
2 lines (1 loc) • 13.5 kB
JavaScript
(function framework7ComponentLoader(t,e){void 0===e&&(e=!0);var o=document,r=window,n=t.$,i=(t.Template7,t.utils),a=(t.device,t.support,t.Class),s=(t.Modal,t.ConstructorMethods),l=(t.ModalMethods,{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"]}),c=function(t){function e(e,r){t.call(this,r,[e]);var a=this,s=i.extend({},e.params.textEditor);a.useModulesParams(s),a.params=i.extend(s,r);var l=a.params.el;if(!l)return a;var c=n(l);if(0===c.length)return a;if(c[0].f7TextEditor)return c[0].f7TextEditor;var p=c.children(".text-editor-content");if(p.length||(c.append('<div class="text-editor-content" contenteditable></div>'),p=c.children(".text-editor-content")),i.extend(a,{app:e,$el:c,el:c[0],$contentEl:p,contentEl:p[0]}),"value"in r&&(a.value=a.params.value),"keyboard-toolbar"===a.params.mode&&(e.device.cordova||e.device.android||(a.params.mode="popover")),"string"==typeof a.params.buttons)try{a.params.buttons=JSON.parse(a.params.buttons)}catch(t){throw new Error('Framework7: TextEditor: wrong "buttons" parameter format')}return c[0].f7TextEditor=a,a.onButtonClick=a.onButtonClick.bind(a),a.onFocus=a.onFocus.bind(a),a.onBlur=a.onBlur.bind(a),a.onInput=a.onInput.bind(a),a.onPaste=a.onPaste.bind(a),a.onSelectionChange=a.onSelectionChange.bind(a),a.closeKeyboardToolbar=a.closeKeyboardToolbar.bind(a),a.attachEvents=function(){"toolbar"===a.params.mode&&a.$el.find(".text-editor-toolbar").on("click","button",a.onButtonClick),"keyboard-toolbar"===a.params.mode&&(a.$keyboardToolbarEl.on("click","button",a.onButtonClick),a.$el.parents(".page").on("page:beforeout",a.closeKeyboardToolbar)),"popover"===a.params.mode&&a.popover&&a.popover.$el.on("click","button",a.onButtonClick),a.$contentEl.on("paste",a.onPaste),a.$contentEl.on("focus",a.onFocus),a.$contentEl.on("blur",a.onBlur),a.$contentEl.on("input",a.onInput,!0),n(o).on("selectionchange",a.onSelectionChange)},a.detachEvents=function(){"toolbar"===a.params.mode&&a.$el.find(".text-editor-toolbar").off("click","button",a.onButtonClick),"keyboard-toolbar"===a.params.mode&&(a.$keyboardToolbarEl.off("click","button",a.onButtonClick),a.$el.parents(".page").off("page:beforeout",a.closeKeyboardToolbar)),"popover"===a.params.mode&&a.popover&&a.popover.$el.off("click","button",a.onButtonClick),a.$contentEl.off("paste",a.onPaste),a.$contentEl.off("focus",a.onFocus),a.$contentEl.off("blur",a.onBlur),a.$contentEl.off("input",a.onInput,!0),n(o).off("selectionchange",a.onSelectionChange)},a.useModules(),a.init(),a}return t&&(e.__proto__=t),e.prototype=Object.create(t&&t.prototype),e.prototype.constructor=e,e.prototype.setValue=function(t){return this.value===t||(this.value=t,this.$contentEl.html(t),this.$el.trigger("texteditor:change",this.value),this.emit("local::change textEditorChange",this,this.value)),this},e.prototype.getValue=function(){return this.value},e.prototype.createLink=function(){var t,e=this,i=r.getSelection(),a=[];if(i&&i.anchorNode&&n(i.anchorNode).parents(e.$el).length){for(var s=i.anchorNode;s;)a.push(s),s.nextSibling&&s!==i.focusNode||(s=null),s&&(s=s.nextSibling);t=n(a).closest("a").add(n(a).children("a"))}if(t&&t.length)return t.each((function(t,e){var n=r.getSelection(),i=o.createRange();i.selectNodeContents(e),n.removeAllRanges(),n.addRange(i),o.execCommand("unlink",!1),n.removeAllRanges()})),e;var l=e.getSelectionRange();return l?(e.app.dialog.prompt(e.params.linkUrlText,"",(function(t){t&&t.trim().length&&(e.setSelectionRange(l),o.execCommand("createLink",!1,t.trim()))})).$el.find("input").focus(),e):e},e.prototype.insertImage=function(){var t=this,e=t.getSelectionRange();return e?(t.app.dialog.prompt(t.params.imageUrlText,"",(function(r){r&&r.trim().length&&(t.setSelectionRange(e),o.execCommand("insertImage",!1,r.trim()))})).$el.find("input").focus(),t):t},e.prototype.removePlaceholder=function(){this.$contentEl.find(".text-editor-placeholder").remove()},e.prototype.insertPlaceholder=function(){this.$contentEl.append('<div class="text-editor-placeholder">'+this.params.placeholder+"</div>")},e.prototype.onSelectionChange=function(){if("toolbar"!==this.params.mode){var t=r.getSelection(),e=n(t.anchorNode).parents(this.contentEl).length||t.anchorNode===this.contentEl;if("keyboard-toolbar"!==this.params.mode){if("popover"===this.params.mode){var i=n(t.anchorNode).parents(this.popover.el).length||t.anchorNode===this.popover.el;if(!e&&!i)return void this.closePopover();if(!t.isCollapsed&&t.rangeCount){var a=t.getRangeAt(0).getBoundingClientRect(),s=this.app.root[0]||o.body;this.openPopover(a.x+(r.scrollX||0)-s.offsetLeft,a.y+(r.scrollY||0)-s.offsetTop,a.width,a.height)}else t.isCollapsed&&this.closePopover()}}else e?this.openKeyboardToolbar():this.closeKeyboardToolbar()}},e.prototype.onPaste=function(t){if(this.params.clearFormattingOnPaste&&t.clipboardData&&t.clipboardData.getData){var e=t.clipboardData.getData("text/plain");t.preventDefault(),o.execCommand("insertText",!1,e)}},e.prototype.onInput=function(){var t=this.$contentEl.html();this.$el.trigger("texteditor:input"),this.emit("local:input textEditorInput",this),this.value=t,this.$el.trigger("texteditor:change",this.value),this.emit("local::change textEditorChange",this,this.value)},e.prototype.onFocus=function(){this.removePlaceholder(),this.$contentEl.focus(),this.$el.trigger("texteditor:focus"),this.emit("local::focus textEditorFocus",this)},e.prototype.onBlur=function(){if(this.params.placeholder&&""===this.$contentEl.html()&&this.insertPlaceholder(),"popover"===this.params.mode){var t=r.getSelection(),e=n(t.anchorNode).parents(this.contentEl).length||t.anchorNode===this.contentEl;o.activeElement&&this.popover&&n(o.activeElement).closest(this.popover.$el).length||e||this.closePopover()}if("keyboard-toolbar"===this.params.mode){var i=r.getSelection();n(i.anchorNode).parents(this.contentEl).length||i.anchorNode===this.contentEl||this.closeKeyboardToolbar()}this.$el.trigger("texteditor:blur"),this.emit("local::blur textEditorBlur",this)},e.prototype.onButtonClick=function(t){var e=r.getSelection();if(n(e.anchorNode).parents(this.contentEl).length||e.anchorNode===this.contentEl){var i=n(t.target).closest("button");i.parents("form").length&&t.preventDefault();var a=i.attr("data-button"),s=this.params.customButtons&&this.params.customButtons[a];if(a&&(l[a]||s))if(i.trigger("texteditor:buttonclick",a),this.emit("local::buttonClick textEditorButtonClick",this,a),s)s.onClick&&s.onClick(this,i[0]);else{var c=l[a][2];if("createLink"!==c)if("insertImage"!==c)if(0!==c.indexOf("formatBlock"))o.execCommand(c,!1);else{var p=c.split(".")[1],d=n(e.anchorNode);d.parents(p.toLowerCase()).length||d.is(p)?o.execCommand("formatBlock",!1,"div"):o.execCommand("formatBlock",!1,p)}else this.insertImage();else this.createLink()}}},e.prototype.getSelectionRange=function(){if(r.getSelection){var t=r.getSelection();if(t.getRangeAt&&t.rangeCount)return t.getRangeAt(0)}else if(o.selection&&o.selection.createRange)return o.selection.createRange();return null},e.prototype.setSelectionRange=function(t){if(t)if(r.getSelection){var e=r.getSelection();e.removeAllRanges(),e.addRange(t)}else o.selection&&t.select&&t.select()},e.prototype.renderButtons=function(){var t=this,e="";function o(e){var o="md"===t.app.theme?"material-icons":"f7-icons";if(t.params.customButtons&&t.params.customButtons[e])return'<button type="button" class="text-editor-button" data-button="'+e+'">'+(t.params.customButtons[e].content||"")+"</button>";if(!l[e])return"";var r=l[e]["md"===t.app.theme?1:0];return('<button type="button" class="text-editor-button" data-button="'+e+'">'+(r.indexOf("<")>=0?r:'<i class="'+o+'">'+r+"</i>")+"</button>").trim()}return t.params.buttons.forEach((function(r,n){Array.isArray(r)?(r.forEach((function(t){e+=o(t)})),n<t.params.buttons.length-1&&t.params.dividers&&(e+='<div class="text-editor-button-divider"></div>')):e+=o(r)})),e},e.prototype.createToolbar=function(){this.$el.prepend('<div class="text-editor-toolbar">'+this.renderButtons()+"</div>")},e.prototype.createKeyboardToolbar=function(){var t=this.$el.closest(".theme-dark").length>0||"dark"===this.app.device.prefersColorScheme();this.$keyboardToolbarEl=n('<div class="toolbar toolbar-bottom text-editor-keyboard-toolbar '+(t?"theme-dark":"")+'"><div class="toolbar-inner">'+this.renderButtons()+"</div></div>")},e.prototype.createPopover=function(){var t=this.$el.closest(".theme-dark").length>0;this.popover=this.app.popover.create({content:'\n <div class="popover '+(t?"theme-light":"theme-dark")+' text-editor-popover">\n <div class="popover-inner">'+this.renderButtons()+"</div>\n </div>\n ",closeByOutsideClick:!1,backdrop:!1})},e.prototype.openKeyboardToolbar=function(){this.$keyboardToolbarEl.parent(this.app.root).length||(this.$el.trigger("texteditor:keyboardopen"),this.emit("local::keyboardOpen textEditorKeyboardOpen",this),this.app.root.append(this.$keyboardToolbarEl))},e.prototype.closeKeyboardToolbar=function(){this.$keyboardToolbarEl.remove(),this.$el.trigger("texteditor:keyboardclose"),this.emit("local::keyboardClose textEditorKeyboardClose",this)},e.prototype.openPopover=function(t,e,o,r){var n=this;n.popover&&(Object.assign(n.popover.params,{targetX:t,targetY:e,targetWidth:o,targetHeight:r}),clearTimeout(n.popoverTimeout),n.popoverTimeout=setTimeout((function(){n.popover&&(n.popover.opened?n.popover.resize():(n.$el.trigger("texteditor:popoveropen"),n.emit("local::popoverOpen textEditorPopoverOpen",n),n.popover.open()))}),400))},e.prototype.closePopover=function(){var t=this;clearTimeout(t.popoverTimeout),t.popover&&t.popover.opened&&(t.popoverTimeout=setTimeout((function(){t.popover&&(t.$el.trigger("texteditor:popoverclose"),t.emit("local::popoverClose textEditorPopoverClose",t),t.popover.close())}),400))},e.prototype.init=function(){return this.value?this.$contentEl.html(this.value):this.value=this.$contentEl.html(),this.params.placeholder&&""===this.value&&this.insertPlaceholder(),"toolbar"===this.params.mode?this.createToolbar():"popover"===this.params.mode?this.createPopover():"keyboard-toolbar"===this.params.mode&&this.createKeyboardToolbar(),this.attachEvents(),this.$el.trigger("texteditor:init"),this.emit("local::init textEditorInit",this),this},e.prototype.destroy=function(){var t=this;t.$el.trigger("texteditor:beforedestroy"),t.emit("local::beforeDestroy textEditorBeforeDestroy",t),t.detachEvents(),"keyboard-toolbar"===t.params.mode&&t.$keyboardToolbarEl&&t.$keyboardToolbarEl.remove(),t.popover&&(t.popover.close(!1),t.popover.destroy()),delete t.$el[0].f7TextEditor,i.deleteProps(t),t=null},e}(a),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:function(){this.textEditor=i.extend(s({defaultSelector:".text-editor",constructor:c,app:this,domProp:"f7TextEditor"}))},static:{TextEditor:c},on:{tabMounted:function(t){var e=this;n(t).find(".text-editor-init").each((function(t,o){var r=n(o).dataset();e.textEditor.create(i.extend({el:o},r||{}))}))},tabBeforeRemove:function(t){n(t).find(".text-editor-init").each((function(t,e){e.f7TextEditor&&e.f7TextEditor.destroy()}))},pageInit:function(t){var e=this;t.$el.find(".text-editor-init").each((function(t,o){var r=n(o).dataset();e.textEditor.create(i.extend({el:o},r||{}))}))},pageBeforeRemove:function(t){t.$el.find(".text-editor-init").each((function(t,e){e.f7TextEditor&&e.f7TextEditor.destroy()}))}},vnode:{"text-editor-init":{insert:function(t){var e=t.elm,o=n(e).dataset();this.textEditor.create(i.extend({el:e},o||{}))},destroy:function(t){var e=t.elm;e.f7TextEditor&&e.f7TextEditor.destroy()}}}};if(e){if(t.prototype.modules&&t.prototype.modules[p.name])return;t.use(p),t.instance&&(t.instance.useModuleParams(p,t.instance.params),t.instance.useModule(p))}return p}(Framework7, typeof Framework7AutoInstallComponent === 'undefined' ? undefined : Framework7AutoInstallComponent))