ꦫꦣꦺꦤ꧀ꦄꦤ꧀ꦠꦱꦺꦤ

PATH: home / thebhoeo / .trash / woodmart / inc / admin / assets / js / vc-fields

(function ($) {

$('#vc_ui-panel-edit-element').on('vcPanel.shown', function () {
        
        //Transfer bg color to border color
        var bgColor = $('[data-vc-shortcode-param-name="bg_color"] .woodmart-vc-colorpicker-value').val();
        var bgColorHover = $('[data-vc-shortcode-param-name="bg_color_hover"] .woodmart-vc-colorpicker-value').val();

if (!isBase64(bgColor)) {
            $('[data-vc-shortcode-param-name="border_color"] .woodmart-vc-colorpicker-value').val(bgColor);
        }
        if (!isBase64(bgColorHover)) {
            $('[data-vc-shortcode-param-name="border_color_hover"] .woodmart-vc-colorpicker-value').val(bgColorHover);
        }

//Color options
        $('.woodmart-vc-colorpicker').each(function () {
            var $this = $(this);
            var $colorpicker = $this.find('.woodmart-vc-colorpicker-input');
            var mainInputVal = $this.find('.woodmart-vc-colorpicker-value').val();
            var id = $this.attr('id');
            var color = '';

$colorpicker.wpColorPicker({
                change: function (event, ui) {
                    setMainValue(id, ui.color.toString());
                    $this.trigger('change')
                },
                clear: function () {
                    $opacityRange.val(100);
                    $opacityOutput.val("100%");
                    setMainValue(id, '');
                },
            });

if (mainInputVal && isBase64(mainInputVal)) {
                var parseVal = JSON.parse(window.atob(mainInputVal));
                color = parseVal.data.desktop;
            } else if (mainInputVal) {
                color = mainInputVal;
            }

$colorpicker.wpColorPicker('color', color);
            setMainValue(id, color);

//Opacity range add
            var $pickerInput = $this.find('.woodmart-vc-colorpicker-input');
            var opacityVal = 100;
            var value = $pickerInput.val().replace(/\s+/g, "");

if (value.match(/rgba$\d+\,\d+\,\d+\,([^$]+)\)/)) {
                opacityVal = 100 * parseFloat(value.match(/rgba$\d+\,\d+\,\d+\,([^$]+)\)/)[1]);
            }

$('<div class="woodmart-opacity-container"><label>Opacity: <output class="rangevalue">' + opacityVal + '%</output></label><input type="range" min="1" max="100" value="' + opacityVal + '" name="opacity" class="woodmart-opacity-field"></div>').appendTo($this.addClass('woodmart-opacity-picker').find('.iris-picker'));

var $opacityRange = $this.find('.woodmart-opacity-field');
            var $opacityOutput = $this.find('.woodmart-opacity-container output');

$opacityRange.on('change', function () {
                opacityVal = parseFloat($opacityRange.val());
                $opacityOutput.val($opacityRange.val() + '%');

var iris = $pickerInput.data('a8c-iris');
                var colorPicker = $pickerInput.data('wp-wpColorPicker');

iris._color._alpha = opacityVal / 100;
                $pickerInput.val(iris._color.toString());
                colorPicker = $pickerInput.data('wp-wpColorPicker');

colorPicker.toggler.css({
                    backgroundColor: $pickerInput.val()
                })
                $colorpicker.wpColorPicker('color', $pickerInput.val());

}).val(opacityVal).trigger('change');

});

function setMainValue(id, color) {
            var $mainInput = $('#' + id).find('.woodmart-vc-colorpicker-value');
            var $pickerInput = $('#' + id).find('.woodmart-vc-colorpicker-input');
            var results = {
                param_type: 'woodmart_colorpicker',
                css_args: $mainInput.data('css_args'),
                selector_id: $('.woodmart-css-id').val(),
                data: {
                    desktop: color
                },
            };

if (!results.data.desktop) {
                results = '';
            } else {
                $pickerInput.val(results.data.desktop).trigger('change');
                results = window.btoa(JSON.stringify(results));
            }

$mainInput.val(results).trigger('change');
        }

function isBase64(str) {
            try {
                return btoa(atob(str)) == str;
            } catch (err) {
                return false;
            }
        }

});

})(jQuery);

[-] dimensions.js [edit]
[-] image-select.js [edit]
[-] title-divider.js [edit]
[-] button-set.js [edit]
[-] image-hotspot.js [edit]
[-] number.js [edit]
[-] box-shadow.js [edit]
[-] responsive-spacing.js [edit]
[-] slider-responsive.js [edit]
[-] vc-functions.js [edit]
[-] gradient.js [edit]
[+] ..
[-] upload.js [edit]
[-] datepicker.js [edit]
[-] select.js [edit]
[-] list-element.js [edit]
[-] frontend-editor-functions.js [edit]
[-] slider.js [edit]
[-] switch.js [edit]
[-] wd-colorpicker.js [edit]
[-] colorpicker.js [edit]
[-] responsive-size.js [edit]