source: extensions/modus/js/thumb.arrange.js @ 26836

Last change on this file since 26836 was 26836, checked in by rvelices, 10 years ago

modus ui simplification

File size: 4.8 KB
Line 
1
2function RVGTLine(margin, rowHeight) {
3        this.elements = new Array;
4        this.margin = margin;
5        this.rowHeight = rowHeight;
6        this.maxHeight = 0;
7}
8
9RVGTLine.prototype = {
10        width: 0,
11        elementsWidth: 0,
12        firstThumbIndex: 0,
13
14        add: function($elt, absIndex) {
15                if (this.elements.length === 0)
16                        this.firstThumbIndex = absIndex;
17                if (!$elt.data("w"))
18                {
19                        var w=$elt.width(), h=$elt.height();
20                        if (h > this.rowHeight) {
21                                w = Math.round(w * this.rowHeight/h);
22                                h = this.rowHeight;
23                        }
24                        $elt.data("w", w)
25                                .data("h", h);
26                }
27
28                var eltObj = {
29                        $elt: $elt,
30                        w: $elt.data("w"),
31                        h: $elt.data("h")
32                };
33                this.elements.push(eltObj);
34
35                if (eltObj.h > this.maxHeight)
36                        this.maxHeight = eltObj.h;
37
38                this.width += this.margin + eltObj.w;
39                this.elementsWidth += eltObj.w;
40        },
41
42        clear: function() {
43                if (!this.elements.length) return;
44                this.width = this.elementsWidth = 0;
45                this.maxHeight = 0;
46                this.elements.length = 0;
47        }
48}
49
50
51function RVGThumbs(options) {
52        this.opts = options;
53
54        this.$thumbs = $('#thumbnails');
55        if (this.$thumbs.length==0) return;
56        this.$thumbs.css('text-align', 'left');
57
58        this.opts.extraRowHeight = 0;
59        if (window.devicePixelRatio > 1) {
60                var dpr = window.devicePixelRatio;
61                this.opts.resizeThreshold = 1.01;
62                this.opts.resizeFactor = 0.95;
63                this.opts.extraRowHeight = 6; /*loose sharpness but only for small screens when we could "almost" fit with full sharpness*/
64                this.opts.rowHeight = Math.round(this.opts.rowHeight / dpr ) + this.opts.extraRowHeight;
65        }
66        else {
67                this.opts.resizeThreshold = 1.1; /*if row is less than 10% larger than available width, distribute extra width through cropping*/
68                this.opts.resizeFactor = 0.8;/* when row is more than 10% larger than available width, distribute extra width 80% through resizing and 20% through cropping*/
69        }
70        this.process();
71
72        var that = this;
73        $(window).on('resize', function() {
74                if (Math.abs(that.$thumbs.width() - that.prevContainerWidth)>1)
75                        that.process();
76        })
77                .on('RVTS_loaded', function(evt, down) {
78                        that.process( down && that.$thumbs.width() == that.prevContainerWidth ? that.prevLastLineFirstThumbIndex : 0);
79                } );
80
81        if (!$.isReady) {
82                $(document).ready( function() {
83                        if ( that.$thumbs.width() < that.prevContainerWidth )
84                                that.process();
85                        } );
86        }
87}
88
89RVGThumbs.prototype = {
90        prevContainerWidth:0,
91        prevLastLineFirstThumbIndex: 0,
92
93        process: function(startIndex) {
94                startIndex = startIndex ? startIndex : 0;
95                var containerWidth  = this.$thumbs.width()
96                        , maxExtraMarginPerThumb = 1;
97                this.prevContainerWidth = containerWidth;
98
99                var $elts = $('li>a>img', this.$thumbs)
100                        , line  = new RVGTLine(this.opts.hMargin, this.opts.rowHeight);
101
102                for (var i=startIndex; i<$elts.length; i++) {
103                        var $elt = $( $elts[i] );
104
105                        line.add($elt, i);
106                        if (line.width >= containerWidth - maxExtraMarginPerThumb * line.elements.length) {
107                                this.processLine(line, containerWidth);
108                                line.clear();
109                        }
110                };
111
112                if(line.elements.length)
113                        this.processLine(line, containerWidth, true);
114                this.prevLastLineFirstThumbIndex = line.firstThumbIndex;
115        },
116
117        processLine: function(line, containerWidth, lastLine) {
118                var toRecover, eltW, eltH
119                        , rowHeight = line.maxHeight ? line.maxHeight : line.elements[0].h;
120
121                if (line.width / containerWidth > this.opts.resizeThreshold) {
122                        var ratio = line.elementsWidth / (line.elementsWidth + containerWidth - line.width);
123                        var adjustedRowHeight = rowHeight / (1 + (ratio-1) * this.opts.resizeFactor );
124                        adjustedRowHeight = 6 * Math.round( adjustedRowHeight/6 );
125                        if (adjustedRowHeight < rowHeight / ratio ) {
126                                adjustedRowHeight = Math.ceil( rowHeight / ratio );
127                                var missing = this.opts.rowHeight - this.opts.extraRowHeight - adjustedRowHeight;
128                                if (missing>0 && missing<6)
129                                        adjustedRowHeight += missing;
130                        }
131                        if (adjustedRowHeight < rowHeight)
132                                rowHeight = adjustedRowHeight;
133                }
134                else if (lastLine)
135                        rowHeight = Math.min( rowHeight, this.opts.rowHeight - this.opts.extraRowHeight);
136
137                toRecover = line.width - containerWidth;
138                if (lastLine)
139                        toRecover = 0;
140
141                for(var i=0; i<line.elements.length; i++) {
142                        var eltObj = line.elements[i]
143                                , eltW=eltObj.w
144                                , eltH=eltObj.h
145                                , eltToRecover;
146
147                        if (i==line.elements.length-1)
148                                eltToRecover = toRecover;
149                        else
150                                eltToRecover = Math.round(toRecover * eltW / line.elementsWidth);
151
152                        toRecover -= eltToRecover;
153                        line.elementsWidth -= eltW;
154
155                        if (eltH > rowHeight ) {
156                                eltW = Math.round( eltW * rowHeight/eltObj.h );
157                                eltH = rowHeight;
158                                eltToRecover -= eltObj.w - eltW;
159                                if (lastLine)
160                                        eltToRecover = 0;
161                        }
162
163                        this.reposition(eltObj.$elt, eltW, eltH, eltW-eltToRecover, rowHeight);
164                }
165        },
166
167        reposition: function($img, imgW, imgH, liW, liH) {
168                $img.attr("width", imgW)
169                        .attr("height", imgH);
170
171                $img.closest("li").css( {
172                        width: liW+"px",
173                        height: liH+"px"
174                });
175
176                $img.parent("a").css( {
177                        left: Math.round((liW-imgW)/2)+"px",
178                        top: Math.round((liH-imgH)/2)+"px"
179                });
180        }
181
182}
183
Note: See TracBrowser for help on using the repository browser.