Skip to content

Commit 3870d4e

Browse files
easylogiceasylogic
committed
implement onLastUpdate
1 parent d552805 commit 3870d4e

File tree

11 files changed

+188
-193
lines changed

11 files changed

+188
-193
lines changed

‎addon/codemirror-colorpicker.js‎

Lines changed: 58 additions & 150 deletions
Large diffs are not rendered by default.

‎dist/codemirror-colorpicker.js‎

Lines changed: 57 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -6995,8 +6995,13 @@ var BaseColorPicker = function (_UIElement) {
69956995
_this2.callbackColorValue();
69966996
};
69976997

6998+
this.callbackLastUpdate = function () {
6999+
_this2.callbackLastUpdateColorValue();
7000+
};
7001+
69987002
this.colorpickerShowCallback = function () {};
69997003
this.colorpickerHideCallback = function () {};
7004+
this.colorpickerLastUpdateCallback = function () {};
70007005

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

70587063
}, {
70597064
key: 'show',
7060-
value: function show(opt, color, showCallback, hideCallback) {
7065+
value: function show(opt, color, showCallback, hideCallback, lastUpdateCallback) {
70617066

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

70707076
this.isColorPickerShow = true;
@@ -7321,6 +7327,19 @@ var BaseColorPicker = function (_UIElement) {
73217327
this.colorpickerShowCallback(color);
73227328
}
73237329
}
7330+
}, {
7331+
key: 'callbackLastUpdateColorValue',
7332+
value: function callbackLastUpdateColorValue(color) {
7333+
color = color || this.getCurrentColor();
7334+
7335+
if (typeof this.opt.onLastUpdate == 'function') {
7336+
this.opt.onLastUpdate.call(this, color);
7337+
}
7338+
7339+
if (typeof this.colorpickerLastUpdateCallback == 'function') {
7340+
this.colorpickerLastUpdateCallback(color);
7341+
}
7342+
}
73247343
}, {
73257344
key: 'callbackHideColorValue',
73267345
value: function callbackHideColorValue(color) {
@@ -7361,6 +7380,7 @@ var BaseColorPicker = function (_UIElement) {
73617380
get(BaseColorPicker.prototype.__proto__ || Object.getPrototypeOf(BaseColorPicker.prototype), 'initializeStoreEvent', this).call(this);
73627381

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

73717391
this.$store.off('changeColor', this.callbackChange);
7392+
this.$store.off('lastUpdateColor', this.callbackLastUpdate);
73727393
this.$store.off('changeFormat', this.callbackChange);
73737394

73747395
this.callbackChange = undefined;
7396+
this.callbackLastUpdate = undefined;
73757397

73767398
// remove color picker callback
73777399
this.colorpickerShowCallback = undefined;
@@ -7474,7 +7496,10 @@ var BaseBox = function (_UIElement) {
74747496
}, {
74757497
key: 'onDragEnd',
74767498
value: function onDragEnd(e) {
7477-
this.isDown = false;
7499+
if (this.isDown) {
7500+
this.$store.emit('lastUpdateColor');
7501+
this.isDown = false;
7502+
}
74787503
}
74797504
}, {
74807505
key: '@changeColor',
@@ -8015,7 +8040,10 @@ var ColorWheel = function (_UIElement) {
80158040
}, {
80168041
key: 'mouseup document',
80178042
value: function mouseupDocument(e) {
8018-
this.isDown = false;
8043+
if (this.isDown) {
8044+
this.isDown = false;
8045+
this.$store.emit('lastUpdateColor');
8046+
}
80198047
}
80208048
}, {
80218049
key: 'mousemove document',
@@ -8039,7 +8067,10 @@ var ColorWheel = function (_UIElement) {
80398067
}, {
80408068
key: 'touchend document',
80418069
value: function touchendDocument(e) {
8042-
this.isDown = false;
8070+
if (this.isDown) {
8071+
this.isDown = false;
8072+
this.$store.emit('lastUpdateColor');
8073+
}
80438074
}
80448075
}, {
80458076
key: 'touchmove document',
@@ -8120,6 +8151,7 @@ var ColorInformation = function (_UIElement) {
81208151
this.format = next_format;
81218152

81228153
this.$store.dispatch('/changeFormat', this.format);
8154+
this.$store.emit('lastUpdateColor');
81238155
}
81248156
}, {
81258157
key: 'getFormat',
@@ -8129,12 +8161,19 @@ var ColorInformation = function (_UIElement) {
81298161
}, {
81308162
key: 'checkNumberKey',
81318163
value: function checkNumberKey(e) {
8132-
return Event.checkNumberKey(e);
8164+
var code = e.which,
8165+
isExcept = false;
8166+
8167+
if (code == 37 || code == 39 || code == 8 || code == 46 || code == 9) isExcept = true;
8168+
8169+
if (!isExcept && (code < 48 || code > 57)) return false;
8170+
8171+
return true;
81338172
}
81348173
}, {
81358174
key: 'checkNotNumberKey',
81368175
value: function checkNotNumberKey(e) {
8137-
return !Event.checkNumberKey(e);
8176+
return !this.checkNumberKey(e);
81388177
}
81398178
}, {
81408179
key: 'changeRgbColor',
@@ -8147,6 +8186,7 @@ var ColorInformation = function (_UIElement) {
81478186
a: this.refs.$rgb_a.float(),
81488187
source: source$2
81498188
});
8189+
this.$store.emit('lastUpdateColor');
81508190
}
81518191
}, {
81528192
key: 'changeHslColor',
@@ -8159,6 +8199,7 @@ var ColorInformation = function (_UIElement) {
81598199
a: this.refs.$hsl_a.float(),
81608200
source: source$2
81618201
});
8202+
this.$store.emit('lastUpdateColor');
81628203
}
81638204
}, {
81648205
key: '@changeColor',
@@ -8226,6 +8267,7 @@ var ColorInformation = function (_UIElement) {
82268267

82278268
if (code.charAt(0) == '#' && code.length == 7) {
82288269
this.$store.dispatch('/changeColor', code, source$2);
8270+
this.$store.emit('lastUpdateColor');
82298271
}
82308272
}
82318273
}, {
@@ -8433,6 +8475,7 @@ var CurrentColorSets = function (_UIElement) {
84338475
key: 'click $colorSetsColorList .color-item',
84348476
value: function click$colorSetsColorListColorItem(e) {
84358477
this.$store.dispatch('/changeColor', e.$delegateTarget.attr('data-color'));
8478+
this.$store.emit('lastUpdateColor');
84368479
}
84378480
}]);
84388481
return CurrentColorSets;
@@ -8726,7 +8769,10 @@ var ColorPalette = function (_UIElement) {
87268769
}, {
87278770
key: 'mouseup document',
87288771
value: function mouseupDocument(e) {
8729-
this.isDown = false;
8772+
if (this.isDown) {
8773+
this.isDown = false;
8774+
this.$store.emit('lastUpdateColor');
8775+
}
87308776
}
87318777
}, {
87328778
key: 'mousemove document',
@@ -8741,15 +8787,13 @@ var ColorPalette = function (_UIElement) {
87418787
this.isDown = true;
87428788
this.setMainColor(e);
87438789
}
8744-
}, {
8745-
key: 'mouseup',
8746-
value: function mouseup(e) {
8747-
this.isDown = false;
8748-
}
87498790
}, {
87508791
key: 'touchend document',
87518792
value: function touchendDocument(e) {
8752-
this.isDown = false;
8793+
if (this.isDown) {
8794+
this.isDown = false;
8795+
this.$store.emit('lastUpdateColor');
8796+
}
87538797
}
87548798
}, {
87558799
key: 'touchmove document',
@@ -8765,11 +8809,6 @@ var ColorPalette = function (_UIElement) {
87658809
this.isDown = true;
87668810
this.setMainColor(e);
87678811
}
8768-
}, {
8769-
key: 'touchend',
8770-
value: function touchend(e) {
8771-
this.isDown = false;
8772-
}
87738812
}]);
87748813
return ColorPalette;
87758814
}(UIElement);

