mirror_php/moodle
1
0
Fork 0
mirror of https://github.com/moodle/moodle.git synced 2025-03-14 04:30:15 +01:00
Code Issues Projects Releases Wiki Activity

MDL-44334 Javascript: Prevent scroll locking for small screen heights

Browse Source
This commit is contained in:
Andrew Nicols 2014-02-25 10:42:45 +08:00
parent 0a489777fc
commit b959e5085a
12 changed files with 57 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
lib/yui/build/moodle-core-chooserdialogue/moodle-core-chooserdialogue-debug.js vendored
View File

@ -221,7 +221,7 @@ Y.extend(CHOOSERDIALOGUE, Y.Base, {
if (newheight > this.get('minheight')) {
// Disable the page scrollbars.
if (this.panel.lockScroll && !this.panel.lockScroll.isActive()) {
this.panel.lockScroll.enableScrollLock();
this.panel.lockScroll.enableScrollLock(true);
}
} else {
// Re-enable the page scrollbars.

2
lib/yui/build/moodle-core-chooserdialogue/moodle-core-chooserdialogue-min.js vendored
View File

@ -1 +1 @@
YUI.add("moodle-core-chooserdialogue",function(e,t){var n=function(){n.superclass.constructor.apply(this,arguments)};e.extend(n,e.Base,{panel:null,submitbutton:null,container:null,listenevents:[],bodycontent:null,headercontent:null,instanceconfig:null,hiddenRadioValue:null,setup_chooser_dialogue:function(e,t,n){this.bodycontent=e,this.headercontent=t,this.instanceconfig=n},prepare_chooser:function(){if(this.panel)return;var t,n={bodyContent:this.bodycontent.get("innerHTML"),headerContent:this.headercontent.get("innerHTML"),width:"540px",draggable:!0,visible:!1,zindex:100,modal:!0,shim:!0,closeButtonTitle:this.get("closeButtonTitle"),focusOnPreviousTargetAfterHide:!0,render:!1};for(t in this.instanceconfig)n[t]=this.instanceconfig[t];this.panel=new M.core.dialogue(n),this.bodycontent.remove(),this.headercontent.remove(),this.panel.hide(),this.panel.render(),this.container=this.panel.get("boundingBox").one(".choosercontainer"),this.options=this.container.all(".option input[type=radio]"),this.hiddenRadioValue=e.Node.create('<input type="hidden" value="" />'),this.container.one("form").appendChild(this.hiddenRadioValue),this.panel.get("boundingBox").addClass("chooserdialogue")},display_chooser:function(t){var n,r,i;this.prepare_chooser(),t.preventDefault(),n=this.panel.get("boundingBox"),r=this.container.one(".alloptions"),i=e.one("document").on("orientationchange",function(){this.center_dialogue(r)},this),this.listenevents.push(i),i=e.one("window").on("resize",function(){this.center_dialogue(r)},this),this.listenevents.push(i),i=this.container.on("click",this.check_options,this),this.listenevents.push(i),i=this.container.on("key_up",this.check_options,this),this.listenevents.push(i),i=this.container.on("dblclick",function(e){e.target.ancestor("div.option")&&(this.check_options(),this.submitbutton.setAttribute("disabled","disabled"),this.options.setAttribute("disabled","disabled"),this.cancel_listenevents(),this.container.one("form").submit())},this),this.listenevents.push(i),this.container.one("form").on("submit",function(){this.submitbutton.setAttribute("disabled","disabled"),this.options.setAttribute("disabled","disabled"),this.cancel_listenevents()},this),i=this.container.one(".addcancel").on("click",this.cancel_popup,this),this.listenevents.push(i),i=n.one("button.closebutton").on("click",this.cancel_popup,this),this.listenevents.push(i),i=e.one("document").on("keydown",this.handle_key_press,this),this.listenevents.push(i),this.submitbutton=this.container.one(".submitbutton"),this.submitbutton.set("disabled","true"),this.options.removeAttribute("disabled"),this.panel.show(t),this.center_dialogue(r),this.container.one(".option input[type=radio]").focus(),this.check_options()},cancel_listenevents:function(){var e;while(this.listenevents.length)e=this.listenevents.shift(),e.detach()},center_dialogue:function(e){var t=this.panel.get("boundingBox"),n=t.get("winHeight"),r,i;if(this.panel.shouldResizeFullscreen())return;r=this.get("maxheight"),n<=r&&(n<=this.get("minheight")?r=this.get("minheight"):r=n),r>this.get("minheight")?this.panel.lockScroll&&!this.panel.lockScroll.isActive()&&this.panel.lockScroll.enableScrollLock():this.panel.lockScroll&&this.panel.lockScroll.isActive()&&this.panel.lockScroll.disableScrollLock(),i=r,r-=110,e.setStyle("maxHeight",r+"px"),dialogueheight=t.getStyle("height"),dialogueheight.match(/.*px$/)?dialogueheight=dialogueheight.replace(/px$/,""):dialogueheight=i,dialogueheight<this.get("baseheight")&&(dialogueheight=this.get("baseheight"),e.setStyle("height",dialogueheight+"px")),this.panel.centerDialogue()},handle_key_press:function(e){e.keyCode===27&&this.cancel_popup(e)},cancel_popup:function(e){e.preventDefault(),this.hide()},hide:function(){this.cancel_listenevents(),this.container.detachAll(),this.panel.hide()},check_options:function(){this.options.each(function(e){var t=e.get("parentNode").get("parentNode");e.get("checked")?(t.addClass("selected"),this.option_selected(e),this.submitbutton.removeAttribute("disabled"),e.focus()):t.removeClass("selected")},this)},option_selected:function(e){this.hiddenRadioValue.setAttrs({value:e.get("value"),name:e.get("name")})}},{NAME:"moodle-core-chooserdialogue",ATTRS:{minheight:{value:300},baseheight:{value:400},maxheight:{value:660},closeButtonTitle:{validator:e.Lang.isString,value:"Close"}}}),M.core=M.core||{},M.core.chooserdialogue=n},"@VERSION@",{requires:["base","panel","moodle-core-notification"]});
YUI.add("moodle-core-chooserdialogue",function(e,t){var n=function(){n.superclass.constructor.apply(this,arguments)};e.extend(n,e.Base,{panel:null,submitbutton:null,container:null,listenevents:[],bodycontent:null,headercontent:null,instanceconfig:null,hiddenRadioValue:null,setup_chooser_dialogue:function(e,t,n){this.bodycontent=e,this.headercontent=t,this.instanceconfig=n},prepare_chooser:function(){if(this.panel)return;var t,n={bodyContent:this.bodycontent.get("innerHTML"),headerContent:this.headercontent.get("innerHTML"),width:"540px",draggable:!0,visible:!1,zindex:100,modal:!0,shim:!0,closeButtonTitle:this.get("closeButtonTitle"),focusOnPreviousTargetAfterHide:!0,render:!1};for(t in this.instanceconfig)n[t]=this.instanceconfig[t];this.panel=new M.core.dialogue(n),this.bodycontent.remove(),this.headercontent.remove(),this.panel.hide(),this.panel.render(),this.container=this.panel.get("boundingBox").one(".choosercontainer"),this.options=this.container.all(".option input[type=radio]"),this.hiddenRadioValue=e.Node.create('<input type="hidden" value="" />'),this.container.one("form").appendChild(this.hiddenRadioValue),this.panel.get("boundingBox").addClass("chooserdialogue")},display_chooser:function(t){var n,r,i;this.prepare_chooser(),t.preventDefault(),n=this.panel.get("boundingBox"),r=this.container.one(".alloptions"),i=e.one("document").on("orientationchange",function(){this.center_dialogue(r)},this),this.listenevents.push(i),i=e.one("window").on("resize",function(){this.center_dialogue(r)},this),this.listenevents.push(i),i=this.container.on("click",this.check_options,this),this.listenevents.push(i),i=this.container.on("key_up",this.check_options,this),this.listenevents.push(i),i=this.container.on("dblclick",function(e){e.target.ancestor("div.option")&&(this.check_options(),this.submitbutton.setAttribute("disabled","disabled"),this.options.setAttribute("disabled","disabled"),this.cancel_listenevents(),this.container.one("form").submit())},this),this.listenevents.push(i),this.container.one("form").on("submit",function(){this.submitbutton.setAttribute("disabled","disabled"),this.options.setAttribute("disabled","disabled"),this.cancel_listenevents()},this),i=this.container.one(".addcancel").on("click",this.cancel_popup,this),this.listenevents.push(i),i=n.one("button.closebutton").on("click",this.cancel_popup,this),this.listenevents.push(i),i=e.one("document").on("keydown",this.handle_key_press,this),this.listenevents.push(i),this.submitbutton=this.container.one(".submitbutton"),this.submitbutton.set("disabled","true"),this.options.removeAttribute("disabled"),this.panel.show(t),this.center_dialogue(r),this.container.one(".option input[type=radio]").focus(),this.check_options()},cancel_listenevents:function(){var e;while(this.listenevents.length)e=this.listenevents.shift(),e.detach()},center_dialogue:function(e){var t=this.panel.get("boundingBox"),n=t.get("winHeight"),r,i;if(this.panel.shouldResizeFullscreen())return;r=this.get("maxheight"),n<=r&&(n<=this.get("minheight")?r=this.get("minheight"):r=n),r>this.get("minheight")?this.panel.lockScroll&&!this.panel.lockScroll.isActive()&&this.panel.lockScroll.enableScrollLock(!0):this.panel.lockScroll&&this.panel.lockScroll.isActive()&&this.panel.lockScroll.disableScrollLock(),i=r,r-=110,e.setStyle("maxHeight",r+"px"),dialogueheight=t.getStyle("height"),dialogueheight.match(/.*px$/)?dialogueheight=dialogueheight.replace(/px$/,""):dialogueheight=i,dialogueheight<this.get("baseheight")&&(dialogueheight=this.get("baseheight"),e.setStyle("height",dialogueheight+"px")),this.panel.centerDialogue()},handle_key_press:function(e){e.keyCode===27&&this.cancel_popup(e)},cancel_popup:function(e){e.preventDefault(),this.hide()},hide:function(){this.cancel_listenevents(),this.container.detachAll(),this.panel.hide()},check_options:function(){this.options.each(function(e){var t=e.get("parentNode").get("parentNode");e.get("checked")?(t.addClass("selected"),this.option_selected(e),this.submitbutton.removeAttribute("disabled"),e.focus()):t.removeClass("selected")},this)},option_selected:function(e){this.hiddenRadioValue.setAttrs({value:e.get("value"),name:e.get("name")})}},{NAME:"moodle-core-chooserdialogue",ATTRS:{minheight:{value:300},baseheight:{value:400},maxheight:{value:660},closeButtonTitle:{validator:e.Lang.isString,value:"Close"}}}),M.core=M.core||{},M.core.chooserdialogue=n},"@VERSION@",{requires:["base","panel","moodle-core-notification"]});

2
lib/yui/build/moodle-core-chooserdialogue/moodle-core-chooserdialogue.js vendored
View File

@ -221,7 +221,7 @@ Y.extend(CHOOSERDIALOGUE, Y.Base, {
if (newheight > this.get('minheight')) {
// Disable the page scrollbars.
if (this.panel.lockScroll && !this.panel.lockScroll.isActive()) {
this.panel.lockScroll.enableScrollLock();
this.panel.lockScroll.enableScrollLock(true);
}
} else {
// Re-enable the page scrollbars.

13
lib/yui/build/moodle-core-lockscroll/moodle-core-lockscroll-debug.js vendored
View File

@ -48,14 +48,25 @@ Y.namespace('M.core').LockScroll = Y.Base.create('lockScroll', Y.Plugin.Base, []
* the body to ensure that premature disabling does not occur.
*
* @method enableScrollLock
* @param {Boolean} forceOnSmallWindow Whether to enable the scroll lock, even for small window sizes.
* @chainable
*/
enableScrollLock: function() {
enableScrollLock: function(forceOnSmallWindow) {
if (this.isActive()) {
Y.log('LockScroll already active. Ignoring enable request', 'warn', 'moodle-core-lockscroll');
return;
}
var 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)) {
Y.log('Dialogue height smaller than window height. Ignoring enable request.', 'warn', 'moodle-core-lockscroll');
return;
}
Y.log('Enabling LockScroll.', 'debug', 'moodle-core-lockscroll');
this._enabled = true;
var body = Y.one(Y.config.doc.body);

2
lib/yui/build/moodle-core-lockscroll/moodle-core-lockscroll-min.js vendored
View File

@ -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(){if(this.isActive())return;this._enabled=!0;var t=e.one(e.config.doc.body);t.addClass("lockscroll");var n=parseInt(t.getAttribute("data-activeScrollLocks"),10)||0,r=n+1;return t.setAttribute("data-activeScrollLocks",r),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.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);i.addClass("lockscroll");var s=parseInt(i.getAttribute("data-activeScrollLocks"),10)||0,o=s+1;return i.setAttribute("data-activeScrollLocks",o),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.setAttribute("data-activeScrollLocks",n-1)}return this},isActive:function(){return this._enabled}},{NS:"lockScroll",ATTRS:{}})},"@VERSION@",{requires:["plugin","base-build"]});

12
lib/yui/build/moodle-core-lockscroll/moodle-core-lockscroll.js vendored
View File

@ -48,13 +48,23 @@ Y.namespace('M.core').LockScroll = Y.Base.create('lockScroll', Y.Plugin.Base, []
* the body to ensure that premature disabling does not occur.
*
* @method enableScrollLock
* @param {Boolean} forceOnSmallWindow Whether to enable the scroll lock, even for small window sizes.
* @chainable
*/
enableScrollLock: function() {
enableScrollLock: function(forceOnSmallWindow) {
if (this.isActive()) {
return;
}
var 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)) {
return;
}
this._enabled = true;
var body = Y.one(Y.config.doc.body);

7
lib/yui/build/moodle-core-notification-dialogue/moodle-core-notification-dialogue-debug.js vendored
View File

@ -326,12 +326,15 @@ Y.extend(DIALOGUE, Y.Panel, {
header = this.headerNode,
content = this.bodyNode;
result = DIALOGUE.superclass.show.call(this);
// Lock scroll if the plugin is present.
if (this.lockScroll) {
this.lockScroll.enableScrollLock();
// 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());
}
result = DIALOGUE.superclass.show.call(this);
if (header && header !== '') {
header.focus();
} else if (content && content !== '') {

4
lib/yui/build/moodle-core-notification-dialogue/moodle-core-notification-dialogue-min.js vendored
View File

File diff suppressed because one or more lines are too long

7
lib/yui/build/moodle-core-notification-dialogue/moodle-core-notification-dialogue.js vendored
View File

@ -326,12 +326,15 @@ Y.extend(DIALOGUE, Y.Panel, {
header = this.headerNode,
content = this.bodyNode;
result = DIALOGUE.superclass.show.call(this);
// Lock scroll if the plugin is present.
if (this.lockScroll) {
this.lockScroll.enableScrollLock();
// 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());
}
result = DIALOGUE.superclass.show.call(this);
if (header && header !== '') {
header.focus();
} else if (content && content !== '') {

2
lib/yui/src/chooserdialogue/js/chooserdialogue.js vendored
View File

@ -219,7 +219,7 @@ Y.extend(CHOOSERDIALOGUE, Y.Base, {
if (newheight > this.get('minheight')) {
// Disable the page scrollbars.
if (this.panel.lockScroll && !this.panel.lockScroll.isActive()) {
this.panel.lockScroll.enableScrollLock();
this.panel.lockScroll.enableScrollLock(true);
}
} else {
// Re-enable the page scrollbars.

13
lib/yui/src/lockscroll/js/lockscroll.js vendored
View File

@ -46,14 +46,25 @@ Y.namespace('M.core').LockScroll = Y.Base.create('lockScroll', Y.Plugin.Base, []
* the body to ensure that premature disabling does not occur.
*
* @method enableScrollLock
* @param {Boolean} forceOnSmallWindow Whether to enable the scroll lock, even for small window sizes.
* @chainable
*/
enableScrollLock: function() {
enableScrollLock: function(forceOnSmallWindow) {
if (this.isActive()) {
Y.log('LockScroll already active. Ignoring enable request', 'warn', 'moodle-core-lockscroll');
return;
}
var 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)) {
Y.log('Dialogue height smaller than window height. Ignoring enable request.', 'warn', 'moodle-core-lockscroll');
return;
}
Y.log('Enabling LockScroll.', 'debug', 'moodle-core-lockscroll');
this._enabled = true;
var body = Y.one(Y.config.doc.body);

7
lib/yui/src/notification/js/dialogue.js vendored
View File

@ -295,12 +295,15 @@ Y.extend(DIALOGUE, Y.Panel, {
header = this.headerNode,
content = this.bodyNode;
result = DIALOGUE.superclass.show.call(this);
// Lock scroll if the plugin is present.
if (this.lockScroll) {
this.lockScroll.enableScrollLock();
// 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());
}
result = DIALOGUE.superclass.show.call(this);
if (header && header !== '') {
header.focus();
} else if (content && content !== '') {