+
+ $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();
+
+ 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, source) {
+ target.html('<img src="'+source+'" />');
+ $('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() {
+ /* first unbind all */
+
+ // this.pageListElement
+ if(this.$nextButton) this.$nextButton.unbind();
+ if(this.$prevButton) this.$prevButton.unbind();
+ if(this.$jumpButton) this.$jumpButton.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);
+
+ /* re-bind events */
+ this.$nextButton.click( this.nextPage.bind(this) );
+ this.$prevButton.click( this.prevPage.bind(this) );
+
+ this.$pageInput.change( this.jumpToPage.bind(this) );
+ },
+
+ jumpToPage: function() {
+ this.gotoPage(parseInt(this.$pageInput.val())-1);
+ },
+
+ nextPage: function() {
+ this.gotoPage(this.currentPage + 1);
+ },
+
+ prevPage: function() {
+ this.gotoPage(this.currentPage - 1);
+ },
fnp / redakcja.git / commitdiff