libs/js/jquery-mobile-1.0.1pre/js/jquery.mobile.buttonMarkup.js

   1 /*
   2 * "buttons" plugin - for making button-like links
   3 */
   4
   5 ( function( $, undefined ) {
   6
   7 $.fn.buttonMarkup = function( options ) {
   8         options = options || {};
   9
  10         for ( var i = 0; i < this.length; i++ ) {
  11                 var el = this.eq( i ),
  12                         e = el[ 0 ],
  13                         o = $.extend( {}, $.fn.buttonMarkup.defaults, {
  14                                 icon:       options.icon       !== undefined ? options.icon       : el.jqmData( "icon" ),
  15                                 iconpos:    options.iconpos    !== undefined ? options.iconpos    : el.jqmData( "iconpos" ),
  16                                 theme:      options.theme      !== undefined ? options.theme      : el.jqmData( "theme" ),
  17                                 inline:     options.inline     !== undefined ? options.inline     : el.jqmData( "inline" ),
  18                                 shadow:     options.shadow     !== undefined ? options.shadow     : el.jqmData( "shadow" ),
  19                                 corners:    options.corners    !== undefined ? options.corners    : el.jqmData( "corners" ),
  20                                 iconshadow: options.iconshadow !== undefined ? options.iconshadow : el.jqmData( "iconshadow" )
  21                         }, options ),
  22
  23                         // Classes Defined
  24                         innerClass = "ui-btn-inner",
  25                         textClass = "ui-btn-text",
  26                         buttonClass, iconClass,
  27
  28                         // Button inner markup
  29                         buttonInner = document.createElement( o.wrapperEls ),
  30                         buttonText = document.createElement( o.wrapperEls ),
  31                         buttonIcon = o.icon ? document.createElement( "span" ) : null;
  32
  33                 if ( attachEvents ) {
  34                         attachEvents();
  35                 }
  36
  37                 // if not, try to find closest theme container
  38                 if ( !o.theme ) {
  39                         o.theme = $.mobile.getInheritedTheme( el, "c" );
  40                 }
  41
  42                 buttonClass = "ui-btn ui-btn-up-" + o.theme;
  43
  44                 if ( o.inline ) {
  45                         buttonClass += " ui-btn-inline";
  46                 }
  47
  48                 if ( o.icon ) {
  49                         o.icon = "ui-icon-" + o.icon;
  50                         o.iconpos = o.iconpos || "left";
  51
  52                         iconClass = "ui-icon " + o.icon;
  53
  54                         if ( o.iconshadow ) {
  55                                 iconClass += " ui-icon-shadow";
  56                         }
  57                 }
  58
  59                 if ( o.iconpos ) {
  60                         buttonClass += " ui-btn-icon-" + o.iconpos;
  61
  62                         if ( o.iconpos == "notext" && !el.attr( "title" ) ) {
  63                                 el.attr( "title", el.getEncodedText() );
  64                         }
  65                 }
  66
  67                 if ( o.corners ) {
  68                         buttonClass += " ui-btn-corner-all";
  69                         innerClass += " ui-btn-corner-all";
  70                 }
  71
  72                 if ( o.shadow ) {
  73                         buttonClass += " ui-shadow";
  74                 }
  75
  76                 e.setAttribute( "data-" + $.mobile.ns + "theme", o.theme );
  77                 el.addClass( buttonClass );
  78
  79                 buttonInner.className = innerClass;
  80                 buttonInner.setAttribute("aria-hidden", "true");
  81
  82                 buttonText.className = textClass;
  83                 buttonInner.appendChild( buttonText );
  84
  85                 if ( buttonIcon ) {
  86                         buttonIcon.className = iconClass;
  87                         buttonInner.appendChild( buttonIcon );
  88                 }
  89
  90                 while ( e.firstChild ) {
  91                         buttonText.appendChild( e.firstChild );
  92                 }
  93
  94                 e.appendChild( buttonInner );
  95
  96                 // TODO obviously it would be nice to pull this element out instead of
  97                 // retrieving it from the DOM again, but this change is much less obtrusive
  98                 // and 1.0 draws nigh
  99                 $.data( e, 'textWrapper', $( buttonText ) );
 100         }
 101
 102         return this;
 103 };
 104
 105 $.fn.buttonMarkup.defaults = {
 106         corners: true,
 107         shadow: true,
 108         iconshadow: true,
 109         inline: false,
 110         wrapperEls: "span"
 111 };
 112
 113 function closestEnabledButton( element ) {
 114     var cname;
 115
 116     while ( element ) {
 117                 // Note that we check for typeof className below because the element we
 118                 // handed could be in an SVG DOM where className on SVG elements is defined to
 119                 // be of a different type (SVGAnimatedString). We only operate on HTML DOM
 120                 // elements, so we look for plain "string".
 121
 122         cname = ( typeof element.className === 'string' ) && element.className.split(' ');
 123
 124         if ( cname && $.inArray( "ui-btn", cname ) > -1 && $.inArray( "ui-disabled", cname ) < 0 ) {
 125             break;
 126         }
 127         element = element.parentNode;
 128     }
 129
 130     return element;
 131 }
 132
 133 var attachEvents = function() {
 134         $( document ).bind( {
 135                 "vmousedown": function( event ) {
 136                         var btn = closestEnabledButton( event.target ),
 137                                 $btn, theme;
 138
 139                         if ( btn ) {
 140                                 $btn = $( btn );
 141                                 theme = $btn.attr( "data-" + $.mobile.ns + "theme" );
 142                                 $btn.removeClass( "ui-btn-up-" + theme ).addClass( "ui-btn-down-" + theme );
 143                         }
 144                 },
 145                 "vmousecancel vmouseup": function( event ) {
 146                         var btn = closestEnabledButton( event.target ),
 147                                 $btn, theme;
 148
 149                         if ( btn ) {
 150                                 $btn = $( btn );
 151                                 theme = $btn.attr( "data-" + $.mobile.ns + "theme" );
 152                                 $btn.removeClass( "ui-btn-down-" + theme ).addClass( "ui-btn-up-" + theme );
 153                         }
 154                 },
 155                 "vmouseover focus": function( event ) {
 156                         var btn = closestEnabledButton( event.target ),
 157                                 $btn, theme;
 158
 159                         if ( btn ) {
 160                                 $btn = $( btn );
 161                                 theme = $btn.attr( "data-" + $.mobile.ns + "theme" );
 162                                 $btn.removeClass( "ui-btn-up-" + theme ).addClass( "ui-btn-hover-" + theme );
 163                         }
 164                 },
 165                 "vmouseout blur": function( event ) {
 166                         var btn = closestEnabledButton( event.target ),
 167                                 $btn, theme;
 168
 169                         if ( btn ) {
 170                                 $btn = $( btn );
 171                                 theme = $btn.attr( "data-" + $.mobile.ns + "theme" );
 172                                 $btn.removeClass( "ui-btn-hover-" + theme  + " ui-btn-down-" + theme ).addClass( "ui-btn-up-" + theme );
 173                         }
 174                 }
 175         });
 176
 177         attachEvents = null;
 178 };
 179
 180 //links in bars, or those with  data-role become buttons
 181 //auto self-init widgets
 182 $( document ).bind( "pagecreate create", function( e ){
 183
 184         $( ":jqmData(role='button'), .ui-bar > a, .ui-header > a, .ui-footer > a, .ui-bar > :jqmData(role='controlgroup') > a", e.target )
 185                 .not( ".ui-btn, :jqmData(role='none'), :jqmData(role='nojs')" )
 186                 .buttonMarkup();
 187 });
 188
 189 })( jQuery );