feat: merge v1.1.0 updates

hacksalot · Sep 25, 2019 · e469d58 · e469d58
1 parent 49bc520
commit e469d58
Show file tree

Hide file tree

Showing 33 changed files with 547 additions and 44 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1,4 +1,3 @@
 dist/
 node_modules/
 assets/images/
-examples/
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,9 +1,39 @@
 Revolve.js Changelog
 ===
 
-## v1.0.0
 
-The initial public release of [Revolve.js][0].
+
+## [Release v1.1.0][v1.1.0]
+
+### Added
+
+- New default theme for gauges: [`unitless`][unt].
+- Pass arbitrary options with `data-[option-name]="[option-value]"` attributes on Revolve.js `<canvas>` elements. For example, switch a clock between `continuous` and `discrete` animation with `data-mode="continuous"`.
+- Support for [GitHub Package Registry][gpr].
+- Support for packaged builds (`revolve.pkgd.js` and `revolve.pkgd.min.js`) which include all themes. In these builds, predefined themes are embedded into the main `Revolve` object as `Revolve.themes`. For example, the `dark` theme can be accessed at `Revolve.themes.dark`.
+- Usage examples in the [`/examples`][ex] folder.
+- Screenshots of each theme in the [`/assets/themes`][asth] folder.
+
+### Fixed
+
+- Issue with auto-initialization of `<canvas data-revolve="...">` elements.
+
+### Screenshot
+
+![][untimg]
+
+[v1.1.0]: https://github.com/hacksalot/revolve.js/releases/tag/v1.1.0
+[unt]: https://revolvejs.org/themes/unitless
+[gpr]: https://github.com/features/package-registry
+[untimg]: assets/themes/unitless.png
+[ex]: examples/
+[asth]: assets/themes/
+
+
+
+## [Release v1.0.0][v1.0.0]
+
+The initial public release of [Revolve.js][r].
 
 ### Added
 
@@ -18,5 +48,11 @@ The initial public release of [Revolve.js][0].
 - **Dedicated project website** at https://revolvejs.org.
 - **Package-friendly** via Yarn and/or NPM; supports AMD, CommonJS, and browser-global approaches.
 
-[0]: https://revolvejs.org
+### Screenshot
+
+![][claimg]
+
+[v1.0.0]: https://github.com/hacksalot/revolve.js/releases/tag/v1.0.0
+[r]: https://revolvejs.org
 [1]: https://revolvejs.org/themes/pressure
+[claimg]: assets/themes/classic.png
diff --git a/README.md b/README.md
@@ -7,7 +7,7 @@ Revolve.js
 
 ## Demo
 
