ColorPicker/InputfieldColorPicker.js at master · somatonic/ColorPicker · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
/**
 * An Inputfieldtype for handling Colors
 * used by the FieldtypeColorPicker/InputfieldColorPicker
 *
 * created by Philipp "Soma" Urlich
 * ColorPicker jQuery Plugin by http://www.eyecon.ro/colorpicker/
 *
 * Licensed under LGPL3 http://www.gnu.org/licenses/lgpl-3.0.txt
 *
 */

;

(function(document, $){

    var InputfieldColorPicker = {

        init: function() {

            $('div[id^=ColorPicker_]:not(.colorpicker_loaded)').each(function(){
                var $colorpicker = $(this);
                console.log("init colorpicker" + $colorpicker);

                $colorpicker.ColorPicker({
                    color: $(this).data('color').toString(),
                    onShow: function (colpkr) {
                        $(colpkr).fadeIn(500);
                        return false;
                    },
                    onHide: function (colpkr) {
                        $(colpkr).fadeOut(500);
                        return false;
                    },
                    onChange: function (hsb, hex, rgb) {
                        $colorpicker.css('backgroundColor', '#' + hex);
                        $colorpicker.css('background-image', 'none');
                        $colorpicker.next('input').val(hex).trigger('change');
                    }
                });

                $colorpicker.addClass("colorpicker_loaded");

            });

        },

        attachEvents: function() {
            $(document).on('click', 'a.ColorPickerReset', function(e){
                e.preventDefault();
                var color = $(this).data('default') && $(this).data('default') != 'transp' ? '#' + $(this).data('default').toString() : 'transparent';
                $(this).parent().find('input').val($(this).data('default')).trigger('change');
                $(this).parent().find('div[id^=ColorPicker_]').ColorPickerSetColor($(this).data('default').toString());
                $(this).parent().find('div[id^=ColorPicker_]')
                    .css('backgroundColor', color)
                    .css('background-image', 'none')
                    .attr('data-color', $(this).data('default').toString());
                if(color == 'transparent') {
                    var modurl = $(this).data('modurl');
                    $(this).parent().find('div[id^=ColorPicker_]')
                        .css('background-image', 'url(' + modurl + 'transparent.gif)');
                }
            });

             /* additions (swatches) by @Rayden */
            $(document).on('click', 'div.ColorPickerSwatch',function(e){
                e.preventDefault();
                var color = $(this).data('color') && $(this).data('color') != 'transp' ? '#' + $(this).data('color').toString() : 'transparent';
                $(this).closest('.ui-widget-content, .InputfieldContent').find('input').val($(this).data('color')).trigger('change');
                $(this).closest('.ui-widget-content, .InputfieldContent').find('div[id^=ColorPicker_]').ColorPickerSetColor($(this).data('color').toString());
                $(this).closest('.ui-widget-content, .InputfieldContent').find('div[id^=ColorPicker_]')
                    .css('backgroundColor', color)
                    .css('background-image', 'none')
                    .attr('data-color', $(this).data('color').toString());
                if(color == 'transparent') {
                    var modurl = $(this).closest('.ui-widget-content, .InputfieldContent').find('.ColorPickerReset').data('modurl');
                    $(this).closest('.ui-widget-content, .InputfieldContent').find('div[id^=ColorPicker_]')
                        .css('background-image', 'url(' + modurl + 'transparent.gif)');
                }
            });
        }

    };

    // document ready
    $(function(){
        InputfieldColorPicker.init();
        InputfieldColorPicker.attachEvents();
        $(".Inputfield").on("repeateradd", ".InputfieldRepeater", InputfieldColorPicker.init);
        $(".Inputfield").on("reloaded", ".InputfieldRepeater", function(){
            InputfieldColorPicker.init();
        });

    });

}(document, jQuery));