From c98b0aac906e6176808d991eda83dffbd6e04124 Mon Sep 17 00:00:00 2001 From: Raphael Michel Date: Sun, 7 May 2017 11:54:15 +0200 Subject: [PATCH] Added bootstrap-colorpicker --- .gitattributes | 1 + src/pretix/control/forms/event.py | 3 +- .../control/templates/pretixcontrol/base.html | 1 + .../static/colorpicker/alpha-horizontal.png | Bin 0 -> 557 bytes src/pretix/static/colorpicker/alpha.png | Bin 0 -> 488 bytes .../colorpicker/bootstrap-colorpicker.js | 1319 +++++++++++++++++ .../colorpicker/bootstrap-colorpicker.scss | 230 +++ .../static/colorpicker/hue-horizontal.png | Bin 0 -> 478 bytes src/pretix/static/colorpicker/hue.png | Bin 0 -> 504 bytes src/pretix/static/colorpicker/saturation.png | Bin 0 -> 4143 bytes src/pretix/static/pretixcontrol/js/ui/main.js | 6 + .../static/pretixcontrol/scss/main.scss | 18 +- 12 files changed, 1576 insertions(+), 2 deletions(-) create mode 100644 src/pretix/static/colorpicker/alpha-horizontal.png create mode 100644 src/pretix/static/colorpicker/alpha.png create mode 100644 src/pretix/static/colorpicker/bootstrap-colorpicker.js create mode 100644 src/pretix/static/colorpicker/bootstrap-colorpicker.scss create mode 100644 src/pretix/static/colorpicker/hue-horizontal.png create mode 100644 src/pretix/static/colorpicker/hue.png create mode 100644 src/pretix/static/colorpicker/saturation.png diff --git a/.gitattributes b/.gitattributes index 545288622..ae2fa07cf 100644 --- a/.gitattributes +++ b/.gitattributes @@ -3,6 +3,7 @@ src/static/lightbox/* linguist-vendored src/static/typeahead/* linguist-vendored src/static/moment/* linguist-vendored src/static/datetimepicker/* linguist-vendored +src/static/colorpicker/* linguist-vendored src/static/charts/* linguist-vendored # Denote all files that are truly binary and should not be modified. diff --git a/src/pretix/control/forms/event.py b/src/pretix/control/forms/event.py index 962693c08..808e4604c 100644 --- a/src/pretix/control/forms/event.py +++ b/src/pretix/control/forms/event.py @@ -602,7 +602,8 @@ class DisplaySettingsForm(SettingsForm): validators=[ RegexValidator(regex='^#[0-9a-fA-F]{6}$', message=_('Please enter the hexadecimal code of a color, e.g. #990000.')) - ] + ], + widget=forms.TextInput(attrs={'class': 'colorpickerfield'}) ) logo_image = ExtFileField( label=_('Logo image'), diff --git a/src/pretix/control/templates/pretixcontrol/base.html b/src/pretix/control/templates/pretixcontrol/base.html index d402d43ab..73dddb072 100644 --- a/src/pretix/control/templates/pretixcontrol/base.html +++ b/src/pretix/control/templates/pretixcontrol/base.html @@ -35,6 +35,7 @@ + {% endcompress %} {{ html_head|safe }} diff --git a/src/pretix/static/colorpicker/alpha-horizontal.png b/src/pretix/static/colorpicker/alpha-horizontal.png new file mode 100644 index 0000000000000000000000000000000000000000..f83188951a8e4fab4ba847c8c89f3105354a9816 GIT binary patch literal 557 zcmV+|0@D47P)Nkl5JbD$mJ%t8>^MX+pA8q_5}cAta0DO|R@{IU5|M(GxNxgy+GBd8l;w&2Ec?5< zVo(HvFZxdJAnNTau8ZPXtKOAPtn2rp+IrX0nbY#4bkaNYzIIZLJrooctxYd|?rp8? z)cO+ap+cSA7pbEAUi(YitNzQ6mD^}>0x7Ez^ll73R_Xc-*~Q+Zpz#R`Ko|>@qj2QF zAcKncK;vstA0eL^`!E>xIk#_;8u-NduvaQXn$g$>7z4ttYmjqc8pS->gW&WGdI5U9QmYbj;6~_suM0VjVBk)9?FjGKLNzR9mK$u}% zJ?3)?fRmicTx%xVMC69^f7R;rWA8uZm)yve{K1EP8^1~E?L`XT8&R{cit@G7SGmNI zD-;bNVa)Z2Mil~Fb~9WBo8Kj@u3_#HiLFA<1-{qWmO2-=?0YdKVz6%S z2*9Wz8-&7K@4=W?VKkD82M*@cB4wmZ=tias{62*I43WQYJZEcwS<&N#Nal+GF`i11 zY=e+9d7#-KG!R}kc+3AQ$^6t@932p}V@@!QyyuhBvt_KD{nGq0=-+8wbOe^=^onsM vr1hwgCt@ro;xv+DFr+*}$b1+=kSNMOdLipIvOQ8u00000NkvXXu0mjf9#jU9 literal 0 HcmV?d00001 diff --git a/src/pretix/static/colorpicker/alpha.png b/src/pretix/static/colorpicker/alpha.png new file mode 100644 index 0000000000000000000000000000000000000000..2e53a30e73175009326fc030f00862d682ddfc45 GIT binary patch literal 488 zcmVP)B00056Nkl} zZ#=A8HwTy*Ji~Hui*DN)Xc=D2SbWU)JF^vFq?ipSE1)dQB?%2~zL;*2(|O#(oBR;O z#J!!4+zDc0I&77>T+tDIE@oI;6%kXWiptfQV#*c>2foJxnWs^#66pqri5SJi0v*Xc z_vjIT9?6}|hzFF05)=1g9#80;7y9mior*2jP95+vQ|{sWGtx)s=39zr^u6;HX^F`p zkx2{{y^wicti6Khm3Wyed%Eg2H=fbPc7D3VBcDWdj{r#qvrgUX$)#2lTEc%5bs}9E zZ`+UiVVyX}VI5jr+$k@C{pP8ABQF)*q|@k8ll1fgWY+Q?y|Zg0V9OmodqfH%3xo%V zF_0b~gfCME=jtfJ($v-Y^!<}BBQx2`+78RhRbxt$n5&{MunD^|({9#^#Hp{!+@o)R z!Ci&=u08T*r)OJ-Py8D;`eSXCiKA=ket6eR*LHXng}b_5r%ttFu8MwPi~vTbhPJwk eS?^O73H$>F-M_zn@}r;t0000 0 && L <= 1) { + S /= L; + } else { + S /= 2 - L; + } + L /= 2; + if (S > 1) { + S = 1; + } + return { + h: isNaN(H) ? 0 : H, + s: isNaN(S) ? 0 : S, + l: isNaN(L) ? 0 : L, + a: isNaN(a) ? 0 : a + }; + }, + toAlias: function(r, g, b, a) { + var c, rgb = (arguments.length === 0) ? this.toHex() : this.toHex(r, g, b, a); + + // support predef. colors in non-hex format too, as defined in the alias itself + var original = this.origFormat === 'alias' ? rgb : this.toString(this.origFormat, false); + + for (var alias in this.colors) { + c = this.colors[alias].toLowerCase().trim(); + if ((c === rgb) || (c === original)) { + return alias; + } + } + return false; + }, + RGBtoHSB: function(r, g, b, a) { + r /= 255; + g /= 255; + b /= 255; + + var H, S, V, C; + V = Math.max(r, g, b); + C = V - Math.min(r, g, b); + H = (C === 0 ? null : + V === r ? (g - b) / C : + V === g ? (b - r) / C + 2 : + (r - g) / C + 4 + ); + H = ((H + 360) % 6) * 60 / 360; + S = C === 0 ? 0 : C / V; + return { + h: this._sanitizeNumber(H), + s: S, + b: V, + a: this._sanitizeNumber(a) + }; + }, + HueToRGB: function(p, q, h) { + if (h < 0) { + h += 1; + } else if (h > 1) { + h -= 1; + } + if ((h * 6) < 1) { + return p + (q - p) * h * 6; + } else if ((h * 2) < 1) { + return q; + } else if ((h * 3) < 2) { + return p + (q - p) * ((2 / 3) - h) * 6; + } else { + return p; + } + }, + HSLtoRGB: function(h, s, l, a) { + if (s < 0) { + s = 0; + } + var q; + if (l <= 0.5) { + q = l * (1 + s); + } else { + q = l + s - (l * s); + } + + var p = 2 * l - q; + + var tr = h + (1 / 3); + var tg = h; + var tb = h - (1 / 3); + + var r = Math.round(this.HueToRGB(p, q, tr) * 255); + var g = Math.round(this.HueToRGB(p, q, tg) * 255); + var b = Math.round(this.HueToRGB(p, q, tb) * 255); + return [r, g, b, this._sanitizeNumber(a)]; + }, + /** + * @param {String} strVal + * @returns {Object} Object containing h,s,b,a,format properties or FALSE if failed to parse + */ + parse: function(strVal) { + if (arguments.length === 0) { + return false; + } + + var that = this, + result = false, + isAlias = (typeof this.colors[strVal] !== 'undefined'), + values, format; + + if (isAlias) { + strVal = this.colors[strVal].toLowerCase().trim(); + } + + $.each(this.stringParsers, function(i, parser) { + var match = parser.re.exec(strVal); + values = match && parser.parse.apply(that, [match]); + if (values) { + result = {}; + format = (isAlias ? 'alias' : (parser.format ? parser.format : that.getValidFallbackFormat())); + if (format.match(/hsla?/)) { + result = that.RGBtoHSB.apply(that, that.HSLtoRGB.apply(that, values)); + } else { + result = that.RGBtoHSB.apply(that, values); + } + if (result instanceof Object) { + result.format = format; + } + return false; // stop iterating + } + return true; + }); + return result; + }, + getValidFallbackFormat: function() { + var formats = [ + 'rgba', 'rgb', 'hex', 'hsla', 'hsl' + ]; + if (this.origFormat && (formats.indexOf(this.origFormat) !== -1)) { + return this.origFormat; + } + if (this.fallbackFormat && (formats.indexOf(this.fallbackFormat) !== -1)) { + return this.fallbackFormat; + } + + return 'rgba'; // By default, return a format that will not lose the alpha info + }, + /** + * + * @param {string} [format] (default: rgba) + * @param {boolean} [translateAlias] Return real color for pre-defined (non-standard) aliases (default: false) + * @returns {String} + */ + toString: function(format, translateAlias) { + format = format || this.origFormat || this.fallbackFormat; + translateAlias = translateAlias || false; + + var c = false; + + switch (format) { + case 'rgb': + { + c = this.toRGB(); + if (this.rgbaIsTransparent(c)) { + return 'transparent'; + } + return 'rgb(' + c.r + ',' + c.g + ',' + c.b + ')'; + } + break; + case 'rgba': + { + c = this.toRGB(); + return 'rgba(' + c.r + ',' + c.g + ',' + c.b + ',' + c.a + ')'; + } + break; + case 'hsl': + { + c = this.toHSL(); + return 'hsl(' + Math.round(c.h * 360) + ',' + Math.round(c.s * 100) + '%,' + Math.round(c.l * 100) + '%)'; + } + break; + case 'hsla': + { + c = this.toHSL(); + return 'hsla(' + Math.round(c.h * 360) + ',' + Math.round(c.s * 100) + '%,' + Math.round(c.l * 100) + '%,' + c.a + ')'; + } + break; + case 'hex': + { + return this.toHex(); + } + break; + case 'alias': + { + c = this.toAlias(); + + if (c === false) { + return this.toString(this.getValidFallbackFormat()); + } + + if (translateAlias && !(c in Color.webColors) && (c in this.predefinedColors)) { + return this.predefinedColors[c]; + } + + return c; + } + default: + { + return c; + } + break; + } + }, + // a set of RE's that can match strings and generate color tuples. + // from John Resig color plugin + // https://github.com/jquery/jquery-color/ + stringParsers: [{ + re: /rgb\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*?\)/, + format: 'rgb', + parse: function(execResult) { + return [ + execResult[1], + execResult[2], + execResult[3], + 1 + ]; + } + }, { + re: /rgb\(\s*(\d*(?:\.\d+)?)\%\s*,\s*(\d*(?:\.\d+)?)\%\s*,\s*(\d*(?:\.\d+)?)\%\s*?\)/, + format: 'rgb', + parse: function(execResult) { + return [ + 2.55 * execResult[1], + 2.55 * execResult[2], + 2.55 * execResult[3], + 1 + ]; + } + }, { + re: /rgba\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*(?:,\s*(\d*(?:\.\d+)?)\s*)?\)/, + format: 'rgba', + parse: function(execResult) { + return [ + execResult[1], + execResult[2], + execResult[3], + execResult[4] + ]; + } + }, { + re: /rgba\(\s*(\d*(?:\.\d+)?)\%\s*,\s*(\d*(?:\.\d+)?)\%\s*,\s*(\d*(?:\.\d+)?)\%\s*(?:,\s*(\d*(?:\.\d+)?)\s*)?\)/, + format: 'rgba', + parse: function(execResult) { + return [ + 2.55 * execResult[1], + 2.55 * execResult[2], + 2.55 * execResult[3], + execResult[4] + ]; + } + }, { + re: /hsl\(\s*(\d*(?:\.\d+)?)\s*,\s*(\d*(?:\.\d+)?)\%\s*,\s*(\d*(?:\.\d+)?)\%\s*?\)/, + format: 'hsl', + parse: function(execResult) { + return [ + execResult[1] / 360, + execResult[2] / 100, + execResult[3] / 100, + execResult[4] + ]; + } + }, { + re: /hsla\(\s*(\d*(?:\.\d+)?)\s*,\s*(\d*(?:\.\d+)?)\%\s*,\s*(\d*(?:\.\d+)?)\%\s*(?:,\s*(\d*(?:\.\d+)?)\s*)?\)/, + format: 'hsla', + parse: function(execResult) { + return [ + execResult[1] / 360, + execResult[2] / 100, + execResult[3] / 100, + execResult[4] + ]; + } + }, { + re: /#?([a-fA-F0-9]{2})([a-fA-F0-9]{2})([a-fA-F0-9]{2})/, + format: 'hex', + parse: function(execResult) { + return [ + parseInt(execResult[1], 16), + parseInt(execResult[2], 16), + parseInt(execResult[3], 16), + 1 + ]; + } + }, { + re: /#?([a-fA-F0-9])([a-fA-F0-9])([a-fA-F0-9])/, + format: 'hex', + parse: function(execResult) { + return [ + parseInt(execResult[1] + execResult[1], 16), + parseInt(execResult[2] + execResult[2], 16), + parseInt(execResult[3] + execResult[3], 16), + 1 + ]; + } + }], + colorNameToHex: function(name) { + if (typeof this.colors[name.toLowerCase()] !== 'undefined') { + return this.colors[name.toLowerCase()]; + } + return false; + } + }; + + /* + * Default plugin options + */ + var defaults = { + horizontal: false, // horizontal mode layout ? + inline: false, //forces to show the colorpicker as an inline element + color: false, //forces a color + format: false, //forces a format + input: 'input', // children input selector + container: false, // container selector + component: '.add-on, .input-group-addon', // children component selector + fallbackColor: false, // fallback color value. null = keeps current color. + fallbackFormat: 'hex', // fallback color format + hexNumberSignPrefix: true, // put a '#' (number sign) before hex strings + sliders: { + saturation: { + maxLeft: 100, + maxTop: 100, + callLeft: 'setSaturation', + callTop: 'setBrightness' + }, + hue: { + maxLeft: 0, + maxTop: 100, + callLeft: false, + callTop: 'setHue' + }, + alpha: { + maxLeft: 0, + maxTop: 100, + callLeft: false, + callTop: 'setAlpha' + } + }, + slidersHorz: { + saturation: { + maxLeft: 100, + maxTop: 100, + callLeft: 'setSaturation', + callTop: 'setBrightness' + }, + hue: { + maxLeft: 100, + maxTop: 0, + callLeft: 'setHue', + callTop: false + }, + alpha: { + maxLeft: 100, + maxTop: 0, + callLeft: 'setAlpha', + callTop: false + } + }, + template: '
' + + '
' + + '
' + + '
' + + '
' + + '
' + + '
', + align: 'right', + customClass: null, // custom class added to the colorpicker element + colorSelectors: null // custom color aliases + }; + + /** + * Colorpicker component class + * + * @param {Object|String} element + * @param {Object} options + * @constructor + */ + var Colorpicker = function(element, options) { + this.element = $(element).addClass('colorpicker-element'); + this.options = $.extend(true, {}, defaults, this.element.data(), options); + this.component = this.options.component; + this.component = (this.component !== false) ? this.element.find(this.component) : false; + if (this.component && (this.component.length === 0)) { + this.component = false; + } + this.container = (this.options.container === true) ? this.element : this.options.container; + this.container = (this.container !== false) ? $(this.container) : false; + + // Is the element an input? Should we search inside for any input? + this.input = this.element.is('input') ? this.element : (this.options.input ? + this.element.find(this.options.input) : false); + if (this.input && (this.input.length === 0)) { + this.input = false; + } + // Set HSB color + this.color = this.createColor(this.options.color !== false ? this.options.color : this.getValue()); + + this.format = this.options.format !== false ? this.options.format : this.color.origFormat; + + if (this.options.color !== false) { + this.updateInput(this.color); + this.updateData(this.color); + } + + // Setup picker + var $picker = this.picker = $(this.options.template); + if (this.options.customClass) { + $picker.addClass(this.options.customClass); + } + if (this.options.inline) { + $picker.addClass('colorpicker-inline colorpicker-visible'); + } else { + $picker.addClass('colorpicker-hidden'); + } + if (this.options.horizontal) { + $picker.addClass('colorpicker-horizontal'); + } + if ( + (['rgba', 'hsla', 'alias'].indexOf(this.format) !== -1) || + this.options.format === false || + this.getValue() === 'transparent' + ) { + $picker.addClass('colorpicker-with-alpha'); + } + if (this.options.align === 'right') { + $picker.addClass('colorpicker-right'); + } + if (this.options.inline === true) { + $picker.addClass('colorpicker-no-arrow'); + } + if (this.options.colorSelectors) { + var colorpicker = this, + selectorsContainer = colorpicker.picker.find('.colorpicker-selectors'); + + if (selectorsContainer.length > 0) { + $.each(this.options.colorSelectors, function(name, color) { + var $btn = $('') + .addClass('colorpicker-selectors-color') + .css('background-color', color) + .data('class', name).data('alias', name); + + $btn.on('mousedown.colorpicker touchstart.colorpicker', function(event) { + event.preventDefault(); + colorpicker.setValue( + colorpicker.format === 'alias' ? $(this).data('alias') : $(this).css('background-color') + ); + }); + selectorsContainer.append($btn); + }); + selectorsContainer.show().addClass('colorpicker-visible'); + } + } + + // Prevent closing the colorpicker when clicking on itself + $picker.on('mousedown.colorpicker touchstart.colorpicker', $.proxy(function(e) { + if (e.target === e.currentTarget) { + e.preventDefault(); + } + }, this)); + + // Bind click/tap events on the sliders + $picker.find('.colorpicker-saturation, .colorpicker-hue, .colorpicker-alpha') + .on('mousedown.colorpicker touchstart.colorpicker', $.proxy(this.mousedown, this)); + + $picker.appendTo(this.container ? this.container : $('body')); + + // Bind other events + if (this.input !== false) { + this.input.on({ + 'keyup.colorpicker': $.proxy(this.keyup, this) + }); + this.input.on({ + 'change.colorpicker': $.proxy(this.change, this) + }); + if (this.component === false) { + this.element.on({ + 'focus.colorpicker': $.proxy(this.show, this) + }); + } + if (this.options.inline === false) { + this.element.on({ + 'focusout.colorpicker': $.proxy(this.hide, this) + }); + } + } + + if (this.component !== false) { + this.component.on({ + 'click.colorpicker': $.proxy(this.show, this) + }); + } + + if ((this.input === false) && (this.component === false)) { + this.element.on({ + 'click.colorpicker': $.proxy(this.show, this) + }); + } + + // for HTML5 input[type='color'] + if ((this.input !== false) && (this.component !== false) && (this.input.attr('type') === 'color')) { + + this.input.on({ + 'click.colorpicker': $.proxy(this.show, this), + 'focus.colorpicker': $.proxy(this.show, this) + }); + } + this.update(); + + $($.proxy(function() { + this.element.trigger('create'); + }, this)); + }; + + Colorpicker.Color = Color; + + Colorpicker.prototype = { + constructor: Colorpicker, + destroy: function() { + this.picker.remove(); + this.element.removeData('colorpicker', 'color').off('.colorpicker'); + if (this.input !== false) { + this.input.off('.colorpicker'); + } + if (this.component !== false) { + this.component.off('.colorpicker'); + } + this.element.removeClass('colorpicker-element'); + this.element.trigger({ + type: 'destroy' + }); + }, + reposition: function() { + if (this.options.inline !== false || this.options.container) { + return false; + } + var type = this.container && this.container[0] !== window.document.body ? 'position' : 'offset'; + var element = this.component || this.element; + var offset = element[type](); + if (this.options.align === 'right') { + offset.left -= this.picker.outerWidth() - element.outerWidth(); + } + this.picker.css({ + top: offset.top + element.outerHeight(), + left: offset.left + }); + }, + show: function(e) { + if (this.isDisabled()) { + // Don't show the widget if it's disabled (the input) + return; + } + this.picker.addClass('colorpicker-visible').removeClass('colorpicker-hidden'); + this.reposition(); + $(window).on('resize.colorpicker', $.proxy(this.reposition, this)); + if (e && (!this.hasInput() || this.input.attr('type') === 'color')) { + if (e.stopPropagation && e.preventDefault) { + e.stopPropagation(); + e.preventDefault(); + } + } + if ((this.component || !this.input) && (this.options.inline === false)) { + $(window.document).on({ + 'mousedown.colorpicker': $.proxy(this.hide, this) + }); + } + this.element.trigger({ + type: 'showPicker', + color: this.color + }); + }, + hide: function(e) { + if ((typeof e !== 'undefined') && e.target) { + // Prevent hide if triggered by an event and an element inside the colorpicker has been clicked/touched + if ( + $(e.currentTarget).parents('.colorpicker').length > 0 || + $(e.target).parents('.colorpicker').length > 0 + ) { + return false; + } + } + this.picker.addClass('colorpicker-hidden').removeClass('colorpicker-visible'); + $(window).off('resize.colorpicker', this.reposition); + $(window.document).off({ + 'mousedown.colorpicker': this.hide + }); + this.update(); + this.element.trigger({ + type: 'hidePicker', + color: this.color + }); + }, + updateData: function(val) { + val = val || this.color.toString(this.format, false); + this.element.data('color', val); + return val; + }, + updateInput: function(val) { + val = val || this.color.toString(this.format, false); + if (this.input !== false) { + this.input.prop('value', val); + this.input.trigger('change'); + } + return val; + }, + updatePicker: function(val) { + if (typeof val !== 'undefined') { + this.color = this.createColor(val); + } + var sl = (this.options.horizontal === false) ? this.options.sliders : this.options.slidersHorz; + var icns = this.picker.find('i'); + if (icns.length === 0) { + return; + } + if (this.options.horizontal === false) { + sl = this.options.sliders; + icns.eq(1).css('top', sl.hue.maxTop * (1 - this.color.value.h)).end() + .eq(2).css('top', sl.alpha.maxTop * (1 - this.color.value.a)); + } else { + sl = this.options.slidersHorz; + icns.eq(1).css('left', sl.hue.maxLeft * (1 - this.color.value.h)).end() + .eq(2).css('left', sl.alpha.maxLeft * (1 - this.color.value.a)); + } + icns.eq(0).css({ + 'top': sl.saturation.maxTop - this.color.value.b * sl.saturation.maxTop, + 'left': this.color.value.s * sl.saturation.maxLeft + }); + + this.picker.find('.colorpicker-saturation') + .css('backgroundColor', (this.options.hexNumberSignPrefix ? '' : '#') + this.color.toHex(this.color.value.h, 1, 1, 1)); + + this.picker.find('.colorpicker-alpha') + .css('backgroundColor', (this.options.hexNumberSignPrefix ? '' : '#') + this.color.toHex()); + + this.picker.find('.colorpicker-color, .colorpicker-color div') + .css('backgroundColor', this.color.toString(this.format, true)); + + return val; + }, + updateComponent: function(val) { + var color; + + if (typeof val !== 'undefined') { + color = this.createColor(val); + } else { + color = this.color; + } + + if (this.component !== false) { + var icn = this.component.find('i').eq(0); + if (icn.length > 0) { + icn.css({ + 'backgroundColor': color.toString(this.format, true) + }); + } else { + this.component.css({ + 'backgroundColor': color.toString(this.format, true) + }); + } + } + + return color.toString(this.format, false); + }, + update: function(force) { + var val; + if ((this.getValue(false) !== false) || (force === true)) { + // Update input/data only if the current value is not empty + val = this.updateComponent(); + this.updateInput(val); + this.updateData(val); + this.updatePicker(); // only update picker if value is not empty + } + return val; + + }, + setValue: function(val) { // set color manually + this.color = this.createColor(val); + this.update(true); + this.element.trigger({ + type: 'changeColor', + color: this.color, + value: val + }); + }, + /** + * Creates a new color using the instance options + * @protected + * @param {String} val + * @returns {Color} + */ + createColor: function(val) { + return new Color( + val ? val : null, + this.options.colorSelectors, + this.options.fallbackColor ? this.options.fallbackColor : this.color, + this.options.fallbackFormat, + this.options.hexNumberSignPrefix + ); + }, + getValue: function(defaultValue) { + defaultValue = (typeof defaultValue === 'undefined') ? this.options.fallbackColor : defaultValue; + var val; + if (this.hasInput()) { + val = this.input.val(); + } else { + val = this.element.data('color'); + } + if ((val === undefined) || (val === '') || (val === null)) { + // if not defined or empty, return default + val = defaultValue; + } + return val; + }, + hasInput: function() { + return (this.input !== false); + }, + isDisabled: function() { + if (this.hasInput()) { + return (this.input.prop('disabled') === true); + } + return false; + }, + disable: function() { + if (this.hasInput()) { + this.input.prop('disabled', true); + this.element.trigger({ + type: 'disable', + color: this.color, + value: this.getValue() + }); + return true; + } + return false; + }, + enable: function() { + if (this.hasInput()) { + this.input.prop('disabled', false); + this.element.trigger({ + type: 'enable', + color: this.color, + value: this.getValue() + }); + return true; + } + return false; + }, + currentSlider: null, + mousePointer: { + left: 0, + top: 0 + }, + mousedown: function(e) { + if (!e.pageX && !e.pageY && e.originalEvent && e.originalEvent.touches) { + e.pageX = e.originalEvent.touches[0].pageX; + e.pageY = e.originalEvent.touches[0].pageY; + } + e.stopPropagation(); + e.preventDefault(); + + var target = $(e.target); + + //detect the slider and set the limits and callbacks + var zone = target.closest('div'); + var sl = this.options.horizontal ? this.options.slidersHorz : this.options.sliders; + if (!zone.is('.colorpicker')) { + if (zone.is('.colorpicker-saturation')) { + this.currentSlider = $.extend({}, sl.saturation); + } else if (zone.is('.colorpicker-hue')) { + this.currentSlider = $.extend({}, sl.hue); + } else if (zone.is('.colorpicker-alpha')) { + this.currentSlider = $.extend({}, sl.alpha); + } else { + return false; + } + var offset = zone.offset(); + //reference to guide's style + this.currentSlider.guide = zone.find('i')[0].style; + this.currentSlider.left = e.pageX - offset.left; + this.currentSlider.top = e.pageY - offset.top; + this.mousePointer = { + left: e.pageX, + top: e.pageY + }; + //trigger mousemove to move the guide to the current position + $(window.document).on({ + 'mousemove.colorpicker': $.proxy(this.mousemove, this), + 'touchmove.colorpicker': $.proxy(this.mousemove, this), + 'mouseup.colorpicker': $.proxy(this.mouseup, this), + 'touchend.colorpicker': $.proxy(this.mouseup, this) + }).trigger('mousemove'); + } + return false; + }, + mousemove: function(e) { + if (!e.pageX && !e.pageY && e.originalEvent && e.originalEvent.touches) { + e.pageX = e.originalEvent.touches[0].pageX; + e.pageY = e.originalEvent.touches[0].pageY; + } + e.stopPropagation(); + e.preventDefault(); + var left = Math.max( + 0, + Math.min( + this.currentSlider.maxLeft, + this.currentSlider.left + ((e.pageX || this.mousePointer.left) - this.mousePointer.left) + ) + ); + var top = Math.max( + 0, + Math.min( + this.currentSlider.maxTop, + this.currentSlider.top + ((e.pageY || this.mousePointer.top) - this.mousePointer.top) + ) + ); + this.currentSlider.guide.left = left + 'px'; + this.currentSlider.guide.top = top + 'px'; + if (this.currentSlider.callLeft) { + this.color[this.currentSlider.callLeft].call(this.color, left / this.currentSlider.maxLeft); + } + if (this.currentSlider.callTop) { + this.color[this.currentSlider.callTop].call(this.color, top / this.currentSlider.maxTop); + } + // Change format dynamically + // Only occurs if user choose the dynamic format by + // setting option format to false + if ( + this.options.format === false && + (this.currentSlider.callTop === 'setAlpha' || + this.currentSlider.callLeft === 'setAlpha') + ) { + + // Converting from hex / rgb to rgba + if (this.color.value.a !== 1) { + this.format = 'rgba'; + this.color.origFormat = 'rgba'; + } + + // Converting from rgba to hex + else { + this.format = 'hex'; + this.color.origFormat = 'hex'; + } + } + this.update(true); + + this.element.trigger({ + type: 'changeColor', + color: this.color + }); + return false; + }, + mouseup: function(e) { + e.stopPropagation(); + e.preventDefault(); + $(window.document).off({ + 'mousemove.colorpicker': this.mousemove, + 'touchmove.colorpicker': this.mousemove, + 'mouseup.colorpicker': this.mouseup, + 'touchend.colorpicker': this.mouseup + }); + return false; + }, + change: function(e) { + this.keyup(e); + }, + keyup: function(e) { + if ((e.keyCode === 38)) { + if (this.color.value.a < 1) { + this.color.value.a = Math.round((this.color.value.a + 0.01) * 100) / 100; + } + this.update(true); + } else if ((e.keyCode === 40)) { + if (this.color.value.a > 0) { + this.color.value.a = Math.round((this.color.value.a - 0.01) * 100) / 100; + } + this.update(true); + } else { + this.color = this.createColor(this.input.val()); + // Change format dynamically + // Only occurs if user choose the dynamic format by + // setting option format to false + if (this.color.origFormat && this.options.format === false) { + this.format = this.color.origFormat; + } + if (this.getValue(false) !== false) { + this.updateData(); + this.updateComponent(); + this.updatePicker(); + } + } + this.element.trigger({ + type: 'changeColor', + color: this.color, + value: this.input.val() + }); + } + }; + + $.colorpicker = Colorpicker; + + $.fn.colorpicker = function(option) { + var apiArgs = Array.prototype.slice.call(arguments, 1), + isSingleElement = (this.length === 1), + returnValue = null; + + var $jq = this.each(function() { + var $this = $(this), + inst = $this.data('colorpicker'), + options = ((typeof option === 'object') ? option : {}); + + if (!inst) { + inst = new Colorpicker(this, options); + $this.data('colorpicker', inst); + } + + if (typeof option === 'string') { + if ($.isFunction(inst[option])) { + returnValue = inst[option].apply(inst, apiArgs); + } else { // its a property ? + if (apiArgs.length) { + // set property + inst[option] = apiArgs[0]; + } + returnValue = inst[option]; + } + } else { + returnValue = $this; + } + }); + return isSingleElement ? returnValue : $jq; + }; + + $.fn.colorpicker.constructor = Colorpicker; + +})); diff --git a/src/pretix/static/colorpicker/bootstrap-colorpicker.scss b/src/pretix/static/colorpicker/bootstrap-colorpicker.scss new file mode 100644 index 000000000..616630a55 --- /dev/null +++ b/src/pretix/static/colorpicker/bootstrap-colorpicker.scss @@ -0,0 +1,230 @@ +/*! + * Bootstrap Colorpicker v2.5.1 + * https://itsjavi.com/bootstrap-colorpicker/ + * + * Originally written by (c) 2012 Stefan Petre + * Licensed under the Apache License v2.0 + * http://www.apache.org/licenses/LICENSE-2.0.txt + * + */ +.colorpicker-saturation { + width: 100px; + height: 100px; + background-image: url(static('colorpicker/saturation.png')); + cursor: crosshair; + float: left; +} +.colorpicker-saturation i { + display: block; + height: 5px; + width: 5px; + border: 1px solid #000; + -webkit-border-radius: 5px; + -moz-border-radius: 5px; + border-radius: 5px; + position: absolute; + top: 0; + left: 0; + margin: -4px 0 0 -4px; +} +.colorpicker-saturation i b { + display: block; + height: 5px; + width: 5px; + border: 1px solid #fff; + -webkit-border-radius: 5px; + -moz-border-radius: 5px; + border-radius: 5px; +} +.colorpicker-hue, +.colorpicker-alpha { + width: 15px; + height: 100px; + float: left; + cursor: row-resize; + margin-left: 4px; + margin-bottom: 4px; +} +.colorpicker-hue i, +.colorpicker-alpha i { + display: block; + height: 1px; + background: #000; + border-top: 1px solid #fff; + position: absolute; + top: 0; + left: 0; + width: 100%; + margin-top: -1px; +} +.colorpicker-hue { + background-image: url(static('colorpicker/hue.png')); +} +.colorpicker-alpha { + background-image: url(static('colorpicker/alpha.png')); + display: none; +} +.colorpicker-saturation, +.colorpicker-hue, +.colorpicker-alpha { + background-size: contain; +} +.colorpicker { + padding: 4px; + min-width: 130px; + margin-top: 1px; + -webkit-border-radius: 4px; + -moz-border-radius: 4px; + border-radius: 4px; + z-index: 2500; +} +.colorpicker:before, +.colorpicker:after { + display: table; + content: ""; + line-height: 0; +} +.colorpicker:after { + clear: both; +} +.colorpicker:before { + content: ''; + display: inline-block; + border-left: 7px solid transparent; + border-right: 7px solid transparent; + border-bottom: 7px solid #ccc; + border-bottom-color: rgba(0, 0, 0, 0.2); + position: absolute; + top: -7px; + left: 6px; +} +.colorpicker:after { + content: ''; + display: inline-block; + border-left: 6px solid transparent; + border-right: 6px solid transparent; + border-bottom: 6px solid #ffffff; + position: absolute; + top: -6px; + left: 7px; +} +.colorpicker div { + position: relative; +} +.colorpicker.colorpicker-with-alpha { + min-width: 140px; +} +.colorpicker.colorpicker-with-alpha .colorpicker-alpha { + display: block; +} +.colorpicker-color { + height: 10px; + margin-top: 5px; + clear: both; + background-image: url(static('colorpicker/alpha.png')); + background-position: 0 100%; +} +.colorpicker-color div { + height: 10px; +} +.colorpicker-selectors { + display: none; + height: 10px; + margin-top: 5px; + clear: both; +} +.colorpicker-selectors i { + cursor: pointer; + float: left; + height: 10px; + width: 10px; +} +.colorpicker-selectors i + i { + margin-left: 3px; +} +.colorpicker-element .input-group-addon i, +.colorpicker-element .add-on i { + display: inline-block; + cursor: pointer; + height: 16px; + vertical-align: text-top; + width: 16px; +} +.colorpicker.colorpicker-inline { + position: relative; + display: inline-block; + float: none; + z-index: auto; +} +.colorpicker.colorpicker-horizontal { + width: 110px; + min-width: 110px; + height: auto; +} +.colorpicker.colorpicker-horizontal .colorpicker-saturation { + margin-bottom: 4px; +} +.colorpicker.colorpicker-horizontal .colorpicker-color { + width: 100px; +} +.colorpicker.colorpicker-horizontal .colorpicker-hue, +.colorpicker.colorpicker-horizontal .colorpicker-alpha { + width: 100px; + height: 15px; + float: left; + cursor: col-resize; + margin-left: 0px; + margin-bottom: 4px; +} +.colorpicker.colorpicker-horizontal .colorpicker-hue i, +.colorpicker.colorpicker-horizontal .colorpicker-alpha i { + display: block; + height: 15px; + background: #ffffff; + position: absolute; + top: 0; + left: 0; + width: 1px; + border: none; + margin-top: 0px; +} +.colorpicker.colorpicker-horizontal .colorpicker-hue { + background-image: url(static('colorpicker/hue-horizontal.png')); +} +.colorpicker.colorpicker-horizontal .colorpicker-alpha { + background-image: url(static('colorpicker/alpha-horizontal.png')); +} +.colorpicker-right:before { + left: auto; + right: 6px; +} +.colorpicker-right:after { + left: auto; + right: 7px; +} +.colorpicker-no-arrow:before { + border-right: 0; + border-left: 0; +} +.colorpicker-no-arrow:after { + border-right: 0; + border-left: 0; +} +.colorpicker.colorpicker-visible, +.colorpicker-alpha.colorpicker-visible, +.colorpicker-saturation.colorpicker-visible, +.colorpicker-hue.colorpicker-visible, +.colorpicker-selectors.colorpicker-visible { + display: block; +} +.colorpicker.colorpicker-hidden, +.colorpicker-alpha.colorpicker-hidden, +.colorpicker-saturation.colorpicker-hidden, +.colorpicker-hue.colorpicker-hidden, +.colorpicker-selectors.colorpicker-hidden { + display: none; +} +.colorpicker-inline.colorpicker-visible { + display: inline-block; +} +/*# sourceMappingURL=bootstrap-colorpicker.css.map */ diff --git a/src/pretix/static/colorpicker/hue-horizontal.png b/src/pretix/static/colorpicker/hue-horizontal.png new file mode 100644 index 0000000000000000000000000000000000000000..3dcd5946a94bf831345984fcd3d16d38465c8e73 GIT binary patch literal 478 zcmWNNOGs1!07cIvl1O8k648gT9}y`!MMdNXODRK!F{JM>ShR^6anYhsD}*2sixx#_ z;;N9)z(r=E(k3ElBO!xKg9K3|ZCX@f)afnmy=Qme_QYdH!ujj-fpFu|`s2Y~2olQ6 z2|AMd=Wf7d@urrB#gesBBwHjZbrP3WX_M>HCxbE~lQJV2S(N2p_yyDW7AJ5R`>_W* z@De7l32U$%Be)tvE2K~&QXw@GlZ2$CLwcoOp2~#0leB!5-{KN}!+D&+S2%(L*oR%% zhDnTLEkEmxDdue*zK#wJq_##5Q`F$=0GT~`-7ysSAOhUwhSHMLP5MN9R=S!a}6CtN3K7ctc(wrm-Pb|Ljm}_kZeK)QSKA literal 0 HcmV?d00001 diff --git a/src/pretix/static/colorpicker/hue.png b/src/pretix/static/colorpicker/hue.png new file mode 100644 index 0000000000000000000000000000000000000000..6f5ec2e502ae3e3e03f4725b0e868e8762d089ab GIT binary patch literal 504 zcmWlVPe_vi0L6c6Mj^~HS41FE*i8vzMTa!3jau0Ftck^RiETv4%*eh1etNgh#Z9kO+%DF(^hwQhXE(;=A}Olt({N8qK0N zXbe3;F%&_a$d3$k2-TpSsMI2>O_Yl&aZnr=K5;=@6TM_+u^<&@c2A zeL`>1OY{`=qnoG;wWCIK1notY$WDGs$^MZILnglaZfCu>$G?91_ND(cr{ke#6QRt+ zxJqh^itgTVIcMJOt{i?I4CJy~?T;TddFSW$ImQ!Le#{N~;{Hg%w%rj(^){Y+e`3H9 zTzq)u@>2EbL?Hd3spCs1l?Z0~Tf=MR2fDMV=&AFcTa(?n#hCBv@7kW#Y`U-c;y&>!CvSwpt@}Bttx69*vb-3-;Ki8A$y8r+H literal 0 HcmV?d00001 diff --git a/src/pretix/static/colorpicker/saturation.png b/src/pretix/static/colorpicker/saturation.png new file mode 100644 index 0000000000000000000000000000000000000000..170841cba2fe51c604a6ed63d9fa119dc4f7a73a GIT binary patch literal 4143 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 literal 0 HcmV?d00001 diff --git a/src/pretix/static/pretixcontrol/js/ui/main.js b/src/pretix/static/pretixcontrol/js/ui/main.js index f6fedf3f1..6892a5eff 100644 --- a/src/pretix/static/pretixcontrol/js/ui/main.js +++ b/src/pretix/static/pretixcontrol/js/ui/main.js @@ -187,6 +187,12 @@ $(function () { earlier_field.on("dp.change", update); }); + $(".colorpickerfield").colorpicker({ + format: 'hex', + align: 'left', + customClass: 'colorpicker-2x' + }); + $("input[data-checkbox-dependency]").each(function () { var dependent = $(this), dependency = $($(this).attr("data-checkbox-dependency")), diff --git a/src/pretix/static/pretixcontrol/scss/main.scss b/src/pretix/static/pretixcontrol/scss/main.scss index 9d140fef8..772e8aa50 100644 --- a/src/pretix/static/pretixcontrol/scss/main.scss +++ b/src/pretix/static/pretixcontrol/scss/main.scss @@ -11,6 +11,7 @@ @import "_orders.scss"; @import "_dashboard.scss"; @import "../../pretixbase/scss/webfont.scss"; +@import "../../colorpicker/bootstrap-colorpicker.scss"; footer { text-align: center; @@ -254,5 +255,20 @@ body.loading #wrapper { border: 0 !important; padding: 0 !important; display: block !important; +} -} \ No newline at end of file +.colorpicker-2x .colorpicker-saturation { + width: 200px; + height: 200px; +} + +.colorpicker-2x .colorpicker-hue, +.colorpicker-2x .colorpicker-alpha { + width: 30px; + height: 200px; +} + +.colorpicker-2x .colorpicker-color, +.colorpicker-2x .colorpicker-color div { + height: 30px; +}