Палитра цветов Color Picker и разворот редактора

автор **Феникс** Декабрь 3rd 2016, 23:43

Скрипт ставить в основные скрипты с расположением "в темах" :

Код:: $(function() { $(function() { $(".sceditor-button-color").hide() }) }); document.write("<style>.sceditor-button-color{display:none!important}.sceditor-dropdown a:hover{background:#c22525}.colorpicker{background:url(https://i.servimg.com/u/f34/14/83/59/48/light110.png)!important;display:none;font-family:Arial, Helvetica, sans-serif;height:176px;overflow:hidden;padding:0!important;position:absolute;width:356px;z-index:3}.colorpicker.dark{background:url(http://im35.gulfup.com/Vliab.jpg)!important}.colorpicker_color{background:red;cursor:crosshair;height:150px;left:14px;overflow:hidden;position:absolute;top:13px;width:150px}.colorpicker_color div{background:url(https://i.servimg.com/u/f83/17/45/19/77/colorp10.png);height:150px;left:0;position:absolute;top:0;width:150px} .colorpicker_color div div{background:url(https://i.servimg.com/u/f83/17/45/19/77/colorp10.gif); height:11px;left:0;margin:-5px 0 0 -5px;overflow:hidden;position:absolute;top:0;width:11px} .colorpicker_hue{cursor:n-resize;height:150px;left:171px;position:absolute;top:13px;width:35px}.colorpicker_hue div{background:url(https://i.servimg.com/u/f83/17/45/19/77/colorp11.gif) left top;height:9px;left:0;margin:-4px 0 0;overflow:hidden;position:absolute;width:35px}.colorpicker_new_color{background:red;height:30px;left:213px;position:absolute;top:13px;width:60px}.colorpicker_current_color{background:red;height:30px;left:283px;position:absolute;top:13px;width:60px}.colorpicker input{background-color:transparent;border:1px solid transparent;color:#898989;font-family:Arial, Helvetica, sans-serif;font-size:10px;height:11px;margin:0;padding:0!important;position:absolute;right:11px;text-align:right;top:4px}.colorpicker_hex{background:url(https://i.servimg.com/u/f83/17/45/19/77/custom11.png) top;height:22px;left:212px;position:absolute;top:142px;width:72px}.colorpicker.dark .colorpicker_hex{background:url(https://i.servimg.com/u/f83/17/45/19/77/colorp11.png) top}.colorpicker_hex input{right:6px}.colorpicker_field{background-position:top;height:22px;position:absolute;width:62px}.colorpicker_field span{cursor:n-resize;height:22px;overflow:hidden;position:absolute;right:0;top:0;width:12px}.colorpicker_rgb_r{background-image:url(https://i.servimg.com/u/f83/17/45/19/77/custom12.png);left:212px;top:52px}.colorpicker.dark .colorpicker_rgb_r{background-image:url(https://i.servimg.com/u/f83/17/45/19/77/colorp12.png)}.colorpicker_rgb_g{background-image:url(https://i.servimg.com/u/f83/17/45/19/77/custom13.png);left:212px;top:82px}.colorpicker.dark .colorpicker_rgb_g{background-image:url(https://i.servimg.com/u/f83/17/45/19/77/colorp13.png)} .colorpicker_rgb_b{background-image:url(https://i.servimg.com/u/f83/17/45/19/77/custom14.png);left:212px;top:112px}.colorpicker.dark .colorpicker_rgb_b{background-image:url(https://i.servimg.com/u/f83/17/45/19/77/colorp14.png)} .colorpicker_hsb_b,.colorpicker_hsb_h,.colorpicker_hsb_s{display:none} .colorpicker_submit{background:url(https://i.servimg.com/u/f83/17/45/19/77/accept10.png) no-repeat;cursor:pointer;height:50px;overflow:hidden;position:absolute;right:10px;top:118px;width:48px} .colorpicker_focus{background-position:center} .colorpicker_hex.colorpicker_focus{background-position:bottom} .colorpicker_submit.colorpicker_focus{background-position:bottom} .colorpicker_slider{background-position:bottom}</style>"); var skin_color_picker = "light"; $(function() { $(function() { $("#text_editor_textarea").length != 0 && (function(e) { var t = function() { var t = 65, n = { eventName: "click", onShow: function() {}, onBeforeShow: function() {}, onHide: function() {}, onChange: function() {}, onSubmit: function() {}, color: "ff0000", livePreview: !0, skin: "light", flat: !1 }, r = function(t, n) { var r = D(t); e(n).data("colorpicker").fields.eq(1).val(r.r).end().eq(2).val(r.g).end().eq(3).val(r.b).end() }, i = function(t, n) { e(n).data("colorpicker").fields.eq(4).val(t.h).end().eq(5).val(t.s).end().eq(6).val(t.b).end() }, s = function(t, n) { e(n).data("colorpicker").fields.eq(0).val(P(D(t))).end() }, o = function(t, n) { e(n).data("colorpicker").selector.css("backgroundColor", "#" + P(D({ h: t.h, s: 100, b: 100 }))); e(n).data("colorpicker").selectorIndic.css({ left: parseInt(150 * t.s / 100, 10), top: parseInt(150 * (100 - t.b) / 100, 10) }) }, u = function(t, n) { e(n).data("colorpicker").hue.css("top", parseInt(150 - 150 * t.h / 360, 10)) }, a = function(t, n) { e(n).data("colorpicker").currentColor.css("backgroundColor", "#" + P(D(t))) }, f = function(t, n) { e(n).data("colorpicker").newColor.css("backgroundColor", "#" + P(D(t))) }, l = function(n) { n = n.charCode || n.keyCode || -1; if (n > t && n <= 90 || n == 32) return !1; e(this).parent().parent().data("colorpicker").livePreview === !0 && h.apply(this) }, h = function(t) { var n = e(this).parent().parent(), a; if (this.parentNode.className.indexOf("_hex") > 0) { a = n.data("colorpicker"); var l = this.value, h = 6 - l.length; if (h > 0) { for (var p = [], d = 0; d < h; d++) p.push("0"); p.push(l); l = p.join("") } l = _(M(l)); a.color = a = l } else this.parentNode.className.indexOf("_hsb") > 0 ? n.data("colorpicker").color = a = O({ h: parseInt(n.data("colorpicker").fields.eq(4).val(), 10), s: parseInt(n.data("colorpicker").fields.eq(5).val(), 10), b: parseInt(n.data("colorpicker").fields.eq(6).val(), 10) }) : (a = n.data("colorpicker"), l = { r: parseInt(n.data("colorpicker").fields.eq(1).val(), 10), g: parseInt(n.data("colorpicker").fields.eq(2).val(), 10), b: parseInt(n.data("colorpicker").fields.eq(3).val(), 10) }, a.color = a = _({ r: Math.min(255, Math.max(0, l.r)), g: Math.min(255, Math.max(0, l.g)), b: Math.min(255, Math.max(0, l.b)) })); t && (r(a, n.get(0)), s(a, n.get(0)), i(a, n.get(0))); o(a, n.get(0)); u(a, n.get(0)); f(a, n.get(0)); n.data("colorpicker").onChange.apply(n, [a, P(D(a)), D(a)]) }, p = function() { e(this).parent().parent().data("colorpicker").fields.parent().removeClass("colorpicker_focus") }, d = function() { t = this.parentNode.className.indexOf("_hex") > 0 ? 70 : 65; e(this).parent().parent().data("colorpicker").fields.parent().removeClass("colorpicker_focus"); e(this).parent().addClass("colorpicker_focus") }, v = function(t) { var n = e(this).parent().find("input").focus(), t = { el: e(this).parent().addClass("colorpicker_slider"), max: this.parentNode.className.indexOf("_hsb_h") > 0 ? 360 : this.parentNode.className.indexOf("_hsb") > 0 ? 100 : 255, y: t.pageY, field: n, val: parseInt(n.val(), 10), preview: e(this).parent().parent().data("colorpicker").livePreview }; e(document).bind("mouseup", t, g); e(document).bind("mousemove", t, m) }, m = function(e) { e.data.field.val(Math.max(0, Math.min(e.data.max, parseInt(e.data.val + e.pageY - e.data.y, 10)))); e.data.preview && h.apply(e.data.field.get(0), [!0]); return !1 }, g = function(t) { h.apply(t.data.field.get(0), [!0]); t.data.el.removeClass("colorpicker_slider").find("input").focus(); e(document).unbind("mouseup", g); e(document).unbind("mousemove", m); return !1 }, y = function() { var t = { cal: e(this).parent(), y: e(this).offset().top }; t.preview = t.cal.data("colorpicker").livePreview; e(document).bind("mouseup", t, w); e(document).bind("mousemove", t, b) }, b = function(e) { h.apply(e.data.cal.data("colorpicker").fields.eq(4).val(parseInt(360 * (150 - Math.max(0, Math.min(150, e.pageY - e.data.y))) / 150, 10)).get(0), [e.data.preview]); return !1 }, w = function(t) { r(t.data.cal.data("colorpicker").color, t.data.cal.get(0)); s(t.data.cal.data("colorpicker").color, t.data.cal.get(0)); e(document).unbind("mouseup", w); e(document).unbind("mousemove", b); return !1 }, E = function() { var t = { cal: e(this).parent(), pos: e(this).offset() }; t.preview = t.cal.data("colorpicker").livePreview; e(document).bind("mouseup", t, x); e(document).bind("mousemove", t, S) }, S = function(e) { h.apply(e.data.cal.data("colorpicker").fields.eq(6).val(parseInt(100 * (150 - Math.max(0, Math.min(150, e.pageY - e.data.pos.top))) / 150, 10)).end().eq(5).val(parseInt(100 * Math.max(0, Math.min(150, e.pageX - e.data.pos.left)) / 150, 10)).get(0), [e.data.preview]); return !1 }, x = function(t) { r(t.data.cal.data("colorpicker").color, t.data.cal.get(0)); s(t.data.cal.data("colorpicker").color, t.data.cal.get(0)); e(document).unbind("mouseup", x); e(document).unbind("mousemove", S); return !1 }, T = function() { e(this).addClass("colorpicker_focus") }, N = function() { e(this).removeClass("colorpicker_focus") }, C = function(t) { var n = e(this).parent(), r = n.data("colorpicker").color; n.data("colorpicker").origColor = r; a(r, n.get(0)); n.data("colorpicker").onSubmit(r, P(D(r)), D(r), n.data("colorpicker").el, t); e(this).parent().hide() }, k = function() { var t = e("#" + e(this).data("colorpickerId")); t.data("colorpicker").onBeforeShow.apply(this, [t.get(0)]); var n = e(this).offset(), r; r = document.compatMode == "CSS1Compat"; r = { l: window.pageXOffset || (r ? document.documentElement.scrollLeft : document.body.scrollLeft), t: window.pageYOffset || (r ? document.documentElement.scrollTop : document.body.scrollTop), w: window.innerWidth || (r ? document.documentElement.clientWidth : document.body.clientWidth), h: window.innerHeight || (r ? document.documentElement.clientHeight : document.body.clientHeight) }; var i = n.top + this.offsetHeight, n = n.left; i + 176 > r.t + r.h && (i -= this.offsetHeight + 176); n + 356 > r.l + r.w && (n -= 356); t.css({ left: n + "px", top: i + "px" }); t.data("colorpicker").onShow.apply(this, [t.get(0)]) != !1 && t.show("fast"); e(document).bind("mousedown", { cal: t }, L); return !1 }, L = function(t) { A(t.data.cal.get(0), t.target, t.data.cal.get(0)) || (t.data.cal.data("colorpicker").onHide.apply(this, [t.data.cal.get(0)]) != !1 && t.data.cal.hide(), e(document).unbind("mousedown", L)) }, A = function(e, t, n) { if (e == t) return !0; if (e.contains) return e.contains(t); if (e.compareDocumentPosition) return !!(e.compareDocumentPosition(t) & 16); for (t = t.parentNode; t && t != n;) { if (t == e) return !0; t = t.parentNode } return !1 }, O = function(e) { return { h: Math.min(360, Math.max(0, e.h)), s: Math.min(100, Math.max(0, e.s)), b: Math.min(100, Math.max(0, e.b)) } }, M = function(e) { e = parseInt(e.indexOf("#") > -1 ? e.substring(1) : e, 16); return { r: e >> 16, g: (e & 65280) >> 8, b: e & 255 } }, _ = function(e) { var t = { h: 0, s: 0, b: 0 }, n = Math.max(e.r, e.g, e.b), r = n - Math.min(e.r, e.g, e.b); t.b = n; t.s = n != 0 ? 255 * r / n : 0; t.h = t.s != 0 ? e.r == n ? (e.g - e.b) / r : e.g == n ? 2 + (e.b - e.r) / r : 4 + (e.r - e.g) / r : -1; t.h *= 60; t.h < 0 && (t.h += 360); t.s *= 100 / 255; t.b *= 100 / 255; return t }, D = function(e) { var t = {}, n = Math.round(e.h), r = Math.round(e.s * 255 / 100), e = Math.round(e.b * 255 / 100); if (r == 0) t.r = t.g = t.b = e; else { var r = (255 - r) * e / 255, i = (e - r) * (n % 60) / 60; n == 360 && (n = 0); n < 60 ? (t.r = e, t.b = r, t.g = r + i) : n < 120 ? (t.g = e, t.b = r, t.r = e - i) : n < 180 ? (t.g = e, t.r = r, t.b = r + i) : n < 240 ? (t.b = e, t.r = r, t.g = e - i) : n < 300 ? (t.b = e, t.g = r, t.r = r + i) : n < 360 ? (t.r = e, t.g = r, t.b = e - i) : (t.r = 0, t.g = 0, t.b = 0) } return { r: Math.round(t.r), g: Math.round(t.g), b: Math.round(t.b) } }, P = function(t) { var n = [t.r.toString(16), t.g.toString(16), t.b.toString(16)]; e.each(n, function(e, t) { t.length == 1 && (n[e] = "0" + t) }); return n.join("") }, H = function() { var t = e(this).parent(), n = t.data("colorpicker").origColor; t.data("colorpicker").color = n; r(n, t.get(0)); s(n, t.get(0)); i(n, t.get(0)); o(n, t.get(0)); u(n, t.get(0)); f(n, t.get(0)) }; return { init: function(t) { t = e.extend({}, n, t || {}); if (typeof t.color == "string") t.color = _(M(t.color)); else if (t.color.r != void 0 && t.color.g != void 0 && t.color.b != void 0) t.color = _(t.color); else if (t.color.h != void 0 && t.color.s != void 0 && t.color.b != void 0) t.color = O(t.color); else return this; return this.each(function() { if (!e(this).data("colorpickerId")) { var n = e.extend({}, t); n.origColor = t.color; var m = "collorpicker_" + parseInt(Math.random() * 1e3); e(this).data("colorpickerId", m); m = e('<div class="sceditor-dropdown colorpicker ' + n.skin + '"><div class="colorpicker_color"><div><div></div></div></div><div class="colorpicker_hue"><div></div></div><div class="colorpicker_new_color"></div><div class="colorpicker_current_color"></div><div class="colorpicker_hex"><input type="text" maxlength="6" size="6" /></div><div class="colorpicker_rgb_r colorpicker_field"><input type="text" maxlength="3" size="3" /><span></span></div><div class="colorpicker_rgb_g colorpicker_field"><input type="text" maxlength="3" size="3" /><span></span></div><div class="colorpicker_rgb_b colorpicker_field"><input type="text" maxlength="3" size="3" /><span></span></div><div class="colorpicker_hsb_h colorpicker_field"><input type="text" maxlength="3" size="3" /><span></span></div><div class="colorpicker_hsb_s colorpicker_field"><input type="text" size="3" /><span></span></div><div class="colorpicker_hsb_b colorpicker_field"><input type="text" size="3" /><span></span></div><div class="colorpicker_submit"></div></div>').attr("id", m); n.flat ? m.appendTo(this).show("fast") : m.appendTo(document.body); n.fields = m.find("input").bind("keyup", l).bind("change", h).bind("blur", p).bind("focus", d); m.find("span").bind("mousedown", v).end().find(">div.colorpicker_current_color").bind("click", H); n.selector = m.find("div.colorpicker_color").bind("mousedown", E); n.selectorIndic = n.selector.find("div div"); n.el = this; n.hue = m.find("div.colorpicker_hue div"); m.find("div.colorpicker_hue").bind("mousedown", y); n.newColor = m.find("div.colorpicker_new_color"); n.currentColor = m.find("div.colorpicker_current_color"); m.data("colorpicker", n); m.find("div.colorpicker_submit").bind("mouseenter", T).bind("mouseleave", N).bind("click", C); r(n.color, m.get(0)); i(n.color, m.get(0)); s(n.color, m.get(0)); u(n.color, m.get(0)); o(n.color, m.get(0)); a(n.color, m.get(0)); f(n.color, m.get(0)); n.flat ? m.css({ position: "relative", display: "block" }) : e(this).bind(n.eventName, k) } }) }, showPicker: function() { return this.each(function() { e(this).data("colorpickerId") && k.apply(this) }) }, hidePicker: function() { return this.each(function() { e(this).data("colorpickerId") && e("#" + e(this).data("colorpickerId")).hide() }) }, setColor: function(t) { if (typeof t == "string") t = _(M(t)); else if (t.r != void 0 && t.g != void 0 && t.b != void 0) t = _(t); else if (t.h != void 0 && t.s != void 0 && t.b != void 0) t = O(t); else return this; return this.each(function() { if (e(this).data("colorpickerId")) { var n = e("#" + e(this).data("colorpickerId")); n.data("colorpicker").color = t; n.data("colorpicker").origColor = t; r(t, n.get(0)); i(t, n.get(0)); s(t, n.get(0)); u(t, n.get(0)); o(t, n.get(0)); a(t, n.get(0)); f(t, n.get(0)) } }) } } }(); e.fn.extend({ ColorPicker: t.init, ColorPickerHide: t.hidePicker, ColorPickerShow: t.showPicker, ColorPickerSetColor: t.setColor }) }(jQuery), $('<a class="sceditor-button sceditor-button-paletaavanzada" unselectable="on" title="Цвет текста."><div unselectable="on" style="cursor: pointer !important; opacity: 1 !important; background-image:url(https://i.servimg.com/u/f83/17/45/19/77/color_10.png)"></div></a>').insertAfter(".sceditor-button-color").ColorPicker({ color: my_getcookie("defColCP") ? my_getcookie("defColCP") : "#000000", flat: false, skin: skin_color_picker, onSubmit: function(e, t, n, r) { my_setcookie("defColCP", t, 1, 0); var i = $("#text_editor_textarea").sceditor("instance"); i.inSourceMode() ? i.insertText("[color=#" + t + "]", "[/color]") : i.execCommand("forecolor", "#" + t); return !1 } })) }) }); var editormaxi = false; $(function() { $(function() { $('<a class="sceditor-button sceditor-button-maxi" unselectable="on" title="Поле «Масштаб»"><div unselectable="on" style="cursor:pointer!important;opacity:1!important;background-image:url(https://i.servimg.com/u/f37/17/45/19/77/full_s10.png)">Развернуть редактор</div></a>').insertBefore('.sceditor-button-source').click(function() { $("#text_editor_textarea").sceditor("instance").maximize(editormaxi = !editormaxi).focus(); if (editormaxi) { $(".sceditor-button-maxi").addClass("hover"); $("div.sceditor-container").append('<div align="center" id="sceditor-maximized" class="sceditor-toolbar" style="width:100%;border-top:1px solid silver;position:absolute;bottom:0;"><input type="submit" value="Предпросмотр" name="preview"> <input type="submit" value="Отправить" name="post"></div>'); $(".sceditor-maximize").prop("style", $(".sceditor-maximize").attr("style") + ";text-align:center;"); $("#fa_toolbar").hide() } else { $(".sceditor-button-maxi").removeClass("hover"); $("#sceditor-maximized").remove(); $("#fa_toolbar").show() } }) }) })

Не стал удалять разворот редактора. Но если не нужен, от 379-ой строки удалите код вниз. В оригинале скрипт был аж 7в1 smile

Если не больше.. подчистил на мой взгляд лишнее.

Палитра цветов Color Picker и разворот редактора 0133546001615650465