9630afb5cfe1b04e471f7bd56b91d9168e8c9d79
[redakcja.git] / redakcja / static / js / wiki / view_gallery.js
1 (function($){
2
3     function normalizeNumber(pageNumber, pageCount){
4         // Numer strony musi być pomiędzy 1 a najwyższym numerem
5         var pageNumber = parseInt(pageNumber, 10);
6
7         if (!pageNumber ||
8         pageNumber == NaN ||
9         pageNumber == Infinity ||
10         pageNumber == -Infinity ||
11         pageNumber < 1)
12             return 1;
13
14         if (pageNumber > pageCount)
15             return pageCount;
16
17         return pageNumber;
18     }
19
20     function bounds(galleryWidth, galleryHeight, imageWidth, imageHeight){
21         return {
22             maxX: 0,
23             maxY: 0,
24             minX: galleryWidth - imageWidth,
25             minY: galleryHeight - imageHeight
26         }
27     };
28
29     function normalizePosition(x, y, galleryWidth, galleryHeight, imageWidth, imageHeight){
30         var b = bounds(galleryWidth, galleryHeight, imageWidth, imageHeight);
31         return {
32             x: Math.min(b.maxX, Math.max(b.minX, x)),
33             y: Math.min(b.maxY, Math.max(b.minY, y))
34         }
35     };
36
37     function fixImageSize(){
38
39     }
40
41     /*
42      * Perspective
43      */
44     function ScanGalleryPerspective(options){
45         var old_callback = options.callback || function() { };
46
47                 this.noupdate_hash_onenter = true;
48
49         options.callback = function(){
50             var self = this;
51
52             this.dimensions = {};
53             this.zoomFactor = 1;
54             this.$element = $("#side-gallery");
55             this.$numberInput = $('.page-number', this.$element);
56
57             // ...
58             var origin = {};
59             var imageOrigin = {};
60
61             this.$image = $('.gallery-image img', this.$element).attr('unselectable', 'on');
62
63             // button handlers
64             this.$numberInput.change(function(event){
65                 event.preventDefault();
66                 self.setPage($(this).val());
67             });
68                     
69             $('.previous-page', this.$element).click(function(){
70                 self.setPage(parseInt(self.$numberInput.val(),10) - 1);
71             });
72
73             $('.next-page', this.$element).click(function(){
74                 self.setPage(parseInt(self.$numberInput.val(),10) + 1);
75             });
76
77             $('.zoom-in', this.$element).click(function(){
78                 self.alterZoom(0.2);
79             });
80
81             $('.zoom-out', this.$element).click(function(){
82                 self.alterZoom((-0.2));
83             });
84
85             $(window).resize(function(){
86                 self.dimensions.galleryWidth = self.$image.parent().width();
87                 self.dimensions.galleryHeight = self.$image.parent().height();
88             });
89
90             $('.gallery-image img', this.$element).load(function(){
91                 console.log("Image loaded.")
92                 self._resizeImage();
93             }).bind('mousedown', function() {
94                                 self.imageMoveStart.apply(self, arguments);
95                         });
96
97
98
99                         old_callback.call(this);
100         };
101
102         $.wiki.Perspective.call(this, options);
103     };
104
105     ScanGalleryPerspective.prototype = new $.wiki.Perspective();
106
107     ScanGalleryPerspective.prototype._resizeImage = function(){
108         var $img = this.$image;
109
110         $img.css({
111             width: null,
112             height: null
113         });
114
115         this.dimensions = {
116             width: $img.width() * this.zoomFactor,
117             height: $img.height() * this.zoomFactor,
118             originWidth: $img.width(),
119             originHeight: $img.height(),
120                     galleryWidth: $img.parent().width(),
121             galleryHeight: $img.parent().height()
122         };
123
124         if (!(this.dimensions.width && this.dimensions.height)) {
125             setTimeout(function(){
126                 $img.load();
127             }, 100);
128         }
129
130         var position = normalizePosition($img.position().left, $img.position().top, this.dimensions.galleryWidth, this.dimensions.galleryHeight, this.dimensions.width, this.dimensions.height);
131
132         $img.css({
133             left: position.x,
134             top: position.y,
135             width: $img.width() * this.zoomFactor,
136             height: $img.height() * this.zoomFactor
137         });
138     };
139
140     ScanGalleryPerspective.prototype.setPage = function(newPage){
141         newPage = normalizeNumber(newPage, this.doc.galleryImages.length);
142         $('#imagesCount').html("/"+this.doc.galleryImages.length);
143         this.$numberInput.val(newPage);
144                 this.config().page = newPage;
145         $('.gallery-image img', this.$element).attr('src', this.doc.galleryImages[newPage - 1]);
146     };
147
148     ScanGalleryPerspective.prototype.alterZoom = function(delta){
149         var zoomFactor = this.zoomFactor + delta;
150         if (zoomFactor < 0.2)
151             zoomFactor = 0.2;
152         if (zoomFactor > 2)
153             zoomFactor = 2;
154         this.setZoom(zoomFactor);
155     };
156
157     ScanGalleryPerspective.prototype.setZoom = function(factor){
158         this.zoomFactor = factor;
159
160         this.dimensions.width = this.dimensions.originWidth * this.zoomFactor;
161         this.dimensions.height = this.dimensions.originHeight * this.zoomFactor;
162
163         // var position = normalizePosition(this.$image.position().left, this.$image.position().top, this.dimensions.galleryWidth, this.dimensions.galleryHeight, this.dimensions.width, this.dimensions.height);
164
165                 this._resizeImage();
166         /* this.$image.css({
167             width: this.dimensions.width,
168             height: this.dimensions.height,
169             left: position.x,
170             top: position.y
171         });*/
172     };
173
174         /*
175          * Movement
176          */
177         ScanGalleryPerspective.prototype.imageMoved = function(event){
178                 event.preventDefault();
179
180                 // origin is where the drag started
181                 // imageOrigin is where the drag started on the image
182
183                 var newX = event.clientX - this.origin.x + this.imageOrigin.left;
184                 var newY = event.clientY - this.origin.y + this.imageOrigin.top;
185
186                 var position = normalizePosition(newX, newY, this.dimensions.galleryWidth, this.dimensions.galleryHeight, this.dimensions.width, this.dimensions.height);
187
188                 this.$image.css({
189                         left: position.x,
190                         top: position.y,
191                 });
192
193                 return false;
194         };
195
196         ScanGalleryPerspective.prototype.imageMoveStart = function(event){
197                 event.preventDefault();
198
199                 var self = this;
200
201                 this.origin = {
202                         x: event.clientX,
203                         y: event.clientY
204                 };
205
206                 this.imageOrigin = self.$image.position();
207                 $(document).bind('mousemove.gallery', function(){
208                         self.imageMoved.apply(self, arguments);
209                 }).bind('mouseup.gallery', function() {
210                         self.imageMoveStop.apply(self, arguments);
211                 });
212
213                 return false;
214         };
215
216         ScanGalleryPerspective.prototype.imageMoveStop = function(event){
217                 $(document).unbind('mousemove.gallery').unbind('mouseup.gallery');
218         };
219
220     /*
221      * Loading gallery
222      */
223     ScanGalleryPerspective.prototype.onEnter = function(success, failure){
224         var self = this;
225
226         $.wiki.Perspective.prototype.onEnter.call(this);
227
228         $('.vsplitbar').not('.active').trigger('click');
229         $(".vsplitbar-title").html("&darr;&nbsp;GALERIA&nbsp;&darr;");        
230         
231         this.doc.refreshGallery({
232             success: function(doc, data){
233                 self.$image.show();
234                                 console.log("gconfig:", self.config().page );
235                                 self.setPage( self.config().page );
236
237                 $('.error_message', self.$element).hide();
238                 if(success) success();
239             },
240             failure: function(doc, message){
241                 self.$image.hide();
242                 $('.error_message', self.$element).show().html(message);
243                 if(failure) failure();
244             }
245         });
246
247     };
248
249         ScanGalleryPerspective.prototype.onExit = function(success, failure) {
250
251         };
252
253     $.wiki.ScanGalleryPerspective = ScanGalleryPerspective;
254
255 })(jQuery);