project/static/js/views/gallery.js

   1 /*global View render_template panels */
   2 var ImageGalleryView = View.extend({
   3   _className: 'ImageGalleryView',
   4   element: null,
   5   model: null,
   6   currentPage: -1,
   7   pageZoom: 1.0,
   8   template: 'image-gallery-view-template',
   9
  10   init: function(element, model, parent, template)
  11   {
  12     console.log("init for gallery");
  13     this._super(element, model, template);
  14     this.parent = parent;
  15
  16     this.model
  17       .addObserver(this, 'data', this.modelDataChanged.bind(this))
  18       .addObserver(this, 'state', this.modelStateChanged.bind(this));
  19
  20     //$('.image-gallery-view', this.element).html(this.model.get('data'));
  21     this.modelStateChanged('state', this.model.get('state'));
  22     this.model.load();
  23   },
  24
  25   modelDataChanged: function(property, value)
  26   {
  27     if( property == 'data')
  28     {
  29         this.render();
  30         this.gotoPage(this.currentPage);
  31     }
  32   },
  33
  34   gotoPage: function(index)
  35   {
  36      if (index < 0)
  37          index = 0;
  38
  39      var n = this.$pages.length;
  40      if (index >= n) index = n-1;
  41
  42      if( (this.currentPage == index) )
  43          return;
  44
  45      var cpage = this.$currentPage();
  46
  47      if(cpage) {
  48          var offset = this.pageViewOffset(cpage);
  49          this.cleanPage(cpage);
  50      }
  51
  52      this.currentPage = index;
  53
  54      cpage = this.$currentPage()
  55      this.renderImage(cpage);
  56
  57      if(offset) {
  58          cpage.css({top: offset.y, left: offset.x});
  59      }
  60
  61      var self = this;
  62      $('img', cpage).bind('load', function() {
  63         if(offset)
  64              self.setPageViewOffset(cpage, offset);
  65      });
  66
  67      cpage.show();
  68
  69      if(this.currentPage == n-1)
  70           this.$nextButton.attr('disabled', 'disabled');
  71      else
  72           this.$nextButton.removeAttr('disabled');
  73
  74       if(this.currentPage == 0)
  75           this.$prevButton.attr('disabled', 'disabled');
  76       else
  77           this.$prevButton.removeAttr('disabled');
  78
  79       this.$pageInput.val( (this.currentPage+1) );
  80   },
  81
  82   modelStateChanged: function(property, value) {
  83     if (value == 'loading') {
  84       this.parent.freeze('Ładowanie...');
  85     } else {
  86       this.parent.unfreeze();
  87     }
  88   },
  89
  90   $currentPage: function() {
  91       if(this.currentPage >= 0 && this.currentPage < this.$pages.length)
  92           return $(this.$pages[this.currentPage]);
  93       else
  94           return undefined;
  95   },
  96
  97   cleanPage: function($page) {
  98     $page.hide();
  99     $('img', $page).unbind();
 100
 101     $page.empty();
 102
 103     this.setPageViewOffset($page, {x:0, y:0});
 104   },
 105
 106   pageDragStart: function(event)
 107   {
 108       this.dragStart = {x: event.clientX, y: event.clientY};
 109       $(window).bind('mousemove.imagedrag', this.pageDrag.bind(this));
 110       $(window).bind('mouseup.imagedrag', this.pageDragStop.bind(this));
 111
 112       this.$currentPage().css('cursor', 'move');
 113
 114       return false;
 115   },
 116
 117   pageDrag: function(event)
 118   {
 119       if(!this.dragStart) return;
 120
 121       var delta = {
 122            x: this.dragStart.x - event.clientX,
 123            y: this.dragStart.y - event.clientY };
 124
 125       var offset = this.pageViewOffset( $(this.$pages[this.currentPage]) );
 126       offset.x -= delta.x;
 127       offset.y -= delta.y;
 128       this.setPageViewOffset( $(this.$pages[this.currentPage]), offset);
 129
 130       this.dragStart = {x: event.clientX, y: event.clientY };
 131       return false;
 132   },
 133
 134   pageDragStop: function(event) {
 135       this.$currentPage().css('cursor', 'auto');
 136
 137       this.dragStart = undefined;
 138       $(window).unbind('mousemove.imagedrag');
 139       $(window).unbind('mouseup.imagedrag');
 140
 141       return false;
 142   },
 143
 144   pageViewOffset: function($page) {
 145       var left = parseInt($page.css('left'));
 146       var top = parseInt($page.css('top'));
 147
 148       return {x: left, y: top};
 149   },
 150
 151   setPageViewOffset: function($page, offset) {
 152       // check if the image will be actually visible
 153       // and correct
 154       var MARGIN = 30;
 155
 156
 157       var vp_width = this.$pageListRoot.width();
 158       var vp_height = this.$pageListRoot.height();
 159
 160       var width = $page.outerWidth();
 161       var height = $page.outerHeight();
 162
 163       // console.log(offset, vp_width, vp_height, width, height);
 164       if( offset.x+width-MARGIN < 0 ) {
 165         // console.log('too much on the left', offset.x, -width)
 166         offset.x = -width+MARGIN;
 167       }
 168
 169       // too much on the right
 170       if( offset.x > vp_width-MARGIN) {
 171           offset.x = vp_width-MARGIN;
 172           // console.log('too much on the right', offset.x, vp_width, width)
 173       }
 174
 175       if( offset.y+height-MARGIN < 0)
 176         offset.y = -height+MARGIN;
 177
 178       if( offset.y > vp_height-MARGIN)
 179           offset.y = vp_height-MARGIN;
 180
 181       $page.css({left: offset.x, top: offset.y});
 182   },
 183
 184   renderImage: function(target)
 185   {
 186       var source = target.attr('ui:model');
 187       var orig_width = parseInt(target.attr('ui:width'));
 188       var orig_height = parseInt(target.attr('ui:height'));
 189
 190       target.html('<img src="' + source
 191            + '" width="' + Math.floor(orig_width * this.pageZoom)
 192            + '" height="' + Math.floor(orig_height * this.pageZoom)
 193            + '" />');
 194
 195       $('img', target).
 196         css({
 197             'user-select': 'none',
 198             '-webkit-user-select': 'none',
 199             '-khtml-user-select': 'none',
 200             '-moz-user-select': 'none'
 201         }).
 202         attr('unselectable', 'on').
 203         mousedown(this.pageDragStart.bind(this));
 204   },
 205
 206   render: function()
 207   {
 208       console.log('rendering:', this._className);
 209
 210       /* first unbind all */
 211       if(this.$nextButton) this.$nextButton.unbind();
 212       if(this.$prevButton) this.$prevButton.unbind();
 213       if(this.$jumpButton) this.$jumpButton.unbind();
 214       if(this.$pageInput) this.$pageInput.unbind();
 215
 216       if(this.$zoomInButton) this.$zoomInButton.unbind();
 217       if(this.$zoomOutButton) this.$zoomOutButton.unbind();
 218       if(this.$zoomResetButton) this.$zoomResetButton.unbind();
 219
 220       /* render */
 221       this.element.html(render_template(this.template, this));
 222
 223       /* fetch important parts */
 224       this.$pageListRoot = $('.image-gallery-page-list', this.element);
 225       this.$pages = $('.image-gallery-page-container', this.$pageListRoot);
 226
 227       this.$nextButton = $('.image-gallery-next-button', this.element);
 228       this.$prevButton = $('.image-gallery-prev-button', this.element);
 229       this.$pageInput = $('.image-gallery-current-page', this.element);
 230
 231       // this.$zoomSelect = $('.image-gallery-current-zoom', this.element);
 232       this.$zoomInButton = $('.image-gallery-zoom-in', this.element);
 233       this.$zoomOutButton = $('.image-gallery-zoom-out', this.element);
 234       this.$zoomResetButton = $('.image-gallery-zoom-reset', this.element);
 235
 236       /* re-bind events */
 237       this.$nextButton.click( this.nextPage.bind(this) );
 238       this.$prevButton.click( this.prevPage.bind(this) );
 239       this.$pageInput.change( this.jumpToPage.bind(this) );
 240
 241       // this.$zoomSelect.change( this.zoomChanged.bind(this) );
 242       this.$zoomInButton.click( this.zoomInOneStep.bind(this) );
 243       this.$zoomOutButton.click( this.zoomOutOneStep.bind(this) );
 244       this.$zoomResetButton.click( this.zoomReset.bind(this) );
 245
 246       this.gotoPage(this.currentPage);
 247       this.changePageZoom(this.pageZoom);
 248   },
 249
 250   jumpToPage: function() {
 251         this.gotoPage(parseInt(this.$pageInput.val())-1);
 252   },
 253
 254   nextPage: function() {
 255       this.gotoPage(this.currentPage + 1);
 256   },
 257
 258   prevPage: function() {
 259       this.gotoPage(this.currentPage - 1);
 260   },
 261
 262   zoomReset: function() {
 263       this.changePageZoom(1.0);
 264   },
 265
 266   zoomInOneStep: function() {
 267       var zoom = this.pageZoom + 0.1;
 268       if(zoom > 3.0) zoom = 3.0;
 269       this.changePageZoom(zoom);
 270   },
 271
 272   zoomOutOneStep: function() {
 273       var zoom = this.pageZoom - 0.1;
 274       if(zoom < 0.3) zoom = 0.3;
 275       this.changePageZoom(zoom);
 276   },
 277
 278   changePageZoom: function(value) {
 279       var current = this.$currentPage();
 280
 281       if(!current) return;
 282
 283       var alpha = value/this.pageZoom;
 284       this.pageZoom = value;
 285
 286       var nwidth = current.attr('ui:width') * this.pageZoom;
 287       var nheight = current.attr('ui:height') * this.pageZoom;
 288       var off_top = parseInt(current.css('top'));
 289       var off_left = parseInt(current.css('left'));
 290
 291       var vpx = this.$pageListRoot.width() * 0.5;
 292       var vpy = this.$pageListRoot.height() * 0.5;
 293
 294       var new_off_left = vpx - alpha*(vpx-off_left);
 295       var new_off_top = vpy - alpha*(vpy-off_top);
 296
 297       $('img', current).attr('width', nwidth);
 298       $('img', current).attr('height', nheight);
 299
 300       this.setPageViewOffset(current, {
 301           y: new_off_top, x: new_off_left
 302       });
 303
 304       // this.$zoomSelect.val(this.pageZoom);
 305       // console.log('Zoom is now', this.pageZoom);
 306   },
 307
 308   dispose: function()
 309   {
 310       console.log("Disposing gallery.");
 311       this.model.removeObserver(this);
 312       this._super();
 313   }
 314 });
 315
 316 // Register view
 317 panels['gallery'] = ImageGalleryView;