https://www.creditmutuel.com/partage/fr/CNCM/assets/articles/accueil/banner.js

1$(document).ready(function () {
2
3	var elemTxTColor;
4	var elemBgColor;
5	var elemBgColor2;
6	var elemBorderColor;
7	var elemBorderPadding;
8	var elemWidth;
9	var elemSize;
10	var elemFontSize;
11	var elemLineHeight;
12	var bgGradient;
13
14	$('[data-color-txt]').each(function() {
15		elemTxTColor = $(this).attr("data-color-txt");
16		if ($(window).width() > 768) {
17	      	$(this).css("color", elemTxTColor);
18	    } else {
19	    	if ((elemTxTColor == "white") || (elemTxTColor == "#fff") || (elemTxTColor == "#ffffff")) {
20	    		if ($(this).attr("data-color-bg")) {
21					$(this).css("color", elemTxTColor);
22				}
23	    	} else {
24	    		$(this).css("color", elemTxTColor);
25	    	}
26	    }
27	});
28
29	$('[data-color-bg]').each(function() {
30		elemBgColor = $(this).attr("data-color-bg");
31
32		if ($('.hero').hasClass("halfwidth")) {
33			if ($(this).hasClass("banner")) {
34				$('.hero').css("background", elemBgColor);
35			}
36		}
37
38		if ($(this).attr("data-color-bg2")) {
39			elemBgColor2 = $(this).attr("data-color-bg2");
40			bgGradient = "linear-gradient(90deg, " + elemBgColor + " 0%, " + elemBgColor2 + " 100%)";
41			$(this).css("background", bgGradient);
42			console.log(bgGradient);
43		} else {
44			$(this).css("background", elemBgColor);
45		}
46		
47		if ($(this).is("a")) {
48			$(this).hover(function () {
49				$(this).css("opacity", "0.8");
50			}, function () {
51				$(this).css("opacity", "1");
52			});
53
54			$(this).focusin(function () {
55				$(this).css("background", "#414141");
56				$(this).css("color", "white");
57			});
58			$(this).focusout(function () {
59				$(this).css("background", elemBgColor);
60				if ($(this).attr("data-color-txt")) {
61					elemTxTColor = $(this).attr("data-color-txt");
62					$(this).css("color", elemTxTColor);
63				} else {
64					$(this).css("color", "#414141");
65				}
66			});
67		}
68	});
69
70	$('[data-color-border]').each(function() {
71		elemBorderColor = $(this).attr("data-color-border");
72		elemBorderColor = "2px solid " + elemBorderColor;
73		$(this).css("border", elemBorderColor);
74	});
75
76	$('[data-width]').each(function() {
77		if ($(window).width() > 768) {
78	      	elemWidth = $(this).attr("data-width");
79			elemWidth = elemWidth + "%";
80			$(this).css("width", elemWidth);

81	    } else {
82	    	$(this).css("width", "100%");
83	    }
84	});
85
86	$('[data-size-txt]').each(function() {
87		elemSize = $(this).attr("data-size-txt");
88
89		if (($(window).width() > 768) || (($(window).width() < 768) && (elemSize < 20))) {
90
91			if ($(this).attr("data-color-bg")) {
92				if (elemSize < 20) {
93					elemLineHeight = parseInt(elemSize) + 20;
94				} else {
95					elemLineHeight = parseInt(elemSize) + 24;
96				}
97			} else {
98				if (elemSize < 20) {
99					elemLineHeight = parseInt(elemSize) + 6;
100				} else {
101					elemLineHeight = parseInt(elemSize) + 4;
102				}
103			}
104			
105			elemLineHeight = elemLineHeight/16;
106			elemLineHeight = elemLineHeight + "rem";
107
108			elemFontSize = elemSize/16;
109			elemFontSize = elemFontSize + "rem";
110
111	      	$(this).css("font-size", elemFontSize);
112			$(this).css("line-height", elemLineHeight);
113	    } else {
114	    	$(this).css("font-size", "1.25rem");
115
116	    	if ($(this).attr("data-color-bg")) {
117				$(this).css("line-height", "2.5rem");
118			} else {
119				$(this).css("line-height", "1.625rem");
120			}
121	    }
122
123		
124	});
125
126});