conbo-viewnavigator - npm Package Compare versions

Comparing version 0.0.1 to 1.0.0

dist/ViewNavigator.d.ts

@@ -1,2 +0,2 @@
-import { View } from 'conbo';
+import { View, Promise } from 'conbo';
 /**
@@ -8,9 +8,11 @@ * ViewNavigator for ConboJS
     /**
-     * CSS class name of the pop transition (not currently implemented)
+     * Function that controls the pop transition
+     * @example		function(startView:View, endView:View):Promise<any> { ... }
      */
-    defaultPopTransition: string;
+    defaultPopTransition: (startView: View, endView: View) => Promise<any>;
     /**
-     * CSS class name of the push transition (not currently implemented)
+     * Function that controls the push transition
+     * @example		function(startView:View, endView:View):Promise<any> { ... }
      */
-    defaultPushTransition: string;
+    defaultPushTransition: (startView: View, endView: View) => Promise<any>;
     /**
@@ -38,21 +40,21 @@ * Class of first view to display
     /**
-     * Removes all of the views from the navigator stack
+     * Pops the current view off the navigation stack
      */
-    popAll(): void;
+    popView(transition?: (startView: View, endView: View) => Promise<any>): void;
     /**
      * Removes all views except the bottom view from the navigation stack
      */
-    popToFirstView(): void;
+    popToFirstView(transition?: (startView: View, endView: View, transition?: (startView: View, endView: View) => Promise<any>) => Promise<any>): void;
     /**
-     * Pops the current view off the navigation stack
+     * Removes all of the views from the navigator stack
      */
-    popView(): void;
+    popAll(transition?: (startView: View, endView: View) => Promise<any>): void;
     /**
      * Pushes a new view onto the top of the navigation stack
      */
-    pushView(viewClass: any, options?: any): void;
+    pushView(viewClass: any, options?: any, transition?: (startView: View, endView: View) => Promise<any>): void;
     /**
      * Replaces the top view of the navigation stack with a new view
      */
-    replaceView(viewClass: any, options?: any): void;
+    replaceView(viewClass: any, options?: any, transition?: (startView: View, endView: View) => Promise<any>): void;
 }

dist/ViewNavigator.js

@@ -14,3 +14,2 @@ "use strict";
 var conbo_1 = require("conbo");
-document.querySelector('head').innerHTML += '<style type="text/css">.cb-viewnavigator { width:100%; height:100%; }</style>';
 /**
@@ -23,12 +22,3 @@ * ViewNavigator for ConboJS
     function ViewNavigator() {
-        var _this = _super !== null && _super.apply(this, arguments) || this;
-        /**
-         * CSS class name of the pop transition (not currently implemented)
-         */
-        _this.defaultPopTransition = 'cb-pop-transition';
-        /**
-         * CSS class name of the push transition (not currently implemented)
-         */
-        _this.defaultPushTransition = 'cb-push-transition';
-        return _this;
+        return _super !== null && _super.apply(this, arguments) || this;
     }
@@ -39,6 +29,3 @@ /**
     ViewNavigator.prototype.__construct = function (options) {
-        options.defaultPopTransition && (this.defaultPopTransition = options.defaultPopTransition);
-        options.defaultPushTransition && (this.defaultPushTransition = options.defaultPushTransition);
-        options.firstView && (this.firstView = options.firstView);
-        options.firstViewOptions && (this.firstViewOptions = options.firstViewOptions);
+        conbo_1.assign(this, conbo_1.setDefaults({}, conbo_1.pick(options, 'defaultPopTransition', 'defaultPushTransition', 'firstView', 'firstViewOptions'), conbo_1.pick(this, 'defaultPopTransition', 'defaultPushTransition', 'firstView', 'firstViewOptions'), { defaultPopTransition: defaultPopTransition, defaultPushTransition: defaultPushTransition }));
         this.__viewStack = [];
@@ -55,3 +42,5 @@ this.className += ' cb-viewnavigator';
             var options = this.__assignTo(this.firstViewOptions);
-            this.pushView(this.firstView, options);
+            var firstView = new this.firstView(options);
+            this.__viewStack.push(firstView);
+            this.appendView(firstView);
         }
@@ -69,8 +58,13 @@ else {
     /**
-     * Removes all of the views from the navigator stack
+     * Pops the current view off the navigation stack
      */
