Since pxh-chrome is mobile-first and responsive, there may be cases where you need to rerender your microapp content based on changes in width to the pxh-view
wrapping element. This is common with SVGs or other types of content that need to render at a specific and known pixel width.
Listening to window.width
will cover many responsive use cases, but it doesn't cover the expansion (and collapse) of the navigation drawer, as that behavior changes the width of pxh-view
without changing the width of the browser window.
Fortunately, pxh-chrome and the App Hub provides a custom event, pxhViewResized
, that fires whenever the pxh-view
element changes size. Simply listen for this event in your microapp, and respond as necessary after it fires.
pxh-view
by ID and put it in a vardocument.getElementById('js-view'); // you'll need to add this ID to your markup
js-*
so we know there are no actual CSS styles associated with that attributepxhViewResized
javascript
var pxhViewResized = new CustomEvent('pxhViewResized', {
'detail' : pxhView.offsetWidth
});
ResizeSensor
to the pxh-view element, which dispatches the pxhViewResized
event when it fires
javascript
new ResizeSensor(pxhView, function() {
document.dispatchEvent(pxhViewResized);
});
Here's a basic usage example (do this in your microapp ... pxh-chrome should handle the rest):
javascript
document.addEventListener('pxhViewResized', function(event) {
console.log('pxhViewResized was fired!');
console.log('width changed to ' + event.detail);
});
P.S. If you look at the console output for this example, you'll realize you'll want to implement some debouncing on your event listener ... our current thinking is that the debouncing should be the responsibility of the microapp, not the event itself, but we're open to alternative perspectives.