apps/wolnelektury_core/static/js/picture.js

   1
   2 (function($) {
   3   $.widget('wl.pictureviewer', {
   4
   5     options: {
   6       steps: 6, // steps of zoom
   7       max: 300, // max zoom in percent
   8       plus_button: undefined,
   9       minus_button: undefined
  10     },
  11
  12     _create: function() {
  13       var self = this;
  14       self._zoom = 0;
  15       self.initial_size = [
  16         self.element.width(),
  17         self.element.height()
  18       ];
  19       self.initial_position = self.element.offset();
  20
  21       self.element.css({
  22         'margin': 0,
  23         'position': 'absolute',
  24       });
  25       self.element.offset(self.initial_position);
  26
  27       if (self.options.plus_button)
  28         self.options.plus_button.click(
  29           function(ev) { self.zoom(1); });
  30       if (self.options.minus_button)
  31         self.options.minus_button.click(
  32           function(ev) { self.zoom(-1); });
  33
  34       function contain(event, ui) {
  35         var fix = self.allowedPosition(ui.position);
  36         console.log("fix: ", fix);
  37         if (fix !== undefined) {
  38           return false;
  39         };
  40       };
  41       self.element.draggable({drag: contain});
  42
  43       return self;
  44     },
  45
  46     zoom: function(steps) {
  47       var t = this._zoom + steps;
  48       return this.zoomTo(t);
  49     },
  50
  51     zoomForStep: function(step) {
  52       // 0 => initial
  53       // max_step-1 => max %
  54       return 100 + (this.options.max - 100) / this.options.steps * step
  55     },
  56
  57     zoomTo: function(level) {
  58       if (level < 0 || level > this.options.steps)
  59         return;
  60       var ratio = this.zoomForStep(level) / 100;
  61       var new_width  = ratio * this.initial_size[0];
  62       var new_height = ratio * this.initial_size[1];
  63       var target = {
  64         'width': new_width,
  65         'left': this.initial_position.left - (new_width - this.initial_size[0])/2,
  66         'top': this.initial_position.top - (new_height - this.initial_size[1])/2,
  67       };
  68       this._zoom = level;
  69       this.element.animate(target, 200); // default duration=400
  70     },
  71
  72     allowedPosition: function(off) {
  73       var x = undefined, fix_x = undefined;
  74       var y = undefined, fix_y = undefined;
  75       var w = this.element.width();
  76       var h = this.element.height();
  77       var cw = $(window).width();
  78       var ch = $(window).height();
  79       var off = off || this.element.offset();
  80
  81       if (w <= cw) {
  82         var x = off.left;
  83         if (x < 0)
  84           fix_x = 0;
  85         if (x + w > cw)
  86           fix_x = cw - w;
  87       } else {
  88         if (x > 0)
  89           fix_x = 0;
  90         if (x + w < cw)
  91           fix_x = cw - w;
  92       }
  93
  94       if (h <= ch) {
  95         var y = off.top;
  96         if (y < 0)
  97           fix_y = 0;
  98         if (y + h > ch)
  99           fix_y = ch - h;
 100       } else {
 101         if (y > 0)
 102           fix_y = 0;
 103         if (y + h < ch)
 104           fix_y = ch - h;
 105       }
 106       if (fix_x !== undefined || fix_y !== undefined)
 107         return { top: fix_y, left: fix_x };
 108       return undefined;
 109
 110     },
 111   });
 112 }(jQuery));
 113
 114
 115 $(document).ready(function(){
 116   $("img.canvas").pictureviewer({
 117     plus_button: $(".toolbar .button.plus"),
 118     minus_button: $(".toolbar .button.minus")
 119   });
 120 });
 121