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