scrawl-canvas

<!DOCTYPE html> <html> <head> <title>Demo Modules 001</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <meta name="viewport" content="width=device-width, target-densitydpi=160dpi, initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"> <link rel="stylesheet" media="all" href="../../docco.css" /> </head> <body> <div id="container"> <div id="background"></div> <ul id="jump_to"> <li> <a class="large" href="javascript:void(0);">Jump To …</a> <a class="small" href="javascript:void(0);">+</a> <div id="jump_wrapper"> <div id="jump_page_wrapper"> <div id="jump_page"> <a class="source" href="canvas-minimap.html"> ./demo/modules/canvas-minimap.js </a> <a class="source" href="canvas-scene-editor.html"> ./demo/modules/canvas-scene-editor.js </a> <a class="source" href="dom-entity-editor.html"> ./demo/modules/dom-entity-editor.js </a> <a class="source" href="entity-copy-paste.html"> ./demo/modules/entity-copy-paste.js </a> <a class="source" href="entity-manipulation-gui.html"> ./demo/modules/entity-manipulation-gui.js </a> <a class="source" href="entity-navigation.html"> ./demo/modules/entity-navigation.js </a> <a class="source" href="entity-ring-builder.html"> ./demo/modules/entity-ring-builder.js </a> <a class="source" href="london-crime-graphic.html"> ./demo/modules/london-crime-graphic.js </a> <a class="source" href="london-crime-lines.html"> ./demo/modules/london-crime-lines.js </a> <a class="source" href="london-crime-stacked-bars.html"> ./demo/modules/london-crime-stacked-bars.js </a> <a class="source" href="lottie-loader.html"> ./demo/modules/lottie-loader.js </a> <a class="source" href="simple-chart-frame-tests.html"> ./demo/modules/simple-chart-frame-tests.js </a> <a class="source" href="simple-chart-frame.html"> ./demo/modules/simple-chart-frame.js </a> <a class="source" href="simple-graph-lines.html"> ./demo/modules/simple-graph-lines.js </a> <a class="source" href="simple-graph-stacked-bars.html"> ./demo/modules/simple-graph-stacked-bars.js </a> <a class="source" href="wikipedia-views-spiral-chart.html"> ./demo/modules/wikipedia-views-spiral-chart.js </a> <a class="source" href="../snippets/animated-highlight-gradient-text-snippet.html"> ./demo/snippets/animated-highlight-gradient-text-snippet.js </a> <a class="source" href="../snippets/animated-hover-gradient-snippet.html"> ./demo/snippets/animated-hover-gradient-snippet.js </a> <a class="source" href="../snippets/animated-word-gradient-snippet.html"> ./demo/snippets/animated-word-gradient-snippet.js </a> <a class="source" href="../snippets/before-after-slider-infographic.html"> ./demo/snippets/before-after-slider-infographic.js </a> <a class="source" href="../snippets/bubbles-text-snippet.html"> ./demo/snippets/bubbles-text-snippet.js </a> <a class="source" href="../snippets/green-box-snippet.html"> ./demo/snippets/green-box-snippet.js </a> <a class="source" href="../snippets/jazzy-button-snippet.html"> ./demo/snippets/jazzy-button-snippet.js </a> <a class="source" href="../snippets/page-performance-snippet-test.html"> ./demo/snippets/page-performance-snippet-test.js </a> <a class="source" href="../snippets/page-performance-snippet.html"> ./demo/snippets/page-performance-snippet.js </a> <a class="source" href="../snippets/pan-image-snippet.html"> ./demo/snippets/pan-image-snippet.js </a> <a class="source" href="../snippets/placeholder-effect-snippet.html"> ./demo/snippets/placeholder-effect-snippet.js </a> <a class="source" href="../snippets/ripple-effect-snippet.html"> ./demo/snippets/ripple-effect-snippet.js </a> <a class="source" href="../snippets/risograph-text-gradient-snippet.html"> ./demo/snippets/risograph-text-gradient-snippet.js </a> <a class="source" href="../snippets/spotlight-text-snippet-test.html"> ./demo/snippets/spotlight-text-snippet-test.js </a> <a class="source" href="../snippets/spotlight-text-snippet.html"> ./demo/snippets/spotlight-text-snippet.js </a> <a class="source" href="../snippets/swirling-stripes-text-snippet.html"> ./demo/snippets/swirling-stripes-text-snippet.js </a> <a class="source" href="../snippets/text-snippet-helper.html"> ./demo/snippets/text-snippet-helper.js </a> <a class="source" href="../snippets/word-highlighter-snippet.html"> ./demo/snippets/word-highlighter-snippet.js </a> <a class="source" href="../snippets/worley-text-gradient-snippet.html"> ./demo/snippets/worley-text-gradient-snippet.js </a> </div> </div> </li> </ul> <ul class="sections"> <li id="section-1"> <div class="annotation"> <div class="sswrap "> <a class="ss" href="#section-1">§</a> </div> <h1 id="demo-modules-001">Demo Modules 001</h1> Scrawl-canvas modularized code - London crime charts Related files: <ul> <li><a href="../modules-001.html">London crime charts - main module</a></li> <li><a href="./london-crime-graphic.html">London crime graphic module</a></li> <li><a href="./london-crime-lines.html">London crime lines module</a></li> <li><a href="./london-crime-stacked-bars.html">London crime stacked bar module</a></li> <li><a href="./simple-chart-frame.html">Simple chart frame module</a></li> <li><a href="./simple-chart-frame-tests.html">Simple chart frame tests module</a></li> <li><a href="./simple-graph-lines.html">Simple graph lines module</a></li> <li><a href="./simple-graph-stacked-bars.html">Simple graph stacked bars module</a></li> </ul> </div> <div class="content"><div class='highlight'><pre> import * as scrawl from './source/scrawl.js'; import * as frame from './simple-chart-frame.js'; let testParent, testButton, testListeners, buttonListener, frameNamespace, frameBackground; const activateButton = function (frameName, canvas, host, button, background) { frameNamespace = frameName; testButton = button; testParent = host; frameBackground = background; buttonListener = scrawl.addListener('up', function (e) { if (e) { e.preventDefault(); e.stopPropagation(); let val = parseInt(testButton.value, 10); if (val) { killTests(); testButton.value = '0'; testButton.textContent = 'Show tests'; } else { buildTests(canvas, host); testButton.value = '1'; testButton.textContent = 'Hide tests'; } } }, testButton); }; const removeButton = function () { buttonListener(); if (parseInt(testButton.value, 10)) killTests(); testButton.remove(); testParent.remove(); }; const buildTests = function (canvas, host) { testParent.innerHTML = ` <div> <button id="build-button" class="controls">Build graph</button> <button id="kill-button" class="controls">Kill graph</button> <button id="show-button" class="controls">Show graph</button> <button id="hide-button" class="controls">Hide graph</button> </div> Title: <input type="text" value="" id="title-input" class="controls"/> Subtitle: <input type="text" value="" id="subtitle-input" class="controls"/> Y-axis - top: <input type="number" value="" id="y-top-input" class="controls"/> bottom: <input type="number" value="" id="y-bottom-input" class="controls"/> X-axis - left: <input type="text" value="" id="x-left-input" class="controls"/> right: <input type="text" value="" id="x-right-input" class="controls"/> Background: <select class="controls" id="crime-types"> <option value="Burglary">Burglary</option> <option value="Criminal Damage">Criminal Damage</option> <option value="Drugs">Drugs</option> <option value="Fraud or Forgery">Fraud or Forgery</option> <option value="Other Notifiable Offences">Other Notifiable Offences</option> <option value="Robbery">Robbery</option> <option value="Sexual Offences">Sexual Offences</option> <option value="Theft and Handling">Theft and Handling</option> <option value="Violence Against the Person">Violence Against the Person</option> </select> <button id="kill-tests" class="controls">Remove tests</button> `; let buildButton = testParent.querySelector('#build-button'), killButton = testParent.querySelector('#kill-button'), showButton = testParent.querySelector('#show-button'), hideButton = testParent.querySelector('#hide-button'), titleInput = testParent.querySelector('#title-input'), subtitleInput = testParent.querySelector('#subtitle-input'), yTop = testParent.querySelector('#y-top-input'), yBottom = testParent.querySelector('#y-bottom-input'), xLeft = testParent.querySelector('#x-left-input'), xRight = testParent.querySelector('#x-right-input'), crimeTypes = testParent.querySelector('#crime-types'), killTests = testParent.querySelector('#kill-tests'); let currentBackground, currentTitle, currentSubtitle, currentYTop, currentYBottom, currentXLeft, currentXRight; let setControlsToDefaults = () => { crimeTypes.value = currentBackground = frameBackground; titleInput.value = currentTitle = 'No title'; subtitleInput.value = currentSubtitle = 'No data selected'; yTop.value = currentYTop = '0'; yBottom.value = currentYBottom = '0'; xLeft.value = currentXLeft = '0'; xRight.value = currentXRight = '0'; buildButton.setAttribute('disabled', ''); showButton.setAttribute('disabled', ''); hideButton.removeAttribute('disabled'); titleInput.removeAttribute('disabled'); subtitleInput.removeAttribute('disabled'); crimeTypes.removeAttribute('disabled'); killButton.removeAttribute('disabled'); yTop.removeAttribute('disabled'); yBottom.removeAttribute('disabled'); xLeft.removeAttribute('disabled'); xRight.removeAttribute('disabled'); }; setControlsToDefaults(); let setNumbersHelper = (val, current, fn) => { val = (val) ? val : 0; if (current !== val) { current = val; fn(parseFloat(val).toLocaleString()); } }; testListeners = scrawl.addNativeListener(['click', 'input', 'change'], function (e) { if (e) { e.stopPropagation(); e.preventDefault(); if (e.target) { let target = e.target.id, val = e.target.value; switch (target) { case 'build-button' : frame.build(frameNamespace, canvas, frameBackground); frame.show(); setControlsToDefaults(); break; case 'kill-button' : frame.kill(); killButton.setAttribute('disabled', ''); showButton.setAttribute('disabled', ''); hideButton.setAttribute('disabled', ''); titleInput.setAttribute('disabled', ''); subtitleInput.setAttribute('disabled', ''); crimeTypes.setAttribute('disabled', ''); yTop.setAttribute('disabled', ''); yBottom.setAttribute('disabled', ''); xLeft.setAttribute('disabled', ''); xRight.setAttribute('disabled', ''); buildButton.removeAttribute('disabled'); break; case 'show-button' : frame.show(); showButton.setAttribute('disabled', ''); hideButton.removeAttribute('disabled'); break; case 'hide-button' : frame.hide(); hideButton.setAttribute('disabled', ''); showButton.removeAttribute('disabled'); break; case 'title-input' : if (currentTitle !== val) { currentTitle = val; frame.updateTitle(val); } break; case 'subtitle-input' : if (currentSubtitle !== val) { currentSubtitle = val; frame.updateSubtitle(val); } break; case 'y-top-input' : setNumbersHelper(val, currentYTop, frame.updateYTop); break; case 'y-bottom-input' : setNumbersHelper(val, currentYBottom, frame.updateYBottom); break; case 'x-left-input' : if (currentXLeft !== val) { currentXLeft = val; frame.updateXLeft(val); } break; case 'x-right-input' : if (currentXRight !== val) { currentXRight = val; frame.updateXRight(val); } break; case 'crime-types' : if (currentBackground !== val) { currentBackground = val; frame.updateBackground(val); } break; case 'kill-tests' : removeButton(); break; } } } }, '.controls'); }; const killTests = function () { testListeners(); [...testParent.childNodes].forEach(el => el.remove()); }; export { activateButton, removeButton, };</pre></div></div> </li> </ul> </div> </body> </html>