Skip to content

Commit 09cee44

Browse files
graham-trottgraham-trott
committed
Update presenter
1 parent 5a2de12 commit 09cee44

File tree

2 files changed

+72
-82
lines changed

2 files changed

+72
-82
lines changed

‎presenter/demo.json

Lines changed: 8 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -108,25 +108,14 @@
108108
"duration": 4
109109
},
110110
{
111-
"comment": "------------------------------------ Move the title",
112-
"action": "transform",
113-
"type": "block",
114-
"block": "title",
115-
"target": "title 2",
116-
"duration": 1
117-
},
118-
{
119-
"comment": "------------------------------ Change the title color",
120-
"action": "transform",
121-
"type": "font color",
122-
"block": "title",
123-
"target": "title 2",
124-
"duration": 1
125-
},
126-
{
127-
"comment": "------------------------------------ Resize the title",
128-
"action": "transform",
129-
"type": "font size",
111+
"comment": "-------------------------------- Transition the title",
112+
"action": "transition",
113+
"type": [
114+
"block position",
115+
"block size",
116+
"font color",
117+
"font size"
118+
],
130119
"block": "title",
131120
"target": "title 2",
132121
"duration": 1,

‎presenter/jsonPresenter.js

Lines changed: 64 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -112,7 +112,9 @@ const JSON_Presenter = {
112112
doStep: (script, stepno) => {
113113
const goto = (script, stepno) => {
114114
if (stepno < script.steps.length) {
115-
JSON_Presenter.doStep(script, stepno);
115+
setTimeout(function () {
116+
JSON_Presenter.doStep(script, stepno);
117+
}, 1);
116118
}
117119
};
118120

@@ -252,57 +254,59 @@ const JSON_Presenter = {
252254
}
253255
};
254256

255-
// Process a single transform step
256-
const doTransformStep = (block, target, nSteps, n, transform, onFinish) => {
257-
transform(block, target, nSteps, n);
257+
// Process a single transition step
258+
const doTransitionStep = (block, target, step, nSteps, n, transition, onFinish) => {
259+
transition(block, target, step, nSteps, n);
258260
if (n < nSteps) {
259261
setTimeout(function () {
260-
doTransformStep(block, target, nSteps, n + 1, transform, onFinish);
262+
doTransitionStep(block, target, step, nSteps, n + 1, transition, onFinish);
261263
}, 40);
262264
} else {
263265
onFinish();
264266
}
265267
};
266268

267-
// Transform block
268-
const transformBlock = (block, target, nSteps, n) => {
269-
const boundingRect = script.element.getBoundingClientRect();
269+
// Compute a block size
270+
const setComputedBlockSize = (block, target, nSteps, n) => {
271+
const boundingRect = block.container.getBoundingClientRect();
270272
w = Math.round(boundingRect.width);
271273
h = Math.round(boundingRect.height);
272-
const left = block.properties.blockLeft * w / 1000;
273-
const top = block.properties.blockTop * h / 1000;
274274
const width = block.properties.blockWidth * w / 1000;
275275
const height = block.properties.blockHeight * h / 1000;
276-
const endLeft = target.properties.blockLeft * w / 1000;
277-
const endTop = target.properties.blockTop * h / 1000;
278276
const endWidth = target.properties.blockWidth * w / 1000;
279277
const endHeight = target.properties.blockHeight * h / 1000;
280-
block.element.style[`left`] =
281-
left + Math.round((endLeft - left) * n / nSteps);
282-
block.element.style[`top`] =
283-
top + Math.round((endTop - top) * n / nSteps);
284278
block.element.style[`width`] =
285279
`${width + Math.round((endWidth - width) * n / nSteps)}px`;
286280
block.element.style[`height`] =
287281
`${height + Math.round((endHeight - height) * n / nSteps)}px`;
288282
};
289283

290-
const doTransformBlock = (script, step, stepno) => {
291-
const block = script.blocks[step.block];
292-
const target = script.blocks[step.target];
293-
const nSteps = Math.round(parseFloat(step.duration) * 25);
294-
doTransformStep(block, target, nSteps, 0, transformBlock, function() {
295-
if (step.wait) {
296-
goto(script, stepno + 1);
297-
}
298-
});
299-
if (!step.wait) {
300-
goto(script, stepno + 1);
301-
}
284+
// Compute a block position
285+
const setComputedBlockPosition = (block, target, nSteps, n) => {
286+
const boundingRect = block.container.getBoundingClientRect();
287+
w = Math.round(boundingRect.width);
288+
h = Math.round(boundingRect.height);
289+
const left = block.properties.blockLeft * w / 1000;
290+
const top = block.properties.blockTop * h / 1000;
291+
const endLeft = target.properties.blockLeft * w / 1000;
292+
const endTop = target.properties.blockTop * h / 1000;
293+
block.element.style[`left`] =
294+
left + Math.round((endLeft - left) * n / nSteps);
295+
block.element.style[`top`] =
296+
top + Math.round((endTop - top) * n / nSteps);
302297
};
303298

304-
// Transform font color
305-
const setComputedColor = (block, target, nSteps, n) => {
299+
// Compute a font size
300+
const setComputedFontSize = (block, target, nSteps, n) => {
301+
h = Math.round(script.element.getBoundingClientRect().height);
302+
const size = block.properties.fontSize * h / 1000;
303+
const endSize = target.properties.fontSize * h / 1000;
304+
block.element.inner.text.style[`font-size`] =
305+
`${size + Math.round((endSize - size) * n / nSteps)}px`;
306+
};
307+
308+
// Compute a font color
309+
const setComputedFontColor = (block, target, nSteps, n) => {
306310
const color = block.spec.fontColor;
307311
const endColor = target.spec.fontColor;
308312
const rStart = parseInt(color.slice(1, 3), 16);
@@ -320,34 +324,48 @@ const JSON_Presenter = {
320324
block.element.inner.text.style[`color`] = `#${r}${g}${b}`;
321325
};
322326

323-
const doTransformFontColor = (script, step, stepno) => {
324-
const block = script.blocks[step.block];
325-
const target = script.blocks[step.target];
326-
const nSteps = Math.round(parseFloat(step.duration) * 25);
327-
doTransformStep(block, target, nSteps, 0, setComputedColor, function() {
328-
if (step.wait) {
329-
goto(script, stepno + 1);
327+
const computeTransitionValues = (block, target, step, nSteps, n) => {
328+
for (const type of step.type) {
329+
switch (type) {
330+
case `block size`:
331+
setComputedBlockSize(block, target, nSteps, n);
332+
break;
333+
case `block position`:
334+
setComputedBlockPosition(block, target, nSteps, n);
335+
break;
336+
case `font size`:
337+
setComputedFontSize(block, target, nSteps, n);
338+
break;
339+
case `font color`:
340+
setComputedFontColor(block, target, nSteps, n);
341+
break;
342+
default:
343+
throw Error(`Unknown transition type: '${type}'`);
330344
}
331-
});
332-
if (!step.wait) {
333-
goto(script, stepno + 1);
334345
}
335346
};
336347

337-
// Transform font size
338-
const setComputedFontSize = (block, target, nSteps, n) => {
348+
// Do the transition
349+
const computeTransitionStep = (block, target, types, nSteps, n) => {
350+
if (Array.isArray(types)) {
351+
for (const type of types) {
352+
computeTransitionValues(block, target, type, nSteps, n);
353+
}
354+
} else {
355+
computeTransitionValues(block, target, types, nSteps, n);
356+
}
339357
h = Math.round(script.element.getBoundingClientRect().height);
340358
const size = block.properties.fontSize * h / 1000;
341359
const endSize = target.properties.fontSize * h / 1000;
342360
block.element.inner.text.style[`font-size`] =
343361
`${size + Math.round((endSize - size) * n / nSteps)}px`;
344362
};
345363

346-
const doTransformFontSize = (script, step, stepno) => {
364+
const doTransition = (script, step, stepno) => {
347365
const block = script.blocks[step.block];
348366
const target = script.blocks[step.target];
349367
const nSteps = Math.round(parseFloat(step.duration) * 25);
350-
doTransformStep(block, target, nSteps, 0, setComputedFontSize, function() {
368+
doTransitionStep(block, target, step, nSteps, 0, computeTransitionStep, function() {
351369
if (step.wait) {
352370
goto(script, stepno + 1);
353371
}
@@ -357,23 +375,6 @@ const JSON_Presenter = {
357375
}
358376
};
359377

360-
// Transform an element
361-
const doTransform = (script, step, stepno) => {
362-
switch (step.type) {
363-
case `block`:
364-
doTransformBlock(script, step, stepno);
365-
break;
366-
case `font color`:
367-
doTransformFontColor(script, step, stepno);
368-
break;
369-
case `font size`:
370-
doTransformFontSize(script, step, stepno);
371-
break;
372-
default:
373-
throw Error(`Unknown transform type: '${step.type}'`);
374-
}
375-
};
376-
377378
// Process a single step
378379
const step = script.steps[stepno];
379380
switch (step.action) {
@@ -404,8 +405,8 @@ const JSON_Presenter = {
404405
case `fade down`:
405406
doFade(script, step, stepno, false);
406407
break;
407-
case`transform`:
408-
doTransform(script, step, stepno);
408+
case`transition`:
409+
doTransition(script, step, stepno);
409410
break;
410411
default:
411412
throw Error(`Unknown action: '${step.action}'`);

0 commit comments

Comments
 (0)