CircularProgress and Masonry Fixes

Author: kevzlou7979

src/main/java/gwt/material/design/addins/client/base/constants/AddinsCssName.java

@@ -108,6 +108,7 @@ public interface AddinsCssName {
     String OVERLAY_TAB = "overlay-tab";
     String MATERIAL_NOTE = "material-note";
     String CIRCULAR_PROGRESS = "circular-progress";
+    String CIRCULAR_LABEL = "circular-label";
     String EMPTY_STATE = "empty-state";
     String TIMELINE = "timeline";
     String TIMELINE_CONTENT = "timeline-content";

src/main/java/gwt/material/design/addins/client/circularprogress/MaterialCircularProgress.java

@@ -92,7 +92,8 @@ public MaterialCircularProgress() {
     protected void onLoad() {
         super.onLoad();
 
-        label.setSize(getSize());
+
+        label.setSize(getSize(), isResponsive());
         add(label);
 
 

src/main/java/gwt/material/design/addins/client/circularprogress/ui/CircularProgressLabel.java

@@ -19,19 +19,35 @@
  */
 package gwt.material.design.addins.client.circularprogress.ui;
 
-import com.google.gwt.dom.client.Style;
+import gwt.material.design.addins.client.base.constants.AddinsCssName;
 import gwt.material.design.client.ui.html.Span;
 
 public class CircularProgressLabel extends Span {
 
+    public CircularProgressLabel() {
+        setInitialClasses(AddinsCssName.CIRCULAR_LABEL);
+    }
+
     @Override
     protected void onLoad() {
         super.onLoad();
     }
 
-    public void setSize(double size) {
-        setWidth(size + "px");
-        setHeight(size + "px");
-        getElement().getStyle().setLineHeight(size, Style.Unit.PX);
+    public void setSize(double size, boolean responsive) {
+        String width = "";
+        String height = "";
+        String lineHeight = "";
+        if (responsive) {
+            width = "100%";
+            height = "100%";
+            lineHeight = "calc(50% - " + getElement().getStyle().getFontSize() + "px";
+        } else {
+            width = size + "px";
+            height = size + "px";
+            lineHeight = size + "px";
+        }
+        setWidth(width);
+        setHeight(height);
+        getElement().getStyle().setProperty("lineHeight", lineHeight);
     }
 }

src/main/resources/gwt/material/design/addins/client/circularprogress/resources/css/circleprogress.css

@@ -2,23 +2,34 @@
     position: relative;
 }
 
-.circular-progress span:nth-child(2) {
+.circular-progress .circular-label {
     position: absolute;
     top: 0;
     text-align: center;
     left: 0px;
     width: 100%;
 }
 
+.col.circular-progress .circular-label {
+    left: 12px;
+}
+
+/** Responsive **/
 .circular-progress.responsive canvas {
     max-width: 100%;
     min-width: 100%;
+    max-height: 100%;
+    min-height: 100%;
+    height: auto !important;
 }
 
-.col.circular-progress span:nth-child(2) {
-    left: 12px;
-}
-
-.col.circular-progress {
-    padding: 0px;
+.circular-progress.responsive .circular-label {
+    width: 100%;
+    margin: auto;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    display: table;
+    font-size: 30px;
 }

src/main/resources/gwt/material/design/addins/client/circularprogress/resources/css/circleprogress.min.css

@@ -1 +1,35 @@
-.circular-progress{position:relative}.circular-progress span:nth-child(2){position:absolute;top:0;text-align:center;left:0;width:100%}.circular-progress.responsive canvas{max-width:100%;min-width:100%}.col.circular-progress span:nth-child(2){left:12px}.col.circular-progress{padding:0}
+.circular-progress {
+    position: relative;
+}
+
+.circular-progress .circular-label {
+    position: absolute;
+    top: 0;
+    text-align: center;
+    left: 0px;
+    width: 100%;
+}
+
+.col.circular-progress .circular-label {
+    left: 12px;
+}
+
+/** Responsive **/
+.circular-progress.responsive canvas {
+    max-width: 100%;
+    min-width: 100%;
+    max-height: 100%;
+    min-height: 100%;
+    height: auto !important;
+}
+
+.circular-progress.responsive .circular-label {
+    width: 100%;
+    margin: auto;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    display: table;
+    font-size: 30px;
+}

src/main/resources/gwt/material/design/addins/client/masonry/resources/js/imageloaded.js

@@ -1,11 +1,11 @@
 /*!
- * imagesLoaded PACKAGED v4.1.0
+ * imagesLoaded PACKAGED v4.1.4
  * JavaScript is all like "You images are done yet or what?"
  * MIT License
  */
 
 /**
- * EvEmitter v1.0.1
+ * EvEmitter v1.1.0
  * Lil' event emitter
  * MIT License
  */
@@ -14,7 +14,7 @@
 
 ( function( global, factory ) {
     // universal module definition
-    /* jshint strict: false */ /* globals define, module */
+    /* jshint strict: false */ /* globals define, module, window */
     if ( typeof define == 'function' && define.amd ) {
         // AMD - RequireJS
         define( 'ev-emitter/ev-emitter',factory );
@@ -26,7 +26,7 @@
         global.EvEmitter = factory();
     }
 
-}( this, function() {
+}( typeof window != 'undefined' ? window : this, function() {
 
 
 
@@ -59,8 +59,8 @@
         // set once flag
         // set onceEvents hash
         var onceEvents = this._onceEvents = this._onceEvents || {};
-        // set onceListeners array
-        var onceListeners = onceEvents[ eventName ] = onceEvents[ eventName ] || [];
+        // set onceListeners object
+        var onceListeners = onceEvents[ eventName ] = onceEvents[ eventName ] || {};
         // set flag
         onceListeners[ listener ] = true;
 
@@ -85,13 +85,14 @@
         if ( !listeners || !listeners.length ) {
             return;
         }
-        var i = 0;
-        var listener = listeners[i];
+        // copy over to avoid interference if .off() in listener
+        listeners = listeners.slice(0);
         args = args || [];
         // once stuff
         var onceListeners = this._onceEvents && this._onceEvents[ eventName ];
 
-        while ( listener ) {
+        for ( var i=0; i < listeners.length; i++ ) {
+            var listener = listeners[i]
             var isOnce = onceListeners && onceListeners[ listener ];
             if ( isOnce ) {
                 // remove listener
@@ -102,20 +103,22 @@
             }
             // trigger listener
             listener.apply( this, args );
-            // get next listener
-            i += isOnce ? 0 : 1;
-            listener = listeners[i];
         }
 
         return this;
     };
 
+    proto.allOff = function() {
+        delete this._events;
+        delete this._onceEvents;
+    };
+
     return EvEmitter;
 
 }));
 
 /*!
- * imagesLoaded v4.1.0
+ * imagesLoaded v4.1.4
  * JavaScript is all like "You images are done yet or what?"
  * MIT License
  */
@@ -146,7 +149,7 @@
         );
     }
 
-})( window,
+})( typeof window !== 'undefined' ? window : this,
 
 // --------------------------  factory -------------------------- //
 
@@ -167,22 +170,23 @@
             return a;
         }
 
+        var arraySlice = Array.prototype.slice;
+
 // turn element or nodeList into an array
         function makeArray( obj ) {
-            var ary = [];
             if ( Array.isArray( obj ) ) {
                 // use object if already an array
-                ary = obj;
-            } else if ( typeof obj.length == 'number' ) {
+                return obj;
+            }
+
+            var isArrayLike = typeof obj == 'object' && typeof obj.length == 'number';
+            if ( isArrayLike ) {
                 // convert nodeList to array
-                for ( var i=0; i < obj.length; i++ ) {
-                    ary.push( obj[i] );
-                }
-            } else {
-                // array of single index
-                ary.push( obj );
+                return arraySlice.call( obj );
             }
-            return ary;
+
+            // array of single index
+            return [ obj ];
         }
 
 // -------------------------- imagesLoaded -------------------------- //
@@ -198,13 +202,19 @@
                 return new ImagesLoaded( elem, options, onAlways );
             }
             // use elem as selector string
