fix
[redakcja.git] / 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     function ScanGalleryPerspective(options){
48         var old_callback = options.callback || function() { };
49
50         this.vsplitbar = 'GALERIA';
51
52         options.callback = function(){
53             var self = this;
54
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             $(window).resize(function(){
95                 self.dimensions.galleryWidth = self.$image.parent().width();
96                 self.dimensions.galleryHeight = self.$image.parent().height();
97             });
98
99             this.$image.load(function(){
100                 console.log("Image loaded.")
101                 self._resizeImage();
102             }).bind('mousedown', function() {
103                                 self.imageMoveStart.apply(self, arguments);
104                         });
105
106
107
108                         old_callback.call(this);
109         };
110
111         $.wiki.SidebarPerspective.call(this, options);
112     };
113
114     ScanGalleryPerspective.prototype = new $.wiki.SidebarPerspective();
115
116     ScanGalleryPerspective.prototype._resizeImage = function(){
117         var $img = this.$image;
118
119         $img.css({
120             width: '',
121             height: ''
122         });
123
124         this.dimensions = {
125             width: $img.width() * this.zoomFactor,
126             height: $img.height() * this.zoomFactor,
127             originWidth: $img.width(),
128             originHeight: $img.height(),
129                     galleryWidth: $img.parent().width(),
130             galleryHeight: $img.parent().height()
131         };
132
133         if (!(this.dimensions.width && this.dimensions.height)) {
134             setTimeout(function(){
135                 $img.load();
136             }, 100);
137         }
138
139         var position = normalizePosition($img.position().left, $img.position().top, this.dimensions.galleryWidth, this.dimensions.galleryHeight, this.dimensions.width, this.dimensions.height);
140
141         $img.css({
142             left: position.x,
143             top: position.y,
144             width: $img.width() * this.zoomFactor,
145             height: $img.height() * this.zoomFactor
146         });
147     };
148
149     ScanGalleryPerspective.prototype.setPage = function(newPage){
150         newPage = normalizeNumber(newPage, this.doc.galleryImages.length);
151         this.$numberInput.val(newPage);
152                 this.config().page = newPage;
153         $('.gallery-image img', this.$element).attr('src', this.doc.galleryImages[newPage - 1].url);
154     };
155
156     ScanGalleryPerspective.prototype.alterZoom = function(delta){
157         var zoomFactor = this.zoomFactor + delta;
158         if (zoomFactor < 0.2)
159             zoomFactor = 0.2;
160         if (zoomFactor > 2)
161             zoomFactor = 2;
162         this.setZoom(zoomFactor);
163     };
164
165     ScanGalleryPerspective.prototype.setZoom = function(factor){
166         this.zoomFactor = factor;
167
168         this.dimensions.width = this.dimensions.originWidth * this.zoomFactor;
169         this.dimensions.height = this.dimensions.originHeight * this.zoomFactor;
170
171         // var position = normalizePosition(this.$image.position().left, this.$image.position().top, this.dimensions.galleryWidth, this.dimensions.galleryHeight, this.dimensions.width, this.dimensions.height);
172
173                 this._resizeImage();
174     };
175
176         /*
177          * Movement
178          */
179         ScanGalleryPerspective.prototype.imageMoved = function(event){
180                 event.preventDefault();
181
182                 // origin is where the drag started
183                 // imageOrigin is where the drag started on the image
184
185                 var newX = event.clientX - this.origin.x + this.imageOrigin.left;
186                 var newY = event.clientY - this.origin.y + this.imageOrigin.top;
187
188                 var position = normalizePosition(newX, newY, this.dimensions.galleryWidth, this.dimensions.galleryHeight, this.dimensions.width, this.dimensions.height);
189
190                 this.$image.css({
191                         left: position.x,
192                         top: position.y,
193                 });
194
195                 return false;
196         };
197
198         ScanGalleryPerspective.prototype.imageMoveStart = function(event){
199                 event.preventDefault();
200
201                 var self = this;
202
203                 this.origin = {
204                         x: event.clientX,
205                         y: event.clientY
206                 };
207
208                 this.imageOrigin = self.$image.position();
209                 $(document).bind('mousemove.gallery', function(){
210                         self.imageMoved.apply(self, arguments);
211                 }).bind('mouseup.gallery', function() {
212                         self.imageMoveStop.apply(self, arguments);
213                 });
214
215                 return false;
216         };
217
218         ScanGalleryPerspective.prototype.imageMoveStop = function(event){
219                 $(document).unbind('mousemove.gallery').unbind('mouseup.gallery');
220         };
221
222     /*
223      * Loading gallery
224      */
225     ScanGalleryPerspective.prototype.onEnter = function(success, failure){
226         $.wiki.SidebarPerspective.prototype.onEnter.call(this);
227
228         var self = this;
229
230         this.doc.refreshGallery({
231             success: function(doc, data){
232                 self.$image.show();
233                                 console.log("gconfig:", self.config().page );
234                                 self.setPage( self.config().page );
235                 $('#imagesCount').html("/" + doc.galleryImages.length);
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);