2464220e49fa76bf9a7a5ef8c4a1af0dfcae37d6
[wolnelektury.git] / apps / wolnelektury_core / static / js / picture.js
1
2 (function($) {
3   $.widget('wl.pictureviewer', {
4     
5     options: {
6       step: 20, // step in % of initial image
7       plus_button: undefined,
8       minus_button: undefined,
9     },
10     ORIGINAL_LOADING: 0, 
11     ORIGINAL_AVAILABLE: 1, 
12     ORIGINAL_SHOWN: 2,
13
14     _create: function() {
15       var self = this;
16       self.initial_size = [ 
17         self.element.data('width'),
18         self.element.data('height') 
19       ];
20       self.original_size = [
21         self.element.data('original-width'),
22         self.element.data('original-height')
23       ];
24       self._zoom = 0;
25       self._ratio = 1.0;
26
27       self.original = $('<img src="'+ self.element.attr('data-original-url') +'">');
28       
29       self._original_avaialble = self.ORIGINAL_LOADING;
30       function original_loaded() {
31         self._original_avaialble = self.ORIGINAL_AVAILABLE;
32         self.options.plus_button.removeClass('inactive');
33         self.options.minus_button.removeClass('inactive');
34         console.log("Original image available, sizes initial: " + self.initial_size + ", original: " + self.original_size);
35       };
36       self.original.load(original_loaded);
37
38       self.element.width(self.initial_size[0]);
39       self.element.height(self.initial_size[1]);
40
41       if (self.options.plus_button)
42         self.options.plus_button.click(
43           function(ev) { self.zoom(1); });
44       if (self.options.minus_button)
45         self.options.minus_button.click(
46           function(ev) { self.zoom(-1); });
47
48       self._initial_mark = null;
49       function clean_initial_mark() {
50         if (self._initial_mark) {
51           self._initial_mark.remove();
52           self._initial_mark = null;
53         }
54       }
55       var initial_hash = window.location.hash;
56       if (initial_hash) {
57         var mk = null,
58         objectPrefix = '#object-',
59         themePrefix = '#theme-';
60         if (initial_hash.substr(0, objectPrefix.length) === objectPrefix) {
61           $("[href=#picture-objects]").trigger('click');
62         } else if (initial_hash.substr(0, themePrefix.length) === themePrefix) {
63           $("[href=#picture-themes]").trigger('click');
64         }
65         mk = $("[href=" + initial_hash + "]").eq(0);
66         self._initial_mark = self.createMark({
67           label: mk.text(),
68           coords: mk.data('coords')
69         });
70       }      
71
72
73       self.options.areas_links.hover(function() {
74         clean_initial_mark();
75         $this = $(this);
76         var coords = $this.data("coords");
77         this._picture_mark = self.createMark({
78 //        label: $this.text(),
79           coords: coords,
80         });
81       }, function() {
82         $(this._picture_mark).remove();
83         this._picture_mark = undefined;
84       }).click(function(ev) {
85         ev.preventDefault();
86         var $mark = self.element.find('.mark').eq(0);
87         var markPos = $mark.offset();
88         markPos = [markPos.left, markPos.top];
89         var markSize = [ $mark.width(), $mark.height() ]
90         var wSize = [ window.innerWidth, window.innerHeight ];
91         window.scrollTo(
92           markPos[0] + markSize[0]/2 - wSize[0]/2,
93           markPos[1] + markSize[1]/2 - wSize[1]/2       
94         );
95         
96       });
97
98       
99
100       return self;
101     },
102
103     currentSize: function() {
104       return [this.element.width(), this.element.height() ];
105     },
106
107     currentZoom: function() { return this._zoom; },
108
109     initOriginal: function() {
110       if (this._original_avaialble > this.ORIGINAL_LOADING && 
111           this._original_avaialble < this.ORIGINAL_SHOWN) {
112         this.element.css({'background-image': 'url('+ this.original.attr('src')+')', 'background-size':  this.initial_size[0]+'px'});
113         this._original_avaialble = this.ORIGINAL_SHOWN;
114       };
115     },
116
117     zoom: function(steps) {
118       this.initOriginal();
119       var t = this._zoom + steps;
120       return this.zoomTo(t);
121     },
122
123     zoomForStep: function(step) {
124       // 0 => initial
125       // max_step-1 => max %
126       if (step < 0) step = 0;
127       var zoomperc = 100 + step * this.options.step;
128       if (zoomperc * this.initial_size[0] > this.original_size[0] * 100) {
129         zoomperc = this.original_size[0] * 100 / this.initial_size[0];
130       };
131       return zoomperc;
132     },
133
134     zoomTo: function(level) {
135       var ratio = this.zoomForStep(level) / 100;
136       var new_width  = ratio * this.initial_size[0];
137       var new_height = ratio * this.initial_size[1];
138       var cs = this.currentSize();
139       if (new_width == cs[0]) 
140         return;
141
142       var target = {
143         'width': new_width + 'px',
144         'height': new_height + 'px',
145         'background-size': new_width + 'px',
146       };
147
148       this._zoom = level;
149       this._ratio = ratio;
150
151       this.element.css(target);
152       if (this._initial_mark) {
153         this._initial_mark = this.redrawMark(this._initial_mark);
154       }
155
156     },
157
158     allowedPosition: function(off) {
159       var x = undefined, fix_x = undefined;
160       var y = undefined, fix_y = undefined;
161       var w = this.element.width();
162       var h = this.element.height();
163       var cw = $(window).width();
164       var ch = $(window).height();
165       var off = off || this.element.offset();
166
167       if (w <= cw) {
168         var x = off.left;
169         if (x < 0) 
170           fix_x = 0;
171         if (x + w > cw)
172           fix_x = cw - w;
173       } else {
174         if (x > 0)
175           fix_x = 0;
176         if (x + w < cw)
177           fix_x = cw - w;
178       }
179
180       if (h <= ch) {
181         var y = off.top;
182         if (y < 0)
183           fix_y = 0;
184         if (y + h > ch)
185           fix_y = ch - h;
186       } else {
187         if (y > 0)
188           fix_y = 0;
189         if (y + h < ch)
190           fix_y = ch - h;
191       }
192       if (fix_x !== undefined || fix_y !== undefined)
193         return { top: fix_y, left: fix_x };
194       return undefined;
195
196     },
197     redrawMark: function(mark) {
198       var $mark = $(mark);
199       var $newmark = this.createMark($mark.data('mark'));
200       $mark.remove();
201       return $newmark;
202     },
203     // mark
204     // {
205     //  label: "...",
206     //  coords: [x, y, w, h]
207     // }
208     createMark: function(mark) {
209       if (mark.label === undefined)
210         mark.label = '';
211       var $mark = $('<div class="mark"><div class="label">' + 
212                     mark.label + '</div></div>');
213       var cs = this.currentSize()
214       var ratio = cs[0] / this.original_size[0];
215       var scale = function (v) { 
216         return v * ratio; 
217       }
218       if (mark.coords[1][0] < 0 || mark.coords[1][1] < 0) { // whole
219         var s = this.original_size;
220         if (mark.coords[1][0] < 0) mark.coords[1][0] = s[0];
221         if (mark.coords[1][1] < 0) mark.coords[1][1] = s[1];
222       }
223
224       var coords = [[scale(mark.coords[0][0]), scale(mark.coords[0][1])],
225                     [scale(mark.coords[1][0]), scale(mark.coords[1][1])]];
226       this.element.append($mark);
227       $mark.width(coords[1][0] - coords[0][0]);
228       $mark.height(coords[1][1] - coords[0][1]);
229       $mark.css({left: coords[0][0], top: coords[0][1]});
230
231       $mark.data('mark', mark);
232       return $mark.get(0);
233     },
234   });
235
236
237 $(document).ready(function() {
238   $.highlightFade.defaults.speed = 3000;
239
240   $('#menu .dropdown').each(function() {
241     $t = $(this);
242     $($t.attr('href')).hide().insertAfter(this);
243   });
244
245   $(".picture-wrap").pictureviewer({
246     plus_button: $(".button.plus"),
247     minus_button: $(".button.minus"),
248     areas_links: $("#picture-objects a, #picture-themes a"),
249   });
250
251 });
252
253 }(jQuery));