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