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