mirror of
https://github.com/lovasoa/whitebophir
synced 2024-09-20 14:21:54 +00:00
57a02c42d6
* include promise polyfill * remove es6 * add viewBox to every icon * change self closing to explicitly closing tags * replace window.scroll.. with document.documentElement.scroll.. * verify document.activeElement.blur() is a function before calling * fix visuals of color chooser (colorpicker still sometimes buggy) * do not attach to mouseleave event in IE * attempt removal with usecapture true in IE as well, this fixes the tool switching issue * fix text tool for IE * fix cursor for IE * change curMode to boolean and rename to 'active' * replace minified canvascolor with unminified code * replace if else structure with switch statement * compile polyfill for each browser individually * remove static polyfills from board.js * Fix broken js reference * Fix unused variable and empty console log * Allow serving non-minified polyfills for easier debugging * Add proper caching for polyfill.js This request is on the critical path, we should try to make it fast * Include more polyfills All the DOM polyfills were missing * Update dependencies * Add missing polyfill Our custom polyfill was deleted, but the one from polyfill-library hadn't been added * Remove feature detection for Node.contains We now have the function in the polyfills * Update polyfill caching logic * Remove content-Length header Co-authored-by: @lovasoa
103 lines
No EOL
4.1 KiB
HTML
103 lines
No EOL
4.1 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="{{language}}">
|
|
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<title>{{board}} | WBO | {{translations.collaborative_whiteboard}}</title>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<link rel="stylesheet" type="text/css" href="../board.css" />
|
|
<script src="../socket.io/socket.io.js"></script>
|
|
<meta name="description" content="{{translations.tagline}}'" />
|
|
<meta name="keywords"
|
|
content="{{translations.collaborative_whiteboard}},online,draw,paint,shared,realtime,wbo,whitebophir" />
|
|
<link rel="apple-touch-icon" href="../favicon.svg">
|
|
<link rel="icon" type="image/x-icon" sizes="16x16" href="../favicon.ico">
|
|
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0" />
|
|
<meta property="og:title" content="{{board}} board on WBO" />
|
|
<meta property="og:url" content="{{baseUrl}}/boards/{{boardUriComponent}}" />
|
|
<meta property="og:image" content="{{baseUrl}}/preview/{{boardUriComponent}}" />
|
|
<link rel="canonical" href="{{boardUriComponent}}?lang={{language}}" />
|
|
{{#languages}}
|
|
<link rel="alternate" hreflang="{{.}}" href="{{../boardUriComponent}}?lang={{.}}" />
|
|
{{/languages}}
|
|
<script src="../polyfill.min.js"></script>
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<div id="board">
|
|
<svg id="canvas" width="500" height="500" version="1.1" xmlns="http://www.w3.org/2000/svg">
|
|
<defs id="defs"></defs>
|
|
<g id="drawingArea"></g>
|
|
<g id="cursors"></g>
|
|
</svg>
|
|
</div>
|
|
|
|
<div id="loadingMessage">{{translations.loading}}</div>
|
|
|
|
<div id="menu">
|
|
<div id="menuItems">
|
|
<ul id="tools" class="tools">
|
|
<li class="tool" tabindex="-1">
|
|
<img class="tool-icon" width="35" height="35" src="" alt="icon" /><span class="tool-name"></span>
|
|
</li>
|
|
</ul>
|
|
|
|
<ul class="tools" id="settings">
|
|
<li class="tool" tabindex="-1">
|
|
<input class="tool-icon" type="color" id="chooseColor" value="#1913B0" />
|
|
<label class="tool-name" for="chooseColor">{{translations.color}}</label>
|
|
<span class="colorPresets" id="colorPresetSel">
|
|
<span class="colorPresetButton"></span>
|
|
</span>
|
|
</li>
|
|
<li class="tool" tabindex="-1"
|
|
title="{{translations.size}} ({{translations.keyboard_shortcut}}: alt + {{translations.mousewheel}})">
|
|
<img class="tool-icon" width="60" height="60" src="icon-size.svg" alt="size" />
|
|
<label class="tool-name slider" for="chooseSize">
|
|
<span>{{translations.size}}</span>
|
|
<input type="range" id="chooseSize" value="4" min="1" max="50" step="1" class="rangeChooser" />
|
|
</label>
|
|
</li>
|
|
<li class="tool" tabindex="-1">
|
|
<span class="tool-icon">
|
|
<svg viewBox="0 0 8 8">
|
|
<pattern id="opacityPattern" x="0" y="0" width="4" height="4" patternUnits="userSpaceOnUse">
|
|
<rect x=0 y=0 width=2 height=2 fill=black></rect>
|
|
<rect x=2 y=2 width=2 height=2 fill=black></rect>
|
|
<rect x=2 y=0 width=2 height=2 fill=#eeeeee></rect>
|
|
<rect x=0 y=2 width=2 height=2 fill=#eeeeee></rect>
|
|
</pattern>
|
|
<circle cx=4 cy=4 id="opacityIndicator" r=3.5 fill="url(#opacityPattern)"></circle>
|
|
</svg>
|
|
</span>
|
|
<label class="tool-name slider" for="chooseOpacity">
|
|
<span>{{translations.opacity}}</span>
|
|
<input type="range" id="chooseOpacity" value="1" min="0.2" max="1" step="0.1"
|
|
class="rangeChooser" />
|
|
</label>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<script type="application/json" id="translations">{{{ json translations }}}</script>
|
|
<script type="application/json" id="configuration">{{{ json configuration }}}</script>
|
|
<script src="../js/path-data-polyfill.js"></script>
|
|
<script src="../js/minitpl.js"></script>
|
|
<script src="../js/board.js"></script>
|
|
<script src="../tools/pencil/pencil.js"></script>
|
|
<script src="../tools/cursor/cursor.js"></script>
|
|
<script src="../tools/line/line.js"></script>
|
|
<script src="../tools/rect/rect.js"></script>
|
|
<script src="../tools/ellipse/ellipse.js"></script>
|
|
<script src="../tools/text/text.js"></script>
|
|
<script src="../tools/eraser/eraser.js"></script>
|
|
<script src="../tools/hand/hand.js"></script>
|
|
<script src="../tools/grid/grid.js"></script>
|
|
<script src="../tools/zoom/zoom.js"></script>
|
|
<script src="../js/canvascolor.js"></script>
|
|
</body>
|
|
|
|
</html> |