https://jumpbeatrecords.com/wp-content/themes/skrollex/assets/js/widgets/text-mask.js

1"use strict"; var $ = jQuery;
2module.exports = function ($context) {
3	var tools = require('../tools/tools.js');
4	var isAndroid = $('html').hasClass('android-browser');
5	if(isAndroid){
6		return;
7	}
8	$context.find('.text-mask').each(function(){
9		var $cont = $(this);
10		$cont.find($cont.data('text-effect-selector')).each(function(j){
11			var $headers = $(this).addClass('text-mask-svg svg-effect');
12			var $link = $headers.find('a');
13			var $el = $link.length > 0 ? $($link[0]) : $headers;
14			var lines = [];
15			$el.contents().filter(function () {
16				return !!$.trim(this.innerHTML || this.data);
17			}).each(function (i) {
18				var $line = $(this);
19				lines.push($line.text());
20			});
21			$el.addClass('normal-letter-spacing');
22			var svgSize = function () {
23				var svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
24				var s = Snap(svg);
25				s.attr({width: '100%', height: '100%'});
26				$el.empty().append(svg);
27				var mask = s.mask().attr({x: 0, y: 0, width: '100%', height: '100%'});
28				mask.toDefs();
29				var sw = Math.round(0.7 * $el.innerWidth());
30				if(sw > 391){
31					sw = 391;
32				}
33				var fs = parseFloat($el.css('font-size').replace('px', ''));
34				var dlh = 10;
35				var pad = Math.round(sw * 0.15);
36				var y = 0;
37				var grp = mask.g();
38				for (var i = 0; i < lines.length; i++) {
39					var text = s.text(0, 0, lines[i])
40					var tw = text.getBBox().width;
41					var cfs = fs * (sw - pad - pad) / tw;
42					var clh = dlh  + cfs;
43					y += i > 0 ? clh : (cfs * 0.85)
44					text.attr({x: pad, y: y, 'font-size': cfs + 'px'});
45					grp.add(text);
46				}
47				var h = y + 2 * pad;
48				var rad = Math.floor(h > sw ? h/2 : sw/2);
49				var diam = 2 * rad;
50				var imw = diam;
51				var imh = diam;
52				var imgSrc = $cont.data('text-bg');
53				var pat = s.g(
54					imgSrc ? s.image(imgSrc, 0, 0, imw, imh).attr({preserveAspectRatio: 'xMidYMid slice'}) : s.rect(0, 0, imw, imh).attr({fill: '#ffffff'})
55				).toPattern(0, 0, imw, imh);
56				s.rect({x: 0, y: 0, width: '100%', height: '100%', fill: pat, stroke: 'none'}).prependTo(mask);
57				s.circle(rad, rad, rad).attr({mask: mask, stroke: 'none'})
58					.addClass('fill-heading text-box');
59				grp.attr({transform: 'translate(0, ' + Math.round((diam - y)/2) + ')'})
60				s.attr({viewBox: '0 0 ' + diam + ' ' + diam, width: diam, height: diam});
61				$el.height(diam);
62			};
63			$(window).resize(svgSize);
64			svgSize();
65		});
66	});
67};
68