ace-colorpicker-rpk 0.0.12

package/src/colorpicker/ui/ColorInformation.js

@@ -0,0 +1,216 @@
+import Event from '../../util/Event'
+import UIElement from '../UIElement';
+
+const source = 'chromedevtool-information';
+
+export default class ColorInformation extends UIElement {
+
+    template () {
+        return /*html*/`
+        <div class="information hex">
+            <div ref="$informationChange" class="information-change">
+                <button ref="$formatChangeButton" type="button" class="format-change-button arrow-button"></button>
+            </div>
+            <div class="information-item hex">
+                <div class="input-field hex">
+                    <input ref="$hexCode" class="input" type="text" />
+                    <div class="title">HEX</div>
+                </div>
+            </div>
+            <div class="information-item rgb">
+                <div class="input-field rgb-r">
+                    <input ref="$rgb_r" class="input" type="number" step="1" min="0" max="255" />
+                    <div class="title">R</div>
+                </div>
+                <div class="input-field rgb-g">
+                    <input ref="$rgb_g" class="input" type="number" step="1" min="0" max="255" />
+                    <div class="title">G</div>
+                </div>
+                <div class="input-field rgb-b">
+                    <input ref="$rgb_b" class="input" type="number" step="1" min="0" max="255" />
+                    <div class="title">B</div>
+                </div>          
+                <div class="input-field rgb-a">
+                    <input ref="$rgb_a" class="input" type="number" step="0.01" min="0" max="1" />
+                    <div class="title">A</div>
+                </div>                                                            
+            </div>
+            <div class="information-item hsl">
+                <div class="input-field hsl-h">
+                    <input ref="$hsl_h" class="input" type="number" step="1" min="0" max="360" />
+                    <div class="title">H</div>
+                </div>
+                <div class="input-field hsl-s">
+                    <input ref="$hsl_s" class="input" type="number" step="1" min="0" max="100" />
+                    <div class="postfix">%</div>
+                    <div class="title">S</div>
+                </div>
+                <div class="input-field hsl-l">
+                    <input ref="$hsl_l" class="input" type="number" step="1" min="0" max="100" />
+                    <div class="postfix">%</div>                        
+                    <div class="title">L</div>
+                </div>
+                <div class="input-field hsl-a">
+                    <input ref="$hsl_a" class="input" type="number" step="0.01" min="0" max="1" />
+                    <div class="title">A</div>
+                </div>
+            </div>
+        </div>
+        `
+    }
+    
+    setCurrentFormat (format) {
+        this.format = format
+
+        this.initFormat();
+    }
+    
+    initFormat () {
+        var current_format = this.format || 'hex';
+    
+        ['hex', 'rgb', 'hsl'].filter(it => it !== current_format).forEach(formatString => {
+            this.$el.removeClass(formatString);
+        })
+
+        this.$el.addClass(current_format);
+    }
+
+
+    nextFormat() {
+        var current_format = this.$store.format || 'hex';
+
+        var next_format = 'hex';
+        if (current_format == 'hex') {
+            next_format = 'rgb';
+        } else if (current_format == 'rgb') {
+            next_format = 'hsl';
+        } else if (current_format == 'hsl') {
+            next_format = 'hex';
+        }
+
+        this.format = next_format;
+        this.$store.dispatch('/changeFormat', next_format);
+        this.$store.emit('lastUpdateColor')
+        this.initFormat();
+    }    
+
+    goToFormat(to_format) {
+        this.format = to_format;
+        this.$store.dispatch('/changeFormat', this.format);
+        this.$store.emit('lastUpdateColor')                
+        this.initFormat();        
+    }      
+    
+    getFormat () {
+        return this.format || 'hex';   
+    }
+
+    checkNumberKey(e) {
+        var code = e.which,
+            isExcept = false;
+
+        if(code == 37 || code == 39 || code == 8 || code == 46 || code == 9)
+            isExcept = true;
+
+        if(!isExcept && (code < 48 || code > 57))
+            return false;
+
+        return true;
+    }
+
+    checkNotNumberKey(e) {
+        return !this.checkNumberKey(e);
+    }        
+
+    changeRgbColor () {
+        this.$store.dispatch('/changeColor', {
+            type: 'rgb',
+            r : this.refs.$rgb_r.int(),
+            g : this.refs.$rgb_g.int(),
+            b : this.refs.$rgb_b.int(),
+            a : this.refs.$rgb_a.float(),
+            source
+        })
+        this.$store.emit('lastUpdateColor')        
+    }
+
+    changeHslColor () {
+        this.$store.dispatch('/changeColor', {
+            type: 'hsl',
+            h : this.refs.$hsl_h.int(),
+            s : this.refs.$hsl_s.int(),
+            l : this.refs.$hsl_l.int(),
+            a : this.refs.$hsl_a.float(),
+            source
+        })    
+        this.$store.emit('lastUpdateColor')            
+    }    
+
+    '@changeColor' (sourceType) {
+        if (source != sourceType) {
+            this.refresh()
+        }
+    }
+
+    '@initColor' () { this.refresh() }    
+
+    'input $rgb_r' (e) {  this.changeRgbColor(); }
+    'input $rgb_g' (e) {  this.changeRgbColor(); }
+    'input $rgb_b' (e) {  this.changeRgbColor(); }
+    'input $rgb_a' (e) {  this.changeRgbColor(); }  
+    
+    'input $hsl_h' (e) {  this.changeHslColor(); }
+    'input $hsl_s' (e) {  this.changeHslColor(); }
+    'input $hsl_l' (e) {  this.changeHslColor(); }
+    'input $hsl_a' (e) {  this.changeHslColor(); }      
+    
+    'keyup $hexCode' (e) {
+        var code = this.refs.$hexCode.val();
+    
+        if(code.charAt(0) == '#' && (code.length == 7 || code.length === 9)) {
+            this.$store.dispatch('/changeColor', code, source)
+            this.$store.emit('lastUpdateColor')            
+        }
+    }
+    
+    'click $formatChangeButton' (e) {
+        this.nextFormat();
+    }
+
+    'click $el .information-item.hex .input-field .title' (e) {
+        this.goToFormat('rgb');
+    }    
+
+    'click $el .information-item.rgb .input-field .title' (e) {
+        this.goToFormat('hsl');
+    }    
+
+    'click $el .information-item.hsl .input-field .title' (e) {
+        this.goToFormat('hex');
+    }      
+
+    setRGBInput() {
+        this.refs.$rgb_r.val(this.$store.rgb.r);
+        this.refs.$rgb_g.val(this.$store.rgb.g);
+        this.refs.$rgb_b.val(this.$store.rgb.b);
+        this.refs.$rgb_a.val(this.$store.alpha);
+    }
+    
+    setHSLInput() {
+        this.refs.$hsl_h.val(this.$store.hsl.h);
+        this.refs.$hsl_s.val(this.$store.hsl.s);
+        this.refs.$hsl_l.val(this.$store.hsl.l);
+        this.refs.$hsl_a.val(this.$store.alpha);
+    }    
+
+    setHexInput () {
+        this.refs.$hexCode.val(this.$store.dispatch('/toHEX'));
+    }
+
+    refresh () {
+        this.setCurrentFormat(this.$store.format);
+        this.setRGBInput();
+        this.setHSLInput();
+        this.setHexInput();
+    }
+}

