dynamically pulling in modernizr plugin. cleaner JS output.

addyosmani · Feb 27, 2012 · 075c821 · 075c821
1 parent 9cab103
commit 075c821
Show file tree

Hide file tree

Showing 5 changed files with 42 additions and 21 deletions.
diff --git a/index.html b/index.html
@@ -4,6 +4,7 @@
     <meta charset="utf-8">
     <title>HTML5 Please Supported Browsers API</title>
     <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="shortcut icon" href="http://html5please.com/favicon.ico" />
     <link href='http://fonts.googleapis.com/css?family=Alfa+Slab+One|Droid+Serif:700italic,400italic' rel='stylesheet' type='text/css'>
     <link rel="stylesheet" href="site/css/style.css">
   </head>

diff --git a/modernizr.html5please.js b/modernizr.html5please.js
@@ -1,22 +1,20 @@
 // HTML5 Please API, Modernizr plugin
 // v0.5
 
+//    usage:
 
-/*
-  usage:
 
+//  Modernizr.html5please({
+//      features : 'opacity fontface postmessage regions',
+//      yep      : function(){ // tests all pass
+//          initApp();
+//      },
+//      nope : function(data){ // 1+ test fails. passed data payload from api
+//          console.log('hi',data);
+//      }
+//  });
 
-Modernizr.html5please({
-    features : 'opacity fontface postmessage regions',     
-    yep      : function(){ // tests all pass
-        initApp();
-    },
-    nope : function(data){ // 1+ test fails. passed data payload from api
-        console.log('hi',data);
-    }
-}); 
-
-*/
+//
 
 
 Modernizr.html5please = function(opts){

diff --git a/site/css/style.css b/site/css/style.css
@@ -1,4 +1,3 @@
-@charset "UTF-8";
 /* normalize.css 2011-07-06T20:20 UTC //github.com/jonathantneal/normalize.css */
 article, aside, details, figcaption, figure, footer, header, hgroup, nav, section {
   display: block; }
@@ -452,7 +451,8 @@ input[type="checkbox"] {
   word-wrap: break-word;
   text-align: left;
   min-height: 12em;
-  font-size: 16px; }
+  font-size: 16px;
+  white-space: pre-wrap; }
   #widget a {
     color: #060231;
     display: block; }

diff --git a/site/css/style.scss b/site/css/style.scss
@@ -446,6 +446,7 @@ input[type="text"] { @extend .input-text; }
   text-align: left;
   min-height: 12em;
   font-size: 16px;
+  white-space: pre-wrap;
 
   a {
     color: $bgcolor;

diff --git a/site/js/script.js b/site/js/script.js
@@ -1,6 +1,6 @@
       var $features = $('#features'),
          $options = $('#get-api').find('input'),
-         $callback = '?callback=h5pCaniuse&',
+         $callback = '?callback=h5please&',
          $h5pMessage = $('#h5p-message'),
          $widgetformat = $('input[name="widgetformat"]'),
          $apiresult = $('#api-result'),
@@ -16,14 +16,16 @@
            uri: 2
          },
          jscontent = {
-           prefix: '&lt;div id="h5p-message">&lt;/div>&lt;script>var x=document.getElementById("h5p-message");window.h5pCaniuse=function(a){x.innerHTML=a.html}&lt;/script>&lt;script src="',
+           prefix: '&lt;div id="h5p-message">&lt;/div>&lt;script async>var h5pmessage=document.getElementById("h5p-message");window.h5please=function(a){h5pmessage.innerHTML=a.html}&lt;/script>&lt;script async src="',
            suffix: '&lt;/script>',
            message: 'For better performance, make sure you test for these features before invoking the widget'
          },
 
          modernizrcontent = {
-           prefix: '&lt;div id="h5p-message">&lt;/div>&lt;script>Modernizr.browserPrompt=function(a,b){if(a.agents){Modernizr.browserPrompt.cb(a);return}var c=!0,d=a.features.split(" "),e=a.options,f;for(var g=-1,h=d.length;++g&lt;h;)f=d[g],!Modernizr[f]&&(c=!1);if(c)return c;var i=document.createElement("script"),j=document.getElementsByTagName("script")[0],k="http://api.html5please.com/"+d.join("+")+".json?callback=Modernizr.browserPrompt&html&"+e;return Modernizr.browserPrompt.cb=b,i.src=k,j.parentNode.insertBefore(i,j),!1},Modernizr.browserPrompt({',
-           suffix: '},function(a){var b=document.getElementById("h5p-message");b.innerHTML=a.html})&lt;/script>',
+           preprefix: '&lt;div id="h5p-message">&lt;/div>&lt;script async>',
+           plugin: undefined,
+           prefix : ';\n\nModernizr.browserPrompt({ \n  features: ',
+           suffix: ', \n  nope: function(a){ document.getElementById("h5p-message").innerHTML=a.html; }\n})&lt;/script>',
            message: 'Make sure you include <a href="http://modernizr.com">modernizr</a> inside the head tag of your markup'
           };
 
@@ -150,7 +152,14 @@
 
       function renderWidget(url, type) {
         if(type == widget.modernizr) {
-          $widget.html(modernizrcontent.prefix + 'features: "' + api.features + '", options:"' + formattedOptions() + '"' + modernizrcontent.suffix);
+          $widget.html(
+            modernizrcontent.preprefix +
+            modernizrcontent.plugin +
+            modernizrcontent.prefix +
+            '"' + api.features +
+            '", \n  options:"' + formattedOptions() +
+            '"' + modernizrcontent.suffix);
+
           $widgetmessage.html(modernizrcontent.message);
         } else if (type == widget.js) {
           $widget.html(jscontent.prefix + url + jscontent.suffix);
@@ -161,7 +170,7 @@
         }
       };
 
-      window.h5pCaniuse = function(data) {
+      window.h5please = function(data) {
         renderPreview(data);
 
         cache[createUrl()] = data;
@@ -254,3 +263,15 @@
 			setTimeout( arguments.callee, 1500 );
 		})();
 
+
+function minify(str){ // sorta kinda
+  return str
+          .replace(/(^|\n)\s*?\/\/.*/g,'') // line comments
+          .replace(/\s+/g,' ')  // extra whitespace
+}
+
+function processPlugin(data){
+  modernizrcontent.plugin = minify(data);
+}
+
+$.get('/modernizr.html5please.js', processPlugin, 'text');