MDL-30899 moodle-core-notification Adding focus to non modal windows
[moodle.git] / blocks / community / yui / imagegallery / imagegallery.js
1 YUI.add('moodle-block_community-imagegallery', function(Y) {
3     var IMAGEGALLERYNAME = 'blocks_community_imagegallery';
5     var IMAGEGALLERY = function() {
6         IMAGEGALLERY.superclass.constructor.apply(this, arguments);
7     };
9     Y.extend(IMAGEGALLERY, Y.Base, {
11         event:null,
12         previousevent:null,
13         nextevent:null,
14         panelevent:null,
15         panel:null, //all the images boxes
16         imageidnumbers: [],
17         imageloadingevent: null,
18         loadingimage: null,
20         initializer : function(params) {
22             //create the loading image
23             var objBody = Y.one(document.body);
24             this.loadingimage = Y.Node.create('<div id="hubloadingimage" class="hiddenoverlay">'
25                 +'<img src=\'' + M.cfg.wwwroot +'/pix/i/loading.gif\'>'
26                 +'</div>');
27             objBody.append(this.loadingimage);
29             // Create the div for panel.
30             var objBody = Y.one(document.body);
31             var paneltitle = Y.Node.create('<div id="imagetitleoverlay" class="hiddenoverlay"></div>');
32             objBody.append(paneltitle);
33             var panel = Y.Node.create('<div id="imageoverlay" class="hiddenoverlay"></div>');
34             objBody.append(panel);
36             /// Create the panel.
37             this.panel = new M.core.dialogue({
38                 headerContent:Y.one('#imagetitleoverlay').get('innerHTML'),
39                 bodyContent:Y.one('#imageoverlay').get('innerHTML'),
40                 visible: false, //by default it is not displayed
41                 lightbox : false,
42                 zIndex:100
43             });
45             this.panel.render();
46             this.panel.hide();
48             //attach a show event on the image divs (<tag id='image-X'>)
49             for (var i=0;i<this.get('imageids').length;i++)
50             {
51                 var imageid = this.get('imageids')[i];
52                 this.imageidnumbers[imageid] = this.get('imagenumbers')[i];
53                 Y.one('#image-'+imageid).on('click', this.show, this, imageid, 1);
54             }
56         },
58         show : function (e, imageid, screennumber) {
60             if (this.imageloadingevent != null) {
61                 this.imageloadingevent.detach();
62             }
64             var url = this.get('huburl') + "/local/hub/webservice/download.php?courseid="
65             + imageid + "&filetype=screenshot&imagewidth=original&screenshotnumber=" + screennumber;
67             /// set the mask
68             if (this.get('maskNode')) {
69                 this.get('maskNode').remove();
70             }
71             var objBody = Y.one(document.body);
72             var mask = Y.Node.create('<div id="ss-mask"><!-- --></div>');
73             objBody.prepend(mask);
74             this.set('maskNode', Y.one('#ss-mask'));
76             //display loading image
77             Y.one('#hubloadingimage').setStyle('display', 'block');
78             Y.one('#hubloadingimage').setStyle("position", 'fixed');
79             Y.one('#hubloadingimage').setStyle("top", '50%');
80             Y.one('#hubloadingimage').setStyle("left", '50%');
82             var windowheight = e.target.get('winHeight');
83             var windowwidth = e.target.get('winWidth');
85             var maxheight = windowheight - 150;
87             //load the title + link to next image
88             var paneltitle = Y.one('#imagetitleoverlay');
89             var previousimagelink = "<div id=\"previousarrow\" class=\"imagearrow\">←</div>";
90             var nextimagelink = "<div id=\"nextarrow\" class=\"imagearrow\">→</div>";
92             // Need to load the images in the panel.
93             var panel = Y.one('#imageoverlay');
94             panel.setContent('');
96             panel.append(Y.Node.create('<div style="text-align:center"><img id=\"imagetodisplay\" src="' + url
97                 + '" style="max-height:' + maxheight + 'px;"></div>'));
98             this.panel.destroy();
99             this.panel = new M.core.dialogue({
100                 headerContent:previousimagelink + '<div id=\"imagenumber\" class=\"imagetitle\"><h1> Image '
101                 + screennumber + ' / ' + this.imageidnumbers[imageid] + ' </h1></div>' + nextimagelink,
102                 bodyContent:Y.one('#imageoverlay').get('innerHTML'),
103                 visible: false, //by default it is not displayed
104                 lightbox : false,
105                 zIndex:100
106             });
107             this.panel.render();
108             this.panel.hide(); //show the panel
109             this.panel.set("centered", true);
111             e.halt(); // we are going to attach a new 'hide panel' event to the body,
112             // because javascript always propagate event to parent tag,
113             // we need to tell Yahoo to stop to call the event on parent tag
114             // otherwise the hide event will be call right away.
116             //once the image is loaded, update display
117             this.imageloadingevent = Y.one('#imagetodisplay').on('load', function(e, url){
118                 //hide the loading image
119                 Y.one('#hubloadingimage').setStyle('display', 'none');
121                 //display the screenshot
122                 var screenshot = new Image();
123                 screenshot.src = url;
125                 var panelwidth = windowwidth - 100;
126                 if(panelwidth > screenshot.width) {
127                     panelwidth = screenshot.width;
128                 }
130                 this.panel.set('width', panelwidth);
131                 this.panel.set("centered", true);
132                 this.panel.show();
134                 // Focus on the close button
135                 this.panel.get('buttons').header[0].focus();
137             }, this, url);
139             var previousnumber = screennumber - 1;
140             var nextnumber = screennumber + 1;
141             if (previousnumber == 0) {
142                 previousnumber = this.imageidnumbers[imageid];
143             }
144             if (nextnumber > this.imageidnumbers[imageid]) {
145                 nextnumber = 1;
146             }
148             Y.one('#previousarrow').on('click', this.show, this, imageid, previousnumber);
149             Y.one('#nextarrow').on('click', this.show, this, imageid, nextnumber);
150             Y.one('#imagenumber').on('click', this.show, this, imageid, nextnumber);
152             // We add a new event on the body in order to hide the panel for the next click.
153             this.event = Y.one(document.body).on('click', this.hide, this);
154             // We add a new event on the panel in order to hide the panel for the next click (touch device).
155             this.panelevent = Y.one("#imageoverlay").on('click', this.hide, this);
157             this.panel.on('visibleChange',function(e){
158                 if(e.newVal == 0){
159                     this.get('maskNode').remove()
160                 }
161             }, this);
162         },
164         hide : function (e) {
166             // remove the mask
167             this.get('maskNode').remove();
169             //hide the loading image
170             Y.one('#hubloadingimage').setStyle('display', 'none');
172             this.panel.hide(); //hide the panel
173             if (this.event != null) {
174                 this.event.detach(); //we need to detach the body hide event
175             //Note: it would work without but create js warning everytime
176             //we click on the body
177             }
178             if (this.panelevent != null) {
179                 this.panelevent.detach(); //we need to detach the panel hide event
180             //Note: it would work without but create js warning everytime
181             //we click on the body
182             }
183         }
185     }, {
186         NAME : IMAGEGALLERYNAME,
187         ATTRS : {
188             imageids: {},
189             imagenumbers: {},
190             huburl: {}
191         }
192     });
194     M.blocks_community = M.blocks_community || {};
195     M.blocks_community.init_imagegallery = function(params) {
196         return new IMAGEGALLERY(params);
197     }
199 }, '@VERSION@', {
200     requires:['base','node', 'moodle-core-notification']
201 });