1 /*global View render_template panels */
2 var ImageGalleryView = View.extend({
3 _className: 'ImageGalleryView',
8 template: 'image-gallery-view-template',
10 init: function(element, model, parent, template)
12 console.log("init for gallery");
13 var submodel = model.contentModels['gallery'];
14 this._super(element, submodel, template);
17 console.log("gallery model", this.model);
20 .addObserver(this, 'data', this.modelDataChanged.bind(this))
21 .addObserver(this, 'state', this.modelStateChanged.bind(this));
23 //$('.image-gallery-view', this.element).html(this.model.get('data'));
24 this.modelStateChanged('state', this.model.get('state'));
28 modelDataChanged: function(property, value)
30 if( property == 'data')
33 this.gotoPage(this.currentPage);
37 gotoPage: function(index)
42 var n = this.$pages.length;
43 if (index >= n) index = n-1;
45 if( (this.currentPage == index) )
48 var cpage = this.$currentPage();
51 var offset = this.pageViewOffset(cpage);
52 this.cleanPage(cpage);
55 this.currentPage = index;
57 cpage = this.$currentPage()
58 this.renderImage(cpage);
61 cpage.css({top: offset.y, left: offset.x});
65 $('img', cpage).bind('load', function() {
67 self.setPageViewOffset(cpage, offset);
72 if(this.currentPage == n-1)
73 this.$nextButton.attr('disabled', 'disabled');
75 this.$nextButton.removeAttr('disabled');
77 if(this.currentPage == 0)
78 this.$prevButton.attr('disabled', 'disabled');
80 this.$prevButton.removeAttr('disabled');
82 this.$pageInput.val( (this.currentPage+1) );
85 reload: function() {},
87 modelStateChanged: function(property, value) {
88 if (value == 'loading') {
89 // this.freeze('Ćadowanie...');
95 $currentPage: function() {
96 if(this.currentPage >= 0 && this.currentPage < this.$pages.length)
97 return $(this.$pages[this.currentPage]);
102 cleanPage: function($page) {
104 $('img', $page).unbind();
107 this.setPageViewOffset($page, {x:0, y:0});
110 pageDragStart: function(event)
112 this.dragStart = {x: event.clientX, y: event.clientY};
113 $(window).bind('mousemove.imagedrag', this.pageDrag.bind(this));
114 $(window).bind('mouseup.imagedrag', this.pageDragStop.bind(this));
116 this.$currentPage().css('cursor', 'move');
121 pageDrag: function(event)
123 if(!this.dragStart) return;
126 x: this.dragStart.x - event.clientX,
127 y: this.dragStart.y - event.clientY };
129 var offset = this.pageViewOffset( $(this.$pages[this.currentPage]) );
132 this.setPageViewOffset( $(this.$pages[this.currentPage]), offset);
134 this.dragStart = {x: event.clientX, y: event.clientY };
138 pageDragStop: function(event) {
139 this.$currentPage().css('cursor', 'auto');
141 this.dragStart = undefined;
142 $(window).unbind('mousemove.imagedrag');
143 $(window).unbind('mouseup.imagedrag');
148 pageViewOffset: function($page) {
149 var left = parseInt($page.css('left'));
150 var top = parseInt($page.css('top'));
152 return {x: left, y: top};
155 setPageViewOffset: function($page, offset) {
156 // check if the image will be actually visible
161 var vp_width = this.$pageListRoot.width();
162 var vp_height = this.$pageListRoot.height();
164 var width = $page.outerWidth();
165 var height = $page.outerHeight();
167 // console.log(offset, vp_width, vp_height, width, height);
168 if( offset.x+width-MARGIN < 0 ) {
169 // console.log('too much on the left', offset.x, -width)
170 offset.x = -width+MARGIN;
173 // too much on the right
174 if( offset.x > vp_width-MARGIN) {
175 offset.x = vp_width-MARGIN;
176 // console.log('too much on the right', offset.x, vp_width, width)
179 if( offset.y+height-MARGIN < 0)
180 offset.y = -height+MARGIN;
182 if( offset.y > vp_height-MARGIN)
183 offset.y = vp_height-MARGIN;
185 $page.css({left: offset.x, top: offset.y});
189 this.model.load(true);
192 renderImage: function(target)
194 var source = target.attr('ui:model');
195 var orig_width = parseInt(target.attr('ui:width'));
196 var orig_height = parseInt(target.attr('ui:height'));
198 target.html('<img src="' + source
199 + '" width="' + Math.floor(orig_width * this.pageZoom)
200 + '" height="' + Math.floor(orig_height * this.pageZoom)
205 'user-select': 'none',
206 '-webkit-user-select': 'none',
207 '-khtml-user-select': 'none',
208 '-moz-user-select': 'none'
210 attr('unselectable', 'on').
211 mousedown(this.pageDragStart.bind(this));
216 if(!this.model) return;
218 /* first unbind all */
219 if(this.$nextButton) this.$nextButton.unbind();
220 if(this.$prevButton) this.$prevButton.unbind();
221 if(this.$jumpButton) this.$jumpButton.unbind();
222 if(this.$pageInput) this.$pageInput.unbind();
224 if(this.$zoomInButton) this.$zoomInButton.unbind();
225 if(this.$zoomOutButton) this.$zoomOutButton.unbind();
226 if(this.$zoomResetButton) this.$zoomResetButton.unbind();
231 /* fetch important parts */
232 this.$pageListRoot = $('.image-gallery-page-list', this.element);
233 this.$pages = $('.image-gallery-page-container', this.$pageListRoot);
235 this.$nextButton = $('.image-gallery-next-button', this.element);
236 this.$prevButton = $('.image-gallery-prev-button', this.element);
237 this.$pageInput = $('.image-gallery-current-page', this.element);
239 // this.$zoomSelect = $('.image-gallery-current-zoom', this.element);
240 this.$zoomInButton = $('.image-gallery-zoom-in', this.element);
241 this.$zoomOutButton = $('.image-gallery-zoom-out', this.element);
242 this.$zoomResetButton = $('.image-gallery-zoom-reset', this.element);
245 this.$nextButton.click( this.nextPage.bind(this) );
246 this.$prevButton.click( this.prevPage.bind(this) );
247 this.$pageInput.change( this.jumpToPage.bind(this) );
249 // this.$zoomSelect.change( this.zoomChanged.bind(this) );
250 this.$zoomInButton.click( this.zoomInOneStep.bind(this) );
251 this.$zoomOutButton.click( this.zoomOutOneStep.bind(this) );
252 this.$zoomResetButton.click( this.zoomReset.bind(this) );
254 this.gotoPage(this.currentPage);
255 this.changePageZoom(this.pageZoom);
258 jumpToPage: function() {
259 this.gotoPage(parseInt(this.$pageInput.val())-1);
262 nextPage: function() {
263 this.gotoPage(this.currentPage + 1);
266 prevPage: function() {
267 this.gotoPage(this.currentPage - 1);
270 zoomReset: function() {
271 this.changePageZoom(1.0);
274 zoomInOneStep: function() {
275 var zoom = this.pageZoom + 0.1;
276 if(zoom > 3.0) zoom = 3.0;
277 this.changePageZoom(zoom);
280 zoomOutOneStep: function() {
281 var zoom = this.pageZoom - 0.1;
282 if(zoom < 0.3) zoom = 0.3;
283 this.changePageZoom(zoom);
286 changePageZoom: function(value) {
287 var current = this.$currentPage();
291 var alpha = value/this.pageZoom;
292 this.pageZoom = value;
294 var nwidth = current.attr('ui:width') * this.pageZoom;
295 var nheight = current.attr('ui:height') * this.pageZoom;
296 var off_top = parseInt(current.css('top'));
297 var off_left = parseInt(current.css('left'));
299 var vpx = this.$pageListRoot.width() * 0.5;
300 var vpy = this.$pageListRoot.height() * 0.5;
302 var new_off_left = vpx - alpha*(vpx-off_left);
303 var new_off_top = vpy - alpha*(vpy-off_top);
305 $('img', current).attr('width', nwidth);
306 $('img', current).attr('height', nheight);
308 this.setPageViewOffset(current, {
309 y: new_off_top, x: new_off_left
312 // this.$zoomSelect.val(this.pageZoom);
313 // console.log('Zoom is now', this.pageZoom);
318 console.log("Disposing gallery.");
319 this.model.removeObserver(this);
325 panels['gallery'] = ImageGalleryView;