summaryrefslogtreecommitdiffstats
path: root/toolkit/content
diff options
context:
space:
mode:
Diffstat (limited to 'toolkit/content')
-rw-r--r--toolkit/content/datepicker.xhtml8
-rw-r--r--toolkit/content/widgets/datepicker.js19
-rw-r--r--toolkit/content/widgets/spinner.js9
-rw-r--r--toolkit/content/widgets/timepicker.js7
4 files changed, 31 insertions, 12 deletions
diff --git a/toolkit/content/datepicker.xhtml b/toolkit/content/datepicker.xhtml
index abc7db303..d79b53102 100644
--- a/toolkit/content/datepicker.xhtml
+++ b/toolkit/content/datepicker.xhtml
@@ -16,8 +16,8 @@
<div id="date-picker">
<div class="calendar-container">
<div class="nav">
- <button class="left">&lt;</button>
- <button class="right">&gt;</button>
+ <button class="left"/>
+ <button class="right"/>
</div>
<div class="week-header"></div>
<div class="days-viewport">
@@ -25,8 +25,8 @@
</div>
</div>
<div class="month-year">
- <div class="month-year-label"></div>
- <div class="month-year-arrow"></div>
+ <div class="month-year-container">
+ <button class="month-year"/>
</div>
<div class="month-year-view"></div>
</div>
diff --git a/toolkit/content/widgets/datepicker.js b/toolkit/content/widgets/datepicker.js
index d3f0fd1a4..7453b67eb 100644
--- a/toolkit/content/widgets/datepicker.js
+++ b/toolkit/content/widgets/datepicker.js
@@ -174,7 +174,8 @@ function DatePicker(context) {
*/
_attachEventListeners() {
window.addEventListener("message", this);
- document.addEventListener("click", this);
+ document.addEventListener("mouseup", this, { passive: true });
+ document.addEventListener("mousedown", this);
},
/**
@@ -188,16 +189,28 @@ function DatePicker(context) {
this.handleMessage(event);
break;
}
- case "click": {
+ case "mousedown": {
+ // Use preventDefault to keep focus on input boxes
+ event.preventDefault();
+ event.target.setCapture();
+
if (event.target == this.context.buttonLeft) {
+ event.target.classList.add("active");
this.state.dateKeeper.setMonthByOffset(-1);
this._update();
} else if (event.target == this.context.buttonRight) {
+ event.target.classList.add("active");
this.state.dateKeeper.setMonthByOffset(1);
this._update();
}
break;
}
+ case "mouseup": {
+ if (event.target == this.context.buttonLeft || event.target == this.context.buttonRight) {
+ event.target.classList.remove("active");
+ }
+
+ }
}
},
@@ -307,6 +320,7 @@ function DatePicker(context) {
this.context.monthYear.textContent = this.state.dateFormat(props.dateObj);
if (props.isVisible) {
+ this.context.monthYear.classList.add("active");
this.components.month.setState({
value: props.month,
items: props.months,
@@ -323,6 +337,7 @@ function DatePicker(context) {
});
this.state.firstOpened = false;
} else {
+ this.context.monthYear.classList.remove("active");
this.state.isMonthSet = false;
this.state.isYearSet = false;
this.state.firstOpened = true;
diff --git a/toolkit/content/widgets/spinner.js b/toolkit/content/widgets/spinner.js
index b3d996fb5..059e151fc 100644
--- a/toolkit/content/widgets/spinner.js
+++ b/toolkit/content/widgets/spinner.js
@@ -268,11 +268,11 @@ function Spinner(props, context) {
* Attach event listeners to the spinner and buttons.
*/
_attachEventListeners() {
- const { spinner } = this.elements;
+ const { spinner, container } = this.elements;
spinner.addEventListener("scroll", this, { passive: true });
- document.addEventListener("mouseup", this, { passive: true });
- document.addEventListener("mousedown", this);
+ container.addEventListener("mouseup", this, { passive: true });
+ container.addEventListener("mousedown", this, { passive: true });
},
/**
@@ -290,9 +290,6 @@ function Spinner(props, context) {
break;
}
case "mousedown": {
- // Use preventDefault to keep focus on input boxes
- event.preventDefault();
- event.target.setCapture();
this.state.mouseState = {
down: true,
layerX: event.layerX,
diff --git a/toolkit/content/widgets/timepicker.js b/toolkit/content/widgets/timepicker.js
index f438e9ec6..544032e9f 100644
--- a/toolkit/content/widgets/timepicker.js
+++ b/toolkit/content/widgets/timepicker.js
@@ -218,6 +218,7 @@ function TimePicker(context) {
},
_attachEventListeners() {
window.addEventListener("message", this);
+ document.addEventListener("mousedown", this);
},
/**
@@ -231,6 +232,12 @@ function TimePicker(context) {
this.handleMessage(event);
break;
}
+ case "mousedown": {
+ // Use preventDefault to keep focus on input boxes
+ event.preventDefault();
+ event.target.setCapture();
+ break;
+ }
}
},