modernizr
Version:
Modernizr is a JavaScript library that detects HTML5 and CSS3 features in the user’s browser.
341 lines (320 loc) • 9.72 kB
HTML
<!doctype html>
<html class="no-js" lang=en>
<head>
<title>Modular Modernizr Demo Page</title>
<style>
textarea {
width: 100%;
height: 20em;
}
</style>
</head>
<body>
<div>
<h1>Config JSON</h1>
<textarea id="config-json">{
"classPrefix" : "",
"options": [
"setClasses",
"addTest",
"html5printshiv",
"load",
"testProp",
"fnBind"
],
"feature-detects": [
"test/a/download",
"test/audio/audiodata",
"test/audio/webaudio",
"test/battery/lowbattery",
"test/canvas/todataurl",
"test/css/animations",
"test/css/backgroundposition-shorthand",
"test/css/backgroundposition-xy",
"test/css/backgroundrepeat",
"test/css/backgroundsize",
"test/css/backgroundsizecover",
"test/css/borderimage",
"test/css/borderradius",
"test/css/boxshadow",
"test/css/boxsizing",
"test/css/calc",
"test/css/columns",
"test/css/cubicbezierrange",
"test/css/displayrunin",
"test/css/displaytable",
"test/css/filters",
"test/css/flexbox",
"test/css/flexboxlegacy",
"test/css/fontface",
"test/css/generatedcontent",
"test/css/gradients",
"test/css/hsla",
"test/css/hyphens",
"test/css/lastchild",
"test/css/mask",
"test/css/mediaqueries",
"test/css/multiplebgs",
"test/css/objectfit",
"test/css/opacity",
"test/css/overflow-scrolling",
"test/css/pointerevents",
"test/css/positionsticky",
"test/css/pseudoanimations",
"test/css/pseudotransitions",
"test/css/reflections",
"test/css/regions",
"test/css/remunit",
"test/css/resize",
"test/css/rgba",
"test/css/scrollbars",
"test/css/subpixelfont",
"test/css/supports",
"test/css/textshadow",
"test/css/transforms",
"test/css/transforms3d",
"test/css/transitions",
"test/css/userselect",
"test/css/vhunit",
"test/css/vmaxunit",
"test/css/vminunit",
"test/css/vwunit",
"test/css/wrapflow",
"test/dom/classlist",
"test/dom/createElement-attrs",
"test/dom/dataset",
"test/dom/microdata",
"test/elem/datalist",
"test/elem/details",
"test/elem/output",
"test/elem/progress-meter",
"test/elem/ruby",
"test/elem/time",
"test/elem/track",
"test/es5/strictmode",
"test/event/deviceorientation-motion",
"test/file/api",
"test/file/filesystem",
"test/forms/fileinput",
"test/forms/formattribute",
"test/forms/inputnumber-l10n",
"test/forms/placeholder",
"test/forms/speechinput",
"test/forms/validation",
"test/iframe/sandbox",
"test/iframe/seamless",
"test/iframe/srcdoc",
"test/img/apng",
"test/img/webp-lossless",
"test/img/webp",
"test/network/connection",
"test/network/eventsource",
"test/network/xhr2",
"test/script/async",
"test/script/defer",
"test/storage/localstorage",
"test/storage/sessionstorage",
"test/storage/websqldatabase",
"test/style/scoped",
"test/svg/clippaths",
"test/svg/filters",
"test/svg/inline",
"test/svg/smil",
"test/url/data-uri",
"test/webgl/extensions",
"test/websockets/binary",
"test/window/framed",
"test/workers/blobworkers",
"test/workers/dataworkers",
"test/workers/sharedworkers",
"test/workers/webworkers",
"test/webrtc/getusermedia",
"test/webrtc/peerconnection",
"test/applicationcache",
"test/audio",
"test/battery",
"test/blob",
"test/canvas",
"test/canvastext",
"test/contenteditable",
"test/contentsecuritypolicy",
"test/contextmenu",
"test/cookies",
"test/cors",
"test/custom-protocol-handler",
"test/dart",
"test/dataview-api",
"test/draganddrop",
"test/emoji",
"test/exif-orientation",
"test/fullscreen-api",
"test/gamepad",
"test/hashchange",
"test/history",
"test/ie8compat",
"test/indexedDB",
"test/input",
"test/inputtypes",
"test/json",
"test/lists-reversed",
"test/mathml",
"test/notification",
"test/pagevisibility-api",
"test/performance",
"test/pointerevents",
"test/pointerlock-api",
"test/postmessage",
"test/quota-management-api",
"test/requestanimationframe",
"test/svg",
"test/touchevents",
"test/unicode",
"test/userdata",
"test/vibration",
"test/video",
"test/video/autoplay",
"test/web-intents",
"test/webgl",
"test/websockets"
]
}</textarea>
</div>
<button id="build">If you build it</button>
<div>
<h1>Modernizr Output</h1>
<h3>Development</h3>
<textarea id="buildoutput"></textarea>
<br />
<h3>Minified</h3>
<textarea id="buildoutputmin"></textarea>
</div>
<script src="r.js"></script>
<script src="/node_modules/underscore/underscore-min.js"></script>
<script>
var buildButton = document.getElementById('build');
var configArea = document.getElementById('config-json');
var license = '/*!\n' +
' * Modernizr v3.0.0pre\n' +
' * modernizr.com\n' +
' *\n' +
' * Copyright (c) Faruk Ates, Paul Irish, Alex Sexton\n' +
' * MIT License\n' +
'*/\n' +
' \n' +
'/*\n' +
' * Modernizr tests which native CSS3 and HTML5 features are available in the\n' +
' * current UA and makes the results available to you in two ways: as properties on\n' +
' * a global `Modernizr` object, and as classes on the `<html>` element. This\n' +
' * information allows you to progressively enhance your pages with a granular level\n' +
' * of control over the experience.\n' +
' *\n' +
' * Modernizr has an optional (*not included*) conditional resource loader called\n' +
' * `Modernizr.load()`, based on [Yepnope.js](http://yepnopejs.com). You can get a\n' +
' * build that includes `Modernizr.load()`, as well as choosing which feature tests\n' +
' * to include on the [Download page](http://www.modernizr.com/download/).\n' +
' *\n' +
' *\n' +
' * Authors Faruk Ates, Paul Irish, Alex Sexton\n' +
' * Contributors Ryan Seddon, Ben Alman\n' +
' */';
// avoid some config
define('underscore', function () { return _; });
// Handle a build
buildButton.onclick = function () {
var config = configArea.value;
try {
config = JSON.parse(config);
}
catch(e) {
alert('Bad config, yo');
return;
}
require(['../src/generate'], function( generate ) {
var modInit = generate(config);
requirejs.optimize({
"baseUrl" : "../src/",
"optimize" : "none",
"optimizeCss" : "none",
"paths" : {
"test" : "../../feature-detects",
},
"include" : ["modernizr-init"],
rawText: {
"modernizr-init" : modInit
},
wrap: {
start: license + "\n;(function(window, document, undefined){",
end: "})(this, document);"
},
onBuildWrite: function (id, path, contents) {
if ((/define\(.*?\{/).test(contents)) {
//Remove AMD ceremony for use without require.js or almond.js
contents = contents.replace(/define\(.*?\{/, '');
contents = contents.replace(/\}\);\s*?$/,'');
if ( !contents.match(/Modernizr\.addTest\(/) && !contents.match(/Modernizr\.addAsyncTest\(/) ) {
//remove last return statement and trailing })
contents = contents.replace(/return.*[^return]*$/,'');
}
}
else if ((/require\([^\{]*?\{/).test(contents)) {
contents = contents.replace(/require[^\{]+\{/, '');
contents = contents.replace(/\}\);\s*$/,'');
}
return contents;
},
out : function (output) {
output = output.replace('define("modernizr-init", function(){});', '');
// Hack the prefix into place. Anything is way to big for something so small.
if ( config && config.classPrefix ) {
output = output.replace("classPrefix : '',", "classPrefix : '" + config.classPrefix.replace(/"/g, '\\"') + "',");
}
var outBox = document.getElementById('buildoutput');
var outBoxMin = document.getElementById('buildoutputmin');
outBox.innerHTML = output;
require({context: 'build'}, ['uglifyjs2'], function (u2){
var UglifyJS = u2.UglifyJS;
outBoxMin.innerHTML = '/*! Modernizr 3.0.0pre (Custom Build) | MIT */\n' + minify(UglifyJS, output, {});
});
// add in old hack for now, just so i don't forget
//outBoxMin.innerHTML = uglify( output, ['--extra', '--unsafe'] ).replace( "return a.history&&history.pushState", "return !!(a.history&&history.pushState)" );
}
}, function (buildText) {
console.log({ buildOutput: buildText });
});
});
};
function minify( UglifyJS, code, options) {
options = UglifyJS.defaults(options, {
outSourceMap : null,
sourceRoot : null,
inSourceMap : null,
fromString : false,
warnings : false
});
if (typeof files == "string") {
files = [ files ];
}
// 1. parse
var toplevel = UglifyJS.parse(code, {
filename: 'modernizr-custombuild.min.js',
toplevel: toplevel
});
// 2. compress
toplevel.figure_out_scope();
var sq = UglifyJS.Compressor({
warnings: options.warnings,
hoist_vars: true
});
toplevel = toplevel.transform(sq);
// 3. mangle
toplevel.figure_out_scope();
toplevel.compute_char_frequency();
toplevel.mangle_names({except: ['Modernizr']});
// 4. output
var stream = UglifyJS.OutputStream({});
toplevel.print(stream);
return stream.toString();
}
</script>
</body>
</html>