Skip to content

Commit 72095bf

Browse files
bohnackerbohnacker
committed
added focus and blur events
1 parent 3986f9d commit 72095bf

File tree

9 files changed

+2479
-1749
lines changed

9 files changed

+2479
-1749
lines changed

‎README.md

+2
Original file line numberDiff line numberDiff line change
@@ -202,6 +202,8 @@ For each of them you can give a style string like `"width:80px; padding-right:10
202202
| dragend | (ev) => {} | Fires when dragging ends |
203203
| editstart | (ev) => {} | Fires when edit mode is started |
204204
| editend | (ev) => {} | Fires when edit mode is ended |
205+
| focus | (ev) => {} | Fires when the number spinner gets the focus |
206+
| blur | (ev) => {} | Fires when the number spinner loses the focus |
205207
| keydown | (ev) => {} | Original keydown event |
206208
| keypress | (ev) => {} | Original keypress event |
207209
| keyup | (ev) => {} | Original keyup event |

‎dist/index.js

+91-61
Original file line numberDiff line numberDiff line change
@@ -371,11 +371,11 @@
371371
attr(input0, "tabindex", "0");
372372
toggle_class(input0, "default", !/*$$props*/ ctx[24].class ? true : false);
373373
toggle_class(input0, "drag", true);
374-
toggle_class(input0, "dragging", /*dragging*/ ctx[4]);
375-
toggle_class(input0, "fast", /*stepFactor*/ ctx[5] > 1 ? "fast" : "");
376-
toggle_class(input0, "slow", /*stepFactor*/ ctx[5] < 1 ? "slow" : "");
377-
toggle_class(input0, "focus", /*dragFocussed*/ ctx[2]);
378-
toggle_class(input0, "inactive", /*editing*/ ctx[6]);
374+
toggle_class(input0, "dragging", /*dragging*/ ctx[6]);
375+
toggle_class(input0, "fast", /*stepFactor*/ ctx[7] > 1 ? "fast" : "");
376+
toggle_class(input0, "slow", /*stepFactor*/ ctx[7] < 1 ? "slow" : "");
377+
toggle_class(input0, "focus", /*dragFocussed*/ ctx[4]);
378+
toggle_class(input0, "inactive", /*editing*/ ctx[8]);
379379
attr(input1, "style", /*style*/ ctx[10]);
380380
attr(input1, "class", input1_class_value = "" + (null_to_empty(/*$$props*/ ctx[24].class) + " svelte-xg45mw"));
381381
attr(input1, "type", "text");
@@ -386,38 +386,38 @@
386386

387387
toggle_class(input1, "default", !/*$$props*/ ctx[24].class ? true : false);
388388
toggle_class(input1, "edit", true);
389-
toggle_class(input1, "editing", /*editing*/ ctx[6]);
390-
toggle_class(input1, "focus", /*editFocussed*/ ctx[3]);
391-
toggle_class(input1, "inactive", !/*editing*/ ctx[6]);
389+
toggle_class(input1, "editing", /*editing*/ ctx[8]);
390+
toggle_class(input1, "focus", /*editFocussed*/ ctx[5]);
391+
toggle_class(input1, "inactive", !/*editing*/ ctx[8]);
392392
},
393393
m(target, anchor) {
394394
insert(target, input0, anchor);
395395
/*input0_binding*/ ctx[57](input0);
396-
set_input_value(input0, /*visibleValue*/ ctx[7]);
396+
set_input_value(input0, /*visibleValue*/ ctx[9]);
397397
insert(target, t, anchor);
398398
insert(target, input1, anchor);
399399
/*input1_binding*/ ctx[59](input1);
400-
set_input_value(input1, /*visibleValue*/ ctx[7]);
400+
set_input_value(input1, /*visibleValue*/ ctx[9]);
401401

402402
if (!mounted) {
403403
dispose = [
404404
listen(window, "mousemove", function () {
405-
if (is_function(/*dragging*/ ctx[4] ? /*dragmoveHandler*/ ctx[14] : "")) (/*dragging*/ ctx[4] ? /*dragmoveHandler*/ ctx[14] : "").apply(this, arguments);
405+
if (is_function(/*dragging*/ ctx[6] ? /*dragmoveHandler*/ ctx[14] : "")) (/*dragging*/ ctx[6] ? /*dragmoveHandler*/ ctx[14] : "").apply(this, arguments);
406406
}),
407407
listen(window, "touchmove", function () {
408-
if (is_function(/*dragging*/ ctx[4] ? /*touchmoveHandler*/ ctx[13] : "")) (/*dragging*/ ctx[4] ? /*touchmoveHandler*/ ctx[13] : "").apply(this, arguments);
408+
if (is_function(/*dragging*/ ctx[6] ? /*touchmoveHandler*/ ctx[13] : "")) (/*dragging*/ ctx[6] ? /*touchmoveHandler*/ ctx[13] : "").apply(this, arguments);
409409
}),
410410
listen(window, "mouseup", stop_propagation(function () {
411-
if (is_function(/*dragging*/ ctx[4]
411+
if (is_function(/*dragging*/ ctx[6]
412412
? /*mouseupHandler*/ ctx[16]
413-
: /*editBlurHandler*/ ctx[20])) (/*dragging*/ ctx[4]
413+
: /*editBlurHandler*/ ctx[20])) (/*dragging*/ ctx[6]
414414
? /*mouseupHandler*/ ctx[16]
415415
: /*editBlurHandler*/ ctx[20]).apply(this, arguments);
416416
})),
417417
listen(window, "touchend", stop_propagation(function () {
418-
if (is_function(/*dragging*/ ctx[4]
418+
if (is_function(/*dragging*/ ctx[6]
419419
? /*touchendHandler*/ ctx[15]
420-
: /*editBlurHandler*/ ctx[20])) (/*dragging*/ ctx[4]
420+
: /*editBlurHandler*/ ctx[20])) (/*dragging*/ ctx[6]
421421
? /*touchendHandler*/ ctx[15]
422422
: /*editBlurHandler*/ ctx[20]).apply(this, arguments);
423423
})),
@@ -457,8 +457,8 @@
457457
attr(input0, "class", input0_class_value);
458458
}
459459

460-
if (dirty[0] & /*visibleValue*/ 128 && input0.value !== /*visibleValue*/ ctx[7]) {
461-
set_input_value(input0, /*visibleValue*/ ctx[7]);
460+
if (dirty[0] & /*visibleValue*/ 512 && input0.value !== /*visibleValue*/ ctx[9]) {
461+
set_input_value(input0, /*visibleValue*/ ctx[9]);
462462
}
463463

464464
if (dirty[0] & /*$$props, $$props*/ 16777216) {
@@ -469,24 +469,24 @@
469469
toggle_class(input0, "drag", true);
470470
}
471471

472-
if (dirty[0] & /*$$props, dragging*/ 16777232) {
473-
toggle_class(input0, "dragging", /*dragging*/ ctx[4]);
472+
if (dirty[0] & /*$$props, dragging*/ 16777280) {
473+
toggle_class(input0, "dragging", /*dragging*/ ctx[6]);
474474
}
475475

476-
if (dirty[0] & /*$$props, stepFactor*/ 16777248) {
477-
toggle_class(input0, "fast", /*stepFactor*/ ctx[5] > 1 ? "fast" : "");
476+
if (dirty[0] & /*$$props, stepFactor*/ 16777344) {
477+
toggle_class(input0, "fast", /*stepFactor*/ ctx[7] > 1 ? "fast" : "");
478478
}
479479

480-
if (dirty[0] & /*$$props, stepFactor*/ 16777248) {
481-
toggle_class(input0, "slow", /*stepFactor*/ ctx[5] < 1 ? "slow" : "");
480+
if (dirty[0] & /*$$props, stepFactor*/ 16777344) {
481+
toggle_class(input0, "slow", /*stepFactor*/ ctx[7] < 1 ? "slow" : "");
482482
}
483483

484-
if (dirty[0] & /*$$props, dragFocussed*/ 16777220) {
485-
toggle_class(input0, "focus", /*dragFocussed*/ ctx[2]);
484+
if (dirty[0] & /*$$props, dragFocussed*/ 16777232) {
485+
toggle_class(input0, "focus", /*dragFocussed*/ ctx[4]);
486486
}
487487

488-
if (dirty[0] & /*$$props, editing*/ 16777280) {
489-
toggle_class(input0, "inactive", /*editing*/ ctx[6]);
488+
if (dirty[0] & /*$$props, editing*/ 16777472) {
489+
toggle_class(input0, "inactive", /*editing*/ ctx[8]);
490490
}
491491

492492
if (dirty[0] & /*style*/ 1024) {
@@ -503,8 +503,8 @@
503503
attr(input1, "inputmode", input1_inputmode_value);
504504
}
505505

506-
if (dirty[0] & /*visibleValue*/ 128 && input1.value !== /*visibleValue*/ ctx[7]) {
507-
set_input_value(input1, /*visibleValue*/ ctx[7]);
506+
if (dirty[0] & /*visibleValue*/ 512 && input1.value !== /*visibleValue*/ ctx[9]) {
507+
set_input_value(input1, /*visibleValue*/ ctx[9]);
508508
}
509509

510510
if (dirty[0] & /*$$props, $$props*/ 16777216) {
@@ -515,16 +515,16 @@
515515
toggle_class(input1, "edit", true);
516516
}
517517

518-
if (dirty[0] & /*$$props, editing*/ 16777280) {
519-
toggle_class(input1, "editing", /*editing*/ ctx[6]);
518+
if (dirty[0] & /*$$props, editing*/ 16777472) {
519+
toggle_class(input1, "editing", /*editing*/ ctx[8]);
520520
}
521521

522-
if (dirty[0] & /*$$props, editFocussed*/ 16777224) {
523-
toggle_class(input1, "focus", /*editFocussed*/ ctx[3]);
522+
if (dirty[0] & /*$$props, editFocussed*/ 16777248) {
523+
toggle_class(input1, "focus", /*editFocussed*/ ctx[5]);
524524
}
525525

526-
if (dirty[0] & /*$$props, editing*/ 16777280) {
527-
toggle_class(input1, "inactive", !/*editing*/ ctx[6]);
526+
if (dirty[0] & /*$$props, editing*/ 16777472) {
527+
toggle_class(input1, "inactive", !/*editing*/ ctx[8]);
528528
}
529529
},
530530
i: noop,
@@ -600,6 +600,7 @@
600600
let dragElement, editElement;
601601
let dragFocussed = false;
602602
let editFocussed = false;
603+
let focussed = false;
603604
let dragging = false;
604605
let wasActiveOnClick, hasMoved, clickX, clickY;
605606
let stepFactor = 1;
@@ -628,12 +629,12 @@
628629
function dragstartHandler(ev) {
629630
dispatch("consoleLog", ev.type);
630631
wasActiveOnClick = document.activeElement === dragElement;
631-
$$invalidate(4, dragging = true);
632+
$$invalidate(6, dragging = true);
632633
dragElement.focus();
633634
hasMoved = false;
634635
clickX = isTouchDevice ? ev.touches[0].clientX : ev.clientX;
635636
clickY = isTouchDevice ? ev.touches[0].clientY : ev.clientY;
636-
$$invalidate(4, dragging = true);
637+
$$invalidate(6, dragging = true);
637638
updateValues(value);
638639
}
639640

@@ -677,7 +678,7 @@
677678
dispatch("dragend");
678679
}
679680

680-
$$invalidate(4, dragging = false);
681+
$$invalidate(6, dragging = false);
681682

682683
// start editing only if element was already focussed on mousedown and no dragging was done
683684
if (wasActiveOnClick && !hasMoved) {
@@ -687,21 +688,26 @@
687688

688689
function dragFocusHandler(ev) {
689690
dispatch("consoleLog", ev.type);
690-
$$invalidate(2, dragFocussed = true);
691+
$$invalidate(4, dragFocussed = true);
692+
updateFocussed();
691693
}
692694

693695
function dragBlurHandler(ev) {
694696
dispatch("consoleLog", ev.type);
695-
$$invalidate(2, dragFocussed = false);
697+
$$invalidate(4, dragFocussed = false);
698+
updateFocussed();
696699
}
697700

698701
function editFocusHandler(ev) {
699702
dispatch("consoleLog", ev.type);
700-
$$invalidate(3, editFocussed = true);
703+
$$invalidate(5, editFocussed = true);
704+
updateFocussed();
701705
}
702706

703707
function editBlurHandler(ev) {
704708
dispatch("consoleLog", ev.type);
709+
$$invalidate(5, editFocussed = false);
710+
updateFocussed();
705711
stopEditing();
706712
}
707713

@@ -769,8 +775,26 @@
769775
}
770776
}
771777

778+
async function updateFocussed() {
779+
await tick();
780+
781+
if (document.activeElement == dragElement || document.activeElement == editElement) {
782+
if (!focussed) {
783+
focussed = true;
784+
dispatch("focus");
785+
console.log("Focus");
786+
}
787+
} else {
788+
if (focussed) {
789+
focussed = false;
790+
dispatch("blur");
791+
console.log("Blur");
792+
}
793+
}
794+
}
795+
772796
async function startEditing() {
773-
$$invalidate(6, editing = true);
797+
$$invalidate(8, editing = true);
774798

775799
//preciseValue = parseFloat(visibleValue);
776800
await tick();
@@ -782,8 +806,7 @@
782806

783807
function stopEditing() {
784808
if (editing) {
785-
$$invalidate(3, editFocussed = false);
786-
$$invalidate(6, editing = false);
809+
$$invalidate(8, editing = false);
787810

788811
if (parse) {
789812
preciseValue = parse(visibleValue);
@@ -826,12 +849,12 @@
826849
function updateValues(val) {
827850
preciseValue = parseFloat(val);
828851
preciseValue = keepInRange(preciseValue);
829-
$$invalidate(7, visibleValue = Math.round((preciseValue - min) / step) * step + min);
852+
$$invalidate(9, visibleValue = Math.round((preciseValue - min) / step) * step + min);
830853

831854
if (format) {
832-
$$invalidate(7, visibleValue = format(visibleValue));
855+
$$invalidate(9, visibleValue = format(visibleValue));
833856
} else {
834-
$$invalidate(7, visibleValue = visibleValue.toFixed(decimals));
857+
$$invalidate(9, visibleValue = visibleValue.toFixed(decimals));
835858
}
836859

837860
$$invalidate(25, value = roundToPrecision(preciseValue));
@@ -901,25 +924,25 @@
901924
function input0_binding($$value) {
902925
binding_callbacks[$$value ? "unshift" : "push"](() => {
903926
dragElement = $$value;
904-
$$invalidate(8, dragElement);
927+
$$invalidate(2, dragElement);
905928
});
906929
}
907930

908931
function input0_input_handler() {
909932
visibleValue = this.value;
910-
$$invalidate(7, visibleValue);
933+
$$invalidate(9, visibleValue);
911934
}
912935

913936
function input1_binding($$value) {
914937
binding_callbacks[$$value ? "unshift" : "push"](() => {
915938
editElement = $$value;
916-
$$invalidate(9, editElement);
939+
$$invalidate(3, editElement);
917940
});
918941
}
919942

920943
function input1_input_handler() {
921944
visibleValue = this.value;
922-
$$invalidate(7, visibleValue);
945+
$$invalidate(9, visibleValue);
923946
}
924947

925948
$$self.$$set = $$new_props => {
@@ -950,30 +973,37 @@
950973
};
951974

952975
$$self.$$.update = () => {
953-
if ($$self.$$.dirty[0] & /*editing, dragging, value*/ 33554512) {
976+
if ($$self.$$.dirty[0] & /*dragElement, editElement*/ 12) {
954977
// updaters --------------------------------
978+
// this will init focussed variable
979+
if (dragElement && editElement) {
980+
updateFocussed();
981+
}
982+
}
983+
984+
if ($$self.$$.dirty[0] & /*editing, dragging, value*/ 33554752) {
955985
{
956986
if (!editing && !dragging) {
957987
updateValues(value);
958988
}
959989
}
960990
}
961991

962-
if ($$self.$$.dirty[0] & /*dragFocussed, editing*/ 68 | $$self.$$.dirty[1] & /*altPressed, shiftPressed*/ 98304) {
992+
if ($$self.$$.dirty[0] & /*dragFocussed, editing*/ 272 | $$self.$$.dirty[1] & /*altPressed, shiftPressed*/ 98304) {
963993
{
964-
$$invalidate(5, stepFactor = 1);
994+
$$invalidate(7, stepFactor = 1);
965995

966996
if (dragFocussed && !editing) {
967997
if (altPressed && shiftPressed) {
968-
$$invalidate(5, stepFactor = 10);
998+
$$invalidate(7, stepFactor = 10);
969999
} else if (altPressed) {
970-
$$invalidate(5, stepFactor = 0.1);
1000+
$$invalidate(7, stepFactor = 0.1);
9711001
}
9721002
}
9731003
}
9741004
}
9751005

976-
if ($$self.$$.dirty[0] & /*dragging*/ 16 | $$self.$$.dirty[1] & /*horizontal, vertical, htmlNode, cursor, defaultCursor, htmlNodeOriginalCursor*/ 933984) {
1006+
if ($$self.$$.dirty[0] & /*dragging*/ 64 | $$self.$$.dirty[1] & /*horizontal, vertical, htmlNode, cursor, defaultCursor, htmlNodeOriginalCursor*/ 933984) {
9771007
{
9781008
// let cursorClass = horizontal
9791009
// ? vertical
@@ -994,7 +1024,7 @@
9941024
}
9951025
}
9961026

997-
if ($$self.$$.dirty[0] & /*style, dragFocussed, editFocussed, editing, stepFactor, dragging*/ 1148 | $$self.$$.dirty[1] & /*mainStyle, focusStyle, fastStyle, slowStyle, draggingStyle, editingStyle, cursor, defaultCursor*/ 556800) {
1027+
if ($$self.$$.dirty[0] & /*style, dragFocussed, editFocussed, editing, stepFactor, dragging*/ 1520 | $$self.$$.dirty[1] & /*mainStyle, focusStyle, fastStyle, slowStyle, draggingStyle, editingStyle, cursor, defaultCursor*/ 556800) {
9981028
{
9991029
$$invalidate(10, style = mainStyle ?? "");
10001030

@@ -1022,14 +1052,14 @@
10221052
return [
10231053
min,
10241054
step,
1055+
dragElement,
1056+
editElement,
10251057
dragFocussed,
10261058
editFocussed,
10271059
dragging,
10281060
stepFactor,
10291061
editing,
10301062
visibleValue,
1031-
dragElement,
1032-
editElement,
10331063
style,
10341064
touchstartHandler,
10351065
dragstartHandler,

0 commit comments

Comments
 (0)