source: extensions/GThumb/js/gthumb.js @ 12691

Last change on this file since 12691 was 12691, checked in by patdenice, 12 years ago

Display cache informations on admin page.
Add possibility to clear the cache.
Resize method is now applied on big images.

File size: 6.9 KB
Line 
1var GThumb = {
2
3  selector: null,
4  max_height: 200,
5  margin: 10,
6  max_first_thumb_width: 0.7,
7  big_thumb: null,
8  small_thumb: null,
9  method: 'crop',
10  t: new Array,
11
12  queue: jQuery.manageAjax.create('queued', {
13    queue: true, 
14    cacheResponse: false,
15    maxRequests: 2,
16    preventDoubleRequests: false
17  }),
18
19  build: function (selector) {
20
21    this.selector = selector;
22    jQuery(selector+' img').each(function() {
23      id = parseInt(this.id.substring(2));
24      width = parseInt(jQuery(this).attr('width'));
25      height = parseInt(jQuery(this).attr('height'));
26      GThumb.t.push({id:id,width:width,height:height});
27
28      if (jQuery(this).attr('src') == '') {
29        GThumb.addToQueue(id, 1);
30      }
31    });
32
33    jQuery.resize.throttleWindow = false;
34    jQuery.resize.delay = 50;
35    jQuery(selector).resize(function() { GThumb.process(); });
36    this.process();
37  },
38
39  addToQueue: function (id, loop) {
40
41    this.queue.add({
42      type: 'GET', 
43      url: 'ws.php', 
44      data: {
45        method: 'pwg.images.getGThumbPlusThumbnail',
46        image_id: id,
47        format: 'json'
48      },
49      dataType: 'json',
50      success: function(data) {
51        if (data.stat == 'ok') {
52          jQuery('#gt'+data.result.id).prop('src', data.result.src).show();
53        } else if (loop < 4) {
54          GThumb.addToQueue(id, ++loop);
55        }
56      },
57      error: function() {
58        if (loop < 4) GThumb.addToQueue(id, ++loop);
59      }
60    });
61  },
62
63  process: function() {
64
65    var width_count = this.margin;
66    var line = 1;
67    var round_rest = 0;
68    var main_width = jQuery(this.selector).width();
69    var first_thumb = jQuery(this.selector+' img:first');
70    var best_size = {width:1,height:1};
71
72    if (this.big_thumb != null && this.big_thumb.height < main_width * this.max_first_thumb_width) {
73
74      // Compute best size for landscape picture (we choose bigger height)
75      min_ratio = Math.min(1.05, this.big_thumb.width/this.big_thumb.height);
76
77      for(width = this.big_thumb.width; width/best_size.height>=min_ratio; width--) {
78        width_count = this.margin;
79        height = this.margin;
80        max_height = 0;
81        available_width = main_width - (width + this.margin);
82        line = 1;
83        for (i=1;i<this.t.length;i++) {
84
85          width_count += this.t[i].width + this.margin;
86          max_height = Math.max(this.t[i].height, max_height);
87
88          if (width_count > available_width) {
89            ratio = width_count / available_width;
90            height += Math.round(max_height / ratio);
91            line++;
92            max_height = 0;
93            width_count = this.margin;
94            if (line > 2) {
95              if (height >= best_size.height && width/height >= min_ratio && height<=this.big_thumb.height) {
96                best_size = {width:width,height:height}
97              }
98              break;
99            }
100          }
101        }
102        if (line <= 2) {
103          if (max_height == 0 || line == 1) {
104            height = this.big_thumb.height;
105          } else {
106            height += max_height;
107          }
108          if (height >= best_size.height && width/height >= min_ratio && height<=this.big_thumb.height) {
109            best_size = {width:width,height:height}
110          }
111        }
112      }
113
114      if (this.big_thumb.src != first_thumb.attr('src')) {
115        first_thumb.attr('src', this.big_thumb.src).attr({width:this.big_thumb.width,height:this.big_thumb.height});
116        this.t[0].width = this.big_thumb.width;
117        this.t[0].height = this.big_thumb.height;
118      }
119      this.t[0].crop = best_size.width;
120      this.resize(first_thumb, this.big_thumb.width, this.big_thumb.height, best_size.width, best_size.height, true);
121
122    }
123
124    if (best_size.width == 1) {
125      if (this.small_thumb != null && this.small_thumb.src != first_thumb.attr('src')) { 
126        first_thumb.prop('src', this.small_thumb.src).attr({width:this.small_thumb.width,height:this.small_thumb.height});
127        this.t[0].width = this.small_thumb.width;
128        this.t[0].height = this.small_thumb.height;
129      }
130      this.t[0].crop = false;
131    }
132
133    width_count = this.margin;
134    max_height = 0;
135    line = 1;
136    thumb_process = new Array;
137
138    for (i=this.t[0].crop!=false?1:0;i<this.t.length;i++) {
139
140      width_count += this.t[i].width + this.margin;
141      max_height = Math.max(this.t[i].height, max_height);
142      thumb_process.push(this.t[i]);
143
144      available_width = main_width;
145      if (line <= 2 && this.t[0].crop !== false) {
146        available_width -= (this.t[0].crop + this.margin);
147      }
148
149      if (width_count > available_width) {
150
151        last_thumb = this.t[i].id;
152        ratio = width_count / available_width;
153        new_height = Math.round(max_height / ratio);
154        round_rest = 0;
155        width_count = this.margin;
156
157        for (j=0;j<thumb_process.length;j++) {
158
159          if (thumb_process[j].id == last_thumb) {
160            new_width = available_width - width_count - this.margin;
161          } else {
162            new_width = (thumb_process[j].width + round_rest) / ratio;
163            round_rest = new_width - Math.round(new_width);
164            new_width = Math.round(new_width);
165          }
166          this.resize(jQuery('#gt'+thumb_process[j].id), thumb_process[j].width, thumb_process[j].height, new_width, new_height, false);
167
168          width_count += new_width + this.margin;
169        }
170        thumb_process = new Array;
171        width_count = this.margin;
172        max_height = 0;
173        line++;
174      }
175    }
176
177    // Last line does not need to be cropped
178    for (j=0;j<thumb_process.length;j++) {
179      this.resize(jQuery('#gt'+thumb_process[j].id), thumb_process[j].width, thumb_process[j].height, thumb_process[j].width, max_height, false);
180    }
181
182    if (main_width != jQuery(this.selector).width()) {
183      this.process();
184    }
185  },
186
187  resize: function(thumb, width, height, new_width, new_height, is_big) {
188
189    if (this.method == 'resize') {
190      real_width = Math.min(new_width, width);
191      real_height = Math.min(new_height, height);
192      width_crop = 0;
193      height_crop = 0;
194
195      if (is_big) {
196        if (width - new_width > height - new_height) {
197          real_width = Math.round(new_height * width / height);
198          width_crop = Math.round((real_width - new_width)/2);
199        } else {
200          real_height = Math.round(new_width * height / width);
201          height_crop = Math.round((real_height - new_height)/2);
202        }
203      }
204      thumb.css({
205        height: real_height+'px',
206        width: real_width+'px'
207      });
208    } else {
209      thumb.css({height: '', width: ''});
210      height_crop = Math.round((height - new_height)/2);
211      width_crop = Math.round((width - new_width)/2);
212    }
213
214    thumb.parents('li').css({
215      height: new_height+'px',
216      width: new_width+'px'
217    });
218    thumb.parent('a').css({
219      clip: 'rect('+height_crop+'px, '+(new_width+width_crop)+'px, '+(new_height+height_crop)+'px, '+width_crop+'px)',
220      top: -height_crop+'px',
221      left: -width_crop+'px'
222    });
223  }
224}
Note: See TracBrowser for help on using the repository browser.