package/src/colorpicker/ui/ColorPalette.js

@@ -0,0 +1,130 @@
+import UIElement from '../UIElement';
+import Event from '../../util/Event'
+
+const source = 'chromedevtool-palette';
+
+export default class ColorPalette extends UIElement {
+
+    template () {
+        return `
+        <div class="color">
+            <div ref="$saturation" class="saturation">
+                <div ref="$value" class="value">
+                    <div ref="$drag_pointer" class="drag-pointer"></div>
+                </div>
+            </div>        
+        </div>        
+        `
+    }
+
+    setBackgroundColor (color) {
+        this.$el.css("background-color", color);
+    }
+
+    refresh () {
+        this.setColorUI();
+    }
+
+    caculateSV () {
+        var pos = this.drag_pointer_pos || { x : 0, y : 0 };
+
+        var width = this.state.get('$el.width');
+        var height = this.state.get('$el.height');
+
+        var s = (pos.x / width);
+        var v = ((height - pos.y) / height);
+
+        this.$store.dispatch('/changeColor', {
+            type: 'hsv',
+            s,
+            v,
+            source
+        })        
+    }
+
+    setColorUI() {
+        var  x = this.state.get('$el.width') * this.$store.hsv.s, 
+        y = this.state.get('$el.height') * ( 1 - this.$store.hsv.v );
+    
+        this.refs.$drag_pointer.css({
+            left : x + "px",
+            top : y + "px"
+        });
+    
+        this.drag_pointer_pos = { x , y };
+
+        this.setBackgroundColor(this.$store.dispatch('/getHueColor'))
+    }
+
+
+    setMainColor(e) {
+        // e.preventDefault();
+        var pos = this.$el.offset();         // position for screen
+        var w = this.state.get('$el.contentWidth');
+        var h = this.state.get('$el.contentHeight');
+
+        var x = Event.pos(e).pageX - pos.left;
+        var y = Event.pos(e).pageY - pos.top;
+
+        if (x < 0) x = 0;
+        else if (x > w) x = w;
+    
+        if (y < 0) y = 0;
+        else if (y > h) y = h;
+    
+        this.refs.$drag_pointer.css({
+            left: x  + 'px',
+            top: y + 'px'
+        });
+    
+        this.drag_pointer_pos = { x , y }
+
+        this.caculateSV()
+    }    
+
+    '@changeColor' (sourceType) {
+        if (source != sourceType) {
+            this.refresh()
+        }
+    }
+
+    '@initColor' () { this.refresh() }    
+
+    'mouseup document' (e) {
+        if (this.isDown) {
+            this.isDown = false; 
+            this.$store.emit('lastUpdateColor');            
+        }
+    }    
+
+    'mousemove document' (e) {
+        if (this.isDown) {
+            this.setMainColor(e);
+        }
+    }
+
+    mousedown (e) {
+        this.isDown = true; 
+        this.setMainColor(e);
+    }    
+
+    'touchend document' (e) {
+        if (this.isDown) {
+            this.isDown = false; 
+            this.$store.emit('lastUpdateColor');            
+        }
+    }    
+
+    'touchmove document' (e) {
+        if (this.isDown) {
+            this.setMainColor(e);
+        }
+    }
+
+    touchstart (e) {
+        e.preventDefault()
+        this.isDown = true; 
+        this.setMainColor(e);
+    }
+    
+}

