vendor/assets/javascripts/emerson/sink.js in emerson-0.0.10 vs vendor/assets/javascripts/emerson/sink.js in emerson-0.0.11

@@ -1,7 +1,10 @@
 //     Emerson Sink
 //
+//     "sink - a body or process that acts to absorb or remove energy or a
+//     particular component from a system."
+//
 //     Adds...
 
 (function(ns) {
 
   // Emerson Extension
@@ -105,31 +108,62 @@
     return result;
   }
 
   // ### process
   // ...
+  // TODO: DRY-up the update code.
   function process(element, matches) {
     var parts, strategy, clone;
 
     if(matches.length > 1) {
-      matches.each(function() {
+      matches.each(function(current) {
+        current  = $(this);
         clone    = prepare(element.clone(true));
-        parts    = $(this).data('sink').split(':');
+        parts    = current.data('sink').split(':');
         strategy = parts[1] || 'replace';
 
-        $(this).trigger('sink:before');
-        strategies[strategy].call(clone, $(this))
+        current.trigger('sink:before');
+        strategies[strategy]
+          .call(clone, current)
+          .each(forceCalculateStyle)
           .trigger('sink:after');
 
         clone.trigger('sink:after');
       });
     }
     else {
       parts    = matches.data('sink').split(':');
       strategy = parts[1] || 'replace';
 
       matches.trigger('sink:before');
-      strategies[strategy].call(prepare(element), matches)
+      strategies[strategy]
+        .call(prepare(element), matches)
+        .each(forceCalculateStyle)
         .trigger('sink:after');
     }
+  }
+
+  // ### forceCalculateStyle
+  //
+  //     forceCalculateStyle.call(node)
+  //
+  // Given a DOM node, force style calculation. e.g., this might be useful for
+  // establishing a render baseline to enable CSS animations. Note that the
+  // particular property accessed is arbitrary.
+  //
+  // TODO: Add spec coverage (needs pre-/post-render and some CSS transition).
+  //
+  // Credits:
+  //
+  //     * Doug Rohrer & Rachel Heaton for the bug fix:
+  //       <https://github.com/coreyti/emerson/pull/9>
+  function forceCalculateStyle() {
+    if(this.jquery) {
+      window.getComputedStyle(this[0]).opacity;
+    }
+    else {
+      window.getComputedStyle(this).opacity;
+    }
+
+    return this;
   }
 })(Emerson);