add flip, rename to gfx

maccman · Jun 12, 2011 · b62c561 · b62c561
1 parent 9065da6
commit b62c561
Show file tree

Hide file tree

Showing 6 changed files with 265 additions and 21 deletions.
diff --git a/gfx.coffee b/gfx.coffee
@@ -0,0 +1,143 @@
+$ = @jQuery
+
+throw 'jQuery required' unless $
+
+$.support.gfx = 'webkitTransitionEnd' of window
+
+defaults = 
+  duration: 400 
+  queue: true
+  easing: ''
+
+transformTypes = [
+  'scale', 'scaleX', 'scaleY', 'scale3d',
+  'rotate', 'rotateX', 'rotateY', 'rotateZ', 'rotate3d',
+  'translate', 'translateX', 'translateY', 'translateZ', 'translate3d',
+  'skew', 'skewX', 'skewY', 
+  'matrix', 'matrix3d', 'perspective'
+]
+
+$.fn.queueNext = (callback, type) ->
+	type or= "fx";
+
+	@queue ->
+	  callback.apply(this, arguments)
+	  setTimeout =>
+	    jQuery.dequeue(this, type)
+
+$.fn.transform = (properties) ->
+  transforms = []
+
+  for key, value of properties when key in transformTypes
+    transforms.push("#{key}(#{value})")
+    delete properties[key]
+
+  if transforms.length
+    properties['-webkit-transform'] = transforms.join(' ')
+
+  $(@).css(properties)
+
+$.fn.gfx = (properties, options) ->
+  opts = $.extend({}, defaults, options)
+
+  unless typeof opts.duration is 'string'
+    opts.duration += 'ms'
+
+  properties['-webkit-transition'] = "all #{opts.duration} #{opts.easing}"
+
+  callback = ->
+    $(@).css('-webkit-transition', '')
+    opts.complete?.apply(this, arguments)
+    $(@).dequeue()
+
+  @[ if opts.queue is false then 'each' else 'queue' ] ->
+    $(@).one('webkitTransitionEnd', callback)
+    $(@).transform(properties)
+
+$.fn.gfxPopIn = (options) ->
+  $(@).queueNext ->   
+    $(@).transform
+      '-webkit-transform-origin': '50% 50%'
+      scale:   '.2'
+      opacity: '0',
+      display: 'block'
+
+  $(@).gfx({
+    scale:   '1'
+    opacity: '1'
+  }, options)
+
+$.fn.gfxPopOut = (options) ->
+  $(@).queueNext ->   
+    $(@).transform
+      '-webkit-transform-origin': '50% 50%'
+      scale:   '1'
+      opacity: '1'
+  $(@).gfx({
+    scale:   '.2'
+    opacity: '0'
+  }, options)
+
+  $(@).queueNext -> 
+    $(@).transform
+      display: 'none'
+      opacity: '1'
+      scale:   '1'
+
+$.fn.gfxFadeIn = (options = {}) ->
+  options.duration ?= 1000
+  $(@).queueNext -> 
+    $(@).css 
+      display: 'block'
+      opacity: '0'
+  $(@).gfx({opacity: 1}, options);
+
+$.fn.gfxFadeOut = (options = {}) ->
+  $(@).queueNext ->   
+    $(@).css
+      opacity: 1
+  $(@).gfx({opacity: 0}, options);
+  $(@).queueNext ->
+    $(@).css
+      display: 'none'
+      opacity: 1
+
+$.fn.gfxShake = (options = {}) ->
+  options.duration ?= 100
+  options.easing   ?= 'ease-out'
+  distance = options.distance or 20
+  $(@).gfx({translateX: "-#{distance}px"}, options)
+  $(@).gfx({translateX: "#{distance}px"}, options)
+  $(@).gfx({translateX: "-#{distance}px"}, options)
+  $(@).gfx({translateX: "#{distance}px"}, options)
+  $(@).queueNext ->
+    $(@).transform(translateX: 0)
+
+$.fn.gfxBlip = (options = {}) ->
+  scale = options.scale or '1.15'
+  $(@).gfx({scale: scale}, options)
+  $(@).gfx({scale: '1'}, options)
+
+$.fn.gfxExplodeIn = (options = {}) ->
+  scale = options.scale or '3'
+  $(@).queueNext ->
+    $(@).transform(scale: scale, opacity: '0', display: 'block')
+  $(@).gfx({scale: '1', opacity: '1'}, options)
+
+$.fn.gfxExplodeOut = (options = {}) ->
+  scale = options.scale or '3'
+  $(@).queueNext ->
+    $(@).transform(scale: '1', opacity: '1')
+  $(@).gfx({scale: scale, opacity: '0'}, options)
+  $(@).queueNext ->
+    $(@).transform(scale: '1', opacity: '1', display: 'none')
+
+$.fn.gfxFlipIn = (options = {}) ->
+  $(@).queueNext ->
+    $(@).transform(rotateY: '180deg', scale: '.8')
+  $(@).gfx({rotateY: 0, scale: 1}, options)
+
+$.fn.gfxFlipOut = (options = {}) ->
+  $(@).queueNext ->
+    $(@).transform(rotateY: 0, scale: 1)
+  $(@).gfx({rotateY: '-180deg', scale: '.8'}, options)
diff --git a/index.html b/index.html
@@ -1,6 +1,7 @@
 <!DOCTYPE html>
 <html>
 <head>
