Merge pull request #61 from codebykevin/master

Finally, a real iOS-style sheet implementation
davebalmer · Jun 12, 2013 · ad5475c · ad5475c
2 parents 6357a5e + 29dbb17
commit ad5475c
Show file tree

Hide file tree

Showing 2 changed files with 101 additions and 6 deletions.
diff --git 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
@@ -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([
+					'&nbsp',
+					this.sheet = new joActionSheet(data),
+					'&nbsp'
+				])
+			);
+		}
+		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,14 +142,15 @@ 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'),
 	 new joDivider(),	 
        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(),