typescript-playground-presentation-mode
Version:
Present your TypeScript talk directly in the playground, powered by GitHub gists!
89 lines (84 loc) • 4.36 kB
JavaScript
define(function () { 'use strict';
/** Get a relative URL for something in your dist folder depending on if you're in dev mode or not */
/** Use this to make a few dumb element generation funcs */
var el = function (str, el, container) {
var para = document.createElement(el);
para.innerHTML = str;
container.appendChild(para);
};
var slidePlugin = {
id: "present",
displayName: "Present",
didMount: function (_sandbox, container) {
var p = function (str) { return el(str, "p", container); };
var h4 = function (str) { return el(str, "h4", container); };
h4("Create a Slideshow");
p("Use Markdown powered by GitHub Gists");
p("This plugin adds <a href='https://github.com/hakimel/reveal.js'>Reveal.js</a> support to the TypeScript Playground, slides have the ability to change the code inside the playground.");
h4("Get Started");
p("Create a gist with an <code>index.md</code> using a set of <code>---</code>s to split between slides. You can find out more about the syntax <a href=\"https://github.com/orta/playground-slides\">here</a>. If you want to demo the slides, click here to try <a href=\"#\" onclick='document.getElementById(\"gist-input\").value = \"https://gist.github.com/orta/d7dbd4cdb8d1f99c52871fb15db620bc\"'>an existing deck</a>.");
var startButton = document.createElement("input");
var gistForm = createGistInputForm(startButton);
container.appendChild(gistForm);
p("Then when you're ready, hit start below. This will start the slides and scroll you to the top of the page. You can scroll (down with the mouse, or press escape) to get back to the code below it.");
startButton.type = "button";
startButton.value = "Start slideshow";
container.appendChild(startButton);
var firstRunSetup = function () {
var re = window.require;
var isDev = document.location.host.includes("localhost");
// https://unpkg.com/browse/typescript-playground-presentation-mode@0.0.1/dist/x.js => unpkg/browse/typescript-playground-presentation-mode@0.0.1/dist/x
var prefix = isDev ? "local" : "unpkg/typescript-playground-presentation-mode/dist";
re([prefix + "/slideshow"], function (slides) {
// @ts-ignore sets the window.Reveal for the upcoming plugins
window.Reveal = slides.revealJS;
re([prefix + "/markdown"], function () {
slides.startSlides(localStorage.getItem("playground-slides-gist-href"));
// p.textContent = "In slideshow, scroll up to get back to your slides."
startButton.disabled = true;
});
});
};
startButton.onclick = function () {
firstRunSetup();
};
}
};
var createGistInputForm = function (startButton) {
var form = document.createElement("form");
var gistHref = document.createElement("input");
gistHref.type = "url";
gistHref.id = "gist-input";
gistHref.placeholder = "https://gist.github.com/.../...";
var storedGistHref = localStorage.getItem("playground-slides-gist-href");
gistHref.value = storedGistHref;
var updateState = function (_a) {
var enable = _a.enable;
if (enable) {
gistHref.classList.add("good");
startButton.disabled = false;
}
else {
gistHref.classList.remove("good");
startButton.disabled = true;
}
};
var textUpdate = function (e) {
var href = e.target.value.toLowerCase().trim();
localStorage.setItem("playground-slides-gist-href", href);
updateState({ enable: isGist(href) });
};
gistHref.onkeyup = textUpdate;
gistHref.onpaste = textUpdate;
gistHref.onchange = textUpdate;
gistHref.onblur = textUpdate;
gistHref.oninput = textUpdate;
form.appendChild(gistHref);
updateState({ enable: isGist(storedGistHref) });
return form;
};
var isGist = function (str) {
return str && str.startsWith("https://gist.github.com/") && str.split("/").length === 5;
};
return slidePlugin;
});