DevNexus | Vanilla.js: Modern 1st Party JavaScript
+Setting things up ...
+
+ ---
+
diff --git a/js/app.js b/js/app.js
index ecfc35e..fd70d89 100644
--- a/js/app.js
+++ b/js/app.js
@@ -1,23 +1,10 @@
-import { getJson } from "./jsonLoader.js"
-import { loadSlides } from "./slideLoader.js"
-import { Navigator } from "./navigator.js"
-
-const state = {
- manifest: {}
-};
+import { registerDeck } from "./navigator.js"
+import { registerControls } from "./controls.js"
const app = async () => {
- state.deck = document.getElementById("main");
-
- // load the manifest
- state.manifest = await getJson("slides/manifest.json");
-
- // load the slides
- state.slides = await loadSlides(state.manifest.start);
-
- // initialize the navigation
- state.navigator = new Navigator(state.slides, state.deck);
+ registerDeck();
+ registerControls();
};
document.addEventListener("DOMContentLoaded", app);
diff --git a/js/controls.js b/js/controls.js
new file mode 100644
index 0000000..029c101
--- /dev/null
+++ b/js/controls.js
@@ -0,0 +1,54 @@
+class Controls extends HTMLElement {
+
+ constructor() {
+ super();
+ this._controlRef = null;
+ this._deck = null;
+ }
+
+ async connectedCallback() {
+ const response = await fetch("/templates/controls.html");
+ const template = await response.text();
+ this.innerHTML = "";
+ const host = document.createElement("div");
+ host.innerHTML = template;
+ this.appendChild(host);
+ this._controlRef = {
+ first: document.getElementById("ctrlFirst"),
+ prev: document.getElementById("ctrlPrevious"),
+ next: document.getElementById("ctrlNext"),
+ last: document.getElementById("ctrlLast"),
+ pos: document.getElementById("position")
+ };
+ this._controlRef.first.addEventListener("click", () => this._deck.jumpTo(0));
+ this._controlRef.prev.addEventListener("click", () => this._deck.previous());
+ this._controlRef.next.addEventListener("click", () => this._deck.next());
+ this._controlRef.last.addEventListener("click", () => this._deck.jumpTo(this._deck.totalSlides - 1));
+ this.refreshState();
+ }
+
+ static get observedAttributes() {
+ return ["deck"];
+ }
+
+ async attributeChangedCallback(attrName, oldVal, newVal) {
+ if (attrName === "deck") {
+ if (oldVal !== newVal) {
+ this._deck = document.getElementById(newVal);
+ this._deck.addEventListener("slideschanged", () => this.refreshState());
+ }
+ }
+ }
+
+ refreshState() {
+ const next = this._deck.hasNext;
+ const prev = this._deck.hasPrevious;
+ this._controlRef.first.disabled = !prev;
+ this._controlRef.prev.disabled = !prev;
+ this._controlRef.next.disabled = !next;
+ this._controlRef.last.disabled = !next;
+ this._controlRef.pos.innerText = `${this._deck.currentIndex + 1} / ${this._deck.totalSlides}`;
+ }
+}
+
+export const registerControls = () => customElements.define('slide-controls', Controls);
\ No newline at end of file
diff --git a/js/navigator.js b/js/navigator.js
index f48a727..ff74cd6 100644
--- a/js/navigator.js
+++ b/js/navigator.js
@@ -1,9 +1,43 @@
-export class Navigator {
+import { loadSlides } from "./slideLoader.js"
+import { Router } from "./router.js"
- constructor(slides, deck) {
- this._deck = deck;
- this._slides = slides;
- this.jumpTo(0);
+class Navigator extends HTMLElement {
+
+ constructor() {
+ super();
+ this._router = new Router();
+ this._route = this._router.getRoute();
+ this.slidesChangedEvent = new CustomEvent("slideschanged", {
+ bubbles: true,
+ cancelable: false
+ });
+ this._router.eventSource.addEventListener("routechanged", () => {
+ if (this._route !== this._router.getRoute()) {
+ this._route = this._router.getRoute();
+ if (this._route) {
+ var slide = parseInt(this._route) - 1;
+ this.jumpTo(slide);
+ }
+ }
+ });
+ }
+
+ static get observedAttributes() {
+ return ["start"];
+ }
+
+ async attributeChangedCallback(attrName, oldVal, newVal) {
+ if (attrName === "start") {
+ if (oldVal !== newVal) {
+ this._slides = await loadSlides(newVal);
+ this._route = this._router.getRoute();
+ var slide = 0;
+ if (this._route) {
+ slide = parseInt(this._route) - 1;
+ }
+ this.jumpTo(slide);
+ }
+ }
}
get currentIndex() {
@@ -11,11 +45,11 @@ export class Navigator {
}
get currentSlide() {
- return this._slides[this._currentIndex];
+ return this._slides ? this._slides[this._currentIndex] : null;
}
get totalSlides() {
- return this._slides.length;
+ return this._slides ? this._slides.length : 0;
}
get hasPrevious() {
@@ -29,8 +63,11 @@ export class Navigator {
jumpTo(slideIdx) {
if (slideIdx >= 0 && slideIdx < this.totalSlides) {
this._currentIndex = slideIdx;
- this._deck.innerHTML = '';
- this._deck.appendChild(this.currentSlide.html);
+ this.innerHTML = '';
+ this.appendChild(this.currentSlide.html);
+ this._router.setRoute(slideIdx+1);
+ this._route = this._router.getRoute();
+ this.dispatchEvent(this.slidesChangedEvent);
}
}
@@ -45,4 +82,6 @@ export class Navigator {
this.jumpTo(this.currentIndex - 1);
}
}
-}
\ No newline at end of file
+}
+
+export const registerDeck = () => customElements.define('slide-deck', Navigator);
\ No newline at end of file
diff --git a/js/router.js b/js/router.js
new file mode 100644
index 0000000..b0d0d46
--- /dev/null
+++ b/js/router.js
@@ -0,0 +1,30 @@
+export class Router {
+
+ constructor() {
+ this._eventSource = document.createElement("div");
+ this._routeChanged = new CustomEvent("routechanged", {
+ bubbles: true,
+ cancelable: false
+ });
+ this._route = null;
+ window.addEventListener("popstate", () => {
+ if (this.getRoute() !== this._route) {
+ this._route = this.getRoute();
+ this._eventSource.dispatchEvent(this._routeChanged);
+ }
+ });
+ }
+
+ get eventSource() {
+ return this._eventSource;
+ }
+
+ setRoute(route) {
+ window.location.hash = route;
+ this._route = route;
+ }
+
+ getRoute() {
+ return window.location.hash.substr(1).replace(/\//ig, "/");
+ }
+}
\ No newline at end of file
diff --git a/js/slideLoader.js b/js/slideLoader.js
index a0e4262..4dfc08e 100644
--- a/js/slideLoader.js
+++ b/js/slideLoader.js
@@ -11,10 +11,10 @@ export async function loadSlides(start) {
const slides = [];
const cycle = {};
while (next) {
- const nextSlide = await loadSlide(next);
- if (!cycle[nextSlide.title]) {
+ if (!cycle[next]) {
+ cycle[next] = true;
+ const nextSlide = await loadSlide(next);
slides.push(nextSlide);
- cycle[nextSlide.title] = nextSlide;
next = nextSlide.nextSlide;
}
else {
diff --git a/slides/002-stuff.html b/slides/002-stuff.html
index f2a0338..1d10390 100644
--- a/slides/002-stuff.html
+++ b/slides/002-stuff.html
@@ -1,2 +1,3 @@
More Stuff
-003-morestuff
\ No newline at end of file
diff --git a/slides/003-morestuff.html b/slides/003-morestuff.html
new file mode 100644
index 0000000..8feabd1
--- /dev/null
+++ b/slides/003-morestuff.html
@@ -0,0 +1,7 @@
+More Stuff
+
More Stuff
\ No newline at end of file +More Stuff
+This is even more stuff
+Lorem jalskdjflkasdjflkasd jkjdsaflkdsj kldsjflksdjdlk klsdjflkasjlksj kjdsf + asdklfjlkfjk laskdjfladskjf + asldfkjlkddj + asldfjlkfjjkjlff +
\ No newline at end of file diff --git a/templates/controls.html b/templates/controls.html new file mode 100644 index 0000000..d57eea9 --- /dev/null +++ b/templates/controls.html @@ -0,0 +1,5 @@ + + +?/? + + \ No newline at end of file