Skip to content

Commit 7d79a2c

Browse files
graham-trottgraham-trott
committed
Full-screen mode
1 parent 65fdbb5 commit 7d79a2c

File tree

2 files changed

+74
-114
lines changed

2 files changed

+74
-114
lines changed

‎iwsy/iwsy.js

Lines changed: 74 additions & 101 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@ const IWSY = (playerElement, text) => {
44

55
let player = playerElement;
66
let script = text;
7-
let clicked = false;
87

98
// Set up all the blocks
109
const setupBlocks = () => {
@@ -17,71 +16,14 @@ const IWSY = (playerElement, text) => {
1716
}
1817
};
1918

20-
const release = step => {
21-
player.style.cursor = 'none';
22-
document.removeEventListener(`click`, release);
23-
document.onkeydown = null;
24-
step.next();
25-
};
26-
27-
const doManual = step => {
28-
player.style.cursor = 'pointer';
29-
document.addEventListener(`click`, release);
30-
document.onkeydown = (event) => {
31-
switch (event.code) {
32-
case `Space`:
33-
case `ArrowRight`:
34-
document.onkeydown = null;
35-
release(step);
36-
break;
37-
case `ArrowLeft`:
38-
break;
39-
case `Enter`:
40-
player.style.cursor = 'none';
41-
document.addEventListener(`click`, onClick);
42-
script.runMode = `auto`;
43-
release(step);
44-
break;
45-
}
46-
return true;
47-
};
48-
};
49-
50-
const onClick = () => {
51-
clicked = true;
52-
};
53-
54-
const hold = step => {
55-
if (script.speed === `scan`) {
56-
step.next();
57-
return;
58-
}
59-
script.stepping = false;
60-
if (script.runMode === `manual`) {
61-
doManual(step);
62-
} else {
63-
if (clicked) {
64-
document.removeEventListener(`click`, onClick);
65-
clicked = false;
66-
script.runMode = `manual`;
67-
doManual(step);
68-
} else {
69-
setTimeout(() => {
70-
step.next();
71-
}, step.duration * 1000);
72-
}
73-
}
74-
};
75-
7619
const pause = step => {
7720
if (script.speed === `scan`) {
7821
step.next();
7922
return;
8023
}
81-
script.stepping = false;
8224
setTimeout(() => {
8325
step.next();
84-
}, step.duration * 1000);
26+
}, script.runMode === `manual` ? 0 : step.duration * 1000);
8527
};
8628

8729
// Get the bounding rectangle of a block
@@ -217,9 +159,6 @@ const IWSY = (playerElement, text) => {
217159
}
218160
}
219161
}
220-
if (script.speed === `scan` && step.index === script.scanTarget) {
221-
script.stepping = false;
222-
}
223162
step.next();
224163
};
225164

@@ -235,10 +174,11 @@ const IWSY = (playerElement, text) => {
235174
}
236175
}
237176
}
238-
if (script.speed === `scan` && step.index === script.scanTarget) {
239-
script.stepping = false;
177+
if (script.runMode === `manual`) {
178+
enterManualMode(step);
179+
} else {
180+
step.next();
240181
}
241-
step.next();
242182
};
243183

