<commit_before>
import snippet from 'tui-code-snippet';
import tuiColorPicker from 'tui-color-picker';
const PICKER_COLOR = [
    '#000000',
    '#2a2a2a',
    '#545454',
    '#7e7e7e',
    '#a8a8a8',
    '#d2d2d2',
    '#ffffff',
    '',
    '#ff4040',
    '#ff6518',
    '#ffbb3b',
    '#03bd9e',
    '#00a9ff',
    '#515ce6',
    '#9e5fff',
    '#ff5583'
];

class Colorpicker {
    constructor(colorpickerElement, defaultColor = '#7e7e7e') {
        this.show = false;

        /* draw button element */
        colorpickerElement.classList.add('button');
        const title = colorpickerElement.getAttribute('title');

        this.colorElement = document.createElement('div');
        this.colorElement.className = 'color-picker-value';
        if (defaultColor) {
            this.colorElement.style.backgroundColor = defaultColor;
        } else {
            this.colorElement.classList.add('transparent');
        }

        const label = document.createElement('label');
        label.innerHTML = title;

        /* draw picker element */
        this.pickerControl = document.createElement('div');
        this.pickerControl.className = 'color-picker-control';

        this.pickerElement = document.createElement('div');
        this.pickerElement.className = 'color-picker';
        const triangle = document.createElement('div');
        triangle.className = 'triangle';

        this.pickerControl.appendChild(this.pickerElement);
        this.pickerControl.appendChild(triangle);

        colorpickerElement.appendChild(this.pickerControl);
        colorpickerElement.appendChild(this.colorElement);
        colorpickerElement.appendChild(label);

        this._setPickerControlPosition();

        this.picker = tuiColorPicker.create({
            container: this.pickerElement,
            preset: PICKER_COLOR,
            color: defaultColor
        });

        this.picker.on('selectColor', value => {
            this.changeColorElement(value.color);
            this.fire('change', value);
        });

        colorpickerElement.addEventListener('click', () => {
            this.show = !this.show;
            const display = this.show ? 'block' : 'none';
            this.pickerControl.style.display = display;
        });
    }

    _setPickerControlPosition() {
        const controlStyle = this.pickerControl.style;
        const top = parseInt(window.getComputedStyle(this.pickerControl, null).height, 10) + 12;
        const left = (parseInt(window.getComputedStyle(this.pickerControl, null).width, 10) / 2) - 20;

        controlStyle.top = `-${top}px`;
        controlStyle.left = `-${left}px`;
    }

    changeColorElement(color) {
        if (color) {
            this.colorElement.classList.remove('transparent');
            this.colorElement.style.backgroundColor = color;
        } else {
            this.colorElement.style.backgroundColor = '#fff';
            this.colorElement.classList.add('transparent');
        }
    }

    setColor(color) {
        this.changeColorElement(color);
    }

    getColor() {
        return this.picker.getColor();
    }
}

snippet.CustomEvents.mixin(Colorpicker);
export default Colorpicker;
<commit_msg>feat: design - colorpicker refactoring<commit_after>
import snippet from 'tui-code-snippet';
import tuiColorPicker from 'tui-color-picker';
const PICKER_COLOR = [
    '#000000',
    '#2a2a2a',
    '#545454',
    '#7e7e7e',
    '#a8a8a8',
    '#d2d2d2',
    '#ffffff',
    '',
    '#ff4040',
    '#ff6518',
    '#ffbb3b',
    '#03bd9e',
    '#00a9ff',
    '#515ce6',
    '#9e5fff',
    '#ff5583'
];

class Colorpicker {
    constructor(colorpickerElement, defaultColor = '#7e7e7e') {
        const title = colorpickerElement.getAttribute('title');

        this.show = false;

        this._makePickerButtonElement(colorpickerElement, defaultColor);
        this._makePickerLayerElement(colorpickerElement, title);
        this.picker = tuiColorPicker.create({
            container: this.pickerElement,
            preset: PICKER_COLOR,
            color: defaultColor
        });

        this._addEvent(colorpickerElement);
    }

    _makePickerButtonElement(colorpickerElement, defaultColor) {
        colorpickerElement.classList.add('button');

        this.colorElement = document.createElement('div');
        this.colorElement.className = 'color-picker-value';
        if (defaultColor) {
            this.colorElement.style.backgroundColor = defaultColor;
        } else {
            this.colorElement.classList.add('transparent');
        }
    }

    _makePickerLayerElement(colorpickerElement, title) {
        const label = document.createElement('label');
        const triangle = document.createElement('div');

        this.pickerControl = document.createElement('div');
        this.pickerControl.className = 'color-picker-control';

        this.pickerElement = document.createElement('div');
        this.pickerElement.className = 'color-picker';

        label.innerHTML = title;
        triangle.className = 'triangle';

        this.pickerControl.appendChild(this.pickerElement);
        this.pickerControl.appendChild(triangle);

        colorpickerElement.appendChild(this.pickerControl);
        colorpickerElement.appendChild(this.colorElement);
        colorpickerElement.appendChild(label);

        this._setPickerControlPosition();
    }

    _addEvent(colorpickerElement) {
        this.picker.on('selectColor', value => {
            this.changeColorElement(value.color);
            this.fire('change', value);
        });

        colorpickerElement.addEventListener('click', () => {
            this.show = !this.show;
            const display = this.show ? 'block' : 'none';
            this.pickerControl.style.display = display;
        });
    }

    _setPickerControlPosition() {
        const controlStyle = this.pickerControl.style;
        const top = parseInt(window.getComputedStyle(this.pickerControl, null).height, 10) + 12;
        const left = (parseInt(window.getComputedStyle(this.pickerControl, null).width, 10) / 2) - 20;

        controlStyle.top = `-${top}px`;
        controlStyle.left = `-${left}px`;
    }

    changeColorElement(color) {
        if (color) {
            this.colorElement.classList.remove('transparent');
            this.colorElement.style.backgroundColor = color;
        } else {
            this.colorElement.style.backgroundColor = '#fff';
            this.colorElement.classList.add('transparent');
        }
    }

    setColor(color) {
        this.changeColorElement(color);
    }

    getColor() {
        return this.picker.getColor();
    }
}

snippet.CustomEvents.mixin(Colorpicker);
export default Colorpicker;

{'fraction_non_alphanumeric': 0.12795216741405083, 'fraction_numerical': 0.018236173393124066, 'mean_word_length': 2.5780748663101605, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 7, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '6781455', 'n_tokens_mistral': 1948, 'n_tokens_neox': 1894, 'n_words': 287}