https://www.springerpub.com/static/version1789146322/base/Magento/…/js/lib/knockout/bindings/color-picker.js

1/**
2 * Copyright © Magento, Inc. All rights reserved.
3 * See COPYING.txt for license details.
4 */
5define([
6    'ko',
7    'jquery',
8    '../template/renderer',
9    'spectrum',
10    'tinycolor'
11], function (ko, $, renderer, spectrum, tinycolor) {
12    'use strict';
13
14    /**
15     * Change color picker status to be enabled or disabled
16     *
17     * @param {HTMLElement} element - Element to apply colorpicker enable/disable status to.
18     * @param {Object} viewModel - Object, which represents view model binded to el.
19     */
20    function changeColorPickerStateBasedOnViewModel(element, viewModel) {
21        $(element).spectrum(viewModel.disabled() ? 'disable' : 'enable');
22    }
23
24    ko.bindingHandlers.colorPicker = {
25        /**
26         * Binding init callback.
27         *
28         * @param {*} element
29         * @param {Function} valueAccessor
30         * @param {Function} allBindings
31         * @param {Object} viewModel
32         */
33        init: function (element, valueAccessor, allBindings, viewModel) {
34            var config = valueAccessor(),
35
36                /** change value */
37                changeValue = function (value) {
38                    if (value == null) {
39                        value = '';
40                    }
41                    config.value(value.toString());
42                };
43
44            config.change = changeValue;
45
46            config.hide = changeValue;
47
48            /** show value */
49            config.show = function () {
50                if (!viewModel.focused()) {
51                    viewModel.focused(true);
52                }
53
54                return true;
55            };
56
57            $(element).spectrum(config);
58
59            changeColorPickerStateBasedOnViewModel(element, viewModel);
60        },
61
62        /**
63         * Reads params passed to binding, parses component declarations.
64         * Fetches for those found and attaches them to the new context.
65         *
66         * @param {HTMLElement} element - Element to apply bindings to.
67         * @param {Function} valueAccessor - Function that returns value, passed to binding.
68         * @param {Object} allBindings - Object, which represents all bindings applied to element.
69         * @param {Object} viewModel - Object, which represents view model binded to element.
70         */
71        update: function (element, valueAccessor, allBindings, viewModel) {
72            var config = valueAccessor();
73
74            /** Initialise value as empty if it is undefined when color picker input is reset **/
75            if (config.value() === undefined) {
76                config.value('');
77            }
78
79            if (tinycolor(config.value()).isValid() || config.value() === '') {
80                $(element).spectrum('set', config.value());
81
82                if (config.value() !== '') {
83                    config.value($(element).spectrum('get').toString());
84                }
85            }
86
87            changeColorPickerStateBasedOnViewModel(element, viewModel);
88        }
89    };
90
91    renderer.addAttribute('colorPicker');
92});