Better text handling, etc.

modules/hero.js

@@ -24,6 +24,11 @@ function destroy(vnode) {
   var hero = vnode.data.hero;
   if (hero && hero.id) {
     vnode.boundingRect = vnode.elm.getBoundingClientRect() //save the bounding rectangle to a new property on the vnode
+    var computedStyle = window.getComputedStyle(vnode.elm, null) //save current styles (includes inherited properties) - read only
+    vnode.savedStyle = {
+      textAlign: computedStyle.textAlign,
+      //todo: more properties?
+    }
     removed[hero.id] = vnode;
   }
 }
@@ -31,26 +36,31 @@ function destroy(vnode) {
 function post() {
   var i, id, newElm, oldVnode, oldElm, hRatio, wRatio,
       oldRect, newRect, dx, dy, origTransform, origTransition,
-      newStyle, oldStyle;
+      newStyle, oldStyle, newComputedStyle, isTextNode;
   for (i = 0; i < created.length; i += 2) {
     id = created[i];
     newElm = created[i+1].elm;
     oldVnode = removed[id];
     if (oldVnode) {
       newStyle = newElm.style;
+      newComputedStyle = window.getComputedStyle(newElm, null) //get full computed style for new element
       oldElm = oldVnode.elm;
       oldStyle = oldElm.style;
       newRect = newElm.getBoundingClientRect();
-      oldRect = oldVnode.boundingRect; //Use previously saved rect
+      oldRect = oldVnode.boundingRect; //Use previously saved bounding rect
       dx = oldRect.left - newRect.left;
       dy = oldRect.top - newRect.top;
-      wRatio = newRect.width / (Math.max(oldRect.width, 1));
+      // Determine if these are text elements.  if so, scale based on hRatio only.
+      isTextNode = oldElm.childNodes.length === 1 && oldElm.childNodes[0].nodeType === 3
       hRatio = newRect.height / (Math.max(oldRect.height, 1));
+      wRatio = isTextNode ? hRatio : newRect.width / (Math.max(oldRect.width, 1));
       // Animate new element
       origTransform = newStyle.transform;
       origTransition = newStyle.transition;
+      if (newComputedStyle.display === 'inline') //inline elements cannot be transformed
+        newStyle.display = 'inline-block'        //this does not appear to have any negative side effects
       newStyle.transition = origTransition + 'transform 0s';
-      newStyle.transformOrigin = '0 0';
+      newStyle.transformOrigin = isTextNode ? 'center top' : '0 0'; //made conditional
       newStyle.opacity = '0';
       newStyle.transform = origTransform + 'translate('+dx+'px, '+dy+'px) ' +
                                'scale('+1/wRatio+', '+1/hRatio+')';
@@ -64,9 +74,12 @@ function post() {
       oldStyle.width = oldRect.width + 'px'; //Needed for elements who were sized relative to their parents
       oldStyle.height = oldRect.height + 'px'; //Needed for elements who were sized relative to their parents
       oldStyle.margin = 0; //Margin on hero element leads to incorrect positioning
-      oldStyle.transformOrigin = '0 0';
+      oldStyle.transformOrigin = isTextNode ? 'center top' : '0 0'; //made conditional
       oldStyle.transform = 'translate('+dx+'px, '+dy+'px)';
       oldStyle.opacity = '1';
+      oldStyle.textAlign = oldVnode.savedStyle.textAlign; //needed when elements have inherited property
+      // if (oldVnode.savedStyle.display === 'inline')
+      //   oldStyle.display = 'inline-block'
       document.body.appendChild(oldElm);
       setNextFrame(oldStyle, 'transform', 'scale('+wRatio+', '+hRatio+')');
       setNextFrame(oldStyle, 'opacity', '0');