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.vsplitbar = 'GALERIA';
  51
  52         options.callback = function(){
  53             var self = this;
  54
  55             this.dimensions = {};
  56             this.zoomFactor = 1;
  57             if (this.config().page == undefined)
  58                 this.config().page = CurrentDocument.galleryStart;
  59             this.$element = $("#side-gallery");
  60             this.$numberInput = $('.page-number', this.$element);
  61
  62             // ...
  63             var origin = {};
  64             var imageOrigin = {};
  65
  66             this.$image = $('.gallery-image img', this.$element).attr('unselectable', 'on');
  67
  68             // button handlers
  69             this.$numberInput.change(function(event){
  70                 event.preventDefault();
  71                 self.setPage($(this).val());
  72             });
  73
  74             $('.start-page', this.$element).click(function(){
  75                 self.setPage(CurrentDocument.galleryStart);
  76             });
  77
  78             $('.previous-page', this.$element).click(function(){
  79                 self.setPage(parseInt(self.$numberInput.val(),10) - 1);
  80             });
  81
  82             $('.next-page', this.$element).click(function(){
  83                 self.setPage(parseInt(self.$numberInput.val(),10) + 1);
  84             });
  85
  86             $('.zoom-in', this.$element).click(function(){
  87                 self.alterZoom(0.2);
  88             });
  89
  90             $('.zoom-out', this.$element).click(function(){
  91                 self.alterZoom((-0.2));
  92             });
  93
  94             $('.ctrl-gallery-setstart', this.$element).click(function(e) {
  95                 e.preventDefault();
  96                 CurrentDocument.setGalleryStart(self.config().page);
  97             });
  98             $('.ctrl-gallery-edit', this.$element).click(function(e) {
  99                 e.preventDefault();
 100                 CurrentDocument.openGalleryEdit();
 101             });
 102             $('.ctrl-gallery-refresh', this.$element).click(function(e) {
 103                 e.preventDefault();
 104                 self.refreshGallery();
 105             });
 106             $('#gallery-chooser').on('show.bs.modal', function (event) {
 107                 var modal = $(this);
 108                 var datalist = modal.find('.modal-body');
 109                 datalist.html('');
 110                 self.doc.withGalleryList(function(galleries) {
 111                     console.log(galleries);
 112                     $.each(galleries, (i, gallery) => {
 113                         item = $('<div class="form-check"><label class="form-check-label"><input class="form-check-input" type="radio" name="gallery"></label></div>');
 114                         $('input', item).val(gallery);
 115                         $('label', item).append(gallery);
 116                         if (gallery == self.doc.galleryLink) {
 117                             item.addClass('text-primary')
 118                             $('input', item).prop('checked', true);
 119                         }
 120                         item.appendTo(datalist);
 121                     });
 122                     item = $('<div class="form-check"><label class="form-check-label"><input class="ctrl-none form-check-input" type="radio" name="gallery"><em class="text-secondary">brak</em></label></div>');
 123                     item.appendTo(datalist);
 124                     item = $('<div class="form-check"><label class="form-check-label"><input class="ctrl-new form-check-input" type="radio" name="gallery"><input class="ctrl-name form-control" placeholder="nowa"></label></div>');
 125                     item.appendTo(datalist);
 126                 });
 127             })
 128             $('#gallery-chooser .ctrl-ok').on('click', function (event) {
 129                 let item = $('#gallery-chooser :checked');
 130                 let name;
 131                 if (item.hasClass('ctrl-none')) {
 132                     name = '';
 133                 }
 134                 else if (item.hasClass('ctrl-new')) {
 135                     name = $('#gallery-chooser .ctrl-name').val();
 136                 } else {
 137                     name = item.val();
 138                 }
 139
 140                 self.doc.setGallery(name);
 141                 $('#gallery-chooser').modal('hide');
 142                 self.refreshGallery(function() {
 143                     self.setPage(1);
 144                 });
 145             });
 146
 147             $(window).resize(function(){
 148                 self.dimensions.galleryWidth = self.$image.parent().width();
 149                 self.dimensions.galleryHeight = self.$image.parent().height();
 150             });
 151
 152             this.$image.load(function(){
 153                 console.log("Image loaded.")
 154                 self._resizeImage();
 155             }).bind('mousedown', function() {
 156                                 self.imageMoveStart.apply(self, arguments);
 157                         });
 158
 159
 160
 161                         old_callback.call(this);
 162         };
 163
 164         $.wiki.SidebarPerspective.call(this, options);
 165     };
 166
 167     ScanGalleryPerspective.prototype = new $.wiki.SidebarPerspective();
 168
 169     ScanGalleryPerspective.prototype._resizeImage = function(){
 170         var $img = this.$image;
 171
 172         $img.css({
 173             width: '',
 174             height: ''
 175         });
 176
 177         this.dimensions = {
 178             width: $img.width() * this.zoomFactor,
 179             height: $img.height() * this.zoomFactor,
 180             originWidth: $img.width(),
 181             originHeight: $img.height(),
 182                     galleryWidth: $img.parent().width(),
 183             galleryHeight: $img.parent().height()
 184         };
 185
 186         if (!(this.dimensions.width && this.dimensions.height)) {
 187             setTimeout(function(){
 188                 $img.load();
 189             }, 100);
 190         }
 191
 192         var position = normalizePosition($img.position().left, $img.position().top, this.dimensions.galleryWidth, this.dimensions.galleryHeight, this.dimensions.width, this.dimensions.height);
 193
 194         $img.css({
 195             left: position.x,
 196             top: position.y,
 197             width: $img.width() * this.zoomFactor,
 198             height: $img.height() * this.zoomFactor
 199         });
 200     };
 201
 202     ScanGalleryPerspective.prototype.setPage = function(newPage){
 203         newPage = normalizeNumber(newPage, this.doc.galleryImages.length);
 204         this.$numberInput.val(newPage);
 205                 this.config().page = newPage;
 206         $('.gallery-image img', this.$element).attr('src', this.doc.galleryImages[newPage - 1].url);
 207     };
 208
 209     ScanGalleryPerspective.prototype.alterZoom = function(delta){
 210         var zoomFactor = this.zoomFactor + delta;
 211         if (zoomFactor < 0.2)
 212             zoomFactor = 0.2;
 213         if (zoomFactor > 2)
 214             zoomFactor = 2;
 215         this.setZoom(zoomFactor);
 216     };
 217
 218     ScanGalleryPerspective.prototype.setZoom = function(factor){
 219         this.zoomFactor = factor;
 220
 221         this.dimensions.width = this.dimensions.originWidth * this.zoomFactor;
 222         this.dimensions.height = this.dimensions.originHeight * this.zoomFactor;
 223
 224         // var position = normalizePosition(this.$image.position().left, this.$image.position().top, this.dimensions.galleryWidth, this.dimensions.galleryHeight, this.dimensions.width, this.dimensions.height);
 225
 226                 this._resizeImage();
 227     };
 228
 229         /*
 230          * Movement
 231          */
 232         ScanGalleryPerspective.prototype.imageMoved = function(event){
 233                 event.preventDefault();
 234
 235                 // origin is where the drag started
 236                 // imageOrigin is where the drag started on the image
 237
 238                 var newX = event.clientX - this.origin.x + this.imageOrigin.left;
 239                 var newY = event.clientY - this.origin.y + this.imageOrigin.top;
 240
 241                 var position = normalizePosition(newX, newY, this.dimensions.galleryWidth, this.dimensions.galleryHeight, this.dimensions.width, this.dimensions.height);
 242
 243                 this.$image.css({
 244                         left: position.x,
 245                         top: position.y,
 246                 });
 247
 248                 return false;
 249         };
 250
 251         ScanGalleryPerspective.prototype.imageMoveStart = function(event){
 252                 event.preventDefault();
 253
 254                 var self = this;
 255
 256                 this.origin = {
 257                         x: event.clientX,
 258                         y: event.clientY
 259                 };
 260
 261                 this.imageOrigin = self.$image.position();
 262                 $(document).bind('mousemove.gallery', function(){
 263                         self.imageMoved.apply(self, arguments);
 264                 }).bind('mouseup.gallery', function() {
 265                         self.imageMoveStop.apply(self, arguments);
 266                 });
 267
 268                 return false;
 269         };
 270
 271         ScanGalleryPerspective.prototype.imageMoveStop = function(event){
 272                 $(document).unbind('mousemove.gallery').unbind('mouseup.gallery');
 273         };
 274
 275     /*
 276      * Loading gallery
 277      */
 278     ScanGalleryPerspective.prototype.refreshGallery = function(success, failure) {
 279         var self = this;
 280         this.doc.refreshGallery({
 281             success: function(doc, data){
 282                 self.$image.show();
 283                                 console.log("gconfig:", self.config().page );
 284                                 self.setPage( self.config().page );
 285                 $('#imagesCount').html("/" + doc.galleryImages.length);
 286
 287                 $('.error_message', self.$element).hide();
 288                 if(success) success();
 289             },
 290             failure: function(doc, message){
 291                 self.$image.hide();
 292                 $('.error_message', self.$element).show().html(message);
 293                 if(failure) failure();
 294             }
 295         });
 296     }
 297
 298     ScanGalleryPerspective.prototype.onEnter = function(success, failure){
 299         $.wiki.SidebarPerspective.prototype.onEnter.call(this);
 300         this.refreshGallery(success, failure);
 301     };
 302
 303         ScanGalleryPerspective.prototype.onExit = function(success, failure) {
 304
 305         };
 306
 307     $.wiki.ScanGalleryPerspective = ScanGalleryPerspective;
 308
 309 })(jQuery);