<commit_before>'use strict';

import Widget from 'app/addons/widgets/Widget';
import ColorPickerModal from 'app/addons/widgets/ColorPickerModal';
import { toCSS, toColorVec } from 'app/core/common';

// When presenting the modal, offset X, Y of the the modal by
// these values, in pixels
const MODAL_X_OFFSET = 0;
const MODAL_Y_OFFSET = 5;

export default class ColorPicker extends Widget {
    // There must be a constructor call here because
    // ColorPicker sets its own properties for color
    constructor (...args) {
        super(...args);

        // Set the color property from editor value
        this.color = toCSS(this.key.value);
    }

    /**
     *  Creates an in-line color indicator widget
     */
    createEl () {
        let el = document.createElement('div');
        el.className = 'tp-widget tp-widget-colorpicker';
        el.addEventListener('click', this.onClick.bind(this));
        return el;
    }

    update() {
        super.update();

        // Set the color property from editor value
        this.color = toCSS(this.key.value);
    }

    /**
     *  Returns widget background color when
     *  this.color is requested
     */
    get color () {
        return this.el.style.backgroundColor;
    }

    /**
     *  Sets this.color
     *  Automatically changes widget background color
     *  Assumes color property is a CSS color.
     *  Be sure to convert value parameter to a CSS-readable value.
     */
    set color (cssColor) {
        this.el.style.backgroundColor = cssColor;
    }

    get value () {
        return super['value'];
    }

    set value (val) {
        super['value'] = val;
        this.color = toCSS(val);

        // Updates the color picker modal, if present.
        if (this.picker) {
            this.picker.setColor(this.color);
        }
    }

    /**
     *  Handles when user clicks on the in-line color indicator widget
     */
    onClick (event) {
        // Toggles the picker to be off if it's already present.
        if (this.picker && this.picker.isVisible) {
            this.picker.removeModal();
            return;
        }
        // If no picker is created yet, do it now
        else if (!this.picker) {
            this.picker = new ColorPickerModal(this.color);
        }

        // Turn the picker on and present modal at the desired position
        let pos = this.el.getBoundingClientRect();
        this.picker.presentModal(pos.left + MODAL_X_OFFSET, pos.bottom + MODAL_Y_OFFSET);

        // Note: this fires change events as a live preview of the color.
        // TODO: Store original value so we can go back to it if the
        // interaction is canceled.
        this.picker.on('changed', this.onPickerChange.bind(this));
    }

    /**
     *  Handles when user selects a new color on the colorpicker
     */
    onPickerChange (event) {
        let original = toColorVec(super['value'])
        this.color = this.picker.getCSS();

        // Convert the CSS color value to Tangram format for editor.
        let color = this.picker.getRGB();
        let rgbString = [1,1,1];
        if (original.a !== undefined) {
            rgbString = `[${color.r.toFixed(3)}, ${color.g.toFixed(3)}, ${color.b.toFixed(3)}, ${original.a}]`;
        } else {
            rgbString = `[${color.r.toFixed(3)}, ${color.g.toFixed(3)}, ${color.b.toFixed(3)}]`;
        }
        
        this.setEditorValue(rgbString);
    }
}<commit_msg>fixing alphanumeric colors<commit_after>'use strict';

import Widget from 'app/addons/widgets/Widget';
import ColorPickerModal from 'app/addons/widgets/ColorPickerModal';
import { toCSS, toColorVec } from 'app/core/common';

// When presenting the modal, offset X, Y of the the modal by
// these values, in pixels
const MODAL_X_OFFSET = 0;
const MODAL_Y_OFFSET = 5;

export default class ColorPicker extends Widget {
    // There must be a constructor call here because
    // ColorPicker sets its own properties for color
    constructor (...args) {
        super(...args);

        // Set the color property from editor value
        this.color = toCSS(this.key.value);
    }

    /**
     *  Creates an in-line color indicator widget
     */
    createEl () {
        let el = document.createElement('div');
        el.className = 'tp-widget tp-widget-colorpicker';
        el.addEventListener('click', this.onClick.bind(this));
        return el;
    }

    update() {
        super.update();

        // Set the color property from editor value
        this.color = toCSS(this.key.value);
    }

    /**
     *  Returns widget background color when
     *  this.color is requested
     */
    get color () {
        return this.el.style.backgroundColor;
    }

    /**
     *  Sets this.color
     *  Automatically changes widget background color
     *  Assumes color property is a CSS color.
     *  Be sure to convert value parameter to a CSS-readable value.
     */
    set color (cssColor) {
        this.el.style.backgroundColor = cssColor;
    }

    get value () {
        return super['value'];
    }

    set value (val) {
        super['value'] = val;
        this.color = toCSS(val);

        // Updates the color picker modal, if present.
        if (this.picker) {
            this.picker.setColor(this.color);
        }
    }

    /**
     *  Handles when user clicks on the in-line color indicator widget
     */
    onClick (event) {
        // Toggles the picker to be off if it's already present.
        if (this.picker && this.picker.isVisible) {
            this.picker.removeModal();
            return;
        }
        // If no picker is created yet, do it now
        else if (!this.picker) {
            this.picker = new ColorPickerModal(this.color);
        }

        // Turn the picker on and present modal at the desired position
        let pos = this.el.getBoundingClientRect();
        this.picker.presentModal(pos.left + MODAL_X_OFFSET, pos.bottom + MODAL_Y_OFFSET);

        // Note: this fires change events as a live preview of the color.
        // TODO: Store original value so we can go back to it if the
        // interaction is canceled.
        this.picker.on('changed', this.onPickerChange.bind(this));
    }

    /**
     *  Handles when user selects a new color on the colorpicker
     */
    onPickerChange (event) {
        let original = toColorVec(super['value'])
        this.color = this.picker.getCSS();

        // Convert the CSS color value to Tangram format for editor.
        let color = this.picker.getRGB();
        let rgbString = [1,1,1];
        if ( typeof(original) === "object" && original.a !== undefined) {
            rgbString = `[${color.r.toFixed(3)}, ${color.g.toFixed(3)}, ${color.b.toFixed(3)}, ${original.a}]`;
        } else {
            rgbString = `[${color.r.toFixed(3)}, ${color.g.toFixed(3)}, ${color.b.toFixed(3)}]`;
        }
        
        this.setEditorValue(rgbString);
    }
}
{'fraction_non_alphanumeric': 0.11654842912986825, 'fraction_numerical': 0.0031851744606920516, 'mean_word_length': 2.1005385996409336, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 3, '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': '7041999', 'n_tokens_mistral': 2019, 'n_tokens_neox': 1974, 'n_words': 598}