commit 3ef627340453277cc75408548b34be01d71c597d Author: Jeremy Likness Date: Fri Nov 22 11:28:19 2019 -0800 Initial pass at structure 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 0000000..697168e Binary files /dev/null and b/images/devnexus.png differ diff --git a/images/logo.png b/images/logo.png new file mode 100644 index 0000000..72443a4 Binary files /dev/null and b/images/logo.png differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..10b13dd --- /dev/null +++ b/index.html @@ -0,0 +1,30 @@ + + + + + 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