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