https://www.replanter-notre-foret-provencale.com/Ext/Resources?a=4…&q=AmQ6BYeGFckt3H0SDsnghg,,

1
2WS.Namespace.Create('WS.Content.Image', (function ()
3{
4    var Class = function (element, control, data)
5    {
6        if (!element) throw "element is null";
7        if (!control) throw "control is null";
8        if (!data) throw "data is null";
9
10        this.element = element;
11        this.HtmlElement = {};
12        this.HtmlElement.Img = this.element.find("img");
13
14        this.data = data;
15        this.width = null;
16        this.height = null;
17
18        // For Editor Implement
19        if (control.onLoaded) control.onLoaded(this);
20    };
21
22    // PRIVATE
23
24    var setImgDimensions = function (width, height)
25    {
26        this.HtmlElement.Img.css({ "width": parseInt(width) + "px", "height": parseInt(height) + "px" });
27    };
28
29    var setImgSrc = function (width)
30    {
31        var Width = (this.imgWidth && typeof this.imgWidth === "number") ? this.imgWidth : width;
32        var src = "/file/si1851374/" + this.data.Media.FileName + "-fi" + this.data.Media.IdFile + "x" + parseInt(Width) + "." + this.data.Media.Extension;
33        this.HtmlElement.Img.attr("src", src);
34    };
35
36    var CenterCover = function (width, height)
37    {
38        // Validation
39        if (!width || typeof width != "number" || width < 0) throw "bad width!";
40        if ((!height && height != 0) || typeof height != "number" || height < 0) throw "bad height!";
41
42        // center image cover
43        var WidthOri = this.data.Media.WidthOri;
44        var HeightOri = this.data.Media.HeightOri;
45        var imgWidth = 0;
46        var imgHeight = 0;
47
48        if (WidthOri > HeightOri) {
49            // width base
50            if (WidthOri / HeightOri < width / height) {
51                imgWidth = width;
52                imgHeight = parseInt(HeightOri) * parseInt(width) / parseInt(WidthOri);
53            }
54            else {
55                imgWidth = parseInt(WidthOri) * parseInt(height) / parseInt(HeightOri);
56                imgHeight = height;
57            }
58        }
59        else {
60            // height base
61            if (HeightOri / WidthOri < height / width) {
62                imgWidth = parseInt(WidthOri) * parseInt(height) / parseInt(HeightOri);
63                imgHeight = height;
64            }
65            else {
66                imgWidth = width;
67                imgHeight = parseInt(HeightOri) * parseInt(width) / parseInt(WidthOri);
68            }
69        }
70
71        // Positionning...
72        var left = (width - imgWidth) / 2;
73        var top = (height - imgHeight) / 2;
74        this.HtmlElement.Img.css({ "left": Math.round(parseInt(left)) + "px", "top": Math.round(parseInt(top)) + "px" });
75
76        // Dimensions With Src...
77        this.imgWidth = imgWidth;
78        this.imgHeight = imgHeight;
79        setImgDimensions.call(this, imgWidth, imgHeight);
80    };
81
82    var CropInsideBox = function (width, height)
83    {
84        // Validation
85        if (!width || typeof width != "number" || width < 0) throw "bad width!";
86        if ((!height && height != 0) || typeof height != "number" || height < 0) throw "bad height!";
87
88        var Me = this;
89
90        var Crop = this.data.Media.Crop;
91        if (Crop == null) throw "crop must exist!";
92        var WidthOri = this.data.Media.WidthOri;
93        var HeightOri = this.data.Media.HeightOri;
94        var imgWidth = 0;
95        var imgHeight = 0;
96
97        // X1,Y1 X2,Y2
98        var x1 = parseFloat(Crop.Position.X1) / 100 * width;
99        var x2 = parseFloat(Crop.Position.X2) / 100 * width;
100        var y1 = parseFloat(Crop.Position.Y1) / 100 * height;
101        var y2 = parseFloat(Crop.Position.Y2) / 100 * height;
102
103        function WidthBased()
104        {
105            imgWidth = (WidthOri * (y2 - y1) / HeightOri);
106            imgHeight = y2 - y1;
107        }
108
109        function HeightBased()
110        {
111            imgWidth = x2 - x1;
112            imgHeight = (HeightOri * (x2 - x1) / WidthOri);
113        }
114
115        if (WidthOri > HeightOri) {
116            // width base
117            if (((WidthOri * (y2 - y1) / HeightOri)) <= (x2 - x1)) WidthBased();
118            else HeightBased();
119        }
120        else {
121            // height base
122            if (((HeightOri * (x2 - x1) / WidthOri)) <= (y2 - y1)) HeightBased();
123            else WidthBased();
124        }
125
126        var top = Math.round(y1);
127        var right = Math.round(width - x2);
128        var bottom = Math.round(height - y2);
129        var left = Math.round(x1);
130
131        if (top < bottom) this.HtmlElement.Img.css("top", parseInt(top) + "px");
132        else this.HtmlElement.Img.css("bottom", parseInt(bottom) + "px");
133
134        if (right < left) this.HtmlElement.Img.css("right", parseInt(right) + "px");
135        else this.HtmlElement.Img.css("left", parseInt(left) + "px");
136
137        // Dimensions With Src...
138        this.imgWidth = imgWidth;
139        this.imgHeight = imgHeight;
140        setImgDimensions.call(this, imgWidth, imgHeight);
141    };
142
143    var CropInsideOutSideBox = function (width, height)
144    {
145        // Validation
146        if (!width || typeof width != "number" || width < 0) throw "bad width!";
147        if ((!height && height != 0) || typeof height != "number" || height < 0) throw "bad height!";
148
149        var Me = this;
150
151        var Crop = this.data.Media.Crop;
152        if (Crop == null) throw "crop must exist!";
153        var WidthOri = this.data.Media.WidthOri;
154        var HeightOri = this.data.Media.HeightOri;
155        var imgWidth = 0;
156        var imgHeight = 0;
157        var x1 = parseFloat(Crop.Position.X1) / 100;
158        var x2 = parseFloat(Crop.Position.X2) / 100;
159        var y1 = parseFloat(Crop.Position.Y1) / 100;
160        var y2 = parseFloat(Crop.Position.Y2) / 100;
161
162        function WidthBased()
163        {
164            imgWidth = width / (x2 - x1);
165            imgHeight = imgWidth * (HeightOri / WidthOri);
166
167            var p = y1 * height;
168            var a = y2 * height;
169            var b = a - p;
170            p += b / 2;
171            p -= imgHeight / 2;

172            Me.HtmlElement.Img.css({ "left": parseInt((-x1 * imgWidth)) + "px", "top": Math.round(parseInt(p)) + "px" });
173        }
174
175        function HeightBased()
176        {
177            imgHeight = height / (y2 - y1);
178            imgWidth = imgHeight * (WidthOri / HeightOri);
179
180            var p = x1 * width;
181            var a = x2 * width;
182            var b = a - p;
183            p += b / 2;
184            p -= imgWidth / 2;
185            Me.HtmlElement.Img.css({ "left": Math.round(parseInt(p)) + "px", "top": parseInt((-y1 * imgHeight)) + "px" });
186        }
187        if (parseInt(Crop.Width) >= parseInt(Crop.WrapperWidth)) {
188            // width base
189            WidthBased();
190        }
191        else {
192            // height base
193            HeightBased();
194        }
195
196        // Dimensions With Src...
197        this.imgWidth = imgWidth;
198        this.imgHeight = imgHeight;
199        setImgDimensions.call(this, imgWidth, imgHeight);
200    };
201
202    var CropCover = function (width, height)
203    {
204        // Validation
205        if (!width || typeof width != "number" || width < 0) throw "bad width!";
206        if ((!height && height != 0) || typeof height != "number" || height < 0) throw "bad height!";
207
208        var Me = this;
209
210        var Crop = this.data.Media.Crop;
211        if (Crop == null) throw "crop must exist!";
212        var WidthOri = this.data.Media.WidthOri;
213        var HeightOri = this.data.Media.HeightOri;
214        var imgWidth = 0;
215        var imgHeight = 0;
216        var x1 = parseFloat(Crop.Position.X1) / 100;
217        var x2 = parseFloat(Crop.Position.X2) / 100;
218        var y1 = parseFloat(Crop.Position.Y1) / 100;
219        var y2 = parseFloat(Crop.Position.Y2) / 100;
220
221        function WidthBased()
222        {
223            imgWidth = width / (x2 - x1);
224            imgHeight = imgWidth * (HeightOri / WidthOri);
225
226            var p = y1 * imgHeight;
227            var a = y2 * imgHeight;
228            var b = a - p;
229            if (b >= height) {
230                b = b - height;
231                p += b / 2;
232                Me.HtmlElement.Img.css({ "left": parseInt((-x1 * imgWidth)) + "px", "top": Math.round(parseInt(-p)) + "px" });
233            }
234            else {
235
236                imgHeight = height / (y2 - y1);
237                imgWidth = imgHeight * (WidthOri / HeightOri);
238
239                var p = x1 * imgWidth;
240                var a = x2 * imgWidth;
241                var b = a - p;
242                b = b - width;
243                p += b / 2;
244                Me.HtmlElement.Img.css({ "left": Math.round(parseInt(-p)) + "px", "top": parseInt((-y1 * imgHeight)) + "px" });
245            }
246        }
247
248        function HeightBased()
249        {
250            imgHeight = height / (y2 - y1);
251            imgWidth = imgHeight * (WidthOri / HeightOri);
252
253            var p = x1 * imgWidth;
254            var a = x2 * imgWidth;
255            var b = a - p;
256            if (b >= width) {
257                b = b - width;
258                p += b / 2;
259                Me.HtmlElement.Img.css({ "left": Math.round(parseInt(-p)) + "px", "top": parseInt((-y1 * imgHeight)) + "px" });
260            }
261            else {
262                imgWidth = width / (x2 - x1);
263                imgHeight = imgWidth * (HeightOri / WidthOri);
264
265                var p = y1 * imgHeight;
266                var a = y2 * imgHeight;
267                var b = a - p;
268
269                b = b - height;
270                p += b / 2;
271                Me.HtmlElement.Img.css({ "left": parseInt((-x1 * imgWidth)) + "px", "top": Math.round(parseInt(-p)) + "px" });
272            }
273        }
274
275        if (WidthOri > HeightOri) {
276            // width base
277            if (WidthOri / HeightOri < width / height) WidthBased();
278            else HeightBased();
279        }
280        else {
281            // height base
282            if (HeightOri / WidthOri < height / width) HeightBased();
283            else WidthBased();
284        }
285
286        // Dimensions With Src...
287        this.imgWidth = imgWidth;
288        this.imgHeight = imgHeight;
289        setImgDimensions.call(this, imgWidth, imgHeight);
290    };
291
292    var BindImage = function (width, height)
293    {
294        if (!width || typeof width != "number" || width < 0) throw "bad width!";
295        if ((!height && height != 0) || typeof height != "number" || height < 0) throw "bad height!";
296
297        var WidthOri = this.data.Media.WidthOri;
298        var HeightOri = this.data.Media.HeightOri;
299
300        var Crop = this.data.Media.Crop;
301        if (Crop == null) throw "crop must exist!";
302
303        // reset position
304        this.HtmlElement.Img.css({ "width": "", "height": "", "left"

304: "", "top": "", "bottom": "", "right": "" });
305
306        // No Crop, Positionnning
307        if (!this.data.KeepRatio) {
308
309            this.imgWidth = null;
310            if (!this.HtmlElement.Img.hasClass("wsStrech")) this.HtmlElement.Img.addClass("wsStrech");
311        }
312        else {
313            if (!Crop.Position) {
314                // center image cover (image bigger than box)
315                CenterCover.call(this, width, height);
316            }
317            else {
318                // Zoom
319                if (parseInt(Crop.Width) >= parseInt(Crop.WrapperWidth) && parseInt(Crop.Height) >= parseInt(Crop.WrapperHeight)) {
320                    CropCover.call(this, width, height);
321                }
322                else if (parseInt(Crop.Width) < parseInt(Crop.WrapperWidth) && parseInt(Crop.Height) < parseInt(Crop.WrapperHeight)) {
323                    CropInsideBox.call(this, width, height);
324                }
325                else {
326                    CropInsideOutSideBox.call(this, width, height);
327                }
328            }
329        }
330
331        // Lightbox
332        if (this.data.ShowLightBox && !this.LightBox) AddLightBoxHandler.apply(this);
333
334        // Caption
335        if (this.data.Media.Caption) {
336            if (this.Caption) { this.Caption.Bind(); }
337            else { this.Caption = new WS.CaptionManager.UI(this.HtmlElement.Img, this.element, this.data.Media.Caption); }
338        }
339
340        // Pinterest
341        if (WS.Util && WS.Util.PinterestButton && WS.Parameters && WS.Parameters.Social && WS.Parameters.Social.Pinterest) Pinterest.apply(this);
342    };
343
344    var AddLightBoxHandler = function ()
345    {
346        var Me = this;
347
348        var Image = [];
349        var src = "/file/si1851374/" + this.data.Media.FileName + "-fi" + this.data.Media.IdFile + "x2000." + this.data.Media.Extension;
350        var Footer = null;
351        if ((this.data.Media.Caption && this.data.Media.Caption.Aff == "LightBoxAndImage") || this.data.Media.Link) {
352            Footer = { title: null, descr: null, link: null };
353            if (this.data.Media.Caption) {
354                Footer.title = (this.data.Media.Caption.Title) ? this.data.Media.Caption.Title : null;
355                Footer.descr = (this.data.Media.Caption.Descr) ? this.data.Media.Caption.Descr : null;
356            }
357            if (this.data.Media.Link) Footer.link = { href: this.data.Media.Link.Href, text: this.data.Media.Link.Href };
358        }
359
360        Image.push(
361            {
362                src: src,
363                footer: Footer
364            });
365
366        this.LightBox = new WS.LightBox(Image);
367        this.HtmlElement.Img.off("click");
368        this.HtmlElement.Img.on("click", function () { Me.LightBox.Show(); });
369        this.HtmlElement.Img.addClass("wsPointer");
370    };
371
372    var Pinterest = function ()
373    {
374        var Me = this;
375
376        if (this.PinterestButton) this.PinterestButton.remove();
377        var src = "/file/si1851374/" + Me.data.Media.FileName + "-fi" + Me.data.Media.IdFile + "." + Me.data.Media.Extension;
378        this.PinterestButton = WS.Util.PinterestButton(src, Me.data.Media.FileName);
379        this.PinterestButton.hide();
380        this.element.append(this.PinterestButton);
381
382        var TimeWait = 10;
383        var TimeOut = null;
384        this.PinterestButton.on("mouseenter", function ()
385        {
386            Me.HtmlElement.Img.trigger("mouseenter");
387        });
388
389        this.PinterestButton.on("mouseleave", function ()
390        {
391            Me.HtmlElement.Img.trigger("mouseleave");
392        });
393
394        this.HtmlElement.Img.on("mouseenter", function ()
395        {
396            window.clearTimeout(TimeOut);
397            Me.PinterestButton.show();
398        });
399
400        this.HtmlElement.Img.on("mouseleave", function ()
401        {
402            window.clearTimeout(TimeOut);
403            TimeOut = window.setTimeout(function () { Me.PinterestButton.hide() }, TimeWait);
404        });
405    };
406
407    // PUBLIC
408
409    (function (Methods)
410    {
411        Methods.onResized = function (width, height)
412        {
413            this.width = width;
414            this.height = height;
415            setImgSrc.call(this, width);
416        };
417
418        Methods.onResize = function (width, height)
419        {
420            this.width = width;
421            this.height = height;
422            BindImage.call(this, width, height);
423        };
424
425        Methods.Update = function (data)
426        {
427            this.data = data;
428            BindImage.call(this, this.width, this.height);
429            setImgSrc.call(this, this.width);
430        }
431
432    })(Class.prototype);
433
434    return Class;
435})());