[Summary view] [Print] [Text view]

   1  YUI.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,
  14          panelevent:null,
  15          panel:null, //all the images boxes
  16          imageidnumbers: [],
  17          imageloadingevent: null,
  18          loadingimage: null,
  19  
  20          initializer : function(params) {
  21  
  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  
  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);
  35  
  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                  modal: false,
  42                  zIndex:100
  43              });
  44  
  45              this.panel.render();
  46              this.panel.hide();
  47  
  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              }
  55  
  56          },
  57  
  58          show : function (e, imageid, screennumber) {
  59  
  60              if (this.imageloadingevent != null) {
  61                  this.imageloadingevent.detach();
  62              }
  63  
  64              var url = this.get('huburl') + "/local/hub/webservice/download.php?courseid="
  65              + imageid + "&filetype=screenshot&imagewidth=original&screenshotnumber=" + screennumber;
  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  
  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  
  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
  88              var paneltitle = Y.one('#imagetitleoverlay');
  89              var previousimagelink = "<div id=\"previousarrow\" class=\"imagearrow\">←</div>";
  90              var nextimagelink = "<div id=\"nextarrow\" class=\"imagearrow\">→</div>";
  91  
  92              // Need to load the images in the panel.
  93              var panel = Y.one('#imageoverlay');
  94              panel.setContent('');
  95  
  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                  modal: false,
 105                  zIndex:100,
 106                  closeButtonTitle: this.get('closeButtonTitle')
 107              });
 108              this.panel.render();
 109              this.panel.hide(); //show the panel
 110              this.panel.set("centered", true);
 111  
 112              e.halt(); // we are going to attach a new 'hide panel' event to the body,
 113              // because javascript always propagate event to parent tag,
 114              // we need to tell Yahoo to stop to call the event on parent tag
 115              // otherwise the hide event will be call right away.
 116  
 117              //once the image is loaded, update display
 118              this.imageloadingevent = Y.one('#imagetodisplay').on('load', function(e, url){
 119                  //hide the loading image
 120                  Y.one('#hubloadingimage').setStyle('display', 'none');
 121  
 122                  //display the screenshot
 123                  var screenshot = new Image();
 124                  screenshot.src = url;
 125  
 126                  var panelwidth = windowwidth - 100;
 127                  if(panelwidth > screenshot.width) {
 128                      panelwidth = screenshot.width;
 129                  }
 130  
 131                  this.panel.set('width', panelwidth);
 132                  this.panel.set("centered", true);
 133                  this.panel.show();
 134  
 135                  // Focus on the close button
 136                  this.panel.get('buttons').header[0].focus();
 137  
 138              }, this, url);
 139  
 140              var previousnumber = screennumber - 1;
 141              var nextnumber = screennumber + 1;
 142              if (previousnumber == 0) {
 143                  previousnumber = this.imageidnumbers[imageid];
 144              }
 145              if (nextnumber > this.imageidnumbers[imageid]) {
 146                  nextnumber = 1;
 147              }
 148  
 149              Y.one('#previousarrow').on('click', this.show, this, imageid, previousnumber);
 150              Y.one('#nextarrow').on('click', this.show, this, imageid, nextnumber);
 151              Y.one('#imagenumber').on('click', this.show, this, imageid, nextnumber);
 152  
 153              // We add a new event on the body in order to hide the panel for the next click.
 154              this.event = Y.one(document.body).on('click', this.hide, this);
 155              // We add a new event on the panel in order to hide the panel for the next click (touch device).
 156              this.panelevent = Y.one("#imageoverlay").on('click', this.hide, this);
 157  
 158              this.panel.on('visibleChange',function(e){
 159                  if(e.newVal == 0){
 160                      this.get('maskNode').remove()
 161                  }
 162              }, this);
 163          },
 164  
 165          hide : function (e) {
 166  
 167              // remove the mask
 168              this.get('maskNode').remove();
 169  
 170              //hide the loading image
 171              Y.one('#hubloadingimage').setStyle('display', 'none');
 172  
 173              this.panel.hide(); //hide the panel
 174              if (this.event != null) {
 175                  this.event.detach(); //we need to detach the body hide event
 176              //Note: it would work without but create js warning everytime
 177              //we click on the body
 178              }
 179              if (this.panelevent != null) {
 180                  this.panelevent.detach(); //we need to detach the panel hide event
 181              //Note: it would work without but create js warning everytime
 182              //we click on the body
 183              }
 184          }
 185  
 186      }, {
 187          NAME : IMAGEGALLERYNAME,
 188          ATTRS : {
 189              imageids: {},
 190              imagenumbers: {},
 191              huburl: {},
 192              closeButtonTitle : {
 193                  validator : Y.Lang.isString,
 194                  value : 'Close'
 195              }
 196          }
 197      });
 198  
 199      M.blocks_community = M.blocks_community || {};
 200      M.blocks_community.init_imagegallery = function(params) {
 201          return new IMAGEGALLERY(params);
 202      }
 203  
 204  }, '@VERSION@', {
 205      requires:['base','node', 'moodle-core-notification']
 206  });