package/src/colorpicker/ui/ColorRing.js

@@ -0,0 +1,68 @@
+import ColorWheel from './ColorWheel';
+import { caculateAngle } from '../../util/functions/math';
+
+export default class ColorRing extends ColorWheel {
+
+    constructor (opt) {
+        super(opt)
+
+        this.width = 214;
+        this.height = 214;
+        this.thinkness = 16; 
+        this.half_thinkness = this.thinkness / 2 
+        this.source = 'colorring'
+    }
+
+    template () {
+        return `
+        <div class="wheel" data-type="ring">
+            <canvas class="wheel-canvas" ref="$colorwheel" ></canvas>
+            <div class="drag-pointer" ref="$drag_pointer"></div>
+        </div>
+        `
+    }
+
+    setColorUI(isEvent) {
+        this.renderCanvas();        
+        this.setHueColor(null, isEvent);
+    }
+
+    getDefaultValue () {
+        return this.$store.hsv.h 
+    }
+
+    setHueColor (e, isEvent) {
+
+        if (!this.state.get('$el.width')) return;
+
+        var { minX, minY, radius,  centerX, centerY } = this.getRectangle()
+        var { x , y } = this.getCurrentXY(
+            e,  
+            this.getDefaultValue(),
+            radius, 
+            centerX, 
+            centerY
+        )
+
+        var rx = x - centerX, ry = y - centerY, hue = caculateAngle(rx, ry);
+
+        {
+            var { x, y } = this.getCurrentXY(null, hue, radius - this.half_thinkness, centerX, centerY);
+        }
+        
+
+        // set drag pointer position 
+        this.refs.$drag_pointer.css({
+            left: (x - minX) + 'px',
+            top: (y - minY) + 'px' 
+        });
+
+        if (!isEvent) {
+            this.changeColor({
+                type: 'hsv',
+                h: hue
+            })
+        }
+    } 
+}
+ 

package/src/colorpicker/ui/ColorSetsChooser.js

@@ -0,0 +1,96 @@
+import UIElement from '../UIElement';
+
+const DATA_COLORSETS_INDEX = 'data-colorsets-index';
+
+export default class ColorSetsChooser extends UIElement {
+
+    template () {
+        return `
+            <div class="color-chooser">
+                <div class="color-chooser-container">
+                    <div class="colorsets-item colorsets-item-header">
+                        <h1 class="title">Color Palettes</h1>
+                        <span ref="$toggleButton" class="items">&times;</span>
+                    </div>
+                    <div ref="$colorsetsList" class="colorsets-list"></div>
+                </div>
+            </div>
+        `
+    }
+
+    refresh () {
+        this.load();
+    }
+
+    '@changeCurrentColorSets' () {
+        this.refresh()
+    }
+
+    '@toggleColorChooser' () {
+        this.toggle()
+    }
+
+    // loadable 
+    'load $colorsetsList' () {
+        // colorsets 
+        const colorSets = this.$store.dispatch('/getColorSetsList');
+
+        return `
+            <div>
+                ${colorSets.map( (element, index) => {
+                    return `
+                        <div class="colorsets-item" data-colorsets-index="${index}" >
+                            <h1 class="title">${element.name}</h1>
+                            <div class="items">
+                                <div>
+                                    ${element.colors.filter((color, i) => i < 5).map(color => {
+                                        color = color || 'rgba(255, 255, 255, 1)';
+                                        return  `<div class="color-item" title="${color}">
+                                                <div class="color-view" style="background-color: ${color}"></div>
+                                            </div>`
+                                    }).join('')}
+                                </div>
+                            </div>
+                        </div>`
+                }).join('')}
+            </div>
+        `
+    }
+
+    show () {
+        this.$el.addClass('open');
+    }
+
+    hide () {
+        this.$el.removeClass('open');
+    }
+
+    toggle () {
+        this.$el.toggleClass('open');
+    }
+
+
+    'click $toggleButton' (e) {
+        this.toggle();
+    }
+
+    'click $colorsetsList .colorsets-item' (e) {
+        const $item = e.$delegateTarget;
+
+        if ($item) {
+
+            const index = parseInt($item.attr(DATA_COLORSETS_INDEX));
+
+            this.$store.dispatch('/setCurrentColorSets', index);
+
+            this.hide();
+        }
+    }
+
+    destroy () {
+        super.destroy();
+
+        this.hide();
+    }
+
+}