Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
froala color beautified
/*!
* froala_editor v2.6.1 (https://www.froala.com/wysiwyg-editor)
* License https://froala.com/wysiwyg-editor/terms/
* Copyright 2014-2017 Froala Labs
*/
! function(a) {
"function" == typeof define && define.amd ? define(["jquery"], a) : "object" == typeof module && module.exports ? module.exports = function(b, c) {
return void 0 === c && (c = "undefined" != typeof window ? require("jquery") : require("jquery")(b)), a(c)
} : a(window.jQuery)
}(function(a) {
a.extend(a.FE.POPUP_TEMPLATES, {
"colors.picker": "[_BUTTONS_][_TEXT_COLORS_][_BACKGROUND_COLORS_]"
}), a.extend(a.FE.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,
colorsDefaultTab: "text",
colorsButtons: ["colorsBack", "|", "-"]
}), a.FE.PLUGINS.colors = function(b) {
function c() {
var a = b.$tb.find('.fr-command[data-cmd="color"]'),
c = b.popups.get("colors.picker");
if (c || (c = e()), !c.hasClass("fr-active"))
if (b.popups.setContainer("colors.picker", b.$tb), i(c.find(".fr-selected-tab").attr("data-param1")), a.is(":visible")) {
var d = a.offset().left + a.outerWidth() / 2,
f = a.offset().top + (b.opts.toolbarBottom ? 10 : a.outerHeight() - 10);
b.popups.show("colors.picker", d, f, a.outerHeight())
} else b.position.forSelection(c), b.popups.show("colors.picker")
}
function d() {
b.popups.hide("colors.picker")
}
function e() {
var a = '<div class="fr-buttons fr-colors-buttons">';
b.opts.toolbarInline && b.opts.colorsButtons.length > 0 && (a += b.button.buildList(b.opts.colorsButtons)), a += f() + "</div>";
var c = {
buttons: a,
text_colors: g("text"),
background_colors: g("background")
},
d = b.popups.create("colors.picker", c);
return h(d), d
}
function f() {
var a = '<div class="fr-colors-tabs fr-group">';
return a += '<span class="fr-colors-tab ' + ("background" == b.opts.colorsDefaultTab ? "" : "fr-selected-tab ") + 'fr-command" tabIndex="-1" role="button" aria-pressed="' + ("background" != b.opts.colorsDefaultTab) + '" data-param1="text" data-cmd="colorChangeSet" title="' + b.language.translate("Text") + '">' + b.language.translate("Text") + "</span>", (a += '<span class="fr-colors-tab ' + ("background" == b.opts.colorsDefaultTab ? "fr-selected-tab " : "") + 'fr-command" tabIndex="-1" role="button" aria-pressed="' + ("background" == b.opts.colorsDefaultTab) + '" data-param1="background" data-cmd="colorChangeSet" title="' + b.language.translate("Background") + '">' + b.language.translate("Background") + "</span>") + "</div>"
}
function g(a) {
for (var c = "text" == a ? b.opts.colorsText : b.opts.colorsBackground, d = '<div class="fr-color-set fr-' + a + "-color" + (b.opts.colorsDefaultTab == a || "text" != b.opts.colorsDefaultTab && "background" != b.opts.colorsDefaultTab && "text" == a ? " fr-selected-set" : "") + '">', e = 0; e < c.length; e++) 0 !== e && e % b.opts.colorsStep == 0 && (d += "<br>"), "REMOVE" != c[e] ? d += '<span class="fr-command fr-select-color" style="background: ' + c[e] + ';" tabIndex="-1" aria-selected="false" role="button" data-cmd="' + a + 'Color" data-param1="' + c[e] + '"><span class="fr-sr-only">' + b.language.translate("Color") + " " + c[e] + "&nbsp;&nbsp;&nbsp;</span></span>" : d += '<span class="fr-command fr-select-color" data-cmd="' + a + 'Color" tabIndex="-1" role="button" data-param1="REMOVE" title="' + b.language.translate("Clear Formatting") + '">' + b.icon.create("remove") + '<span class="fr-sr-only">' + b.language.translate("Clear Formatting") + "</span></span>";
return d + "</div>"
}
function h(c) {
b.events.on("popup.tab", function(d) {
var e = a(d.currentTarget);
if (!b.popups.isVisible("colors.picker") || !e.is("span")) return !0;
var f = d.which,
g = !0;
if (a.FE.KEYCODE.TAB == f) {
var h = c.find(".fr-buttons");
g = !b.accessibility.focusToolbar(h, !!d.shiftKey)
} else if (a.FE.KEYCODE.ARROW_UP == f || a.FE.KEYCODE.ARROW_DOWN == f || a.FE.KEYCODE.ARROW_LEFT == f || a.FE.KEYCODE.ARROW_RIGHT == f) {
if (e.is("span.fr-select-color")) {
var i = e.parent().find("span.fr-select-color"),
j = i.index(e),
k = b.opts.colorsStep,
l = Math.floor(i.length / k),
m = j % k,
n = Math.floor(j / k),
o = n * k + m,
p = l * k;
a.FE.KEYCODE.ARROW_UP == f ? o = ((o - k) % p + p) % p : a.FE.KEYCODE.ARROW_DOWN == f ? o = (o + k) % p : a.FE.KEYCODE.ARROW_LEFT == f ? o = ((o - 1) % p + p) % p : a.FE.KEYCODE.ARROW_RIGHT == f && (o = (o + 1) % p);
var q = a(i.get(o));
b.events.disableBlur(), q.focus(), g = !1
}
} else a.FE.KEYCODE.ENTER == f && (b.button.exec(e), g = !1);
return !1 === g && (d.preventDefault(), d.stopPropagation()), g
}, !0)
}
function i(c) {
var d, e = b.popups.get("colors.picker"),
f = a(b.selection.element());
d = "background" == c ? "background-color" : "color";
var g = e.find(".fr-" + c + "-color .fr-select-color");
for (g.find(".fr-selected-color").remove(), g.removeClass("fr-active-item"), g.not('[data-param1="REMOVE"]').attr("aria-selected", !1); f.get(0) != b.el;) {
if ("transparent" != f.css(d) && "rgba(0, 0, 0, 0)" != f.css(d)) {
var h = e.find(".fr-" + c + '-color .fr-select-color[data-param1="' + b.helpers.RGBToHex(f.css(d)) + '"]');
h.append('<span class="fr-selected-color" aria-hidden="true">\uf00c</span>'), h.addClass("fr-active-item").attr("aria-selected", !0);
break
}
f = f.parent()
}
}
function j(a, c) {
a.hasClass("fr-selected-tab") || (a.siblings().removeClass("fr-selected-tab").attr("aria-pressed", !1), a.addClass("fr-selected-tab").attr("aria-pressed", !0), a.parents(".fr-popup").find(".fr-color-set").removeClass("fr-selected-set"), a.parents(".fr-popup").find(".fr-color-set.fr-" + c + "-color").addClass("fr-selected-set"), i(c)), b.accessibility.focusPopup(a.parents(".fr-popup"))
}
function k(a) {
"REMOVE" != a ? b.format.applyStyle("background-color", b.helpers.HEXtoRGB(a)) : b.format.removeStyle("background-color"), d()
}
function l(a) {
"REMOVE" != a ? b.format.applyStyle("color", b.helpers.HEXtoRGB(a)) : b.format.removeStyle("color"), d()
}
function m() {
b.popups.hide("colors.picker"), b.toolbar.showInline()
}
return {
showColorsPopup: c,
hideColorsPopup: d,
changeSet: j,
background: k,
text: l,
back: m
}
}, a.FE.DefineIcon("colors", {
NAME: "tint"
}), a.FE.RegisterCommand("color", {
title: "Colors",
undo: !1,
focus: !0,
refreshOnCallback: !1,
popup: !0,
callback: function() {
this.popups.isVisible("colors.picker") ? (this.$el.find(".fr-marker").length && (this.events.disableBlur(), this.selection.restore()), this.popups.hide("colors.picker")) : this.colors.showColorsPopup()
},
plugin: "colors"
}), a.FE.RegisterCommand("textColor", {
undo: !0,
callback: function(a, b) {
this.colors.text(b)
}
}), a.FE.RegisterCommand("backgroundColor", {
undo: !0,
callback: function(a, b) {
this.colors.background(b)
}
}), a.FE.RegisterCommand("colorChangeSet", {
undo: !1,
focus: !1,
callback: function(a, b) {
var c = this.popups.get("colors.picker").find('.fr-command[data-cmd="' + a + '"][data-param1="' + b + '"]');
this.colors.changeSet(c, b)
}
}), a.FE.DefineIcon("colorsBack", {
NAME: "arrow-left"
}), a.FE.RegisterCommand("colorsBack", {
title: "Back",
undo: !1,
focus: !1,
back: !0,
refreshAfterCallback: !1,
callback: function() {
this.colors.back()
}
}), a.FE.DefineIcon("remove", {
NAME: "eraser"
})
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.