‎dist/codemirror-colorpicker.min.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎index.html‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1154,10 +1154,13 @@ <h1 class="title">Default Html Sample </h1>
11541154
outputFormat: 'hex',
11551155
hideDelay: 0,
11561156
onHide: function (c) {
1157-
console.log('hide', c)
1157+
// console.log('hide', c)
11581158
},
11591159
onChange : function (c) {
11601160
console.log('change', c);
1161+
},
1162+
onLastUpdate : function (c) {
1163+
console.log('last update', c);
11611164
}
11621165
});
11631166
/*

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "codemirror-colorpicker",
3-
"version": "1.9.52",
3+
"version": "1.9.53",
44
"description": "simple colorpicker used anywhere",
55
"main": "./dist/codemirror-colorpicker.js",
66
"scripts": {

‎src/colorpicker/BaseBox.js‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -68,15 +68,19 @@ export default class BaseBox extends UIElement {
6868
this.refreshColorUI(e);
6969
}
7070

71-
onDragMove (e) {
71+
onDragMove (e) {
7272
if (this.isDown) {
7373
this.refreshColorUI(e);
7474
}
7575
}
7676

7777
/* called when mouse is ended move */
7878
onDragEnd (e) {
79-
this.isDown = false
79+
if (this.isDown) {
80+
this.$store.emit('lastUpdateColor');
81+
this.isDown = false
82+
}
83+
8084
}
8185

