https://crc-renfrewcounty.com/userfiles/modules/microweber/api/tools/colorpicker.js

1;(function (){
2    mw._colorPickerDefaults = {
3        skin: 'mw-tooltip-default',
4        position: 'bottom-center',
5        onchange: false
6    };
7
8
9    var _isValidColorTest = new Option();
10    var isValidColor = (color) => {
11        _isValidColorTest.style.color = '';
12        _isValidColorTest.style.color = color;
13        return _isValidColorTest.style.color !== '';
14    }
15
16    var colorPickers = [];
17
18    mw._colorPicker = function (options) {
19        mw.lib.require('colorpicker');
20
21        if (!mw.tools.colorPickerColors) {
22            mw.tools.colorPickerColors = [];
23
24            if (typeof mw.color !== 'undefined' && typeof mw.color.rgbToHex !== 'undefined') {
25                var colorpicker_els = mw.top().$(".btn,h1,h2,h3,h4,h5");
26                if (colorpicker_els.length > 0) {
27                    colorpicker_els.each(function () {
28                        var css = parent.getComputedStyle(this, null);
29                        if (css !== null) {
30                            if (mw.tools.colorPickerColors.indexOf(css.color) === -1) {
31                                mw.tools.colorPickerColors.push(mw.color.rgbToHex(css.color));
32                            }
33                            if (mw.tools.colorPickerColors.indexOf(css.backgroundColor) === -1) {
34                                mw.tools.colorPickerColors.push(mw.color.rgbToHex(css.backgroundColor));
35                            }
36                        }
37                    });
38                }
39            }
40        }
41        var proto = this;
42        if (!options) {
43            return false;
44        }
45
46        var settings = $.extend({}, mw._colorPickerDefaults, options);
47
48        if (settings.element === undefined || settings.element === null) {
49            return false;
50        }
51
52
53
54        var $el = mw.$(settings.element);
55        if ($el[0] === undefined) {
56            return false;
57        }
58        if($el[0].mwcolorPicker) {
59            return $el[0].mwcolorPicker;
60        }
61
62
63        $el[0].mwcolorPicker = this;
64        this.element = $el[0];
65        if ($el[0].mwToolTipBinded !== undefined) {
66            return false;
67        }
68        if (!settings.method) {
69            if (this.element.nodeName === 'DIV') {
70                settings.method = 'inline';
71            }
72        }
73        this.settings = settings;
74
75        $el[0].mwToolTipBinded = true;
76        var sett = {
77            showAlpha: true,
78            showHSL: false,
79            showRGB: false,
80            showHEX: true,
81            palette: mw.tools.colorPickerColors
82        };
83
84        if(settings.value) {
85            sett.color = settings.value;
86
87        }
88        if(typeof settings.showRGB !== 'undefined') {
89            sett.showRGB = settings.showRGB
90        }
91        if(typeof settings.showHEX !== 'undefined') {
92            sett.showHEX = settings.showHEX
93        }
94
95        if(typeof settings.showHSL !== 'undefined') {
96            sett.showHSL = settings.showHSL
97        }
98        var frame;
99        this.setColor = function (color) {
100            frame.setColor(color)
101        };
102        if (settings.method === 'inline') {
103
104            sett.attachTo = $el[0];
105
106            frame = AColorPicker.createPicker(sett);
107            frame.onchange = function (data) {
108
109                if (proto.settings.onchange) {
110                    proto.settings.onchange(data.color);
111                }
112
113                if ($el[0].nodeName === 'INPUT') {
114                    var val = val === 'transparent' ? val : '#' + val;
115                    $el.val(val);
116                    var prev = $el[0].previousElementSibling
117                    if( prev && prev.classList.contains('mw-field-color-indicator')) {
118                        var dp = prev.querySelector('.mw-field-color-indicator-display')
119                        if(dp) {
120                            dp.style.backgroundColor = val
121                        }
122                    }
123                }
124            }
125
126        } else {
127            var tip = mw.tooltip(settings), $tip = mw.$(tip).hide();
128
129            colorPickers.push(tip)
130            this.tip = tip;
131
132            mw.$('.mw-tooltip-content', tip).empty().css({
133                padding: 0
134            });
135            sett.attachTo = mw.$('.mw-tooltip-content', tip)[0]
136
137            frame = AColorPicker.createPicker(sett);
138
139            frame.onchange = function (data) {
140
141                if(frame.pause) {
142                    return;
143                }
144
145                if (proto.settings.onchange) {
146                    proto.settings.onchange(data.color);
147                }
148
149                if ($el[0].nodeName === 'INPUT') {
150                    $el.val(data.color);
151                    var prev = $el[0].previousElementSibling
152                    if(prev && prev.classList.contains('mw-field-color-indicator')) {
153                        var dp = prev.querySelector('.mw-field-color-indicator-display');
154                        if(dp) {
155                            dp.style.backgroundColor = data.color
156                        }
157
158                    }
159                }
160            };
161            if ($el[0].nodeName === 'INPUT') {
162                $el.on('input', function (e) {
163                    var val = this.value.trim();
164                    if(!val) {
165                        val = 'transparent';
166                    }
167                    if(isValidColor(val)) {
168                        var prev = $el[0].previousElementSibling
169                        if( prev && prev.classList.contains('mw-field-color-indicator')) {
170                            var dp = prev.querySelector('.mw-field-color-indicator-display')
171                            if(dp) {
172                                dp.style.backgroundColor = val
173                            }
174                        }
175                        if (proto.settings.onchange) {
176                            proto.settings.onchange(val);
177                        }
178                    }
179                });
180                    $el.on('focus', function (e) {
181                        if(this.value.trim()){
182                            frame.pause = true;
183                            frame.color = this.value;
184                            setTimeout(function () {
185                                frame.pause = false;

186                            });
187                        }
188                        colorPickers.forEach(function (clpckr){
189
190                            if(clpckr !== tip) {
191                                mw.$(clpckr).hide();
192                            }
193                        });
194                        mw.$(tip).show();
195                        mw.tools.tooltip.setPosition(tip, $el[0], settings.position)
196
197                    });
198                } else {
199                $el.on('click', function (e) {
200                    colorPickers.forEach(function (clpckr){
201
202                        if(clpckr !== tip) {
203                            mw.$(clpckr).hide();
204                        }
205                    });
206                    mw.$(tip).toggle();
207                    mw.tools.tooltip.setPosition(tip, $el[0], settings.position);
208                });
209            }
210            var documents = [document];
211            if (self !== mw.top().win){
212                documents.push(mw.top().win.document);
213            }
214
215
216            $el.addClass('mw-color-picker-field')
217
218            }
219            if (this.tip) {
220                this.show = function () {
221                    mw.$(this.tip).show();
222                    mw.tools.tooltip.setPosition(this.tip, this.settings.element, this.settings.position)
223                };
224                this.hide = function () {
225                    mw.$(this.tip).hide();
226                };
227                this.toggle = function () {
228                    var tip = mw.$(this.tip);
229                    if (tip.is(':visible')) {
230                        this.hide();
231                    }
232                    else {
233                        $el.focus();
234                        this.show();
235                    }
236                }
237            }
238            var prev = $el[0].previousElementSibling
239            if( prev && prev.classList.contains('mw-field-color-indicator')) {
240                var dp = prev.querySelector('.mw-field-color-indicator-display')
241                if(dp) {
242                    dp.style.backgroundColor = $el[0].value
243                }
244            }
245
246        };
247        mw.colorPicker = function (o) {
248
249            return new mw._colorPicker(o);
250        };
251
252        $(document).ready(function (){
253            $(document).on('click', function (e){
254                if(!mw.tools.hasParentsWithClass(e.target, 'a-color-picker') && !mw.tools.hasClass(e.target, 'mw-color-picker-field')) {
255                    colorPickers.forEach(function (clpckr){
256
257                        mw.$(clpckr).hide();
258
259                    });
260                }
261
262            })
263        })
264
265    })();