New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Selectmenu: Add classes option #8309

Closed
wants to merge 22 commits into
from

Conversation

Projects
None yet
5 participants
@gabrielschulhof
Contributor

gabrielschulhof commented Oct 17, 2015

No description provided.

@arschmitz

This comment has been minimized.

Show comment
Hide comment
@arschmitz

arschmitz Oct 18, 2015

Member

@gabrielschulhof were you wanting a review of this

Member

arschmitz commented Oct 18, 2015

@gabrielschulhof were you wanting a review of this

@gabrielschulhof

This comment has been minimized.

Show comment
Hide comment
@gabrielschulhof

gabrielschulhof Nov 10, 2015

Contributor

@arschmitz I've made a few more changes and I could use a review although I'm fairly certain it's not ready to go yet, but it'll be good to have another set of eyes on it so I have a clear list of what remains to be done. TIA!

Contributor

gabrielschulhof commented Nov 10, 2015

@arschmitz I've made a few more changes and I could use a review although I'm fairly certain it's not ready to go yet, but it'll be good to have another set of eyes on it so I have a clear list of what remains to be done. TIA!

Show outdated Hide outdated js/widgets/forms/select.custom.js
@@ -79,16 +94,24 @@ return $.widget( "mobile.selectmenu", $.mobile.selectmenu, {
}
if ( event.type === "vclick" ||
event.keyCode && ( event.keyCode === $.mobile.keyCode.ENTER || event.keyCode === $.mobile.keyCode.SPACE ) ) {
event.keyCode &&
( event.keyCode === $.mobile.keyCode.ENTER ||

This comment has been minimized.

@arschmitz

arschmitz Nov 19, 2015

Member

use $.ui.keyCode this is deprecated

@arschmitz

arschmitz Nov 19, 2015

Member

use $.ui.keyCode this is deprecated

this._decideFormat();
if ( this.menuType === "overlay" ) {
this.button.attr( "href", "#" + this.popupId ).attr( "data-" + ( $.mobile.ns || "" ) + "rel", "popup" );
this.button
.attr( "href", "#" + this.popupId )

This comment has been minimized.

@arschmitz

arschmitz Nov 19, 2015

Member

is popupId escaped elsewhere?

@arschmitz

arschmitz Nov 19, 2015

Member

is popupId escaped elsewhere?

This comment has been minimized.

@gabrielschulhof

gabrielschulhof Dec 22, 2015

Contributor

No, and it doesn't need to be, because I'm not constructing a selector with it.

@gabrielschulhof

gabrielschulhof Dec 22, 2015

Contributor

No, and it doesn't need to be, because I'm not constructing a selector with it.

Show outdated Hide outdated js/widgets/forms/select.custom.js
this.button.attr( "href", "#" + this.popupId ).attr( "data-" + ( $.mobile.ns || "" ) + "rel", "popup" );
this.button
.attr( "href", "#" + this.popupId )
.attr( "data-" + ( $.mobile.ns || "" ) + "rel", "popup" );

This comment has been minimized.

@arschmitz

arschmitz Nov 19, 2015

Member

ns is deprecated move determining this to backcompat and make an extension point

@arschmitz

arschmitz Nov 19, 2015

Member

ns is deprecated move determining this to backcompat and make an extension point

Show outdated Hide outdated js/widgets/forms/select.custom.js
} else {
this.button.attr( "href", "#" + this.dialogId ).attr( "data-" + ( $.mobile.ns || "" ) + "rel", "dialog" );
this.button
.attr( "href", "#" + this.dialogId )

This comment has been minimized.

@arschmitz

arschmitz Nov 19, 2015

Member

same as above is this escaped

@arschmitz

arschmitz Nov 19, 2015

Member

same as above is this escaped

Show outdated Hide outdated js/widgets/forms/select.custom.js
this.button.attr( "href", "#" + this.dialogId ).attr( "data-" + ( $.mobile.ns || "" ) + "rel", "dialog" );
this.button
.attr( "href", "#" + this.dialogId )
.attr( "data-" + ( $.mobile.ns || "" ) + "rel", "dialog" );

This comment has been minimized.

@arschmitz

arschmitz Nov 19, 2015

Member

move to backcompat

@arschmitz

arschmitz Nov 19, 2015

Member

move to backcompat

Show outdated Hide outdated js/widgets/forms/select.custom.js
"<div class='ui-title'></div>" +
"</div>" +
"<div class='ui-content'></div>" +
menuPage = $( "<div data-" + $.mobile.ns + "role='dialog'>" +

This comment has been minimized.

@arschmitz

arschmitz Nov 19, 2015

Member

move to backcompat

@arschmitz

arschmitz Nov 19, 2015

Member

move to backcompat

Show outdated Hide outdated js/widgets/forms/select.custom.js
// Custom selects cannot exist inside popups, so revert the "nativeMenu" option to true if
// a parent is a popup
o.nativeMenu = o.nativeMenu || ( this.element.parents( ":jqmData(role='popup'),:mobile-popup" ).length > 0 );
o.nativeMenu = o.nativeMenu ||
( this.element.parents( ":jqmData(role='popup'),:mobile-popup" ).length > 0 );

This comment has been minimized.

@arschmitz

arschmitz Dec 3, 2015

Member

dont use jqmdata its deprecated.

@arschmitz

arschmitz Dec 3, 2015

Member

dont use jqmdata its deprecated.

Show outdated Hide outdated js/widgets/forms/select.custom.js
var self = this,
$window = this.window,
selfListParent = self.list.parent(),
var $window = this.window,

This comment has been minimized.

@arschmitz

arschmitz Dec 3, 2015

Member

remove hungarian notation

@arschmitz

arschmitz Dec 3, 2015

Member

remove hungarian notation

Show outdated Hide outdated js/widgets/forms/select.custom.js
// For WebOS/Opera Mini (set lastscroll using button offset)
if ( scrollTop === 0 && buttonOffset > screenHeight ) {
self.thisPage.one( "pagehide", function() {

This comment has been minimized.

@arschmitz

arschmitz Dec 3, 2015

Member

pagehide is deprecated

@arschmitz

arschmitz Dec 3, 2015

Member

pagehide is deprecated

Show outdated Hide outdated js/widgets/forms/select.custom.js
$( this ).jqmData( "lastScroll", buttonOffset );
} );
}
self.menuPage.one( {
this.menuPage.one( {
pageshow: $.proxy( this, "_focusMenuItem" ),
pagehide: $.proxy( this, "close" )

This comment has been minimized.

@arschmitz

arschmitz Dec 3, 2015

Member

use page container events

@arschmitz

arschmitz Dec 3, 2015

Member

use page container events

Show outdated Hide outdated js/widgets/forms/select.custom.js
if ( needPlaceholder &&
( !option.getAttribute( "value" ) ||
text.length === 0 ||
$option.jqmData( "placeholder" ) ) ) {

This comment has been minimized.

@arschmitz

arschmitz Dec 3, 2015

Member

dont use jqmdata

@arschmitz

arschmitz Dec 3, 2015

Member

dont use jqmdata

Show outdated Hide outdated js/widgets/forms/select.js
@@ -320,4 +334,6 @@ return $.widget( "mobile.selectmenu", $.extend( {
}
}, $.mobile.behaviors.formReset ) );

This comment has been minimized.

@arschmitz

arschmitz Dec 3, 2015

Member

use UI form reset and also $.widget now supports mixins via passing an array

@arschmitz

arschmitz Dec 3, 2015

Member

use UI form reset and also $.widget now supports mixins via passing an array

Show outdated Hide outdated js/widgets/forms/select.js
// suffix. See https://github.com/jquery/jquery-mobile/issues/3577
// if ( $el[0].className.length ) {
// classes = $el[0].className;
// }

This comment has been minimized.

@arschmitz

arschmitz Dec 3, 2015

Member

this is no longer relavent

@arschmitz

arschmitz Dec 3, 2015

Member

this is no longer relavent

Show outdated Hide outdated js/widgets/forms/select.js
classes += " ui-mini";
}
this._removeClass( this.element, null, "ui-button-left ui-button-right" );
this.select = this.element;

This comment has been minimized.

@arschmitz

arschmitz Dec 3, 2015

Member

whats the point of this.select if its always this.element?

@arschmitz

arschmitz Dec 3, 2015

Member

whats the point of this.select if its always this.element?

Show outdated Hide outdated js/widgets/forms/select.js
}
},
_create: function() {
var options = this.options,
iconpos = options.icon ?
( options.iconpos || this.select.jqmData( "iconpos" ) ) : false;

This comment has been minimized.

@arschmitz

arschmitz Dec 3, 2015

Member

dont use jqmData

@arschmitz

arschmitz Dec 3, 2015

Member

dont use jqmData

@arschmitz

This comment has been minimized.

Show comment
Hide comment
@arschmitz

arschmitz Dec 3, 2015

Member

Looking good done for now

Member

arschmitz commented Dec 3, 2015

Looking good done for now

Show outdated Hide outdated js/widgets/forms/select.custom.js
options: {
classes: {
"ui-selectmenu-custom-header-close-button":
"ui-button ui-corner-all ui-button-left ui-button-icon-only ui-icon-delete"

This comment has been minimized.

@arschmitz

arschmitz Feb 18, 2016

Member

ui-button* is not a theme class neither is ui-icon*

@arschmitz

arschmitz Feb 18, 2016

Member

ui-button* is not a theme class neither is ui-icon*

Show outdated Hide outdated js/widgets/forms/select.custom.js
.prependTo( listbox );
headerTitle = $( "<h1></h1>" ).appendTo( header );
this._addClass( menuPage, null, "ui-selectmenu-custom" );

This comment has been minimized.

@arschmitz

arschmitz Feb 18, 2016

Member

ui-selectmenu* should be in the second param they belong to this widget

@arschmitz

arschmitz Feb 18, 2016

Member

ui-selectmenu* should be in the second param they belong to this widget

Show outdated Hide outdated js/widgets/forms/select.custom.js
} ).appendTo( header );
"href": "#"
} );
this._addClass( headerClose, "ui-selectmenu-custom-header-close-button" );

This comment has been minimized.

@arschmitz

arschmitz Feb 18, 2016

Member

same here

@arschmitz

arschmitz Feb 18, 2016

Member

same here

This comment has been minimized.

@gabrielschulhof

gabrielschulhof Mar 15, 2016

Contributor

I don't get it. ui-selectmenu-custom-header-close-button is in the second param here.

@gabrielschulhof

gabrielschulhof Mar 15, 2016

Contributor

I don't get it. ui-selectmenu-custom-header-close-button is in the second param here.

Show outdated Hide outdated js/widgets/forms/select.js
this.element.addClass( wrapper.hasClass( "ui-button-left" ) ? "ui-button-left" : "ui-button-right" );
if ( this.selectWrapper.length > 0 ) {
if ( this.selectWrapper.is( ".ui-button-left, .ui-button-right" ) ) {
this._addClass( null,

This comment has been minimized.

@arschmitz

arschmitz Feb 18, 2016

Member

button classes should be in the thuird param

@arschmitz

arschmitz Feb 18, 2016

Member

button classes should be in the thuird param

This comment has been minimized.

@arschmitz

arschmitz Feb 18, 2016

Member

also no need to remove classes in destroy

@arschmitz

arschmitz Feb 18, 2016

Member

also no need to remove classes in destroy

This comment has been minimized.

@arschmitz

arschmitz Feb 18, 2016

Member

no need to do anything you remove the whole element below

@arschmitz

arschmitz Feb 18, 2016

Member

no need to do anything you remove the whole element below

This comment has been minimized.

@gabrielschulhof

gabrielschulhof Mar 15, 2016

Contributor

This adds classes back to this.element upon destroy.

@gabrielschulhof

gabrielschulhof Mar 15, 2016

Contributor

This adds classes back to this.element upon destroy.

This comment has been minimized.

@gabrielschulhof

gabrielschulhof Mar 15, 2016

Contributor

... and if you leave out the element to which you wish to apply the classes, it becomes this.element, so the classes are in the correct parameter, AFAICT.

@gabrielschulhof

gabrielschulhof Mar 15, 2016

Contributor

... and if you leave out the element to which you wish to apply the classes, it becomes this.element, so the classes are in the correct parameter, AFAICT.

This comment has been minimized.

@gabrielschulhof

gabrielschulhof Mar 16, 2016

Contributor

Wait a sec - if I use this._addClass() here, classes will be added but then immediately removed, right? Hmmm ...

@gabrielschulhof

gabrielschulhof Mar 16, 2016

Contributor

Wait a sec - if I use this._addClass() here, classes will be added but then immediately removed, right? Hmmm ...

Show outdated Hide outdated js/widgets/forms/select.js
},
_create: function() {
var options = this.options,
iconpos = options.icon ?
( options.iconpos || this.element.jqmData( "iconpos" ) ) : false;

This comment has been minimized.

@arschmitz

arschmitz Feb 18, 2016

Member

dont use jqmdata

@arschmitz

arschmitz Feb 18, 2016

Member

dont use jqmdata

Show outdated Hide outdated js/widgets/forms/select.js
@@ -214,7 +221,7 @@ return $.widget( "mobile.selectmenu", $.extend( {
$.mobile.zoom.disable( true );
}
} );
self.select.bind( "focus", function() {
self.element.bind( "focus", function() {

This comment has been minimized.

@arschmitz

arschmitz Feb 18, 2016

Member

should really avoid self since in some contexts in can reference window

@arschmitz

arschmitz Feb 18, 2016

Member

should really avoid self since in some contexts in can reference window

Show outdated Hide outdated js/widgets/forms/select.js
span.attr( "aria-hidden", "true" );
// TODO possibly aggregate multiple select option classes
return span
.addClass( self.select.attr( "class" ) )
.addClass( self.element.attr( "class" ) )

This comment has been minimized.

@arschmitz

arschmitz Feb 18, 2016

Member

using addClass still

@arschmitz

arschmitz Feb 18, 2016

Member

using addClass still

@arschmitz

This comment has been minimized.

Show comment
Hide comment
@arschmitz

arschmitz Feb 18, 2016

Member

looking good only a few things

Member

arschmitz commented Feb 18, 2016

looking good only a few things

gabrielschulhof added some commits Feb 3, 2016

@gabrielschulhof

This comment has been minimized.

Show comment
Hide comment
@gabrielschulhof

gabrielschulhof Jun 19, 2016

Contributor

@arschmitz we have a load order race condition in kitchensink which seems to reliably manifest itself with core 1.9.1 in this PR. Aside from that it should be golden. I'll try to look into it whenever I get a chance.

Contributor

gabrielschulhof commented Jun 19, 2016

@arschmitz we have a load order race condition in kitchensink which seems to reliably manifest itself with core 1.9.1 in this PR. Aside from that it should be golden. I'll try to look into it whenever I get a chance.

@gabrielschulhof

This comment has been minimized.

Show comment
Hide comment
@gabrielschulhof

gabrielschulhof Jun 19, 2016

Contributor

@arschmitz nm, using a $.Deferred(). Lessee...

Contributor

gabrielschulhof commented Jun 19, 2016

@arschmitz nm, using a $.Deferred(). Lessee...

@gabrielschulhof

This comment has been minimized.

Show comment
Hide comment
@gabrielschulhof

gabrielschulhof Jun 19, 2016

Contributor

Yaaaay! Tests are now no worse than 1.5-dev!

Contributor

gabrielschulhof commented Jun 19, 2016

Yaaaay! Tests are now no worse than 1.5-dev!

@arschmitz

This comment has been minimized.

Show comment
Hide comment
@arschmitz

arschmitz Jun 22, 2016

Member

👍

Member

arschmitz commented Jun 22, 2016

👍

gabrielschulhof added a commit that referenced this pull request Jun 23, 2016

@apsdehal

This comment has been minimized.

Show comment
Hide comment
@apsdehal

apsdehal Jun 23, 2016

Member

Awesome! @gabrielschulhof landed this in 1.5-dev.

Member

apsdehal commented Jun 23, 2016

Awesome! @gabrielschulhof landed this in 1.5-dev.

@apsdehal apsdehal closed this Jun 23, 2016

arschmitz added a commit to arschmitz/jquery-mobile that referenced this pull request Jul 4, 2016

arschmitz added a commit that referenced this pull request Jul 4, 2016

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment