ace-colorpicker-rpk 0.0.12

package/src/colorpicker/BaseColorPicker.js

@@ -0,0 +1,404 @@
+import Dom from '../util/Dom'
+import ColorSetsList from './module/ColorSetsList'
+import UIElement from './UIElement'
+import ColorManager from './module/ColorManager';
+import BaseStore from './BaseStore';
+
+export default class BaseColorPicker extends UIElement {
+
+    constructor (opt) {
+        super(opt);
+
+        this.isColorPickerShow = false;
+        this.isShortCut = false;
+        this.hideDelay = +(typeof this.opt.hideDeplay == 'undefined' ? 2000 : this.opt.hideDelay);
+        this.timerCloseColorPicker;
+        this.autoHide = this.opt.autoHide || true;
+        this.outputFormat = this.opt.outputFormat
+        this.$checkColorPickerClass = this.checkColorPickerClass.bind(this);
+
+    }
+
+    initialize () {
+        this.$body = null;
+        this.$root = null; 
+        
+        this.$store = new BaseStore({
+            modules: [
+                ColorManager,
+                ColorSetsList
+            ]
+        });
+
+        this.callbackChange = () => {
+            this.callbackColorValue()
+        }
+
+        this.callbackLastUpdate = () => {
+            this.callbackLastUpdateColorValue()
+        }        
+
+        this.colorpickerShowCallback = function () { };
+        this.colorpickerHideCallback = function () { };   
+        this.colorpickerLastUpdateCallback = function () { };           
+
+
+        this.$body = new Dom(this.getContainer());
+        this.$root = new Dom('div', this.opt.containerClass);
+
+        //  append colorpicker to container (ex : body)
+        if (this.opt.position == 'inline') {
+            this.$body.append(this.$root);
+        }
+
+        if (this.opt.type) {    // to change css style
+            this.$root.addClass(this.opt.type);
+        }
+
+        if (this.opt.hideInformation) {
+            this.$root.addClass('hide-information')
+        }
+
+        if (this.opt.hideColorsets) {
+            this.$root.addClass('hide-colorsets')
+        }        
+
+        this.$arrow = new Dom('div', 'arrow');
+        
+        this.$root.append(this.$arrow);
+
+        this.$store.dispatch('/setUserPalette', this.opt.colorSets);
+
+        this.render()
+
+        this.$root.append(this.$el)
+
+        this.initColorWithoutChangeEvent(this.opt.color);
+
+        // 이벤트 연결 
+        this.initializeEvent();           
+
+    }
+
+    initColorWithoutChangeEvent (color) {
+        this.$store.dispatch('/initColor', color);
+    }
+
+    /** 
+     * public method 
+     * 
+     */
+
+    /**
+     * 
+     * show colorpicker with position  
+     * 
+     * @param {{left, top, hideDelay, isShortCut}} opt 
+     * @param {String|Object} color  
+     * @param {Function} showCallback  it is called when colorpicker is shown
+     * @param {Function} hideCallback  it is called once when colorpicker is hidden
+     */
+    show(opt, color, showCallback, hideCallback, lastUpdateCallback) {
+
+        // 매번 이벤트를 지우고 다시 생성할 필요가 없어서 초기화 코드는 지움. 
+        // this.destroy();
+        // this.initializeEvent();
+        // define colorpicker callback
+        this.colorpickerShowCallback = showCallback;
+        this.colorpickerHideCallback = hideCallback;    
+        this.colorpickerLastUpdateCallback = lastUpdateCallback;        
+        this.$root.css(this.getInitalizePosition()).show();
+
+
+        this.isColorPickerShow = true;
+        this.isShortCut = opt.isShortCut || false;
+        this.outputFormat = opt.outputFormat  
+
+        // define hide delay
+        this.hideDelay = +(typeof opt.hideDelay == 'undefined' ? 2000 : opt.hideDelay );
+        if (this.hideDelay > 0) {
+            this.setHideDelay(this.hideDelay);
+        }        
+        
+        this.$root.appendTo(this.$body);
+        this.definePosition(opt);
+        this.initColorWithoutChangeEvent(color);
+    }     
+
+    /**
+     * 
+     * initialize color for colorpicker
+     * 
+     * @param {String|Object} newColor 
+     * @param {String} format  hex, rgb, hsl
+     */
+    initColor(newColor, format) {
+        this.$store.dispatch('/changeColor', newColor, format);
+    }
+
+
+    /**
+     * hide colorpicker 
+     * 
+     */
+    hide() {
+        if (this.isColorPickerShow) {
+            // this.destroy();
+            this.$root.hide();
+            this.$root.remove();  // not empty 
+            this.isColorPickerShow = false;
+
+            this.callbackHideColorValue()
+        }
+    }
+
+    /**
+     * set to colors in current sets that you see 
+     * @param {Array} colors 
+     */
+    setColorsInPalette (colors = []) {
+        this.$store.dispatch('/setCurrentColorAll', colors);
+    }    
+
+    /**
+     * refresh all color palette 
+     * 
+     * @param {*} list 
+     */
+    setUserPalette (list = []) {
+        this.$store.dispatch('/setUserPalette', list);
+    }
+
+
+    /**
+     * private method 
+     */
+
+    getOption(key) {
+        return this.opt[key];
+    }
+
+    setOption (key, value) {
+        this.opt[key] = value; 
+    }
+
+    isType (key) {
+        return this.getOption('type') == key;
+    }
+
+    isPaletteType() {
+        return this.isType('palette');
+    }
+
+    isSketchType() {
+        return this.isType('sketch');
+    }
+
+    getContainer () {
+        return this.opt.container || document.body;
+    }
+
+    getColor(type) {
+        return this.$store.dispatch('/toColor', type);
+    }
+
+    definePositionForArrow(opt, elementScreenLeft, elementScreenTop) {
+        // console.log(arguments)
+    }
+
+    definePosition(opt) {
+
+        var width = this.$root.width();
+        var height = this.$root.height();
+
+        // set left position for color picker
+        var elementScreenLeft = opt.left - this.$body.scrollLeft();
+        if (width + elementScreenLeft > window.innerWidth) {
+            elementScreenLeft -= (width + elementScreenLeft) - window.innerWidth;
+        }
+        if (elementScreenLeft < 0) { elementScreenLeft = 0; }
+
+        // set top position for color picker
+        var elementScreenTop = opt.top - this.$body.scrollTop();
+        var elementScreenBottom = opt.bottom - this.$body.scrollTop();
+        if (height / 2 + elementScreenBottom > window.innerHeight) {
+            elementScreenTop = elementScreenTop - height + this.$body.scrollTop();
+        } else {
+            elementScreenTop = elementScreenBottom + this.$body.scrollTop() + 1;
+        }
+        if (elementScreenTop < 0) { elementScreenTop = 0; }
+
+        // set position
+        this.$root.css({
+            left: (elementScreenLeft) + 'px',
+            top: (elementScreenTop) + 'px'
+        });
+
+        // this.definePositionForArrow(opt, elementScreenLeft, elementScreenTop);
+    }
+
+    getInitalizePosition() {
+        if (this.opt.position == 'inline') {
+            return {
+                position: 'relative',
+                left: 'auto',
+                top: 'auto',
+                display: 'inline-block'
+            }
+        } else {
+           return {
+                position: 'absolute',  // color picker has fixed position
+                left: '-10000px',
+                top: '-10000px'
+            }
+        }
+    }
+
+    isAbsolute () {
+        return this.opt.position !== 'inline'
+    }
+
+    // Event Bindings 
+    'mouseup.isAbsolute document' (e) {
+
+        this.__isMouseDown = false; 
+        // when color picker clicked in outside
+        if (this.checkInHtml(e.target)) {
+            //this.setHideDelay(hideDelay);
+        } else if (this.checkColorPickerClass(e.target) == false) {
+            this.hide();
+        } else {
+            if (!this.__isMouseIn) {
+                clearTimeout(this.timerCloseColorPicker);
+                this.timerCloseColorPicker = setTimeout(this.hide.bind(this), this.delayTime || this.hideDelay);
+            }
+
+        }
+    }
+    
+    'keyup.isAbsolute.escape $root' (e) {
+        this.hide();
+    }
+
+    'mouseover.isAbsolute $root' (e) {
+        clearTimeout(this.timerCloseColorPicker);
+        // this.__isMouseDown = true; 
+    }
+
+    'mousemove.isAbsolute $root' (e) {
+        clearTimeout(this.timerCloseColorPicker)
+    }
+
+    'mouseenter.isAbsolute $root' (e) {
+        clearTimeout(this.timerCloseColorPicker);
+        this.__isMouseIn = true; 
+    }    
+
+    'mouseleave.isAbsolute $root' (e) {
+        this.__isMouseIn = false; 
+        if (!this.__isMouseDown) {
+            clearTimeout(this.timerCloseColorPicker);
+            this.timerCloseColorPicker = setTimeout(this.hide.bind(this), this.delayTime || this.hideDelay);
+        }
+    }
+
+    'mousedown.isAbsolute $root' (e) {
+        this.__isMouseDown = true; 
+    }
+    
+
+    setHideDelay(delayTime) {
+        this.delayTime = delayTime || 0;
+    }
+
+    runHideDelay () {
+
+        if (this.isColorPickerShow) {
+            this.setHideDelay();
+            // const hideCallback = this.setHideDelay(delayTime);
+            
+            // this.timerCloseColorPicker = setTimeout(hideCallback, delayTime);
+        }
+
+    }
+
+    callbackColorValue(color) {
+        color = color || this.getCurrentColor();
+
+        if (typeof this.opt.onChange == 'function') {
+            this.opt.onChange.call(this, color);
+        }
+
+        if (typeof this.colorpickerShowCallback == 'function') {
+            this.colorpickerShowCallback(color);
+        }        
+    }
+
+    callbackLastUpdateColorValue(color) {
+        color = color || this.getCurrentColor();
+
+        if (typeof this.opt.onLastUpdate == 'function') {
+            this.opt.onLastUpdate.call(this, color);
+        }
+
+        if (typeof this.colorpickerLastUpdateCallback == 'function') {
+            this.colorpickerLastUpdateCallback(color);
+        }                
+    }
+
+
+    callbackHideColorValue(color) {
+        color = color || this.getCurrentColor();
+        if (typeof this.opt.onHide == 'function') {
+            this.opt.onHide.call(this, color);
+        }
+
+        if (typeof this.colorpickerHideCallback == 'function') {
+            this.colorpickerHideCallback(color);
+        }        
+    }    
+
+    getCurrentColor() {
+        return this.$store.dispatch('/toColor', this.outputFormat);
+    }
+
+
+    checkColorPickerClass(el) {
+        var hasColorView = new Dom(el).closest('ace-colorview');
+        var hasColorPicker = new Dom(el).closest('ace-colorpicker');
+
+        return !!(hasColorPicker || hasColorView);
+    }
+
+    checkInHtml(el) {
+        var IsInHtml = el.nodeName == 'HTML';
+
+        return IsInHtml;
+    }
+
+    initializeStoreEvent () {
+        super.initializeStoreEvent()
+
+        this.$store.on('changeColor', this.callbackChange)
+        this.$store.on('lastUpdateColor', this.callbackLastUpdate)
+        this.$store.on('changeFormat', this.callbackChange)        
+    }
+ 
+    destroy() {
+        super.destroy();
+
+        this.$store.off('changeColor', this.callbackChange);
+        this.$store.off('lastUpdateColor', this.callbackLastUpdate)
+        this.$store.off('changeFormat', this.callbackChange);
+
+        this.callbackChange = undefined; 
+        this.callbackLastUpdate = undefined;
+
+        // remove color picker callback
+        this.colorpickerShowCallback = undefined;
+        this.colorpickerHideCallback = undefined;   
+    }
+
+
+    
+}

