+
+ $currentPage: function() {
+ if(this.currentPage >= 0 && this.currentPage < this.$pages.length)
+ return $(this.$pages[this.currentPage]);
+ else
+ return undefined;
+ },
+
+ cleanPage: function($page) {
+ $page.hide();
+ $('img', $page).unbind();
+
+ $page.empty();
+
+ this.setPageViewOffset($page, {x:0, y:0});
+ },
+
+ pageDragStart: function(event)
+ {
+ this.dragStart = {x: event.clientX, y: event.clientY};
+ $(window).bind('mousemove.imagedrag', this.pageDrag.bind(this));
+ $(window).bind('mouseup.imagedrag', this.pageDragStop.bind(this));
+
+ this.$currentPage().css('cursor', 'move');
+
+ return false;
+ },
+
+ pageDrag: function(event)
+ {
+ if(!this.dragStart) return;
+
+ var delta = {
+ x: this.dragStart.x - event.clientX,
+ y: this.dragStart.y - event.clientY };
+
+ var offset = this.pageViewOffset( $(this.$pages[this.currentPage]) );
+ offset.x -= delta.x;
+ offset.y -= delta.y;
+ this.setPageViewOffset( $(this.$pages[this.currentPage]), offset);
+
+ this.dragStart = {x: event.clientX, y: event.clientY };
+ return false;
+ },
+
+ pageDragStop: function(event) {
+ this.$currentPage().css('cursor', 'auto');
+
+ this.dragStart = undefined;
+ $(window).unbind('mousemove.imagedrag');
+ $(window).unbind('mouseup.imagedrag');
+
+ return false;
+ },
+
+ pageViewOffset: function($page) {
+ var left = parseInt($page.css('left'));
+ var top = parseInt($page.css('top'));
+
+ return {x: left, y: top};
+ },
+
+ setPageViewOffset: function($page, offset) {
+ // check if the image will be actually visible
+ // and correct
+ var MARGIN = 30;
+
+
+ var vp_width = this.$pageListRoot.width();
+ var vp_height = this.$pageListRoot.height();
+
+ var width = $page.outerWidth();
+ var height = $page.outerHeight();
+
+ // console.log(offset, vp_width, vp_height, width, height);
+ if( offset.x+width-MARGIN < 0 ) {
+ // console.log('too much on the left', offset.x, -width)
+ offset.x = -width+MARGIN;
+ }
+
+ // too much on the right
+ if( offset.x > vp_width-MARGIN) {
+ offset.x = vp_width-MARGIN;
+ // console.log('too much on the right', offset.x, vp_width, width)
+ }
+
+ if( offset.y+height-MARGIN < 0)
+ offset.y = -height+MARGIN;
+
+ if( offset.y > vp_height-MARGIN)
+ offset.y = vp_height-MARGIN;
+
+ $page.css({left: offset.x, top: offset.y});
+ },
+
+ renderImage: function(target)
+ {
+ var source = target.attr('ui:model');
+ var orig_width = parseInt(target.attr('ui:width'));
+ var orig_height = parseInt(target.attr('ui:height'));
+
+ target.html('<img src="' + source
+ + '" width="' + Math.floor(orig_width * this.pageZoom)
+ + '" height="' + Math.floor(orig_height * this.pageZoom)
+ + '" />');
+
+ $('img', target).
+ css({
+ 'user-select': 'none',
+ '-webkit-user-select': 'none',
+ '-khtml-user-select': 'none',
+ '-moz-user-select': 'none'
+ }).
+ attr('unselectable', 'on').
+ mousedown(this.pageDragStart.bind(this));
+ },
+
+ render: function()
+ {
+ console.log('rendering:', this._className);
+
+ /* first unbind all */
+ if(this.$nextButton) this.$nextButton.unbind();
+ if(this.$prevButton) this.$prevButton.unbind();
+ if(this.$jumpButton) this.$jumpButton.unbind();
+ if(this.$pageInput) this.$pageInput.unbind();
+
+ if(this.$zoomInButton) this.$zoomInButton.unbind();
+ if(this.$zoomOutButton) this.$zoomOutButton.unbind();
+ if(this.$zoomResetButton) this.$zoomResetButton.unbind();
+
+ /* render */
+ this.element.html(render_template(this.template, this));
+
+ /* fetch important parts */
+ this.$pageListRoot = $('.image-gallery-page-list', this.element);
+ this.$pages = $('.image-gallery-page-container', this.$pageListRoot);
+
+ this.$nextButton = $('.image-gallery-next-button', this.element);
+ this.$prevButton = $('.image-gallery-prev-button', this.element);
+ this.$pageInput = $('.image-gallery-current-page', this.element);
+
+ // this.$zoomSelect = $('.image-gallery-current-zoom', this.element);
+ this.$zoomInButton = $('.image-gallery-zoom-in', this.element);
+ this.$zoomOutButton = $('.image-gallery-zoom-out', this.element);
+ this.$zoomResetButton = $('.image-gallery-zoom-reset', this.element);
+
+ /* re-bind events */
+ this.$nextButton.click( this.nextPage.bind(this) );
+ this.$prevButton.click( this.prevPage.bind(this) );
+ this.$pageInput.change( this.jumpToPage.bind(this) );
+
+ // this.$zoomSelect.change( this.zoomChanged.bind(this) );
+ this.$zoomInButton.click( this.zoomInOneStep.bind(this) );
+ this.$zoomOutButton.click( this.zoomOutOneStep.bind(this) );
+ this.$zoomResetButton.click( this.zoomReset.bind(this) );
+
+ this.gotoPage(this.currentPage);
+ this.changePageZoom(this.pageZoom);
+ },
+
+ jumpToPage: function() {
+ this.gotoPage(parseInt(this.$pageInput.val())-1);
+ },
+
+ nextPage: function() {
+ this.gotoPage(this.currentPage + 1);
+ },
+
+ prevPage: function() {
+ this.gotoPage(this.currentPage - 1);
+ },
+
+ zoomReset: function() {
+ this.changePageZoom(1.0);
+ },
+
+ zoomInOneStep: function() {
+ var zoom = this.pageZoom + 0.1;
+ if(zoom > 3.0) zoom = 3.0;
+ this.changePageZoom(zoom);
+ },
+
+ zoomOutOneStep: function() {
+ var zoom = this.pageZoom - 0.1;
+ if(zoom < 0.3) zoom = 0.3;
+ this.changePageZoom(zoom);
+ },
+
+ changePageZoom: function(value) {
+ var current = this.$currentPage();
+
+ if(!current) return;
+
+ var alpha = value/this.pageZoom;
+ this.pageZoom = value;
+
+ var nwidth = current.attr('ui:width') * this.pageZoom;
+ var nheight = current.attr('ui:height') * this.pageZoom;
+ var off_top = parseInt(current.css('top'));
+ var off_left = parseInt(current.css('left'));
+
+ var vpx = this.$pageListRoot.width() * 0.5;
+ var vpy = this.$pageListRoot.height() * 0.5;
+
+ var new_off_left = vpx - alpha*(vpx-off_left);
+ var new_off_top = vpy - alpha*(vpy-off_top);
+
+ $('img', current).attr('width', nwidth);
+ $('img', current).attr('height', nheight);
+
+ this.setPageViewOffset(current, {
+ y: new_off_top, x: new_off_left
+ });
+
+ // this.$zoomSelect.val(this.pageZoom);
+ // console.log('Zoom is now', this.pageZoom);
+ },
fnp / redakcja.git / blobdiff