libs/patch/0004-JQM-Change-button-design-to-meet-Tizen-GUI-Button-Ev.patch

   1 From 51799bf3c58cd972217fed6fb5453b7ca85cfb65 Mon Sep 17 00:00:00 2001
   2 From: Koeun Choi <koeun.choi@samsung.com>
   3 Date: Thu, 16 Feb 2012 16:37:08 +0900
   4 Subject: [PATCH] JQM : Change button design to meet Tizen GUI, Button Event bug fixed
   5
   6 ---
   7  .../js/jquery.mobile.buttonMarkup.js               |  164 +++++++++++++++-----
   8  1 files changed, 123 insertions(+), 41 deletions(-)
   9
  10 diff --git a/libs/js/jquery-mobile-1.0.1pre/js/jquery.mobile.buttonMarkup.js b/libs/js/jquery-mobile-1.0.1pre/js/jquery.mobile.buttonMarkup.js
  11 index a08e611..d676ad8 100644
  12 --- a/libs/js/jquery-mobile-1.0.1pre/js/jquery.mobile.buttonMarkup.js
  13 +++ b/libs/js/jquery-mobile-1.0.1pre/js/jquery.mobile.buttonMarkup.js
  14 @@ -2,6 +2,22 @@
  15  * "buttons" plugin - for making button-like links
  16  */
  17
  18 +/**
  19 + * Button Markup modified for TIZEN style.
  20 + *
  21 + * HTML Attributes:
  22 + *
  23 + *             data-role:      button
  24 + *             data-style : circle, nobg, edit
  25 + *
  26 + *
  27 + * Examples:
  28 + *
  29 + *     <div  data-role="button" data-inline="true" data-icon="send" data-style="circle"></div>
  30 + *     <div  data-role="button" data-inline="true" data-icon="favorite" data-style="nobg">
  31 + *     <div  data-role="button" data-inline="true" data-icon="editminus" data-style="edit"></div>
  32 + */
  33 +
  34  ( function( $, undefined ) {
  35
  36  $.fn.buttonMarkup = function( options ) {
  37 @@ -13,6 +29,7 @@ $.fn.buttonMarkup = function( options ) {
  38                         o = $.extend( {}, $.fn.buttonMarkup.defaults, {
  39                                 icon:       options.icon       !== undefined ? options.icon       : el.jqmData( "icon" ),
  40                                 iconpos:    options.iconpos    !== undefined ? options.iconpos    : el.jqmData( "iconpos" ),
  41 +                               style:          el.jqmData( "style"),   /* style : default : block. Added "circle", "edit" and "nobg" */
  42                                 theme:      options.theme      !== undefined ? options.theme      : el.jqmData( "theme" ),
  43                                 inline:     options.inline     !== undefined ? options.inline     : el.jqmData( "inline" ),
  44                                 shadow:     options.shadow     !== undefined ? options.shadow     : el.jqmData( "shadow" ),
  45 @@ -30,8 +47,9 @@ $.fn.buttonMarkup = function( options ) {
  46                         buttonText = document.createElement( o.wrapperEls ),
  47                         buttonIcon = o.icon ? document.createElement( "span" ) : null;
  48
  49 -               if ( attachEvents ) {
  50 -                       attachEvents();
  51 +               // Bug fix for jQM : When moving finger out of button after touching down button, button color MUST be returned.
  52 +               if ( attachTIZENEvents ) {
  53 +                       attachTIZENEvents();
  54                 }
  55
  56                 // if not, try to find closest theme container
  57 @@ -54,6 +72,10 @@ $.fn.buttonMarkup = function( options ) {
  58                         if ( o.iconshadow ) {
  59                                 iconClass += " ui-icon-shadow";
  60                         }
  61 +
  62 +                       if ( $(el).text().length == 0 ) { /* No text */
  63 +                               buttonClass += " ui-btn-icon_only";
  64 +                       }
  65                 }
  66
  67                 if ( o.iconpos ) {
  68 @@ -73,8 +95,51 @@ $.fn.buttonMarkup = function( options ) {
  69                         buttonClass += " ui-shadow";
  70                 }
  71
  72 -               e.setAttribute( "data-" + $.mobile.ns + "theme", o.theme );
  73 -               el.addClass( buttonClass );
  74 +               /* Set Button class for Icon BG */
  75 +               if ( o.style == "circle" ) {    /* Circle BG Button. */
  76 +                       /* style : no text, Icon only */
  77 +                       buttonClass += " ui-btn-corner-circle";
  78 +                       buttonClass += " ui-btn-icon_only";
  79 +               }
  80 +               else if ( o.style == "nobg" ){
  81 +                       /* style : no text, Icon only, no bg */
  82 +                       buttonClass += " ui-btn-icon-nobg";
  83 +                       buttonClass += " ui-btn-icon_only";
  84 +               }
  85 +               else if ( o.style == "edit" ){ /* Contact Edit style */
  86 +                       buttonClass += " ui-btn-edit";
  87 +               }
  88 +
  89 +               el.attr( "data-" + $.mobile.ns + "theme", o.theme )
  90 +                       .addClass( buttonClass );
  91 +
  92 +               /* Text Class for text positioning with icon. */
  93 +               textClass = "ui-btn-text";
  94 +
  95 +               if ( o.icon ) {
  96 +                       if ( $(el).text().length > 0 ) {
  97 +                               ( o.iconpos == "right" ? textClass += " ui-btn-text-padding-right" : textClass += " ui-btn-text-padding-left" );
  98 +                               innerClass += " ui-btn-hastxt";
  99 +                       }
 100 +                       else {
 101 +                               if ( o.style == "circle" ) { /* Circle BG Button. */
 102 +                                       /* style : no text, Icon only */
 103 +                                       innerClass += " ui-btn-corner-circle";
 104 +                               }
 105 +                               else if ( o.style == "nobg" ) {
 106 +                                       /* style : no text, Icon only, no bg */
 107 +                                       innerClass += " ui-btn-icon-nobg";
 108 +                               }
 109 +
 110 +                               /* Icon Only : No padding on button-inner. */
 111 +                               innerClass += " ui-btn-icon-only";
 112 +                       }
 113 +               }
 114 +               else {  /* Text Only */
 115 +                       if ( $(el).text().length > 0 ) {
 116 +                               innerClass += " ui-btn-hastxt";
 117 +                       }
 118 +               }
 119
 120                 buttonInner.className = innerClass;
 121                 buttonInner.setAttribute("aria-hidden", "true");
 122 @@ -96,7 +161,7 @@ $.fn.buttonMarkup = function( options ) {
 123                 // TODO obviously it would be nice to pull this element out instead of
 124                 // retrieving it from the DOM again, but this change is much less obtrusive
 125                 // and 1.0 draws nigh
 126 -               $.data( e, 'textWrapper', $( buttonText ) );
 127 +               el.data( 'textWrapper', $( buttonText ) );
 128         }
 129
 130         return this;
 131 @@ -114,13 +179,7 @@ function closestEnabledButton( element ) {
 132      var cname;
 133
 134      while ( element ) {
 135 -               // Note that we check for typeof className below because the element we
 136 -               // handed could be in an SVG DOM where className on SVG elements is defined to
 137 -               // be of a different type (SVGAnimatedString). We only operate on HTML DOM
 138 -               // elements, so we look for plain "string".
 139 -
 140 -        cname = ( typeof element.className === 'string' ) && element.className.split(' ');
 141 -
 142 +        cname = element.className && element.className.split(' ');
 143          if ( cname && $.inArray( "ui-btn", cname ) > -1 && $.inArray( "ui-disabled", cname ) < 0 ) {
 144              break;
 145          }
 146 @@ -130,51 +189,74 @@ function closestEnabledButton( element ) {
 147      return element;
 148  }
 149
 150 -var attachEvents = function() {
 151 +// Attach tizen events...
 152 +var selectedButton = null;
 153 +var useScrollview = false;
 154 +var attachTIZENEvents = function() {
 155         $( document ).bind( {
 156 -               "vmousedown": function( event ) {
 157 -                       var btn = closestEnabledButton( event.target ),
 158 -                               $btn, theme;
 159 -
 160 -                       if ( btn ) {
 161 -                               $btn = $( btn );
 162 +               // button click event comes this order : vmouseover -> vmousedown -> vmouseup -> vmouseout
 163 +               "vmouseover focus": function( event ) {
 164 +                       // console.log( event.type );
 165 +                       var $btn, theme;
 166 +                       // check if there is selected button... if so, make it to "btn-up" state.
 167 +                       if ( selectedButton ) {
 168 +                               $btn = $( selectedButton );
 169                                 theme = $btn.attr( "data-" + $.mobile.ns + "theme" );
 170 -                               $btn.removeClass( "ui-btn-up-" + theme ).addClass( "ui-btn-down-" + theme );
 171 +                               $btn.removeClass( "ui-btn-down-" + theme ).removeClass( "ui-btn-hover-" + theme )
 172 +                                       .addClass( "ui-btn-up-" + theme );
 173                         }
 174 -               },
 175 -               "vmousecancel vmouseup": function( event ) {
 176 -                       var btn = closestEnabledButton( event.target ),
 177 -                               $btn, theme;
 178
 179 -                       if ( btn ) {
 180 -                               $btn = $( btn );
 181 +                       // new button
 182 +                       selectedButton = closestEnabledButton( event.target );
 183 +                       if ( selectedButton ) {
 184 +                               $btn = $( selectedButton );
 185                                 theme = $btn.attr( "data-" + $.mobile.ns + "theme" );
 186 -                               $btn.removeClass( "ui-btn-down-" + theme ).addClass( "ui-btn-up-" + theme );
 187 +                               $btn.removeClass( "ui-btn-up-" + theme ).addClass( "ui-btn-hover-" + theme );
 188                         }
 189                 },
 190 -               "vmouseover focus": function( event ) {
 191 -                       var btn = closestEnabledButton( event.target ),
 192 -                               $btn, theme;
 193 -
 194 -                       if ( btn ) {
 195 -                               $btn = $( btn );
 196 +               "vmouseout blur": function( event ) {
 197 +                       // console.log( event.type );
 198 +                       var $btn, theme;
 199 +                       if ( selectedButton ) {
 200 +                               $btn = $( selectedButton );
 201                                 theme = $btn.attr( "data-" + $.mobile.ns + "theme" );
 202 -                               $btn.removeClass( "ui-btn-up-" + theme ).addClass( "ui-btn-hover-" + theme );
 203 +                               $btn.removeClass( "ui-btn-hover-" + theme ).removeClass( "ui-btn-down-" + theme ).addClass( "ui-btn-up-" + theme );
 204                         }
 205                 },
 206 -               "vmouseout blur": function( event ) {
 207 -                       var btn = closestEnabledButton( event.target ),
 208 -                               $btn, theme;
 209 +               "vmousedown": function( event ) {
 210 +                       var $btn, theme;
 211
 212 -                       if ( btn ) {
 213 -                               $btn = $( btn );
 214 +                       if ( !selectedButton ) {
 215 +                               selectedButton = closestEnabledButton( event.target );
 216 +                       }
 217 +
 218 +                       $btn = $( selectedButton );
 219 +                       theme = $btn.attr( "data-" + $.mobile.ns + "theme" );
 220 +                       $btn.removeClass( "ui-btn-up-" + theme ).addClass( "ui-btn-down-" + theme );
 221 +               },
 222 +               "vmousecancel vmouseup": function( event ) {
 223 +                       // console.log( event.type );
 224 +                       var $btn, theme;
 225 +                       if ( selectedButton ) {
 226 +                               $btn = $( selectedButton );
 227                                 theme = $btn.attr( "data-" + $.mobile.ns + "theme" );
 228 -                               $btn.removeClass( "ui-btn-hover-" + theme  + " ui-btn-down-" + theme ).addClass( "ui-btn-up-" + theme );
 229 +                               $btn.removeClass( "ui-btn-down-" + theme ).addClass( "ui-btn-up-" + theme );
 230 +
 231 +                               if ( event.type === "vmousecancel" && useScrollview ) {
 232 +                                       event.preventDefault();
 233 +                               }
 234 +                               selectedButton = null;
 235                         }
 236 +               },
 237 +               "scrollstart scrollview_scroll": function( event ) {
 238 +                       // console.log( event.type );
 239 +                       if ( event.type === "scrollview_scroll" )
 240 +                               useScrollview = true;
 241 +                       $(this).trigger("vmousecancel");
 242                 }
 243         });
 244
 245 -       attachEvents = null;
 246 +       attachTIZENEvents = null;
 247  };
 248
 249  //links in bars, or those with  data-role become buttons
 250 --
 251 1.7.0.4
 252