src/redakcja/static/js/wiki/view_gallery.js

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