+<title>Gfx</title>
 <style type="text/css" media="screen">
   html, body {
     height: 100%;
@@ -20,23 +21,46 @@
   }
 
   .box {
-    margin: 10% auto;
-    width: 400px;
-    height: 400px;
     background: #E3E3E3;
     border: 1px solid #FFF;
     -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
+    padding: 20px;
+  }
+
+  #boxTwo {
+    background: rgba(0, 0, 0, 0.5);
+    border: 1px solid #000;
+    color: #FFF;
+  }
+
+  #boxes {
+    margin: 10% auto;
+    width: 400px;
+    height: 400px;
+  }
+
+  #boxes .box {
+    width: 100%;
+    height: 100%;
+  }
+
+  #boxes .back {
+    display: none;
   }
 </style>
 </head>
 
   <script src="site/jquery.js" type="text/javascript" charset="utf-8"></script>
   <script src="site/coffee-script.js" type="text/javascript" charset="utf-8"></script>
 
-  <script src="grafx.coffee" type="text/coffeescript" charset="utf-8"></script>  
-  <script src="lib/grafx.box.coffee" type="text/coffeescript" charset="utf-8"></script>
+  <script src="gfx.coffee" type="text/coffeescript" charset="utf-8"></script>  
+  <script src="lib/gfx.box.coffee" type="text/coffeescript" charset="utf-8"></script>
+  <script src="lib/gfx.flip.coffee" type="text/coffeescript" charset="utf-8"></script>
   <script src="site/examples.coffee" type="text/coffeescript" charset="utf-8"></script>
 <body>
-  <div class="box"></div>
+  <div id="boxes">
+    <div id="boxOne" class="front box">One</div>
+    <div id="boxTwo" class="back box">Two</div>
+  </div>
 </body>
 </html>
diff --git a/lib/gfx.box.coffee b/lib/gfx.box.coffee
@@ -0,0 +1,50 @@
+$ = jQuery
+
+isOpen = ->
+  !!$('#gfxBox').length
+
+close = ->
+  box = $('#gfxBox')
+  console.log(box.find('#gfxBoxPanel'))
+  box.find('#gfxBoxPanel').gfx(scale: '1.1', opacity: 0)
+  box.gfx(background: 'rgba(0,0,0,0)')
+  box.queueNext -> box.remove()
+
+panelCSS = 
+  opacity:    0
+  scale:      0.5
+  width:      500
+  minHeight:  400
+  padding:    15
+  margin:     '10% auto'
+  background: '#E3E3E3'
+  border:     '1px solid #FFF'
+  '-webkit-box-shadow': '0 0 20px rgba(0,0,0,0.4)'
+
+overlayStyles = 
+  position:   'fixed'
+  zIndex:     99
+  top:        0
+  left:       0
+  width:      '100%'
+  height:     '100%'
+  background: 'rgba(0,0,0,0)'
+
+$.gfxBox = (element, options = {}) ->
+  close() if isOpen()
+
+  overlay = $('<div />').attr('id': 'gfxBox')
+  overlay.css(overlayStyles)
+  overlay.click(close)
+  overlay.delegate('.close', 'click', close)
+  overlay.bind('close', close)
+
+  panel = $('<div />').attr('id': 'gfxBoxPanel')
+  panel.transform($.extend({}, panelCSS, options.css))
+
+  panel.append(element)
+  overlay.append(panel)
+  $('body').append(overlay)
+
+  overlay.delay().gfx({background: 'rgba(0,0,0,0.5)'}, {duration: options.duration})
+  panel.delay().gfx({scale: 1, opacity: 1})
diff --git a/lib/gfx.cube.coffee b/lib/gfx.cube.coffee
diff --git a/lib/gfx.flip.coffee b/lib/gfx.flip.coffee
@@ -0,0 +1,27 @@
+
+$ = jQuery
+
+$.fn.gfxFlip = (options = {}) ->
+  front = $(@).find('.front')
+  back  = $(@).find('.back')
+
+  $(@).css(
+    'position': 'relative'
+  )
+
+  front.add(back).css
+    position: 'absolute'
+    width:    '100%'
+    height:   '100%'
+    display:  'block'
+
+  front.css
+    '-webkit-backface-visibility': 'hidden'
+
+  back.transform
+    rotateY: '180deg'
+
+  flipped = false
+  $(@).bind 'flip', ->
+    flipped = not flipped
+    $(@).gfx('rotateY': if flipped then '180deg' else '0deg')
diff --git a/site/examples.coffee b/site/examples.coffee
@@ -1,24 +1,24 @@
 $ = jQuery
 
 $ ->
-
-  $(".box").click ->
-    $(this).grafx(scale: "1.5")
+  
+  $("#boxes").click ->
+    $(this).gfx(scale: "1.5")
       .delay(100)
-      .grafx(scale: "1")
-      .grafx(rotate: "180deg")
+      .gfx(scale: "1")
+      .gfx(rotate: "180deg")
       .delay(300)
-      .grafx(rotate: "0deg")
-      .grafx(translateX: "-100px")
+      .gfx(rotate: "0deg")
+      .gfx(translateX: "-100px")
       .delay(0)
-      .grafx(translateX: "100px", opacity: 0.2)
+      .gfx(translateX: "100px", opacity: 0.2)
       .delay(0)
-      .grafx(translateX: 0, opacity: 1)
-
-    $(this).grafxExplodeOut().delay(100).grafxExplodeIn();  
-    $(this).grafxShake();
-
-    $(this).delay(500).grafxFlipOut()
+      .gfx(translateX: 0, opacity: 1)
 
+    $(this).gfxExplodeOut().delay(100).gfxExplodeIn();  
+    $(this).gfxShake();
+
   $(".box").dblclick ->
-    $.grafxBox("Yo there")
+    $.gfxBox("Yo there")
+
+  $("#boxes").gfxFlip().click -> $(this).trigger("flip")