forked from qiushanhe/dm-manage-web
eslint
This commit is contained in:
qsh
@@ -1,208 +1,92 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||||
<meta name="renderer" content="webkit">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
|
||||
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
|
||||
<meta charset="utf-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
|
||||
<meta name="renderer" content="webkit" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
|
||||
<link rel="icon" href="<%= BASE_URL %>favicon.ico" />
|
||||
<title><%= webpackConfig.name %></title>
|
||||
<!--[if lt IE 11]><script>window.location.href='/html/ie.html';</script><![endif]-->
|
||||
<style>
|
||||
html,
|
||||
body,
|
||||
#app {
|
||||
height: 100%;
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
}
|
||||
.chromeframe {
|
||||
margin: 0.2em 0;
|
||||
background: #ccc;
|
||||
color: #000;
|
||||
padding: 0.2em 0;
|
||||
}
|
||||
|
||||
#loader-wrapper {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 999999;
|
||||
}
|
||||
|
||||
#loader {
|
||||
display: block;
|
||||
position: relative;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
margin: -75px 0 0 -75px;
|
||||
border-radius: 50%;
|
||||
border: 3px solid transparent;
|
||||
border-top-color: #FFF;
|
||||
-webkit-animation: spin 2s linear infinite;
|
||||
-ms-animation: spin 2s linear infinite;
|
||||
-moz-animation: spin 2s linear infinite;
|
||||
-o-animation: spin 2s linear infinite;
|
||||
animation: spin 2s linear infinite;
|
||||
z-index: 1001;
|
||||
}
|
||||
|
||||
#loader:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 5px;
|
||||
left: 5px;
|
||||
right: 5px;
|
||||
bottom: 5px;
|
||||
border-radius: 50%;
|
||||
border: 3px solid transparent;
|
||||
border-top-color: #FFF;
|
||||
-webkit-animation: spin 3s linear infinite;
|
||||
-moz-animation: spin 3s linear infinite;
|
||||
-o-animation: spin 3s linear infinite;
|
||||
-ms-animation: spin 3s linear infinite;
|
||||
animation: spin 3s linear infinite;
|
||||
}
|
||||
|
||||
#loader:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 15px;
|
||||
left: 15px;
|
||||
right: 15px;
|
||||
bottom: 15px;
|
||||
border-radius: 50%;
|
||||
border: 3px solid transparent;
|
||||
border-top-color: #FFF;
|
||||
-moz-animation: spin 1.5s linear infinite;
|
||||
-o-animation: spin 1.5s linear infinite;
|
||||
-ms-animation: spin 1.5s linear infinite;
|
||||
-webkit-animation: spin 1.5s linear infinite;
|
||||
animation: spin 1.5s linear infinite;
|
||||
}
|
||||
|
||||
|
||||
@-webkit-keyframes spin {
|
||||
0% {
|
||||
-webkit-transform: rotate(0deg);
|
||||
-ms-transform: rotate(0deg);
|
||||
transform: rotate(0deg);
|
||||
<!--[if lt IE 11
|
||||
]><script>
|
||||
window.location.href = '/html/ie.html';
|
||||
</script><!
|
||||
[endif]-->
|
||||
<style>
|
||||
html,
|
||||
body,
|
||||
#app {
|
||||
height: 100%;
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
}
|
||||
100% {
|
||||
-webkit-transform: rotate(360deg);
|
||||
-ms-transform: rotate(360deg);
|
||||
transform: rotate(360deg);
|
||||
.chromeframe {
|
||||
margin: 0.2em 0;
|
||||
background: #ccc;
|
||||
color: #000;
|
||||
padding: 0.2em 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
0% {
|
||||
-webkit-transform: rotate(0deg);
|
||||
-ms-transform: rotate(0deg);
|
||||
transform: rotate(0deg);
|
||||
.logo {
|
||||
position: absolute;
|
||||
display: block;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
width: 100px;
|
||||
/* height: 162px; */
|
||||
transform: translate3d(-50%, -80px, 0);
|
||||
animation: twinkling 1.2s infinite ease-in-out;
|
||||
}
|
||||
100% {
|
||||
-webkit-transform: rotate(360deg);
|
||||
-ms-transform: rotate(360deg);
|
||||
transform: rotate(360deg);
|
||||
/* .animated {
|
||||
-webkit-animation-duration: 1s;
|
||||
animation-duration: 1s;
|
||||
-webkit-animation-fill-mode: both;
|
||||
animation-fill-mode: both;
|
||||
} */
|
||||
@keyframes twinkling {
|
||||
0% {
|
||||
opacity: 0.8;
|
||||
}
|
||||
50% {
|
||||
opacity: 0.4;
|
||||
}
|
||||
100% {
|
||||
opacity: 0.8;
|
||||
}
|
||||
}
|
||||
.loading {
|
||||
position: absolute;
|
||||
display: block;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate3d(-50%, 80px, 0);
|
||||
color: #fefeff;
|
||||
font-size: 14px;
|
||||
}
|
||||
canvas {
|
||||
display: block;
|
||||
left: 50%;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translate3d(-50%, 100px, 0);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
#loader-wrapper .loader-section {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
width: 51%;
|
||||
height: 100%;
|
||||
background: #7171C6;
|
||||
z-index: 1000;
|
||||
-webkit-transform: translateX(0);
|
||||
-ms-transform: translateX(0);
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
#loader-wrapper .loader-section.section-left {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
#loader-wrapper .loader-section.section-right {
|
||||
right: 0;
|
||||
}
|
||||
|
||||
|
||||
.loaded #loader-wrapper .loader-section.section-left {
|
||||
-webkit-transform: translateX(-100%);
|
||||
-ms-transform: translateX(-100%);
|
||||
transform: translateX(-100%);
|
||||
-webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
|
||||
transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
|
||||
}
|
||||
|
||||
.loaded #loader-wrapper .loader-section.section-right {
|
||||
-webkit-transform: translateX(100%);
|
||||
-ms-transform: translateX(100%);
|
||||
transform: translateX(100%);
|
||||
-webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
|
||||
transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
|
||||
}
|
||||
|
||||
.loaded #loader {
|
||||
opacity: 0;
|
||||
-webkit-transition: all 0.3s ease-out;
|
||||
transition: all 0.3s ease-out;
|
||||
}
|
||||
|
||||
.loaded #loader-wrapper {
|
||||
visibility: hidden;
|
||||
-webkit-transform: translateY(-100%);
|
||||
-ms-transform: translateY(-100%);
|
||||
transform: translateY(-100%);
|
||||
-webkit-transition: all 0.3s 1s ease-out;
|
||||
transition: all 0.3s 1s ease-out;
|
||||
}
|
||||
|
||||
.no-js #loader-wrapper {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.no-js h1 {
|
||||
color: #222222;
|
||||
}
|
||||
|
||||
#loader-wrapper .load_title {
|
||||
font-family: 'Open Sans';
|
||||
color: #FFF;
|
||||
font-size: 19px;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
z-index: 9999999999999;
|
||||
position: absolute;
|
||||
top: 60%;
|
||||
opacity: 1;
|
||||
line-height: 30px;
|
||||
}
|
||||
|
||||
#loader-wrapper .load_title span {
|
||||
font-weight: normal;
|
||||
font-style: italic;
|
||||
font-size: 13px;
|
||||
color: #FFF;
|
||||
opacity: 0.5;
|
||||
}
|
||||
</style>
|
||||
#loader-wrapper {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: #1a1a34;
|
||||
z-index: 1000;
|
||||
}
|
||||
</style>
|
||||
<script src="/loading/prefixfree.min.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app">
|
||||
<div id="loader-wrapper">
|
||||
<div id="loader"></div>
|
||||
<div class="loader-section section-left"></div>
|
||||
<div class="loader-section section-right"></div>
|
||||
<div class="load_title">正在加载系统资源，请耐心等待</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="loader-wrapper">
|
||||
<img class="logo animated" src="/logo.png" alt="" srcset="" />
|
||||
<div class="loading">资源加载中...</div>
|
||||
</div>
|
||||
</div>
|
||||
<script src="/loading/index.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
208
public/loading/index.js
Normal file
208
public/loading/index.js
Normal file
@@ -0,0 +1,208 @@
|
||||
/* ========================================================*/
|
||||
/* Light Loader
|
||||
/*========================================================*/
|
||||
var lightLoader = function (c, cw, ch) {
|
||||
var _this = this;
|
||||
this.c = c;
|
||||
this.ctx = c.getContext('2d');
|
||||
this.cw = cw;
|
||||
this.ch = ch;
|
||||
|
||||
this.loaded = 0;
|
||||
this.loaderSpeed = 1.5;
|
||||
this.loaderHeight = 8;
|
||||
this.loaderWidth = 428;
|
||||
this.loader = {
|
||||
x: this.cw / 2 - this.loaderWidth / 2,
|
||||
y: this.ch / 2 - this.loaderHeight / 2
|
||||
};
|
||||
this.particles = [];
|
||||
this.particleLift = 180;
|
||||
this.gravity = 0.15;
|
||||
this.particleRate = 8;
|
||||
|
||||
/* ========================================================*/
|
||||
/* Initialize
|
||||
/*========================================================*/
|
||||
this.init = function () {
|
||||
this.loop();
|
||||
};
|
||||
|
||||
/* ========================================================*/
|
||||
/* Utility Functions
|
||||
/*========================================================*/
|
||||
this.rand = function (rMi, rMa) {
|
||||
return ~~(Math.random() * (rMa - rMi + 1) + rMi);
|
||||
};
|
||||
this.hitTest = function (x1, y1, w1, h1, x2, y2, w2, h2) {
|
||||
return !(x1 + w1 < x2 || x2 + w2 < x1 || y1 + h1 < y2 || y2 + h2 < y1);
|
||||
};
|
||||
|
||||
/* ========================================================*/
|
||||
/* Update Loader
|
||||
/*========================================================*/
|
||||
this.updateLoader = function () {
|
||||
if (this.loaded < 100) {
|
||||
this.loaded += this.loaderSpeed;
|
||||
} else {
|
||||
this.loaded = 0;
|
||||
}
|
||||
};
|
||||
|
||||
/* ========================================================*/
|
||||
/* Render Loader
|
||||
/*========================================================*/
|
||||
this.renderLoader = function () {
|
||||
this.ctx.fillStyle = '#2F2F47';
|
||||
this.ctx.fillRect(this.loader.x, this.loader.y, this.loaderWidth, this.loaderHeight);
|
||||
|
||||
var newWidth = (this.loaded / 100) * this.loaderWidth;
|
||||
var linearGrad = this.ctx.createLinearGradient(0, 0, this.loaderWidth, 0);
|
||||
linearGrad.addColorStop(0.0, '#24DED0');
|
||||
linearGrad.addColorStop(1.0, '#1490EA');
|
||||
this.ctx.fillStyle = linearGrad;
|
||||
this.ctx.fillRect(this.loader.x, this.loader.y, newWidth, this.loaderHeight);
|
||||
|
||||
// this.ctx.fillStyle = '#2F2F47';
|
||||
// this.ctx.fillRect(
|
||||
// this.loader.x,
|
||||
// this.loader.y,
|
||||
// newWidth,
|
||||
// this.loaderHeight
|
||||
// );
|
||||
};
|
||||
|
||||
/* ========================================================*/
|
||||
/* Particles
|
||||
/*========================================================*/
|
||||
this.Particle = function () {
|
||||
this.x = _this.loader.x + (_this.loaded / 100) * _this.loaderWidth - _this.rand(0, 1);
|
||||
this.y = _this.ch / 2 + _this.rand(0, _this.loaderHeight) - _this.loaderHeight / 2;
|
||||
this.vx = (_this.rand(0, 4) - 2) / 100;
|
||||
this.vy = (_this.rand(0, _this.particleLift) - _this.particleLift * 2) / 100;
|
||||
this.width = _this.rand(1, 4) / 2;
|
||||
this.height = _this.rand(1, 4) / 2;
|
||||
};
|
||||
|
||||
this.Particle.prototype.update = function (i) {
|
||||
this.vx += (_this.rand(0, 6) - 3) / 100;
|
||||
this.vy += _this.gravity;
|
||||
this.x += this.vx;
|
||||
this.y += this.vy;
|
||||
|
||||
if (this.y > _this.ch) {
|
||||
_this.particles.splice(i, 1);
|
||||
}
|
||||
};
|
||||
|
||||
this.Particle.prototype.render = function () {
|
||||
_this.ctx.fillStyle = 'rgba(50, 213, 203, 0.4)';
|
||||
_this.ctx.fillRect(this.x, this.y, this.width, this.height);
|
||||
};
|
||||
|
||||
this.createParticles = function () {
|
||||
var i = this.particleRate;
|
||||
while (i--) {
|
||||
this.particles.push(new this.Particle());
|
||||
}
|
||||
};
|
||||
|
||||
this.updateParticles = function () {
|
||||
var i = this.particles.length;
|
||||
while (i--) {
|
||||
var p = this.particles[i];
|
||||
p.update(i);
|
||||
}
|
||||
};
|
||||
|
||||
this.renderParticles = function () {
|
||||
var i = this.particles.length;
|
||||
while (i--) {
|
||||
var p = this.particles[i];
|
||||
p.render();
|
||||
}
|
||||
};
|
||||
|
||||
/* ========================================================*/
|
||||
/* Clear Canvas
|
||||
/*========================================================*/
|
||||
this.clearCanvas = function () {
|
||||
this.ctx.globalCompositeOperation = 'source-over';
|
||||
this.ctx.clearRect(0, 0, this.cw, this.ch);
|
||||
this.ctx.globalCompositeOperation = 'lighter';
|
||||
};
|
||||
|
||||
/* ========================================================*/
|
||||
/* Animation Loop
|
||||
/*========================================================*/
|
||||
this.loop = function () {
|
||||
var loopIt = function () {
|
||||
requestAnimationFrame(loopIt, _this.c);
|
||||
_this.clearCanvas();
|
||||
|
||||
_this.createParticles();
|
||||
|
||||
_this.updateLoader();
|
||||
_this.updateParticles();
|
||||
|
||||
_this.renderLoader();
|
||||
_this.renderParticles();
|
||||
};
|
||||
loopIt();
|
||||
};
|
||||
};
|
||||
|
||||
/* ========================================================*/
|
||||
/* Check Canvas Support
|
||||
/*========================================================*/
|
||||
var isCanvasSupported = function () {
|
||||
var elem = document.createElement('canvas');
|
||||
return !!(elem.getContext && elem.getContext('2d'));
|
||||
};
|
||||
|
||||
/* ========================================================*/
|
||||
/* Setup requestAnimationFrame
|
||||
/*========================================================*/
|
||||
var setupRAF = function () {
|
||||
var lastTime = 0;
|
||||
var vendors = ['ms', 'moz', 'webkit', 'o'];
|
||||
for (var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
|
||||
window.requestAnimationFrame = window[vendors[x] + 'RequestAnimationFrame'];
|
||||
window.cancelAnimationFrame = window[vendors[x] + 'CancelAnimationFrame'] || window[vendors[x] + 'CancelRequestAnimationFrame'];
|
||||
}
|
||||
|
||||
if (!window.requestAnimationFrame) {
|
||||
window.requestAnimationFrame = function (callback, element) {
|
||||
var currTime = new Date().getTime();
|
||||
var timeToCall = Math.max(0, 16 - (currTime - lastTime));
|
||||
var id = window.setTimeout(function () {
|
||||
callback(currTime + timeToCall);
|
||||
}, timeToCall);
|
||||
lastTime = currTime + timeToCall;
|
||||
return id;
|
||||
};
|
||||
}
|
||||
|
||||
if (!window.cancelAnimationFrame) {
|
||||
window.cancelAnimationFrame = function (id) {
|
||||
clearTimeout(id);
|
||||
};
|
||||
}
|
||||
};
|
||||
|
||||
/* ========================================================*/
|
||||
/* Define Canvas and Initialize
|
||||
/*========================================================*/
|
||||
if (isCanvasSupported) {
|
||||
var c = document.createElement('canvas');
|
||||
c.width = 428;
|
||||
c.height = 100;
|
||||
var cw = c.width;
|
||||
var ch = c.height;
|
||||
// document.body.appendChild(c);
|
||||
document.getElementById('loader-wrapper').appendChild(c);
|
||||
var cl = new lightLoader(c, cw, ch);
|
||||
|
||||
setupRAF();
|
||||
cl.init();
|
||||
}
|
||||
477
public/loading/prefixfree.min.js
vendored
Normal file
477
public/loading/prefixfree.min.js
vendored
Normal file
@@ -0,0 +1,477 @@
|
||||
(function () {
|
||||
if (!window.addEventListener) {
|
||||
return;
|
||||
}
|
||||
|
||||
var self = (window.StyleFix = {
|
||||
link: function (link) {
|
||||
try {
|
||||
// Ignore stylesheets with data-noprefix attribute as well as alternate stylesheets
|
||||
if (link.rel !== 'stylesheet' || link.hasAttribute('data-noprefix')) {
|
||||
return;
|
||||
}
|
||||
} catch (e) {
|
||||
return;
|
||||
}
|
||||
|
||||
var url = link.href || link.getAttribute('data-href');
|
||||
var base = url.replace(/[^\/]+$/, '');
|
||||
var base_scheme = (/^[a-z]{3,10}:/.exec(base) || [''])[0];
|
||||
var base_domain = (/^[a-z]{3,10}:\/\/[^\/]+/.exec(base) || [''])[0];
|
||||
var base_query = /^([^?]*)\??/.exec(url)[1];
|
||||
var parent = link.parentNode;
|
||||
var xhr = new XMLHttpRequest();
|
||||
var process;
|
||||
|
||||
xhr.onreadystatechange = function () {
|
||||
if (xhr.readyState === 4) {
|
||||
process();
|
||||
}
|
||||
};
|
||||
|
||||
process = function () {
|
||||
var css = xhr.responseText;
|
||||
|
||||
if (css && link.parentNode && (!xhr.status || xhr.status < 400 || xhr.status > 600)) {
|
||||
css = self.fix(css, true, link);
|
||||
|
||||
// Convert relative URLs to absolute, if needed
|
||||
if (base) {
|
||||
css = css.replace(/url\(\s*?((?:"|')?)(.+?)\1\s*?\)/gi, function ($0, quote, url) {
|
||||
if (/^([a-z]{3,10}:|#)/i.test(url)) {
|
||||
// Absolute & or hash-relative
|
||||
return $0;
|
||||
} else if (/^\/\//.test(url)) {
|
||||
// Scheme-relative
|
||||
// May contain sequences like /../ and /./ but those DO work
|
||||
return 'url("' + base_scheme + url + '")';
|
||||
} else if (/^\//.test(url)) {
|
||||
// Domain-relative
|
||||
return 'url("' + base_domain + url + '")';
|
||||
} else if (/^\?/.test(url)) {
|
||||
// Query-relative
|
||||
return 'url("' + base_query + url + '")';
|
||||
} else {
|
||||
// Path-relative
|
||||
return 'url("' + base + url + '")';
|
||||
}
|
||||
});
|
||||
|
||||
// behavior URLs shoudn’t be converted (Issue #19)
|
||||
// base should be escaped before added to RegExp (Issue #81)
|
||||
var escaped_base = base.replace(/([\\\^\$*+[\]?{}.=!:(|)])/g, '\\$1');
|
||||
css = css.replace(RegExp('\\b(behavior:\\s*?url\\(\'?"?)' + escaped_base, 'gi'), '$1');
|
||||
}
|
||||
|
||||
var style = document.createElement('style');
|
||||
style.textContent = css;
|
||||
style.media = link.media;
|
||||
style.disabled = link.disabled;
|
||||
style.setAttribute('data-href', link.getAttribute('href'));
|
||||
|
||||
parent.insertBefore(style, link);
|
||||
parent.removeChild(link);
|
||||
|
||||
style.media = link.media; // Duplicate is intentional. See issue #31
|
||||
}
|
||||
};
|
||||
|
||||
try {
|
||||
xhr.open('GET', url);
|
||||
xhr.send(null);
|
||||
} catch (e) {
|
||||
// Fallback to XDomainRequest if available
|
||||
if (typeof XDomainRequest !== 'undefined') {
|
||||
xhr = new XDomainRequest();
|
||||
xhr.onerror = xhr.onprogress = function () {};
|
||||
xhr.onload = process;
|
||||
xhr.open('GET', url);
|
||||
xhr.send(null);
|
||||
}
|
||||
}
|
||||
|
||||
link.setAttribute('data-inprogress', '');
|
||||
},
|
||||
|
||||
styleElement: function (style) {
|
||||
if (style.hasAttribute('data-noprefix')) {
|
||||
return;
|
||||
}
|
||||
var disabled = style.disabled;
|
||||
|
||||
style.textContent = self.fix(style.textContent, true, style);
|
||||
|
||||
style.disabled = disabled;
|
||||
},
|
||||
|
||||
styleAttribute: function (element) {
|
||||
var css = element.getAttribute('style');
|
||||
|
||||
css = self.fix(css, false, element);
|
||||
|
||||
element.setAttribute('style', css);
|
||||
},
|
||||
|
||||
process: function () {
|
||||
// Linked stylesheets
|
||||
$('link[rel="stylesheet"]:not([data-inprogress])').forEach(StyleFix.link);
|
||||
|
||||
// Inline stylesheets
|
||||
$('style').forEach(StyleFix.styleElement);
|
||||
|
||||
// Inline styles
|
||||
$('[style]').forEach(StyleFix.styleAttribute);
|
||||
},
|
||||
|
||||
register: function (fixer, index) {
|
||||
(self.fixers = self.fixers || []).splice(index === undefined ? self.fixers.length : index, 0, fixer);
|
||||
},
|
||||
|
||||
fix: function (css, raw, element) {
|
||||
for (var i = 0; i < self.fixers.length; i++) {
|
||||
css = self.fixers[i](css, raw, element) || css;
|
||||
}
|
||||
|
||||
return css;
|
||||
},
|
||||
|
||||
camelCase: function (str) {
|
||||
return str
|
||||
.replace(/-([a-z])/g, function ($0, $1) {
|
||||
return $1.toUpperCase();
|
||||
})
|
||||
.replace('-', '');
|
||||
},
|
||||
|
||||
deCamelCase: function (str) {
|
||||
return str.replace(/[A-Z]/g, function ($0) {
|
||||
return '-' + $0.toLowerCase();
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
/** ************************************
|
||||
* Process styles
|
||||
**************************************/
|
||||
(function () {
|
||||
setTimeout(function () {
|
||||
$('link[rel="stylesheet"]').forEach(StyleFix.link);
|
||||
}, 10);
|
||||
|
||||
document.addEventListener('DOMContentLoaded', StyleFix.process, false);
|
||||
})();
|
||||
|
||||
function $(expr, con) {
|
||||
return [].slice.call((con || document).querySelectorAll(expr));
|
||||
}
|
||||
})();
|
||||
|
||||
/**
|
||||
* PrefixFree
|
||||
*/
|
||||
(function (root) {
|
||||
if (!window.StyleFix || !window.getComputedStyle) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Private helper
|
||||
function fix(what, before, after, replacement, css) {
|
||||
what = self[what];
|
||||
|
||||
if (what.length) {
|
||||
var regex = RegExp(before + '(' + what.join('|') + ')' + after, 'gi');
|
||||
|
||||
css = css.replace(regex, replacement);
|
||||
}
|
||||
|
||||
return css;
|
||||
}
|
||||
|
||||
var self = (window.PrefixFree = {
|
||||
prefixCSS: function (css, raw, element) {
|
||||
var prefix = self.prefix;
|
||||
|
||||
// Gradient angles hotfix
|
||||
if (self.functions.indexOf('linear-gradient') > -1) {
|
||||
// Gradients are supported with a prefix, convert angles to legacy
|
||||
css = css.replace(/(\s|:|,)(repeating-)?linear-gradient\(\s*(-?\d*\.?\d*)deg/gi, function ($0, delim, repeating, deg) {
|
||||
return delim + (repeating || '') + 'linear-gradient(' + (90 - deg) + 'deg';
|
||||
});
|
||||
}
|
||||
|
||||
css = fix('functions', '(\\s|:|,)', '\\s*\\(', '$1' + prefix + '$2(', css);
|
||||
css = fix('keywords', '(\\s|:)', '(\\s|;|\\}|$)', '$1' + prefix + '$2$3', css);
|
||||
css = fix('properties', '(^|\\{|\\s|;)', '\\s*:', '$1' + prefix + '$2:', css);
|
||||
|
||||
// Prefix properties *inside* values (issue #8)
|
||||
if (self.properties.length) {
|
||||
var regex = RegExp('\\b(' + self.properties.join('|') + ')(?!:)', 'gi');
|
||||
|
||||
css = fix(
|
||||
'valueProperties',
|
||||
'\\b',
|
||||
':(.+?);',
|
||||
function ($0) {
|
||||
return $0.replace(regex, prefix + '$1');
|
||||
},
|
||||
css
|
||||
);
|
||||
}
|
||||
|
||||
if (raw) {
|
||||
css = fix('selectors', '', '\\b', self.prefixSelector, css);
|
||||
css = fix('atrules', '@', '\\b', '@' + prefix + '$1', css);
|
||||
}
|
||||
|
||||
// Fix double prefixing
|
||||
css = css.replace(RegExp('-' + prefix, 'g'), '-');
|
||||
|
||||
// Prefix wildcard
|
||||
css = css.replace(/-\*-(?=[a-z]+)/gi, self.prefix);
|
||||
|
||||
return css;
|
||||
},
|
||||
|
||||
property: function (property) {
|
||||
return (self.properties.indexOf(property) ? self.prefix : '') + property;
|
||||
},
|
||||
|
||||
value: function (value, property) {
|
||||
value = fix('functions', '(^|\\s|,)', '\\s*\\(', '$1' + self.prefix + '$2(', value);
|
||||
value = fix('keywords', '(^|\\s)', '(\\s|$)', '$1' + self.prefix + '$2$3', value);
|
||||
|
||||
// TODO properties inside values
|
||||
|
||||
return value;
|
||||
},
|
||||
|
||||
// Warning: Prefixes no matter what, even if the selector is supported prefix-less
|
||||
prefixSelector: function (selector) {
|
||||
return selector.replace(/^:{1,2}/, function ($0) {
|
||||
return $0 + self.prefix;
|
||||
});
|
||||
},
|
||||
|
||||
// Warning: Prefixes no matter what, even if the property is supported prefix-less
|
||||
prefixProperty: function (property, camelCase) {
|
||||
var prefixed = self.prefix + property;
|
||||
|
||||
return camelCase ? StyleFix.camelCase(prefixed) : prefixed;
|
||||
}
|
||||
});
|
||||
|
||||
/** ************************************
|
||||
* Properties
|
||||
**************************************/
|
||||
(function () {
|
||||
var prefixes = {};
|
||||
var properties = [];
|
||||
var shorthands = {};
|
||||
var style = getComputedStyle(document.documentElement, null);
|
||||
var dummy = document.createElement('div').style;
|
||||
|
||||
// Why are we doing this instead of iterating over properties in a .style object? Cause Webkit won't iterate over those.
|
||||
var iterate = function (property) {
|
||||
if (property.charAt(0) === '-') {
|
||||
properties.push(property);
|
||||
|
||||
var parts = property.split('-');
|
||||
var prefix = parts[1];
|
||||
|
||||
// Count prefix uses
|
||||
prefixes[prefix] = ++prefixes[prefix] || 1;
|
||||
|
||||
// This helps determining shorthands
|
||||
while (parts.length > 3) {
|
||||
parts.pop();
|
||||
|
||||
var shorthand = parts.join('-');
|
||||
|
||||
if (supported(shorthand) && properties.indexOf(shorthand) === -1) {
|
||||
properties.push(shorthand);
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
var supported = function (property) {
|
||||
return StyleFix.camelCase(property) in dummy;
|
||||
};
|
||||
|
||||
// Some browsers have numerical indices for the properties, some don't
|
||||
if (style.length > 0) {
|
||||
for (var i = 0; i < style.length; i++) {
|
||||
iterate(style[i]);
|
||||
}
|
||||
} else {
|
||||
for (var property in style) {
|
||||
iterate(StyleFix.deCamelCase(property));
|
||||
}
|
||||
}
|
||||
|
||||
// Find most frequently used prefix
|
||||
var highest = { uses: 0 };
|
||||
for (var prefix in prefixes) {
|
||||
var uses = prefixes[prefix];
|
||||
|
||||
if (highest.uses < uses) {
|
||||
highest = { prefix: prefix, uses: uses };
|
||||
}
|
||||
}
|
||||
|
||||
self.prefix = '-' + highest.prefix + '-';
|
||||
self.Prefix = StyleFix.camelCase(self.prefix);
|
||||
|
||||
self.properties = [];
|
||||
|
||||
// Get properties ONLY supported with a prefix
|
||||
for (var i = 0; i < properties.length; i++) {
|
||||
var property = properties[i];
|
||||
|
||||
if (property.indexOf(self.prefix) === 0) {
|
||||
// we might have multiple prefixes, like Opera
|
||||
var unprefixed = property.slice(self.prefix.length);
|
||||
|
||||
if (!supported(unprefixed)) {
|
||||
self.properties.push(unprefixed);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// IE fix
|
||||
if (self.Prefix == 'Ms' && !('transform' in dummy) && !('MsTransform' in dummy) && 'msTransform' in dummy) {
|
||||
self.properties.push('transform', 'transform-origin');
|
||||
}
|
||||
|
||||
self.properties.sort();
|
||||
})();
|
||||
|
||||
/** ************************************
|
||||
* Values
|
||||
**************************************/
|
||||
(function () {
|
||||
// Values that might need prefixing
|
||||
var functions = {
|
||||
'linear-gradient': {
|
||||
property: 'backgroundImage',
|
||||
params: 'red, teal'
|
||||
},
|
||||
calc: {
|
||||
property: 'width',
|
||||
params: '1px + 5%'
|
||||
},
|
||||
element: {
|
||||
property: 'backgroundImage',
|
||||
params: '#foo'
|
||||
},
|
||||
'cross-fade': {
|
||||
property: 'backgroundImage',
|
||||
params: 'url(a.png), url(b.png), 50%'
|
||||
}
|
||||
};
|
||||
|
||||
functions['repeating-linear-gradient'] = functions['repeating-radial-gradient'] = functions['radial-gradient'] = functions['linear-gradient'];
|
||||
|
||||
// Note: The properties assigned are just to *test* support.
|
||||
// The keywords will be prefixed everywhere.
|
||||
var keywords = {
|
||||
initial: 'color',
|
||||
'zoom-in': 'cursor',
|
||||
'zoom-out': 'cursor',
|
||||
box: 'display',
|
||||
flexbox: 'display',
|
||||
'inline-flexbox': 'display',
|
||||
flex: 'display',
|
||||
'inline-flex': 'display',
|
||||
grid: 'display',
|
||||
'inline-grid': 'display',
|
||||
'min-content': 'width'
|
||||
};
|
||||
|
||||
self.functions = [];
|
||||
self.keywords = [];
|
||||
|
||||
var style = document.createElement('div').style;
|
||||
|
||||
function supported(value, property) {
|
||||
style[property] = '';
|
||||
style[property] = value;
|
||||
|
||||
return !!style[property];
|
||||
}
|
||||
|
||||
for (var func in functions) {
|
||||
var test = functions[func];
|
||||
var property = test.property;
|
||||
var value = func + '(' + test.params + ')';
|
||||
|
||||
if (!supported(value, property) && supported(self.prefix + value, property)) {
|
||||
// It's supported, but with a prefix
|
||||
self.functions.push(func);
|
||||
}
|
||||
}
|
||||
|
||||
for (var keyword in keywords) {
|
||||
var property = keywords[keyword];
|
||||
|
||||
if (!supported(keyword, property) && supported(self.prefix + keyword, property)) {
|
||||
// It's supported, but with a prefix
|
||||
self.keywords.push(keyword);
|
||||
}
|
||||
}
|
||||
})();
|
||||
|
||||
/** ************************************
|
||||
* Selectors and @-rules
|
||||
**************************************/
|
||||
(function () {
|
||||
var selectors = {
|
||||
':read-only': null,
|
||||
':read-write': null,
|
||||
':any-link': null,
|
||||
'::selection': null
|
||||
};
|
||||
|
||||
var atrules = {
|
||||
keyframes: 'name',
|
||||
viewport: null,
|
||||
document: 'regexp(".")'
|
||||
};
|
||||
|
||||
self.selectors = [];
|
||||
self.atrules = [];
|
||||
|
||||
var style = root.appendChild(document.createElement('style'));
|
||||
|
||||
function supported(selector) {
|
||||
style.textContent = selector + '{}'; // Safari 4 has issues with style.innerHTML
|
||||
|
||||
return !!style.sheet.cssRules.length;
|
||||
}
|
||||
|
||||
for (var selector in selectors) {
|
||||
var test = selector + (selectors[selector] ? '(' + selectors[selector] + ')' : '');
|
||||
|
||||
if (!supported(test) && supported(self.prefixSelector(test))) {
|
||||
self.selectors.push(selector);
|
||||
}
|
||||
}
|
||||
|
||||
for (var atrule in atrules) {
|
||||
var test = atrule + ' ' + (atrules[atrule] || '');
|
||||
|
||||
if (!supported('@' + test) && supported('@' + self.prefix + test)) {
|
||||
self.atrules.push(atrule);
|
||||
}
|
||||
}
|
||||
|
||||
root.removeChild(style);
|
||||
})();
|
||||
|
||||
// Properties that accept properties as their value
|
||||
self.valueProperties = ['transition', 'transition-property'];
|
||||
|
||||
// Add class for current prefix
|
||||
root.className += ' ' + self.prefix;
|
||||
|
||||
StyleFix.register(self.prefixCSS);
|
||||
})(document.documentElement);
|
||||
BIN
public/logo.png
Normal file
BIN
public/logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 137 KiB |
Reference in New Issue
Block a user