X-Git-Url: https://git.mdrn.pl/wolnelektury.git/blobdiff_plain/1ca6872afcca0bb6fb4c0c11fdad3b760a2362a1..1f9103b1e752a6c41d2304bf5e41a7d6ae0c45c8:/apps/wolnelektury_core/static/js/picture.js

diff --git a/apps/wolnelektury_core/static/js/picture.js b/apps/wolnelektury_core/static/js/picture.js
index dca2d1329..7cbb67547 100644
--- a/apps/wolnelektury_core/static/js/picture.js
+++ b/apps/wolnelektury_core/static/js/picture.js
@@ -4,25 +4,60 @@
 
     options: {
       steps: 6, // steps of zoom
-      max: 300, // max zoom in percent
+      max: -1, // max zoom in percent
       plus_button: undefined,
-      minus_button: undefined
+      minus_button: undefined,
+      height: 500, // height to scale to initially
     },
 
+
     _create: function() {
       var self = this;
+      /* Calibrate */
       self._zoom = 0;
+
+      // the initial thumbnailed picture
+
+
+      var img = self.element.find('img.initial').get(0);
+
       self.initial_size = [ 
-	self.element.width(),
-	self.element.height()
+	img.naturalWidth,
+	img.naturalHeight
       ];
+
+      self.element.width(self.initial_size[0]);
+      self.element.height(self.initial_size[1]);
+      
       self.initial_position = self.element.offset();
 
+      var original = self.element.find('img.original').get(0);
+      self._original = false;
+      self.original_loeaded = undefined; // callback
+      self._original_loaded = false;
+
+      self.spinner = $("#spinner").progressSpin();
+
+      $(original).load(function() {
+	self._original_loaded = true;
+	self.spinner.stop();
+	var cb = self.original_loaded;
+	self.original_loaded = undefined;
+	if (cb)
+	  cb()
+      });
+      
+      if (self.options.max <= 0) {
+	self.options.max = original.naturalWidth
+	  * 100 / self.initial_size[0];
+      }
+
       self.element.css({
 	'margin': 0,
-	'position': 'absolute',
       });
+
       self.element.offset(self.initial_position);
+      self.element.draggable({containment:"parent"});
 
       if (self.options.plus_button)
 	self.options.plus_button.click(
@@ -31,19 +66,47 @@
 	self.options.minus_button.click(
 	  function(ev) { self.zoom(-1); });
 
-      function contain(event, ui) {
-	var fix = self.allowedPosition(ui.position);
-	console.log("fix: ", fix);
-	if (fix !== undefined) {
-	  return false;
-	};
-      };
-      self.element.draggable({drag: contain});
-
+      self.options.areas_links.hover(function() {
+	$this = $(this);
+	var coords = $this.data("coords");
+	this._picture_mark = self.createMark({
+	  label: $this.text(),
+	  coords: coords,
+	});
+      }, function() {
+	$(this._picture_mark).remove();
+	this._picture_mark = undefined;
+      });
       return self;
     },
 
+    natural_size: function() { 
+      var img = this.element.find('img').get(0);
+      return [ img.naturalWidth, img.naturalHeight ] 
+    },
+
+    currentZoom: function() { return this._zoom; },
+
+    initOriginal: function() {
+      var self = this;
+      function subst_original() {
+	self.element.find("img.initial").remove();
+	self.element.find("img.loading").removeClass("loading");
+	self._original = true;
+      }
+      if (!this._original) {
+	if (this._original_loaded) {
+	  return subst_original();
+	} else {
+	  self.original_loaded = subst_original;
+	  self.spinner.start();
+	}
+      }
+
+    },
+
     zoom: function(steps) {
+      this.initOriginal();
       var t = this._zoom + steps;
       return this.zoomTo(t);
     },
@@ -62,9 +125,14 @@
       var new_height = ratio * this.initial_size[1];
       var target = {
 	'width': new_width,
-	'left': this.initial_position.left - (new_width - this.initial_size[0])/2,
-	'top': this.initial_position.top - (new_height - this.initial_size[1])/2,
+	'left': Math.max(0, 
+			 this.initial_position.left 
+			 - (new_width - this.initial_size[0])/2),
+	'top': Math.max(0, 
+			this.initial_position.top 
+			- (new_height - this.initial_size[1])/2),
       };
+
       this._zoom = level;
       this.element.animate(target, 200); // default duration=400
     },
@@ -108,14 +176,60 @@
       return undefined;
 
     },
+
+    // mark
+    // {
+    //  label: "...",
+    //  coords: [x, y, w, h]
+    // }
+    createMark: function(mark) {
+      var $mark = $('<div class="mark"><div class="label">' + 
+		    mark.label + '</div></div>');
+      var ratio = this.zoomForStep(this.currentZoom()) *
+	this.initial_size[0] / (100 * this.natural_size()[0]);
+      var scale = function (v) { 
+	return v * ratio; 
+      }
+      if (mark.coords[1][0] < 0 || mark.coords[1][1] < 0) { // whole
+	var s = self.natural_size();
+	if (mark.coords[1][0] < 0) mark.coords[1][0] = s[0];
+	if (mark.coords[1][1] < 0) mark.coords[1][1] = s[1];
+      }
+
+      var coords = [[scale(mark.coords[0][0]), scale(mark.coords[0][1])],
+		    [scale(mark.coords[1][0]), scale(mark.coords[1][1])]];
+      this.element.append($mark);
+      $mark.width(coords[1][0] - coords[0][0]);
+      $mark.height(coords[1][1] - coords[0][1]);
+      $mark.css({left: coords[0][0], top: coords[0][1]});
+      return $mark.get(0);
+    },
   });
 }(jQuery));
 
 
 $(document).ready(function(){
-  $("img.canvas").pictureviewer({
+  $(".picture-wrap").pictureviewer({
     plus_button: $(".toolbar .button.plus"),
-    minus_button: $(".toolbar .button.minus")
+    minus_button: $(".toolbar .button.minus"),
+    areas_links: $("#picture-objects a, #picture-themes a"),
+  });
+
+  $.highlightFade.defaults.speed = 3000;
+
+  $('.toolbar a.dropdown').each(function() {
+    $t = $(this);
+    $($t.attr('href')).hide().insertAfter(this);
   });
+
+  $('.toolbar a.dropdown').toggle(function() {
+    $(this).addClass('selected');
+    $($(this).attr('href')).slideDown('fast');
+  }, function() {
+    $(this).removeClass('selected');
+    $($(this).attr('href')).slideUp('fast');
+  });
+
+
 });