fix

[redakcja.git] / 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 bb1c3d8..64bb46f 100644 (file)
--- a/src/redakcja/static/js/wiki/view_gallery.js
+++ b/src/redakcja/static/js/wiki/view_gallery.js
@@ -44,25 +44,21 @@
     /*
      * Perspective
      */
     /*
      * 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;
             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);
 
             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
             this.$image = $('.gallery-image img', this.$element).attr('unselectable', 'on');
 
             // button handlers


@@ -70,10 +66,10 @@
                 event.preventDefault();
                 self.setPage($(this).val());
             });
                 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);
 
             $('.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) {
                 var datalist = modal.find('.modal-body');
                 datalist.html('');
                 self.doc.withGalleryList(function(galleries) {

-                    console.log(galleries);
+                    let item;

                     $.each(galleries, (i, gallery) => {
                         item = $('<div class="form-check"><label class="form-check-label"><input class="form-check-input" type="radio" name="gallery"></label></div>');
                         $('input', item).val(gallery);
                     $.each(galleries, (i, gallery) => {
                         item = $('<div class="form-check"><label class="form-check-label"><input class="form-check-input" type="radio" name="gallery"></label></div>');
                         $('input', item).val(gallery);


@@ -124,7 +120,7 @@
                     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>');
                     item.appendTo(datalist);
                 });
                     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>');
                     item.appendTo(datalist);
                 });

-            })
+            });

             $('#gallery-chooser .ctrl-ok').on('click', function (event) {
                 let item = $('#gallery-chooser :checked');
                 let name;
             $('#gallery-chooser .ctrl-ok').on('click', function (event) {
                 let item = $('#gallery-chooser :checked');
                 let name;


@@ -136,7 +132,7 @@
                 } else {
                     name = item.val();
                 }
                 } else {
                     name = item.val();
                 }

-                
+

                 self.doc.setGallery(name);
                 $('#gallery-chooser').modal('hide');
                 self.refreshGallery(function() {
                 self.doc.setGallery(name);
                 $('#gallery-chooser').modal('hide');
                 self.refreshGallery(function() {


@@ -150,160 +146,148 @@
             });
 
             this.$image.load(function(){
             });
 
             this.$image.load(function(){

-                console.log("Image loaded.")

                 self._resizeImage();
             }).bind('mousedown', function() {
                 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.doc.galleryImages.length);
+            this.$numberInput.val(newPage);
+            this.config().page = newPage;
+            $('.gallery-image img', this.$element).attr('src', this.doc.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.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();
+                }
+            });
+        }

 
 

-       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);
     $.wiki.ScanGalleryPerspective = ScanGalleryPerspective;
 
 })(jQuery);