From 5a2de122f45db114b749b5f722da6f6e7d80554e Mon Sep 17 00:00:00 2001 From: Graham Trott Date: Mon, 11 May 2020 22:20:01 +0100 Subject: [PATCH 1/3] Font style naming bug --- presenter/demo.json | 4 ++-- presenter/jsonPresenter.js | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/presenter/demo.json b/presenter/demo.json index c78c47d..2d0e872 100644 --- a/presenter/demo.json +++ b/presenter/demo.json @@ -8,7 +8,7 @@ "background": "black" }, "defaults": { - "fontFace": "Times New Roman,serif", + "fontFamily": "Times New Roman,serif", "fontSize": 40, "fontWeight": "normal", "fontStyle": "normal", @@ -52,7 +52,7 @@ "blockHeight": 800, "blockPaddingLeft": 80, "blockPaddingTop": 40, - "fontFace": "Helvetica,sans-serif", + "fontFamily": "Helvetica,sans-serif", "fontColor": "#00ffff" } } diff --git a/presenter/jsonPresenter.js b/presenter/jsonPresenter.js index 942dd77..137da1a 100644 --- a/presenter/jsonPresenter.js +++ b/presenter/jsonPresenter.js @@ -143,7 +143,7 @@ const JSON_Presenter = { element.appendChild(inner); element.inner = inner; const text = document.createElement(`div`); - text.style[`font-face`] = properties.fontFace; + text.style[`font-family`] = properties.fontFamily; text.style[`font-size`] = `${properties.fontSize * h / 1000}px`; text.style[`font-weight`] = properties.fontWeight; text.style[`font-style`] = properties.fontStyle; From 09cee4400e9e9ea212859b7fe4c320308cc1d8eb Mon Sep 17 00:00:00 2001 From: Graham Trott Date: Tue, 12 May 2020 11:02:44 +0100 Subject: [PATCH 2/3] Update presenter --- presenter/demo.json | 27 +++----- presenter/jsonPresenter.js | 127 +++++++++++++++++++------------------ 2 files changed, 72 insertions(+), 82 deletions(-) diff --git a/presenter/demo.json b/presenter/demo.json index 2d0e872..1e246f6 100644 --- a/presenter/demo.json +++ b/presenter/demo.json @@ -108,25 +108,14 @@ "duration": 4 }, { - "comment": "------------------------------------ Move the title", - "action": "transform", - "type": "block", - "block": "title", - "target": "title 2", - "duration": 1 - }, - { - "comment": "------------------------------ Change the title color", - "action": "transform", - "type": "font color", - "block": "title", - "target": "title 2", - "duration": 1 - }, - { - "comment": "------------------------------------ Resize the title", - "action": "transform", - "type": "font size", + "comment": "-------------------------------- Transition the title", + "action": "transition", + "type": [ + "block position", + "block size", + "font color", + "font size" + ], "block": "title", "target": "title 2", "duration": 1, diff --git a/presenter/jsonPresenter.js b/presenter/jsonPresenter.js index 137da1a..bc777d0 100644 --- a/presenter/jsonPresenter.js +++ b/presenter/jsonPresenter.js @@ -112,7 +112,9 @@ const JSON_Presenter = { doStep: (script, stepno) => { const goto = (script, stepno) => { if (stepno < script.steps.length) { - JSON_Presenter.doStep(script, stepno); + setTimeout(function () { + JSON_Presenter.doStep(script, stepno); + }, 1); } }; @@ -252,57 +254,59 @@ const JSON_Presenter = { } }; - // Process a single transform step - const doTransformStep = (block, target, nSteps, n, transform, onFinish) => { - transform(block, target, nSteps, n); + // Process a single transition step + const doTransitionStep = (block, target, step, nSteps, n, transition, onFinish) => { + transition(block, target, step, nSteps, n); if (n < nSteps) { setTimeout(function () { - doTransformStep(block, target, nSteps, n + 1, transform, onFinish); + doTransitionStep(block, target, step, nSteps, n + 1, transition, onFinish); }, 40); } else { onFinish(); } }; - // Transform block - const transformBlock = (block, target, nSteps, n) => { - const boundingRect = script.element.getBoundingClientRect(); + // Compute a block size + const setComputedBlockSize = (block, target, nSteps, n) => { + const boundingRect = block.container.getBoundingClientRect(); w = Math.round(boundingRect.width); h = Math.round(boundingRect.height); - const left = block.properties.blockLeft * w / 1000; - const top = block.properties.blockTop * h / 1000; const width = block.properties.blockWidth * w / 1000; const height = block.properties.blockHeight * h / 1000; - const endLeft = target.properties.blockLeft * w / 1000; - const endTop = target.properties.blockTop * h / 1000; const endWidth = target.properties.blockWidth * w / 1000; const endHeight = target.properties.blockHeight * h / 1000; - block.element.style[`left`] = - left + Math.round((endLeft - left) * n / nSteps); - block.element.style[`top`] = - top + Math.round((endTop - top) * n / nSteps); block.element.style[`width`] = `${width + Math.round((endWidth - width) * n / nSteps)}px`; block.element.style[`height`] = `${height + Math.round((endHeight - height) * n / nSteps)}px`; }; - const doTransformBlock = (script, step, stepno) => { - const block = script.blocks[step.block]; - const target = script.blocks[step.target]; - const nSteps = Math.round(parseFloat(step.duration) * 25); - doTransformStep(block, target, nSteps, 0, transformBlock, function() { - if (step.wait) { - goto(script, stepno + 1); - } - }); - if (!step.wait) { - goto(script, stepno + 1); - } + // Compute a block position + const setComputedBlockPosition = (block, target, nSteps, n) => { + const boundingRect = block.container.getBoundingClientRect(); + w = Math.round(boundingRect.width); + h = Math.round(boundingRect.height); + const left = block.properties.blockLeft * w / 1000; + const top = block.properties.blockTop * h / 1000; + const endLeft = target.properties.blockLeft * w / 1000; + const endTop = target.properties.blockTop * h / 1000; + block.element.style[`left`] = + left + Math.round((endLeft - left) * n / nSteps); + block.element.style[`top`] = + top + Math.round((endTop - top) * n / nSteps); }; - // Transform font color - const setComputedColor = (block, target, nSteps, n) => { + // Compute a font size + const setComputedFontSize = (block, target, nSteps, n) => { + h = Math.round(script.element.getBoundingClientRect().height); + const size = block.properties.fontSize * h / 1000; + const endSize = target.properties.fontSize * h / 1000; + block.element.inner.text.style[`font-size`] = + `${size + Math.round((endSize - size) * n / nSteps)}px`; + }; + + // Compute a font color + const setComputedFontColor = (block, target, nSteps, n) => { const color = block.spec.fontColor; const endColor = target.spec.fontColor; const rStart = parseInt(color.slice(1, 3), 16); @@ -320,22 +324,36 @@ const JSON_Presenter = { block.element.inner.text.style[`color`] = `#${r}${g}${b}`; }; - const doTransformFontColor = (script, step, stepno) => { - const block = script.blocks[step.block]; - const target = script.blocks[step.target]; - const nSteps = Math.round(parseFloat(step.duration) * 25); - doTransformStep(block, target, nSteps, 0, setComputedColor, function() { - if (step.wait) { - goto(script, stepno + 1); + const computeTransitionValues = (block, target, step, nSteps, n) => { + for (const type of step.type) { + switch (type) { + case `block size`: + setComputedBlockSize(block, target, nSteps, n); + break; + case `block position`: + setComputedBlockPosition(block, target, nSteps, n); + break; + case `font size`: + setComputedFontSize(block, target, nSteps, n); + break; + case `font color`: + setComputedFontColor(block, target, nSteps, n); + break; + default: + throw Error(`Unknown transition type: '${type}'`); } - }); - if (!step.wait) { - goto(script, stepno + 1); } }; - // Transform font size - const setComputedFontSize = (block, target, nSteps, n) => { + // Do the transition + const computeTransitionStep = (block, target, types, nSteps, n) => { + if (Array.isArray(types)) { + for (const type of types) { + computeTransitionValues(block, target, type, nSteps, n); + } + } else { + computeTransitionValues(block, target, types, nSteps, n); + } h = Math.round(script.element.getBoundingClientRect().height); const size = block.properties.fontSize * h / 1000; const endSize = target.properties.fontSize * h / 1000; @@ -343,11 +361,11 @@ const JSON_Presenter = { `${size + Math.round((endSize - size) * n / nSteps)}px`; }; - const doTransformFontSize = (script, step, stepno) => { + const doTransition = (script, step, stepno) => { const block = script.blocks[step.block]; const target = script.blocks[step.target]; const nSteps = Math.round(parseFloat(step.duration) * 25); - doTransformStep(block, target, nSteps, 0, setComputedFontSize, function() { + doTransitionStep(block, target, step, nSteps, 0, computeTransitionStep, function() { if (step.wait) { goto(script, stepno + 1); } @@ -357,23 +375,6 @@ const JSON_Presenter = { } }; - // Transform an element - const doTransform = (script, step, stepno) => { - switch (step.type) { - case `block`: - doTransformBlock(script, step, stepno); - break; - case `font color`: - doTransformFontColor(script, step, stepno); - break; - case `font size`: - doTransformFontSize(script, step, stepno); - break; - default: - throw Error(`Unknown transform type: '${step.type}'`); - } - }; - // Process a single step const step = script.steps[stepno]; switch (step.action) { @@ -404,8 +405,8 @@ const JSON_Presenter = { case `fade down`: doFade(script, step, stepno, false); break; - case`transform`: - doTransform(script, step, stepno); + case`transition`: + doTransition(script, step, stepno); break; default: throw Error(`Unknown action: '${step.action}'`); From 90c54849aa9a307d077f8f16f5f71ec4cb1fb917 Mon Sep 17 00:00:00 2001 From: Graham Trott Date: Sun, 17 May 2020 15:02:33 +0100 Subject: [PATCH 3/3] Version 1.0.1 --- presenter/demo.json | 224 ++++++--- presenter/index.html | 13 +- presenter/jsonPresenter.js | 903 ++++++++++++++++++++++--------------- 3 files changed, 715 insertions(+), 425 deletions(-) diff --git a/presenter/demo.json b/presenter/demo.json index 1e246f6..64d66ba 100644 --- a/presenter/demo.json +++ b/presenter/demo.json @@ -1,8 +1,8 @@ { - "title": "JSON:Presenter", - "description": "A demo presentation that outlines some features of JSON:Presenter", - "aspectW": 16, - "aspectH": 9, + "title": "JSON::Presenter", + "description": "A demo presentation that outlines some features of JSON::Presenter", + "aspectW": 160, + "aspectH": 89, "container": { "border": "1px solid black", "background": "black" @@ -14,67 +14,104 @@ "fontStyle": "normal", "fontColor": "white", "textAlign": "left", - "blockLeft" : 0, - "blockTop" : 0, + "textMarginLeft": 0, + "textMarginTop": 0, + "blockLeft": 0, + "blockTop": 0, "blockWidth": 1000, - "blockBackground" : "none", + "blockBackground": "none", "blockBorder": "none", - "blockPaddingLeft": 20, - "blockPaddingTop": 0 + "blockBorderRadius": 0 }, "blocks": { "title": { - "type": "text", - "spec": { - "blockTop": 300, - "blockHeight": 300, - "textAlign": "center", - "fontSize": 200, - "fontWeight": "bold", - "fontColor": "#800000" - } + "blockTop": 300, + "blockHeight": 300, + "textAlign": "center", + "fontSize": 200, + "fontWeight": "bold", + "fontColor": "#800000" }, "title 2": { - "type": "text", - "spec": { - "blockTop": 50, - "blockHeight": 150, - "textAlign": "center", - "fontSize": 100, - "fontWeight": "bold", - "fontColor": "#00dddd" - } + "blockTop": 50, + "blockHeight": 150, + "textAlign": "center", + "fontSize": 100, + "fontWeight": "bold", + "fontColor": "#dddd00" }, "body": { - "type": "text", - "spec": { - "blockTop": 200, - "blockHeight": 800, - "blockPaddingLeft": 80, - "blockPaddingTop": 40, - "fontFamily": "Helvetica,sans-serif", - "fontColor": "#00ffff" - } + "blockLeft": 80, + "blockTop": 240, + "blockWidth": 840, + "blockHeight": 800, + "fontFamily": "Helvetica,sans-serif", + "fontColor": "#dddddd" + }, + "body right": { + "blockLeft": 500, + "blockTop": 200, + "blockWidth": 420, + "blockHeight": 800, + "fontFamily": "Helvetica,sans-serif", + "fontColor": "#dddddd" + }, + "left image": { + "blockLeft": 80, + "blockTop": 200, + "blockWidth": 370, + "blockHeight": 700, + "blockBorder": "1px solid black", + "blockBorderRadius": "1em" } }, "content": { - "presenter title": "JSON:Presenter", - "slide 1": [ - "JSON:Presenter© is a presentation format using JSON scripts and an engine that runs those scripts in a browser to create presentations. These may be similar to those created using PowerPoint or they can be considerably more elaborate, with extensive animation and even sound. In some cases they can take the place of video yet still offer a dynamic experience.", - - "Presentations can run from any host, including static; all you need is one CDN-hosted JavaScript file and you're good to go.", - - "The JSON:Presenter© engine is pure JavaScript. It can be used with any JavaScript framework, or with none." - ] + "presenter title": { + "type": "text", + "content": "JSON::Presenter" + }, + "slide 1": { + "type": "text", + "content": [ + "JSON::Presenter is a presentation format using JSON scripts, and an engine that runs those scripts in a browser to create presentations. These may be similar to those created using PowerPoint or they can be considerably more elaborate, with extensive animation and even sound. In some cases they can take the place of video yet still offer a dynamic experience.", + + "Presentations can run from any host, including static; all you need is one CDN-hosted JavaScript file and you're good to go.", + + "The JSON::Presenter engine is pure JavaScript. It can be used with any JavaScript framework, or with none." + ] + }, + "slide 2": { + "type": "text", + "content": [ + "JSON::Presenter offers a range of block types and transitions that make it easy to create slick, effective presentations.", + + "This short demo illustrates some of the features of the system." + ] + }, + "slide 3": { + "type": "text", + "content": [ + "Text and image blocks can be manipulated in a variety of different ways.", + + "Any block can be resized or moved; text can be substituted or have its size or color change; images can be assigned to blocks. Any block can be faded or transformed using animations.", + + "The JSON::Presenter scripting language uses simple data JSON structures and is easy to read or write." + ] + }, + "flowers": { + "type": "image", + "url": "img/flowers.jpg" + }, + "moon": { + "type": "image", + "url": "img/moon.jpg" + } }, "steps": [ { - "comment": "-------------------- Create the title and body blocks", - "action": "create", - "blocks": [ - "title", - "body" - ] + "comment": "------------------------------- Pause before we start", + "action": "pause", + "duration": 2 }, { "comment": "---------------------------------- Set up the content", @@ -87,20 +124,18 @@ { "block": "body", "content": "slide 1" + }, + { + "block": "left image", + "content": "flowers" } ] }, { - "comment": "----------------------------- A pause before we start", - "action": "hold", - "duration": 2 - }, - { - "comment": "-------------------------------- Show the intro title", + "comment": "----------------------------- Fade up the intro title", "action": "fade up", "blocks": "title", - "duration": 3, - "wait": true + "duration": 3 }, { "comment": "-------------------------------------- Wait 4 seconds", @@ -119,14 +154,75 @@ "block": "title", "target": "title 2", "duration": 1, - "wait": true + "continue": true + }, + { + "comment": "----------------------------- Pause for half a second", + "action": "pause", + "duration": 0.5 }, { "comment": "-------------------------------- Show the first slide", "action": "fade up", "blocks": "body", - "duration": 1, - "wait": true + "duration": 1 + }, + { + "comment": "------------------------------------- Wait 10 seconds", + "action": "hold", + "duration": 10 + }, + { + "comment": "-------------------------------- Change the body text", + "action": "crossfade", + "block": "body", + "target": "slide 2", + "duration": 1 + }, + { + "comment": "------------------------------------- Wait 5 seconds", + "action": "hold", + "duration": 5 + }, + { + "comment": "-------------------------- Move the body to the right", + "action": "transition", + "type": [ + "block position", + "block size" + ], + "block": "body", + "target": "body right", + "duration": 1 + }, + { + "comment": "----------------------------- Fade up the image block", + "action": "fade up", + "blocks": "left image", + "duration": 2 + }, + { + "comment": "-------------------------------------- Wait 8 seconds", + "action": "hold", + "duration": 8 + }, + { + "comment": "--------------------------------- Crossfade the image", + "action": "crossfade", + "block": "left image", + "target": "moon", + "duration": 1 + }, + { + "comment": "-------------------------------------- Wait 2 seconds", + "action": "hold", + "duration": 2 + }, + { + "comment": "-------------------------------- Change the body text", + "action": "set content", + "block": "body", + "content": "slide 3" }, { "comment": "------------------------------------- Wait 10 seconds", @@ -138,10 +234,10 @@ "action": "fade down", "blocks": [ "title", - "body" + "body", + "left image" ], - "duration": 3, - "wait": true + "duration": 3 } ] } diff --git a/presenter/index.html b/presenter/index.html index 665832c..6fe11ca 100644 --- a/presenter/index.html +++ b/presenter/index.html @@ -6,10 +6,15 @@ -
- - - +
+ JSON::Presenter
+ Click/Tap or press any key to start.
+ Click/Tap or key Space/RightArrow to advance.
+ Key Enter to toggle auto/manual mode. +
+ + + diff --git a/presenter/jsonPresenter.js b/presenter/jsonPresenter.js index bc777d0..c2b3126 100644 --- a/presenter/jsonPresenter.js +++ b/presenter/jsonPresenter.js @@ -1,97 +1,31 @@ // JSON::Presenter -window.onload = () => { - const createCORSRequest = (url) => { - var xhr = new XMLHttpRequest(); - if (`withCredentials` in xhr) { - - // Check if the XMLHttpRequest object has a "withCredentials" property. - // "withCredentials" only exists on XMLHTTPRequest2 objects. - xhr.open(`GET`, url, true); - - } else if (typeof XDomainRequest != `undefined`) { - - // Otherwise, check if XDomainRequest. - // XDomainRequest only exists in IE, and is IE's way of making CORS requests. - xhr = new XDomainRequest(); - xhr.open(`GET`, url); - - } else { - - // Otherwise, CORS is not supported by the browser. - xhr = null; - - } - return xhr; - }; - - const container = document.getElementById(`jp-container`); +const JSON_Presenter = (container, script) => { - const scriptElement = document.getElementById(`jp-script`); - const request = createCORSRequest(scriptElement.innerText); - if (!request) { - throw Error(`Unable to access the JSON script`); - } + let speed = `normal`; + let stepno= -1; + let step; + let mode = `manual`; - request.onload = () => { - if (200 <= request.status && request.status < 400) { - JSON_Presenter.present(container, request.responseText); - } else { - throw Error(`Unable to access the JSON script`); - } - }; - - request.onerror = () => { - throw Error(`Unable to access the JSON script`); - }; - - request.send(); -}; - -const JSON_Presenter = { - - present: (container, text) => { - const containerStyles = [ - `border`, - `background` - ]; - const defaults = [ - `fontFace`, - `fontWeight`, - `fontStyle`, - `textAlign`, - `fontColor`, - `blockLeft`, - `blockTop`, - `blockWidth`, - `blockHeight`, - `blockBackground`, - `blockPadding` - ]; - - const script = JSON.parse(text); - document.title = script.title; - const height = Math.round(parseFloat(container.offsetWidth) * script.aspectH / script.aspectW); - container.style[`height`] = `${Math.round(height)}px`; - container.style[`position`] = `relative`; - script.element = container; - for (const item of containerStyles) { - JSON_Presenter.doStyle(container, script.container, item); - } - container.style[`background-size`] = `cover`; - JSON_Presenter.doBlocks(container, script.blocks, script.defaults); - JSON_Presenter.doStep(script, 0); - }, + const containerStyles = [ + `border`, + `background` + ]; + const defaults = [ + `fontFace`, + `fontWeight`, + `fontStyle`, + `textAlign`, + `fontColor`, + `blockLeft`, + `blockTop`, + `blockWidth`, + `blockHeight`, + `blockBackground` + ]; - // Process a style property - doStyle: (element, spec, property) => { - if (typeof spec[property] !== 'undefined') { - element.style[property] = spec[property]; - } - }, - - // Create all the blocks - doBlocks: (container, blocks, defaults) => { + // Initialize all the blocks + const initBlocks = (container, blocks, defaults) => { for (const name in blocks) { const block = blocks[name]; const properties = {}; @@ -100,316 +34,571 @@ const JSON_Presenter = { properties[name] = defaults[name]; } // Override with local values - for (const name in block.spec) { - properties[name] = block.spec[name]; + for (const name in block) { + properties[name] = block[name]; } block.properties = properties; block.container = container; } - }, + }; - // Run a step - doStep: (script, stepno) => { - const goto = (script, stepno) => { - if (stepno < script.steps.length) { - setTimeout(function () { - JSON_Presenter.doStep(script, stepno); - }, 1); + // Preload all the images + const preloadImages = (content) => { + for (const item in content) { + if (item.type == `image`) { + item.img = document.createElement(`div`); + item.img.style[`background`] = `url("${item.url}")`; } - }; + } + }; - // Create an element. - const createElement = (block) => { - const container = block.container; - w = Math.round(container.getBoundingClientRect().width); - h = Math.round(container.getBoundingClientRect().height); - const properties = block.properties; - const element = document.createElement(`div`); - block.element = element; - element.style[`position`] = `absolute`; - element.style[`display`] = `none`; - element.style[`left`] = properties.blockLeft * w / 1000; - element.style[`top`] = properties.blockTop * h / 1000; - element.style[`width`] = `${properties.blockWidth * w / 1000}px`; - element.style[`height`] = `${properties.blockHeight * h / 1000}px`; - element.style[`background`] = properties.blockBackground; - element.style[`border`] = properties.blockBorder; - container.appendChild(element); - const paddingLeft = `${properties.blockPaddingLeft * w / 1000}px`; - const paddingTop = `${properties.blockPaddingTop * h / 1000}px`; - const inner = document.createElement(`div`); - inner.style[`position`] = `absolute`; - inner.style[`left`] = paddingLeft; - inner.style[`top`] = paddingTop; - inner.style[`width`] = `calc(100% - ${paddingLeft} - ${paddingLeft})`; - element.appendChild(inner); - element.inner = inner; - const text = document.createElement(`div`); - text.style[`font-family`] = properties.fontFamily; - text.style[`font-size`] = `${properties.fontSize * h / 1000}px`; - text.style[`font-weight`] = properties.fontWeight; - text.style[`font-style`] = properties.fontStyle; - text.style[`color`] = properties.fontColor; - text.style[`text-align`] = properties.textAlign; - inner.appendChild(text); - inner.text = text; - }; + const doPause = () => { + setTimeout(() => { + doStep(); + }, speed === `normal` ? step.duration * 1000 : 0); + }; - // Set the content of blocks - const doSetContent = (script, step) => { - for (const item of step.blocks) { - const block = script.blocks[item.block]; - switch (block.type) { - case `text`: - let content = script.content[item.content]; - if (Array.isArray(content)) { - content = content.join(`

`); - } - content = content.split(`\n`).join(`
`); - block.element.inner.text.innerHTML = content.split(`\n`).join(`
`); - break; - case `image`: + const release = () => { + document.removeEventListener(`click`, release); + document.onkeydown = null; + doStep(); + }; + + const doHold = () => { + if (mode === `manual`) { + document.addEventListener(`click`, release); + document.onkeydown = function (event) { + document.onkeydown = null; + switch (event.code) { + case `Space`: + case `ArrowRight`: + release(); + break; + case `ArrowLeft`: + break; + case `Enter`: + mode = `auto`; + doStep(); + break; + default: break; } - } - }; - - // Create an element - const doCreate = (script, step) => { - if (Array.isArray(step.blocks)) { - for (const block of step.blocks) - { - createElement(script.blocks[block]); + return true; + }; + } else { + document.onkeydown = function (event) { + document.onkeydown = null; + switch (event.code) { + case `Enter`: + mode = `manual`; + break; } - } else { - createElement(script.blocks[step.blocks]); - } - }; + return true; + }; + setTimeout(() => { + doStep(); + }, speed === `normal` ? step.duration * 1000 : 0); + } + }; - // Process a single fade step - const doFadeStep = (element, steps, n, upDown, onFinish) => { - if (upDown) { - element.style[`opacity`] = parseFloat(n) / steps; - } else { - element.style[`opacity`] = 1.0 - parseFloat(n) / steps; - } - if (n < steps) { - setTimeout(function () { - doFadeStep(element, steps, n + 1, upDown, onFinish); - }, 40); - } else { - element.style[`opacity`] = upDown ? 1.0 : 0.0; - if (!upDown) { - element.style[`display`] = `none`; + // Create a text block. + const createTextBlock = (block) => { + const container = block.container; + if (block.element) { + container.removeChild(block.element); + } + const w = container.getBoundingClientRect().width / 1000; + const h = container.getBoundingClientRect().height / 1000; + const properties = block.properties; + const element = document.createElement(`div`); + block.element = element; + element.style[`position`] = `absolute`; + element.style[`opacity`] = `0.0`; + element.style[`left`] = properties.blockLeft * w; + element.style[`top`] = properties.blockTop * h; + element.style[`width`] = `${properties.blockWidth * w}px`; + element.style[`height`] = `${properties.blockHeight * h}px`; + element.style[`background`] = properties.blockBackground; + element.style[`border`] = properties.blockBorder; + container.appendChild(element); + const marginLeft = properties.textMarginLeft * w; + const marginTop = properties.textMarginTop * h; + const inner = document.createElement(`div`); + inner.style[`position`] = `absolute`; + inner.style[`left`] = marginLeft; + inner.style[`top`] = marginTop; + inner.style[`width`] = `calc(100% - ${marginLeft}px - ${marginLeft}px)`; + element.appendChild(inner); + element.inner = inner; + const text = document.createElement(`div`); + text.style[`font-family`] = properties.fontFamily; + text.style[`font-size`] = `${properties.fontSize * h}px`; + text.style[`font-weight`] = properties.fontWeight; + text.style[`font-style`] = properties.fontStyle; + text.style[`color`] = properties.fontColor; + text.style[`text-align`] = properties.textAlign; + inner.appendChild(text); + inner.text = text; + }; + + // Create an image block. + const createImageBlock = (block) => { + const container = block.container; + if (block.element) { + container.removeChild(block.element); + } + w = container.getBoundingClientRect().width / 1000; + h = container.getBoundingClientRect().height / 1000; + const properties = block.properties; + const element = document.createElement(`div`); + block.element = element; + element.style[`position`] = `absolute`; + element.style[`opacity`] = `0.0`; + element.style[`left`] = properties.blockLeft * w; + element.style[`top`] = properties.blockTop * h; + element.style[`width`] = `${properties.blockWidth * w}px`; + element.style[`height`] = `${properties.blockHeight * h}px`; + element.style[`background`] = properties.blockBackground; + element.style[`border`] = properties.blockBorder; + element.style[`border-radius`] = properties.blockBorderRadius; + container.appendChild(element); + }; + + // Set the content of a block + const setContent = (spec) => { + const block = script.blocks[spec.block]; + const contentSpec = script.content[spec.content]; + if (!block) { + throw Error(`Block '${block}' cannot be found`); + } + switch (contentSpec.type) { + case `text`: + if (!block.element) { + createTextBlock(block); } - onFinish(); + let content = contentSpec.content; + if (Array.isArray(content)) { + content = content.join(`

`); + } + block.element.inner.text.innerHTML = content.split(`\n`).join(`
`); + break; + case `image`: + if (!block.element) { + createImageBlock(block); + } + block.element.style[`background`] = `url("${contentSpec.url}")`; + block.element.style[`background-size`] = `cover`; + break; + } + }; + + // Set the content of a block + const doSetContent = () => { + if (step.blocks) { + for (const spec of step.blocks) + { + setContent(spec); } - }; + } else { + setContent(step); + } + doStep(); + }; - // Handle a fade up or down - const doFade = (script, step, stepno, upDown) => { - const steps = Math.round(parseFloat(step.duration) * 25); - if (Array.isArray(step.blocks)) { - let blocks = step.blocks.length; - for (const block of step.blocks) - { - const element = script.blocks[block].element; - element.style[`opacity`] = upDown ? 0.0 : 1.0; - if (upDown) { - element.style[`display`] = `block`; + // Show or hide a block + const doShowHide = (showHide) => { + if (Array.isArray(step.blocks)) { + for (const block of step.blocks) + { + script.blocks[block].element.style[`opacity`] = showHide ? `1.0` : `0.0`; + } + } else { + script.blocks[step.blocks].element.style[`opacity`] = showHide ? `1.0` : `0.0`; + } + doStep(); + }; + + // Fade up or down + const doFade = (upDown) => { + const animSteps = Math.round(step.duration * 25); + const stepBlocks = step.blocks; + const continueFlag = step.continue; + let animStep = 0; + const interval = setInterval(() => { + if (animStep < animSteps) { + const ratio = 0.5 - Math.cos(Math.PI * animStep / animSteps) / 2; + if (Array.isArray(stepBlocks)) { + let blocks = stepBlocks.length; + for (const block of stepBlocks) + { + const element = script.blocks[block].element; + element.style[`opacity`] = upDown ? ratio : 1.0 - ratio; + } + } else { + const block = script.blocks[stepBlocks]; + if (!block.element) { + clearInterval(interval); + throw Error(`I can't fade up a block with no content`); } - doFadeStep(element, steps, 0, upDown, () => { - blocks--; - if (blocks === 0 && step.wait) { - goto(script, stepno + 1); - } - }); + block.element.style[`opacity`] = upDown ? ratio : 1.0 - ratio; } + animStep++; } else { - const element = script.blocks[step.blocks].element; - element.style[`opacity`] = upDown ? 0.0 : 1.0; - if (upDown) { - element.style[`display`] = `block`; + clearInterval(interval); + if (!continueFlag) { + doStep(); } - doFadeStep(element, steps, 0, upDown, () => { - if (step.wait) { - goto(script, stepno + 1); - } - }); } - if (!step.wait) { - goto(script, stepno + 1); + }, speed === `normal` ? 40 : 0); + if (continueFlag) { + doStep(); } - }; + }; - // Show or hide an element - const doShowHide = (script, step, showHide) => { - if (Array.isArray(step.blocks)) { - for (const block of step.blocks) - { - script.blocks[block].element.style[`display`] = showHide ? `block` : `none`; + // Handle a crossfade + const doCrossfade = () => { + const block = script.blocks[step.block]; + const content = script.content[step.target]; + const continueFlag = step.continue; + let element; + let newText; + switch (content.type) { + case `text`: + element = document.createElement(`div`); + element.style[`position`] = `absolute`; + element.style[`opacity`] = `0.0`; + element.style[`left`] = block.element.style[`left`]; + element.style[`top`] = block.element.style[`top`]; + element.style[`width`] = block.element.style[`width`]; + element.style[`height`] = block.element.style[`height`]; + element.style[`background`] = block.element.style[`background`] + element.style[`border`] = block.element.style[`border`] + element.style[`border-radius`] = block.element.style[`border-radius`] + block.container.appendChild(element); + const inner = document.createElement(`div`); + inner.style[`position`] = `absolute`; + inner.style[`left`] = block.element.inner.style[`left`]; + inner.style[`top`] = block.element.inner.style[`top`]; + inner.style[`width`] = block.element.inner.style[`width`]; + element.appendChild(inner); + const text = document.createElement(`div`); + text.style[`font-family`] = block.element.inner.text.style[`font-family`]; + text.style[`font-size`] = block.element.inner.text.style[`font-size`]; + text.style[`font-weight`] = block.element.inner.text.style[`font-weight`]; + text.style[`font-style`] = block.element.inner.text.style[`font-style`]; + text.style[`color`] = block.element.inner.text.style[`color`]; + text.style[`text-align`] = block.element.inner.text.style[`text-align`]; + inner.appendChild(text); + newText = content.content; + if (Array.isArray(newText)) { + newText = newText.join(`

`); } - } else { - script.blocks[step.blocks].element.style[`display`] = showHide ? `block` : `none`; - } - }; + newText = newText.split(`\n`).join(`
`); + text.innerHTML = newText; + break; + case `image`: + element = document.createElement(`div`); + element.style[`position`] = `absolute`; + element.style[`opacity`] = `0.0`; + element.style[`left`] = block.element.style[`left`]; + element.style[`top`] = block.element.style[`top`]; + element.style[`width`] = block.element.style[`width`]; + element.style[`height`] = block.element.style[`height`]; + element.style[`background`] = block.element.style[`background`]; + element.style[`border`] = block.element.style[`border`]; + element.style[`border-radius`] = block.element.style[`border-radius`]; + block.container.appendChild(element); + element.style[`background`] = `url("${content.url}")`; + element.style[`background-size`] = `cover`; + break; + default: + throw Error(`Unknown content type: '${content.type}'`); + } - // Process a single transition step - const doTransitionStep = (block, target, step, nSteps, n, transition, onFinish) => { - transition(block, target, step, nSteps, n); - if (n < nSteps) { - setTimeout(function () { - doTransitionStep(block, target, step, nSteps, n + 1, transition, onFinish); - }, 40); + const animSteps = Math.round(step.duration * 25); + let animStep = 0; + const interval = setInterval(() => { + if (animStep < animSteps) { + const ratio = 0.5 - Math.cos(Math.PI * animStep / animSteps) / 2; + block.element.style[`opacity`] = 1.0 - ratio; + element.style[`opacity`] = ratio; + animStep++; } else { - onFinish(); + clearInterval(interval); + switch (content.type) { + case `text`: + block.element.inner.text.innerHTML = newText; + break; + case `image`: + block.element.style[`background`] = `url("${content.url}")`; + block.element.style[`background-size`] = `cover`; + break; + } + block.element.style[`opacity`] = 1.0 ; + element.parentNode.removeChild(element); + if (!continueFlag) { + doStep(); + } } - }; + }, speed === `normal` ? 80 : 0); + if (continueFlag) { + doStep(); + } + }; - // Compute a block size - const setComputedBlockSize = (block, target, nSteps, n) => { - const boundingRect = block.container.getBoundingClientRect(); - w = Math.round(boundingRect.width); - h = Math.round(boundingRect.height); - const width = block.properties.blockWidth * w / 1000; - const height = block.properties.blockHeight * h / 1000; - const endWidth = target.properties.blockWidth * w / 1000; - const endHeight = target.properties.blockHeight * h / 1000; - block.element.style[`width`] = - `${width + Math.round((endWidth - width) * n / nSteps)}px`; - block.element.style[`height`] = - `${height + Math.round((endHeight - height) * n / nSteps)}px`; - }; + // Compute a block size + const setComputedBlockSize = (block, target, ratio) => { + const boundingRect = block.container.getBoundingClientRect(); + w = Math.round(boundingRect.width); + h = Math.round(boundingRect.height); + const width = block.properties.blockWidth * w / 1000; + const height = block.properties.blockHeight * h / 1000; + const endWidth = target.properties.blockWidth * w / 1000; + const endHeight = target.properties.blockHeight * h / 1000; + block.element.style[`width`] = + `${width + (endWidth - width) * ratio}px`; + block.element.style[`height`] = + `${height + (endHeight - height) * ratio}px`; + }; - // Compute a block position - const setComputedBlockPosition = (block, target, nSteps, n) => { - const boundingRect = block.container.getBoundingClientRect(); - w = Math.round(boundingRect.width); - h = Math.round(boundingRect.height); - const left = block.properties.blockLeft * w / 1000; - const top = block.properties.blockTop * h / 1000; - const endLeft = target.properties.blockLeft * w / 1000; - const endTop = target.properties.blockTop * h / 1000; - block.element.style[`left`] = - left + Math.round((endLeft - left) * n / nSteps); - block.element.style[`top`] = - top + Math.round((endTop - top) * n / nSteps); - }; + // Compute a block position + const setComputedBlockPosition = (block, target, ratio) => { + const boundingRect = block.container.getBoundingClientRect(); + w = Math.round(boundingRect.width); + h = Math.round(boundingRect.height); + const left = block.properties.blockLeft * w / 1000; + const top = block.properties.blockTop * h / 1000; + const endLeft = target.properties.blockLeft * w / 1000; + const endTop = target.properties.blockTop * h / 1000; + block.element.style[`left`] = + left + (endLeft - left) * ratio; + block.element.style[`top`] = + top + (endTop - top) * ratio; + }; - // Compute a font size - const setComputedFontSize = (block, target, nSteps, n) => { - h = Math.round(script.element.getBoundingClientRect().height); - const size = block.properties.fontSize * h / 1000; - const endSize = target.properties.fontSize * h / 1000; - block.element.inner.text.style[`font-size`] = - `${size + Math.round((endSize - size) * n / nSteps)}px`; - }; + // Compute a font size + const setComputedFontSize = (block, target, ratio) => { + h = Math.round(block.container.getBoundingClientRect().height); + const size = block.properties.fontSize * h / 1000; + const endSize = target.properties.fontSize * h / 1000; + block.element.inner.text.style[`font-size`] = + `${size + Math.round((endSize - size) * ratio)}px`; + }; - // Compute a font color - const setComputedFontColor = (block, target, nSteps, n) => { - const color = block.spec.fontColor; - const endColor = target.spec.fontColor; - const rStart = parseInt(color.slice(1, 3), 16); - const gStart = parseInt(color.slice(3, 5), 16); - const bStart = parseInt(color.slice(5, 7), 16); - const rFinish = parseInt(endColor.slice(1, 3), 16); - const gFinish = parseInt(endColor.slice(3, 5), 16); - const bFinish = parseInt(endColor.slice(5, 7), 16); - const red = rStart + Math.round((rFinish - rStart) * n / nSteps); - const green = gStart + Math.round((gFinish - gStart) * n / nSteps); - const blue = bStart + Math.round((bFinish - bStart) * n / nSteps); - const r = ("0" + red.toString(16)).slice(-2); - const g = ("0" + green.toString(16)).slice(-2); - const b = ("0" + blue.toString(16)).slice(-2); - block.element.inner.text.style[`color`] = `#${r}${g}${b}`; - }; + // Compute a font color + const setComputedFontColor = (block, target, ratio) => { + const color = block.fontColor; + const endColor = target.fontColor; + const rStart = parseInt(color.slice(1, 3), 16); + const gStart = parseInt(color.slice(3, 5), 16); + const bStart = parseInt(color.slice(5, 7), 16); + const rFinish = parseInt(endColor.slice(1, 3), 16); + const gFinish = parseInt(endColor.slice(3, 5), 16); + const bFinish = parseInt(endColor.slice(5, 7), 16); + const red = rStart + Math.round((rFinish - rStart) * ratio); + const green = gStart + Math.round((gFinish - gStart) * ratio); + const blue = bStart + Math.round((bFinish - bStart) * ratio); + const r = ("0" + red.toString(16)).slice(-2); + const g = ("0" + green.toString(16)).slice(-2); + const b = ("0" + blue.toString(16)).slice(-2); + block.element.inner.text.style[`color`] = `#${r}${g}${b}`; + }; - const computeTransitionValues = (block, target, step, nSteps, n) => { - for (const type of step.type) { - switch (type) { - case `block size`: - setComputedBlockSize(block, target, nSteps, n); - break; - case `block position`: - setComputedBlockPosition(block, target, nSteps, n); - break; - case `font size`: - setComputedFontSize(block, target, nSteps, n); - break; - case `font color`: - setComputedFontColor(block, target, nSteps, n); - break; - default: - throw Error(`Unknown transition type: '${type}'`); + // Handle a single step of a transition + const doTransitionStep = (type, block, target, ratio) => { + switch (type) { + case `block size`: + setComputedBlockSize(block, target, ratio); + break; + case `block position`: + setComputedBlockPosition(block, target, ratio); + break; + case `font size`: + setComputedFontSize(block, target, ratio); + break; + case `font color`: + setComputedFontColor(block, target, ratio); + break; + default: + throw Error(`Unknown transition type: '${type}'`); + } + }; + + // Handle a transition + const doTransition = () => { + const animSteps = Math.round(step.duration * 25); + let animStep = 0; + const stepType = step.type; + const continueFlag = step.continue; + const block = script.blocks[step.block]; + const target = script.blocks[step.target]; + const interval = setInterval(() => { + if (animStep < animSteps) { + const ratio = 0.5 - Math.cos(Math.PI * animStep / animSteps) / 2; + if (Array.isArray(stepType)) { + for (const type of stepType) { + doTransitionStep(type, block, target, ratio); + } + } else { + doTransitionStep(type, block, target, ratio); + } + animStep++; + } else { + clearInterval(interval); + if (!continueFlag) { + doStep(); } } - }; + }, speed === `normal` ? 40 : 0); + if (continueFlag) { + doStep(); + } + }; - // Do the transition - const computeTransitionStep = (block, target, types, nSteps, n) => { - if (Array.isArray(types)) { - for (const type of types) { - computeTransitionValues(block, target, type, nSteps, n); + // Process a single step + const doStep = () => { + if (stepno < script.steps.length) { + step = script.steps[stepno++]; + while (!step.action) { + if (step.speed) { + speed = step.speed; } + else throw Error(`Unknown syntax: '${JSON.stringify(step, 0, 2)}'`); + step = script.steps[stepno++]; + } + if (step.comment) { + console.log(`Step ${stepno}: ${step.comment}`); } else { - computeTransitionValues(block, target, types, nSteps, n); + console.log(`Step ${stepno}: ${step.action}`); } - h = Math.round(script.element.getBoundingClientRect().height); - const size = block.properties.fontSize * h / 1000; - const endSize = target.properties.fontSize * h / 1000; - block.element.inner.text.style[`font-size`] = - `${size + Math.round((endSize - size) * n / nSteps)}px`; - }; + switch (step.action) { + case `set content`: + doSetContent(); + break; + case `show`: + doShowHide(true); + break; + case `hide`: + doShowHide(false); + break; + case `pause`: + doPause(); + break; + case `hold`: + doHold(); + break; + case `fade up`: + doFade(true); + break; + case `fade down`: + doFade(false); + break; + case `crossfade`: + doCrossfade(); + break; + case`transition`: + doTransition(); + break; + default: + throw Error(`Unknown action: '${step.action}'`); + } + } + else { + console.log(`Step ${stepno}: Finished`); + } + }; - const doTransition = (script, step, stepno) => { - const block = script.blocks[step.block]; - const target = script.blocks[step.target]; - const nSteps = Math.round(parseFloat(step.duration) * 25); - doTransitionStep(block, target, step, nSteps, 0, computeTransitionStep, function() { - if (step.wait) { - goto(script, stepno + 1); - } - }); - if (!step.wait) { - goto(script, stepno + 1); + // Initialization + const init = () => { + container.innerHTML = ``; + document.removeEventListener(`click`, init); + document.onkeydown = null; + if (script.title) { + document.title = script.title; + } + const height = Math.round(parseFloat(container.offsetWidth) * script.aspectH / script.aspectW); + container.style[`height`] = `${Math.round(height)}px`; + container.style[`position`] = `relative`; + container.style[`overflow`] = `hidden`; + container.style[`background-size`] = `cover`; + for (const property of containerStyles) { + if (typeof script.container[property] !== 'undefined') { + container.style[property] = script.container[property]; } - }; + } + initBlocks(container, script.blocks, script.defaults); + preloadImages(script.content); + stepno = 0; + doStep(); + } - // Process a single step - const step = script.steps[stepno]; - switch (step.action) { - case `set content`: - doSetContent(script, step); - goto(script, stepno + 1); - break; - case `create`: - doCreate(script, step); - goto(script, stepno + 1); - break; - case `show`: - doShowHide(script, step, true); - goto(script, stepno + 1); - break; - case `hide`: - doShowHide(script, step, false); - goto(script, stepno + 1); - break; - case `hold`: - setTimeout(function () { - goto(script, stepno + 1); - }, step.duration * 1000); - break; - case `fade up`: - doFade(script, step, stepno, true); - break; - case `fade down`: - doFade(script, step, stepno, false); - break; - case`transition`: - doTransition(script, step, stepno); + // Set the default mode + const modeValue = document.getElementById(`jp-mode`); + if (typeof modeValue !== 'undefined') { + mode = modeValue.innerText; + } + // Wait for a click/tap or a keypress to start + document.addEventListener(`click`, init); + document.onkeydown = function (event) { + document.onkeydown = null; + switch (event.code) { + case `Enter`: + mode = `auto`; break; default: - throw Error(`Unknown action: '${step.action}'`); + mode = `manual`; + break; + } + init(); + return true; + }; +}; + +window.onload = () => { + const createCORSRequest = (url) => { + let xhr = new XMLHttpRequest(); + if (`withCredentials` in xhr) { + + // Check if the XMLHttpRequest object has a "withCredentials" property. + // "withCredentials" only exists on XMLHTTPRequest2 objects. + xhr.open(`GET`, url, true); + + } else if (typeof XDomainRequest != `undefined`) { + + // Otherwise, check if XDomainRequest. + // XDomainRequest only exists in IE, and is IE's way of making CORS requests. + xhr = new XDomainRequest(); + xhr.open(`GET`, url); + + } else { + + // Otherwise, CORS is not supported by the browser. + xhr = null; + + } + return xhr; + }; + + const scriptElement = document.getElementById(`jp-script`); + if (scriptElement) { + const request = createCORSRequest(`${scriptElement.innerText}?v=${Math.floor(Date.now())}`); + if (!request) { + throw Error(`Unable to access the JSON script`); } + + request.onload = () => { + if (200 <= request.status && request.status < 400) { + const script = JSON.parse(request.responseText); + JSON_Presenter(document.getElementById(`jp-container`), script); + } else { + throw Error(`Unable to access the JSON script`); + } + }; + + request.onerror = () => { + throw Error(`Unable to access the JSON script`); + }; + + request.send(); } };