From f5e2364e1737240df83b970e31e796b212cd82c2 Mon Sep 17 00:00:00 2001 From: Mladen Date: Fri, 23 Aug 2019 20:12:15 +0200 Subject: [PATCH] Use CSS instead of JS animations for markers and dialogs --- docs/dist/index.html | 2 +- docs/src/js/model/marker.js.html | 71 ++----------------------- docs/src/js/service/dialog.js.html | 23 +------- docs/src/js/service/map.js.html | 4 -- docs/src/js/service/storage.js.html | 3 -- docs/src/js/util.js.html | 46 ++++++++++++++-- gulpfile.js | 2 + src/js/model/marker.js | 81 ++--------------------------- src/js/service/dialog.js | 15 ------ src/js/service/map.js | 4 -- src/js/service/storage.js | 3 -- src/less/animation/_twist.less | 24 +++++++++ src/less/animation/_wobble.less | 22 ++++++++ src/less/dialog.less | 26 ++------- src/less/marker.less | 36 ++++++++++++- 15 files changed, 135 insertions(+), 227 deletions(-) create mode 100644 src/less/animation/_twist.less create mode 100644 src/less/animation/_wobble.less diff --git a/docs/dist/index.html b/docs/dist/index.html index 5802296..7e52f28 100644 --- a/docs/dist/index.html +++ b/docs/dist/index.html @@ -1 +1 @@ -Svg Vector Icons : http://www.onlinewebfonts.com/icon
Loading...
\ No newline at end of file +Svg Vector Icons : http://www.onlinewebfonts.com/icon
Loading...
\ No newline at end of file diff --git a/docs/src/js/model/marker.js.html b/docs/src/js/model/marker.js.html index 054c46a..3d909fb 100644 --- a/docs/src/js/model/marker.js.html +++ b/docs/src/js/model/marker.js.html @@ -120,8 +120,6 @@

ФRuŠKać

  • animateBounce
    • -
  • animateWobble -
    • @@ -182,10 +180,7 @@
    if (!div) { div = self.div = document.createElement('div'); - div.setAttribute('class', 'marker-container'); - if (!self.options.visible) { - div.setAttribute('class', div.getAttribute('class') + ' hidden'); - } + div.setAttribute('class', 'marker-container hidden'); if (!self.pulsate) { self.markerShadow = document.createElement('div'); @@ -223,9 +218,9 @@
    // if this is a regular marker if (!self.pulsate) { - // add wobble animation on enter + // add random timeout on enter setTimeout(function () { - self.animateWobble(); + util.removeClass(self.div, 'hidden'); }, Math.random() * 800 + 200); // Show info Window for desktop @@ -351,9 +346,6 @@
    //clusterer.addMarker(self); setTimeout(function () { util.removeClass(self.div, 'hidden'); - //if (!self.clustered) { - self.animateWobble(); - //} }, Math.random() * 400); } else { //clusterer.removeMarker(self); @@ -478,31 +470,6 @@
    dialog.open(content, self); }; -

    Animate Marker with "Drop" animation

    -

    Marker.prototype.animateDrop = function () {
    dynamics.stop(this.markerWrap);
    dynamics.css(this.markerWrap, {
    'transform': 'scaleY(2) translateY(-' + $('#map').outerHeight() + 'px)',
    'opacity': '1'
    });
    dynamics.animate(this.markerWrap, {
    translateY: 0,
    scaleY: 1.0
    }, {
    type: dynamics.gravity,
    duration: 1800
    });

     dynamics.stop(this.marker);
- dynamics.css(this.marker, {
- 'transform': 'none'
- });
- dynamics.animate(this.marker, {
- scaleY: 0.8
- }, {
- type: dynamics.bounce,
- duration: 1800,
- bounciness: 600
- });
-
- dynamics.stop(this.markerShadow);
- dynamics.css(this.markerShadow, {
- 'transform': 'scale(0,0)',
- });
- dynamics.animate(this.markerShadow, {
- scale: 1
- }, {
- type: dynamics.gravity,
- duration: 1800
- });
- };
-

    animateBounce

    @@ -557,38 +524,6 @@
    duration: 500, delay: 150 }); -}; -
    -

    animateWobble

    -
    -

    -

    method
    Marker.prototype.animateWobble() -

    -
    -

    Animate Marker with Wobble animation

    - 
    Marker.prototype.animateWobble = function () {
-    dynamics.stop(this.markerWrap);
-    dynamics.css(this.markerWrap, {
-        'transform': 'none'
-    });
-    dynamics.animate(this.markerWrap, {
-        rotateZ: Math.random() * 90 - 45
-    }, {
-        type: dynamics.bounce,
-        duration: 1800
-    });
-
-    dynamics.stop(this.marker);
-    dynamics.css(this.marker, {
-        'transform': 'none'
-    });
-    dynamics.animate(this.marker, {
-        scaleX: 0.8
-    }, {
-        type: dynamics.bounce,
-        duration: 800,
-        bounciness: 1800
-    });
 };
 
 return Marker;
