platforma/static/js/wiki/scan_gallery.js

   1 (function($){
   2
   3     function normalizeNumber(number, length){
   4         // Numer strony musi być pomiędzy 1 a najwyższym numerem
   5         var pageCount = length;
   6         pageNumber = parseInt(pageNumber, 10);
   7
   8         if (!pageNumber ||
   9         pageNumber == NaN ||
  10         pageNumber == Infinity ||
  11         pageNumber == -Infinity ||
  12         pageNumber < 1)
  13             return 1;
  14
  15         if (pageNumber > pageCount)
  16             return pageCount;
  17
  18         return pageNumber;
  19     }
  20
  21     function bounds(galleryWidth, galleryHeight, imageWidth, imageHeight){
  22         return {
  23             maxX: 0,
  24             maxY: 0,
  25             minX: galleryWidth - imageWidth,
  26             minY: galleryHeight - imageHeight
  27         }
  28     };
  29
  30     function normalizePosition(x, y, galleryWidth, galleryHeight, imageWidth, imageHeight){
  31         var b = bounds(galleryWidth, galleryHeight, imageWidth, imageHeight);
  32         return {
  33             x: Math.min(b.maxX, Math.max(b.minX, x)),
  34             y: Math.min(b.maxY, Math.max(b.minY, y))
  35         }
  36     };
  37
  38     function fixImageSize(){
  39
  40     }
  41
  42     /*
  43      * Perspective
  44      */
  45     function ScanGalleryPerspective(doc, callback){
  46         var self = this;
  47
  48                 this.perspective_id = '';
  49                 this.doc = doc;
  50
  51         this.dimensions = {};
  52         this.zoomFactor = 1;
  53         this.$element = $("#side-gallery");
  54         this.$numberInput = $('.page-number', this.$element);
  55
  56         // ...
  57         var origin = {};
  58         var imageOrigin = {};
  59
  60         this.$image = $('.gallery-image img', this.$element).attr('unselectable', 'on');
  61
  62         // button handlers
  63         this.$numberInput.change(function(event){
  64             event.preventDefault();
  65             self.setPage($(this).val());
  66         });
  67
  68         $('.previous-page', this.$element).click(function(){
  69             self.setPage(self.$numberInput.val() - 1);
  70         });
  71
  72         $('.nexy-page', this.$element).click(function(){
  73             self.setPage(self.$numberInput.val() + 1);
  74         });
  75
  76         $('.zoom-in', this.$element).click(function(){
  77             self.alterZoom(0.2);
  78         });
  79
  80         $('.zoom-out', this.$element).click(function(){
  81             self.alterZoom(-0.2);
  82         });
  83
  84         $(window).resize(function(){
  85             self.dimensions.galleryWidth = self.$image.parent().width();
  86             self.dimensions.galleryHeight = self.$image.parent().height();
  87         });
  88
  89         $('.gallery-image img', this.$element).load(function(){
  90                         console.load("Image loaded.")
  91             self._resizeImage();
  92         });
  93     };
  94
  95     ScanGalleryPerspective.prototype = new $.wiki.Perspective();
  96
  97     ScanGalleryPerspective.prototype._resizeImage = function(){
  98         var $img = this.$image;
  99
 100         $img.css({
 101             width: null,
 102             height: null
 103         });
 104
 105         this.dimensions = {
 106             width: $img.width() * this.zoomFactor,
 107             height: $img.height() * this.zoomFactor,
 108             originWidth: $img.width(),
 109             originHeight: $img.height(),
 110             galleryWidth: $img.parent().width(),
 111             galleryHeight: $img.parent().height()
 112         };
 113
 114         if (!(this.dimensions.width && this.dimensions.height)) {
 115             setTimeout(function(){
 116                 $img.load();
 117             }, 100);
 118         }
 119
 120         var position = normalizePosition($img.position().left, $img.position().top, this.dimensions.galleryWidth, this.dimensions.galleryHeight, this.dimensions.width, this.dimensions.height);
 121
 122         $img.css({
 123             left: position.x,
 124             top: position.y,
 125             width: $img.width() * this.zoomFactor,
 126             height: $img.height() * this.zoomFactor
 127         });
 128     };
 129
 130     ScanGalleryPerspective.prototype.setPage = function(newPage){
 131         newPage = normalizeNumber(newPage, this.$image.length);
 132         this.$numberInput.val(newPage);
 133         $('.gallery-image img', this.$element).attr('src', this.doc.galleryImages[newPage - 1]);
 134     };
 135
 136     ScanGalleryPerspective.prototype.alterZoom = function(delta){
 137         var zoomFactor = this.zoomFactor + delta;
 138         if (zoomFactor < 0.2)
 139             zoomFactor = 0.2;
 140         if (zoomFactor > 2)
 141             zoomFactor = 2;
 142         this.setZoom(zoomFactor);
 143     };
 144
 145     ScanGalleryPerspective.prototype.setZoom = function(factor){
 146         this.zoomFactor = factor;
 147
 148         this.dimensions.width = this.dimensions.originWidth * this.zoomFactor;
 149         this.dimensions.height = this.dimensions.originHeight * this.zoomFactor;
 150
 151         var position = normalizePosition(this.$image.position().left, this.$image.position().top, this.dimensions.galleryWidth, this.dimensions.galleryHeight, this.dimensions.width, this.dimensions.height);
 152
 153         this.$image.css({
 154             width: this.dimensions.width,
 155             height: this.dimensions.height,
 156             left: position.x,
 157             top: position.y
 158         });
 159     };
 160
 161     /*
 162      * Loading gallery
 163      */
 164     ScanGalleryPerspective.prototype.onEnter = function(success, failure){
 165                 var self = this;
 166
 167         $.wiki.Perspective.prototype.onEnter.call(this);
 168
 169                 this.doc.refreshGallery({
 170                         success: function(doc, data) {
 171                                 self.$image.show();
 172                                 $('.error_message', self.$element).hide();
 173                                 success();
 174                         },
 175                         failure: function(doc, message) {
 176                                 self.$image.hide();
 177                                 $('.error_message', self.$element).show().html(message);
 178                                 failure();
 179                         }
 180                 });
 181     };
 182
 183     $.wiki.ScanGalleryPerspective = ScanGalleryPerspective;
 184 })(jQuery);
 185
 186
 187 /*
 188
 189
 190  function onMouseMove(event){
 191
 192
 193  var position = normalizePosition(event.clientX - origin.x + imageOrigin.left, event.clientY - origin.y + imageOrigin.top, imageDimensions.galleryWidth, imageDimensions.galleryHeight, imageDimensions.width, imageDimensions.height);
 194
 195
 196  image.css({
 197
 198
 199  position: 'absolute',
 200
 201
 202  top: position.y,
 203
 204
 205  left: position.x
 206
 207
 208  });
 209
 210
 211  return false;
 212
 213
 214  }
 215
 216
 217  function onMouseUp(event){
 218
 219
 220  $(document).unbind('mousemove.gallery').unbind('mouseup.gallery');
 221
 222
 223  return false;
 224
 225
 226  }
 227
 228
 229  image.bind('mousedown', function(event){
 230
 231
 232  origin = {
 233
 234
 235  x: event.clientX,
 236
 237
 238  y: event.clientY
 239
 240
 241  };
 242
 243
 244  imageOrigin = image.position();
 245
 246
 247  $(document).bind('mousemove.gallery', onMouseMove).bind('mouseup.gallery', onMouseUp);
 248
 249
 250  return false;
 251
 252
 253  });
 254
 255
 256  if (url) {
 257
 258
 259  updateGallery(url);
 260
 261
 262  }
 263
 264
 265  }*/
 266
 267