platforma/static/js/wiki/scan_gallery.js

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