diff --git a/docs/src/js/service/dialog.js.html b/docs/src/js/service/dialog.js.html
index 160205a..2f9a9bc 100644
--- a/docs/src/js/service/dialog.js.html
+++ b/docs/src/js/service/dialog.js.html
@@ -106,8 +106,6 @@ 
    ФRuŠKać
    
               
               
  • close
               
    • 
-              
  • animateWobble
-              
    • 
             
           
         
@@ -213,9 +211,6 @@ 
    
 
     setTimeout(function () {
         self.dialog.open(gmap, anchor);
-        setTimeout(function () {
-            self.animateWobble();
-        }, 99)
     }, 99);
 
 },
    @@ -231,23 +226,7 @@
    if (this.dialog.getVisible()) { this.dialog.close(); } -}, -
    -

    animateWobble

    -
    -

    -

    method
    Dialog.prototype.animateWobble() -

    -
    -

    Animate Marker with Wobble animation

    - 
    animateWobble: function () {
-    dynamics.animate(this.container.parentNode, {
-        rotateZ: Math.random() * 30 - 15
-    }, {
-        type: dynamics.bounce,
-        duration: 1800
-    })
-}
+},
 
     };
 
diff --git a/docs/src/js/service/map.js.html b/docs/src/js/service/map.js.html
index cff40c9..a530bc3 100644
--- a/docs/src/js/service/map.js.html
+++ b/docs/src/js/service/map.js.html
@@ -269,10 +269,6 @@ 
    
             }
         }
 
-        google.maps.event.addListener(marker, 'click', function () {
-            marker.animateWobble();
-        });
-
         resolve(marker);
 
     })
diff --git a/docs/src/js/service/storage.js.html b/docs/src/js/service/storage.js.html
index 3def628..1bfbac7 100644
--- a/docs/src/js/service/storage.js.html
+++ b/docs/src/js/service/storage.js.html
@@ -673,9 +673,6 @@ 
    
                 item.children.forEach(function (child) {
                     var shoudBeOpaque = category && child.categories.indexOf(category) === -1;
                     child.setOpaque(shoudBeOpaque);
-                    if (!shoudBeOpaque) {
-                        child.animateWobble();
-                    }
                 })
             }
         })
diff --git a/docs/src/js/util.js.html b/docs/src/js/util.js.html
index 00815e4..a0d11b0 100644
--- a/docs/src/js/util.js.html
+++ b/docs/src/js/util.js.html
@@ -100,6 +100,8 @@ 
    ФRuŠKać
    
             
      
               
    • addClass
               
      • 
+              
    • hasClass
+              
      • 
               
    • removeClass
               
      • 
               
    • show
@@ -138,12 +140,46 @@ 
      
               
             
           
-          
      Add a class to a DOM element
       
      
