MDL-54121 core-notification: Make dialogues re-calculate the lockscroll
When the content of a dialogue changes after it is first opened - you need to call centerDialogue() to make sure it still sits in the middle of the window. In addition this now recalculates the "lockScroll" so that if you need to scroll down to see all of the dialogue you can do it.
This commit is contained in:
@@ -96,6 +96,33 @@ Y.namespace('M.core').LockScroll = Y.Base.create('lockScroll', Y.Plugin.Base, []
|
||||
return this;
|
||||
},
|
||||
|
||||
/**
|
||||
* Recalculate whether lock scrolling should be on or off because the size of the dialogue changed.
|
||||
*
|
||||
* @method updateScrollLock
|
||||
* @param {Boolean} forceOnSmallWindow Whether to enable the scroll lock, even for small window sizes.
|
||||
* @chainable
|
||||
*/
|
||||
updateScrollLock: function(forceOnSmallWindow) {
|
||||
var shouldBeEnabled = true,
|
||||
dialogueHeight = this.get('host').get('boundingBox').get('region').height,
|
||||
// Most modern browsers use win.innerHeight, but some older versions of IE use documentElement.clientHeight.
|
||||
// We fall back to 0 if neither can be found which has the effect of disabling scroll locking.
|
||||
windowHeight = Y.config.win.innerHeight || Y.config.doc.documentElement.clientHeight || 0;
|
||||
|
||||
if (!forceOnSmallWindow && dialogueHeight > (windowHeight - 10)) {
|
||||
shouldBeEnabled = false;
|
||||
}
|
||||
|
||||
// Both these functions already check if scroll lock is active and do the right thing.
|
||||
if (shouldBeEnabled) {
|
||||
this.enableScrollLock(forceOnSmallWindow);
|
||||
} else {
|
||||
this.disableScrollLock();
|
||||
}
|
||||
return this;
|
||||
},
|
||||
|
||||
/**
|
||||
* Stop locking the page scroll.
|
||||
*
|
||||
|
||||
@@ -1 +1 @@
|
||||
YUI.add("moodle-core-lockscroll",function(e,t){e.namespace("M.core").LockScroll=e.Base.create("lockScroll",e.Plugin.Base,[],{_enabled:!1,destructor:function(){this.disableScrollLock()},enableScrollLock:function(t){if(this.isActive())return;var n=this.get("host").get("boundingBox").get("region").height,r=e.config.win.innerHeight||e.config.doc.documentElement.clientHeight||0;if(!t&&n>r-10)return;this._enabled=!0;var i=e.one(e.config.doc.body),s=i.getComputedStyle("width");i.addClass("lockscroll");var o=parseInt(i.getAttribute("data-activeScrollLocks"),10)||0,u=o+1;return i.setAttribute("data-activeScrollLocks",u),o===0&&i.setStyle("maxWidth",s),this},disableScrollLock:function(){if(this.isActive()){this._enabled=!1;var t=e.one(e.config.doc.body),n=parseInt(t.getAttribute("data-activeScrollLocks"),10)||1,r=n-1;n===1&&(t.removeClass("lockscroll"),t.setStyle("maxWidth",null)),t.setAttribute("data-activeScrollLocks",n-1)}return this},isActive:function(){return this._enabled}},{NS:"lockScroll",ATTRS:{}})},"@VERSION@",{requires:["plugin","base-build"]});
|
||||
YUI.add("moodle-core-lockscroll",function(e,t){e.namespace("M.core").LockScroll=e.Base.create("lockScroll",e.Plugin.Base,[],{_enabled:!1,destructor:function(){this.disableScrollLock()},enableScrollLock:function(t){if(this.isActive())return;var n=this.get("host").get("boundingBox").get("region").height,r=e.config.win.innerHeight||e.config.doc.documentElement.clientHeight||0;if(!t&&n>r-10)return;this._enabled=!0;var i=e.one(e.config.doc.body),s=i.getComputedStyle("width");i.addClass("lockscroll");var o=parseInt(i.getAttribute("data-activeScrollLocks"),10)||0,u=o+1;return i.setAttribute("data-activeScrollLocks",u),o===0&&i.setStyle("maxWidth",s),this},updateScrollLock:function(t){var n=!0,r=this.get("host").get("boundingBox").get("region").height,i=e.config.win.innerHeight||e.config.doc.documentElement.clientHeight||0;return!t&&r>i-10&&(n=!1),n?this.enableScrollLock(t):this.disableScrollLock(),this},disableScrollLock:function(){if(this.isActive()){this._enabled=!1;var t=e.one(e.config.doc.body),n=parseInt(t.getAttribute("data-activeScrollLocks"),10)||1,r=n-1;n===1&&(t.removeClass("lockscroll"),t.setStyle("maxWidth",null)),t.setAttribute("data-activeScrollLocks",n-1)}return this},isActive:function(){return this._enabled}},{NS:"lockScroll",ATTRS:{}})},"@VERSION@",{requires:["plugin","base-build"]});
|
||||
|
||||
@@ -91,6 +91,33 @@ Y.namespace('M.core').LockScroll = Y.Base.create('lockScroll', Y.Plugin.Base, []
|
||||
return this;
|
||||
},
|
||||
|
||||
/**
|
||||
* Recalculate whether lock scrolling should be on or off because the size of the dialogue changed.
|
||||
*
|
||||
* @method updateScrollLock
|
||||
* @param {Boolean} forceOnSmallWindow Whether to enable the scroll lock, even for small window sizes.
|
||||
* @chainable
|
||||
*/
|
||||
updateScrollLock: function(forceOnSmallWindow) {
|
||||
var shouldBeEnabled = true,
|
||||
dialogueHeight = this.get('host').get('boundingBox').get('region').height,
|
||||
// Most modern browsers use win.innerHeight, but some older versions of IE use documentElement.clientHeight.
|
||||
// We fall back to 0 if neither can be found which has the effect of disabling scroll locking.
|
||||
windowHeight = Y.config.win.innerHeight || Y.config.doc.documentElement.clientHeight || 0;
|
||||
|
||||
if (!forceOnSmallWindow && dialogueHeight > (windowHeight - 10)) {
|
||||
shouldBeEnabled = false;
|
||||
}
|
||||
|
||||
// Both these functions already check if scroll lock is active and do the right thing.
|
||||
if (shouldBeEnabled) {
|
||||
this.enableScrollLock(forceOnSmallWindow);
|
||||
} else {
|
||||
this.disableScrollLock();
|
||||
}
|
||||
return this;
|
||||
},
|
||||
|
||||
/**
|
||||
* Stop locking the page scroll.
|
||||
*
|
||||
|
||||
+5
-7
@@ -331,6 +331,11 @@ Y.extend(DIALOGUE, Y.Panel, {
|
||||
'height' : this.get('height')});
|
||||
}
|
||||
}
|
||||
|
||||
// Update Lock scroll if the plugin is present.
|
||||
if (this.lockScroll) {
|
||||
this.lockScroll.updateScrollLock(this.shouldResizeFullscreen());
|
||||
}
|
||||
},
|
||||
/**
|
||||
* Center the dialog on the screen.
|
||||
@@ -387,13 +392,6 @@ Y.extend(DIALOGUE, Y.Panel, {
|
||||
this.get('boundingBox').setXY(this._originalPosition);
|
||||
}
|
||||
|
||||
// Lock scroll if the plugin is present.
|
||||
if (this.lockScroll) {
|
||||
// We need to force the scroll locking for full screen dialogues, even if they have a small vertical size to
|
||||
// prevent the background scrolling while the dialogue is open.
|
||||
this.lockScroll.enableScrollLock(this.shouldResizeFullscreen());
|
||||
}
|
||||
|
||||
// Try and find a node to focus on using the focusOnShowSelector attribute.
|
||||
if (focusSelector !== null) {
|
||||
focusNode = this.get('boundingBox').one(focusSelector);
|
||||
|
||||
+1
-1
File diff suppressed because one or more lines are too long
+5
-7
@@ -331,6 +331,11 @@ Y.extend(DIALOGUE, Y.Panel, {
|
||||
'height' : this.get('height')});
|
||||
}
|
||||
}
|
||||
|
||||
// Update Lock scroll if the plugin is present.
|
||||
if (this.lockScroll) {
|
||||
this.lockScroll.updateScrollLock(this.shouldResizeFullscreen());
|
||||
}
|
||||
},
|
||||
/**
|
||||
* Center the dialog on the screen.
|
||||
@@ -387,13 +392,6 @@ Y.extend(DIALOGUE, Y.Panel, {
|
||||
this.get('boundingBox').setXY(this._originalPosition);
|
||||
}
|
||||
|
||||
// Lock scroll if the plugin is present.
|
||||
if (this.lockScroll) {
|
||||
// We need to force the scroll locking for full screen dialogues, even if they have a small vertical size to
|
||||
// prevent the background scrolling while the dialogue is open.
|
||||
this.lockScroll.enableScrollLock(this.shouldResizeFullscreen());
|
||||
}
|
||||
|
||||
// Try and find a node to focus on using the focusOnShowSelector attribute.
|
||||
if (focusSelector !== null) {
|
||||
focusNode = this.get('boundingBox').one(focusSelector);
|
||||
|
||||
+27
@@ -94,6 +94,33 @@ Y.namespace('M.core').LockScroll = Y.Base.create('lockScroll', Y.Plugin.Base, []
|
||||
return this;
|
||||
},
|
||||
|
||||
/**
|
||||
* Recalculate whether lock scrolling should be on or off because the size of the dialogue changed.
|
||||
*
|
||||
* @method updateScrollLock
|
||||
* @param {Boolean} forceOnSmallWindow Whether to enable the scroll lock, even for small window sizes.
|
||||
* @chainable
|
||||
*/
|
||||
updateScrollLock: function(forceOnSmallWindow) {
|
||||
var shouldBeEnabled = true,
|
||||
dialogueHeight = this.get('host').get('boundingBox').get('region').height,
|
||||
// Most modern browsers use win.innerHeight, but some older versions of IE use documentElement.clientHeight.
|
||||
// We fall back to 0 if neither can be found which has the effect of disabling scroll locking.
|
||||
windowHeight = Y.config.win.innerHeight || Y.config.doc.documentElement.clientHeight || 0;
|
||||
|
||||
if (!forceOnSmallWindow && dialogueHeight > (windowHeight - 10)) {
|
||||
shouldBeEnabled = false;
|
||||
}
|
||||
|
||||
// Both these functions already check if scroll lock is active and do the right thing.
|
||||
if (shouldBeEnabled) {
|
||||
this.enableScrollLock(forceOnSmallWindow);
|
||||
} else {
|
||||
this.disableScrollLock();
|
||||
}
|
||||
return this;
|
||||
},
|
||||
|
||||
/**
|
||||
* Stop locking the page scroll.
|
||||
*
|
||||
|
||||
+5
-7
@@ -302,6 +302,11 @@ Y.extend(DIALOGUE, Y.Panel, {
|
||||
'height' : this.get('height')});
|
||||
}
|
||||
}
|
||||
|
||||
// Update Lock scroll if the plugin is present.
|
||||
if (this.lockScroll) {
|
||||
this.lockScroll.updateScrollLock(this.shouldResizeFullscreen());
|
||||
}
|
||||
},
|
||||
/**
|
||||
* Center the dialog on the screen.
|
||||
@@ -358,13 +363,6 @@ Y.extend(DIALOGUE, Y.Panel, {
|
||||
this.get('boundingBox').setXY(this._originalPosition);
|
||||
}
|
||||
|
||||
// Lock scroll if the plugin is present.
|
||||
if (this.lockScroll) {
|
||||
// We need to force the scroll locking for full screen dialogues, even if they have a small vertical size to
|
||||
// prevent the background scrolling while the dialogue is open.
|
||||
this.lockScroll.enableScrollLock(this.shouldResizeFullscreen());
|
||||
}
|
||||
|
||||
// Try and find a node to focus on using the focusOnShowSelector attribute.
|
||||
if (focusSelector !== null) {
|
||||
focusNode = this.get('boundingBox').one(focusSelector);
|
||||
|
||||
Reference in New Issue
Block a user