244184
const show = step => {
@@ -294,10 +234,13 @@ const IWSY = (playerElement, text) => {
294234
block.element.style.opacity = upDown ? 1 : 0;
295235
block.element.style.display = upDown ? `block` :`none`;
296236
}
297-
script.stepping = false;
298237
clearInterval(interval);
299238
if (!continueFlag) {
300-
step.next();
239+
if (script.runMode === `manual`) {
240+
enterManualMode(step);
241+
} else {
242+
step.next();
243+
}
301244
}
302245
}
303246
} catch(err) {
@@ -361,6 +304,7 @@ const IWSY = (playerElement, text) => {
361304
text.innerHTML = newText;
362305

363306
const animSteps = Math.round(step.duration * 25);
307+
const continueFlag = step.continue;
364308
let animStep = 0;
365309
const interval = setInterval(() => {
366310
if (animStep < animSteps) {
@@ -369,7 +313,6 @@ const IWSY = (playerElement, text) => {
369313
element.style.opacity = ratio;
370314
animStep++;
371315
} else {
372-
script.stepping = false;
373316
clearInterval(interval);
374317
block.textPanel.innerHTML = newText;
375318
if (content.url) {
@@ -378,12 +321,16 @@ const IWSY = (playerElement, text) => {
378321
block.element.style[`background-size`] = `cover`;
379322
block.element.style.opacity = 1.0 ;
380323
removeElement(element);
381-
if (!step.continue) {
382-
step.next();
324+
if (!continueFlag) {
325+
if (script.runMode === `manual`) {
326+
enterManualMode(step);
327+
} else {
328+
step.next();
329+
}
383330
}
384331
}
385332
}, 40);
386-
if (step.continue) {
333+
if (continueFlag) {
387334
step.next();
388335
}
389336
}
@@ -532,11 +479,14 @@ const IWSY = (playerElement, text) => {
532479
doTransitionStep(block, target, ratio);
533480
animStep++;
534481
} else {
535-
script.stepping = false;
536482
clearInterval(interval);
537483
setFinalState(block,target);
538484
if (!continueFlag) {
539-
step.next();
485+
if (script.runMode === `manual`) {
486+
enterManualMode(step);
487+
} else {
488+
step.next();
489+
}
540490
}
541491
}
542492
}, 40);
@@ -591,6 +541,7 @@ const IWSY = (playerElement, text) => {
591541
document.title = step.title;
592542
}
593543
if (step.css) {
544+
console.log(`Set styles at ${step.index}`);
594545
setHeadStyle(step.css.split(`%0a`).join(`\n`));
595546
}
596547
const aspect = step[`aspect ratio`];
@@ -763,14 +714,49 @@ const IWSY = (playerElement, text) => {
763714
document.head.appendChild(style);
764715
};
765716

717+
// Release the presentation to continue
718+
const release = () => {
719+
player.style.cursor = 'none';
720+
document.removeEventListener(`click`, release);
721+
document.onkeydown = null;
722+
doStep(script.nextStep);
723+
};
724+
725+
// Manual mode. Set up listeners and wait for the user
726+
const enterManualMode = step => {
727+
script.nextStep = step ? script.steps[step.index + 1] : script.steps[0];
728+
player.style.cursor = 'pointer';
729+
document.addEventListener(`click`, release);
730+
document.onkeydown = (event) => {
731+
switch (event.code) {
732+
case `Space`:
733+
case `ArrowRight`:
734+
document.onkeydown = null;
735+
script.runMode = `manual`;
736+
release();
737+
break;
738+
case `ArrowLeft`:
739+
break;
740+
case `Enter`:
741+
document.addEventListener(`click`, () => {
742+
script.runMode = `manual`;
743+
});
744+
player.style.cursor = 'none';
745+
script.runMode = `auto`;
746+
release();
747+
break;
748+
}
749+
return true;
750+
};
751+
};
752+
766753
// Initialize the script
767754
const initScript = () => {
768755
document.onkeydown = null;
769756
player.style.position = `relative`;
770757
player.style.overflow = `hidden`;
771758
player.style.cursor = 'none';
772759
script.speed = `normal`;
773-
script.singleStep = true;
774760
script.labels = {};
775761
script.stop = false;
776762
removeStyles();
@@ -788,16 +774,19 @@ const IWSY = (playerElement, text) => {
788774
script.labels[step.label] = index;
789775
}
790776
if (index < script.steps.length - 1) {
777+
const nextStep = script.steps[step.index + 1];
791778
step.next = () => {
792-
if (script.runMode == `auto` || (script.singleStep && script.speed === `scan`)) {
779+
if (script.runMode == `auto` || script.speed === `scan`) {
793780
setTimeout(() => {
794781
if (script.stop) {
795782
script.stop = false;
796783
restoreCursor();
797784
} else {
798-
doStep(script.steps[step.index + 1]);
785+
doStep(nextStep);
799786
}
800787
}, 0);
788+
} else {
789+
doStep(nextStep);
801790
}
802791
}
803792
}
@@ -817,7 +806,6 @@ const IWSY = (playerElement, text) => {
817806
show,
818807
hide,
819808
pause,
820-
hold,
821809
fadeup,
822810
fadedown,
823811
crossfade,
@@ -874,14 +862,10 @@ const IWSY = (playerElement, text) => {
874862

875863
// Go to a specified step number
876864
const gotoStep = (target) => {
877-
if (!script.stepping) {
878-
script.stepping = true;
879-
script.scanTarget = target;
880-
script.singleStep = true;
881-
script.runMode = `manual`;
882-
scan();
883-
}
884-
};
865+
script.scanTarget = target;
866+
script.runMode = `manual`;
867+
scan();
868+
};
885869

886870
// Show a block
887871
const block = blockIndex => {
@@ -940,6 +924,8 @@ const IWSY = (playerElement, text) => {
940924

941925
// Run the presentation
942926
const run = (mode, then) => {
927+
script.then = then;
928+
initScript();
943929
if (mode === `fullscreen`) {
944930
if (document.fullscreenElement) {
945931
document.exitFullscreen();
@@ -948,27 +934,18 @@ const IWSY = (playerElement, text) => {
948934
document.onfullscreenchange = () => {
949935
if (document.fullscreenElement) {
950936
player = document.fullscreenElement;
951-
runPresentation(then);
937+
script.runMode = `manual`;
938+
enterManualMode(null);
952939
} else {
953940
player = playerElement;
954941
}
955942
};
956943
}
957944
} else {
958-
runPresentation(then);
959-
}
960-
}
961-
962-
const runPresentation = then => {
963-
if (!script.stepping) {
964-
initScript();
965945
script.runMode = `auto`;
966-
script.speed = `normal`;
967-
script.singleStep = false;
968-
script.then = then;
969946
doStep(script.steps[0]);
970947
}
971-
};
948+
}
972949

973950
// Stop the run
974951
const stop = () => {
@@ -990,10 +967,6 @@ const IWSY = (playerElement, text) => {
990967

991968
///////////////////////////////////////////////////////////////////////////
992969

993-
document.removeEventListener(`click`, init);
994-
if (script.runMode === `auto`) {
995-
document.addEventListener(`click`, onClick);
996-
}
997970
setupShowdown();
998971
initScript();
999972
return {

‎iwsy/resources/ecs/steps.txt

Lines changed: 0 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -283,7 +283,6 @@ Restart:
283283
json add `show` to ActionNames
284284
json add `hide` to ActionNames
285285
json add `pause` to ActionNames
286-
json add `hold` to ActionNames
287286
json add `fade up` to ActionNames
288287
json add `fade down` to ActionNames
289288
json add `crossfade` to ActionNames
@@ -431,7 +430,6 @@ ReloadStepEditor:
431430
else if Action is `show` gosub to EditShow
432431
else if Action is `hide` gosub to EditHide
433432
else if Action is `pause` gosub to EditPause
434-
else if Action is `hold` gosub to EditHold
435433
else if Action is `fade up` gosub to EditFadeUp
436434
else if Action is `fade down` gosub to EditFadeDown
437435
else if Action is `crossfade` gosub to EditCrossfade
@@ -652,7 +650,6 @@ EditHide:
652650
return
653651

654652
EditPause:
655-
EditHold:
656653
gosub to EditDuration
657654
return
658655

@@ -863,11 +860,6 @@ CreateNewAction:
863860
begin
864861
put property `duration` of CurrentStep into Duration
865862
if Duration is empty set property `duration` of CurrentStep to 1
866-
end
867-
else if Action is `hold`
868-
begin
869-
put property `duration` of CurrentStep into Duration
870-
if Duration is empty set property `duration` of CurrentStep to 1
871863
end
872864
else if Action is `fade up`
873865
begin
@@ -979,11 +971,6 @@ SaveCurrentStep:
979971
end
980972
end
981973
else if Action is `pause`
982-
begin
983-
put property `duration` of CurrentStep into Duration
984-
set property `duration` of CurrentStep to the text of DurationInput
985-
end
986-
else if Action is `hold`
987974
begin
988975
index DurationInput to SelectedStep
989976
set property `duration` of CurrentStep to the text of DurationInput

0 commit comments

Comments
 (0)