package/src/colorpicker/BaseModule.js

@@ -0,0 +1,19 @@
+export default class BaseModule {
+    constructor ($store) {
+        this.$store = $store;
+        this.initialize();
+    }
+
+    initialize() {
+        this.filterProps().forEach(key => {
+            this.$store.action(key, this);
+        });
+    }
+
+    filterProps (pattern = '/') {
+        return Object.getOwnPropertyNames(this.__proto__).filter(key => {
+            return key.startsWith(pattern);
+        });
+    }
+
+}

package/src/colorpicker/BaseSlider.js

@@ -0,0 +1,97 @@
+
+import Event from '../util/Event'
+import BaseBox from './BaseBox';
+
+export default class BaseSlider extends BaseBox {
+
+    constructor (opt) {
+        super(opt)
+
+        this.minValue = 0   // min domain value 
+        this.maxValue = 1   // max domain value 
+        this.source = 'base-slider'
+    }
+
+    /* slider container's min and max position */
+    getMinMaxPosition () {
+        var min = this.getMinPosition();
+        var width = this.getMaxDist()
+        var max = min + width;
+
+        return { min, max, width }
+    }
+
+    /** get current position on page  */
+    getCurrent (value) {
+        return min + this.getMaxDist() * value; 
+    }
+
+    /** get min position on slider container  */
+    getMinPosition () {
+        return this.refs.$container.offset().left;
+    }    
+
+    getMaxDist () {
+        return this.state.get('$container.width');
+    }
+
+    /** get dist for position value */
+    getDist (current) {
+        var {min, max} = this.getMinMaxPosition()
+
+        var dist; 
+        if (current < min) {
+            dist = 0;
+        } else if (current > max) {
+            dist = 100;
+        } else {
+            dist = (current - min) / (max - min) * 100;
+        }
+
+        return dist; 
+    }
+
+    /** get caculated dist for domain value   */
+    getCaculatedDist (e) {
+        var current = e ? this.getMousePosition(e) : this.getCurrent(this.getDefaultValue() / this.maxValue);
+        var dist = this.getDist(current);
+        
+        return dist; 
+    }
+
+    /** get default value used in slider container */
+    getDefaultValue () {
+        return 0
+    }
+
+    /** set mosue position */
+    setMousePosition (x) {
+        this.refs.$bar.css({ left : (x) + 'px' });
+    }
+
+    /** set mouse position in page */
+    getMousePosition (e) {
+        return Event.pos(e).pageX;
+    }    
+ 
+    refresh () {
+        this.setColorUI()
+    }
+
+    /** set drag bar position  */
+    setColorUI(v) {
+    
+        v = v || this.getDefaultValue(); 
+
+        if (v <= this.minValue) {
+            this.refs.$bar.addClass('first').removeClass('last')
+        } else if (v >= this.maxValue) {
+            this.refs.$bar.addClass('last').removeClass('first')
+        } else {
+            this.refs.$bar.removeClass('last').removeClass('first')
+        }
+
+        this.setMousePosition(this.getMaxDist() * ( (v || 0) / this.maxValue));
+    }    
+    
+}

