diff options
| author | Ulrich-Matthias Schäfer <ulima.ums@googlemail.com> | 2018-11-28 12:57:52 +0100 |
|---|---|---|
| committer | Ulrich-Matthias Schäfer <ulima.ums@googlemail.com> | 2018-11-28 12:57:52 +0100 |
| commit | 58fd0d68bc8b46b23f8cdc65190f08d4e524eb57 (patch) | |
| tree | 04247b959cb0517eb4a891c6afbabb734bb892bb /dirty.html | |
| parent | 08b27426fa631a6200a5423161770acab50403bd (diff) | |
| download | svg.js-58fd0d68bc8b46b23f8cdc65190f08d4e524eb57.tar.gz svg.js-58fd0d68bc8b46b23f8cdc65190f08d4e524eb57.zip | |
Fix build chain so that we now have multiple builds. Details below:
- svg.js: The esm bundle
- svg.min.js: The bundle for all browsers for maximum support
- svg.node.js: The bundle for node
- polyfill.js: Using svg.min.js requires this polyfill in case the Browser does not understand all of ./config/polyfillList.js
- polyfillIE.js: This is required when you use IE11 (polyfill.js still required)
Please note, that not all test pass for IE11 due to its rounding issues and wrong calculation of bbox.
Also note, that `defaultPrevented` is not working for CustomEvents in IE11.
Diffstat (limited to 'dirty.html')
| -rw-r--r-- | dirty.html | 59 |
1 files changed, 33 insertions, 26 deletions
@@ -4,7 +4,9 @@ <head> <meta charset="utf-8"> <title></title> - <script type="text/javascript" src="dist/svg.js"></script> + <script type="text/javascript" src="dist/polyfills.js"></script> + <script type="text/javascript" src="dist/polyfillsIE.js"></script> + <script type="text/javascript" src="dist/svg.min.js"></script> @@ -29,27 +31,30 @@ <button name="play">Play</button> <button name="reverse">Reverse</button> <span id="displayText"></span> +<br> <!-- Making the svg --> -<svg width=1000px height=1000px id="canvas" viewbox="-1000 -2000 5000 5000"> +<svg width=1000px height=500px id="canvas"> <rect x=50 y=100 width=200 height=100 stroke=none stroke-width=2 /> </svg> <!-- Modifying the svg --> -<script type="module"> +<script type="text/javascript"> // import SVG from './src/svg.js' // // window.SVG = SVG -let rect = SVG('rect').hide() -let {sin, PI: pi, round, sqrt} = Math +var rect = SVG('rect').hide() +var sin = Math.sin +var pi = Math.PI +var round = Math.round function getColor(t) { - let a = round(80 * sin(2 * pi * t / 0.5 + 0.01) + 150) - let b = round(50 * sin(2 * pi * t / 0.5 + 4.6) + 200) - let c = round(100 * sin(2 * pi * t / 0.5 + 2.3) + 150) - let color = `rgb(${a}, ${b}, ${c})` + var a = round(80 * sin(2 * pi * t / 0.5 + 0.01) + 150) + var b = round(50 * sin(2 * pi * t / 0.5 + 4.6) + 200) + var c = round(100 * sin(2 * pi * t / 0.5 + 2.3) + 150) + var color = 'rgb('+ a +','+ b +','+ c +')' return color } @@ -115,7 +120,7 @@ function getColor(t) { // } // } -let canvas = SVG('#canvas') +var canvas = SVG('#canvas') canvas.attr('viewBox', null) @@ -133,7 +138,7 @@ r.schedule(t, 200) var schedule = t.schedule() -schedule.forEach((s, i) => { +schedule.forEach(function (s, i) { var rect = canvas.rect(s.duration / 10, 25) .move(100 + s.start/10, 100 + i*30) .attr('fill', '#000') @@ -151,61 +156,63 @@ var mover = canvas.line(100, 100, 100, 300).attr('stroke', 'black') mover.clone().insertAfter(mover) canvas.line(100, 300, 800, 300).attr('stroke', 'black') -const text = SVG('#displayText') +var text = SVG('#displayText') t.on('time', function (e) { mover.x(100 + e.detail/10) text.node.textContent = e.detail }) -t.on('finished', () => { +t.on('finished', function (e) { console.log('finished') }) -SVG('button[name="back100"]').on('click', () => { +SVG('button[name="back100"]').on('click', function (e) { t.seek(-100) }) -SVG('button[name="back1000"]').on('click', () => { +SVG('button[name="back1000"]').on('click', function (e) { t.seek(-1000) }) -SVG('button[name="forth100"]').on('click', () => { +SVG('button[name="forth100"]').on('click', function (e) { t.seek(100) }) -SVG('button[name="forth1000"]').on('click', () => { +SVG('button[name="forth1000"]').on('click', function (e) { t.seek(1000) }) -SVG('button[name="speed2"]').on('click', () => { +SVG('button[name="speed2"]').on('click', function (e) { t.speed(2) }) -SVG('button[name="speed05"]').on('click', () => { +SVG('button[name="speed05"]').on('click', function (e) { t.speed(0.5) }) -SVG('button[name="pause"]').on('click', () => { +SVG('button[name="pause"]').on('click', function (e) { t.pause() }) -SVG('button[name="play"]').on('click', () => { +SVG('button[name="play"]').on('click', function (e) { t.play() }) -SVG('button[name="stop"]').on('click', () => { +SVG('button[name="stop"]').on('click', function (e) { t.stop() }) -SVG('button[name="finish"]').on('click', () => { +SVG('button[name="finish"]').on('click', function (e) { t.finish() }) -SVG('button[name="reverse"]').on('click', () => { +SVG('button[name="reverse"]').on('click', function (e) { t.reverse() }) -canvas.rect(100, 100).on('click', (e) => { - e.target.instance.animate().move(Math.random()*1000, Math.random()*750).timeline().on('finished', () => { +canvas.rect(100, 100).on('click', function (e) { + e.target.instance.animate() + .move(Math.random()*1000, Math.random()*750) + .timeline().on('finished', function (e) { console.log('rect finished') }) }) |