%-------------------------------%Notebook%--------------------------------%
HaveToSaveAs: false
ObjectFields:
  - Objects
  - Symbols
  - Storage
  - ExcalidrawImages
  - RuntimeCache
  - ZIPArchive
Quick: true
%-------------------------------------------------------------------------%


%---------------------------------%Cells%---------------------------------%
Props:
  Hidden: true
Type: Input
%-------------------------------------------------------------------------%
.md
# Timer for presentations
This produces a widget, which can be put on any slide. It will appear as a global overlay element that appears every minute showing the time left for the speaker.

The lifecycle is automated.

%-------------------------------------------------------------------------%
Display: markdown
Type: Output
%-------------------------------------------------------------------------%
# Timer for presentations
This produces a widget, which can be put on any slide. It will appear as a global overlay element that appears every minute showing the time left for the speaker.

The lifecycle is automated.

%-------------------------------------------------------------------------%
Props:
  Hidden: true
Type: Input
%-------------------------------------------------------------------------%
.md
Define a unique symbol for our Javascript helpers

%-------------------------------------------------------------------------%
Display: markdown
Type: Output
%-------------------------------------------------------------------------%
Define a unique symbol for our Javascript helpers

%-------------------------------------------------------------------------%
Props:
  InitGroup: true
Type: Input
%-------------------------------------------------------------------------%
TimerClass = Unique[];

%-------------------------------------------------------------------------%
Props:
  Hidden: true
Type: Input
%-------------------------------------------------------------------------%
.md
Javascript code in a form of a WLX component:

%-------------------------------------------------------------------------%
Display: markdown
Type: Output
%-------------------------------------------------------------------------%
Javascript code in a form of a WLX component:

%-------------------------------------------------------------------------%
Props:
  InitGroup: true
Type: Input
%-------------------------------------------------------------------------%
.wlx
TimerScript := <script type="module">

core['<TimerClass/>'] = async (args, env) => {
  const time = await interpretate(args[0], env);
  const dom = await interpretate(args[1], env);
  const color = await interpretate(args[2], env);

  const face = document.createElement('div');
  face.innerText = time;
  face.className = "slide-number";
  face.style.position = 'absolute';
  face.style.left = '1rem';
  face.style.color = color;
  face.style.zIndex = 10000;
  
  dom.appendChild(face);
  setTimeout(() => {
    face.remove();
  }, 5000);
}

</script>;

%-------------------------------------------------------------------------%
Props:
  Hidden: true
Type: Input
%-------------------------------------------------------------------------%
.md
Widget itself is below. It attaches an event listener to a slide, once the presentation is visible it requests DOM element of the whole presentation container and periodically shows the time on it. 

%-------------------------------------------------------------------------%
Display: markdown
Type: Output
%-------------------------------------------------------------------------%
Widget itself is below. It attaches an event listener to a slide, once the presentation is visible it requests DOM element of the whole presentation container and periodically shows the time on it. 

%-------------------------------------------------------------------------%
Props:
  InitGroup: true
Type: Input
%-------------------------------------------------------------------------%
swatchToHex[swatch_] := 
 StringJoin["#", IntegerString[Round[255 Level[RGBColor[swatch], 1]], 16, 2]]

%-------------------------------------------------------------------------%
Props:
  InitGroup: true
Type: Input
%-------------------------------------------------------------------------%
.wlx

Timer[OptionsPattern[]] := With[{
  event = CreateUUID[],
  task = Unique["timer1"],
  startTime = Unique["timer2"],
  endTime = Unique["timer3"],
  color = OptionValue["Color"],
  window = Unique["window3"],
  period = OptionValue["Period"],
  timeout = QuantityMagnitude[OptionValue["Timeout"], "Seconds"]
},{
  show = Function[time, FrontSubmit[TimerClass[
    time,
    FrontSlidesSelected["getRevealElement", {}],
    swatchToHex[color]
  ], "Window"->window] ]
},

EventHandler[event, 
{"Mounted" -> Function[Null,
  startTime = AbsoluteTime[];
  endTime = AbsoluteTime[] + timeout;
  window = CurrentWindow[];
  task = SetInterval[If[AbsoluteTime[] > endTime, 
    TaskRemove[task];
    EventRemove[event];
    ClearAll[endTime, startTime];
  ,
    show[DateString[AbsoluteTime[] - startTime, {"Minute", ":", "Second"}]]
  ], period];
], "Destroy" -> Function[Null,
  TaskRemove[task];
  EventRemove[event];
  ClearAll[endTime, startTime];
]}];

<div>
  <TimerScript/>
  <SlideEventListener Id={event}/>
</div>
];

Options[Timer] = {"Timeout" -> Quantity[5, "Minutes"], "Color"->Gray, "Period" -> Quantity[1, "Minutes"]};

%-------------------------------------------------------------------------%
Props:
  Hidden: true
Type: Input
%-------------------------------------------------------------------------%
.md
## Test
Test locally

%-------------------------------------------------------------------------%
Display: markdown
Type: Output
%-------------------------------------------------------------------------%
## Test
Test locally

%-------------------------------------------------------------------------%
Type: Input
%-------------------------------------------------------------------------%
.slide

# Slide

<Timer Timeout={Quantity[5, "Minutes"], Period={Quantity[15, "Seconds"]}/>

%-------------------------------------------------------------------------%
Props:
  Hidden: true
Type: Input
%-------------------------------------------------------------------------%
.md
__Exports__

%-------------------------------------------------------------------------%
Display: markdown
Type: Output
%-------------------------------------------------------------------------%
__Exports__

%-------------------------------------------------------------------------%
Type: Input
%-------------------------------------------------------------------------%
Timer

%------------------------------%EndOfCells%-------------------------------%



%--------------------------------%Objects%--------------------------------%
%-----------------------------%EndOfObjects%------------------------------%



%--------------------------------%Symbols%--------------------------------%
%-----------------------------%EndOfSymbols%------------------------------%



%--------------------------------%Storage%--------------------------------%
%-----------------------------%EndOfStorage%------------------------------%



%---------------------------%ExcalidrawImages%----------------------------%
%-------------------------%EndOfExcalidrawImages%-------------------------%



%-----------------------------%RuntimeCache%------------------------------%
%---------------------------%EndOfRuntimeCache%---------------------------%



%------------------------------%ZIPArchive%-------------------------------%
%----------------------------%EndOfZIPArchive%----------------------------%





%-----------------------------%EndOfNotebook%-----------------------------%