package/src/colorpicker/BaseStore.js

@@ -0,0 +1,71 @@
+export default class BaseStore {
+    constructor (opt) {
+        this.callbacks = [] 
+        this.actions = []
+        this.modules = opt.modules || []
+
+        this.initialize()
+    }
+
+    initialize () {
+        this.initializeModule();
+    }
+
+    initializeModule () {
+        this.modules.forEach(Module => {
+            var instance = new Module(this);
+        })
+    }
+
+    action (action, context) {
+        this.actions[action] = { context, callback: context[action] };
+    }
+
+    dispatch (action) {
+        var args = [...arguments]; 
+        var action = args.shift();
+
+        var m = this.actions[action];
+
+        if (m) {
+            return m.callback.apply(m.context, [this, ...args]);
+        }
+    }
+
+    module (ModuleObject) {
+        // this.action()
+    }
+
+    on (event, callback) {
+        this.callbacks.push({ event, callback })
+    }
+
+    off (event, callback) {
+
+        if (arguments.length == 0) {
+            this.callbacks = [] 
+        } else if (arguments.length == 1) {
+            this.callbacks = this.callbacks.filter(f => {
+                return f.event != event 
+            })
+        } else if (arguments.length == 2) {
+            this.callbacks = this.callbacks.filter(f => {
+                return f.event != event && f.callback != callback 
+            })
+        }
+
+    }
+
+    emit () {
+        var args = [...arguments];
+        var event = args.shift();
+
+        this.callbacks.filter(f => {
+            return (f.event == event)
+        }).forEach(f => {
+            if (f && typeof f.callback == 'function') {
+                f.callback(...args);
+            }
+        })
+    }    
+}

