Skip to content

Commit ccf8c2a

Browse files
NeXTsNeXTs
committed
Added minified version. Changed tabs to 2 spaces
1 parent ebdfd7f commit ccf8c2a

File tree

3 files changed

+129
-124
lines changed

3 files changed

+129
-124
lines changed

‎multiple.css

+40-40
Original file line numberDiff line numberDiff line change
@@ -1,64 +1,64 @@
11
.multiple-desktop {
2-
background-size: cover;
3-
background-position: center;
4-
background-attachment: fixed;
5-
background-repeat: no-repeat;
2+
background-size: cover;
3+
background-position: center;
4+
background-attachment: fixed;
5+
background-repeat: no-repeat;
66
}
77

88
/* http://nimbupani.com/using-background-clip-for-text-with-css-fallback.html */
99
.multiple-desktop-text {
10-
background: -webkit-linear-gradient(transparent, transparent);
11-
background: -o-linear-gradient(transparent, transparent);
12-
-webkit-background-clip: text;
13-
-webkit-text-fill-color: transparent;
14-
background-size: cover;
15-
background-position: center;
16-
background-attachment: fixed;
17-
background-repeat: no-repeat;
10+
background: -webkit-linear-gradient(transparent, transparent);
11+
background: -o-linear-gradient(transparent, transparent);
12+
-webkit-background-clip: text;
13+
-webkit-text-fill-color: transparent;
14+
background-size: cover;
15+
background-position: center;
16+
background-attachment: fixed;
17+
background-repeat: no-repeat;
1818
}
1919

2020
.multiple-mobile-wrapper {
21-
position: relative;
22-
height: 100%;
21+
position: relative;
22+
height: 100%;
2323
}
2424

