Skip to content
This repository was archived by the owner on Sep 5, 2024. It is now read-only.

fix(mdPanel): Propagation, CSS targeting, and dynamic position updating #8983

Closed

Conversation

bradrich
Copy link
Contributor

@bradrich bradrich commented Jul 8, 2016

Fixes #8968 by:

  • Adding the propagateContainerEvents option to the panel configuration that is defaulted to false. If true, the mdPanel API will allow all touch and pointer events to propagate through the mdPanel container, the 'outer-wrapper', to the elements behind it.

Fixes #8980 by:

  • Adding a boolean parameter to the MdPanelRef addClass, removeClass, and toggleClass functions that defaults to false. When true, it will allow the function's primary class actions to be executed on the mdPanel element, instead of the container.
  • Adding a public updatePosition function that will take in a MdPanelPosition object parameter that it will overwrite the current configuration's position and then call the private _updatePosition function.

Ping @ErinCoughlan @EladBezalel

@@ -1188,6 +1211,24 @@ MdPanelRef.prototype._addStyles = function() {


/**
* Update the position configuration of a panel
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nit: Method descriptions should start with a sentence written in the third person declarative voice. Can you change this to:

"Updates the position configuration of the panel."

@bradrich
Copy link
Contributor Author

bradrich commented Jul 8, 2016

@ErinCoughlan Thank you for these comments. I will make your suggested changes.

@EladBezalel
Copy link
Member

IMO we should remove addClass, removeClass and toggleClass by providing the container and the panel elements as a public api.
Doesn't makes sense copying this functionality from jqlite.
@ErinCoughlan

@ErinCoughlan
Copy link
Contributor

@EladBezalel That's fine by me.

@bradrich bradrich force-pushed the fix/panel-propagation-css-position branch from ea65c7c to 32bd19c Compare July 11, 2016 20:34
@bradrich
Copy link
Contributor Author

@topherfangio Squashed my commits on this, even though it needs work.

@topherfangio
Copy link
Contributor

@bradrich Awesome; thanks! In general, if you push anything to a PR (even in-progress), you should squash your commits 😄

@ErinCoughlan
Copy link
Contributor

@bradrich Tests? You added new functionality, but I have no idea if they work and will continue to work.

@bradrich bradrich force-pushed the fix/panel-propagation-css-position branch from 32bd19c to 6148b5e Compare July 15, 2016 12:58
@bradrich
Copy link
Contributor Author

bradrich commented Jul 15, 2016

@ErinCoughlan All tests are included and passing. Please review and give LGTM.

Ping @ThomasBurleson

@@ -1115,6 +1212,63 @@ describe('$mdPanel', function() {
mdPanelPosition = $mdPanel.newPanelPosition();
});

it('should update the position of an open panel', function() {
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@ErinCoughlan Please give special attention to this test.

@bradrich bradrich force-pushed the fix/panel-propagation-css-position branch 2 times, most recently from c38d063 to bdc9fd1 Compare July 15, 2016 13:06
describe('CSS class logic:', function() {
it('should add a class to the container/wrapper when toElement=false',
function() {
openPanel(DEFAULT_CONFIG);
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nit: indentation here is off. openPanel and the rest of the code still needs to be indented under function, like this:

it('should add a class to the container/wrapper when toElement=false',
  function() {
    openPanel(DEFAULT_CONFIG);
    ...
    expect(PANEL_WRAPPER_CLASS).toHaveCLASS('my-class');
  });

@bradrich
Copy link
Contributor Author

bradrich commented Jul 15, 2016

@ErinCoughlan That's it! Whew!

EDIT: Ah, I spoke too soon.

var self = this;

self._config['position'] = position;
self._$mdUtil.nextTick(function() {
Copy link
Contributor

@ErinCoughlan ErinCoughlan Jul 15, 2016

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Does this work?

self._$mdUtil.nextTick(self._updatePosition);

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I guess it would work if you bind it to this, since updatePosition accessed the instance context?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It does not. I have new tests coming in.

@bradrich bradrich force-pushed the fix/panel-propagation-css-position branch from bdc9fd1 to 5bb2e23 Compare July 15, 2016 19:31
@bradrich
Copy link
Contributor Author

@EladBezalel I am going to add the panel wrapper/container and element to the panelRef in another feature. So, I am going to remove the needs: work label.

@bradrich
Copy link
Contributor Author

@ThomasBurleson There is an issue with the Travis CI. Is it known?

@devversion
Copy link
Member

@bradrich This rarely happens to builds on Saucelabs. I will try to increase the Sauce timeout, so we reduce that flakiness a bit.

throw new Error('Panel does not exist yet. Call open() or attach().');
}

var self = this;
Copy link
Contributor

@ErinCoughlan ErinCoughlan Jul 15, 2016

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think the self variable here is no longer necessary and you can use this for both lines below.

@ErinCoughlan
Copy link
Contributor

@ThomasBurleson @bradrich LGTM once nits are resolved

Fixes angular#8968 by:
 - Adding the `propagateContainerEvents` option to the panel configuration that is defaulted to false. If true, the mdPanel API will allow all touch and pointer events to propagate through the mdPanel container, the 'outer-wrapper', to the elements behind it.

Fixes angular#8980 by:
- Adding a boolean parameter to the MdPanelRef `addClass`, `removeClass`, and `toggleClass` functions that defaults to false. When true, it will allow the function's primary class actions to be executed on the mdPanel element, instead of the container.
- Adding a public `updatePosition` function that will take in a MdPanelPosition object parameter that it will overwrite the current configuration's position and then call the private `_updatePosition` function.

Ping @ErinCoughlan
@bradrich bradrich force-pushed the fix/panel-propagation-css-position branch from 5bb2e23 to 127dd54 Compare July 15, 2016 21:42
@bradrich
Copy link
Contributor Author

@ErinCoughlan & @ThomasBurleson All requests have been met and everything should be GTG. Please let me know if I have missed anything.

Thanks for everyone's attention.

@bradrich bradrich deleted the fix/panel-propagation-css-position branch July 21, 2016 23:34
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

6 participants