function $(e) { return document.querySelector(e); } function $$(e) { return document.createElement(e); } var predefinedStyleList = [ // style 0 `.sl-tutorial-frame { padding: 2vh 2vw; overflow: scroll; color: #220; background-color: #ffe; } .sl-tutorial-p { margin: 2vh 0; text-align: justify; } .sl-tutorial-button { display: inline-block; margin: 4vh 2vw; padding: 2vh 5vw; text-align: center; color: #eee; background-color: #333; } .sl-tutorial-title { margin: 4vh 4vw; } .sl-tutorial-code { margin: 2vh 0; border-left: 5px solid #f44; padding: 2vh 2vw; font-family: monospace; font-size: small; overflow: scroll; color: #033; background-color: #fcb; } .sl-tutorial-plot { width: 100%; border: 1px solid black; } .sl-tutorial-reference { display: block; margin: 2vh 0 2vh 4vw; color: #22f; } ` ]; function Tutorial() { this.docElem = $$('div'); this.docElem.id = 'sl-tutorial'; this.frames = []; this.style = $$('style'); this.docElem.appendChild(this.style); this.add = function(frame) { frame.parent = this; this.frames.push(frame); this.docElem.appendChild(frame.docElem); if(this.frames.length > 1) frame.docElem.style.display = 'none'; } this.goToFrame = function(frame) { this.frames.map(function(fr) { fr.docElem.style.display = 'none'; }); frame.docElem.style.display = 'block'; } this.setStyle = function(id) { this.style.innerText = predefinedStyleList[id]; } this.setStyle(0); } function Frame() { this.docElem = $$('div'); this.docElem.className = 'sl-tutorial-frame'; this.objects = []; this.add = function(obj) { obj.parent = this; this.objects.push(obj); this.docElem.appendChild(obj.docElem); } } function Paragraph(params) { this.docElem = $$('p'); this.docElem.className = 'sl-tutorial-p'; this.docElem.innerHTML = params.text || 'paragraph for some text'; } /* params: action: -function to excute on click- toFrame: -go to that frame after action- */ function NavButton(params) { this.docElem = $$('div'); this.docElem.className = 'sl-tutorial-button'; this.docElem.innerHTML = params.text || 'next'; this.action = params.action || function() {}; this.toFrame = params.toFrame; var scope = this; if(this.toFrame) this.docElem.onclick = function() { scope.action(); scope.parent.parent.goToFrame(scope.toFrame); } else this.docElem.onclick = function() { scope.action(); } } function Title(params) { this.docElem = $$('h2'); this.docElem.className = 'sl-tutorial-title'; this.docElem.innerHTML = params.text || 'Some title'; } function Code(params) { this.docElem = $$('pre'); this.docElem.className = 'sl-tutorial-code'; if(params.text) this.docElem.innerHTML = params.text. replace(/(this|var|new)/g, '$1'); else this.docElem.innerText = '//some code here'; } /* params: width: -pixels wide- height: -pixels tall- ratio: -width/height- f: -y = f(x)- centerx: -x offset for dimension- centery: -y offset for dimension- bg: -background color- line: -line color- linew: -line width- */ function Plot(params) { this.docElem = $$('canvas'); this.docElem.className = 'sl-tutorial-plot'; this.docElem.width = params.width || 500; this.docElem.height = params.height || 300; this.ctx = this.docElem.getContext('2d'); this.ctx.fillStyle = params.bg || 'white'; this.ctx.strokeStyle = params.line || 'black'; this.ctx.lineWidth = params.linew || 1; this.f = params.f || function(x) { return x }; this.offsetX = params.centerx || 0; this.offsetY = params.centery || 0; this.render = function() { const W = this.docElem.width; const H = this.docElem.height; const X = this.offsetX; const Y = this.offsetY; this.ctx.fillRect(0, 0, W, H); this.ctx.beginPath(); for(var i = 0; i < W; i++) this.ctx.lineTo(i, H-this.f(i)); this.ctx.stroke(); } this.render(); } /* params: text: -text to display- href: -link to external source- toFrame: -go to frame on click- */ function Reference(params) { this.docElem = $$('a'); this.docElem.className = 'sl-tutorial-reference'; this.docElem.href = params.href || '#'; this.docElem.innerHTML = params.text || 'reference goes here'; this.toFrame = params.toFrame; if(params.toFrame) { var scope = this; this.docElem.onclick = function() { scope.parent.parent.goToFrame(scope.toFrame); } } } window.onload = function() { var T = new Tutorial(); // frame definitions var f = []; for(var i = 0; i < 4; i++) T.add(f[i] = new Frame()); // first frame objects f[0].add(new Title({ text:'Tutorial creator API\nreference' })); f[0].add(new Reference({ text:'core logic explanation', toFrame:f[1] })); f[0].add(new Reference({ text:'generic functions', toFrame:f[2] })); f[0].add(new Reference({ text:'objects properties', toFrame:f[3] })); // core logic f[1].add(new Title({text:'Core logic'})); f[1].add(new Paragraph({ text:'All your tutorial is dividing by several logic parts and holding in frames. Each frame can contain a title, textual paragraphs, navigation buttons, references to other frames and other objects (even math plot).' })); f[1].add(new Paragraph({ text:'here is basic example of creating a tutorial with only one frame that includes a title and description:' })); f[1].add(new Code({ text:`var tutorial = new Tutorial(); var frame = new Frame(); // create title var title = new Title({text:'Some title'}); // create text var text = new Paragraph({text:'Description'}); // pack everything frame.add(title); frame.add(text); tutorial.add(frame);` })); f[1].add(new NavButton({ text:'back', toFrame:f[0] })); f[1].add(new NavButton({ text:'next', toFrame:f[2] })); // generic functions f[2].add(new Title({text:'Generic functions'})); f[2].add(new Paragraph({ text:'→ function Tutorial()
Core function that creates tutorial object.' })); f[2].add(new Paragraph({ text:'→ function Frame()
Core function that creates frame object.' })); f[2].add(new Paragraph({ text:'→ function Title(params)
Creates frame title.' })); f[2].add(new Paragraph({ text:'→ function Paragraph(params)
Creates textual content wrapped in paragraph.' })); f[2].add(new Paragraph({ text:'→ function NavButton(params)
Creates navigation button.' })); f[2].add(new Paragraph({ text:'→ function Code(params)
Creates code example.' })); f[2].add(new NavButton({ text:'back', toFrame:f[0] })); f[2].add(new NavButton({ text:'previous', toFrame:f[1] })); f[2].add(new NavButton({ text:'next', toFrame:f[3] })); // object properties f[3].add(new Title({text:'Object properties'})); f[3].add(new Paragraph({ text:'When you are creating any content for frame you can pass special parameters as a function argument.' })); f[3].add(new Code({ text:'var title = new Title({text:"API"});' })); f[3].add(new Paragraph({ text:'Here you can find a list of commonly used parameters:' })); f[3].add(new Paragraph({ text:'→ text: "some text to display"
Can be applied in textual elements such as title, paragraph, navigation button, code and etc.' })); f[3].add(new Paragraph({ text:'→ toFrame: frameRef
Used on navigation buttons and references to link them with some tutorial\'s frame. After clicking on element with defined toFrame property given frame will be loaded.' })); f[3].add(new NavButton({ text:'back', toFrame:f[0] })); f[3].add(new NavButton({ text:'previous', toFrame:f[2] })); document.body.appendChild(T.docElem); }