New animation code WIP

package.json

@@ -1,6 +1,6 @@
 {
   "name": "salet",
-  "version": "1.4.15",
+  "version": "1.5.0",
   "description": "A general client-side framework for cybertext interactive fiction games.",
   "keywords": ["ifiction", "interactive fiction", "games", "coffee-script", "text", "menu"],
   "homepage": "http://salet.oreolek.ru",

src/view.coffee

@@ -172,21 +172,11 @@ class SaletView
   # interactive - if we're working in interactive mode (or we're loading a save)
   removeTransient: (interactive = false) ->
     contentToHide = jQuery('#content .transient')
-    contentToHide.add(jQuery('#content .options'))
-    contentToHide.add(jQuery("#content a").filter(() ->
+    contentToHide = contentToHide.add('#content .options')
+    contentToHide = contentToHide.add(jQuery("#content a").filter(() ->
       return jQuery(this).attr("href").match(/[?&]transient[=&]?/)
     ))
-    if (interactive)
-      contentToHide.animate({
-          opacity: 0,
-          height: 0
-        }, {
-          duration: 500,
-          always: () ->
-            jQuery(this).remove()
-        })
-    else
-      contentToHide.remove()
+    @hideBlock(contentToHide, interactive, true)
     for a in jQuery('#content').find('a')
       a = jQuery(a)
       if (a.hasClass('sticky') || a.attr("href").match(/[?&]sticky[=&]?/))
@@ -242,14 +232,52 @@ class SaletView
         jQuery(link.get(0)).click()
     )
 
-  showBlock: (selector) ->
-    block = document.querySelector(selector)
-    if block
-      block.style.display = "block"
-  hideBlock: (selector) ->
-    block = document.querySelector(selector)
-    if block
-      block.style.display = "none"
+  # Animate.css effect to use for hiding things
+  hideAnimation: "fadeOutUp"
+  # Animate.css effect to use for showing things
+  showAnimation: "fadeInDown"
+
+  showBlock: (block) ->
+    block = jQuery(block)
+    @animateBlock(block, @showAnimation, () ->
+      jQuery(this).removeClass("animated #{@showAnimation}")
+    )
+
+  # A function to play CSS animation on a block.
+  # Implies the effect is one-time, not infinite.
+  # @param block  - jQuery object
+  # @param effect - animate.css effect to call
+  # @param after  - a callback function to execute after the animation is done
+  animateBlock: (block, effect, after = false) ->
+    animationEnd = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend'
+    block.addClass("animated #{effect}")
+    block.one(animationEnd, after)
+
+  # A function to hide a block
+  # @param block - jQuery object or selector to hide
+  # @param interactive - corresponds to salet.interactive, should we play an effect or not
+  # @param remove - whether to remove the block from DOM afterwards
+  hideBlock: (block, interactive = true, remove = true) ->
+    block = jQuery(block)
+    if (interactive)
+      callback = false
+      if (remove)
+        callback = () ->
+          console.log this
+          jQuery(this).removeClass("animated #{@hideAnimation}")
+          jQuery(this).remove()
+      else
+        callback = () ->
+          console.log this
+          jQuery(this).removeClass("animated #{@hideAnimation}")
+          jQuery(this).css("display", "none")
+      @animateBlock(block, @hideAnimation, callback)
+    else
+      if (remove)
+        block.remove()
+      else
+        block.css("display", "none")
+
   updateWays: (ways, name) ->
     if document.getElementById("ways") == null
       return
@@ -265,6 +293,6 @@ class SaletView
         })
       @showBlock(".ways #ways_hint")
     else
-      @hideBlock(".ways #ways_hint")
+      @hideBlock(".ways #ways_hint", true, false)
   cycleLink: (content) ->
     return "<a href='./_replacer_cyclewriter' class='cycle' id='cyclewriter'>#{content}</a>"