Bump version to 0.3.0

nagix · May 7, 2022 · c4af4f1 · c4af4f1
1 parent 780d872
commit c4af4f1
Show file tree

Hide file tree

Showing 5 changed files with 82 additions and 30 deletions.
diff --git a/LICENSE b/LICENSE
@@ -1,6 +1,6 @@
 The MIT License (MIT)
 
-Copyright (c) 2020-2021 Akihiko Kusanagi
+Copyright (c) 2020-2022 Akihiko Kusanagi
 
 Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
 

diff --git a/README.md b/README.md
@@ -4,7 +4,7 @@
 
 ![Screenshot](https://nagix.github.io/mapbox-gl-animated-popup/mapbox-gl-animated-popup.gif)
 
-Version 0.2 requires Mapbox GL JS 0.48.0 or later. This component works on [browsers that support ES6](https://caniuse.com/es6).
+Version 0.3 requires Mapbox GL JS 0.48.0 or later. This component works on [browsers that support ES6](https://caniuse.com/es6).
 
 ## Installation
 
@@ -38,7 +38,7 @@ var popup = new AnimatedPopup({
     closingAnimation: {
         duration: 300,
         easing: 'easeInBack',
-        transform: 'opacity'
+        transform: 'scale'
     }
 }).setLngLat([-96, 37.8]).setHTML('Hello World!').addTo(map);
 ```
@@ -64,11 +64,32 @@ In addition to the constructor options supported by [`Popup`](https://docs.mapbo
 | **`options.openingAnimation`** | `object` | | Options controlling the opening animation.
 | **`options.openingAnimation.duration`** | `number` | `1000` | The animation's duration, measured in milliseconds.
 | **`options.openingAnimation.easing`** | `string` | `'easeOutElastic'` | The easing function name of the animation. See [https://easings.net](https://easings.net)
-| **`options.openingAnimation.transform`** | `string | function` | `'scale'` | The transformation function to apply to the style.
+| **`options.openingAnimation.transform`** | <code>string &#124; function</code> | `'scale'` | The transformation function to apply to the style. [more...](#transformation-function)
 | **`options.closingAnimation`** | `object` | | Options controlling the closing animation.
 | **`options.closingAnimation.duration`** | `number` | `300` | The animation's duration, measured in milliseconds.
 | **`options.closingAnimation.easing`** | `string` | `'easeInBack'` | The easing function name of the animation. See [https://easings.net](https://easings.net)
-| **`options.openingAnimation.transform`** | `string | function` | `'scale'` | The transformation function to apply to the style.
+| **`options.openingAnimation.transform`** | <code>string &#124; function</code> | `'scale'` | The transformation function to apply to the style. [more...](#transformation-function)
+
+### Transformation Function
+
+This function is used to customize how the style properties are transitioned. The function receives 3 arguments:
+
+- `style`: the [HTMLElement.style](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) object of the popup container
+- `value`: the value after the easing function is applied (between 0 and 1)
+- `reverse`: If true, time is reversed (the popup is closing)
+
+The following strings for the pre-defined functions can also be specified:
+
+- `'scale'` (default)
+- `'opacity'`
+
+For example, the `'scale'` function is implemented as follows:
+
+```js
+function(style, value, reverse) {
+    style.transform = `scale(${reverse ? 1 - value : value})`;
+}
+```
 
 ## Building
 

diff --git a/docs/index.html b/docs/index.html
@@ -9,12 +9,12 @@
       gtag('config', 'UA-39988758-2');
     </script>
     <meta charset="utf-8" />
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" />
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" />
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.18/dist/css/bootstrap-select.min.css">
     <link rel="stylesheet" href="/css/octicons.css">
     <link rel="stylesheet" href="/css/font-awesome.min.css">
     <link rel="stylesheet" href="/css/style.css" type="text/css">
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/mapbox-gl@2.3.1/dist/mapbox-gl.css" />
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/mapbox-gl@2.8.2/dist/mapbox-gl.css" />
     <title>Mapbox GL JS Animated Popup</title>
     <meta name="description" content="An animated popup component for Mapbox GL JS" />
     <meta property="og:title" content="Mapbox GL JS Animated Popup" />
@@ -28,10 +28,10 @@
     <meta name="twitter:site" content="@nagix" />
     <meta name="theme-color" content="#ffffff">
     <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.18/dist/js/bootstrap-select.min.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/mapbox-gl@2.3.1/dist/mapbox-gl.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/mapbox-gl-animated-popup@0.2.1"></script>
+    <script src="https://cdn.jsdelivr.net/npm/mapbox-gl@2.8.2/dist/mapbox-gl.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/mapbox-gl-animated-popup@0.3.0"></script>
     <style>
       #map-title {
         width: 840px;
@@ -162,6 +162,13 @@ <h2>An animated popup component for <a href="https://github.com/mapbox/mapbox-gl
                 <label class="col-form-label col-4" for="opening-animation-duration">duration</label>
                 <input id="opening-animation-duration" class="col-8 form-control" type="text" value="1000">
               </div>
+              <div class="form-group row">
+                <label class="col-form-label col-4" for="opening-animation-transform">transform</label>
+                <select id="opening-animation-transform" class="col-8 form-control custom-select">
+                  <option value="scale" selected>scale</option>
+                  <option value="opacity">opacity</option>
+                </select>
+              </div>
             </div>
             <div class="col-6">
               <div class="row">
@@ -177,6 +184,13 @@ <h2>An animated popup component for <a href="https://github.com/mapbox/mapbox-gl
                 <label class="col-form-label col-4" for="closing-animation-duration">duration</label>
                 <input id="closing-animation-duration" class="col-8 form-control" type="text" value="300">
               </div>
+              <div class="form-group row">
+                <label class="col-form-label col-4" for="closing-animation-transform">transform</label>
+                <select id="closing-animation-transform" class="col-8 form-control custom-select">
+                  <option value="scale" selected>scale</option>
+                  <option value="opacity">opacity</option>
+                </select>
+              </div>
             </div>
           </div>
           <div id="map-body"></div>
@@ -189,9 +203,9 @@ <h2>An animated popup component for <a href="https://github.com/mapbox/mapbox-gl
               &lt;meta charset="utf-8" /&gt;<br>
               &lt;title&gt;Attach a popup to a marker instance&lt;/title&gt;<br>
               &lt;meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" /&gt;<br>
-              &lt;script src="https://api.mapbox.com/mapbox-gl-js/v2.3.1/mapbox-gl.js"&gt;&lt;/script&gt;<br>
-              &lt;script src="https://cdn.jsdelivr.net/npm/mapbox-gl-animated-popup@v0.2.1/dist/mapbox-gl-animated-popup.min.js"&gt;&lt;/script&gt;<br>
-              &lt;link href="https://api.mapbox.com/mapbox-gl-js/v2.3.1/mapbox-gl.css" rel="stylesheet" /&gt;<br>
+              &lt;script src="https://api.mapbox.com/mapbox-gl-js/v2.8.2/mapbox-gl.js"&gt;&lt;/script&gt;<br>
+              &lt;script src="https://cdn.jsdelivr.net/npm/mapbox-gl-animated-popup@v0.3.0/dist/mapbox-gl-animated-popup.min.js"&gt;&lt;/script&gt;<br>
+              &lt;link href="https://api.mapbox.com/mapbox-gl-js/v2.8.2/mapbox-gl.css" rel="stylesheet" /&gt;<br>
               &lt;style&gt;<br>
               &nbsp;&nbsp;body { margin: 0; padding: 0; }<br>
               &nbsp;&nbsp;#map { position: absolute; top: 0; bottom: 0; width: 100%; }<br>
@@ -230,11 +244,13 @@ <h2>An animated popup component for <a href="https://github.com/mapbox/mapbox-gl
               &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;offset: 25,<br>
               &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;openingAnimation: {<br>
               &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;duration: <span id="opening-animation-duration-text">1000</span>,<br>
-              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;easing: '<span id="opening-animation-easing-text">easeOutElastic</span>'<br>
+              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;easing: '<span id="opening-animation-easing-text">easeOutElastic</span>',<br>
+              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;transform: '<span id="opening-animation-transform-text">scale</span>'<br>
               &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;},<br>
               &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;closingAnimation: {<br>
               &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;duration: <span id="closing-animation-duration-text">300</span>,<br>
-              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;easing: '<span id="closing-animation-easing-text">easeInBack</span>'<br>
+              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;easing: '<span id="closing-animation-easing-text">easeInBack</span>',<br>
+              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;transform: '<span id="closing-animation-transform-text">scale</span>'<br>
               &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}<br>
               &nbsp;&nbsp;&nbsp;&nbsp;}).setText(<br>
               &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'Construction on the Washington Monument began in 1848.'<br>
@@ -340,12 +356,16 @@ <h2>An animated popup component for <a href="https://github.com/mapbox/mapbox-gl
       let popup;
       let openingAnimationDuration = 1000;
       let openingAnimationEasing = 'easeOutElastic';
+      let openingAnimationTransform = 'scale';
       let closingAnimationDuration = 300;
       let closingAnimationEasing = 'easeInBack';
+      let closingAnimationTransform = 'scale';
       const openingAnimationDurationElement = document.getElementById('opening-animation-duration');
       const openingAnimationEasingElement = document.getElementById('opening-animation-easing');
+      const openingAnimationTransformElement = document.getElementById('opening-animation-transform');
       const closingAnimationDurationElement = document.getElementById('closing-animation-duration');
       const closingAnimationEasingElement = document.getElementById('closing-animation-easing');
+      const closingAnimationTransformElement = document.getElementById('closing-animation-transform');
       for (const name of Object.keys(easingFunctions)) {
         let element = document.createElement('option');
         element.value = element.text = name;
@@ -370,11 +390,13 @@ <h2>An animated popup component for <a href="https://github.com/mapbox/mapbox-gl
           offset: 25,
           openingAnimation: {
             duration: openingAnimationDuration,
-            easing: openingAnimationEasing
+            easing: openingAnimationEasing,
+            transform: openingAnimationTransform
           },
           closingAnimation: {
             duration: closingAnimationDuration,
-            easing: closingAnimationEasing
+            easing: closingAnimationEasing,
+            transform: closingAnimationTransform
           }
         }).setText('Construction on the Washington Monument began in 1848.');
         const element = document.createElement('div');
@@ -394,6 +416,11 @@ <h2>An animated popup component for <a href="https://github.com/mapbox/mapbox-gl
         document.getElementById('opening-animation-easing-text').innerHTML = openingAnimationEasing;
         refresh();
       });
+      openingAnimationTransformElement.addEventListener('change', () => {
+        openingAnimationTransform = openingAnimationTransformElement.value;
+        document.getElementById('opening-animation-transform-text').innerHTML = openingAnimationTransform;
+        refresh();
+      });
       closingAnimationDurationElement.addEventListener('input', () => {
         closingAnimationDuration = +closingAnimationDurationElement.value || 0;
         document.getElementById('closing-animation-duration-text').innerHTML = closingAnimationDuration;
@@ -404,6 +431,11 @@ <h2>An animated popup component for <a href="https://github.com/mapbox/mapbox-gl
         document.getElementById('closing-animation-easing-text').innerHTML = closingAnimationEasing;
         refresh();
       });
+      closingAnimationTransformElement.addEventListener('change', () => {
+        closingAnimationTransform = closingAnimationTransformElement.value;
+        document.getElementById('closing-animation-transform-text').innerHTML = closingAnimationTransform;
+        refresh();
+      });
 
       const monument = [-77.0353, 38.8895];
       const map = new mapboxgl.Map({
@@ -424,7 +456,7 @@ <h2>An animated popup component for <a href="https://github.com/mapbox/mapbox-gl
         <img src="/favicon-32x32-glay.png" style="position: absolute; top: 34px; left: 50%; margin-left: -16px;">
       </a>
       <ul class="site-footer-links">
-        <li>&copy; 2020-2021 Akihiko Kusanagi</li>
+        <li>&copy; 2020-2022 Akihiko Kusanagi</li>
       </ul>
     </footer>
   </body>

diff --git a/package.json b/package.json
@@ -1,21 +1,21 @@
 {
   "name": "mapbox-gl-animated-popup",
-  "version": "0.2.1",
+  "version": "0.3.0",
   "description": "An animated popup component for Mapbox GL JS",
   "main": "dist/mapbox-gl-animated-popup.js",
   "types": "types.d.ts",
   "devDependencies": {
-    "@rollup/plugin-commonjs": "^19.0.0",
-    "@rollup/plugin-node-resolve": "^13.0.0",
-    "@rollup/plugin-strip": "^2.0.1",
+    "@rollup/plugin-commonjs": "^22.0.0",
+    "@rollup/plugin-node-resolve": "^13.3.0",
+    "@rollup/plugin-strip": "^2.1.0",
     "@types/mapbox-gl": "^2.3.3",
-    "@types/web": "0.0.10",
-    "eslint": "^7.29.0",
+    "@types/web": "0.0.64",
+    "eslint": "^8.15.0",
     "eslint-config-mourner": "^3.0.0",
-    "eslint-plugin-import": "^2.23.4",
-    "eslint-plugin-jsdoc": "^35.4.0",
-    "mapbox-gl": "^2.3.1",
-    "rollup": "^2.52.2",
+    "eslint-plugin-import": "^2.26.0",
+    "eslint-plugin-jsdoc": "^39.2.9",
+    "mapbox-gl": "^2.8.2",
+    "rollup": "^2.72.0",
     "rollup-plugin-terser": "^7.0.2"
   },
   "peerDependencies": {

diff --git a/rollup.config.js b/rollup.config.js
@@ -48,8 +48,7 @@ export default [{
 		commonjs(),
 		terser({
 			compress: {
-				pure_getters: true,
-				passes: 3
+				pure_getters: true
 			}
 		}),
 		strip({