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

Panel: Implement classes option #8350

Closed
wants to merge 7 commits into
from

Conversation

Projects
None yet
4 participants
@apsdehal
Member

apsdehal commented Dec 22, 2015

Fixes #7709

apsdehal added some commits Dec 22, 2015

Panel: Shift tests to use qunit-assert-classes
- Removes extra tests no longer required
Show outdated Hide outdated js/widgets/panel.js
pageFixedToolbar: "ui-panel-fixed-toolbar",
pageContentPrefix: "ui-panel-page-content", /* Used for wrapper and fixed toolbars position, display and open classes. */
animate: "ui-panel-animate"
"ui-panel": "ui-panel-closed"

This comment has been minimized.

@gabrielschulhof

gabrielschulhof Dec 22, 2015

Contributor

@arschmitz can correct me if I'm wrong, but I don't believe ui-panel-closed is supposed to be a value, but rather a key. The value of a class key is supposed to be a set of style-related classes, IINM.

@gabrielschulhof

gabrielschulhof Dec 22, 2015

Contributor

@arschmitz can correct me if I'm wrong, but I don't believe ui-panel-closed is supposed to be a value, but rather a key. The value of a class key is supposed to be a set of style-related classes, IINM.

This comment has been minimized.

@apsdehal

apsdehal Dec 22, 2015

Member

I suppose then there is not even a need of classes option here.

@apsdehal

apsdehal Dec 22, 2015

Member

I suppose then there is not even a need of classes option here.

