https://membership.crn.de/Resource/Javascript/jquery.sfinput.js

1(function ($) {
2    var sfInputBase = function (element, options) {
3        var plugin = this;
4        var defaults = {
5            style: 'color', //color - slider
6            value: 0,
7            color: '#FFFFFF',
8            range: 'max',
9            updateEvent: function () { },
10            min: 0,
11            max: 10,
12            step: 1,
13            elementName: '',
14            pickerColor: '',
15            link: '', 
16            linkValue:0
17
18        };
19
20        plugin.init = function () {
21            plugin.settings = $.extend({}, defaults, options);
22            plugin.settings.elementName = '#' + element.attr("id");
23            plugin.settings.pickerColor = '';
24            plugin.settings.element = element;
25
26            if (plugin.settings.style === 'color') {
27                plugin.settings.pickerColor = GetInputColorPicker(plugin.settings.elementName, plugin.settings.color);
28                plugin.settings.pickerColor.on('change', (color, instance) => {
29                    var name = '#' + instance.options.el.id;
30                    var plugin = $(name).data("sfInput");
31                    plugin.settings.color = color.toHEXA().toString();
32                    plugin.settings.element.css('background-color', plugin.settings.color);
33
34                    if (plugin.settings.updateEvent) {
35                        plugin.settings.updateEvent.call();
36                    }
37
38                });
39            }
40            else {
41                plugin.settings.element.slider({
42                    range: plugin.settings.range,
43                    min: plugin.settings.min,
44                    max: plugin.settings.max,
45                    value: plugin.settings.value,
46                    step: plugin.settings.step,
47                    create: function () {
48                        var name = '#' + $(this).attr("id");
49                        $(name + "-handle").text($(this).slider("value"));
50                    },
51                    slide: function (event, ui) {
52                        var name = '#' + $(this).attr("id");
53                        var plugin = $(name).data("sfInput");
54                        $(name + "-handle").text(ui.value);
55                        plugin.settings.value = ui.value;
56
57                        if (plugin.settings.link !== '') {
58                            if (parseInt(ui.value) > 0) {
59                                $("#" + plugin.settings.link).data("sfInput").Update(plugin.settings.linkValue);
60                            }
61                        }
62
63                        if (plugin.settings.updateEvent) {
64                            plugin.settings.updateEvent.call();
65                        }
66                    }
67                });
68            }
69        }
70
71        plugin.init();
72
73        this.Update = function (value) {
74            if (plugin.settings.style === 'color') {
75                plugin.settings.color = value;
76                plugin.settings.pickerColor.setColor(value, false);
77                plugin.settings.element.css('background-color', value);
78            }
79            else {
80                var name = '#' + plugin.settings.element.attr("id");
81                plugin.settings.value = value;
82                plugin.settings.element.slider('value', value);
83                $(name + "-handle").text(value);
84            }
85        };
86
87        this.Value = function () {
88            if (plugin.settings.style === 'color') {
89                return plugin.settings.color;
90            }
91            else {
92                return plugin.settings.value;
93            }
94        };
95
96        function GetInputColorPicker(elmName, color) {
97            var pickr = Pickr.create({
98                el: elmName,
99                theme: 'classic',
100                default: color,
101                useAsButton: true,
102                comparison: false,
103                defaultRepresentation: 'HEX',
104                swatches: [
105                    '#000000',
106                    '#ffffff',
107                    '#4DB0FB',
108                    '#79ae31',
109                    '#ff6937',
110                    '#d555ff',
111                    '#1F60A0',
112                    '#28CC9E',
113                    '#FFC107',
114                    '#800080',
115                    '#FFFF00',
116                    '#cccccc',
117                    '#e8e8e8',
118                    '#4a4a4a',
119                    '#FFFFFF00'
120                ],
121
122                components: {
123                    // Main components
124                    preview: false,
125                    opacity: true,
126                    hue: true,
127

128                    // Input / output Options
129                    interaction: {
130                        hex: false,
131                        rgba: false,
132                        input: true,
133                        cancel: false,
134                        clear: false,
135                        save: false,
136                    }
137                }
138            });
139
140            return pickr;
141        }
142    };
143
144    $.fn.sfInput = function (options) {
145        var element = $(this);
146        if (element.data('sfInput')) { return; };
147        var plugin = new sfInputBase(element, options);
148        element.data("sfInput", plugin);
149        return plugin;
150    };
151
152
153})(jQuery);