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         constructor(options){
  49             var old_callback = options.callback || function() { };
  50
  51             options.callback = function(){
  52                 var self = this;
  53
  54                 this.vsplitbar = 'GALERIA';
  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                         let item;
 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                     self._resizeImage();
 154                 }).bind('mousedown', function() {
 155                     self.imageMoveStart.apply(self, arguments);
 156                 });
 157
 158                 old_callback.call(this);
 159             };
 160
 161             super(options);
 162         }
 163
 164         _resizeImage() {
 165             var $img = this.$image;
 166
 167             $img.css({
 168                 width: '',
 169                 height: ''
 170             });
 171
 172             this.dimensions = {
 173                 width: $img.width() * this.zoomFactor,
 174                 height: $img.height() * this.zoomFactor,
 175                 originWidth: $img.width(),
 176                 originHeight: $img.height(),
 177                 galleryWidth: $img.parent().width(),
 178                 galleryHeight: $img.parent().height()
 179             };
 180
 181             if (!(this.dimensions.width && this.dimensions.height)) {
 182                 setTimeout(function(){
 183                     $img.load();
 184                 }, 100);
 185             }
 186
 187             var position = normalizePosition($img.position().left, $img.position().top, this.dimensions.galleryWidth, this.dimensions.galleryHeight, this.dimensions.width, this.dimensions.height);
 188
 189             $img.css({
 190                 left: position.x,
 191                 top: position.y,
 192                 width: $img.width() * this.zoomFactor,
 193                 height: $img.height() * this.zoomFactor
 194             });
 195         }
 196
 197         setPage(newPage) {
 198             newPage = normalizeNumber(newPage, this.doc.galleryImages.length);
 199             this.$numberInput.val(newPage);
 200             this.config().page = newPage;
 201             $('.gallery-image img', this.$element).attr('src', this.doc.galleryImages[newPage - 1].url);
 202         }
 203
 204         alterZoom(delta) {
 205             var zoomFactor = this.zoomFactor + delta;
 206             if (zoomFactor < 0.2)
 207                 zoomFactor = 0.2;
 208             if (zoomFactor > 2)
 209                 zoomFactor = 2;
 210             this.setZoom(zoomFactor);
 211         }
 212
 213         setZoom(factor) {
 214             this.zoomFactor = factor;
 215             this.dimensions.width = this.dimensions.originWidth * this.zoomFactor;
 216             this.dimensions.height = this.dimensions.originHeight * this.zoomFactor;
 217
 218             // var position = normalizePosition(this.$image.position().left, this.$image.position().top, this.dimensions.galleryWidth, this.dimensions.galleryHeight, this.dimensions.width, this.dimensions.height);
 219
 220             this._resizeImage();
 221         }
 222
 223         /*
 224          * Movement
 225          */
 226         imageMoved(event) {
 227             event.preventDefault();
 228
 229             // origin is where the drag started
 230             // imageOrigin is where the drag started on the image
 231
 232             var newX = event.clientX - this.origin.x + this.imageOrigin.left;
 233             var newY = event.clientY - this.origin.y + this.imageOrigin.top;
 234
 235             var position = normalizePosition(newX, newY, this.dimensions.galleryWidth, this.dimensions.galleryHeight, this.dimensions.width, this.dimensions.height);
 236
 237             this.$image.css({
 238                 left: position.x,
 239                 top: position.y,
 240             });
 241
 242             return false;
 243         }
 244
 245         imageMoveStart(event) {
 246             event.preventDefault();
 247
 248             var self = this;
 249
 250             this.origin = {
 251                 x: event.clientX,
 252                 y: event.clientY
 253             };
 254
 255             this.imageOrigin = self.$image.position();
 256             $(document).bind('mousemove.gallery', function(){
 257                 self.imageMoved.apply(self, arguments);
 258             }).bind('mouseup.gallery', function() {
 259                 self.imageMoveStop.apply(self, arguments);
 260             });
 261
 262             return false;
 263         }
 264
 265         imageMoveStop(event) {
 266             $(document).unbind('mousemove.gallery').unbind('mouseup.gallery');
 267         }
 268
 269         /*
 270          * Loading gallery
 271          */
 272         refreshGallery(success, failure) {
 273             var self = this;
 274             this.doc.refreshGallery({
 275                 success: function(doc, data){
 276                     self.$image.show();
 277                     console.log("gconfig:", self.config().page );
 278                     self.setPage( self.config().page );
 279                     $('#imagesCount').html("/" + doc.galleryImages.length);
 280
 281                     $('.error_message', self.$element).hide();
 282                     if(success) success();
 283                 },
 284                 failure: function(doc, message){
 285                     self.$image.hide();
 286                     $('.error_message', self.$element).show().html(message);
 287                     if(failure) failure();
 288                 }
 289             });
 290         }
 291
 292         onEnter(success, failure) {
 293             super.onEnter()
 294             this.refreshGallery(success, failure);
 295         }
 296
 297         onExit(success, failure) {
 298         };
 299     }
 300     $.wiki.ScanGalleryPerspective = ScanGalleryPerspective;
 301
 302 })(jQuery);