Show outdated Hide outdated js/widgets/panel.js
if ( panelInner.length === 0 ) {
panelInner = this._safelyWrap( this.element,
"<div class='" + this.options.classes.panelInner + "'></div>",
"<div class='ui-panel-inner'></div>",

This comment has been minimized.

@gabrielschulhof

gabrielschulhof Dec 22, 2015

Contributor

You have to avoid using .wrap() and .wrapAll() if the wrapper has a class added at runtime, because those methods create elements on the fly. So, the elements-created-on-the-fly will not have tracking within the widget factory because they were never passed to this._addClass(). You need to do the wrapping manually. For example,

var x = $( "<div>" );
this._addClass( x, "ui-panel-inner" );
this.element.before( x );
x.append( this.element );
@gabrielschulhof

gabrielschulhof Dec 22, 2015

Contributor

You have to avoid using .wrap() and .wrapAll() if the wrapper has a class added at runtime, because those methods create elements on the fly. So, the elements-created-on-the-fly will not have tracking within the widget factory because they were never passed to this._addClass(). You need to do the wrapping manually. For example,

var x = $( "<div>" );
this._addClass( x, "ui-panel-inner" );
this.element.before( x );
x.append( this.element );
Show outdated Hide outdated js/widgets/panel.js
@@ -121,7 +121,7 @@ return $.widget( "mobile.panel", {
var self = this,
target = self._parentPage ? self._parentPage.parent() : self.element.parent();
self._modal = $( "<div class='" + self.options.classes.modal + "'></div>" )
self._modal = $( "<div class='ui-panel-dismiss'></div>" )

This comment has been minimized.

@gabrielschulhof

gabrielschulhof Dec 22, 2015

Contributor

Use

self._modal = $( "<div>" );
self._addClass( self._modal, "ui-panel-dismiss" );
@gabrielschulhof

gabrielschulhof Dec 22, 2015

Contributor

Use

self._modal = $( "<div>" );
self._addClass( self._modal, "ui-panel-dismiss" );

This comment has been minimized.

@arschmitz

arschmitz Dec 22, 2015

Member

except don't use self that is also a keyword for window

@arschmitz

arschmitz Dec 22, 2015

Member

except don't use self that is also a keyword for window

Show outdated Hide outdated js/widgets/panel.js
if ( wrapper.length === 0 ) {
thePage = this._page();
wrapper = this._safelyWrap( thePage,
"<div class='" + this.options.classes.pageWrapper + "'></div>",
"<div class='ui-panel-wrapper'></div>",

This comment has been minimized.

@gabrielschulhof

gabrielschulhof Dec 22, 2015

Contributor

Same as above - use this._addClass(...)

@gabrielschulhof

gabrielschulhof Dec 22, 2015

Contributor

Same as above - use this._addClass(...)

Show outdated Hide outdated js/widgets/panel.js
@@ -268,9 +266,9 @@ return $.widget( "mobile.panel", {
e.preventDefault();
link = $( e.target );
if ( link.hasClass( "ui-button" ) ) {
link.addClass( "ui-button-active" );
this._addClass( link, "ui-button-active" );

This comment has been minimized.

@gabrielschulhof

gabrielschulhof Dec 22, 2015

Contributor

This should be this._addClass( link, null, "ui-button-active" )

@gabrielschulhof

gabrielschulhof Dec 22, 2015

Contributor

This should be this._addClass( link, null, "ui-button-active" )

Show outdated Hide outdated js/widgets/panel.js
this.element.one( "panelopen panelclose", function() {
link.removeClass( "ui-button-active" );
this._removeClass( "ui-button-active" );

This comment has been minimized.

@gabrielschulhof

gabrielschulhof Dec 22, 2015

Contributor

this._removeClass( link, null, "ui-button-active" )

@gabrielschulhof

gabrielschulhof Dec 22, 2015

Contributor

this._removeClass( link, null, "ui-button-active" )

Show outdated Hide outdated js/widgets/panel.js
.addClass( o.classes.pageContainer + "-themed " + o.classes.pageContainer + "-" + o.theme );
self._addClass( self._page().parent(),
classesMap.pageContainer + "-themed " +
classesMap.pageContainer + "-" + o.theme );

This comment has been minimized.

@gabrielschulhof

gabrielschulhof Dec 22, 2015

Contributor

Why do we need the classesMap here or at all, for that matter (just curious)?

@gabrielschulhof

gabrielschulhof Dec 22, 2015

Contributor

Why do we need the classesMap here or at all, for that matter (just curious)?

This comment has been minimized.

@apsdehal

apsdehal Dec 22, 2015

Member

I added to the increase code maintainability since the same string was being used all over the place. Replacing the value of the variable replaces the value at every place where the variable is used.

@apsdehal

apsdehal Dec 22, 2015

Member

I added to the increase code maintainability since the same string was being used all over the place. Replacing the value of the variable replaces the value at every place where the variable is used.

Show outdated Hide outdated tests/unit/panel/panel_core.js
originalWidget = $.mobile.panel.prototype;
defaults.classes = classes;

This comment has been minimized.

@gabrielschulhof

gabrielschulhof Dec 22, 2015

Contributor

Huh? Why do we need all this? I thought we were dropping these class keys.

@gabrielschulhof

gabrielschulhof Dec 22, 2015

Contributor

Huh? Why do we need all this? I thought we were dropping these class keys.

This comment has been minimized.

@arschmitz

arschmitz Dec 22, 2015

Member

that was the plan

@arschmitz

arschmitz Dec 22, 2015

Member

that was the plan

Show outdated Hide outdated tests/unit/panel/panel_core.js
assert.equal( $panel.hasClass( defaults.classes.animate ), $.support.cssTransform3d, "animate class is present by default when supported" );
assert.ok( $panel.hasClass( defaults.classes.panelClosed ), "panel is closed by default" );
assert.hasClasses( $panel, defaults.classes.panelClosed,

This comment has been minimized.

@gabrielschulhof

gabrielschulhof Dec 22, 2015

Contributor

Could just use ui-panel-closed here.

@gabrielschulhof

gabrielschulhof Dec 22, 2015

Contributor

Could just use ui-panel-closed here.

Show outdated Hide outdated js/widgets/panel.js
// if animating, add the class to do so
this._addClass( this.element, "ui-panel ui-panel-closed", this._getPanelClasses() );

This comment has been minimized.

@arschmitz

arschmitz Jan 28, 2016

Member

no need to pass this.element its the default, this._addClass( "ui-panel ui-panel-closed", this._getPanelClasses() );

@arschmitz

arschmitz Jan 28, 2016

Member

no need to pass this.element its the default, this._addClass( "ui-panel ui-panel-closed", this._getPanelClasses() );

Show outdated Hide outdated js/widgets/panel.js
if ( $.support.cssTransform3d && !!this.options.animate ) {
this.element.addClass( this.options.classes.animate );
this._addClass( this.element, "ui-panel-animate" );

This comment has been minimized.

@arschmitz

arschmitz Jan 28, 2016

Member

same here

@arschmitz

arschmitz Jan 28, 2016

Member

same here

@arschmitz

This comment has been minimized.

Show comment
Hide comment
@arschmitz

arschmitz Feb 18, 2016

Member

this looks good once you make the 2 changes

Member

arschmitz commented Feb 18, 2016

this looks good once you make the 2 changes

@apsdehal

This comment has been minimized.

Show comment
Hide comment
Member

apsdehal commented Feb 18, 2016

@arschmitz Done!

@arschmitz

This comment has been minimized.

Show comment
Hide comment
@arschmitz

arschmitz Feb 25, 2016

Member

👍

Member

arschmitz commented Feb 25, 2016

👍

apsdehal added a commit that referenced this pull request Feb 25, 2016

@apsdehal apsdehal closed this Feb 25, 2016

apsdehal added a commit to apsdehal/jquery-mobile that referenced this pull request Mar 26, 2016

arschmitz added a commit to arschmitz/jquery-mobile 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