package/src/colorpicker/UIElement.js

@@ -0,0 +1,46 @@
+import EventMachin from "../util/EventMachin";
+
+const CHECK_STORE_EVENT_PATTERN = /^@/
+
+class UIElement extends EventMachin {
+    constructor (opt) {
+        super(opt)
+
+        this.opt = opt || {};
+
+        if (opt && opt.$store) {
+            this.$store = opt.$store
+        }
+
+        this.initialize();
+
+        this.initializeStoreEvent();
+    }
+
+    /**
+     * initialize store event 
+     * 
+     * you can define '@xxx' method(event) in UIElement 
+     * 
+     * 
+     */
+    initializeStoreEvent () {
+        this.storeEvents = {}
+        this.filterProps(CHECK_STORE_EVENT_PATTERN).forEach((key) => {
+            const arr = key.split('@')
+            arr.shift();
+            const event = arr.join('@');
+
+            this.storeEvents[event] = this[key].bind(this)
+            this.$store.on(event, this.storeEvents[event]);
+        });
+    }
+
+    destoryStoreEvent () {
+        Object.keys(this.storeEvents).forEach(event => {
+            this.$store.off(event, this.storeEvents[event])
+        })
+    }
+}
+
+export default UIElement 

package/src/colorpicker/VerticalSlider.js

