marko-floating-action-button - npm Package Compare versions

Comparing version 1.0.1 to 1.0.2

package.json

 {
   "name": "marko-floating-action-button",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "description": "A customizable marko widget that functions like a material design inspired floating action button.",
@@ -5,0 +5,0 @@ "main": "index.js",

src/components/floating-action-button/index.js

 require('./styles/styles.less');
 
+var buttonPlacements = [
+    'bottom-right',
+    'bottom-left',
+    'top-right',
+    'top-left'
+];
+
 function _getDocumentWidth() {
@@ -45,3 +52,5 @@ var width = window.innerWidth ||
         document.removeEventListener('mouseup', component.onMouseDragEnd);
-
+        setTimeout(function() {
+            component.setStateDirty('dragging', false);
+        }, 10);
     };
@@ -51,9 +60,23 @@ }
     return function (e) {
+        console.log(e);
         var x = e.clientX, y = e.clientY;
-        if (y < _getDocumentHeight() && y > 0) {
-            component.setState('y', e.clientY);
+        var position = component.state.position;
+        if (!position || position.trim().toLowerCase() === 'absolute') {
+            var el = component.getEl();
+            var bounds = el.parentNode.getBoundingClientRect();
+            if (y < bounds.bottom && y > bounds.top) {
+                component.setState('y', y);
+            }
+            if (x < bounds.right && x > bounds.left){
+                component.setState('x', x);
+            }
+        } else {
+            if (y < _getDocumentHeight() && y > 0) {
+                component.setState('y', y);
+            }
+            if (x < _getDocumentWidth() && x > 0){
+                component.setState('x', x);
+            }
         }
-        if (x < _getDocumentWidth() && x > 0){
-            component.setState('x', e.clientX);
-        }
+
     };
@@ -86,3 +109,2 @@ }
         var el = self.getEl();
-
         self.onMouseDrag = _onDrag(self);
@@ -93,3 +115,2 @@ self.onMouseDragEnd = _onDragEnd(self);
         };
-
         el.addEventListener('mousedown', self.onStartDrag);
@@ -123,11 +144,15 @@ },
         var direction;
+        var center;
         switch(input.direction) {
             case 'left':
                 direction = 'marko-fa-row-reverse'
+                center = 'marko-fa-vertical-center';
                 break;
             case 'right':
                 direction = 'marko-fa-row';
+                center = 'marko-fa-vertical-center';
                 break;
             case 'down':
                 direction = 'marko-fa-column';
+                center = 'marko-fa-horizontal-center';
                 break;
@@ -137,3 +162,10 @@ case 'up':
                 direction = 'marko-fa-column-reverse';
-         }
+                center = 'marko-fa-horizontal-center';
+        }
+        var placement = input.placement;
+        if (placement === undefined) {
+            placement = 'bottom-right';
+        } else if(buttonPlacements.indexOf(placement) === -1) {
+            throw new Error('Invalid button placement');
+        }
         return {
@@ -145,3 +177,6 @@ mainButton: mainButton,
             style: input.style,
-            draggable: input.draggable
+            draggable: input.draggable,
+            placement: placement,
+            position: input.position,
+            center: center
         };
@@ -152,14 +187,6 @@ },
         console.log(input);
-        return {
-            mainButton: input.mainButton,
-            menuItems: input.menuItems,
-            showContent: false,
-            revealOnHover: input.revealOnHover,
-            direction: input.direction,
-            reveal: false,
-            style: input.style,
-            draggable : input.draggable
-        };
-    },
-
+        input.showContent = false;
+        input.reveal = false;
+        return input;
+    }
 });

src/components/floating-action-button/marko-tag.json

@@ -6,2 +6,4 @@ {
     "@draggable" : "boolean",
+    "@placement" : "string",
+    "@position" : "string",
     "@main-button <main-button>" : {
@@ -8,0 +10,0 @@ "@label" : "string",

No alert changes

Improved metrics

Total package byte prevSize

22555

15.54%

Lines of code

319

10.76%

No dependency changes