8286

‎src/colorpicker/BaseColorPicker.js‎

Lines changed: 25 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -34,8 +34,13 @@ export default class BaseColorPicker extends UIElement {
3434
this.callbackColorValue()
3535
}
3636

37+
this.callbackLastUpdate = () => {
38+
this.callbackLastUpdateColorValue()
39+
}
40+
3741
this.colorpickerShowCallback = function () { };
38-
this.colorpickerHideCallback = function () { };
42+
this.colorpickerHideCallback = function () { };
43+
this.colorpickerLastUpdateCallback = function () { };
3944

4045

4146
this.$body = new Dom(this.getContainer());
@@ -93,14 +98,15 @@ export default class BaseColorPicker extends UIElement {
9398
* @param {Function} showCallback it is called when colorpicker is shown
9499
* @param {Function} hideCallback it is called once when colorpicker is hidden
95100
*/
96-
show(opt, color, showCallback, hideCallback) {
101+
show(opt, color, showCallback, hideCallback, lastUpdateCallback) {
97102

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

106112

@@ -321,6 +327,19 @@ export default class BaseColorPicker extends UIElement {
321327
}
322328
}
323329

330+
callbackLastUpdateColorValue(color) {
331+
color = color || this.getCurrentColor();
332+
333+
if (typeof this.opt.onLastUpdate == 'function') {
334+
this.opt.onLastUpdate.call(this, color);
335+
}
336+
337+
if (typeof this.colorpickerLastUpdateCallback == 'function') {
338+
this.colorpickerLastUpdateCallback(color);
339+
}
340+
}
341+
342+
324343
callbackHideColorValue(color) {
325344
color = color || this.getCurrentColor();
326345
if (typeof this.opt.onHide == 'function') {
@@ -356,16 +375,19 @@ export default class BaseColorPicker extends UIElement {
356375
super.initializeStoreEvent()
357376

358377
this.$store.on('changeColor', this.callbackChange)
378+
this.$store.on('lastUpdateColor', this.callbackLastUpdate)
359379
this.$store.on('changeFormat', this.callbackChange)
360380
}
361381

362382
destroy() {
363383
super.destroy();
364384

365385
this.$store.off('changeColor', this.callbackChange);
386+
this.$store.off('lastUpdateColor', this.callbackLastUpdate)
366387
this.$store.off('changeFormat', this.callbackChange);
367388

368389
this.callbackChange = undefined;
390+
this.callbackLastUpdate = undefined;
369391

370392
// remove color picker callback
371393
this.colorpickerShowCallback = undefined;

‎src/colorpicker/ui/ColorInformation.js‎

Lines changed: 18 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -95,18 +95,29 @@ export default class ColorInformation extends UIElement {
9595
this.format = next_format;
9696

9797
this.$store.dispatch('/changeFormat', this.format);
98+
this.$store.emit('lastUpdateColor')
9899
}
99100

100101
getFormat () {
101102
return this.format || 'hex';
102103
}
103104

105+
104106
checkNumberKey(e) {
105-
return Event.checkNumberKey(e);
106-
}
107+
var code = e.which,
108+
isExcept = false;
109+
110+
if(code == 37 || code == 39 || code == 8 || code == 46 || code == 9)
111+
isExcept = true;
112+
113+
if(!isExcept && (code < 48 || code > 57))
114+
return false;
115+
116+
return true;
117+
}
107118

108119
checkNotNumberKey(e) {
109-
return !Event.checkNumberKey(e);
120+
return !this.checkNumberKey(e);
110121
}
111122

112123
changeRgbColor () {
@@ -118,6 +129,7 @@ export default class ColorInformation extends UIElement {
118129
a : this.refs.$rgb_a.float(),
119130
source
120131
})
132+
this.$store.emit('lastUpdateColor')
121133
}
122134

123135
changeHslColor () {
@@ -128,7 +140,8 @@ export default class ColorInformation extends UIElement {
128140
l : this.refs.$hsl_l.int(),
129141
a : this.refs.$hsl_a.float(),
130142
source
131-
})
143+
})
144+
this.$store.emit('lastUpdateColor')
132145
}
133146

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

161174
if(code.charAt(0) == '#' && code.length == 7) {
162175
this.$store.dispatch('/changeColor', code, source)
176+
this.$store.emit('lastUpdateColor')
163177
}
164178
}
165179

0 commit comments

Comments
 (0)