-    ViewNavigator.prototype.popAll = function () {
-        var currentView = this.__viewStack.splice(0).pop();
-        // TODO Implement CSS transitions
-        currentView.remove();
+    ViewNavigator.prototype.popView = function (transition) {
+        if (this.__viewStack.length > 0) {
+            transition || (transition = this.defaultPopTransition);
+            var currentView_1 = this.__viewStack.pop();
+            var nextView = conbo_1.last(this.__viewStack);
+            this.appendView(nextView);
+            transition(currentView_1, nextView)
+                .then(function () { return currentView_1 && currentView_1.remove(); });
+        }
     };
@@ -80,20 +74,23 @@ /**
      */
-    ViewNavigator.prototype.popToFirstView = function () {
+    ViewNavigator.prototype.popToFirstView = function (transition) {
         if (this.__viewStack.length > 1) {
-            var currentView = this.__viewStack.splice(1).pop();
-            var nextView = conbo_1.last(this.__viewStack, 1).pop();
-            // TODO Implement CSS transitions
-            currentView && currentView.remove();
+            transition || (transition = this.defaultPopTransition);
+            var currentView_2 = this.__viewStack.splice(1).pop();
+            var nextView = conbo_1.last(this.__viewStack);
             this.appendView(nextView);
+            transition(currentView_2, nextView)
+                .then(function () { return currentView_2 && currentView_2.remove(); });
         }
     };
     /**
-     * Pops the current view off the navigation stack
+     * Removes all of the views from the navigator stack
      */
-    ViewNavigator.prototype.popView = function () {
-        var currentView = this.__viewStack.pop();
-        var nextView = conbo_1.last(this.__viewStack, 1).pop();
-        // TODO Implement CSS transitions
-        currentView && currentView.remove();
-        nextView && this.appendView(nextView);
+    ViewNavigator.prototype.popAll = function (transition) {
+        transition || (transition = this.defaultPopTransition);
+        var currentView = this.__viewStack.splice(0).pop();
+        // TODO Implement transitions
+        if (currentView) {
+            transition(currentView, undefined)
+                .then(function () { return currentView.remove(); });
+        }
     };
@@ -103,9 +100,10 @@ /**
      */
-    ViewNavigator.prototype.pushView = function (viewClass, options) {
-        var currentView = conbo_1.last(this.__viewStack, 1).pop();
+    ViewNavigator.prototype.pushView = function (viewClass, options, transition) {
+        transition || (transition = this.defaultPushTransition);
+        var currentView = conbo_1.last(this.__viewStack);
         var nextView = new viewClass(this.__assignTo(options));
         this.__viewStack.push(nextView);
-        // TODO Implement CSS transitions
-        currentView && currentView.detach();
         this.appendView(nextView);
+        transition(currentView, nextView)
+            .then(function () { return currentView && currentView.detach(); });
     };
@@ -115,10 +113,10 @@ /**
      */
-    ViewNavigator.prototype.replaceView = function (viewClass, options) {
+    ViewNavigator.prototype.replaceView = function (viewClass, options, transition) {
+        transition || (transition = this.defaultPushTransition);
         var currentView = this.__viewStack.pop();
         var nextView = new viewClass(this.__assignTo(options));
-        this.__viewStack.pop();
         this.__viewStack.push(nextView);
-        // TODO Implement CSS transitions
-        currentView && currentView.remove();
         this.appendView(nextView);
+        transition(currentView, nextView)
+            .then(function () { return currentView && currentView.remove(); });
     };
@@ -128,1 +126,44 @@ return ViewNavigator;
 exports.default = ViewNavigator;
+// Related CSS styles
+document.querySelector('head').innerHTML +=
+    '<style type="text/css">' +
+        '.cb-viewnavigator { position:relative; }' +
+        '.cb-viewnavigator, .cb-viewnavigator > .cb-view { width:100%; height:100%; }' +
+        '.cb-viewnavigator > .cb-view { position:absolute; }' +
+        '</style>';
+// Default easing functions
+function easeOutCubic(currentIteration, startValue, changeInValue, totalIterations) {
+    return changeInValue * (Math.pow(currentIteration / totalIterations - 1, 3) + 1) + startValue;
+}
+function slide(view, fromPercent, toPercent) {
+    return new conbo_1.Promise(function (resolve, reject) {
+        var el = view.el;
+        var totalIterations = 12;
+        var currentIteration = 0;
+        var currentPercent = fromPercent;
+        var changeInValue = toPercent - fromPercent;
+        el.style.pointerEvents = 'none';
+        var animate = function () {
+            el.style.left = currentPercent + "%";
+            if (currentIteration == totalIterations) {
+                el.style.pointerEvents = null;
+                resolve();
+            }
+            else {
+                currentPercent = easeOutCubic(currentIteration++, fromPercent, changeInValue, totalIterations);
+                requestAnimationFrame(animate);
+            }
+        };
+        requestAnimationFrame(animate);
+    });
+}
+function defaultPopTransition(startView, endView) {
+    if (endView)
+        slide(endView, -100, 0);
+    return slide(startView, 0, 100);
+}
+function defaultPushTransition(startView, endView) {
+    if (startView)
+        slide(startView, 0, -100);
+    return slide(endView, 100, 0);
+}

package.json

 {
 	"name": "conbo-viewnavigator",
-	"version": "0.0.1",
+	"version": "1.0.0",
 	"description": "The ConboJS ViewNavigator component is a container that consists of a collection of View objects, where only the top most view is visible and active",
@@ -25,5 +25,5 @@ "keywords": [
 	"types": "./dist/ViewNavigator.d.ts",
-	"devDependencies": {
-		"conbo": "^4.3.2"
+	"dependencies": {
+		"conbo": "^4.3.4"
 	}
 }

Fixed alerts

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

11988

increased by26.83%

Dev dependency count

0

decreased by-100%

Lines of code

219

increased by25.14%

Number of low quality alerts

0

decreased by-100%

Worsened metrics

Dependency count

1

increased byInfinity%

Dependency changes

• + Addedconbo@^4.3.4

• + Addedconbo@4.3.32(transitive)