Enable animation based on page transitions.

Responses can now send a `name` value which will be used to construct "from"
and "to" CSS classes that will be applied during updates.  These two classes
will be applied with the following patterns:

* `config['animation-class'] + '-from-' + _previous_name_`
* `config['animation-class'] + '-to-' + _current_name_`

This will allow transitions to be applied based on state of the page (i.e.
navigating from page A to page B) instead of based on the action (i.e.
navigating back in the history stack).

Progress on youtube#299.

src/client/base.js

@@ -146,19 +146,21 @@ spf.EventName = {
 /**
  * Type definition for a single SPF response object.
  * - attr: Map of Element IDs to maps of attibute names to attribute values
- *      to set on the Elements.
+ *       to set on the Elements.
  * - body: Map of Element IDs to HTML strings containing content with which
- *      to update the Elements.
+ *       to update the Elements.
  * - cacheKey: Key used to cache this response.
  * - cacheType: String of the type of caching to use for this response.
  * - foot: HTML string containing <script> tags of JS to execute.
  * - head: HTML string containing <link> and <style> tags of CSS to install.
+ * - name: String of the general name of this type of response. This will be
+ *       used to generate "from" and "to" CSS classes for animation.
  * - redirect: String of a URL to request instead.
  * - reload: Boolean to indicate the page should be reloaded.
  * - timing: Map of timing attributes to timestamp numbers.
  * - title: String of the new Document title.
  * - url: String of the correct URL for the current request. This will replace
- *      the current URL in history.
+ *       the current URL in history.
  *
  * @typedef {{
  *   attr: (Object.<string, Object.<string, string>>|undefined),
@@ -167,6 +169,7 @@ spf.EventName = {
  *   cacheType: (string|undefined),
  *   foot: (string|undefined),
  *   head: (string|undefined),
+ *   name: (string|undefined),
  *   redirect: (string|undefined),
  *   reload: (boolean|undefined),
  *   timing: (Object.<string, number>|undefined),

src/client/dom/classlist.js

@@ -36,7 +36,9 @@ spf.dom.classlist.get = function(node) {
  * @return {boolean} Whether node has the class.
  */
 spf.dom.classlist.contains = function(node, cls) {
-  if (node.classList) {
+  if (!cls) {
+    return false;
+  } else if (node.classList) {
     return node.classList.contains(cls);
   } else {
     var classes = spf.dom.classlist.get(node);
@@ -57,10 +59,10 @@ spf.dom.classlist.contains = function(node, cls) {
  * @param {string} cls Class name to add.
  */
 spf.dom.classlist.add = function(node, cls) {
-  if (node.classList) {
-    node.classList.add(cls);
-  } else {
-    if (!spf.dom.classlist.contains(node, cls)) {
+  if (cls) {
+    if (node.classList) {
+      node.classList.add(cls);
+    } else if (!spf.dom.classlist.contains(node, cls)) {
       node.className += ' ' + cls;
     }
   }
@@ -74,16 +76,18 @@ spf.dom.classlist.add = function(node, cls) {
  * @param {string} cls Class name to remove.
  */
 spf.dom.classlist.remove = function(node, cls) {
-  if (node.classList) {
-    node.classList.remove(cls);
-  } else {
-    var classes = spf.dom.classlist.get(node);
-    var newClasses = [];
-    for (var i = 0, l = classes.length; i < l; i++) {
-      if (classes[i] != cls) {
-        newClasses.push(classes[i]);
+  if (cls) {
+    if (node.classList) {
+      node.classList.remove(cls);
+    } else {
+      var classes = spf.dom.classlist.get(node);
+      var newClasses = [];
+      for (var i = 0, l = classes.length; i < l; i++) {
+        if (classes[i] != cls) {
+          newClasses.push(classes[i]);
+        }
       }
+      node.className = newClasses.join(' ');
     }
-    node.className = newClasses.join(' ');
   }
 };

src/client/nav/nav.js

@@ -19,6 +19,7 @@ goog.require('spf.config');
 goog.require('spf.debug');
 goog.require('spf.dom');
 goog.require('spf.dom.classlist');
+goog.require('spf.dom.dataset');
 goog.require('spf.history');
 goog.require('spf.nav.request');
 goog.require('spf.nav.response');
@@ -750,6 +751,15 @@ spf.nav.handleNavigateSuccess_ = function(options, info, url, response) {
     // queued after existing ones from any ongoing part prcoessing.
     var r = /** @type {spf.SingleResponse} */ (multipart ? {} : response);
     spf.nav.response.process(url, r, info, function() {
+      // After processing is complete, save the name for future use.
+      var name = response['name'] || '';
+      if (multipart) {
+        var parts = response['parts'];
+        for (var i = 0; i < parts.length; i++) {
+          name = parts[i]['name'] || name;
+        }
+      }
+      spf.dom.dataset.set(document.body, 'spfName', name);
       // If this navigation was from history, attempt to scroll to the previous
       // position after all processing is complete.  This should not be done
       // earlier because the prevous position might rely on page width/height

src/client/nav/response.js

@@ -17,6 +17,7 @@ goog.require('spf.config');
 goog.require('spf.debug');
 goog.require('spf.dom');
 goog.require('spf.dom.classlist');
+goog.require('spf.dom.dataset');
 goog.require('spf.history');
 goog.require('spf.net.connect');
 goog.require('spf.net.script');
@@ -125,6 +126,8 @@ spf.nav.response.process = function(url, response, opt_info, opt_callback) {
   var hasPosition = opt_info && !!opt_info.position;
   var hasScrolled = opt_info && opt_info.scrolled;
 
+  var name = response['name'] || '';
+
   // Convert the URL to absolute, to be used for finding the task queue.
   var key = 'process ' + spf.url.absolute(url);
   var sync = !spf.config.get('experimental-process-async');
@@ -260,6 +263,7 @@ spf.nav.response.process = function(url, response, opt_info, opt_callback) {
               el,
               extracted.html,
               animationClass,
+              name,
               parseInt(spf.config.get('animation-duration'), 10),
               !!isReverse);
           // Suspend main queue while the animation is running.
@@ -433,6 +437,8 @@ spf.nav.response.preprocess = function(url, response, opt_info, opt_callback) {
 spf.nav.response.prepareAnimation_ = function(data) {
   // Add the start class to put elements in their beginning states.
   spf.dom.classlist.add(data.element, data.dirClass);
+  spf.dom.classlist.add(data.element, data.fromClass);
+  spf.dom.classlist.add(data.element, data.toClass);
   spf.dom.classlist.add(data.element, data.startClass);
   spf.dom.classlist.add(data.element, data.startClassDeprecated);
   // Pack the existing content into a temporary container.
@@ -477,6 +483,8 @@ spf.nav.response.completeAnimation_ = function(data) {
   // Remove the end class to put elements back in normal state.
   spf.dom.classlist.remove(data.element, data.endClass);
   spf.dom.classlist.remove(data.element, data.endClassDeprecated);
+  spf.dom.classlist.remove(data.element, data.fromClass);
+  spf.dom.classlist.remove(data.element, data.toClass);
   spf.dom.classlist.remove(data.element, data.dirClass);
   spf.debug.debug('  process done complete animation', data.element.id);
 };
@@ -758,13 +766,14 @@ spf.nav.response.getCurrentUrl_ = function() {
  * @param {!Element} el The element being updated.
  * @param {string} html The new content for the element.
  * @param {string} cls The animation class name.
+ * @param {string} name The page name.
  * @param {number} duration The animation duration.
  * @param {boolean} reverse Whether this is a "back" animation.
  * @constructor
  * @struct
  * @private
  */
-spf.nav.response.Animation_ = function(el, html, cls, duration, reverse) {
+spf.nav.response.Animation_ = function(el, html, cls, name, duration, reverse) {
   /** @type {!Element} */
   this.element = el;
   /** @type {string} */
@@ -774,8 +783,14 @@ spf.nav.response.Animation_ = function(el, html, cls, duration, reverse) {
   /** @type {boolean} */
   this.reverse = reverse;
 
+  var prevName = spf.dom.dataset.get(document.body, 'spfName') || '';
+
   /** @type {string} */
   this.key = spf.tasks.key(el);
+  /** @type {string} */
+  this.fromClass = prevName && (cls + '-from-' + prevName);
+  /** @type {string} */
+  this.toClass = name && (cls + '-to-' + name);
   /** @type {Element} */
   this.oldEl = null;
   /** @type {string} */

src/server/demo/app.py

@@ -110,6 +110,9 @@ def create_spf_response(self, content, fragments=None):
         title = str(getattr(content, 'title', ''))
         if title:
             response[spf.ResponseKey.TITLE] = title
+        name = str(getattr(content, 'name', ''))
+        if name:
+            response[spf.ResponseKey.NAME] = name
         attr = json.loads(str(getattr(content, 'attributes', '{}')))
         if attr:
             response[spf.ResponseKey.ATTR] = attr
@@ -167,6 +170,9 @@ def chunked_render_spf(self, content, fragments=None, truncate=False):
             early[spf.ResponseKey.HEAD] = resp.pop(spf.ResponseKey.HEAD)
         if spf.ResponseKey.TITLE in resp:
             early[spf.ResponseKey.TITLE] = resp.pop(spf.ResponseKey.TITLE)
+        if spf.ResponseKey.NAME in resp:
+            # Don't pop the name so that it is present in both parts.
+            early[spf.ResponseKey.NAME] = resp[spf.ResponseKey.NAME]
         # Begin the multipart response.
         yield spf.MultipartToken.BEGIN
         # Send part 1.

src/server/demo/static/app.css

@@ -109,31 +109,54 @@ html, body {
   left: 0;
   width: 100%;
   height: 100%;
-  -webkit-transition: -webkit-transform 400ms ease, opacity 400ms linear;
-  transition: transform 400ms ease, opacity 400ms linear;
+  -webkit-transition: -webkit-transform 400ms ease, opacity 200ms linear;
+  transition: transform 400ms ease, opacity 200ms linear;
+  will-change: transform, opacity;
 }
 /* Transitions fade-out old and fade-in new */
 .spf-animate-start .spf-animate-old,
 .spf-animate-end   .spf-animate-new {
   opacity: 1;
+  -webkit-transition-delay: 200ms;
+  transition-delay: 200ms;
 }
 .spf-animate-start .spf-animate-new,
 .spf-animate-end   .spf-animate-old {
   opacity: 0;
 }
-/* transitions slide-out old and slide-in new */
+/* By default, no movement, just fade */
 .spf-animate-start .spf-animate-old,
 .spf-animate-end   .spf-animate-new {
   -webkit-transform: translate(0%, 0%);
   transform: translate(0%, 0%);
 }
-.spf-animate-start.spf-animate-forward .spf-animate-new,
-.spf-animate-end.spf-animate-reverse   .spf-animate-old {
+/* Home/Spec -> Demo, slide in from right */
+.spf-animate-from-home.spf-animate-to-demo.spf-animate-start .spf-animate-new,
+.spf-animate-from-spec.spf-animate-to-demo.spf-animate-start .spf-animate-new {
   -webkit-transform: translate(150%, 0%);
   transform: translate(150%, 0%);
+  -webkit-transition-delay: 0ms;
+  transition-delay: 0ms;
 }
-.spf-animate-end.spf-animate-forward   .spf-animate-old,
-.spf-animate-start.spf-animate-reverse .spf-animate-new {
+.spf-animate-from-home.spf-animate-to-demo.spf-animate-end .spf-animate-old,
+.spf-animate-from-spec.spf-animate-to-demo.spf-animate-end .spf-animate-old {
   -webkit-transform: translate(-150%, 0%);
   transform: translate(-150%, 0%);
+  -webkit-transition-delay: 0ms;
+  transition-delay: 0ms;
+}
+/* Demo -> Home/Spec, slide in from left */
+.spf-animate-from-demo.spf-animate-to-home.spf-animate-start .spf-animate-new,
+.spf-animate-from-demo.spf-animate-to-spec.spf-animate-start .spf-animate-new {
+  -webkit-transform: translate(-150%, 0%);
+  transform: translate(-150%, 0%);
+  -webkit-transition-delay: 0ms;
+  transition-delay: 0ms;
+}
+.spf-animate-from-demo.spf-animate-to-home.spf-animate-end .spf-animate-old,
+.spf-animate-from-demo.spf-animate-to-spec.spf-animate-end .spf-animate-old {
+  -webkit-transform: translate(150%, 0%);
+  transform: translate(150%, 0%);
+  -webkit-transition-delay: 0ms;
+  transition-delay: 0ms;
 }

src/server/demo/templates/base.tmpl

@@ -12,7 +12,7 @@ See the LICENSE file for details.
   <link rel="stylesheet" href="/static/app.css" name="app">
   $:content.stylesheet
 </head>
-<body>
+<body data-spf-name="$content.name">
   <div id="masthead">
     <strong>S</strong>tructured <strong>P</strong>age <strong>F</strong>ragments
     <span class="info">

src/server/demo/templates/chunked.tmpl

@@ -25,6 +25,7 @@ $def _javascript():
 
 
 $var title: Chunked Test
+$var name: chunked
 $var stylesheet: $:_stylesheet()
 $var javascript: $:_javascript()
 $var attributes: $:_attributes()

src/server/demo/templates/demo.tmpl

@@ -61,6 +61,7 @@ $def _attributes():
   { "nav": { "class": "demo$page_num" } }
 
 $var title: Demo Page $page_num
+$var name: demo
 $var stylesheet: $:_stylesheet()
 $var javascript:
 $var attributes: $:_attributes()

src/server/demo/templates/index.tmpl

@@ -39,6 +39,7 @@ $def _attributes():
   { "nav": { "class": "home" } }
 
 $var title: Home
+$var name: home
 $var stylesheet: $:_stylesheet()
 $var javascript: $:_javascript()
 $var attributes: $:_attributes()

src/server/demo/templates/missing.tmpl

@@ -7,6 +7,7 @@ $def _attributes():
   { "nav": { "class": "missing" } }
 
 $var title: Missing
+$var name: missing
 $var stylesheet:
 $var javascript:
 $var attributes: $:_attributes()

src/server/demo/templates/other.tmpl

@@ -10,6 +10,7 @@ $def _attributes():
   { "nav": { "class": "other" } }
 
 $var title: Other
+$var name: other
 $var stylesheet:
 $var javascript:
 $var attributes: $:_attributes()

src/server/demo/templates/spec.tmpl

@@ -17,6 +17,7 @@ $def _attributes():
   { "nav": { "class": "spec" } }
 
 $var title: Spec
+$var name: spec
 $var stylesheet: $:_stylesheet()
 $var javascript: $:_javascript()
 $var attributes: $:_attributes()

src/server/demo/templates/truncated.tmpl

@@ -7,6 +7,7 @@ $def _attributes():
   { "nav": { "class": "truncated" } }
 
 $var title: Truncated
+$var name: truncated
 $var stylesheet:
 $var javascript:
 $var attributes: $:_attributes()

src/server/python/spf.py

@@ -59,6 +59,7 @@ class ResponseKey(object):
     FOOT = 'foot'
     ATTR = 'attr'
     BODY = 'body'
+    NAME = 'name'
     REDIRECT = 'redirect'