Added jQM auto-enhancement feature

Will be documented soon
zippy1978 · Aug 18, 2012 · d7ef487 · d7ef487
1 parent 0d35b79
commit d7ef487
Show file tree

Hide file tree

Showing 2 changed files with 63 additions and 62 deletions.
diff --git a/examples/mobile.html b/examples/mobile.html
@@ -7,15 +7,13 @@
 		<meta name="apple-mobile-web-app-capable" content="yes"/>
 		<meta name="apple-mobile-web-app-status-bar-style" content="black" />
 		<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css"/>
-		<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
-
-		<!-- Scrollz plugin -->
-		<script src="../src/jquery.scrollz.js"></script>
+		<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
+		<script type="text/javascript" src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
 
-		<!-- Scrollz CSS -->
+		<!-- Scrollz -->
 		<link rel="stylesheet" href="../src/jquery.scrollz.css"/>
-    
-    
+		<script type="text/javascript" src="../src/jquery.scrollz.js"></script>
+		
 		<style>
 			/* Wrapping */
 			.wrapping-truncate {
@@ -88,9 +86,6 @@
 					});
 
 					targetList.listview("refresh");
-
-					// Force resize
-					$(window).resize();
 
 					// Hide pull header after first page is loaded
 					if (nextPageIndex == 0) {
@@ -104,56 +99,25 @@
 
 			}
 
-			/* Global init */
-			$(document).bind("mobileinit", function() {
-
-				$(document).bind("pageshow", function() {
-
-					// Force resize (otherwise initial sizes cannot be calculated)
-					//$(window).resize();
-
-					// Enable scrollz
-					$('#content').scrollz({
-						pull: true,
-						emulateTouchEvents : true
-					});
-
-					// Force resize (otherwise initial sizes cannot be calculated)
-					//$(window).resize();
-					//$('#content').scrollz('hidePullHeader');
-
-					// Bind events
-					$('#content').bind('bottomreached', function() {
-					    // Load more
-					    loadMore();
-					});
-
-					$('#content').bind('pulled', function() {
-					     // Reset page index
-					    nextPageIndex = 0;
-
-					    // Reload
-					    loadMore();
-					});
-
-					// Load initial tweets
-					loadMore();
-				});
-
-				$(window).resize(function() {
-					// Compute content heights (between header and footer, if any) visible and full
-					var visibleContentHeight = (window.innerHeight ? window.innerHeight : $(window).height()) - $(".ui-page-active div.ui-footer").outerHeight() - $(".ui-page-active div.ui-header").outerHeight();
-					var activePageHeight = $('.ui-page-active').height();
-					var fullContentHeight = activePageHeight > visibleContentHeight ? activePageHeight : visibleContentHeight;
-					$('#content').scrollz('height', fullContentHeight);
-				});
-
+			// Load initial tweets
+			loadMore();
+
+			// Bind events
+			$('#content').live('bottomreached', function() {
+			    // Load more
+			    loadMore();
+			});
+
+			$('#content').live('pulled', function() {
+			     // Reset page index
+			    nextPageIndex = 0;
+
+			    // Reload
+			    loadMore();
 			});
 
 		</script>
 
-		<script type="text/javascript" src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
-
 	</head>
 	<body>
 		<div id="index" data-role="page" data-theme="a">
@@ -165,13 +129,11 @@ <h1 class='ui-title' role='heading' aria-level='1'>jQuery Scrollz</h1>
 			</div>
 
 			<!-- Content -->
-			<div id="content" data-role="content">
+			<div id="content" data-role="content" data-scrollz="pull">
 				<ul id="tweets" data-role='listview' data-inset='false' data-theme='c'>
 
 				</ul> 
 			</div>
-
-
 		</div>
 	</body>
 </html>
diff --git a/src/jquery.scrollz.js b/src/jquery.scrollz.js
@@ -99,9 +99,9 @@
       return this.each(function() {        
 
         var $this = $(this);
-           
+
            // If the plugin hasn't been initialized yet
-           if (!$this.data('scrollz')) {
+           if (!$this.data('scrollzInitialized')) {
 
              // Store options
              $this.data('options', settings);
@@ -169,7 +169,7 @@
             });
 
             // Mark plugin as initialized
-            $this.data('scrollz', true);
+            $this.data('scrollzInitialized', true);
 
            }
 
@@ -714,4 +714,43 @@
     }  
 
   };
+
+  // jQuery Mobile auto-enhancement
+  if ($.mobile) {
+
+    // Add listener on page create (before enhancement)
+    $(":jqmData(role='page')").live("pagecreate", function() {
+
+      // Simple
+      $(":jqmData(scrollz='simple')").scrollz();
+
+      // Pull
+      $(":jqmData(scrollz='pull')").scrollz({
+        pull: true,
+        emulateTouchEvents: true
+        });
+
+    });
+
+    $(":jqmData(role='page')").live("pageshow", function() {
+
+      // Force resize
+      $(window).resize();
+
+    });
+
+    // Resize listener : auto resize 
+    $(window).resize(function() {
+
+      // Compute content heights (between header and footer, if any) visible and full
+      var headerHeight = $(".ui-page-active div.ui-header").outerHeight();
+      var footerHeight = $(".ui-page-active div.ui-footer").outerHeight();
+      var visibleContentHeight = (window.innerHeight ? window.innerHeight : $(window).height()) - (headerHeight ? headerHeight : 0)  - (footerHeight ? footerHeight : 0);
+      var activePageHeight = $('.ui-page-active').height();
+      var fullContentHeight = activePageHeight > visibleContentHeight ? activePageHeight : visibleContentHeight;
+      $(":jqmData(scrollz='simple'), :jqmData(scrollz='pull')").scrollz('height', fullContentHeight);
+    });
+
+  }
+
 }(jQuery));