-Visit the [Revolve.js website](https://revolvejs.org) for live demos.
+Visit the [Revolve.js website](https://revolvejs.org) or check out the [`/examples`][ex] folder for code examples.
 
 
 ## Installation
@@ -27,6 +27,8 @@ Or download the `revolve.js` file directly.
 
 ## Use
 
+*See the [`/examples`][ex] folder for live code examples.*
+
 ### In HTML
 
 The quickest way to use revolve.js is to link to the `revolve.js` file and add a `canvas` element with the `data-revolve` attribute set to either `clock` or `gauge`.
@@ -66,6 +68,7 @@ Revolve.js ships with over a dozen predefined themes and the ability to define y
 - [`simple`](https://revolvejs.org/themes/simple)
 - [`speedometer`](https://revolvejs.org/themes/speedometer)
 - [`stopwatch`](https://revolvejs.org/themes/stopwatch)
+- [`unitless`](https://revolvejs.org/themes/unitless)
 - [`uptown`](https://revolvejs.org/themes/uptown)
 
 To use a theme, specify the theme name in the options object...
@@ -103,6 +106,7 @@ Every Revolve.js clock and gauge is driven by an editable JSON theme description
 
 See [CHANGELOG.md](CHANGELOG.md) for full release info.
 
+- v1.1.0 Add `unitless` theme & GitHub Package support.
 - v1.0.0 Initial public release.
 
 
@@ -111,3 +115,5 @@ See [CHANGELOG.md](CHANGELOG.md) for full release info.
 The Revolve.js library is licensed under the terms of the MIT license. Go crazy. See [LICENSE.md](LICENSE.md) for details.
 
 *Copyright (c) 2019 | James M. Devlin | All rights reserved*
+
+[ex]: examples/
diff --git a/assets/themes/classic.png b/assets/themes/classic.png
diff --git a/assets/themes/dark.png b/assets/themes/dark.png
diff --git a/assets/themes/dartboard.png b/assets/themes/dartboard.png
diff --git a/assets/themes/decimal.png b/assets/themes/decimal.png
diff --git a/assets/themes/elite.png b/assets/themes/elite.png
diff --git a/assets/themes/informatic.png b/assets/themes/informatic.png
diff --git a/assets/themes/military.png b/assets/themes/military.png
diff --git a/assets/themes/office.png b/assets/themes/office.png
diff --git a/assets/themes/pressure.png b/assets/themes/pressure.png
diff --git a/assets/themes/simple.png b/assets/themes/simple.png
diff --git a/assets/themes/speedometer.png b/assets/themes/speedometer.png
diff --git a/assets/themes/stopwatch.png b/assets/themes/stopwatch.png
diff --git a/assets/themes/unitless.png b/assets/themes/unitless.png
diff --git a/assets/themes/uptown.png b/assets/themes/uptown.png
diff --git a/examples/all.html b/examples/all.html
@@ -0,0 +1,51 @@
+
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>Demo: All Themes | Revolve.js</title>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/webfont/1.3.0/webfont.js" type="text/javascript"></script>
+  <script src="../dist/js/revolve.pkgd.js" type="text/javascript"></script>
+  <script type="text/javascript">
+    // Revolve.js gauges and clocks can use custom web fonts from, for example,
+    // Google Fonts. Here we're using a popular dynamic web font loader library
+    // to kick off initialization of Revolve.js when necessary fonts have
+    // loaded.
+    WebFont.load({
+      google: {
+        families: ['Oswald:300,400','Quattrocento','Six Caps']
+      },
+      active: function() {
+        var canvases = document.querySelectorAll('canvas');
+        canvases.forEach( (can) => {
+          var opt = {
+            theme: can.dataset.theme,
+            value: can.dataset.value || '10:10:00'
+          };
+          let func = (can.dataset.theme === 'speedometer' ||
+                      can.dataset.theme === 'dartboard' ||
+                      can.dataset.theme === 'pressure' ||
+                      can.dataset.theme === 'unitless' ) ? 'gauge' : 'clock';
+          Revolve[ func ]( can.getContext("2d"), opt );
+        });
+      }
+    });
+  </script>
+</head>
+<body id="home">
+  <canvas width="256" height="256" data-theme="classic"></canvas>
+  <canvas width="256" height="256" data-theme="dark"></canvas>
+  <canvas width="256" height="256" data-theme="dartboard"></canvas>
+  <canvas width="256" height="256" data-theme="decimal"></canvas>
+  <canvas width="256" height="256" data-theme="elite"></canvas>
+  <canvas width="256" height="256" data-theme="informatic"></canvas>
+  <canvas width="256" height="256" data-theme="military"></canvas>
+  <canvas width="256" height="256" data-theme="office"></canvas>
+  <canvas width="256" height="256" data-theme="pressure" data-value="90"></canvas>
+  <canvas width="256" height="256" data-theme="simple"></canvas>
+  <canvas width="256" height="256" data-theme="speedometer" data-value="65"></canvas>
+  <canvas width="256" height="256" data-theme="stopwatch" data-value="0"></canvas>
+  <canvas width="256" height="256" data-theme="unitless" data-value="6"></canvas>
+  <canvas width="256" height="256" data-theme="uptown"></canvas>
+</body>
+</html>
diff --git a/examples/custom-font-loader.html b/examples/custom-font-loader.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>Demo: Custom Font Loader | Revolve.js</title>
+
+  <!-- Include the web font loader we'll use to ensure custom fonts have loaded
+  before rendering our clock. -->
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/webfont/1.3.0/webfont.js" type="text/javascript"></script>
+
+  <!-- Include the packaged (.pkgd) version of Revolve.js, which contains all
+  predefined Revolve.js themes. -->
+  <script src="../dist/js/revolve.pkgd.js" type="text/javascript"></script>
+
+  <!-- Use the WebFont loader to request our font. When fonts are received,
+  initialize the Revolve.js clock control. -->
+  <script type="text/javascript">
+    WebFont.load({
+      google: { families: ['Six Caps'] }, // fonts we want
+      active: function() {
+        // (Okay, fonts have loaded)
+        let can = document.querySelector('canvas');
+        Revolve.clock( can.getContext('2d'), { theme: 'uptown' } );
+      },
+      inactive: function() {
+        console.error('Font load failed.');
+      }
+    });
+  </script>
+</head>
+<body>
+  <canvas width="512" height="512"></canvas>
+</body>
+</html>
diff --git a/examples/custom-font.html b/examples/custom-font.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>Demo: Custom Font | Revolve.js</title>
+
+  <!-- Request the custom font we want (Six Caps) from Google Fonts. This font
+  is used by the 'uptown' theme. -->
+  <link href="https://fonts.googleapis.com/css?family=Six+Caps&display=swap" rel="stylesheet">
+
+  <!-- Include the packaged (.pkgd) version of Revolve.js, which contains all
+  predefined Revolve.js themes. -->
+  <script src="../dist/js/revolve.pkgd.js" type="text/javascript"></script>
+
+</head>
+<body>
+
+  <!-- Display an analog clock with the 'uptown' theme, which uses the
+  'Six Caps' custom font we pulled in above. HOWEVER, you may still see a FOUT
+  (a flash of unstyled text) using this method. To avoid that, use a web font
+  loader. See clock-custom-fonts-dynamic.html. -->
+  <canvas width="512" height="512" data-revolve="clock" data-theme="uptown"></canvas>
+
+</body>
+</html>
diff --git a/examples/custom-theme.html b/examples/custom-theme.html
@@ -0,0 +1,64 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>Demo: Custom Theme | Revolve.js</title>
+
+  <!-- Include the standalone version of Revolve.js since we don't need any of
+  the predefined themes. -->
+  <script src="../dist/js/revolve.js" type="text/javascript"></script>
+
+</head>
+<body>
+
+  <!-- The canvas that will become our gauge -->
+  <canvas width="512" height="512"></canvas>
+
+  <!-- Our bottom-of-page script. We could also move this to the <head>. -->
+  <script type="text/javascript">
+
+    // Define a custom theme
+    let customTheme = {
+      name: 'unitless',
+      axes: {
+        TEN: {
+          name: 'TEN',
+          pointA: { angle: 225, value: 0 },
+          pointB: { angle: 135, value: 10 }
+        }
+      },
+      layers: {
+        ticks: {
+          type: 'radial', content: 'ticks', layout: 'hour', color: '#DD2323',
+          width: 8, degrees: 27, length: 40, start: 225,
+          include: [ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ]
+        },
+        arc: {
+          type: 'arc', radius: 226,
+          border: { width: 10, color: '#DD2323' },
+          start: 225, degrees: 135
+        },
+        pointer: {
+          type: 'arm', axis: 'TEN', color: '#DD2323',
+          layers: [{
+            type: 'path',
+            points: [ {  x: -2,  y: -212  }, { x: -5, y: 65 },
+                      {  x: 5,   y: 65  }, { x: 2, y: -212 } ]
+            }]
+        },
+        pin: {
+          type: 'circle', radius: 26, color: 'white',
+          border: { color: '#DD2323', width: 6 }
+        }
+      }
+    };
+
+    // Initialize the gauge with the custom theme
+    Revolve.gauge(
+      document.querySelector('canvas').getContext('2d'),
+      { theme: customTheme }
+    );
+  </script>
+
+</body>
+</html>
diff --git a/examples/data-options.html b/examples/data-options.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>Demo: Data Options | Revolve.js</title>
+
+  <!-- Include the packaged (.pkgd) version of Revolve.js, which contains all
+  predefined Revolve.js themes. -->
+  <script src="../dist/js/revolve.pkgd.js" type="text/javascript"></script>
+
+</head>
+<body>
+
+  <!-- To pass options in via HTML, use "data-[optionName]" attributes -->
+  <canvas width="512" height="512"
+    data-revolve="clock"
+    data-theme="dark"
+    data-mode="continuous"
+  >
+  </canvas>
+
+</body>
+</html>
diff --git a/examples/different-sizes.html b/examples/different-sizes.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>Demo: Different Sizes | Revolve.js</title>
+
+  <!-- Include the packaged (.pkgd) version of Revolve.js, which contains all
+  predefined Revolve.js themes. -->
+  <script src="../dist/js/revolve.pkgd.js" type="text/javascript"></script>
+
+</head>
+<body>
+
+  <!-- Create five canvas elements, 512x512 pixels, but set different clock
+  sizes using the data-radius option. -->
+  <canvas width="512" height="512" data-revolve="clock" data-radius="512"></canvas>
+  <canvas width="512" height="512" data-revolve="clock" data-radius="256"></canvas>
+  <canvas width="512" height="512" data-revolve="clock" data-radius="128"></canvas>
+  <canvas width="512" height="512" data-revolve="clock" data-radius="64"></canvas>
+  <canvas width="512" height="512" data-revolve="clock" data-radius="32"></canvas>
+
+</body>
+</html>
diff --git a/examples/simple-clock-js.html b/examples/simple-clock-js.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>Demo: Simple Clock (JS) | Revolve.js</title>
+
+  <!-- Include the packaged (.pkgd) version of Revolve.js, which contains all
+  predefined Revolve.js themes. -->
+  <script src="../dist/js/revolve.pkgd.js" type="text/javascript"></script>
+
+</head>
+<body>
+
+  <canvas width="512" height="512"></canvas>
+  <script type="text/javascript">
+    Revolve.clock(
+      document.querySelector('canvas').getContext('2d'),
+      { theme: 'office' }
+    );
+  </script>
+
+</body>
+</html>
diff --git a/examples/simple-clock.html b/examples/simple-clock.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>Demo: Simple Clock | Revolve.js</title>
+
+  <!-- Include the packaged (.pkgd) version of Revolve.js, which contains all
+  predefined Revolve.js themes. -->
+  <script src="../dist/js/revolve.pkgd.js" type="text/javascript"></script>
+
+</head>
+<body>
+
+  <!-- Revolve.js will automatically render any <canvas> element with a
+  data-revolve="clock" attribute as a clock using the default 'classic' theme
+  theme if no theme is specified. -->
+  <canvas width="512" height="512" data-revolve="clock"></canvas>
+
+</body>
+</html>