diff --git a/samples/jo-badge-sheet/css/tabbar.css b/samples/jo-badge-sheet/css/tabbar.css index 586652b..d5d8283 100755 --- a/samples/jo-badge-sheet/css/tabbar.css +++ b/samples/jo-badge-sheet/css/tabbar.css @@ -1,4 +1,4 @@ -/*Tab bar CSS based on code from http://tile5geochat.appspot.com/.*/ +/*Tab bar CSS based on code from http://tile5geochat.appspot.com/. Action sheet CSS based on code from https://github.com/hiroprotagonist/jquery.mobile.actionsheet.*/ jotabbar { -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, .8); @@ -35,7 +35,7 @@ jotabbar > jotab { color: white; position: relative; posiiton: absolute; - -webkit-background-size: 32px 32px; + -webkit-background-size: 32px 32px; } jotab:first-child { @@ -95,3 +95,39 @@ jotab.selected { } +joactionsheet { + + -webkit-box-flex: 1; + box-flex: 1; + display: block; + overflow: hidden; + margin: 0 auto; + border: 0; + -webkit-box-shadow: 0 0 20px rgba(0, 0, 0, 0.6); + color: #FFF; + margin: 0 100; + background: #383838; +/* opacity: 0.8;*/ + bottom: 0; + left: 0; + right: 0; + width: 100%; + -webkit-border-radius: 0px; + -webkit-animation-name: joactionsheet-open-slideup; + -webkit-animation-delay: 0; + -webkit-animation-duration: 500ms; + min-height: auto; + position: absolute; +} + +@-webkit-keyframes joactionsheet-open-slideup { + 0% { + -webkit-transform: translateY(1100px); + } + 70% { + -webkit-transform: translateY(0); + } + 100% { + -webkit-transform: translateY(0); + } +} diff --git a/samples/jo-badge-sheet/jo-badge-sheet.js b/samples/jo-badge-sheet/jo-badge-sheet.js index 192ad4e..e7e1c11 100755 --- a/samples/jo-badge-sheet/jo-badge-sheet.js +++ b/samples/jo-badge-sheet/jo-badge-sheet.js @@ -28,7 +28,64 @@ joTabBar.extend(joList, { }); +//joActionSheet, subclassed from joPopup: implements iOS-style action sheet +joActionSheet = function(data) { + joPopup.apply(this, arguments); +}; +joActionSheet.extend(joPopup, { + tagName: "joactionsheet", + setEvents: function() { + joEvent.on(this.container, "mousedown", this.onClick, this); + }, + + onClick: function(e) { + joEvent.stop(e); + }, + createContainer: function() { + var o = joDOM.create(this); + + if (!o) + return; + return o; + } +}); + +/*Extend joScreen to show action sheet.*/ +joSheetScreen = function() { + joScreen.apply(this, arguments); +}; +joSheetScreen.extend(joScreen, { + // show a sheet made from your own UI controls + showSheet: function(data) { + // take a view, a DOM element or some HTML and + // make it pop up in the screen. + if (!this.sheet) { + this.shim = new joShim( + new joFlexcol([ + ' ', + this.sheet = new joActionSheet(data), + ' ' + ]) + ); + } + else { + this.sheet.setData(data); + } +// this.shim.showEvent.subscribe(this.popup.show, this); + this.shim.show(); + this.sheet.show(); + + return this; + }, + + hideSheet: function() { + if (this.shim) + this.shim.hide(); + + return this; + }, +}); /*Now we get to the demo itself.*/ @@ -85,7 +142,7 @@ var App = (function () { /*Action alert that slides up.*/ slideCard = [ - new joTitle('Action Sheet'), + new joTitle('Action Sheet').setStyle({background: "#505050"}), new joHTML('E-mail a friend about Jo.'), new joDivider(), mailbutton = new joButton('E-mail'), @@ -93,6 +150,7 @@ var App = (function () { closebutton = new joButton('Close Sheet'), ]; + /*About Jo.*/ aboutCard = new joCard([ new joTitle('About Jo'), @@ -113,22 +171,23 @@ var App = (function () { /*Send text via e-mail.*/ mailbutton.selectEvent.subscribe(function() { maildata(datastring.getData()); + scn.hideSheet(slideCard); }) /*Show action sheet.*/ slidebutton.selectEvent.subscribe(function() { - scn.showPopup(slideCard); + scn.showSheet(slideCard); }) /*Hide action sheet.*/ closebutton.selectEvent.subscribe(function() { - scn.hidePopup(slideCard); + scn.hideSheet(slideCard); menu.refresh(); }) // Set up the page elements - scn = new joScreen( + scn = new joSheetScreen( new joContainer([ stack = new joStackScroller(),