https://biggggidea.com/static/common/lib/jquery/plugins/jquery.gradienttext.js

1/**
2 * @author Leechy ([email protected])
3 * @link www.artlebedev.ru
4 * @requires jQuery
5 *
6 * Description:
7 * gradientText is a jQuery plugin that paints text in gradient colors
8 *
9 * Usage:
10 * $(selector).gradientText(config);
11 *
12 * config is an object contents configuraton paramenters:
13 * 	{Array} colors - array of hex colors, e.g. ['#000000', '#FFFFFF'];
14 * 	{Array} toProcess - array of jQuery selectors, matched elements will be toProcessed
15 */
16
17(function($){
18	// Параметры по умолчанию
19	$.gradientText = $.gradientText || {version: '1.0'};
20
21	$.gradientText.conf = {
22		colors: ['#5f3db6', '#c10000'],
23		toProcess: []
24	};
25
26	$.gradientTextSetup = function(conf) {
27		$.extend($.gradientText.conf, conf);
28	};
29
30	$.fn.gradientText = function(conf) {
31		
32		// already constructed --> return API
33		var el = this.data("gradientText");
34		if (el) { return el; }
35				
36		// concatinate defined conf object with the user's one
37		if (!conf) {
38			conf = $.gradientText.conf;
39		} else {
40			if (typeof(conf.colors) == 'undefined') {
41				conf.colors = $.gradientText.conf.colors;
42			}
43		}
44
45		var aLetters = [];
46
47		this.each(function(i) {
48			aLetters[i] = new GradientLetters($(this), conf);
49			$(this).data("gradientText", aLetters[i]);	
50		});
51		
52		$(window).load(function() {
53			var iLetters_amount = aLetters.length;
54			for (var i = 0; i < iLetters_amount; i++) {
55				aLetters[i].update();
56			}
57		});
58
59		return conf.api ? el: this; 
60	};
61
62
63	function GradientLetters(jContainer, conf) {
64		/**
65		 * 	Если плагин уже поработал над элементом,
66		 * 	то заново дробить его не нужно
67		 */
68		if (jContainer.find('span.gr-text').size() == 0) {
69			/**
70			 * 	getting nodes, good enough
71			 * 	to be spliced in letters
72			 */
73			var jTextNodes = jContainer.contents().filter(function() {
74				return (this.nodeType == 3 && /\S/.test(this.nodeValue))
75			}).wrap('<span class="gr-text" />');
76
77			if (typeof(conf.toProcess) != 'undefined') {
78				var tags = conf.toProcess.toString();
79
80				if (tags) {
81					jTextNodes = jContainer.find(tags).contents().filter(function() {
82						return (this.nodeType == 3 && /\S/.test(this.nodeValue))
83					}).wrap('<span class="gr-text" />');
84				}
85			}
86
87			/**
88			 * 	width of the content can be less than jContainer's width
89			 * 	that's why we have to use inline wrapper like span
90			 */
91			jContainer.html('<span class="gr-wrap">' + jContainer.html() + '</span>');
92			jContainer = jContainer.find('.gr-wrap');
93
94			/**
95			*	Оборачиваем каждую букву в span.gr-letter.
96			*	Пробелы заменяем на пробел нулевой ширины
97			*/
98			jContainer.find('span.gr-text').each(function(){
99				var aText = $(this).text().split('');
100				var sHTML = '';
101				var iText_amount = aText.length;
102
103				for (var i = 0; i < iText_amount; i++) {
104					if (aText[i] != ' ') {
105						sHTML += '<span class="gr-letter">' + aText[i] + '</span>';
106					} else {
107						sHTML += '<span class="gr-letter"><span style="display:none;">&#8203;</span> </span>';
108					}
109				}
110				$(this).html(sHTML);
111			});
112		}
113
114		var jWords = jContainer.find('span.gr-text');
115		var jLetters = jContainer.find('span.gr-letter');
116		var iHeight = 0;
117
118		// Convert defined hex colors to rgb-colors
119		conf.RGBcolors = [];
120		for (var i = 0; i < conf.colors.length; i++) conf.RGBcolors[i] = hex2Rgb(conf.colors[i]);
121
122		/**
123		 * 	Measurer — некий объект, который понимает не только когда изменяется ширина окна,
124		 * 	но и когда меняется размер шрифта.
125		 *
126		 * 	Плагин использует:
127		 *	- jcommon, если он есть;
128		 *	- measurer, если нет jcommon и подключен файл с measurer,
129		 *	- resize, если по какой-то причине ни того, ни другого не обнаружено.
130		 */
131		if (typeof($c) != 'undefined') $c.measurer.bind(updateColors);
132		else if (typeof($measurer) != 'undefined') $measurer.bind(updateColors);
133		else $(window).resize(updateColors);
134
135		PaintUnderlines();
136
137		function updateColors() {
138			var iRootLeftOffset = Math.round(jContainer[0].offsetLeft),
139				iRootWidth = getMaxRootWidth(iRootLeftOffset),
140				jLetters_amount = jLetters.size();
141
142			if (iRootWidth < 200) iRootWidth = 200;
143
144			for( var i = jLetters_amount; i--; ) {
145				jLetters[i].style.color = getColor(Math.round(jLetters[i].offsetLeft - iRootLeftOffset), iRootWidth);
146			}
147		}
148
149		function getMaxRootWidth(iRootLeftOffset) {
150			var iMaxWidth = 0;
151			jWords.each(function(index) {
152				var iRightEdge = Math.round(this.offsetWidth + this.offsetLeft) - iRootLeftOffset;
153				if (iRightEdge > iMaxWidth) iMaxWidth = iRightEdge;
154			});
155			return iMaxWidth;
156		}
157
158		function getColor(iLeftOffset, iRootWidth) {
159			var
160				fLeft = (iLeftOffset > 0)? (iLeftOffset / iRootWidth) : 0;
161			for (var i = 0; i < conf.colors.length; i++) {
162				fStopPosition = (i / (conf.colors.length - 1));
163				fLastPosition = (i > 0)? ((i - 1) / (conf.colors.length - 1)) : 0;
164
165				if (fLeft == fStopPosition) {
166					return conf.colors[i];
167				} else if (fLeft < fStopPosition) {
168					fCurrentStop = (fLeft - fLastPosition) / (fStopPosition - fLastPosition);
169					return getMidColor(conf.RGBcolors[i-1], conf.RGBcolors[i], fCurrentStop);
170				}
171			}
172			return conf.colors[conf.colors.length - 1];
173		}
174
175		function getMidColor(aStart, aEnd, fMidStop) {
176			var aRGBColor = [];
177
178			for (var i = 0; i < 3; i++) {
179				aRGBColor[i] = aStart[i] + Math.round((aEnd[i] - aStart[i]) * fMidStop)
180			}
181
182			return rgb2Hex(aRGBColor)
183		}
184
185
186		/**
187		* To paint underline of gradiented text in right colors
188		* every .gr-letter element has to have css rule:
189		* 	text-decoration: underline;
190		* so this function searching for .gr-text that is child
191		* of underlined element
192		*/
193		function PaintUnderlines () {
194			/* When gradiented element contains underlined child */
195			jContainer.find('.gr-text').each(function(){
196				if ($(this).parent().css('text-decoration') == 'underline') {
197					$(this).parent().find('.gr-letter').css('text-decoration', 'underline');
198				}
199			});
200
201			/* When gradiented element is underlined */
202			if (jContainer.parent().css('text-decoration') == 'underline') {
203				jContainer.find('.gr-letter').css('text-decoration', 'underline');
204			}
205		}
206
207		return {
208			update: updateColors
209		}
210	}
211

212	/**
213	 * Преобразует HEX-представление цвета в RGB.
214	 * @param {String} hex
215	 * @return {Array}
216	 */
217	function hex2Rgb(hex) {
218		if ('#' == hex.substr(0, 1)) {
219			hex = hex.substr(1);
220		}
221		if (3 == hex.length) {
222			hex = hex.substr(0, 1) + hex.substr(0, 1) + hex.substr(1, 1) + hex.substr(1, 1) + hex.substr(2, 1) + hex.substr(2, 1);
223		}
224
225		return [parseInt(hex.substr(0, 2), 16), parseInt(hex.substr(2, 2), 16), parseInt(hex.substr(4, 2), 16)];
226	}
227
228	/**
229	 * Преобразует RGB-представление цвета в HEX.
230	 * @param {Array} rgb
231	 * @return {String}
232	 */
233	function rgb2Hex(rgb) {
234		var s = '0123456789abcdef';
235
236		return '#' + s.charAt(parseInt(rgb[0] / 16)) + s.charAt(rgb[0] % 16) + s.charAt(parseInt(rgb[1] / 16)) +
237			s.charAt(rgb[1] % 16) + s.charAt(parseInt(rgb[2] / 16)) + s.charAt(rgb[2] % 16);
238	}
239})( jQuery );