2525
/* http://stackoverflow.com/a/23859719/1221082
2626
* http://stackoverflow.com/a/23795792/1221082
2727
*/
2828
.multiple-mobile {
29-
/* old browsers */
30-
clip: rect(0 auto auto 0);
31-
clip: rect(0, auto, auto, 0);
32-
/* ios workaround */
33-
-webkit-mask-image: -webkit-linear-gradient(top, #fff 0%, #fff 100%);
34-
/* new browsers */
35-
-webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
36-
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
37-
overflow: hidden;
29+
/* old browsers */
30+
clip: rect(0 auto auto 0);
31+
clip: rect(0, auto, auto, 0);
32+
/* ios workaround */
33+
-webkit-mask-image: -webkit-linear-gradient(top, #fff 0%, #fff 100%);
34+
/* new browsers */
35+
-webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
36+
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
37+
overflow: hidden;
3838

39-
position: absolute;
40-
top: 0;
41-
left: 0;
42-
width: 100%;
43-
height: 100%;
39+
position: absolute;
40+
top: 0;
41+
left: 0;
42+
width: 100%;
43+
height: 100%;
4444

45-
z-index: -1;
45+
z-index: -1;
4646
}
4747

4848
.multiple-mobile-content {
49-
height: 100%;
49+
height: 100%;
5050
}
5151

5252
.multiple-mobile:before {
53-
content: '';
54-
55-
background-size: cover;
56-
background-position: center;
57-
background-repeat: no-repeat;
53+
content: '';
54+
55+
background-size: cover;
56+
background-position: center;
57+
background-repeat: no-repeat;
5858

59-
position: fixed;
60-
top: 0;
61-
right: 0;
62-
bottom: 0;
63-
left: 0;
59+
position: fixed;
60+
top: 0;
61+
right: 0;
62+
bottom: 0;
63+
left: 0;
6464
}

‎multiple.js

+84-84
Original file line numberDiff line numberDiff line change
@@ -7,98 +7,98 @@
77
else if (typeof define == 'function' && typeof define.amd == 'object') define(definition);
88
else root['Multiple'] = definition();
99
}(this, function() {
10-
"use strict"
10+
"use strict"
1111

12-
// http://stackoverflow.com/a/4819886/1221082
13-
var isMobile = 'ontouchstart' in window || navigator.maxTouchPoints;
14-
// http://stackoverflow.com/a/12625907/1221082
15-
var isWebkit = 'WebkitAppearance' in document.documentElement.style;
12+
// http://stackoverflow.com/a/4819886/1221082
13+
var isMobile = 'ontouchstart' in window || navigator.maxTouchPoints;
14+
// http://stackoverflow.com/a/12625907/1221082
15+
var isWebkit = 'WebkitAppearance' in document.documentElement.style;
1616

17-
// Force webkit repaint on resize
18-
isWebkit && window.addEventListener('resize', function(e){
19-
document.body.style.visibility = 'hidden';
20-
e = document.body.offsetHeight;
21-
document.body.style.visibility = '';
22-
});
17+
// Force webkit repaint on resize
18+
isWebkit && window.addEventListener('resize', function(e){
19+
document.body.style.visibility = 'hidden';
20+
e = document.body.offsetHeight;
21+
document.body.style.visibility = '';
22+
});
2323

24-
var Multiple = function(options) {
25-
if( ! (this instanceof Multiple)) return new Multiple(options);
24+
var Multiple = function(options) {
25+
if( ! (this instanceof Multiple)) return new Multiple(options);
2626

27-
['selector', 'background', 'affectText', 'opacity'].forEach(function(option) {
28-
this[option] = options[option];
29-
}.bind(this));
27+
['selector', 'background', 'affectText', 'opacity'].forEach(function(option) {
28+
this[option] = options[option];
29+
}.bind(this));
3030

31-
this.className = 'multiple-' + (isMobile ? 'mobile' : 'desktop') + (this.affectText ? '-text' : '');
32-
this.update(this.background);
33-
}
31+
this.className = 'multiple-' + (isMobile ? 'mobile' : 'desktop') + (this.affectText ? '-text' : '');
32+
this.update(this.background);
33+
}
3434

35-
Multiple.prototype = {
36-
constructor: Multiple,
37-
each: function(select, callback, nodes) {
38-
Array.prototype.slice.call(nodes ? select : document.querySelectorAll(select)).forEach(callback.bind(this));
39-
},
40-
// #f95 or #ff9955 or rgb(255,153,85) -> rgba(255,102,0,0.666)
41-
setOpacity: function(styles) {
42-
return styles.replace(/#\b([a-f\d]{3}|[a-f\d]{6})\b/gi, function(full, hex) {
43-
var rgb = hex.match(new RegExp('(.{' + hex.length/3 + '})', 'g')).map(function(l) { return parseInt(hex.length%2 ? l+l : l, 16) });
44-
return 'rgb(' + rgb.join(',') + ')';
45-
}).replace(/rgb\((.[^\)]*)\)/gi, function(full, rgb) {
46-
var min, a = (255 - (min = Math.min.apply(Math, (rgb = rgb.split(','))))) / 255,
47-
rgba = this.opacity === true
48-
? rgb.map(function(channel) { return 0 | (channel - min) / a }).concat((0|1000*a)/1000)
49-
: rgb.concat(this.opacity);
50-
return 'rgba(' + rgba.join(',') + ')';
51-
}.bind(this));
52-
},
53-
// linear-gradient(#fff, #000) -> -webkit-*, -moz-*, -ms-*, -o-*
54-
setVendors: function(styles, textMode) {
55-
var result = textMode ? [] : [styles];
56-
if(/-gradient\(/i.test(styles) || textMode) ['webkit', 'moz', 'ms', 'o'].forEach(function(vendor, i) {
57-
if(textMode && i) return;
58-
result.unshift((textMode ? '-webkit-linear-gradient(transparent,transparent),' : '') + styles.replace(/([^,\s]*-gradient\()/gi, '-' + vendor + '-$1'));
59-
});
60-
return result;
61-
},
62-
setStyles: function(selector, styles, textMode) {
63-
if(this.opacity) styles = this.setOpacity(styles);
64-
this.styleTag.innerHTML = selector + '{background-image:' + this.setVendors(styles, textMode).join(';\nbackground-image:') + '}';
65-
},
66-
renderTag: function(className) {
67-
var tag = document.createElement('div');
68-
tag.className = className;
69-
return tag;
70-
},
71-
update: function(styles) {
72-
this.each(this.selector, function(elem) {
73-
if(elem.getAttribute('data-multiple')) return;
74-
if( ! isMobile || this.affectText) return elem.classList.add(this.className);
35+
Multiple.prototype = {
36+
constructor: Multiple,
37+
each: function(select, callback, nodes) {
38+
Array.prototype.slice.call(nodes ? select : document.querySelectorAll(select)).forEach(callback.bind(this));
39+
},
40+
// #f95 or #ff9955 or rgb(255,153,85) -> rgba(255,102,0,0.666)
41+
setOpacity: function(styles) {
42+
return styles.replace(/#\b([a-f\d]{3}|[a-f\d]{6})\b/gi, function(full, hex) {
43+
var rgb = hex.match(new RegExp('(.{' + hex.length/3 + '})', 'g')).map(function(l) { return parseInt(hex.length%2 ? l+l : l, 16) });
44+
return 'rgb(' + rgb.join(',') + ')';
45+
}).replace(/rgb\((.[^\)]*)\)/gi, function(full, rgb) {
46+
var min, a = (255 - (min = Math.min.apply(Math, (rgb = rgb.split(','))))) / 255,
47+
rgba = this.opacity === true
48+
? rgb.map(function(channel) { return 0 | (channel - min) / a }).concat((0|1000*a)/1000)
49+
: rgb.concat(this.opacity);
50+
return 'rgba(' + rgba.join(',') + ')';
51+
}.bind(this));
52+
},
53+
// linear-gradient(#fff, #000) -> -webkit-*, -moz-*, -ms-*, -o-*
54+
setVendors: function(styles, textMode) {
55+
var result = textMode ? [] : [styles];
56+
if(/-gradient\(/i.test(styles) || textMode) ['webkit', 'moz', 'ms', 'o'].forEach(function(vendor, i) {
57+
if(textMode && i) return;
58+
result.unshift((textMode ? '-webkit-linear-gradient(transparent,transparent),' : '') + styles.replace(/([^,\s]*-gradient\()/gi, '-' + vendor + '-$1'));
59+
});
60+
return result;
61+
},
62+
setStyles: function(selector, styles, textMode) {
63+
if(this.opacity) styles = this.setOpacity(styles);
64+
this.styleTag.innerHTML = selector + '{background-image:' + this.setVendors(styles, textMode).join(';\nbackground-image:') + '}';
65+
},
66+
renderTag: function(className) {
67+
var tag = document.createElement('div');
68+
tag.className = className;
69+
return tag;
70+
},
71+
update: function(styles) {
72+
this.each(this.selector, function(elem) {
73+
if(elem.getAttribute('data-multiple')) return;
74+
if( ! isMobile || this.affectText) return elem.classList.add(this.className);
7575

76-
var wrapperTag = this.renderTag(this.className + '-wrapper'),
77-
contentTag = this.renderTag(this.className + '-content');
78-
this.each(elem.childNodes, function(child) { contentTag.appendChild(child) }, true);
79-
elem.appendChild(wrapperTag);
80-
wrapperTag.appendChild(this.renderTag(this.className));
81-
wrapperTag.appendChild(contentTag);
82-
elem.setAttribute('data-multiple', true);
83-
});
76+
var wrapperTag = this.renderTag(this.className + '-wrapper'),
77+
contentTag = this.renderTag(this.className + '-content');
78+
this.each(elem.childNodes, function(child) { contentTag.appendChild(child) }, true);
79+
elem.appendChild(wrapperTag);
80+
wrapperTag.appendChild(this.renderTag(this.className));
81+
wrapperTag.appendChild(contentTag);
82+
elem.setAttribute('data-multiple', true);
83+
});
8484

85-
if( ! styles) return;
86-
if( ! this.styleTag) document.head.appendChild(this.styleTag = document.createElement('style'));
87-
if( ! isMobile || ! this.affectText) this.setStyles(this.selector + (isMobile ? ' ' : '') + '.' + this.className + (isMobile ? ':before' : ''), styles, this.affectText);
88-
if(this.affectText) this.styleTag.innerHTML += this.selector + '.' + this.className + '{color:' + this.affectText + '}';
89-
},
90-
destroy: function() {
91-
this.styleTag.parentNode && this.styleTag.parentNode.removeChild(this.styleTag) && delete this.styleTag;
92-
this.each(this.selector, function(elem) {
93-
elem.classList.remove(this.className);
94-
elem.removeAttribute('data-multiple');
85+
if( ! styles) return;
86+
if( ! this.styleTag) document.head.appendChild(this.styleTag = document.createElement('style'));
87+
if( ! isMobile || ! this.affectText) this.setStyles(this.selector + (isMobile ? ' ' : '') + '.' + this.className + (isMobile ? ':before' : ''), styles, this.affectText);
88+
if(this.affectText) this.styleTag.innerHTML += this.selector + '.' + this.className + '{color:' + this.affectText + '}';
89+
},
90+
destroy: function() {
91+
this.styleTag.parentNode && this.styleTag.parentNode.removeChild(this.styleTag) && delete this.styleTag;
92+
this.each(this.selector, function(elem) {
93+
elem.classList.remove(this.className);
94+
elem.removeAttribute('data-multiple');
9595

96-
if( ! isMobile || this.affectText) return;
97-
this.each(elem.children[0].children[1].childNodes, function(child) { elem.appendChild(child) }, true);
98-
elem.removeChild(elem.children[0]);
99-
});
100-
}
101-
}
96+
if( ! isMobile || this.affectText) return;
97+
this.each(elem.children[0].children[1].childNodes, function(child) { elem.appendChild(child) }, true);
98+
elem.removeChild(elem.children[0]);
99+
});
100+
}
101+
}
102102

103-
return Multiple;
103+
return Multiple;
104104
}));

‎multiple.min.js

+5
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)