MDL-30899 block_community Changing from overlay to panel references
This commit is contained in:
@@ -213,6 +213,7 @@
|
||||
background-color:#F6F6F6;
|
||||
border:1px solid #CCCCCC;
|
||||
overflow: auto;
|
||||
padding: 7px 6px;
|
||||
}
|
||||
|
||||
#page-blocks-community-communitycourse .moodle-dialogue-base .moodle-dialogue-bd {
|
||||
@@ -222,5 +223,5 @@
|
||||
|
||||
#page-blocks-community-communitycourse .moodle-dialogue-base .closebutton {
|
||||
margin-top:4px;
|
||||
width:30px;
|
||||
}
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
+16
-16
@@ -9,8 +9,8 @@ YUI.add('moodle-block_community-comments', function(Y) {
|
||||
Y.extend(COMMENTS, Y.Base, {
|
||||
|
||||
event:null,
|
||||
overlayevent:null,
|
||||
overlays: [], //all the comment boxes
|
||||
panelevent: null,
|
||||
panels: [], //all the comment boxes
|
||||
|
||||
initializer : function(params) {
|
||||
|
||||
@@ -18,7 +18,7 @@ YUI.add('moodle-block_community-comments', function(Y) {
|
||||
for (var i=0;i<this.get('commentids').length;i++)
|
||||
{
|
||||
var commentid = this.get('commentids')[i];
|
||||
this.overlays[commentid] = new M.core.dialogue({
|
||||
this.panels[commentid] = new M.core.dialogue({
|
||||
headerContent:Y.one('#commentoverlay-'+commentid+' .commenttitle').get('innerHTML'),
|
||||
bodyContent:Y.one('#commentoverlay-'+commentid).get('innerHTML'),
|
||||
visible: false, //by default it is not displayed
|
||||
@@ -26,9 +26,9 @@ YUI.add('moodle-block_community-comments', function(Y) {
|
||||
zIndex:100
|
||||
});
|
||||
|
||||
this.overlays[commentid].get('contentBox').one('.commenttitle').remove();
|
||||
this.overlays[commentid].render();
|
||||
this.overlays[commentid].hide();
|
||||
this.panels[commentid].get('contentBox').one('.commenttitle').remove();
|
||||
this.panels[commentid].render();
|
||||
this.panels[commentid].hide();
|
||||
|
||||
Y.one('#comments-'+commentid).on('click', this.show, this, commentid);
|
||||
}
|
||||
@@ -37,34 +37,34 @@ YUI.add('moodle-block_community-comments', function(Y) {
|
||||
|
||||
show : function (e, commentid) {
|
||||
|
||||
//hide all overlays
|
||||
// Hide all panels.
|
||||
for (var i=0;i<this.get('commentids').length;i++)
|
||||
{
|
||||
this.hide(e, this.get('commentids')[i]);
|
||||
}
|
||||
|
||||
this.overlays[commentid].show(); //show the overlay
|
||||
this.panels[commentid].show(); //show the panel
|
||||
|
||||
e.halt(); // we are going to attach a new 'hide overlay' event to the body,
|
||||
e.halt(); // we are going to attach a new 'hide panel' event to the body,
|
||||
// because javascript always propagate event to parent tag,
|
||||
// we need to tell Yahoo to stop to call the event on parent tag
|
||||
// otherwise the hide event will be call right away.
|
||||
|
||||
//we add a new event on the body in order to hide the overlay for the next click
|
||||
// We add a new event on the body in order to hide the panel for the next click.
|
||||
this.event = Y.one(document.body).on('click', this.hide, this, commentid);
|
||||
//we add a new event on the overlay in order to hide the overlay for the next click (touch device)
|
||||
this.overlayevent = Y.one("#commentoverlay-"+commentid).on('click', this.hide, this, commentid);
|
||||
// We add a new event on the panel in order to hide the panel for the next click (touch device).
|
||||
this.panelevent = Y.one("#commentoverlay-"+commentid).on('click', this.hide, this, commentid);
|
||||
},
|
||||
|
||||
hide : function (e, commentid) {
|
||||
this.overlays[commentid].hide(); //hide the overlay
|
||||
this.panels[commentid].hide(); //hide the panel
|
||||
if (this.event != null) {
|
||||
this.event.detach(); //we need to detach the body hide event
|
||||
//Note: it would work without but create js warning everytime
|
||||
//we click on the body
|
||||
}
|
||||
if (this.overlayevent != null) {
|
||||
this.overlayevent.detach(); //we need to detach the overlay hide event
|
||||
if (this.panelevent != null) {
|
||||
this.panelevent.detach(); //we need to detach the panel hide event
|
||||
//Note: it would work without but create js warning everytime
|
||||
//we click on the body
|
||||
}
|
||||
@@ -84,5 +84,5 @@ YUI.add('moodle-block_community-comments', function(Y) {
|
||||
}
|
||||
|
||||
}, '@VERSION@', {
|
||||
requires:['base','overlay', 'moodle-core-notification']
|
||||
requires:['base', 'moodle-core-notification']
|
||||
});
|
||||
|
||||
+36
-36
@@ -11,8 +11,8 @@ YUI.add('moodle-block_community-imagegallery', function(Y) {
|
||||
event:null,
|
||||
previousevent:null,
|
||||
nextevent:null,
|
||||
overlayevent:null,
|
||||
overlay:null, //all the comment boxes
|
||||
panelevent:null,
|
||||
panel:null, //all the images boxes
|
||||
imageidnumbers: [],
|
||||
imageloadingevent: null,
|
||||
loadingimage: null,
|
||||
@@ -26,15 +26,15 @@ YUI.add('moodle-block_community-imagegallery', function(Y) {
|
||||
+'</div>');
|
||||
objBody.append(this.loadingimage);
|
||||
|
||||
/// create the div for overlay
|
||||
// Create the div for panel.
|
||||
var objBody = Y.one(document.body);
|
||||
var overlaytitle = Y.Node.create('<div id="imagetitleoverlay" class="hiddenoverlay"></div>');
|
||||
objBody.append(overlaytitle);
|
||||
var overlay = Y.Node.create('<div id="imageoverlay" class="hiddenoverlay"></div>');
|
||||
objBody.append(overlay);
|
||||
var paneltitle = Y.Node.create('<div id="imagetitleoverlay" class="hiddenoverlay"></div>');
|
||||
objBody.append(paneltitle);
|
||||
var panel = Y.Node.create('<div id="imageoverlay" class="hiddenoverlay"></div>');
|
||||
objBody.append(panel);
|
||||
|
||||
/// create the overlay
|
||||
this.overlay = new M.core.dialogue({
|
||||
/// Create the panel.
|
||||
this.panel = new M.core.dialogue({
|
||||
headerContent:Y.one('#imagetitleoverlay').get('innerHTML'),
|
||||
bodyContent:Y.one('#imageoverlay').get('innerHTML'),
|
||||
visible: false, //by default it is not displayed
|
||||
@@ -42,8 +42,8 @@ YUI.add('moodle-block_community-imagegallery', function(Y) {
|
||||
zIndex:100
|
||||
});
|
||||
|
||||
this.overlay.render();
|
||||
this.overlay.hide();
|
||||
this.panel.render();
|
||||
this.panel.hide();
|
||||
|
||||
//attach a show event on the image divs (<tag id='image-X'>)
|
||||
for (var i=0;i<this.get('imageids').length;i++)
|
||||
@@ -85,19 +85,19 @@ YUI.add('moodle-block_community-imagegallery', function(Y) {
|
||||
var maxheight = windowheight - 150;
|
||||
|
||||
//load the title + link to next image
|
||||
var overlaytitle = Y.one('#imagetitleoverlay');
|
||||
var paneltitle = Y.one('#imagetitleoverlay');
|
||||
var previousimagelink = "<div id=\"previousarrow\" class=\"imagearrow\">←</div>";
|
||||
var nextimagelink = "<div id=\"nextarrow\" class=\"imagearrow\">→</div>";
|
||||
|
||||
/// need to load the images in the overlay
|
||||
var overlay = Y.one('#imageoverlay');
|
||||
overlay.setContent('');
|
||||
// Need to load the images in the panel.
|
||||
var panel = Y.one('#imageoverlay');
|
||||
panel.setContent('');
|
||||
|
||||
|
||||
overlay.append(Y.Node.create('<div style="text-align:center"><img id=\"imagetodisplay\" src="' + url
|
||||
panel.append(Y.Node.create('<div style="text-align:center"><img id=\"imagetodisplay\" src="' + url
|
||||
+ '" style="max-height:' + maxheight + 'px;"></div>'));
|
||||
this.overlay.destroy();
|
||||
this.overlay = new M.core.dialogue({
|
||||
this.panel.destroy();
|
||||
this.panel = new M.core.dialogue({
|
||||
headerContent:previousimagelink + '<div id=\"imagenumber\" class=\"imagetitle\"> Image '
|
||||
+ screennumber + ' / ' + this.imageidnumbers[imageid] + ' </div>' + nextimagelink,
|
||||
bodyContent:Y.one('#imageoverlay').get('innerHTML'),
|
||||
@@ -105,11 +105,11 @@ YUI.add('moodle-block_community-imagegallery', function(Y) {
|
||||
lightbox : false,
|
||||
zIndex:100
|
||||
});
|
||||
this.overlay.render();
|
||||
this.overlay.hide(); //show the overlay
|
||||
this.overlay.set("centered", true);
|
||||
this.panel.render();
|
||||
this.panel.hide(); //show the panel
|
||||
this.panel.set("centered", true);
|
||||
|
||||
e.halt(); // we are going to attach a new 'hide overlay' event to the body,
|
||||
e.halt(); // we are going to attach a new 'hide panel' event to the body,
|
||||
// because javascript always propagate event to parent tag,
|
||||
// we need to tell Yahoo to stop to call the event on parent tag
|
||||
// otherwise the hide event will be call right away.
|
||||
@@ -123,14 +123,14 @@ YUI.add('moodle-block_community-imagegallery', function(Y) {
|
||||
var screenshot = new Image();
|
||||
screenshot.src = url;
|
||||
|
||||
var overlaywidth = windowwidth - 100;
|
||||
if(overlaywidth > screenshot.width) {
|
||||
overlaywidth = screenshot.width;
|
||||
var panelwidth = windowwidth - 100;
|
||||
if(panelwidth > screenshot.width) {
|
||||
panelwidth = screenshot.width;
|
||||
}
|
||||
|
||||
this.overlay.set('width', overlaywidth);
|
||||
this.overlay.set("centered", true);
|
||||
this.overlay.show();
|
||||
this.panel.set('width', panelwidth);
|
||||
this.panel.set("centered", true);
|
||||
this.panel.show();
|
||||
|
||||
}, this, url);
|
||||
|
||||
@@ -147,12 +147,12 @@ YUI.add('moodle-block_community-imagegallery', function(Y) {
|
||||
Y.one('#nextarrow').on('click', this.show, this, imageid, nextnumber);
|
||||
Y.one('#imagenumber').on('click', this.show, this, imageid, nextnumber);
|
||||
|
||||
//we add a new event on the body in order to hide the overlay for the next click
|
||||
// We add a new event on the body in order to hide the panel for the next click.
|
||||
this.event = Y.one(document.body).on('click', this.hide, this);
|
||||
//we add a new event on the overlay in order to hide the overlay for the next click (touch device)
|
||||
this.overlayevent = Y.one("#imageoverlay").on('click', this.hide, this);
|
||||
// We add a new event on the panel in order to hide the panel for the next click (touch device).
|
||||
this.panelevent = Y.one("#imageoverlay").on('click', this.hide, this);
|
||||
|
||||
this.overlay.on('visibleChange',function(e){
|
||||
this.panel.on('visibleChange',function(e){
|
||||
if(e.newVal == 0){
|
||||
this.get('maskNode').remove()
|
||||
}
|
||||
@@ -167,14 +167,14 @@ YUI.add('moodle-block_community-imagegallery', function(Y) {
|
||||
//hide the loading image
|
||||
Y.one('#hubloadingimage').setStyle('display', 'none');
|
||||
|
||||
this.overlay.hide(); //hide the overlay
|
||||
this.panel.hide(); //hide the panel
|
||||
if (this.event != null) {
|
||||
this.event.detach(); //we need to detach the body hide event
|
||||
//Note: it would work without but create js warning everytime
|
||||
//we click on the body
|
||||
}
|
||||
if (this.overlayevent != null) {
|
||||
this.overlayevent.detach(); //we need to detach the overlay hide event
|
||||
if (this.panelevent != null) {
|
||||
this.panelevent.detach(); //we need to detach the panel hide event
|
||||
//Note: it would work without but create js warning everytime
|
||||
//we click on the body
|
||||
}
|
||||
@@ -195,5 +195,5 @@ YUI.add('moodle-block_community-imagegallery', function(Y) {
|
||||
}
|
||||
|
||||
}, '@VERSION@', {
|
||||
requires:['base','node','overlay', 'moodle-core-notification']
|
||||
requires:['base','node', 'moodle-core-notification']
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user