@firestitch/froala
Version:
The next generation Javascript WYSIWYG HTML rich text editor made by devs for devs. High performance and modern design make it easy to use for developers and loved by users.
3 lines (2 loc) • 7.57 kB
JavaScript
!function(o,t){"object"==typeof exports&&"undefined"!=typeof module?t(require("froala-editor")):"function"==typeof define&&define.amd?define(["froala-editor"],t):t(o.FroalaEditor)}(this,function(f){"use strict";f=f&&f.hasOwnProperty("default")?f.default:f,Object.assign(f.POPUP_TEMPLATES,{"textColor.picker":"[_BUTTONS_][_TEXT_COLORS_][_CUSTOM_COLOR_]","backgroundColor.picker":"[_BUTTONS_][_BACKGROUND_COLORS_][_CUSTOM_COLOR_]"}),Object.assign(f.DEFAULTS,{colorsText:["#61BD6D","#1ABC9C","#54ACD2","#2C82C9","#9365B8","#475577","#CCCCCC","#41A85F","#00A885","#3D8EB9","#2969B0","#553982","#28324E","#000000","#F7DA64","#FBA026","#EB6B56","#E25041","#A38F84","#EFEFEF","#FFFFFF","#FAC51C","#F37934","#D14841","#B8312F","#7C706B","#D1D5D8","REMOVE"],colorsBackground:["#61BD6D","#1ABC9C","#54ACD2","#2C82C9","#9365B8","#475577","#CCCCCC","#41A85F","#00A885","#3D8EB9","#2969B0","#553982","#28324E","#000000","#F7DA64","#FBA026","#EB6B56","#E25041","#A38F84","#EFEFEF","#FFFFFF","#FAC51C","#F37934","#D14841","#B8312F","#7C706B","#D1D5D8","REMOVE"],colorsStep:7,colorsHEXInput:!0,colorsButtons:["colorsBack","|","-"]}),f.PLUGINS.colors=function(u){var d=u.$,a='<div class="fr-color-hex-layer fr-active fr-layer" id="fr-color-hex-layer- \n '.concat(u.id,'"><div class="fr-input-line"><input maxlength="7" id="[ID]"\n type="text" placeholder="').concat(u.language.translate("HEX Color"),'" \n tabIndex="1" aria-required="true"></div><div class="fr-action-buttons"><button \n type="button" class="fr-command fr-submit" data-cmd="[COMMAND]" tabIndex="2" role="button">\n ').concat(u.language.translate("OK"),"</button></div></div>");function n(o){for(var t="text"===o?u.opts.colorsText:u.opts.colorsBackground,r='<div class="fr-color-set fr-'.concat(o,'-color fr-selected-set">'),e=0;e<t.length;e++)0!==e&&e%u.opts.colorsStep==0&&(r+="<br>"),"REMOVE"!==t[e]?r+='<span class="fr-command fr-select-color" style="background:'.concat(t[e],';" \n tabIndex="-1" aria-selected="false" role="button" data-cmd="apply').concat(o,'Color" \n data-param1="').concat(t[e],'"><span class="fr-sr-only"> ').concat(u.language.translate("Color")).concat(t[e]," \n </span></span>"):r+='<span class="fr-command fr-select-color" data-cmd="apply'.concat(o,'Color"\n tabIndex="-1" role="button" data-param1="REMOVE" \n title="').concat(u.language.translate("Clear Formatting"),'">').concat(u.icon.create("remove"),' \n <span class="fr-sr-only"> ').concat(u.language.translate("Clear Formatting")," </span></span>");return"".concat(r,"</div>")}function l(o){var t=u.popups.get("".concat(o,"Color.picker")),r=d(u.selection.element()),e="background"===o?"background-color":"color",c=t.find(".fr-".concat(o,"-color .fr-select-color"));for(c.find(".fr-selected-color").remove(),c.removeClass("fr-active-item"),c.not('[data-param1="REMOVE"]').attr("aria-selected",!1);r.get(0)!==u.el;){if("transparent"!==r.css(e)&&"rgba(0, 0, 0, 0)"!==r.css(e)){var a=t.find(".fr-".concat(o,'-color .fr-select-color[data-param1="').concat(u.helpers.RGBToHex(r.css(e)),'"]'));a.append('<span class="fr-selected-color" aria-hidden="true"></span>'),a.addClass("fr-active-item").attr("aria-selected",!0);break}r=r.parent()}var c=o,c=(n=u.popups.get("".concat(c,"Color.picker"))).find(".fr-".concat(c,"-color .fr-active-item")).attr("data-param1"),n=n.find(".fr-color-hex-layer input");c=c||"",n.length&&d(n.val(c).input).trigger("change")}function r(o){"REMOVE"!==o?u.format.applyStyle("background-color",u.helpers.HEXtoRGB(o)):u.format.removeStyle("background-color"),u.popups.hide("backgroundColor.picker")}function e(o){"REMOVE"!==o?u.format.applyStyle("color",u.helpers.HEXtoRGB(o)):u.format.removeStyle("color"),u.popups.hide("textColor.picker")}return{showColorsPopup:function(o){var t,r,e=u.$tb.find('.fr-command[data-cmd="'.concat(o,'"]')),c=u.popups.get("".concat(o,".picker"));(c=c||function(o){var t="";u.opts.toolbarInline&&0<u.opts.colorsButtons.length&&(t+='<div class="fr-buttons fr-colors-buttons fr-tabs">\n '.concat(u.button.buildList(u.opts.colorsButtons),"\n </div>"));var r="";t="textColor"===o?(u.opts.colorsHEXInput&&(r=a.replace(/\[ID\]/g,"fr-color-hex-layer-text-".concat(u.id)).replace(/\[COMMAND\]/g,"customTextColor")),{buttons:t,text_colors:n("text"),custom_color:r}):(u.opts.colorsHEXInput&&(r=a.replace(/\[ID\]/g,"fr-color-hex-layer-background-".concat(u.id)).replace(/\[COMMAND\]/g,"customBackgroundColor")),{buttons:t,background_colors:n("background"),custom_color:r});r=u.popups.create("".concat(o,".picker"),t);return function(i,p){u.events.on("popup.tab",function(o){var t,r,e,c,a,n,l,s=d(o.currentTarget);return!u.popups.isVisible(p)||!s.is("span")||(t=o.which,r=!0,f.KEYCODE.TAB===t?(e=i.find(".fr-buttons"),r=!u.accessibility.focusToolbar(e,!!o.shiftKey)):f.KEYCODE.ARROW_UP===t||f.KEYCODE.ARROW_DOWN===t||f.KEYCODE.ARROW_LEFT===t||f.KEYCODE.ARROW_RIGHT===t?s.is("span.fr-select-color")&&(a=(e=s.parent().find("span.fr-select-color")).index(s),c=u.opts.colorsStep,l=Math.floor(e.length/c),n=a%c,a=Math.floor(a/c)*c+n,n=l*c,f.KEYCODE.ARROW_UP===t?a=((a-c)%n+n)%n:f.KEYCODE.ARROW_DOWN===t?a=(a+c)%n:f.KEYCODE.ARROW_LEFT===t?a=((a-1)%n+n)%n:f.KEYCODE.ARROW_RIGHT===t&&(a=(a+1)%n),l=d(e.get(a)),u.events.disableBlur(),l.focus(),r=!1):f.KEYCODE.ENTER===t&&(u.button.exec(s),r=!1),!1===r&&(o.preventDefault(),o.stopPropagation()),r)},!0)}(r,"".concat(o,".picker")),r}(o)).hasClass("fr-active")||(u.popups.setContainer("".concat(o,".picker"),u.$tb),l("textColor"===o?"text":"background"),e.isVisible()?(t=(r=u.button.getPosition(e)).left,r=r.top,u.popups.show("".concat(o,".picker"),t,r,e.outerHeight())):(u.position.forSelection(c),u.popups.show("".concat(o,".picker"))))},background:r,customColor:function(o){var t=u.popups.get("".concat(o,"Color.picker")).find(".fr-color-hex-layer input");t.length&&("background"===o?r:e)(t.val())},text:e,back:function(){u.popups.hide("textColor.picker"),u.popups.hide("backgroundColor.picker"),u.toolbar.showInline()}}},f.DefineIcon("textColor",{NAME:"tint",SVG_KEY:"textColor"}),f.RegisterCommand("textColor",{title:"Text Color",undo:!1,focus:!0,refreshOnCallback:!1,popup:!0,callback:function(){this.popups.isVisible("textColor.picker")?(this.$el.find(".fr-marker").length&&(this.events.disableBlur(),this.selection.restore()),this.popups.hide("textColor.picker")):this.colors.showColorsPopup("textColor")}}),f.RegisterCommand("applytextColor",{undo:!0,callback:function(o,t){this.colors.text(t)}}),f.RegisterCommand("customTextColor",{title:"OK",undo:!0,callback:function(){this.colors.customColor("text")}}),f.DefineIcon("backgroundColor",{NAME:"paint-brush",SVG_KEY:"backgroundColor"}),f.RegisterCommand("backgroundColor",{title:"Background Color",undo:!1,focus:!0,refreshOnCallback:!1,popup:!0,callback:function(){this.popups.isVisible("backgroundColor.picker")?(this.$el.find(".fr-marker").length&&(this.events.disableBlur(),this.selection.restore()),this.popups.hide("backgroundColor.picker")):this.colors.showColorsPopup("backgroundColor")}}),f.RegisterCommand("applybackgroundColor",{undo:!0,callback:function(o,t){this.colors.background(t)}}),f.RegisterCommand("customBackgroundColor",{title:"OK",undo:!0,callback:function(){this.colors.customColor("background")}}),f.DefineIcon("colorsBack",{NAME:"arrow-left",SVG_KEY:"back"}),f.RegisterCommand("colorsBack",{title:"Back",undo:!1,focus:!1,back:!0,refreshAfterCallback:!1,callback:function(){this.colors.back()}}),f.DefineIcon("remove",{NAME:"eraser",SVG_KEY:"remove"})});
//# sourceMappingURL=colors.min.js.map