X-Git-Url: https://git.mdrn.pl/redakcja.git/blobdiff_plain/28866d0f2520b7515f3c06e9b61bcce4f44d53b1..e0f595e44766e352edfce0aaf5d32be57f448882:/src/redakcja/static/js/wiki/view_gallery.js diff --git a/src/redakcja/static/js/wiki/view_gallery.js b/src/redakcja/static/js/wiki/view_gallery.js index bb1c3d8a..c238ebfd 100644 --- a/src/redakcja/static/js/wiki/view_gallery.js +++ b/src/redakcja/static/js/wiki/view_gallery.js @@ -44,25 +44,21 @@ /* * Perspective */ - function ScanGalleryPerspective(options){ - var old_callback = options.callback || function() { }; - - this.vsplitbar = 'GALERIA'; - - options.callback = function(){ + class ScanGalleryPerspective extends $.wiki.SidebarPerspective { + vsplitbar = 'GALERIA'; + dimensions = {}; + zoomFactor = 1; + origin = {}; + imageOrigin = {}; + + constructor(options) { + super(options); var self = this; - - this.dimensions = {}; - this.zoomFactor = 1; - if (this.config().page == undefined) - this.config().page = CurrentDocument.galleryStart; + if (this.config().page == undefined) + this.config().page = CurrentDocument.galleryStart; this.$element = $("#side-gallery"); this.$numberInput = $('.page-number', this.$element); - // ... - var origin = {}; - var imageOrigin = {}; - this.$image = $('.gallery-image img', this.$element).attr('unselectable', 'on'); // button handlers @@ -70,10 +66,10 @@ event.preventDefault(); self.setPage($(this).val()); }); - - $('.start-page', this.$element).click(function(){ - self.setPage(CurrentDocument.galleryStart); - }); + + $('.start-page', this.$element).click(function(){ + self.setPage(CurrentDocument.galleryStart); + }); $('.previous-page', this.$element).click(function(){ self.setPage(parseInt(self.$numberInput.val(),10) - 1); @@ -108,7 +104,7 @@ var datalist = modal.find('.modal-body'); datalist.html(''); self.doc.withGalleryList(function(galleries) { - console.log(galleries); + let item; $.each(galleries, (i, gallery) => { item = $('
'); $('input', item).val(gallery); @@ -124,7 +120,7 @@ item = $('
'); item.appendTo(datalist); }); - }) + }); $('#gallery-chooser .ctrl-ok').on('click', function (event) { let item = $('#gallery-chooser :checked'); let name; @@ -136,7 +132,7 @@ } else { name = item.val(); } - + self.doc.setGallery(name); $('#gallery-chooser').modal('hide'); self.refreshGallery(function() { @@ -150,160 +146,150 @@ }); this.$image.load(function(){ - console.log("Image loaded.") self._resizeImage(); }).bind('mousedown', function() { - self.imageMoveStart.apply(self, arguments); - }); - - - - old_callback.call(this); - }; - - $.wiki.SidebarPerspective.call(this, options); - }; + self.imageMoveStart.apply(self, arguments); + }); + } - ScanGalleryPerspective.prototype = new $.wiki.SidebarPerspective(); + _resizeImage() { + var $img = this.$image; - ScanGalleryPerspective.prototype._resizeImage = function(){ - var $img = this.$image; + $img.css({ + width: '', + height: '' + }); - $img.css({ - width: '', - height: '' - }); + this.dimensions = { + width: $img.width() * this.zoomFactor, + height: $img.height() * this.zoomFactor, + originWidth: $img.width(), + originHeight: $img.height(), + galleryWidth: $img.parent().width(), + galleryHeight: $img.parent().height() + }; + + if (!(this.dimensions.width && this.dimensions.height)) { + setTimeout(function(){ + $img.load(); + }, 100); + } - this.dimensions = { - width: $img.width() * this.zoomFactor, - height: $img.height() * this.zoomFactor, - originWidth: $img.width(), - originHeight: $img.height(), - galleryWidth: $img.parent().width(), - galleryHeight: $img.parent().height() - }; + var position = normalizePosition($img.position().left, $img.position().top, this.dimensions.galleryWidth, this.dimensions.galleryHeight, this.dimensions.width, this.dimensions.height); - if (!(this.dimensions.width && this.dimensions.height)) { - setTimeout(function(){ - $img.load(); - }, 100); + $img.css({ + left: position.x, + top: position.y, + width: $img.width() * this.zoomFactor, + height: $img.height() * this.zoomFactor + }); } - var position = normalizePosition($img.position().left, $img.position().top, this.dimensions.galleryWidth, this.dimensions.galleryHeight, this.dimensions.width, this.dimensions.height); - - $img.css({ - left: position.x, - top: position.y, - width: $img.width() * this.zoomFactor, - height: $img.height() * this.zoomFactor - }); - }; + setPage(newPage) { + newPage = normalizeNumber(newPage, this.galleryImages.length); + this.$numberInput.val(newPage); + this.config().page = newPage; + $('.gallery-image img', this.$element).attr('src', this.galleryImages[newPage - 1].url); + } - ScanGalleryPerspective.prototype.setPage = function(newPage){ - newPage = normalizeNumber(newPage, this.doc.galleryImages.length); - this.$numberInput.val(newPage); - this.config().page = newPage; - $('.gallery-image img', this.$element).attr('src', this.doc.galleryImages[newPage - 1].url); - }; + alterZoom(delta) { + var zoomFactor = this.zoomFactor + delta; + if (zoomFactor < 0.2) + zoomFactor = 0.2; + if (zoomFactor > 2) + zoomFactor = 2; + this.setZoom(zoomFactor); + } - ScanGalleryPerspective.prototype.alterZoom = function(delta){ - var zoomFactor = this.zoomFactor + delta; - if (zoomFactor < 0.2) - zoomFactor = 0.2; - if (zoomFactor > 2) - zoomFactor = 2; - this.setZoom(zoomFactor); - }; + setZoom(factor) { + this.zoomFactor = factor; + this.dimensions.width = this.dimensions.originWidth * this.zoomFactor; + this.dimensions.height = this.dimensions.originHeight * this.zoomFactor; - ScanGalleryPerspective.prototype.setZoom = function(factor){ - this.zoomFactor = factor; + // var position = normalizePosition(this.$image.position().left, this.$image.position().top, this.dimensions.galleryWidth, this.dimensions.galleryHeight, this.dimensions.width, this.dimensions.height); - this.dimensions.width = this.dimensions.originWidth * this.zoomFactor; - this.dimensions.height = this.dimensions.originHeight * this.zoomFactor; + this._resizeImage(); + } - // var position = normalizePosition(this.$image.position().left, this.$image.position().top, this.dimensions.galleryWidth, this.dimensions.galleryHeight, this.dimensions.width, this.dimensions.height); + /* + * Movement + */ + imageMoved(event) { + event.preventDefault(); - this._resizeImage(); - }; + // origin is where the drag started + // imageOrigin is where the drag started on the image - /* - * Movement - */ - ScanGalleryPerspective.prototype.imageMoved = function(event){ - event.preventDefault(); + var newX = event.clientX - this.origin.x + this.imageOrigin.left; + var newY = event.clientY - this.origin.y + this.imageOrigin.top; - // origin is where the drag started - // imageOrigin is where the drag started on the image + var position = normalizePosition(newX, newY, this.dimensions.galleryWidth, this.dimensions.galleryHeight, this.dimensions.width, this.dimensions.height); - var newX = event.clientX - this.origin.x + this.imageOrigin.left; - var newY = event.clientY - this.origin.y + this.imageOrigin.top; + this.$image.css({ + left: position.x, + top: position.y, + }); - var position = normalizePosition(newX, newY, this.dimensions.galleryWidth, this.dimensions.galleryHeight, this.dimensions.width, this.dimensions.height); + return false; + } - this.$image.css({ - left: position.x, - top: position.y, - }); + imageMoveStart(event) { + event.preventDefault(); - return false; - }; + var self = this; - ScanGalleryPerspective.prototype.imageMoveStart = function(event){ - event.preventDefault(); + this.origin = { + x: event.clientX, + y: event.clientY + }; - var self = this; + this.imageOrigin = self.$image.position(); + $(document).bind('mousemove.gallery', function(){ + self.imageMoved.apply(self, arguments); + }).bind('mouseup.gallery', function() { + self.imageMoveStop.apply(self, arguments); + }); - this.origin = { - x: event.clientX, - y: event.clientY - }; + return false; + } - this.imageOrigin = self.$image.position(); - $(document).bind('mousemove.gallery', function(){ - self.imageMoved.apply(self, arguments); - }).bind('mouseup.gallery', function() { - self.imageMoveStop.apply(self, arguments); - }); + imageMoveStop(event) { + $(document).unbind('mousemove.gallery').unbind('mouseup.gallery'); + } - return false; - }; + /* + * Loading gallery + */ + refreshGallery(success, failure) { + var self = this; + this.doc.refreshScansGallery({ + + success: function(galleryImages) { + self.galleryImages = galleryImages; + self.$image.show(); + console.log("gconfig:", self.config().page ); + self.setPage( self.config().page ); + $('#imagesCount').html("/" + galleryImages.length); + + $('.error_message', self.$element).hide(); + if(success) success(); + }, + failure: function(message) { + self.$image.hide(); + $('.error_message', self.$element).show().html(message); + if(failure) failure(); + } + }); + } - ScanGalleryPerspective.prototype.imageMoveStop = function(event){ - $(document).unbind('mousemove.gallery').unbind('mouseup.gallery'); - }; + onEnter(success, failure) { + super.onEnter() + this.refreshGallery(success, failure); + } - /* - * Loading gallery - */ - ScanGalleryPerspective.prototype.refreshGallery = function(success, failure) { - var self = this; - this.doc.refreshGallery({ - success: function(doc, data){ - self.$image.show(); - console.log("gconfig:", self.config().page ); - self.setPage( self.config().page ); - $('#imagesCount').html("/" + doc.galleryImages.length); - - $('.error_message', self.$element).hide(); - if(success) success(); - }, - failure: function(doc, message){ - self.$image.hide(); - $('.error_message', self.$element).show().html(message); - if(failure) failure(); - } - }); + onExit(success, failure) { + }; } - - ScanGalleryPerspective.prototype.onEnter = function(success, failure){ - $.wiki.SidebarPerspective.prototype.onEnter.call(this); - this.refreshGallery(success, failure); - }; - - ScanGalleryPerspective.prototype.onExit = function(success, failure) { - - }; - $.wiki.ScanGalleryPerspective = ScanGalleryPerspective; })(jQuery);