namespace header and footer button icons #1361

Closed
philipraets opened this Issue Apr 4, 2011 · 5 comments

Projects

None yet

5 participants

@philipraets

Hi,

When I use a namespace the buttons in the header and footer doesn't show icons. If I remove the namespace so the buttons have data-icon instead of data-namespace-icon, then they show up. Also the theming of the buttons in pages with data-namespace-theme doesn't work.

This is with jqmobile 1.0 alpha 4

Philip

@hotTea
hotTea commented Apr 12, 2011

I can confirm that. Icons does not show up. It would be great to have test version of jquery mobile with name-spacing applied, so that its easier to confirm if its a real bug or something wrong in our code.

@itobe
itobe commented Apr 14, 2011

Have the same problem here with a4.
Just updated to a4.1, it is still only working without the namespaces.
The following attributes are not supporting namespaces in header and footer bars:

  • data-icon
  • data-iconpos
  • data-theme
@bfd
bfd commented Jun 9, 2011

The problem lies in the unary usage of $.fn.jqmData() in $.fn.buttonMarkup().
However, the behaviour of jqmData not to strip the namespace when called without arguments seems to be deliberate, what I gather from #196, so buttonMarkup() should probably use an alternate version that returns only the attributes in the specified namespace.
(I would argue for this to be the default behaviour of $.fn.jqmData(), though, since everything else can just use $.fn.data())

Here is a quick fix that I just wrote for 1.0a4, it works with jquery-1.6, previous versions don't return the attributes in camelCase, but that should be easily fixed.

$.fn.jqmData = function( prop, value ){
    var result = this.data( prop ? $.mobile.ns + prop : prop, value );
    if ($.mobile.ns && !prop) {
      var ccns = $.camelCase($.mobile.ns);
      var trailingDash = false;
      if (ccns && ccns.charAt(ccns.length-1) === "-") {
        trailingDash = true;
        ccns = ccns.substring(0, ccns.length-1);
      }
      var strippedResult = {};
      for (var key in result) {
        if (key.indexOf(ccns) === 0) {
          var strippedKey;
          if (trailingDash) {
            strippedKey = key.charAt(ccns.length).toLowerCase() + key.substring(ccns.length+1);
          } else {
            strippedKey = key.substring(ccns.length);
          }
          strippedResult[strippedKey] = result[key]; 
        }
      }
      return strippedResult;
    }
    return result;
  };
@gseguin gseguin was assigned Sep 2, 2011
@gseguin
Member
gseguin commented Sep 15, 2011

http://jsbin.com/ibuloq/8 exposes the issue. The problem is not only in the header/footer sections all buttons have the issue.

@gseguin gseguin added a commit that referenced this issue Sep 15, 2011
@gseguin gseguin Fix for issue #1361
Mixin individual properties to options instead of calling .jqmData()
a908c5a
@gseguin
Member
gseguin commented Sep 15, 2011

Fixed in latest: http://jsbin.com/ibuloq/9

@gseguin gseguin closed this Sep 15, 2011
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment