From 6eabdb6d8c7e952d44bca00159d55728cd3a9ee4 Mon Sep 17 00:00:00 2001
From: David Monllao <davidm@moodle.com>
Date: Mon, 10 Sep 2012 15:23:25 +0800
Subject: [PATCH] MDL-30899 block_community Changing from overlay to panel
 references

---
 blocks/community/styles.css                   |  5 +-
 blocks/community/yui/comments/comments.js     | 32 ++++-----
 .../yui/imagegallery/imagegallery.js          | 72 +++++++++----------
 3 files changed, 55 insertions(+), 54 deletions(-)

diff --git a/blocks/community/styles.css b/blocks/community/styles.css
index 97e6e1d171e..28d6162bf9f 100644
--- a/blocks/community/styles.css
+++ b/blocks/community/styles.css
@@ -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;
-}
\ No newline at end of file
+    margin-right: 4px;
+}
diff --git a/blocks/community/yui/comments/comments.js b/blocks/community/yui/comments/comments.js
index c32b75ec3af..784d4b1b975 100644
--- a/blocks/community/yui/comments/comments.js
+++ b/blocks/community/yui/comments/comments.js
@@ -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']
 });
diff --git a/blocks/community/yui/imagegallery/imagegallery.js b/blocks/community/yui/imagegallery/imagegallery.js
index e7072aaee87..5b9f9ce0e61 100644
--- a/blocks/community/yui/imagegallery/imagegallery.js
+++ b/blocks/community/yui/imagegallery/imagegallery.js
@@ -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']
 });