Permalink
Browse files

Removed panel-flip-up CSS animations, as they were outdated.

  • Loading branch information...
1 parent 40ffa8e commit 301ba3ff718ae25b627419b4cdffa249706281a5 @dclowd9901 committed Jan 12, 2012
Showing with 39 additions and 120 deletions.
  1. +0 −79 css/flipper.css
  2. +37 −39 js/jquery.flipper.js
  3. +1 −1 js/jquery.flipper_compressed.js
  4. +1 −1 time.php
View
79 css/flipper.css
@@ -150,85 +150,6 @@
}
}
-.flipper-container .bottom .panel.bottomFlipUp {
- opacity: 1;
- -webkit-animation-duration: 50ms;
- -webkit-animation-name: bottomFlipUp;
- -webkit-animation-timing-function: ease-in;
- -moz-animation-duration: 50ms;
- -moz-animation-name: bottomFlipUp;
- -moz-animation-timing-function: ease-in;
- animation-duration: 50ms;
- animation-name: bottomFlipUp;
- animation-timing-function: ease-in;
-}
-
-@-webkit-keyframes bottomFlipUp {
- from {
- -webkit-transform: rotateX(0deg);
- }
- to {
- -webkit-transform: rotateX(90deg);
- }
-}
-
-@-moz-keyframes bottomFlipUp {
- from {
- -moz-transform: rotateX(0deg);
- }
- to {
- -moz-transform: rotateX(90deg);
- }
-}
-
-@keyframes bottomFlipUp {
- from {
- transform: rotateX(0deg);
- }
- to {
- transform: rotateX(90deg);
- }
-}
-.flipper-container .top .panel.topFlipUp {
- opacity: 1;
- -webkit-animation-duration: 50ms;
- -webkit-animation-name: topFlipUp;
- -webkit-animation-timing-function: linear;
- -moz-animation-duration: 50ms;
- -moz-animation-name: topFlipUp;
- -moz-animation-timing-function: linear;
- animation-duration: 50ms;
- animation-name: topFlipUp;
- animation-timing-function: linear;
-}
-
-@-webkit-keyframes topFlipUp {
- from {
- -webkit-transform: rotateX(-90deg);
- }
- to {
- -webkit-transform: rotateX(0deg);
- }
-}
-
-@-moz-keyframes topFlipUp {
- from {
- -webkit-transform: rotateX(-90deg);
- }
- to {
- -webkit-transform: rotateX(0deg);
- }
-}
-
-@keyframes topFlipUp {
- from {
- -webkit-transform: rotateX(-90deg);
- }
- to {
- -webkit-transform: rotateX(0deg);
- }
-}
-
.flipper-container .stationary-panel span,
.flipper-container .panel span {
color: #ddd;
View
76 js/jquery.flipper.js
@@ -61,14 +61,14 @@
"-moz-border-radius-topleft" : bRadius + 'px',
"-moz-border-radius-topright" : bRadius + 'px',
"-webkit-border-radius" : bRadius + "px " + bRadius + "px 0 0",
- "border-radius" : bRadius + "px " + bRadius + "px 0 0",
+ "border-radius" : bRadius + "px " + bRadius + "px 0 0"
});
$panel.find('.bottom .panel, .bottom .stationary-panel').css({
"-moz-border-radius-bottomleft" : bRadius + 'px',
"-moz-border-radius-bottomright" : bRadius + 'px',
"-webkit-border-radius" : "0 0 " + bRadius + "px " + bRadius + "px",
- "border-radius" : "0 0 " + bRadius + "px " + bRadius + "px",
+ "border-radius" : "0 0 " + bRadius + "px " + bRadius + "px"
});
$panel.find('span').text(' ');
@@ -79,8 +79,8 @@
top : ( options.textOffset.v >= 0 ) ? '+=' + options.textOffset.v + 'px' : '-=' + Math.abs( options.textOffset.v ) + 'px',
left : ( options.textOffset.h >= 0 ) ? '+=' + options.textOffset.h + 'px' : '-=' + Math.abs( options.textOffset.h ) + 'px'
});
- }
- }
+ };
+ };
function getCurrentBoard(){
var $rows = $el.find('.panel-row');
@@ -101,7 +101,7 @@
});
return currentBoard;
- }
+ };
function createNewBoard( str ){
var lineLength = options.dimensions[0];
@@ -116,34 +116,32 @@
var lineHasRoom = true;
while( lineHasRoom ){
- if( _.isString( strSplode[currentWordIndex] ) && strSplode[currentWordIndex].length <= thisLine ){
- var wordAsArray = [];
-
+ if( _.isString( strSplode[currentWordIndex] ) && strSplode[currentWordIndex].length <= thisLine ){
for( charIndex in strSplode[currentWordIndex] ){
line.push( strSplode[currentWordIndex][charIndex] );
- }
+ };
thisLine -= strSplode[currentWordIndex].length;
if( thisLine !== 0 ){
line.push(' ');
thisLine--;
- }
+ };
currentWordIndex++;
} else if( thisLine !== 0 ){
line.push(' ');
thisLine--;
} else {
lineHasRoom = false;
- }
- }
+ };
+ };
newBoard.push( line );
- }
+ };
return newBoard;
- }
+ };
function panelChangeDispatch( toChange ){
var $panels = $el.find('.flipper-container');
@@ -162,31 +160,31 @@
delayFlipGo( $panel, current, to, delay );
} else {
flipGo( $panel, current, to );
- }
- }
+ };
+ };
};
- }
+ };
function delayFlipGo( $panel, current, to, delay ){
setTimeout( function(){
flipGo( $panel, current, to );
}, delay);
- }
+ };
function flipGo( $panel, current, to ){
var direction = 1;
if( current === to ){
direction = 0;
- }
+ };
switch( direction ){
case 0:
break;
case 1:
var skipAnimation = doSkipAnimation( current, to, options.alphabet.length );
current = options.alphabet[ current + 1 ] ? current : -1;
- var next = options.alphabet[ current + 1 ]
+ var next = options.alphabet[ current + 1 ];
var $def = $.Deferred();
flipUp( next, $panel, skipAnimation, $def );
@@ -196,8 +194,8 @@
flipGo( $panel, current, to );
});
break;
- }
- }
+ };
+ };
function flipUp( next, $panel, skip, $def ){
@@ -210,11 +208,11 @@
$topPanel.find('span').text( next );
$bottomPanel.find('span').text( next );
$topSPanelSpan.text( next );
- $bottomSPanelSpan.text( next )
+ $bottomSPanelSpan.text( next );
setTimeout( function(){
$def.resolve();
- }, 50)
+ }, 50);
} else {
@@ -236,16 +234,16 @@
});
$topPanel.addClass('topFlipDown');
- }
- }
+ };
+ };
function doSkipAnimation( currentIndex, toIndex, alphaLength ){
if( currentIndex < toIndex ){
if( currentIndex + options.skipAnimationThreshold > toIndex ){
return false;
} else {
return true;
- }
+ };
} else {
var lengthToEnd = alphaLength - currentIndex;
@@ -254,9 +252,9 @@
return true;
} else {
return false;
- }
- }
- }
+ };
+ };
+ };
function difference(template, override) {
var ret = {};
@@ -266,14 +264,14 @@
var diff = difference(template[name], override[name]);
if (!_.isEmpty(diff)) {
ret[name] = diff;
- }
+ };
} else if (!_.isEqual(template[name], override[name])) {
ret[name] = override[name];
- }
- }
- }
+ };
+ };
+ };
return ret;
- }
+ };
var tools = {
updateString : function( str ){
@@ -284,7 +282,7 @@
for( i = 0; i < cBoard.length; i++ ){
differences.push( difference( cBoard[i], nBoard[i] ) );
- }
+ };
panelChangeDispatch( differences );
},
@@ -299,7 +297,7 @@
thisIndex = parseInt( this, 10 );
} else {
thisIndex = this;
- }
+ };
$el.find('.flipper-container').eq( thisIndex ).find('span').width( newWidth );
@@ -312,7 +310,7 @@
}
$el.find('.flipper-container').eq( panelIndex ).find('span').width( newWidth );
- }
+ };
}
};
@@ -324,7 +322,7 @@
});
return tools;
- }
+ };
})(jQuery);
// Underscore.js 1.3.0
View
2 js/jquery.flipper_compressed.js
@@ -1,4 +1,4 @@
-(function(a){a.fn.Flipper=function(b){function s(a,b){var c={};for(var d in a){if(d in b){if(_.isObject(b[d])&&!_.isArray(b[d])){var e=s(a[d],b[d]);if(!_.isEmpty(e)){c[d]=e}}else if(!_.isEqual(a[d],b[d])){c[d]=b[d]}}}return c}function q(a,b,c){if(a<b){if(a+d.skipAnimationThreshold>b){return false}else{return true}}else{var e=c-a;if(e+b>d.skipAnimationThreshold){return true}else{return false}}}function p(a,b,c,d){var e=b.find(".top .panel");var f=b.find(".top .stationary-panel span");var g=b.find(".bottom .panel");var h=b.find(".bottom .stationary-panel span");if(c){e.find("span").text(a);g.find("span").text(a);f.text(a);h.text(a);setTimeout(function(){d.resolve()},50)}else{f.text(a);g.children("span").text(a);e.on("webkitAnimationEnd animationend",function(){e.removeClass("topFlipDown");e.children("span").text(a);g.addClass("bottomFlipDown")});g.on("webkitAnimationEnd animationend",function(){g.removeClass("bottomFlipDown");h.text(a);e.off("webkitAnimationEnd animationend");g.off("webkitAnimationEnd animationend");d.resolve()});e.addClass("topFlipDown")}}function o(b,c,e){var f=1;if(c===e){f=0}switch(f){case 0:break;case 1:var g=q(c,e,d.alphabet.length);c=d.alphabet[c+1]?c:-1;var h=d.alphabet[c+1];var i=a.Deferred();p(h,b,g,i);a.when(i).then(function(){c++;o(b,c,e)});break}}function n(a,b,c,d){setTimeout(function(){o(a,b,c)},d)}function m(b){var c=e.find(".flipper-container");for(i=0;i<b.length;i++){for(panelIndex in b[i]){var f=a(c[parseInt(panelIndex,10)+i*g[0].length]);var h=f.find("span").first().text();var j=b[i][panelIndex];var k=d.alphabet.indexOf(h);var l=d.alphabet.indexOf(j)===-1?0:d.alphabet.indexOf(j);if(d.dimensions[1]>1){var m=i*d.lineDelay;n(f,k,l,m)}else{o(f,k,l)}}}}function l(a){var b=d.dimensions[0];var c=d.dimensions[1];var e=[];var f=a.split(" ");var g=0;for(i=0;i<c;i++){var h=b;var j=[];var k=true;while(k){if(_.isString(f[g])&&f[g].length<=h){var l=[];for(charIndex in f[g]){j.push(f[g][charIndex])}h-=f[g].length;if(h!==0){j.push(" ");h--}g++}else if(h!==0){j.push(" ");h--}else{k=false}}e.push(j)}return e}function k(){var b=e.find(".panel-row");var c=[];a.each(b,function(){var b=a(this);var d=b.find(".top .stationary-panel span");var e=[];a.each(d,function(){var b=a(this);e.push(b.text())});c.push(e)});return c}var d={dimensions:null,alphabet:["0","1","2","3","4","5","6","7","8","9","a","b","c","d","e","f","g","h","i","j","k","l","m","n","o","p","q","r","s","t","u","v","w","x","y","z"," ",".","?","!","@","#",":",",",'"',"'","/",";","(",")","%","-","A","B","C","D","E","F","G","H","I","J","K","L","M","N","O","P","Q","R","S","T","U","V","W","X","Y","Z"],flipSpeed:50,fontSize:120,callback:function(){},align:"center",skipAnimationThreshold:5,lineDelay:500,textOffset:{h:0,v:0}};a.extend(d,b);var e=a(this);var f=0;var g=[];for(r=0;r<d.dimensions[1];r++){var h=jQuery('<div class="panel-row" />');e.append(h);g.push([]);for(c=0;c<d.dimensions[0];c++){var j=jQuery('<div class="flipper-container"><div class="pers-wrapper top"><div class="stationary-panel"><span></span></div><div class="panel"><span></span></div></div><div class="pers-wrapper bottom"><div class="stationary-panel"><span></span></div><div class="panel"><span></span></div></div></div>');h.append(j);g[r].push("");j.find("span").css({fontSize:d.fontSize});j.find(".bottom span").css({top:"-"+d.fontSize/1.5+"px"});j.find(".panel, .stationary-panel").css({height:d.fontSize/1.5,borderBottomWidth:Math.ceil(d.fontSize/1.5*.0322)});if(r===0&&c===0){j.find("span").text("W");f=j.find("span").first().width()}bRadius=f*.1;j.find(".top .panel, .top .stationary-panel").css({"-moz-border-radius-topleft":bRadius+"px","-moz-border-radius-topright":bRadius+"px","-webkit-border-radius":bRadius+"px "+bRadius+"px 0 0","border-radius":bRadius+"px "+bRadius+"px 0 0"});j.find(".bottom .panel, .bottom .stationary-panel").css({"-moz-border-radius-bottomleft":bRadius+"px","-moz-border-radius-bottomright":bRadius+"px","-webkit-border-radius":"0 0 "+bRadius+"px "+bRadius+"px","border-radius":"0 0 "+bRadius+"px "+bRadius+"px"});j.find("span").text(" ");j.find("span").css("width",f);j.find("span").css({top:d.textOffset.v>=0?"+="+d.textOffset.v+"px":"-="+Math.abs(d.textOffset.v)+"px",left:d.textOffset.h>=0?"+="+d.textOffset.h+"px":"-="+Math.abs(d.textOffset.h)+"px"})}}var t={updateString:function(a){var b=k();var c=l(a);var d=[];for(i=0;i<b.length;i++){d.push(s(b[i],c[i]))}m(d)},overrideWidth:function(b,c){if(_.isArray(b)){a.each(b,function(){var a;if(_.isString(this)){a=parseInt(this,10)}else{a=this}e.find(".flipper-container").eq(a).find("span").width(c)})}else{if(_.isString(b)){b=parseInt(b,10)}e.find(".flipper-container").eq(b).find("span").width(c)}}};t.updateString(d.text);a.when(this).then(function(){d.callback.apply()});return t}})(jQuery)
+(function(a){a.fn.Flipper=function(l){var t={dimensions:null,alphabet:["0","1","2","3","4","5","6","7","8","9","a","b","c","d","e","f","g","h","i","j","k","l","m","n","o","p","q","r","s","t","u","v","w","x","y","z"," ",".","?","!","@","#",":",",",'"',"'","/",";","(",")","%","-","A","B","C","D","E","F","G","H","I","J","K","L","M","N","O","P","Q","R","S","T","U","V","W","X","Y","Z"],flipSpeed:50,fontSize:120,callback:function(){},align:"center",skipAnimationThreshold:5,lineDelay:500,textOffset:{h:0,v:0}};a.extend(t,l);var s=a(this);var d=0;var m=[];for(r=0;r<t.dimensions[1];r++){var n=jQuery('<div class="panel-row" />');s.append(n);m.push([]);for(c=0;c<t.dimensions[0];c++){var q=jQuery('<div class="flipper-container"><div class="pers-wrapper top"><div class="stationary-panel"><span></span></div><div class="panel"><span></span></div></div><div class="pers-wrapper bottom"><div class="stationary-panel"><span></span></div><div class="panel"><span></span></div></div></div>');n.append(q);m[r].push("");q.find("span").css({fontSize:t.fontSize});q.find(".bottom span").css({top:"-"+(t.fontSize/1.5)+"px"});q.find(".panel, .stationary-panel").css({height:t.fontSize/1.5,borderBottomWidth:Math.ceil((t.fontSize/1.5)*0.0322)});if(r===0&&c===0){q.find("span").text("W");d=q.find("span").first().width()}bRadius=(d*0.1);q.find(".top .panel, .top .stationary-panel").css({"-moz-border-radius-topleft":bRadius+"px","-moz-border-radius-topright":bRadius+"px","-webkit-border-radius":bRadius+"px "+bRadius+"px 0 0","border-radius":bRadius+"px "+bRadius+"px 0 0"});q.find(".bottom .panel, .bottom .stationary-panel").css({"-moz-border-radius-bottomleft":bRadius+"px","-moz-border-radius-bottomright":bRadius+"px","-webkit-border-radius":"0 0 "+bRadius+"px "+bRadius+"px","border-radius":"0 0 "+bRadius+"px "+bRadius+"px"});q.find("span").text(" ");q.find("span").css("width",d);q.find("span").css({top:(t.textOffset.v>=0)?"+="+t.textOffset.v+"px":"-="+Math.abs(t.textOffset.v)+"px",left:(t.textOffset.h>=0)?"+="+t.textOffset.h+"px":"-="+Math.abs(t.textOffset.h)+"px"})}}function h(){var v=s.find(".panel-row");var u=[];a.each(v,function(){var w=a(this);var y=w.find(".top .stationary-panel span");var x=[];a.each(y,function(){var z=a(this);x.push(z.text())});u.push(x)});return u}function b(y){var u=t.dimensions[0];var B=t.dimensions[1];var z=[];var w=y.split(" ");var A=0;for(i=0;i<B;i++){var v=u;var C=[];var x=true;while(x){if(_.isString(w[A])&&w[A].length<=v){for(charIndex in w[A]){C.push(w[A][charIndex])}v-=w[A].length;if(v!==0){C.push(" ");v--}A++}else{if(v!==0){C.push(" ");v--}else{x=false}}}z.push(C)}return z}function p(u){var w=s.find(".flipper-container");for(i=0;i<u.length;i++){for(panelIndex in u[i]){var A=a(w[parseInt(panelIndex,10)+(i*m[0].length)]);var x=A.find("span").first().text();var z=u[i][panelIndex];var y=t.alphabet.indexOf(x);var B=t.alphabet.indexOf(z)===-1?0:t.alphabet.indexOf(z);if(t.dimensions[1]>1){var v=i*t.lineDelay;o(A,y,B,v)}else{g(A,y,B)}}}}function o(w,v,x,u){setTimeout(function(){g(w,v,x)},u)}function g(z,x,A){var w=1;if(x===A){w=0}switch(w){case 0:break;case 1:var u=f(x,A,t.alphabet.length);x=t.alphabet[x+1]?x:-1;var v=t.alphabet[x+1];var y=a.Deferred();j(v,z,u,y);a.when(y).then(function(){x++;g(z,x,A)});break}}function j(w,B,y,A){var u=B.find(".top .panel");var v=B.find(".top .stationary-panel span");var x=B.find(".bottom .panel");var z=B.find(".bottom .stationary-panel span");if(y){u.find("span").text(w);x.find("span").text(w);v.text(w);z.text(w);setTimeout(function(){A.resolve()},50)}else{v.text(w);x.children("span").text(w);u.on("webkitAnimationEnd animationend",function(){u.removeClass("topFlipDown");u.children("span").text(w);x.addClass("bottomFlipDown")});x.on("webkitAnimationEnd animationend",function(){x.removeClass("bottomFlipDown");z.text(w);u.off("webkitAnimationEnd animationend");x.off("webkitAnimationEnd animationend");A.resolve()});u.addClass("topFlipDown")}}function f(u,x,v){if(u<x){if(u+t.skipAnimationThreshold>x){return false}else{return true}}else{var w=v-u;if((w+x)>t.skipAnimationThreshold){return true}else{return false}}}function e(x,w){var v={};for(var u in x){if(u in w){if(_.isObject(w[u])&&!_.isArray(w[u])){var y=e(x[u],w[u]);if(!_.isEmpty(y)){v[u]=y}}else{if(!_.isEqual(x[u],w[u])){v[u]=w[u]}}}}return v}var k={updateString:function(x){var v=h();var u=b(x);var w=[];for(i=0;i<v.length;i++){w.push(e(v[i],u[i]))}p(w)},overrideWidth:function(v,u){if(_.isArray(v)){a.each(v,function(){var w;if(_.isString(this)){w=parseInt(this,10)}else{w=this}s.find(".flipper-container").eq(w).find("span").width(u)})}else{if(_.isString(v)){v=parseInt(v,10)}s.find(".flipper-container").eq(v).find("span").width(u)}}};k.updateString(t.text);a.when(this).then(function(){t.callback.apply()});return k}})(jQuery);
// Underscore.js 1.3.0
// (c) 2009-2012 Jeremy Ashkenas, DocumentCloud Inc.
View
2 time.php
@@ -1,7 +1,7 @@
<!DOCTYPE html>
<head>
<script type="text/javascript" src="js/jquery.js"></script>
- <script type="text/javascript" src="js/jquery.flipper.js"></script>
+ <script type="text/javascript" src="js/jquery.flipper_compressed.js"></script>
<script type="text/javascript" src="js/demo.js"></script>
<link type="text/css" href="css/flipper.css" rel="stylesheet" />
</head>

0 comments on commit 301ba3f

Please sign in to comment.