Skip to content
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

@apsdehal
Copy link
Member

apsdehal commented Dec 22, 2015

Fixes #7709

apsdehal added 3 commits Dec 22, 2015
- Removes extra tests no longer required
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.

Copy link
@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.

Copy link
@apsdehal

apsdehal Dec 22, 2015

Author Member

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


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.

Copy link
@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 );
@@ -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.

Copy link
@gabrielschulhof

gabrielschulhof Dec 22, 2015

Contributor

Use

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

This comment has been minimized.

Copy link
@arschmitz

arschmitz Dec 22, 2015

Member

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


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.

Copy link
@gabrielschulhof

gabrielschulhof Dec 22, 2015

Contributor

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

@@ -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.

Copy link
@gabrielschulhof

gabrielschulhof Dec 22, 2015

Contributor

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

this.element.one( "panelopen panelclose", function() {
link.removeClass( "ui-button-active" );
this._removeClass( "ui-button-active" );

This comment has been minimized.

Copy link
@gabrielschulhof

gabrielschulhof Dec 22, 2015

Contributor

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

.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.

Copy link
@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.

Copy link
@apsdehal

apsdehal Dec 22, 2015

Author 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.

originalWidget = $.mobile.panel.prototype;

defaults.classes = classes;

This comment has been minimized.

Copy link
@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.

Copy link
@arschmitz

arschmitz Dec 22, 2015

Member

that was the plan


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.

Copy link
@gabrielschulhof

gabrielschulhof Dec 22, 2015

Contributor

Could just use ui-panel-closed here.


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

This comment has been minimized.

Copy link
@arschmitz

arschmitz Jan 28, 2016

Member

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

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.

Copy link
@arschmitz

arschmitz Jan 28, 2016

Member

same here

@arschmitz
Copy link
Member

arschmitz commented Feb 18, 2016

this looks good once you make the 2 changes

@apsdehal
Copy link
Member Author

apsdehal commented Feb 18, 2016

@arschmitz Done!

@arschmitz
Copy link
Member

arschmitz commented Feb 25, 2016

👍

apsdehal added a commit that referenced this pull request Feb 25, 2016
Closes gh-8350
@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
Projects
None yet
Linked issues

Successfully merging this pull request may close these issues.

None yet

4 participants
You can’t perform that action at this time.