v0.1.23; attribute leak (#135), rendercontroller (#93), polyfills/css

History.md

@@ -1,13 +1,32 @@
 ## vNEXT
 
+## v0.1.23
+
 * BREAKING/famono.  We used to pull in famo.us pollyfills and CSS for you,
   with `famous.polyfills` and `famous.core.famous`, respectively.  This
   should really be done app-level, and you would have done this anyway
   if you followed the famono README.  If you didn't, you need to do it
   now, see the bottom of http://famous-views.meteor.com/start
 
 * Bugfix, avoid leak/mutation in some cases where no arguments/attributes
-  given, e.g. `{{#Surface}} with no args {{/Surface}}`.
+  given, e.g. `{{#Surface}} with no args {{/Surface}}`. (#135)
+
+* BREAKING, `FView.transitions`, in case you use it directly, is now
+  more correctly named `FView.transitionModifiers` (currently used
+  for `transition="slideWindow"` etc in `RenderController`.
+
+* RenderController now supports setting of transition (as opposed to
+  transition modifier, e.g. a curve or physics transition), by setting
+  `fview._transition`. (#93)
+
+* RenderController now supports once-off transition and transition
+  modifiers (useful for per-route transitions in iron-router), using
+  `fview._transitionOnce` and `fview.transitionModifierOnce`.  See
+  the RenderController page in the demo for more info. (#93)
+
+* You can now set `FView.mainCtx = null` to avoid famous-views creating
+  a main context.  Useful for using `#famousContext` in regular
+  apps.
 
 ## v0.1.22
 

demo-base/client/views/RenderController.html

@@ -25,15 +25,16 @@ <h1>RenderController demo</h1>
 
     {{#Modifier size="[undefined,110]"}}
       {{>Surface template="rc_buttons" class="pagePad"}}
-      {{#RenderController transition=getTransition 
+      {{#RenderController id="demoRC" transition=getTransition 
           size="[150,150]" translate="[500,-50]"}}
         {{>showTemplate name=currentTemplate}}
       {{/RenderController}}
     {{/Modifier}}
 
     {{#Surface size="[undefined,true]" class="pagePad"}}
-      {{>rc_transitions}}
+      {{>rc_transitionModifiers}}
       {{>rc_useForPages}}
+      {{>rc_transitionOnceOffs}}
 
       {{#snippet lang="javascript"}}
         Template.views_RenderController.helpers({
@@ -92,6 +93,53 @@ <h1>RenderController demo</h1>
 
       <p><a href="https://github.com/gadicc/meteor-famous-components/tree/master/demo/client/views">Full Source</a> (see RenderController.html and
       RenderController.html)</p>
+
+      <h2>More Fun</h2>
+
+      <h3>Once off Transitions</h3>
+
+      <p>Sometimes we want to queue a transitio or transition modifier to be
+      used only on the next change, but make sure changes after this use the
+      default again.
+      This very useful for <b>per-route transitions in iron-router</b>.  For
+      this to work, make sure to give your RenderController a <b>unique ID</b>.</p>
+
+      {{#snippet lang="spacebars"}}
+        {{dstache}}>RenderController id="mainRC" ...}}
+      {{/snippet}}
+
+      {{#snippet lang="javascript"}}
+        Router.route('mySpecialRoute', {
+          onBeforeAction: function() {
+            var fview = FView.byId("mainRC");
+            if (fview) {  // don't run on initial page render before setup
+              // Optional; change to a name from FView.transitionModifiers
+              fview._transitionModifierOnce = 'slideWindow';
+
+              // Optional; null to use the default transition (linear)
+              var SpringTransition = famous.transitions.SpringTransition;
+              fview._transitionOnce =
+                { method: SpringTransition, period: 800, dampingRatio: 0.2, velocity: 0.01 };
+            }
+          }
+        });
+      {{/snippet}}
+
+      <h3>Change the Transition (not Modifier) itself</h3>
+
+      <p>Below example assumes <code>{{dstache}}>RenderController
+      template="rcTemplate"}}</code>.  If you want inline content,
+      just work by ID, like in the above example.</p>
+
+      {{#snippet lang="javascript"}}
+        Template.rcTemplate.rendered = function() {
+          var fview = FView.from(this);
+
+          var SpringTransition = famous.transitions.SpringTransition;          
+          fview._transition = { method: SpringTransition, period: 800, dampingRatio: 0.2, velocity: 0.01 };
+        }
+      {{/snippet}}
+
     {{/Surface}}
 
   {{/Scrollview}}
@@ -108,20 +156,28 @@ <h1>RenderController demo</h1>
   </p>
 </template>
 
-<template name="rc_transitions">
+<template name="rc_transitionModifiers">
   <p>
-    Transition:
+    TransitionModifier:
     {{#each transitions}}
       <button class="btn btn-primary" {{isSet}}>{{this}}</button>
     {{/each}}
   </p>
 </template>
 
+<template name="rc_transitionOnceOffs">
+  <p>
+    Queue once-off transition:
+      <button class="btn btn-primary" data-what="spring">Spring</button>
+    - try this with slideWindow :)  More info below.
+  </p>
+</template>
+
 <template name="rc_useForPages">
   <p>
     <label>
       <input type="checkbox" checked="{{checked}}">
-      Use transition for page changes on the rest of the site too
+      Use above transition modifier for page changes on the rest of the site too
     </label>
   </p>
 </template>

demo-base/client/views/RenderController.js

@@ -35,18 +35,29 @@ Template.rc_buttons.events({
 	}
 });
 
-Template.rc_transitions.helpers({
-	'transitions': _.keys(FView.transitions),
+Template.rc_transitionModifiers.helpers({
+	'transitions': _.keys(FView.transitionModifiers),
 	isSet: function() {
 		return this.valueOf() == Session.get('currentTransition') ? 'set' : '';
 	}
 });
-Template.rc_transitions.events({
+Template.rc_transitionModifiers.events({
 	'click button': function() {
 		Session.set('currentTransition', this.valueOf());
 	}
 });
 
+Template.rc_transitionOnceOffs.events({
+	'click button': function(event, tpl) {
+		var what = event.target.getAttribute('data-what');
+		if (what == 'spring') {
+  		var fview = FView.byId("demoRC");
+		  var SpringTransition = famous.transitions.SpringTransition;
+			fview._transitionOnce = { method: SpringTransition, period: 800, dampingRatio: 0.2, velocity: 0.01 };
+		}
+	}
+});
+
 Session.setDefault('transitionPages', false);
 Template.rc_useForPages.events({
 	'change': function() {

demo-base/famous.html

@@ -23,7 +23,7 @@
     <div class="container">
       <div class="row">
         <div class="col-xs-12">
-          {{#RenderController target="content" transition=getTransition}}
+          {{#RenderController target="content" transition=getTransition id="mainRC"}}
               {{>yield}}
           {{/RenderController}}
         </div>

demo-famono/.meteor/versions

@@ -17,7 +17,7 @@ [email protected]
 [email protected]
 [email protected]
 [email protected]
-gadicohen:[email protected]-test.1
+gadicohen:[email protected]
 gadicohen:[email protected]
 gadicohen:[email protected]
 [email protected]

lib/famous-views.js

@@ -66,8 +66,9 @@ FView.startup = function() {
       if (FView.mainCtx !== false)
         log.debug('Creating a new main context.  If you already have '
           + 'your own, set FView.mainCtx = yourMainContext (or to false to get '
-          + 'rid of this warning)');
-      FView.mainCtx = mainCtx = famous.core.Engine.createContext();
+          + 'rid of this warning, or null to not set a mainContext)');
+      if (FView.mainCtx !== null)
+        FView.mainCtx = mainCtx = famous.core.Engine.createContext();
     }
 
     if (Template.famousInit)

lib/views/RenderController.js

@@ -1,7 +1,7 @@
 function fullOpacity() { return 1; }
 function transformIdentity() { return Transform.Identity; }
 
-FView.transitions = {
+FView.transitionModifiers = {
 	opacity: {
 		outOpacityFrom: function (progress) {
     	return progress;
@@ -32,50 +32,72 @@ FView.transitions = {
 };
 
 // Other option is to allow a slideDirection attribute.  Think about this.
-FView.transitions.slideWindowLeft = FView.transitions.slideWindow;
-FView.transitions.slideWindowRight = {
-    outTransformFrom: FView.transitions.slideWindow.inTransformFrom,
-    inTransformFrom: FView.transitions.slideWindow.outTransformFrom
+FView.transitionModifiers.slideWindowLeft = FView.transitionModifiers.slideWindow;
+FView.transitionModifiers.slideWindowRight = {
+    outTransformFrom: FView.transitionModifiers.slideWindow.inTransformFrom,
+    inTransformFrom: FView.transitionModifiers.slideWindow.outTransformFrom
 };
 
 FView.ready(function(require) {
 	FView.registerView('RenderController', famous.views.RenderController, {
 		add: function(child_fview, child_options) {
-			if (!this.view)
+			var fview = this;
+
+			if (!fview.view)
 				return;  // when?
 
-			if (this.currentShow)
-				this.previousShow = this.currentShow;
-			this.currentShow = child_fview;
+			if (fview._currentShow)
+				fview._previousShow = fview._currentShow;
+			fview._currentShow = child_fview;
+
+			child_fview.preventDestroy();
+
+			var transition = fview._transition || null;
 
-			var transition = child_options.transition;
-			if (transition) {
-				var data = FView.transitions[transition];
+			var origTransitionData = {};
+			if (fview._transitionOnce !== 'undefined') {
+				origTransitionData.transition = transition;
+				transition = fview._transitionOnce;
+				delete fview._transitionOnce;
+			}
+			if (fview._transitionModifierOnce) {
+				origTransitionData.modifierName = fview._transitionModifier;
+				var data = FView.transitionModifiers[fview._transitionModifierOnce];
 				if (data) {
-					for (key in data)
-						this.view[key](data[key]);
+					for (var key in data)
+						fview.view[key](data[key]);
 				} else {
-					log.error('No such transition ' + transition);
+					log.error('No such transition ' + fview._transitionModifierOnce);
 				}
+				delete fview._transitionModifierOnce;
 			}
 
-			child_fview.preventDestroy();
+			fview.view.show(child_fview, transition, function() {
+				// Now that transition is complete, we can destroy the old template
+				if (fview._previousShow)
+					fview._previousShow.destroy();
 
-			var self = this;
-			this.view.show(child_fview, null, function() {
-				if (self.previousShow)
-					self.previousShow.destroy();
+				// If _transitionOnce was used, now we can restore the defaults
+				if (origTransitionData.modifierName) {
+					console.log('restore ' + origTransitionData.modifierName);
+					var data = FView.transitionModifiers[origTransitionData.modifierName];
+					for (var key in data)
+						fview.view[key](data[key]);
+				}
+				if (origTransitionData.transition)
+					fview._transition = origTransitionData.transition;
 			});
 		},
 
 		attrUpdate: function(key, value, oldValue, data, firstTime) {
 			if (key == 'transition') {
-				var data = FView.transitions[value];
+				var data = FView.transitionModifiers[value];
 				if (data) {
-					for (key in data)
+					this._transitionModifier = value;
+					for (var key in data)
 						this.view[key](data[key]);
 				} else {
-					log.error('No such transition ' + transition);
+					log.error('No such transition ' + value);
 				}				
 			}
 		}

package.js

@@ -1,7 +1,7 @@
 Package.describe({
   name: "gadicohen:famous-views",
   summary: 'Blaze Views for Famous; doing Famous Meteor-style',
-  version: "0.1.23-test.1",
+  version: "0.1.23",
   git: "https://github.com/gadicc/meteor-famous-views.git"
 });
 
@@ -44,6 +44,7 @@ function configurePackage(api, testing) {
       'lib/views/EdgeSwapper.js',
       'lib/views/Flipper.js',
       'lib/views/HeaderFooterLayout.js',
+      'lib/views/Lightbox.js',
       'lib/views/RenderController.js',
       'lib/views/Scrollview.js',
       'lib/views/Surface.js',