@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.53 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(m){"use strict";m=m&&m.hasOwnProperty("default")?m.default:m,Object.assign(m.POPUP_TEMPLATES,{"textColor.picker":"[_BUTTONS_][_TEXT_COLORS_][_CUSTOM_COLOR_]","backgroundColor.picker":"[_BUTTONS_][_BACKGROUND_COLORS_][_CUSTOM_COLOR_]"}),Object.assign(m.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","|","-"]}),m.PLUGINS.colors=function(b){var g=b.$,E='<div class="fr-color-hex-layer fr-active fr-layer" id="fr-color-hex-layer- \n '.concat(b.id,'"><div class="fr-input-line"><input maxlength="7" id="[ID]"\n type="text" placeholder="').concat(b.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(b.language.translate("OK"),"</button></div></div>");function k(o){for(var t="text"===o?b.opts.colorsText:b.opts.colorsBackground,r='<div class="fr-color-set fr-'.concat(o,'-color fr-selected-set">'),e=0;e<t.length;e++)0!==e&&e%b.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(b.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(b.language.translate("Clear Formatting"),'">').concat(b.icon.create("remove"),' \n <span class="fr-sr-only"> ').concat(b.language.translate("Clear Formatting")," </span></span>");return"".concat(r,"</div>")}function r(o){"REMOVE"!==o?b.format.applyStyle("background-color",b.helpers.HEXtoRGB(o)):b.format.removeStyle("background-color"),b.popups.hide("backgroundColor.picker")}function e(o){"REMOVE"!==o?b.format.applyStyle("color",b.helpers.HEXtoRGB(o)):b.format.removeStyle("color"),b.popups.hide("textColor.picker")}return{showColorsPopup:function(o){var t,r,i,p,e,c=b.$tb.find('.fr-command[data-cmd="'.concat(o,'"]')),a=b.popups.get("".concat(o,".picker"));if(a||(n=o,f="",b.opts.toolbarInline&&0<b.opts.colorsButtons.length&&(f+='<div class="fr-buttons fr-colors-buttons fr-tabs">\n '.concat(b.button.buildList(b.opts.colorsButtons),"\n </div>")),e="",f="textColor"===n?(b.opts.colorsHEXInput&&(e=E.replace(/\[ID\]/g,"fr-color-hex-layer-text-".concat(b.id)).replace(/\[COMMAND\]/g,"customTextColor")),{buttons:f,text_colors:k("text"),custom_color:e}):(b.opts.colorsHEXInput&&(e=E.replace(/\[ID\]/g,"fr-color-hex-layer-background-".concat(b.id)).replace(/\[COMMAND\]/g,"customBackgroundColor")),{buttons:f,background_colors:k("background"),custom_color:e}),e=b.popups.create("".concat(n,".picker"),f),i=e,p="".concat(n,".picker"),b.events.on("popup.tab",function(o){var t,r,e,c,a,n,l,s=g(o.currentTarget);return!b.popups.isVisible(p)||!s.is("span")||(t=o.which,r=!0,m.KEYCODE.TAB===t?(e=i.find(".fr-buttons"),r=!b.accessibility.focusToolbar(e,!!o.shiftKey)):m.KEYCODE.ARROW_UP===t||m.KEYCODE.ARROW_DOWN===t||m.KEYCODE.ARROW_LEFT===t||m.KEYCODE.ARROW_RIGHT===t?s.is("span.fr-select-color")&&(a=(e=s.parent().find("span.fr-select-color")).index(s),c=b.opts.colorsStep,l=Math.floor(e.length/c),n=a%c,a=Math.floor(a/c)*c+n,n=l*c,m.KEYCODE.ARROW_UP===t?a=((a-c)%n+n)%n:m.KEYCODE.ARROW_DOWN===t?a=(a+c)%n:m.KEYCODE.ARROW_LEFT===t?a=((a-1)%n+n)%n:m.KEYCODE.ARROW_RIGHT===t&&(a=(a+1)%n),l=g(e.get(a)),b.events.disableBlur(),l.focus(),r=!1):m.KEYCODE.ENTER===t&&(b.button.exec(s),r=!1),!1===r&&(o.preventDefault(),o.stopPropagation()),r)},!0),a=e),!a.hasClass("fr-active")){b.popups.setContainer("".concat(o,".picker"),b.$tb);var n,l="textColor"===o?"text":"background",s=b.popups.get("".concat(l,"Color.picker")),u=g(b.selection.element()),d="background"===l?"background-color":"color",f=s.find(".fr-".concat(l,"-color .fr-select-color"));for(f.find(".fr-selected-color").remove(),f.removeClass("fr-active-item"),f.not('[data-param1="REMOVE"]').attr("aria-selected",!1);u.get(0)!==b.el;){if("transparent"!==u.css(d)&&"rgba(0, 0, 0, 0)"!==u.css(d)){var C=s.find(".fr-".concat(l,'-color .fr-select-color[data-param1="').concat(b.helpers.RGBToHex(u.css(d)),'"]'));C.append('<span class="fr-selected-color" aria-hidden="true"></span>'),C.addClass("fr-active-item").attr("aria-selected",!0);break}u=u.parent()}f=l,n=b.popups.get("".concat(f,"Color.picker")),f=n.find(".fr-".concat(f,"-color .fr-active-item")).attr("data-param1"),n=n.find(".fr-color-hex-layer input"),f=f||"",n.length&&g(n.val(f).input).trigger("change"),c.isVisible()?(t=(e=b.button.getPosition(c)).left,r=e.top,b.popups.show("".concat(o,".picker"),t,r,c.outerHeight())):(b.position.forSelection(a),b.popups.show("".concat(o,".picker")))}},background:r,customColor:function(o){var t=b.popups.get("".concat(o,"Color.picker")).find(".fr-color-hex-layer input");t.length&&("background"===o?r:e)(t.val())},text:e,back:function(){b.popups.hide("textColor.picker"),b.popups.hide("backgroundColor.picker"),b.toolbar.showInline()}}},m.DefineIcon("textColor",{NAME:"tint",SVG_KEY:"textColor"}),m.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")}}),m.RegisterCommand("applytextColor",{undo:!0,callback:function(o,t){this.colors.text(t)}}),m.RegisterCommand("customTextColor",{title:"OK",undo:!0,callback:function(){this.colors.customColor("text")}}),m.DefineIcon("backgroundColor",{NAME:"paint-brush",SVG_KEY:"backgroundColor"}),m.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")}}),m.RegisterCommand("applybackgroundColor",{undo:!0,callback:function(o,t){this.colors.background(t)}}),m.RegisterCommand("customBackgroundColor",{title:"OK",undo:!0,callback:function(){this.colors.customColor("background")}}),m.DefineIcon("colorsBack",{NAME:"arrow-left",SVG_KEY:"back"}),m.RegisterCommand("colorsBack",{title:"Back",undo:!1,focus:!1,back:!0,refreshAfterCallback:!1,callback:function(){this.colors.back()}}),m.DefineIcon("remove",{NAME:"eraser",SVG_KEY:"remove"})});
//# sourceMappingURL=colors.min.min.js.map