-          
      addClass: function (element, className) {
+          
      Add a class to a DOM element if class does not exist
       
      
+          
      addClass: function(element, className) {
+    if (this.hasClass(element, className))
+        return;
     if (element.hasOwnProperty('classList'))
         element.classList.add(className);
     else
         element.className += ' ' + className;
+},
      
+          
      
+            
      hasClass
      
+            
      
+            
      
+              
      method
      hasClass()
+            
      
+          
      
+          
+            
+              
+                
+                
+                
+              
+            
+            
+              
+                
+                
+                
+              
+              
+                
+                
+                
+              
+            
+          
      Option nameTypeDescription
      elementHTMLDomElement
      classNamestring
      
+          
      Check if a DOM element has a class
       
      
+          
      hasClass: function(element, className) {
+    return ((element.hasOwnProperty('classList') && element.classList.contains(className)) || (' ' + element.className + ' ').indexOf(' ' + className + ' ') > -1) ? true : false;
 },
      
           
      
             
      removeClass
      
@@ -174,7 +210,7 @@ 
      
             
           
           
      Remove a class from a DOM element
       
      
-          
      removeClass: function (element, className) {
+          
      removeClass: function(element, className) {
     if (element.hasOwnProperty('classList'))
         element.classList.remove(className);
     else
@@ -204,7 +240,7 @@ 
      
             
           
           
      Show a DOM element
       
      
-          
      show: function (element) {
+          
      show: function(element) {
     element.style.display = '';
 },
      
           
      
@@ -231,7 +267,7 @@ 
      
             
           
           
      Remove an element from DOM
       
      
-          
      remove: function (element) {
+          
      remove: function(element) {
     element.parentNode.removeChild(element);
 },
      
         
diff --git a/gulpfile.js b/gulpfile.js
index 3b3470d..ded25c2 100644
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -36,8 +36,10 @@ paths.less = [
 gulp.task('build:less', function () {
     return gulp.src(paths.less)
         .pipe(less())
+        .pipe(sourcemaps.init())
         .pipe(cssnano())
         .pipe(concat('map.min.css'))
+        .pipe(sourcemaps.write())
         .pipe(gulp.dest('./dist'));
 });
 
diff --git a/src/js/model/marker.js b/src/js/model/marker.js
index cc67117..d74f35e 100644
--- a/src/js/model/marker.js
+++ b/src/js/model/marker.js
@@ -33,10 +33,7 @@ fruskac.Marker = (function () {
         if (!div) {
 
             div = self.div = document.createElement('div');
-            div.setAttribute('class', 'marker-container');
-            if (!self.options.visible) {
-                div.setAttribute('class', div.getAttribute('class') + ' hidden');
-            }
+            div.setAttribute('class', 'marker-container hidden');
 
             if (!self.pulsate) {
                 self.markerShadow = document.createElement('div');
@@ -74,9 +71,9 @@ fruskac.Marker = (function () {
 
             // if this is a regular marker
             if (!self.pulsate) {
-                // add wobble animation on enter
+                // add random timeout on enter
                 setTimeout(function () {
-                    self.animateWobble();
+                    util.removeClass(self.div, 'hidden');
                 }, Math.random() * 800 + 200);
 
                 // Show info Window for desktop
@@ -148,9 +145,6 @@ fruskac.Marker = (function () {
                 //clusterer.addMarker(self);
                 setTimeout(function () {
                     util.removeClass(self.div, 'hidden');
-                    //if (!self.clustered) {
-                        self.animateWobble();
-                    //}
                 }, Math.random() * 400);
             } else {
                 //clusterer.removeMarker(self);
@@ -239,47 +233,6 @@ fruskac.Marker = (function () {
         dialog.open(content, self);
     };
 
-    /**
-     * Animate Marker with "Drop" animation
-     */
-    /*Marker.prototype.animateDrop = function () {
-     dynamics.stop(this.markerWrap);
-     dynamics.css(this.markerWrap, {
-     'transform': 'scaleY(2) translateY(-' + $('#map').outerHeight() + 'px)',
-     'opacity': '1'
-     });
-     dynamics.animate(this.markerWrap, {
-     translateY: 0,
-     scaleY: 1.0
-     }, {
-     type: dynamics.gravity,
-     duration: 1800
-     });
-
-     dynamics.stop(this.marker);
-     dynamics.css(this.marker, {
-     'transform': 'none'
-     });
-     dynamics.animate(this.marker, {
-     scaleY: 0.8
-     }, {
-     type: dynamics.bounce,
-     duration: 1800,
-     bounciness: 600
-     });
-
-     dynamics.stop(this.markerShadow);
-     dynamics.css(this.markerShadow, {
-     'transform': 'scale(0,0)',
-     });
-     dynamics.animate(this.markerShadow, {
-     scale: 1
-     }, {
-     type: dynamics.gravity,
-     duration: 1800
-     });
-     };*/
-
     /**
      * Animate Marker with Bounce animation
      */
@@ -331,34 +284,6 @@ fruskac.Marker = (function () {
         });
     };
 
-    /**
-     * Animate Marker with Wobble animation
-     */
-    Marker.prototype.animateWobble = function () {
-        dynamics.stop(this.markerWrap);
-        dynamics.css(this.markerWrap, {
-            'transform': 'none'
-        });
-        dynamics.animate(this.markerWrap, {
-            rotateZ: Math.random() * 90 - 45
-        }, {
-            type: dynamics.bounce,
-            duration: 1800
-        });
-
-        dynamics.stop(this.marker);
-        dynamics.css(this.marker, {
-            'transform': 'none'
-        });
-        dynamics.animate(this.marker, {
-            scaleX: 0.8
-        }, {
-            type: dynamics.bounce,
-            duration: 800,
-            bounciness: 1800
-        });
-    };
-
     return Marker;
 
 })();
diff --git a/src/js/service/dialog.js b/src/js/service/dialog.js
index 81bd96b..9193586 100644
--- a/src/js/service/dialog.js
+++ b/src/js/service/dialog.js
@@ -73,9 +73,6 @@ fruskac.Dialog = (function () {
 
             setTimeout(function () {
                 self.dialog.open(gmap, anchor);
-                setTimeout(function () {
-                    self.animateWobble();
-                }, 99)
             }, 99);
 
         },
@@ -89,18 +86,6 @@ fruskac.Dialog = (function () {
             }
         },
 
-        /**
-         * Animate Marker with Wobble animation
-         */
-        animateWobble: function () {
-            dynamics.animate(this.container.parentNode, {
-                rotateZ: Math.random() * 30 - 15
-            }, {
-                type: dynamics.bounce,
-                duration: 1800
-            })
-        }
-
     };
 
     return Dialog;
diff --git a/src/js/service/map.js b/src/js/service/map.js
index c9aac69..3c11141 100644
--- a/src/js/service/map.js
+++ b/src/js/service/map.js
@@ -95,10 +95,6 @@ fruskac.Map = (function () {
                     }
                 }
 
-                google.maps.event.addListener(marker, 'click', function () {
-                    marker.animateWobble();
-                });
-
                 resolve(marker);
 
             })
diff --git a/src/js/service/storage.js b/src/js/service/storage.js
index 07effc2..288c815 100644
--- a/src/js/service/storage.js
+++ b/src/js/service/storage.js
@@ -313,9 +313,6 @@ fruskac.Storage = (function () {
                         item.children.forEach(function (child) {
                             var shoudBeOpaque = category && child.categories.indexOf(category) === -1;
                             child.setOpaque(shoudBeOpaque);
-                            if (!shoudBeOpaque) {
-                                child.animateWobble();
-                            }
                         })
                     }
                 })
diff --git a/src/less/animation/_twist.less b/src/less/animation/_twist.less
new file mode 100644
index 0000000..11b617e
--- /dev/null
+++ b/src/less/animation/_twist.less
@@ -0,0 +1,24 @@
+.twist(@type) {
+  transition-timing-function: ease-in-out;
+  animation-duration: 800ms;
+  animation-fill-mode: both;
+  animation-name: ~'twist_@{type}';
+}
+
+.twist_type_keyframes(1, 30);
+.twist_type_keyframes(2, 20);
+.twist_type_keyframes(3, 10);
+.twist_type_keyframes(4, 5);
+
+.twist_type_keyframes(@type, @intensity) {
+  @name: ~'twist_@{type}';
+
+  @keyframes @name {
+    0% { transform: scale(0); }
+    8% { transform: scaleY(1.1); }
+    10% { transform: scale(1); }
+    10% { transform: scaleX((100-@intensity)/100); }
+    30% { transform: scaleX(1); }
+    50% { transform: scaleX((100-@intensity/2)/100); }
+  }
+}
diff --git a/src/less/animation/_wobble.less b/src/less/animation/_wobble.less
new file mode 100644
index 0000000..ec13876
--- /dev/null
+++ b/src/less/animation/_wobble.less
@@ -0,0 +1,22 @@
+.wobble(@type) {
+  transition-timing-function: ease-in-out;
+  animation-duration: 1800ms;
+  animation-fill-mode: both;
+  animation-name: ~'wobble_@{type}';
+}
+
+.wobble_type_keyframes(1, 20);
+.wobble_type_keyframes(2, -15);
+.wobble_type_keyframes(3, 8);
+.wobble_type_keyframes(4, -4);
+
+.wobble_type_keyframes(@type, @intensity) {
+  @name: ~'wobble_@{type}';
+
+  @keyframes @name {
+    10% { transform: rotate(unit(@intensity, deg)); }
+    30% { transform: rotate(unit(-@intensity*0.7, deg)); }
+    50% { transform: rotate(unit(@intensity*0.4, deg)); }
+    70% { transform: rotate(unit(-@intensity*0.1, deg)); }
+  }
+}
diff --git a/src/less/dialog.less b/src/less/dialog.less
index 777a06f..3a6e3b5 100644
--- a/src/less/dialog.less
+++ b/src/less/dialog.less
@@ -1,29 +1,9 @@
-@padding: 10px;
-
-/*.gm-style-iw {
-  max-width: 285px;
-  margin: -8px -14px;
-  font-size: 12px !important;
-
-  a {
-    color: #333;
-    text-decoration: none;
-
-    img {
-    }
-
-    h2 {
-      padding: 0 @padding;
-    }
+@import "animation/_wobble";
 
-    p {
-      padding: 0 @padding;
-    }
-
-  }
-}*/
+@padding: 10px;
 
 .dialog {
+  .wobble(4);
   width: 285px;
   height: 300px;
   top: -309px;
diff --git a/src/less/marker.less b/src/less/marker.less
index 8bd523d..178db24 100644
--- a/src/less/marker.less
+++ b/src/less/marker.less
@@ -1,3 +1,6 @@
+@import "animation/_wobble";
+@import "animation/_twist";
+
 @markerWidth: 32px;
 @markerHeightFactor: 1.20711;
 @markerHeight: round(@markerHeightFactor * @markerWidth);
@@ -14,7 +17,6 @@
   height: @markerWidth;
   margin-top: -@markerHeight;
   margin-left: -@markerWidth/2;
-  transform-origin: 50% round(@markerHeightFactor * 100%) 0;
 }
 
 .color(@name, @color:@markerColor) {
@@ -156,6 +158,38 @@
 .scaleOnZoom(10);
 .scaleOnZoom(11);
 
+/* wobble marker animation */
+.marker-container {
+  .marker-wrap {
+    transform-origin: 50% round(@markerHeightFactor * 100%) 0;
+  }
+
+  &:nth-child(4n+1) {
+    .twist(1);
+    .marker-wrap {
+      .wobble(1);
+    }
+  }
+  &:nth-child(4n+2) {
+    .twist(2);
+    .marker-wrap {
+      .wobble(2);
+    }
+  }
+  &:nth-child(4n+3) {
+    .twist(3);
+    .marker-wrap {
+      .wobble(3);
+    }
+  }
+  &:nth-child(4n+4) {
+    .twist(4);
+    .marker-wrap {
+      .wobble(4);
+    }
+  }
+}
+
 @keyframes pulsate {
   0% {
     transform: scale(.1, .1);