@@ -0,0 +1,57 @@
+import Event from '../util/Event'
+import BaseSlider from "./BaseSlider";
+
+export default class VerticalSlider extends BaseSlider {
+
+    constructor (opt) {
+        super(opt)
+
+        this.source = 'vertical-slider'
+    }
+
+    /** get max height for vertical slider */
+    getMaxDist () {
+        return this.state.get('$container.height');
+    }
+
+    /** set mouse pointer for vertical slider */
+    setMousePosition (y) {
+        this.refs.$bar.css({ top : (y) + 'px' });
+    }
+
+    /** get mouse position by pageY for vertical slider */    
+    getMousePosition (e) {
+        return Event.pos(e).pageY;
+    }       
+
+    /** get min position for vertial slider */
+    getMinPosition () {
+        return this.refs.$container.offset().top;
+    }
+
+    /** get caculated dist for domain value   */
+    getCaculatedDist (e) {
+        var current = e ? this.getMousePosition(e) : this.getCurrent(this.getDefaultValue() / this.maxValue);
+        var dist =  100 - this.getDist(current);
+        
+        return dist; 
+    }
+
+    /** set drag bar position  */
+    setColorUI(v) {
+        
+        v = v || this.getDefaultValue(); 
+
+        if (v <= this.minValue) {
+            this.refs.$bar.addClass('first').removeClass('last')
+        } else if (v >= this.maxValue) {
+            this.refs.$bar.addClass('last').removeClass('first')
+        } else {
+            this.refs.$bar.removeClass('last').removeClass('first')
+        }
+
+        var per = 1 - ( (v || 0) / this.maxValue);
+
+        this.setMousePosition(this.getMaxDist() * per );
+    }        
+}