From 3ef627340453277cc75408548b34be01d71c597d Mon Sep 17 00:00:00 2001 From: Jeremy Likness Date: Fri, 22 Nov 2019 11:28:19 -0800 Subject: [PATCH] Initial pass at structure --- css/style.css | 47 +++++++++++++++++++++++++++++++++++++++++ images/devnexus.png | Bin 0 -> 4856 bytes images/logo.png | Bin 0 -> 1859 bytes index.html | 30 ++++++++++++++++++++++++++ js/app.js | 24 +++++++++++++++++++++ js/jsonLoader.js | 4 ++++ js/navigator.js | 48 ++++++++++++++++++++++++++++++++++++++++++ js/slide.js | 28 ++++++++++++++++++++++++ js/slideLoader.js | 25 ++++++++++++++++++++++ slides/001-title.html | 5 +++++ slides/002-stuff.html | 2 ++ slides/manifest.json | 4 ++++ 12 files changed, 217 insertions(+) create mode 100644 css/style.css create mode 100644 images/devnexus.png create mode 100644 images/logo.png create mode 100644 index.html create mode 100644 js/app.js create mode 100644 js/jsonLoader.js create mode 100644 js/navigator.js create mode 100644 js/slide.js create mode 100644 js/slideLoader.js create mode 100644 slides/001-title.html create mode 100644 slides/002-stuff.html create mode 100644 slides/manifest.json diff --git a/css/style.css b/css/style.css new file mode 100644 index 0000000..8ad4c56 --- /dev/null +++ b/css/style.css @@ -0,0 +1,47 @@ +body { + padding: 5px; + font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif +} + +h1, h2, h3 { + text-align: center; +} + +a { + text-decoration: none; +} + +a:hover { + text-decoration: underline; +} + +img { + max-width: 100%; + height: auto; +} + +div#main { + height: 80vh; + padding: 1em; + background: lightgray; +} + +div#footer-left { + vertical-align: middle; + height: 15vh; + float: left; +} + +div#footer-left img { + display: inline-block; +} + +div#footer-right { + font-size: 2em; + height: 15vh; + float: right; +} + +nextslide { + display: none; +} \ No newline at end of file diff --git a/images/devnexus.png b/images/devnexus.png new file mode 100644 index 0000000000000000000000000000000000000000..697168e26d2e12b3b054240401432996a07ccc29 GIT binary patch literal 4856 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 xt-cUmTl?I=;P51|iK19vU%xP?{x<*s|NoN + + + + Vanilla.js + + + + + + + + + + + +
+

DevNexus

+

We are getting things ready...

+
+ + + + + \ No newline at end of file diff --git a/js/app.js b/js/app.js new file mode 100644 index 0000000..ecfc35e --- /dev/null +++ b/js/app.js @@ -0,0 +1,24 @@ +import { getJson } from "./jsonLoader.js" +import { loadSlides } from "./slideLoader.js" +import { Navigator } from "./navigator.js" + +const state = { + manifest: {} +}; + +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); +}; + +document.addEventListener("DOMContentLoaded", app); + diff --git a/js/jsonLoader.js b/js/jsonLoader.js new file mode 100644 index 0000000..cddfb51 --- /dev/null +++ b/js/jsonLoader.js @@ -0,0 +1,4 @@ +export async function getJson(path) { + const response = await fetch(path); + return await response.json(); +}; \ No newline at end of file diff --git a/js/navigator.js b/js/navigator.js new file mode 100644 index 0000000..f48a727 --- /dev/null +++ b/js/navigator.js @@ -0,0 +1,48 @@ +export class Navigator { + + constructor(slides, deck) { + this._deck = deck; + this._slides = slides; + this.jumpTo(0); + } + + get currentIndex() { + return this._currentIndex; + } + + get currentSlide() { + return this._slides[this._currentIndex]; + } + + get totalSlides() { + return this._slides.length; + } + + get hasPrevious() { + return this._currentIndex > 0; + } + + get hasNext() { + return this._currentIndex < (this.totalSlides - 1); + } + + jumpTo(slideIdx) { + if (slideIdx >= 0 && slideIdx < this.totalSlides) { + this._currentIndex = slideIdx; + this._deck.innerHTML = ''; + this._deck.appendChild(this.currentSlide.html); + } + } + + next() { + if (this.hasNext) { + this.jumpTo(this.currentIndex + 1); + } + } + + previous() { + if (this.hasPrevious) { + this.jumpTo(this.currentIndex - 1); + } + } +} \ No newline at end of file diff --git a/js/slide.js b/js/slide.js new file mode 100644 index 0000000..3445e6a --- /dev/null +++ b/js/slide.js @@ -0,0 +1,28 @@ +export class Slide { + + constructor(text) { + this._text = text; + this._html = document.createElement('div'); + this._html.innerHTML = text; + this._title = this._html.querySelectorAll("title")[0].innerText; + const hasNext = this._html.querySelectorAll("nextslide"); + if (hasNext.length > 0) { + this._nextSlideName = hasNext[0].innerText; + } + else { + this._nextSlideName = null; + } + } + + get title() { + return this._title; + } + + get html() { + return this._html; + } + + get nextSlide() { + return this._nextSlideName; + } +} \ No newline at end of file diff --git a/js/slideLoader.js b/js/slideLoader.js new file mode 100644 index 0000000..a0e4262 --- /dev/null +++ b/js/slideLoader.js @@ -0,0 +1,25 @@ +import { Slide } from "./slide.js" + +async function loadSlide(slideName) { + const response = await fetch(`./slides/${slideName}.html`); + const slide = await response.text(); + return new Slide(slide); +} + +export async function loadSlides(start) { + var next = start; + const slides = []; + const cycle = {}; + while (next) { + const nextSlide = await loadSlide(next); + if (!cycle[nextSlide.title]) { + slides.push(nextSlide); + cycle[nextSlide.title] = nextSlide; + next = nextSlide.nextSlide; + } + else { + break; + } + } + return slides; +} \ No newline at end of file diff --git a/slides/001-title.html b/slides/001-title.html new file mode 100644 index 0000000..cc660e3 --- /dev/null +++ b/slides/001-title.html @@ -0,0 +1,5 @@ +Vanilla.js: Modern 1st Party JavaScript +

Vanilla.js: Modern 1st Party JavaScript

+

Jeremy Likness

+

Cloud Advocate, Microsoft

+002-stuff \ No newline at end of file diff --git a/slides/002-stuff.html b/slides/002-stuff.html new file mode 100644 index 0000000..f2a0338 --- /dev/null +++ b/slides/002-stuff.html @@ -0,0 +1,2 @@ +More Stuff +

More Stuff

\ No newline at end of file diff --git a/slides/manifest.json b/slides/manifest.json new file mode 100644 index 0000000..4c9ac8c --- /dev/null +++ b/slides/manifest.json @@ -0,0 +1,4 @@ +{ + "title": "Vanilla.js: Modern 1st Party JavaScript", + "start": "001-title" +} \ No newline at end of file