Skip to content

Commit

Permalink
Add key binding for pause
Browse files Browse the repository at this point in the history 
+ changelog
+ raise version
+ linting
+ update dependecies
  • Loading branch information
@KristjanESPERANTO
KristjanESPERANTO committed Sep 11, 2023
1 parent 57161c1 commit 97f559f
Show file tree
Hide file tree
Showing 6 changed files with 841 additions and 374 deletions.
4 changes: 4 additions & 0 deletions CHANGELOG.md
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,9 @@
# Changelog

## <a name="0_3_2"></a>[0.3.2]

- Added Play/Pause Control (#70)

## <a name="0_3_1"></a>[0.3.1]

- Fix transitionTimeoutCallback by @btastic (#66)
Expand Down
11 changes: 5 additions & 6 deletions MMM-Carousel.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -97,19 +97,18 @@ body {
}

.mmm-carousel-current-page {
background: rgba(255, 255, 255, 1) !important;
background: rgba(255 255 255 / 100%) !important;
}

.mmm-carousel-paused .slider-pagination label {
border-color: black;
background: rgba(0, 0, 0, 0.2);
.mmm-carousel-paused .slider-pagination label {
border-color: black;
background: rgba(0 0 0 / 20%);
}

.mmm-carousel-paused .mmm-carousel-current-page {
background: rgba(0, 0, 0, 1) !important;
background: rgba(0 0 0 / 100%) !important;
}


/* Hide actual radio buttons */
.slide-radio {
position: absolute;
Expand Down
44 changes: 23 additions & 21 deletions MMM-Carousel.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -84,7 +84,12 @@ Module.register("MMM-Carousel", {

keyBindings: {
mode: "DEFAULT",
map: { NextSlide: "ArrowRight", PrevSlide: "ArrowLeft", Slide0: "Home" }
map: {
NextSlide: "ArrowRight",
PrevSlide: "ArrowLeft",
Pause: "ArrowDown",
Slide0: "Home"
}
},

requiresVersion: "2.3.0", // Uses 'MODULE_DOM_CREATED' notification instead of 'DOM_OBJECTS_CREATED'
Expand All @@ -98,6 +103,8 @@ Module.register("MMM-Carousel", {
} else if (kp.keyName === this.keyHandler.config.map.PrevSlide) {
this.manualTransition(undefined, -1);
this.restartTimer();
} else if (kp.keyName === this.keyHandler.config.map.Pause) {
this.toggleTimer();
} else if (this.keyHandler.reverseMap[kp.keyName].startsWith("Slide")) {
const goToSlide =
this.keyHandler.reverseMap[kp.keyName].match(/Slide([0-9]+)/i);
Expand Down Expand Up @@ -191,14 +198,13 @@ Module.register("MMM-Carousel", {
`${this.config.name}: notification ${notification} from ${sender.name}`
);

if (notification === "CAROUSEL_PLAYPAUSE") {
this.toggleTimer();
}
if (notification === "CAROUSEL_NEXT") {
this.manualTransition(undefined, 1);
this.restartTimer();
} else if (notification === "CAROUSEL_PREVIOUS") {
this.manualTransition(undefined, -1);
} else if (notification === "CAROUSEL_PLAYPAUSE") {
this.toggleTimer();
this.restartTimer();
} else if (notification === "CAROUSEL_GOTO") {
if (typeof payload === "number" || typeof payload === "string") {
Expand Down Expand Up @@ -458,10 +464,12 @@ Module.register("MMM-Carousel", {
}
},

updatePause: function(paused) {
updatePause(paused) {
this.paused = paused;

var carousel = document.getElementsByClassName("mmm-carousel-container")[0];

const carousel = document.getElementsByClassName(
"mmm-carousel-container"
)[0];

if (this.paused) carousel.classList.add("mmm-carousel-paused");
else carousel.classList.remove("mmm-carousel-paused");
Expand All @@ -476,8 +484,7 @@ Module.register("MMM-Carousel", {
this.manualTransition,
this.config.transitionInterval
);
}
else if (this.config.transitionTimeout > 0) {
} else if (this.config.transitionTimeout > 0) {
this.updatePause(false);
// Restart the timeout
clearTimeout(this.transitionTimer);
Expand All @@ -487,30 +494,25 @@ Module.register("MMM-Carousel", {
}
},


toggleTimer: function () {
toggleTimer() {
if (this.config.transitionInterval > 0) {
if (this.transitionTimer) {
this.updatePause(true);
clearInterval(this.transitionTimer);
this.transitionTimer = undefined;
}
else {
this.updatePause(true);
clearInterval(this.transitionTimer);
this.transitionTimer = undefined;
} else {
this.updatePause(false);
this.transitionTimer = setInterval(
this.manualTransition,
this.config.transitionInterval
);
}

}
else if (this.config.transitionTimeout > 0) {
} else if (this.config.transitionTimeout > 0) {
if (this.transitionTimer) {
this.updatePause(true);
clearTimeout(this.transitionTimer);
this.transitionTimer = undefined;
}
else {
} else {
this.updatePause(false);
this.transitionTimer = setTimeout(() => {
this.transitionTimeoutCallback();
Expand Down
3 changes: 2 additions & 1 deletion README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -66,7 +66,7 @@ The following properties can be configured:
| `slides` | See Examples below. The slides will be rotated as a complete set using the `transitionInterval` setting. Ingnored modules (ignoreModules) will be diplayed on all slides.<br><br>This value is **OPTIONAL**<br>Possible values: array of String/Object array (see below)<br>Default value: `[[]]` |
| `showPageIndicators` | A `boolean` true or false to show or hide the page indication 'bubbles' at the bottom of the screen. Default is `true`. |
| `showPageControls` | A `boolean` true or false to show or hide the next and previous page buttons. Buttons will only appear when hovered near or over. They can be clicked when not visible. Default is `true`. |
| `keyBindings` | Key bindings to use for navigation with MMM-KeyBindings module. The values are the KeyNames to respond to from the `"KEYPRESS"` events generated in MMM-KeyBindings.<br><br>This value is **OPTIONAL**<br>Default value:<br><pre>keyBindings: {<br> enabled: true,<br> mode: "DEFAULT",<br> map: {<br>NextSlide:"ArrowRight",<br>PrevSlide:"ArrowLeft",<br>Slide0:"Home"<br> }<br>}</pre><br>Note: any `Slide##` can be assigned to jump to a specific slide. |
| `keyBindings` | Key bindings to use for navigation with MMM-KeyBindings module. The values are the KeyNames to respond to from the `"KEYPRESS"` events generated in MMM-KeyBindings.<br><br>This value is **OPTIONAL**<br>Default value:<br><pre>keyBindings: {<br> enabled: true,<br> mode: "DEFAULT",<br> map: {<br>NextSlide:"ArrowRight",<br>PrevSlide:"ArrowLeft",<br>Pause: "ArrowDown",<br>Slide0:"Home"<br> }<br>}</pre><br>Note: any `Slide##` can be assigned to jump to a specific slide. |
| `keyBindings.mode` | Mode Keyword for responding to key press events sent from MMM-KeyBindings. Default: `"DEFAULT"` which repsonds to any key press when no other module has taken focus or changed the keyword. |

#### Example - Global Carousel
Expand Down Expand Up @@ -168,6 +168,7 @@ let config = {
map: {
NextSlide: "ArrowRight",
PrevSlide: "ArrowLeft",
Pause: "ArrowDown",
Slide0: "Home"
},
mode: "DEFAULT"
Expand Down
Loading

0 comments on commit 97f559f

Please sign in to comment.