Skip to content

Commit

Permalink
implement onLastUpdate
Browse files Browse the repository at this point in the history
  • Loading branch information
@easylogic
easylogic committed Nov 18, 2019
1 parent d552805 commit 3870d4e
Show file tree
Hide file tree
Showing 11 changed files with 188 additions and 193 deletions.
208 changes: 58 additions & 150 deletions addon/codemirror-colorpicker.js
View file

Large diffs are not rendered by default.

75 changes: 57 additions & 18 deletions dist/codemirror-colorpicker.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6995,8 +6995,13 @@ var BaseColorPicker = function (_UIElement) {
_this2.callbackColorValue();
};

this.callbackLastUpdate = function () {
_this2.callbackLastUpdateColorValue();
};

this.colorpickerShowCallback = function () {};
this.colorpickerHideCallback = function () {};
this.colorpickerLastUpdateCallback = function () {};

this.$body = new Dom(this.getContainer());
this.$root = new Dom('div', 'codemirror-colorpicker');
Expand Down Expand Up @@ -7057,14 +7062,15 @@ var BaseColorPicker = function (_UIElement) {

}, {
key: 'show',
value: function show(opt, color, showCallback, hideCallback) {
value: function 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;
Expand Down Expand Up @@ -7321,6 +7327,19 @@ var BaseColorPicker = function (_UIElement) {
this.colorpickerShowCallback(color);
}
}
}, {
key: 'callbackLastUpdateColorValue',
value: function 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);
}
}
}, {
key: 'callbackHideColorValue',
value: function callbackHideColorValue(color) {
Expand Down Expand Up @@ -7361,6 +7380,7 @@ var BaseColorPicker = function (_UIElement) {
get(BaseColorPicker.prototype.__proto__ || Object.getPrototypeOf(BaseColorPicker.prototype), 'initializeStoreEvent', this).call(this);

this.$store.on('changeColor', this.callbackChange);
this.$store.on('lastUpdateColor', this.callbackLastUpdate);
this.$store.on('changeFormat', this.callbackChange);
}
}, {
Expand All @@ -7369,9 +7389,11 @@ var BaseColorPicker = function (_UIElement) {
get(BaseColorPicker.prototype.__proto__ || Object.getPrototypeOf(BaseColorPicker.prototype), 'destroy', this).call(this);

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;
Expand Down Expand Up @@ -7474,7 +7496,10 @@ var BaseBox = function (_UIElement) {
}, {
key: 'onDragEnd',
value: function onDragEnd(e) {
this.isDown = false;
if (this.isDown) {
this.$store.emit('lastUpdateColor');
this.isDown = false;
}
}
}, {
key: '@changeColor',
Expand Down Expand Up @@ -8015,7 +8040,10 @@ var ColorWheel = function (_UIElement) {
}, {
key: 'mouseup document',
value: function mouseupDocument(e) {
this.isDown = false;
if (this.isDown) {
this.isDown = false;
this.$store.emit('lastUpdateColor');
}
}
}, {
key: 'mousemove document',
Expand All @@ -8039,7 +8067,10 @@ var ColorWheel = function (_UIElement) {
}, {
key: 'touchend document',
value: function touchendDocument(e) {
this.isDown = false;
if (this.isDown) {
this.isDown = false;
this.$store.emit('lastUpdateColor');
}
}
}, {
key: 'touchmove document',
Expand Down Expand Up @@ -8120,6 +8151,7 @@ var ColorInformation = function (_UIElement) {
this.format = next_format;

this.$store.dispatch('/changeFormat', this.format);
this.$store.emit('lastUpdateColor');
}
}, {
key: 'getFormat',
Expand All @@ -8129,12 +8161,19 @@ var ColorInformation = function (_UIElement) {
}, {
key: 'checkNumberKey',
value: function checkNumberKey(e) {
return Event.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;
}
}, {
key: 'checkNotNumberKey',
value: function checkNotNumberKey(e) {
return !Event.checkNumberKey(e);
return !this.checkNumberKey(e);
}
}, {
key: 'changeRgbColor',
Expand All @@ -8147,6 +8186,7 @@ var ColorInformation = function (_UIElement) {
a: this.refs.$rgb_a.float(),
source: source$2
});
this.$store.emit('lastUpdateColor');
}
}, {
key: 'changeHslColor',
Expand All @@ -8159,6 +8199,7 @@ var ColorInformation = function (_UIElement) {
a: this.refs.$hsl_a.float(),
source: source$2
});
this.$store.emit('lastUpdateColor');
}
}, {
key: '@changeColor',
Expand Down Expand Up @@ -8226,6 +8267,7 @@ var ColorInformation = function (_UIElement) {

if (code.charAt(0) == '#' && code.length == 7) {
this.$store.dispatch('/changeColor', code, source$2);
this.$store.emit('lastUpdateColor');
}
}
}, {
Expand Down Expand Up @@ -8433,6 +8475,7 @@ var CurrentColorSets = function (_UIElement) {
key: 'click $colorSetsColorList .color-item',
value: function click$colorSetsColorListColorItem(e) {
this.$store.dispatch('/changeColor', e.$delegateTarget.attr('data-color'));
this.$store.emit('lastUpdateColor');
}
}]);
return CurrentColorSets;
Expand Down Expand Up @@ -8726,7 +8769,10 @@ var ColorPalette = function (_UIElement) {
}, {
key: 'mouseup document',
value: function mouseupDocument(e) {
this.isDown = false;
if (this.isDown) {
this.isDown = false;
this.$store.emit('lastUpdateColor');
}
}
}, {
key: 'mousemove document',
Expand All @@ -8741,15 +8787,13 @@ var ColorPalette = function (_UIElement) {
this.isDown = true;
this.setMainColor(e);
}
}, {
key: 'mouseup',
value: function mouseup(e) {
this.isDown = false;
}
}, {
key: 'touchend document',
value: function touchendDocument(e) {
this.isDown = false;
if (this.isDown) {
this.isDown = false;
this.$store.emit('lastUpdateColor');
}
}
}, {
key: 'touchmove document',
Expand All @@ -8765,11 +8809,6 @@ var ColorPalette = function (_UIElement) {
this.isDown = true;
this.setMainColor(e);
}
}, {
key: 'touchend',
value: function touchend(e) {
this.isDown = false;
}
}]);
return ColorPalette;
}(UIElement);
Expand Down
2 changes: 1 addition & 1 deletion dist/codemirror-colorpicker.min.js
View file

