L-electron-Rare/moodle
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

MDL-41188 javascript: Change full screen dialogue to position: fixed

Browse Source 
This fixes all sorts of bother with the fullscreen dialogues. It also means that
you don't lose your scroll position in the document when the full screen popup
opens/closes.

It prevents several bugs on mobile where the dialogue could get scrolled off
the page (and handles orientation changes better).

Contains one other tiny tweak to make the close button on the dialogue
a bit bigger so it's easier to click (only for fullscreen).
This commit is contained in:
Damyon Wiese
2013-09-12 14:18:12 +08:00
parent c1f10ffb24
commit 2a808cef8f
7 changed files with 65 additions and 141 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lib/yui/build/moodle-core-notification-dialogue/moodle-core-notification-dialogue-debug.js
Vendored
+10 -41
View File
@@ -40,10 +40,8 @@ var DIALOGUE_NAME = 'Moodle dialogue',
DIALOGUE,
DIALOGUE_FULLSCREEN_CLASS = DIALOGUE_PREFIX + '-fullscreen',
DIALOGUE_HIDDEN_CLASS = DIALOGUE_PREFIX + '-hidden',
DIALOGUE_MODAL_CLASS = 'yui3-widget-modal',
DIALOGUE_SELECTOR =' [role=dialog]',
MENUBAR_SELECTOR = '[role=menubar]',
NOSCROLLING_CLASS = 'no-scrolling';
MENUBAR_SELECTOR = '[role=menubar]';
/**
* A re-usable dialogue box with Moodle classes applied.
@@ -189,38 +187,6 @@ Y.extend(DIALOGUE, Y.Panel, {
return 0;
},
/**
* Enable or disable document scrolling (see if there are any modal or fullscreen popups).
*
* @method toggleDocumentScrolling
* @param Boolean scroll - If true, allow document scrolling.
* @return void
*/
toggleDocumentScrolling : function() {
var windowroot = Y.one(Y.config.doc.body),
scroll = true,
search;
search = '.' + DIALOGUE_FULLSCREEN_CLASS + ', .' + DIALOGUE_MODAL_CLASS;
Y.all(search).each(function (node) {
if (!node.hasClass(DIALOGUE_HIDDEN_CLASS)) {
scroll = false;
}
});
if (Y.UA.ie > 0) {
// Remember the previous value:
windowroot = Y.one('html');
}
if (scroll) {
if (windowroot.hasClass(NOSCROLLING_CLASS)) {
windowroot.removeClass(NOSCROLLING_CLASS);
}
} else {
windowroot.addClass(NOSCROLLING_CLASS);
}
},
/**
* Event listener for the visibility changed event.
*
@@ -257,7 +223,6 @@ Y.extend(DIALOGUE, Y.Panel, {
if (this.get('center') && !e.prevVal && e.newVal) {
this.centerDialogue();
}
this.toggleDocumentScrolling();
}
},
/**
@@ -277,17 +242,21 @@ Y.extend(DIALOGUE, Y.Panel, {
// Size and position the fullscreen dialog.
bb.addClass(DIALOGUE_PREFIX+'-fullscreen');
bb.setStyles({'left' : null, 'top' : null, 'width' : null, 'height' : null});
bb.addClass(DIALOGUE_FULLSCREEN_CLASS);
bb.setStyles({'left' : null,
'top' : null,
'width' : null,
'height' : null,
'right' : null,
'bottom' : null});
content = Y.one('#' + this.get('id') + ' .' + CSS.BODY);
content.setStyle('overflow', 'auto');
} else {
if (this.get('responsive')) {
// We must reset any of the fullscreen changes.
bb.removeClass(DIALOGUE_PREFIX+'-fullscreen')
.setStyles({'overflow' : 'inherit',
'width' : this.get('width'),
bb.removeClass(DIALOGUE_FULLSCREEN_CLASS)
.setStyles({'width' : this.get('width'),
'height' : this.get('height')});
content = Y.one('#' + this.get('id') + ' .' + CSS.BODY);
content.setStyle('overflow', 'inherit');
lib/yui/build/moodle-core-notification-dialogue/moodle-core-notification-dialogue-min.js
Vendored
+1 -1
View File
@@ -1 +1 @@
YUI.add("moodle-core-notification-dialogue",function(e,t){var n,r,i,s,o,u,a,f;n="moodle-dialogue",r="notificationBase",i=0,s="yesLabel",o="noLabel",u="title",a="question",f={BASE:"moodle-dialogue-base",WRAP:"moodle-dialogue-wrap",HEADER:"moodle-dialogue-hd",BODY:"moodle-dialogue-bd",CONTENT:"moodle-dialogue-content",FOOTER:"moodle-dialogue-ft",HIDDEN:"hidden",LIGHTBOX:"moodle-dialogue-lightbox"},M.core=M.core||{};var l="Moodle dialogue",c,h=n+"-fullscreen",p=n+"-hidden",d="yui3-widget-modal",v=" [role=dialog]",m="[role=menubar]",g="no-scrolling";c=function(t){i++;var n="moodle-dialogue-"+i;t.notificationBase=e.Node.create('<div class="'+f.BASE+'">').append(e.Node.create('<div id="'+n+'" role="dialog" aria-labelledby="'+n+'-header-text" class="'+f.WRAP+'"></div>').append(e.Node.create('<div id="'+n+'-header-text" class="'+f.HEADER+' yui3-widget-hd"></div>')).append(e.Node.create('<div class="'+f.BODY+' yui3-widget-bd"></div>')).append(e.Node.create('<div class="'+f.FOOTER+' yui3-widget-ft"></div>'))),e.one(document.body).append(t.notificationBase),t.additionalBaseClass&&t.notificationBase.addClass(t.additionalBaseClass),t.srcNode="#"+n,t.width=t.width||"400px",t.visible=t.visible||!1,t.center=t.centered&&!0,t.centered=!1,t.COUNT=i,t.width==="auto"&&delete t.width,t.lightbox!==!1&&(t.modal=!0),delete t.lightbox,t.closeButton===!1?t.buttons=null:t.buttons=[{section:e.WidgetStdMod.HEADER,classNames:"closebutton",action:function(){this.hide()}}],c.superclass.constructor.apply(this,[t]),t.closeButton!==!1&&this.get("buttons").header[0].setAttribute("title",this.get("closeButtonTitle"))},e.extend(c,e.Panel,{_resizeevent:null,_orientationevent:null,initializer:function(t){var n;this.render(),this.show(),this.after("visibleChange",this.visibilityChanged,this),t.center&&this.centerDialogue(),t.visible||this.hide(),this.set("COUNT",i),n=this.get("boundingBox"),t.extraClasses&&e.Array.each(t.extraClasses,n.addClass,n),t.visible&&this.applyZIndex()},applyZIndex:function(){var t=0,n=this.get("boundingBox"),r=this.get("zIndex");r?n.setStyle("zIndex",r):(e.all(v+", "+m).each(function(e){var n=this.findZIndex(e);n>t&&(t=n)},this),t>0&&n.setStyle("zIndex",(t+1).toString()))},findZIndex:function(e){var t=e.getStyle("zIndex")||e.ancestor().getStyle("zIndex");return t?parseInt(t,10):0},toggleDocumentScrolling:function(){var t=e.one(e.config.doc.body),n=!0,r;r="."+h+", ."+d,e.all(r).each(function(e){e.hasClass(p)||(n=!1)}),e.UA.ie>0&&(t=e.one("html")),n?t.hasClass(g)&&t.removeClass(g):t.addClass(g)},visibilityChanged:function(t){var n;t.attrName==="visible"&&(this.get("maskNode").addClass(f.LIGHTBOX),t.prevVal&&!t.newVal&&(this._resizeevent&&(this._resizeevent.detach(),this._resizeevent=null),this._orientationevent&&(this._orientationevent.detach(),this._orientationevent=null)),!t.prevVal&&t.newVal&&(this.applyZIndex(),this.makeResponsive(),this.shouldResizeFullscreen()||this.get("draggable")&&(n="#"+this.get("id")+" ."+f.HEADER,this.plug(e.Plugin.Drag,{handles:[n]}),e.one(n).setStyle("cursor","move"))),this.get("center")&&!t.prevVal&&t.newVal&&this.centerDialogue(),this.toggleDocumentScrolling())},makeResponsive:function(){var t=this.get("boundingBox"),r;this.shouldResizeFullscreen()?(t.addClass(n+"-fullscreen"),t.setStyles({left:null,top:null,width:null,height:null}),r=e.one("#"+this.get("id")+" ."+f.BODY),r.setStyle("overflow","auto")):this.get("responsive")&&(t.removeClass(n+"-fullscreen").setStyles({overflow:"inherit",width:this.get("width"),height:this.get("height")}),r=e.one("#"+this.get("id")+" ."+f.BODY),r.setStyle("overflow","inherit"))},centerDialogue:function(){var t=this.get("boundingBox"),n=t.hasClass(p),r,i;if(this.shouldResizeFullscreen())return;n&&t.setStyle("top","-1000px").removeClass(p),r=Math.max(Math.round((t.get("winWidth")-t.get("offsetWidth"))/2),15),i=Math.max(Math.round((t.get("winHeight")-t.get("offsetHeight"))/2),15)+e.one(window).get("scrollTop"),t.setStyles({left:r,top:i}),n&&t.addClass(p)},shouldResizeFullscreen:function(){return window===window.parent&&this.get("responsive")&&Math.floor(e.one(document.body).get("winWidth"))<this.get("responsiveWidth")},show:function(){var e=null,t=this.headerNode,n=this.bodyNode;return e=c.superclass.show.call(this),t&&t!==""?t.focus():n&&n!==""&&n.focus(),e}},{NAME:l,CSS_PREFIX:n,ATTRS:{notificationBase:{},lightbox:{validator:e.Lang.isBoolean,value:!0},closeButton:{validator:e.Lang.isBoolean,value:!0},closeButtonTitle:{validator:e.Lang.isString,value:"Close"},center:{validator:e.Lang.isBoolean,value:!0},draggable:{validator:e.Lang.isBoolean,value:!1},COUNT:{value:0},responsive:{validator:e.Lang.isBoolean,value:!0},responsiveWidth:{value:768}}}),M.core.dialogue=c},"@VERSION@",{requires:["base","node","panel","event-key","dd-plugin"]});
YUI.add("moodle-core-notification-dialogue",function(e,t){var n,r,i,s,o,u,a,f;n="moodle-dialogue",r="notificationBase",i=0,s="yesLabel",o="noLabel",u="title",a="question",f={BASE:"moodle-dialogue-base",WRAP:"moodle-dialogue-wrap",HEADER:"moodle-dialogue-hd",BODY:"moodle-dialogue-bd",CONTENT:"moodle-dialogue-content",FOOTER:"moodle-dialogue-ft",HIDDEN:"hidden",LIGHTBOX:"moodle-dialogue-lightbox"},M.core=M.core||{};var l="Moodle dialogue",c,h=n+"-fullscreen",p=n+"-hidden",d=" [role=dialog]",v="[role=menubar]";c=function(t){i++;var n="moodle-dialogue-"+i;t.notificationBase=e.Node.create('<div class="'+f.BASE+'">').append(e.Node.create('<div id="'+n+'" role="dialog" aria-labelledby="'+n+'-header-text" class="'+f.WRAP+'"></div>').append(e.Node.create('<div id="'+n+'-header-text" class="'+f.HEADER+' yui3-widget-hd"></div>')).append(e.Node.create('<div class="'+f.BODY+' yui3-widget-bd"></div>')).append(e.Node.create('<div class="'+f.FOOTER+' yui3-widget-ft"></div>'))),e.one(document.body).append(t.notificationBase),t.additionalBaseClass&&t.notificationBase.addClass(t.additionalBaseClass),t.srcNode="#"+n,t.width=t.width||"400px",t.visible=t.visible||!1,t.center=t.centered&&!0,t.centered=!1,t.COUNT=i,t.width==="auto"&&delete t.width,t.lightbox!==!1&&(t.modal=!0),delete t.lightbox,t.closeButton===!1?t.buttons=null:t.buttons=[{section:e.WidgetStdMod.HEADER,classNames:"closebutton",action:function(){this.hide()}}],c.superclass.constructor.apply(this,[t]),t.closeButton!==!1&&this.get("buttons").header[0].setAttribute("title",this.get("closeButtonTitle"))},e.extend(c,e.Panel,{_resizeevent:null,_orientationevent:null,initializer:function(t){var n;this.render(),this.show(),this.after("visibleChange",this.visibilityChanged,this),t.center&&this.centerDialogue(),t.visible||this.hide(),this.set("COUNT",i),n=this.get("boundingBox"),t.extraClasses&&e.Array.each(t.extraClasses,n.addClass,n),t.visible&&this.applyZIndex()},applyZIndex:function(){var t=0,n=this.get("boundingBox"),r=this.get("zIndex");r?n.setStyle("zIndex",r):(e.all(d+", "+v).each(function(e){var n=this.findZIndex(e);n>t&&(t=n)},this),t>0&&n.setStyle("zIndex",(t+1).toString()))},findZIndex:function(e){var t=e.getStyle("zIndex")||e.ancestor().getStyle("zIndex");return t?parseInt(t,10):0},visibilityChanged:function(t){var n;t.attrName==="visible"&&(this.get("maskNode").addClass(f.LIGHTBOX),t.prevVal&&!t.newVal&&(this._resizeevent&&(this._resizeevent.detach(),this._resizeevent=null),this._orientationevent&&(this._orientationevent.detach(),this._orientationevent=null)),!t.prevVal&&t.newVal&&(this.applyZIndex(),this.makeResponsive(),this.shouldResizeFullscreen()||this.get("draggable")&&(n="#"+this.get("id")+" ."+f.HEADER,this.plug(e.Plugin.Drag,{handles:[n]}),e.one(n).setStyle("cursor","move"))),this.get("center")&&!t.prevVal&&t.newVal&&this.centerDialogue())},makeResponsive:function(){var t=this.get("boundingBox"),n;this.shouldResizeFullscreen()?(t.addClass(h),t.setStyles({left:null,top:null,width:null,height:null,right:null,bottom:null}),n=e.one("#"+this.get("id")+" ."+f.BODY),n.setStyle("overflow","auto")):this.get("responsive")&&(t.removeClass(h).setStyles({width:this.get("width"),height:this.get("height")}),n=e.one("#"+this.get("id")+" ."+f.BODY),n.setStyle("overflow","inherit"))},centerDialogue:function(){var t=this.get("boundingBox"),n=t.hasClass(p),r,i;if(this.shouldResizeFullscreen())return;n&&t.setStyle("top","-1000px").removeClass(p),r=Math.max(Math.round((t.get("winWidth")-t.get("offsetWidth"))/2),15),i=Math.max(Math.round((t.get("winHeight")-t.get("offsetHeight"))/2),15)+e.one(window).get("scrollTop"),t.setStyles({left:r,top:i}),n&&t.addClass(p)},shouldResizeFullscreen:function(){return window===window.parent&&this.get("responsive")&&Math.floor(e.one(document.body).get("winWidth"))<this.get("responsiveWidth")},show:function(){var e=null,t=this.headerNode,n=this.bodyNode;return e=c.superclass.show.call(this),t&&t!==""?t.focus():n&&n!==""&&n.focus(),e}},{NAME:l,CSS_PREFIX:n,ATTRS:{notificationBase:{},lightbox:{validator:e.Lang.isBoolean,value:!0},closeButton:{validator:e.Lang.isBoolean,value:!0},closeButtonTitle:{validator:e.Lang.isString,value:"Close"},center:{validator:e.Lang.isBoolean,value:!0},draggable:{validator:e.Lang.isBoolean,value:!1},COUNT:{value:0},responsive:{validator:e.Lang.isBoolean,value:!0},responsiveWidth:{value:768}}}),M.core.dialogue=c},"@VERSION@",{requires:["base","node","panel","event-key","dd-plugin"]});
lib/yui/build/moodle-core-notification-dialogue/moodle-core-notification-dialogue.js
Vendored
+10 -41
View File
@@ -40,10 +40,8 @@ var DIALOGUE_NAME = 'Moodle dialogue',
DIALOGUE,
DIALOGUE_FULLSCREEN_CLASS = DIALOGUE_PREFIX + '-fullscreen',
DIALOGUE_HIDDEN_CLASS = DIALOGUE_PREFIX + '-hidden',
DIALOGUE_MODAL_CLASS = 'yui3-widget-modal',
DIALOGUE_SELECTOR =' [role=dialog]',
MENUBAR_SELECTOR = '[role=menubar]',
NOSCROLLING_CLASS = 'no-scrolling';
MENUBAR_SELECTOR = '[role=menubar]';
/**
* A re-usable dialogue box with Moodle classes applied.
@@ -189,38 +187,6 @@ Y.extend(DIALOGUE, Y.Panel, {
return 0;
},
/**
* Enable or disable document scrolling (see if there are any modal or fullscreen popups).
*
* @method toggleDocumentScrolling
* @param Boolean scroll - If true, allow document scrolling.
* @return void
*/
toggleDocumentScrolling : function() {
var windowroot = Y.one(Y.config.doc.body),
scroll = true,
search;
search = '.' + DIALOGUE_FULLSCREEN_CLASS + ', .' + DIALOGUE_MODAL_CLASS;
Y.all(search).each(function (node) {
if (!node.hasClass(DIALOGUE_HIDDEN_CLASS)) {
scroll = false;
}
});
if (Y.UA.ie > 0) {
// Remember the previous value:
windowroot = Y.one('html');
}
if (scroll) {
if (windowroot.hasClass(NOSCROLLING_CLASS)) {
windowroot.removeClass(NOSCROLLING_CLASS);
}
} else {
windowroot.addClass(NOSCROLLING_CLASS);
}
},
/**
* Event listener for the visibility changed event.
*
@@ -257,7 +223,6 @@ Y.extend(DIALOGUE, Y.Panel, {
if (this.get('center') && !e.prevVal && e.newVal) {
this.centerDialogue();
}
this.toggleDocumentScrolling();
}
},
/**
@@ -277,17 +242,21 @@ Y.extend(DIALOGUE, Y.Panel, {
// Size and position the fullscreen dialog.
bb.addClass(DIALOGUE_PREFIX+'-fullscreen');
bb.setStyles({'left' : null, 'top' : null, 'width' : null, 'height' : null});
bb.addClass(DIALOGUE_FULLSCREEN_CLASS);
bb.setStyles({'left' : null,
'top' : null,
'width' : null,
'height' : null,
'right' : null,
'bottom' : null});
content = Y.one('#' + this.get('id') + ' .' + CSS.BODY);
content.setStyle('overflow', 'auto');
} else {
if (this.get('responsive')) {
// We must reset any of the fullscreen changes.
bb.removeClass(DIALOGUE_PREFIX+'-fullscreen')
.setStyles({'overflow' : 'inherit',
'width' : this.get('width'),
bb.removeClass(DIALOGUE_FULLSCREEN_CLASS)
.setStyles({'width' : this.get('width'),
'height' : this.get('height')});
content = Y.one('#' + this.get('id') + ' .' + CSS.BODY);
content.setStyle('overflow', 'inherit');
lib/yui/src/notification/js/dialogue.js
Vendored
+10 -41
View File
@@ -9,10 +9,8 @@ var DIALOGUE_NAME = 'Moodle dialogue',
DIALOGUE,
DIALOGUE_FULLSCREEN_CLASS = DIALOGUE_PREFIX + '-fullscreen',
DIALOGUE_HIDDEN_CLASS = DIALOGUE_PREFIX + '-hidden',
DIALOGUE_MODAL_CLASS = 'yui3-widget-modal',
DIALOGUE_SELECTOR =' [role=dialog]',
MENUBAR_SELECTOR = '[role=menubar]',
NOSCROLLING_CLASS = 'no-scrolling';
MENUBAR_SELECTOR = '[role=menubar]';
/**
* A re-usable dialogue box with Moodle classes applied.
@@ -158,38 +156,6 @@ Y.extend(DIALOGUE, Y.Panel, {
return 0;
},
/**
* Enable or disable document scrolling (see if there are any modal or fullscreen popups).
*
* @method toggleDocumentScrolling
* @param Boolean scroll - If true, allow document scrolling.
* @return void
*/
toggleDocumentScrolling : function() {
var windowroot = Y.one(Y.config.doc.body),
scroll = true,
search;
search = '.' + DIALOGUE_FULLSCREEN_CLASS + ', .' + DIALOGUE_MODAL_CLASS;
Y.all(search).each(function (node) {
if (!node.hasClass(DIALOGUE_HIDDEN_CLASS)) {
scroll = false;
}
});
if (Y.UA.ie > 0) {
// Remember the previous value:
windowroot = Y.one('html');
}
if (scroll) {
if (windowroot.hasClass(NOSCROLLING_CLASS)) {
windowroot.removeClass(NOSCROLLING_CLASS);
}
} else {
windowroot.addClass(NOSCROLLING_CLASS);
}
},
/**
* Event listener for the visibility changed event.
*
@@ -226,7 +192,6 @@ Y.extend(DIALOGUE, Y.Panel, {
if (this.get('center') && !e.prevVal && e.newVal) {
this.centerDialogue();
}
this.toggleDocumentScrolling();
}
},
/**
@@ -246,17 +211,21 @@ Y.extend(DIALOGUE, Y.Panel, {
// Size and position the fullscreen dialog.
bb.addClass(DIALOGUE_PREFIX+'-fullscreen');
bb.setStyles({'left' : null, 'top' : null, 'width' : null, 'height' : null});
bb.addClass(DIALOGUE_FULLSCREEN_CLASS);
bb.setStyles({'left' : null,
'top' : null,
'width' : null,
'height' : null,
'right' : null,
'bottom' : null});
content = Y.one('#' + this.get('id') + ' .' + CSS.BODY);
content.setStyle('overflow', 'auto');
} else {
if (this.get('responsive')) {
// We must reset any of the fullscreen changes.
bb.removeClass(DIALOGUE_PREFIX+'-fullscreen')
.setStyles({'overflow' : 'inherit',
'width' : this.get('width'),
bb.removeClass(DIALOGUE_FULLSCREEN_CLASS)
.setStyles({'width' : this.get('width'),
'height' : this.get('height')});
content = Y.one('#' + this.get('id') + ' .' + CSS.BODY);
content.setStyle('overflow', 'inherit');
theme/base/style/core.css
+17 -8
View File
@@ -928,13 +928,19 @@ sup {vertical-align: super;}
.no-scrolling { overflow: hidden; }
.moodle-dialogue-fullscreen {
.moodle-dialogue-base .moodle-dialogue-fullscreen {
left: 0px;
top: 0px;
width: 100%;
height: 100%;
overflow: auto;
right: 0px;
bottom: -50px;
position: fixed;
}
.moodle-dialogue-base .moodle-dialogue-fullscreen .closebutton {
width: 28px;
height: 16px;
background-size: 100%;
}
.moodle-dialogue-base .moodle-dialogue-wrap {
margin-top:-3px;
@@ -1010,10 +1016,13 @@ sup {vertical-align: super;}
font-size: 16px;
}
.moodle-dialogue-base .moodle-dialogue-fullscreen,
.moodle-dialogue-fullscreen .moodle-dialogue-content {
width: 100%;
height: 100%;
.moodle-dialogue-base .moodle-dialogue-fullscreen .moodle-dialogue-content {
overflow: auto;
position: absolute;
top: 0px;
bottom: 50px;
left: 0px;
right: 0px;
margin: 0px;
border: 0px;
}
theme/bootstrapbase/less/moodle/core.less
+16 -8
View File
@@ -1390,12 +1390,17 @@ audio.mediaplugin_html5audio {
.no-scrolling {
overflow: hidden;
}
.moodle-dialogue-fullscreen {
.moodle-dialogue-base .moodle-dialogue-fullscreen {
left: 0px;
top: 0px;
width: 100%;
height: 100%;
overflow: auto;
right: 0px;
bottom: -50px;
position: fixed;
}
.moodle-dialogue-base .moodle-dialogue-fullscreen .closebutton {
width: 28px;
height: 16px;
background-size: 100%;
}
.moodle-dialogue-base .moodle-dialogue {
padding: 0;
@@ -1471,10 +1476,13 @@ audio.mediaplugin_html5audio {
font-size: 16px;
}
.moodle-dialogue-base .moodle-dialogue-fullscreen,
.moodle-dialogue-fullscreen .moodle-dialogue-content {
width: 100%;
height: 100%;
.moodle-dialogue-base .moodle-dialogue-fullscreen .moodle-dialogue-content {
overflow: auto;
position: absolute;
top: 0px;
bottom: 50px;
left: 0px;
right: 0px;
margin: 0px;
border: 0px;
}
theme/bootstrapbase/style/moodle.css
+1 -1
View File
File diff suppressed because one or more lines are too long