fix site in Chrome 11

maccman · Jun 13, 2011 · f4549e1 · f4549e1
1 parent 60d7c70
commit f4549e1
Show file tree

Hide file tree

Showing 3 changed files with 85 additions and 3 deletions.
diff --git a/lib/gfx.cube.js b/lib/gfx.cube.js
@@ -1,5 +1,5 @@
 (function() {
-  var $, defaults, sides;
+  var $, chrome11, chromeMatch, chromeRegex, defaults, sides;
   $ = jQuery;
   sides = {
     front: {
@@ -111,4 +111,44 @@
       }, sides[type]));
     });
   };
+  chromeRegex = /(Chrome)[\/]([\w.]+)/;
+  chromeMatch = chromeRegex.exec(navigator.userAgent) || [];
+  chrome11 = chromeRegex[1] && chromeRegex[2].test(/^12\./);
+  if (!$.browser.webkit || chrome11) {
+    $.fn.gfxCube = function(options) {
+      var element, opts, wrapper;
+      opts = $.extend({}, defaults, options);
+      element = $(this);
+      element.css({
+        position: 'relative',
+        width: opts.width,
+        height: opts.height
+      });
+      wrapper = $('<div />');
+      wrapper.addClass('gfxCubeWrapper');
+      wrapper.transform({
+        position: 'absolute',
+        width: '100%',
+        height: '100%',
+        left: 0,
+        top: 0,
+        overflow: 'visible'
+      });
+      element.children().wrapAll(wrapper).css({
+        display: 'block',
+        position: 'absolute',
+        width: '100%',
+        height: '100%',
+        left: 0,
+        top: 0,
+        overflow: 'hidden'
+      });
+      wrapper = element.find('.gfxCubeWrapper');
+      wrapper.children('*:not(.front)').hide();
+      return element.bind('cube', function(e, type) {
+        wrapper.children().hide();
+        return wrapper.children("." + type).show();
+      });
+    };
+  }
 }).call(this);
diff --git a/site/site.css b/site/site.css
@@ -143,7 +143,7 @@ a {
   text-align: center;
   display: none;
   color: #FFF;
-  text-shadow: 0 -2px 0 #000;
+  text-shadow: 0 -1px 0 #000;
   margin: 20px 0;
 }
 

diff --git a/src/gfx.cube.coffee b/src/gfx.cube.coffee
@@ -71,4 +71,46 @@ $.fn.gfxCube = (options) ->
 
   $(@).bind 'cube', (e, type) ->
     wrapper = element.find('.gfxCubeWrapper')
-    wrapper.gfx($.extend({}, {translateZ: "-#{tZ}"}, sides[type]))
+    wrapper.gfx($.extend({}, {translateZ: "-#{tZ}"}, sides[type]))
+
+# Disable cubes in Firefox / Chrome < 12
+chromeRegex = /(Chrome)[\/]([\w.]+)/
+chromeMatch = chromeRegex.exec( navigator.userAgent ) or []
+chrome11    = chromeRegex[1] and chromeRegex[2].test(/^12\./)
+
+if not $.browser.webkit or chrome11
+  $.fn.gfxCube = (options) ->
+    opts = $.extend({}, defaults, options)
+
+    element = $(@)
+
+    element.css
+      position: 'relative'
+      width:  opts.width
+      height: opts.height
+
+    wrapper = $('<div />')
+    wrapper.addClass('gfxCubeWrapper')
+    wrapper.transform
+      position: 'absolute'
+      width: '100%'
+      height: '100%'
+      left: 0
+      top: 0
+      overflow: 'visible'
+
+    element.children().wrapAll(wrapper).css
+      display: 'block'
+      position: 'absolute'
+      width: '100%'
+      height: '100%'
+      left: 0
+      top: 0
+      overflow: 'hidden'
+
+    wrapper = element.find('.gfxCubeWrapper')
+
+    wrapper.children('*:not(.front)').hide()
+    element.bind 'cube', (e, type) ->
+      wrapper.children().hide()
+      wrapper.children(".#{type}").show()