Large diffs are not rendered by default.

5 changes: 4 additions & 1 deletion index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1154,10 +1154,13 @@ <h1 class="title">Default Html Sample </h1>
outputFormat: 'hex',
hideDelay: 0,
onHide: function (c) {
console.log('hide', c)
// console.log('hide', c)
},
onChange : function (c) {
console.log('change', c);
},
onLastUpdate : function (c) {
console.log('last update', c);
}
});
/*
Expand Down
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "codemirror-colorpicker",
"version": "1.9.52",
"version": "1.9.53",
"description": "simple colorpicker used anywhere",
"main": "./dist/codemirror-colorpicker.js",
"scripts": {
Expand Down
8 changes: 6 additions & 2 deletions src/colorpicker/BaseBox.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -68,15 +68,19 @@ export default class BaseBox extends UIElement {
this.refreshColorUI(e);
}

onDragMove (e) {
onDragMove (e) {
if (this.isDown) {
this.refreshColorUI(e);
}
}

/* called when mouse is ended move */
onDragEnd (e) {
this.isDown = false
if (this.isDown) {
this.$store.emit('lastUpdateColor');
this.isDown = false
}

}


Expand Down
28 changes: 25 additions & 3 deletions src/colorpicker/BaseColorPicker.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,8 +34,13 @@ export default class BaseColorPicker extends UIElement {
this.callbackColorValue()
}

this.callbackLastUpdate = () => {
this.callbackLastUpdateColorValue()
}

this.colorpickerShowCallback = function () { };
this.colorpickerHideCallback = function () { };
this.colorpickerHideCallback = function () { };
this.colorpickerLastUpdateCallback = function () { };


this.$body = new Dom(this.getContainer());
Expand Down Expand Up @@ -93,14 +98,15 @@ export default class BaseColorPicker extends UIElement {
* @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) {
show(opt, color, showCallback, hideCallback, lastUpdateCallback) {

// 매번 이벤트를 지우고 다시 생성할 필요가 없어서 초기화 코드는 지움.
// this.destroy();
// this.initializeEvent();
// define colorpicker callback
this.colorpickerShowCallback = showCallback;
this.colorpickerHideCallback = hideCallback;
this.colorpickerHideCallback = hideCallback;
this.colorpickerLastUpdateCallback = lastUpdateCallback;
this.$root.css(this.getInitalizePosition()).show();


Expand Down Expand Up @@ -321,6 +327,19 @@ export default class BaseColorPicker extends UIElement {
}
}

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') {
Expand Down Expand Up @@ -356,16 +375,19 @@ export default class BaseColorPicker extends UIElement {
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;
Expand Down
22 changes: 18 additions & 4 deletions src/colorpicker/ui/ColorInformation.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -95,18 +95,29 @@ export default class ColorInformation extends UIElement {
this.format = next_format;

this.$store.dispatch('/changeFormat', this.format);
this.$store.emit('lastUpdateColor')
}

getFormat () {
return this.format || 'hex';
}


checkNumberKey(e) {
return Event.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 !Event.checkNumberKey(e);
return !this.checkNumberKey(e);
}

changeRgbColor () {
Expand All @@ -118,6 +129,7 @@ export default class ColorInformation extends UIElement {
a : this.refs.$rgb_a.float(),
source
})
this.$store.emit('lastUpdateColor')
}

changeHslColor () {
Expand All @@ -128,7 +140,8 @@ export default class ColorInformation extends UIElement {
l : this.refs.$hsl_l.int(),
a : this.refs.$hsl_a.float(),
source
})
})
this.$store.emit('lastUpdateColor')
}

'@changeColor' (sourceType) {
Expand Down Expand Up @@ -160,6 +173,7 @@ export default class ColorInformation extends UIElement {

if(code.charAt(0) == '#' && code.length == 7) {
this.$store.dispatch('/changeColor', code, source)
this.$store.emit('lastUpdateColor')
}
}

Expand Down
Loading

0 comments on commit 3870d4e

Please sign in to comment.