ad17c4be0080f2ece5f76665c8f44d8655cfb6ef
[redakcja.git] / project / static / js / views / gallery.js
1 /*global View render_template panels */
2 var ImageGalleryView = View.extend({
3   _className: 'ImageGalleryView',
4   element: null,
5   model: null,
6   currentPage: -1,
7   pageZoom: 1.0,
8   template: 'image-gallery-view-template',
9   
10   init: function(element, model, parent, template) 
11   {    
12     console.log("init for gallery");
13     this._super(element, model, template);
14     this.parent = parent;
15        
16     this.model
17       .addObserver(this, 'data', this.modelDataChanged.bind(this))
18       .addObserver(this, 'state', this.modelStateChanged.bind(this));
19    
20     //$('.image-gallery-view', this.element).html(this.model.get('data'));
21     this.modelStateChanged('state', this.model.get('state'));
22     this.model.load();    
23   },
24   
25   modelDataChanged: function(property, value) 
26   {    
27     if( property == 'data')
28     {
29         this.render();
30         this.gotoPage(this.currentPage);        
31     }   
32   },
33
34   gotoPage: function(index) 
35   {
36      if (index < 0) 
37          index = 0;
38     
39      var n = this.$pages.length;
40      if (index >= n) index = n-1;
41
42      if( (this.currentPage == index) )
43          return;
44
45      var cpage = this.$currentPage();
46
47      if(cpage) {
48          var offset = this.pageViewOffset(cpage);
49          this.cleanPage(cpage);
50      }
51      
52      this.currentPage = index;
53
54      cpage = this.$currentPage()
55      this.renderImage(cpage);
56
57      if(offset) {
58          cpage.css({top: offset.y, left: offset.x});
59      }
60
61      var self = this;
62      $('img', cpage).bind('load', function() {
63         if(offset)
64              self.setPageViewOffset(cpage, offset);
65      });
66      
67      cpage.show();
68
69      if(this.currentPage == n-1)
70           this.$nextButton.attr('disabled', 'disabled');
71      else
72           this.$nextButton.removeAttr('disabled');
73
74       if(this.currentPage == 0)
75           this.$prevButton.attr('disabled', 'disabled');
76       else
77           this.$prevButton.removeAttr('disabled');
78
79       this.$pageInput.val( (this.currentPage+1) );
80   },
81   
82   modelStateChanged: function(property, value) {   
83     if (value == 'loading') {
84       this.parent.freeze('Ɓadowanie...');
85     } else {
86       this.parent.unfreeze();
87     }
88   },
89
90   $currentPage: function() {
91       if(this.currentPage >= 0 && this.currentPage < this.$pages.length)
92           return $(this.$pages[this.currentPage]);
93       else
94           return undefined;
95   },    
96
97   cleanPage: function($page) {
98     $page.hide();
99     $('img', $page).unbind();
100     
101     $page.empty();
102     
103     this.setPageViewOffset($page, {x:0, y:0});
104   },
105
106   pageDragStart: function(event)
107   {      
108       this.dragStart = {x: event.clientX, y: event.clientY};
109       $(window).bind('mousemove.imagedrag', this.pageDrag.bind(this));
110       $(window).bind('mouseup.imagedrag', this.pageDragStop.bind(this));
111       
112       this.$currentPage().css('cursor', 'move');
113
114       return false;
115   },
116
117   pageDrag: function(event)
118   {
119       if(!this.dragStart) return;
120
121       var delta = {
122            x: this.dragStart.x - event.clientX,
123            y: this.dragStart.y - event.clientY };     
124
125       var offset = this.pageViewOffset( $(this.$pages[this.currentPage]) );
126       offset.x -= delta.x;
127       offset.y -= delta.y;
128       this.setPageViewOffset( $(this.$pages[this.currentPage]), offset);
129       
130       this.dragStart = {x: event.clientX, y: event.clientY };     
131       return false;
132   },
133
134   pageDragStop: function(event) {
135       this.$currentPage().css('cursor', 'auto');
136
137       this.dragStart = undefined;
138       $(window).unbind('mousemove.imagedrag');
139       $(window).unbind('mouseup.imagedrag');
140
141       return false;
142   },
143
144   pageViewOffset: function($page) {
145       var left = parseInt($page.css('left'));
146       var top = parseInt($page.css('top'));
147
148       return {x: left, y: top};
149   },
150
151   setPageViewOffset: function($page, offset) {
152       // check if the image will be actually visible
153       // and correct
154       var MARGIN = 30;
155
156
157       var vp_width = this.$pageListRoot.width();
158       var vp_height = this.$pageListRoot.height();
159       
160       var width = $page.outerWidth();
161       var height = $page.outerHeight();
162
163       // console.log(offset, vp_width, vp_height, width, height);
164       if( offset.x+width-MARGIN < 0 ) {
165         // console.log('too much on the left', offset.x, -width)
166         offset.x = -width+MARGIN;
167       }
168       
169       // too much on the right
170       if( offset.x > vp_width-MARGIN) {
171           offset.x = vp_width-MARGIN;
172           // console.log('too much on the right', offset.x, vp_width, width)
173       }
174       
175       if( offset.y+height-MARGIN < 0)
176         offset.y = -height+MARGIN;      
177
178       if( offset.y > vp_height-MARGIN)
179           offset.y = vp_height-MARGIN;               
180       
181       $page.css({left: offset.x, top: offset.y});           
182   }, 
183   
184   renderImage: function(target) 
185   {
186       var source = target.attr('ui:model');
187       var orig_width = parseInt(target.attr('ui:width'));
188       var orig_height = parseInt(target.attr('ui:height'));
189
190       target.html('<img src="' + source
191            + '" width="' + Math.floor(orig_width * this.pageZoom)
192            + '" height="' + Math.floor(orig_height * this.pageZoom)
193            + '" />');
194        
195       $('img', target).
196         css({
197             'user-select': 'none',
198             '-webkit-user-select': 'none',
199             '-khtml-user-select': 'none',
200             '-moz-user-select': 'none'
201         }).
202         attr('unselectable', 'on').
203         mousedown(this.pageDragStart.bind(this));    
204   },
205
206   render: function() 
207   {
208       console.log('rendering:', this._className);
209       
210       /* first unbind all */    
211       if(this.$nextButton) this.$nextButton.unbind();
212       if(this.$prevButton) this.$prevButton.unbind();
213       if(this.$jumpButton) this.$jumpButton.unbind();
214       if(this.$pageInput) this.$pageInput.unbind();
215
216       if(this.$zoomInButton) this.$zoomInButton.unbind();
217       if(this.$zoomOutButton) this.$zoomOutButton.unbind();
218       if(this.$zoomResetButton) this.$zoomResetButton.unbind();
219
220       /* render */
221       this.element.html(render_template(this.template, this));
222
223       /* fetch important parts */
224       this.$pageListRoot = $('.image-gallery-page-list', this.element);
225       this.$pages = $('.image-gallery-page-container', this.$pageListRoot);
226
227       this.$nextButton = $('.image-gallery-next-button', this.element);
228       this.$prevButton = $('.image-gallery-prev-button', this.element);
229       this.$pageInput = $('.image-gallery-current-page', this.element);
230
231       // this.$zoomSelect = $('.image-gallery-current-zoom', this.element);
232       this.$zoomInButton = $('.image-gallery-zoom-in', this.element);
233       this.$zoomOutButton = $('.image-gallery-zoom-out', this.element);
234       this.$zoomResetButton = $('.image-gallery-zoom-reset', this.element);
235
236       /* re-bind events */
237       this.$nextButton.click( this.nextPage.bind(this) );
238       this.$prevButton.click( this.prevPage.bind(this) );
239       this.$pageInput.change( this.jumpToPage.bind(this) );
240
241       // this.$zoomSelect.change( this.zoomChanged.bind(this) );
242       this.$zoomInButton.click( this.zoomInOneStep.bind(this) );
243       this.$zoomOutButton.click( this.zoomOutOneStep.bind(this) );
244       this.$zoomResetButton.click( this.zoomReset.bind(this) );
245
246       this.gotoPage(this.currentPage);
247       this.changePageZoom(this.pageZoom);
248   },
249
250   jumpToPage: function() {     
251         this.gotoPage(parseInt(this.$pageInput.val())-1);
252   },
253   
254   nextPage: function() {
255       this.gotoPage(this.currentPage + 1);    
256   },
257
258   prevPage: function() {
259       this.gotoPage(this.currentPage - 1);
260   },
261
262   zoomReset: function() {
263       this.changePageZoom(1.0);
264   },
265
266   zoomInOneStep: function() {
267       var zoom = this.pageZoom + 0.1;
268       if(zoom > 3.0) zoom = 3.0;
269       this.changePageZoom(zoom);
270   },
271
272   zoomOutOneStep: function() {
273       var zoom = this.pageZoom - 0.1;
274       if(zoom < 0.3) zoom = 0.3;
275       this.changePageZoom(zoom);
276   },
277
278   changePageZoom: function(value) {
279       var current = this.$currentPage();
280
281       if(!current) return;
282
283       var alpha = value/this.pageZoom;
284       this.pageZoom = value;
285
286       var nwidth = current.attr('ui:width') * this.pageZoom;
287       var nheight = current.attr('ui:height') * this.pageZoom;
288       var off_top = parseInt(current.css('top'));
289       var off_left = parseInt(current.css('left'));
290       
291       var vpx = this.$pageListRoot.width() * 0.5;
292       var vpy = this.$pageListRoot.height() * 0.5;
293       
294       var new_off_left = vpx - alpha*(vpx-off_left);
295       var new_off_top = vpy - alpha*(vpy-off_top);
296                  
297       $('img', current).attr('width', nwidth);
298       $('img', current).attr('height', nheight);
299       
300       this.setPageViewOffset(current, {
301           y: new_off_top, x: new_off_left
302       });
303
304       // this.$zoomSelect.val(this.pageZoom);
305       // console.log('Zoom is now', this.pageZoom);
306   },
307   
308   dispose: function()
309   {
310       console.log("Disposing gallery.");
311       this.model.removeObserver(this);
312       this._super();
313   }
314 });
315
316 // Register view
317 panels['gallery'] = ImageGalleryView;