MDL-30899 moodle-core-notification Adding focus to non modal windows
[moodle.git] / blocks / community / yui / imagegallery / imagegallery.js
CommitLineData
20e033bd 1YUI.add('moodle-block_community-imagegallery', function(Y) {
2
3 var IMAGEGALLERYNAME = 'blocks_community_imagegallery';
4
5 var IMAGEGALLERY = function() {
6 IMAGEGALLERY.superclass.constructor.apply(this, arguments);
7 };
8
9 Y.extend(IMAGEGALLERY, Y.Base, {
10
11 event:null,
12 previousevent:null,
13 nextevent:null,
789819a9
DM
14 panelevent:null,
15 panel:null, //all the images boxes
20e033bd 16 imageidnumbers: [],
17 imageloadingevent: null,
1418e911 18 loadingimage: null,
20e033bd 19
20 initializer : function(params) {
21
1418e911 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);
28
789819a9 29 // Create the div for panel.
20e033bd 30 var objBody = Y.one(document.body);
789819a9
DM
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);
20e033bd 35
789819a9
DM
36 /// Create the panel.
37 this.panel = new M.core.dialogue({
20e033bd 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 });
44
789819a9
DM
45 this.panel.render();
46 this.panel.hide();
5dbfbacc 47
20e033bd 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];
5dbfbacc 52 this.imageidnumbers[imageid] = this.get('imagenumbers')[i];
20e033bd 53 Y.one('#image-'+imageid).on('click', this.show, this, imageid, 1);
54 }
55
56 },
57
58 show : function (e, imageid, screennumber) {
59
60 if (this.imageloadingevent != null) {
61 this.imageloadingevent.detach();
62 }
5dbfbacc 63
20e033bd 64 var url = this.get('huburl') + "/local/hub/webservice/download.php?courseid="
5dbfbacc 65 + imageid + "&filetype=screenshot&imagewidth=original&screenshotnumber=" + screennumber;
20e033bd 66
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'));
75
1418e911 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%');
81
20e033bd 82 var windowheight = e.target.get('winHeight');
83 var windowwidth = e.target.get('winWidth');
84
85 var maxheight = windowheight - 150;
86
87 //load the title + link to next image
789819a9 88 var paneltitle = Y.one('#imagetitleoverlay');
20e033bd 89 var previousimagelink = "<div id=\"previousarrow\" class=\"imagearrow\">←</div>";
90 var nextimagelink = "<div id=\"nextarrow\" class=\"imagearrow\">→</div>";
5dbfbacc 91
789819a9
DM
92 // Need to load the images in the panel.
93 var panel = Y.one('#imageoverlay');
94 panel.setContent('');
5dbfbacc 95
789819a9 96 panel.append(Y.Node.create('<div style="text-align:center"><img id=\"imagetodisplay\" src="' + url
20e033bd 97 + '" style="max-height:' + maxheight + 'px;"></div>'));
789819a9
DM
98 this.panel.destroy();
99 this.panel = new M.core.dialogue({
729c1151
DM
100 headerContent:previousimagelink + '<div id=\"imagenumber\" class=\"imagetitle\"><h1> Image '
101 + screennumber + ' / ' + this.imageidnumbers[imageid] + ' </h1></div>' + nextimagelink,
20e033bd 102 bodyContent:Y.one('#imageoverlay').get('innerHTML'),
103 visible: false, //by default it is not displayed
104 lightbox : false,
429d09ea 105 zIndex:100
20e033bd 106 });
789819a9
DM
107 this.panel.render();
108 this.panel.hide(); //show the panel
109 this.panel.set("centered", true);
20e033bd 110
789819a9 111 e.halt(); // we are going to attach a new 'hide panel' event to the body,
20e033bd 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.
115
1418e911 116 //once the image is loaded, update display
429d09ea 117 this.imageloadingevent = Y.one('#imagetodisplay').on('load', function(e, url){
1418e911 118 //hide the loading image
119 Y.one('#hubloadingimage').setStyle('display', 'none');
120
121 //display the screenshot
429d09ea 122 var screenshot = new Image();
123 screenshot.src = url;
124
789819a9
DM
125 var panelwidth = windowwidth - 100;
126 if(panelwidth > screenshot.width) {
127 panelwidth = screenshot.width;
429d09ea 128 }
5dbfbacc 129
789819a9
DM
130 this.panel.set('width', panelwidth);
131 this.panel.set("centered", true);
132 this.panel.show();
1418e911 133
f068cac1
DM
134 // Focus on the close button
135 this.panel.get('buttons').header[0].focus();
136
429d09ea 137 }, this, url);
20e033bd 138
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 }
147
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);
151
789819a9 152 // We add a new event on the body in order to hide the panel for the next click.
20e033bd 153 this.event = Y.one(document.body).on('click', this.hide, this);
789819a9
DM
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);
20e033bd 156
789819a9 157 this.panel.on('visibleChange',function(e){
20e033bd 158 if(e.newVal == 0){
159 this.get('maskNode').remove()
160 }
161 }, this);
162 },
163
164 hide : function (e) {
165
166 // remove the mask
167 this.get('maskNode').remove();
168
1418e911 169 //hide the loading image
170 Y.one('#hubloadingimage').setStyle('display', 'none');
171
789819a9 172 this.panel.hide(); //hide the panel
20e033bd 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 }
789819a9
DM
178 if (this.panelevent != null) {
179 this.panelevent.detach(); //we need to detach the panel hide event
20e033bd 180 //Note: it would work without but create js warning everytime
181 //we click on the body
182 }
183 }
184
185 }, {
186 NAME : IMAGEGALLERYNAME,
187 ATTRS : {
188 imageids: {},
189 imagenumbers: {},
190 huburl: {}
191 }
192 });
193
194 M.blocks_community = M.blocks_community || {};
195 M.blocks_community.init_imagegallery = function(params) {
196 return new IMAGEGALLERY(params);
197 }
198
199}, '@VERSION@', {
789819a9 200 requires:['base','node', 'moodle-core-notification']
5dbfbacc 201});