This commit is contained in:
Víctor Déniz 2022-11-15 22:30:31 +00:00
commit 6a0c6a19ca
4 changed files with 149 additions and 2 deletions

View File

@ -167,6 +167,18 @@ Y.extend(DIALOGUE, Y.Panel, {
return node.eventName !== 'focusoutside';
}));
Y.one('document').on('orientationchange', function() {
// This will detect a change in orientation and re-trigger centering.
this.centerDialogOnVisible();
}, this);
Y.one('window').on('resize', function() {
// Detect window resize (most browsers).
this.centerDialogOnVisible();
}, this);
// Observe dialog on size change.
this.centerDialogOnDialogSizeChange(this);
// Workaround upstream YUI bug http://yuilibrary.com/projects/yui3/ticket/2532507
// and allow setting of z-index in theme.
bb = this.get('boundingBox');
@ -409,6 +421,43 @@ Y.extend(DIALOGUE, Y.Panel, {
}
this.makeResponsive();
},
/**
* Automatic re-center dialog when dialog size is changed.
*
* @method centerDialogOnDialogSizeChange
* @param {M.core.dialogue} dialog object to apply centering.
*/
centerDialogOnDialogSizeChange: function(dialog) {
// ResizeObserver doesn't get recognized in JSHint.
// So we need to suppress the false warning.
var observer = new ResizeObserver(function() { // jshint ignore:line
dialog.centerDialogOnVisible();
});
var bb = dialog.get('boundingBox');
observer.observe(bb._node, {attributes: true, attributeFilter: ['class']});
},
/**
* Centering dialog when dialog is visible.
*
* @method centerDialogOnVisible
*/
centerDialogOnVisible: function() {
if (!this.get('visible')) {
return; // Only centre visible dialogue.
}
if (this.name !== DIALOGUE_NAME) {
return; // Only centre Moodle dialogues.
}
if (this.shouldResizeFullscreen()) {
this.makeResponsive();
}
this.centerDialogue();
},
/**
* Return whether this dialogue should be fullscreen or not.
*

File diff suppressed because one or more lines are too long

View File

@ -167,6 +167,18 @@ Y.extend(DIALOGUE, Y.Panel, {
return node.eventName !== 'focusoutside';
}));
Y.one('document').on('orientationchange', function() {
// This will detect a change in orientation and re-trigger centering.
this.centerDialogOnVisible();
}, this);
Y.one('window').on('resize', function() {
// Detect window resize (most browsers).
this.centerDialogOnVisible();
}, this);
// Observe dialog on size change.
this.centerDialogOnDialogSizeChange(this);
// Workaround upstream YUI bug http://yuilibrary.com/projects/yui3/ticket/2532507
// and allow setting of z-index in theme.
bb = this.get('boundingBox');
@ -409,6 +421,43 @@ Y.extend(DIALOGUE, Y.Panel, {
}
this.makeResponsive();
},
/**
* Automatic re-center dialog when dialog size is changed.
*
* @method centerDialogOnDialogSizeChange
* @param {M.core.dialogue} dialog object to apply centering.
*/
centerDialogOnDialogSizeChange: function(dialog) {
// ResizeObserver doesn't get recognized in JSHint.
// So we need to suppress the false warning.
var observer = new ResizeObserver(function() { // jshint ignore:line
dialog.centerDialogOnVisible();
});
var bb = dialog.get('boundingBox');
observer.observe(bb._node, {attributes: true, attributeFilter: ['class']});
},
/**
* Centering dialog when dialog is visible.
*
* @method centerDialogOnVisible
*/
centerDialogOnVisible: function() {
if (!this.get('visible')) {
return; // Only centre visible dialogue.
}
if (this.name !== DIALOGUE_NAME) {
return; // Only centre Moodle dialogues.
}
if (this.shouldResizeFullscreen()) {
this.makeResponsive();
}
this.centerDialogue();
},
/**
* Return whether this dialogue should be fullscreen or not.
*

View File

@ -137,6 +137,18 @@ Y.extend(DIALOGUE, Y.Panel, {
return node.eventName !== 'focusoutside';
}));
Y.one('document').on('orientationchange', function() {
// This will detect a change in orientation and re-trigger centering.
this.centerDialogOnVisible();
}, this);
Y.one('window').on('resize', function() {
// Detect window resize (most browsers).
this.centerDialogOnVisible();
}, this);
// Observe dialog on size change.
this.centerDialogOnDialogSizeChange(this);
// Workaround upstream YUI bug http://yuilibrary.com/projects/yui3/ticket/2532507
// and allow setting of z-index in theme.
bb = this.get('boundingBox');
@ -379,6 +391,43 @@ Y.extend(DIALOGUE, Y.Panel, {
}
this.makeResponsive();
},
/**
* Automatic re-center dialog when dialog size is changed.
*
* @method centerDialogOnDialogSizeChange
* @param {M.core.dialogue} dialog object to apply centering.
*/
centerDialogOnDialogSizeChange: function(dialog) {
// ResizeObserver doesn't get recognized in JSHint.
// So we need to suppress the false warning.
var observer = new ResizeObserver(function() { // jshint ignore:line
dialog.centerDialogOnVisible();
});
var bb = dialog.get('boundingBox');
observer.observe(bb._node, {attributes: true, attributeFilter: ['class']});
},
/**
* Centering dialog when dialog is visible.
*
* @method centerDialogOnVisible
*/
centerDialogOnVisible: function() {
if (!this.get('visible')) {
return; // Only centre visible dialogue.
}
if (this.name !== DIALOGUE_NAME) {
return; // Only centre Moodle dialogues.
}
if (this.shouldResizeFullscreen()) {
this.makeResponsive();
}
this.centerDialogue();
},
/**
* Return whether this dialogue should be fullscreen or not.
*