Merge pull request #1 from jkrehm/master

Menu widths and menu button parameterized
asyraf9 · Jan 10, 2013 · 38bf67a · 38bf67a
2 parents 8ec5c26 + 2573d9a
commit 38bf67a
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 10 deletions.
diff --git a/src/jquery.mobile.splitview.css b/src/jquery.mobile.splitview.css
@@ -81,7 +81,6 @@ div[data-id="main"] {
 popover css for portrait orientation, modified from 
 http://www.cagintranet.com/archive/create-an-ipad-like-dropdown-popover/
 ************************************************************************************************************/
-.panel-popover .popover_triangle {left:7px;}
 .panel-popover {
   color: black;
   display:none;
@@ -90,7 +89,6 @@ http://www.cagintranet.com/archive/create-an-ipad-like-dropdown-popover/
   cursor: auto;
   position: absolute;
   top:55px;
-  left:10px;
   background-color: white;
   z-index:5000000;
   border: 3px solid black;

diff --git a/src/jquery.mobile.splitview.js b/src/jquery.mobile.splitview.js
@@ -4,6 +4,12 @@
 // TODO: reinstate replaceBackBtn - to include the case where people actually really want the back btn
 (function($,window,undefined){
   $( window.document ).bind('mobileinit', function(){
+    $.mobile = $.extend( {}, {
+      menuWidth: '25%',
+      menuMinWidth: '250px',
+      menuBtnSide: 'left',
+    }, $.mobile );
+
     //some class for css to detect touchscreens
     if($.support.touch){
       $('html').addClass('touch');
@@ -477,13 +483,13 @@
 
         function popoverBtn(header) {
           if(!header.children('.popover-btn').length){
-            if(header.children('a.ui-btn-left').length){
-              header.children('a.ui-btn-left').replaceWith('<a class="popover-btn">Menu</a>');
-              header.children('a.popover-btn').addClass('ui-btn-left').buttonMarkup();
+            if(header.children('a.ui-btn-'+$.mobile.menuBtnSide).length){
+              header.children('a.ui-btn-'+$.mobile.menuBtnSide).replaceWith('<a class="popover-btn">Menu</a>');
+              header.children('a.popover-btn').addClass('ui-btn-'+$.mobile.menuBtnSide).buttonMarkup();
             }
             else{
               header.prepend('<a class="popover-btn">Menu</a>');
-              header.children('a.popover-btn').addClass('ui-btn-left').buttonMarkup()          
+              header.children('a.popover-btn').addClass('ui-btn-'+$.mobile.menuBtnSide).buttonMarkup()          
             }
           }
         }
@@ -498,11 +504,12 @@
         function popover(){
           $menu.addClass('panel-popover')
                .removeClass('ui-panel-left')
-               .css({'width':'25%', 'min-width':'250px', 'display':'', 'overflow-x':'visible'});     
+               .css({'width':$.mobile.menuWidth, 'min-width':$.mobile.menuMinWidth, 'display':'', 'overflow-x':'visible'})
+               .css($.mobile.menuBtnSide, '10px');
           if(!$menu.children('.popover_triangle').length){ 
-            $menu.prepend('<div class="popover_triangle"></div>'); 
+            $menu.prepend('<div class="popover_triangle" style="'+$.mobile.menuBtnSide+':7px"></div>');
           }
-          $menu.children('.' + $.activePageClass).css('min-height', '100%');
+          $menu.children('div:jqmData(role="page")').css('min-height', '100%');
           $main.removeClass('ui-panel-right')
                .css('width', '');
           popoverBtn($mainHeader);
@@ -512,14 +519,15 @@
             var $thisHeader=$(this).children('div:jqmData(role="header")');
             popoverBtn($thisHeader);
           });
+          $( document ).unbind('pageshow.resetPageHeight');
           // TODO: unbind resetActivePageHeight for popover pages
 
         };
 
         function splitView(){
           $menu.removeClass('panel-popover')
                .addClass('ui-panel-left')
-               .css({'width':'25%', 'min-width':'250px', 'display':''});
+               .css({'width':$.mobile.menuWidth, 'min-width':$.mobile.menuMinWidth, 'display':''});
           $menu.children('.popover_triangle').remove();
           $main.addClass('ui-panel-right')
                .width(function(){