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