+            var queryElem = elem;
             if ( typeof elem == 'string' ) {
-                elem = document.querySelectorAll( elem );
+                queryElem = document.querySelectorAll( elem );
+            }
+            // bail if bad element
+            if ( !queryElem ) {
+                console.error( 'Bad element for imagesLoaded ' + ( queryElem || elem ) );
+                return;
             }
 
-            this.elements = makeArray( elem );
+            this.elements = makeArray( queryElem );
             this.options = extend( {}, this.options );
-
+            // shift arguments if no options set
             if ( typeof options == 'function' ) {
                 onAlways = options;
             } else {
@@ -223,9 +233,7 @@
             }
 
             // HACK check async to allow time to bind listeners
-            setTimeout( function() {
-                this.check();
-            }.bind( this ));
+            setTimeout( this.check.bind( this ) );
         }
 
         ImagesLoaded.prototype = Object.create( EvEmitter.prototype );
@@ -393,7 +401,9 @@
         };
 
         LoadingImage.prototype.getIsImageComplete = function() {
-            return this.img.complete && this.img.naturalWidth !== undefined;
+            // check for non-zero, non-undefined naturalWidth
+            // fixes Safari+InfiniteScroll+Masonry bug infinite-scroll#671
+            return this.img.complete && this.img.naturalWidth;
         };
 
         LoadingImage.prototype.confirm = function( isLoaded, message ) {
@@ -484,3 +494,4 @@
         return ImagesLoaded;
 
     });
+