-
-
Save pageman/1378560 to your computer and use it in GitHub Desktop.
Demo files for "flash card" app demonstrating HTML5 offline cache manifest. Full repo at https://github.com/mrspeaker/Eng2Fr
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| CACHE MANIFEST | |
| # v0.1 | |
| index.html | |
| lib/jquery-1.4.4.min.js | |
| main.css | |
| main.js | |
| images/eng2fr.png |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html manifest="cache.manifest"> | |
| <head> | |
| <title>Eng2Fr</title> | |
| <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" > | |
| <meta name="apple-mobile-web-app-capable" content="yes" /> | |
| <meta name="apple-mobile-web-app-status-bar-style" content="black" /> | |
| <link rel="apple-touch-icon" href="images/icon.png" /> | |
| <link rel="apple-touch-startup-image" href="images/eng2fr.png" /> | |
| <link rel="stylesheet" href="main.css" type="text/css" media="screen" charset="utf-8" /> | |
| </head> | |
| <body> | |
| <div id="container"> | |
| <div id="display"> | |
| <div id="from" class="current"></div> | |
| <div id="to"></div> | |
| </div> | |
| </div> | |
| <script src="lib/jquery-1.4.4.min.js" type="text/javascript" charset="utf-8"></script> | |
| <script src="main.js" type="text/javascript" charset="utf-8"></script> | |
| <script type="text/javascript" charset="utf-8"> | |
| $( document ).ready( function(){ | |
| eng2fr.init(); | |
| }); | |
| </script> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| html { | |
| height: 100%; | |
| } | |
| body { | |
| margin:0; | |
| padding:0; | |
| height: 100%; | |
| color:#fff; | |
| background-color: #222; | |
| } | |
| #container { | |
| background: -webkit-gradient(linear, 0% 0, 0% 100%, from(#333), to(#5E5E65)); | |
| height: 100%; | |
| width: 100%; | |
| } | |
| #display{ | |
| width: 100%; | |
| height: 100%; | |
| text-align: center; | |
| } | |
| #display > div{ | |
| font-size:36pt; | |
| font-family: helvetica; | |
| text-shadow:2px 2px 15px #000; | |
| display: none; | |
| position:absolute; | |
| width: 100%; | |
| top: 40%; | |
| -webkit-backface-visibility: hidden; | |
| -webkit-transform: translate3d(0,0,0) rotate(0) scale(1); | |
| } | |
| #display .current{ | |
| display: block; | |
| } | |
| .in, .out { | |
| -webkit-animation-timing-function: ease-in-out; | |
| -webkit-animation-duration: 350ms; | |
| } | |
| .push.in { -webkit-animation-name: slideinfromright; } | |
| .push.out { opacity:0; -webkit-animation-name: slideouttoleft; } | |
| @-webkit-keyframes slideinfromright { | |
| from { -webkit-transform: translateX(100%); } | |
| to { -webkit-transform: translateX(0); } | |
| } | |
| @-webkit-keyframes slideouttoleft { | |
| from { -webkit-transform: translateX(0); opacity: 1; } | |
| to { -webkit-transform: translateX(-100%); opacity: 1; } | |
| } | |
| .flip { | |
| -webkit-animation-duration: .45s; | |
| -webkit-backface-visibility: hidden; | |
| } | |
| .flip.in { -webkit-animation-name: flipinfromleft; } | |
| .flip.out { opacity:0; -webkit-animation-name: flipouttoleft; } | |
| @-webkit-keyframes flipinfromleft { | |
| from { -webkit-transform: rotateY(180deg) scale(.8); } | |
| to { -webkit-transform: rotateY(0) scale(1); } | |
| } | |
| @-webkit-keyframes flipouttoleft { | |
| from { -webkit-transform: rotateY(0) scale(1); opacity: 1; } | |
| to { -webkit-transform: rotateY(-180deg) scale(.8); opacity: 1; } | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| var eng2fr = { | |
| from: null, | |
| to: null, | |
| suggester: { | |
| i: 0, | |
| words: [ | |
| [ "beer", "binouze" ], | |
| [ "another beer", "une autre bière" ], | |
| [ "crazy", "fou" ], | |
| [ "What the heck?!", "c'est quoi ce délire" ], | |
| [ "whatever", "n'importe quoi"] | |
| ], | |
| next: function(){ | |
| return this.words[ ( this.i++ ) % this.words.length ]; | |
| } | |
| }, | |
| init: function() { | |
| this.bindSwipe( $( "#display" ) ); | |
| this.from = $( "#from" ); | |
| this.to = $( "#to" ); | |
| Events.listen( "card_next", $.proxy( this.next, this ) ); | |
| Events.listen( "card_flip", $.proxy( this.flip, this ) ); | |
| // Begin! | |
| this.next(); | |
| }, | |
| next: function() { | |
| var to = this.to, | |
| from = this.from, | |
| next = this.suggester.next(), | |
| _this = this; | |
| to.text( next[ 0 ] ); | |
| to.addClass( "push in current" ); | |
| from.addClass( "push out" ).one( "webkitAnimationEnd", function() { | |
| from.text( next[ 1 ] ); | |
| from.removeClass( "current push out" ); | |
| to.removeClass( "push in" ); | |
| _this.from = to; | |
| _this.to = from; | |
| }); | |
| }, | |
| flip: function() { | |
| var to = this.to, | |
| from = this.from, | |
| _this = this; | |
| to.addClass( "flip in current" ); | |
| from.addClass( "flip out" ).one( "webkitAnimationEnd", function() { | |
| from.removeClass( "current flip out" ); | |
| to.removeClass( "flip in" ); | |
| _this.from = to; | |
| _this.to = from; | |
| }); | |
| }, | |
| bindSwipe: function( el ) { | |
| this.xStart = null; | |
| this.downEvent = 'ontouchstart' in document.documentElement && navigator.appVersion.indexOf( 'iPhone OS ' ) > -1 ? 'touchstart' : 'mousedown'; | |
| this.upEvent = 'ontouchend' in document.documentElement && navigator.appVersion.indexOf( 'iPhone OS ' ) > -1 ? 'touchend' : 'mouseup'; | |
| var _this = this; | |
| el.bind({ | |
| "touchstart mousedown": function( e ) { | |
| if( e.type !== _this.downEvent ) return; | |
| e.preventDefault(); | |
| _this.xStart = e.pageX && e.pageX > 0 ? e.pageX : e.originalEvent.changedTouches[ 0 ].pageX; | |
| }, | |
| "touchend mouseup": function( e ) { | |
| if( e.type !== _this.upEvent ) return; | |
| var newX = e.pageX && e.pageX > 0 ? e.pageX : e.originalEvent.changedTouches[ 0 ].pageX; | |
| var diff = newX - _this.xStart; | |
| if( Math.abs( diff ) > 20) { | |
| if( diff > 0 ){ | |
| Events.trigger( "card_previous", {} ); | |
| } else { | |
| Events.trigger( "card_next", {} ); | |
| } | |
| } else { | |
| Events.trigger( "card_flip", {} ); | |
| } | |
| }, | |
| "touchmove": function( e ) { | |
| e.preventDefault(); | |
| } | |
| }); | |
| } | |
| }; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment