bunch of updates to customizer

_includes/footer.html

@@ -13,6 +13,7 @@
 <script src="{{ page.base_url }}assets/js/less.js"></script>
 <script src="{{ page.base_url }}assets/js/jszip.js"></script>
 <script src="{{ page.base_url }}assets/js/uglify.js"></script>
+<script src="{{ page.base_url }}assets/js/filesaver.js"></script>
 <script src="{{ page.base_url }}assets/js/customizer.js"></script>
 {% endif %}
 

assets/js/customizer.js

 window.onload = function () { // wait for load in a dumb way because B-0
   var cw = '/*!\n * Bootstrap v3.0.0-rc.2\n *\n * Copyright 2013 Twitter, Inc\n * Licensed under the Apache License v2.0\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Designed and built with all the love in the world @twitter by @mdo and @fat.\n */\n\n'
 
-  function showError (msg, err) {
+  function showError(msg, err) {
     $('<div id="bsCustomizerAlert" class="bs-customizer-alert">\
         <div class="container">\
           <a href="#bsCustomizerAlert" data-dismiss="alert" class="close pull-right">&times;</a>\
@@ -12,19 +12,32 @@ window.onload = function () { // wait for load in a dumb way because B-0
     throw err
   }
 
+  function showCallout(msg, showUpTop) {
+    var callout = $('<div class="bs-callout bs-callout-danger">\
+       <h4>Attention!</h4>\
+      <p>' + msg + '</p>\
+    </div>')
+
+    if (showUpTop) {
+      callout.appendTo('.bs-docs-container')
+    } else {
+      callout.insertAfter('.bs-customize-download')
+    }
+  }
+
   function getQueryParam(key) {
     key = key.replace(/[*+?^$.\[\]{}()|\\\/]/g, "\\$&"); // escape RegEx meta chars
     var match = location.search.match(new RegExp("[?&]"+key+"=([^&]+)(&|$)"));
     return match && decodeURIComponent(match[1].replace(/\+/g, " "));
   }
 
-  function createGist (configData) {
+  function createGist(configData) {
     var data = {
       "description": "Bootstrap Customizer Config",
       "public": true,
       "files": {
         "config.json": {
-          "content": JSON.stringify(configData)
+          "content": JSON.stringify(configData, null, 2)
         }
       }
     }
@@ -42,7 +55,7 @@ window.onload = function () { // wait for load in a dumb way because B-0
     })
   }
 
-  function generateUrl() {
+  function getCustomizerData() {
     var vars = {}
 
     $('#less-variables-section input')
@@ -58,7 +71,7 @@ window.onload = function () { // wait for load in a dumb way because B-0
 
     if ($.isEmptyObject(data.vars) && !data.css.length && !data.js.length) return
 
-    createGist(data)
+    return data
   }
 
   function parseUrl() {
@@ -113,9 +126,9 @@ window.onload = function () { // wait for load in a dumb way because B-0
       }
     }
 
-    var content = zip.generate()
-    location.href = 'data:application/zip;base64,' + content
-    complete()
+    var content = zip.generate({type:"blob"})
+
+    complete(content)
   }
 
   function generateCustomCSS(vars) {
@@ -188,15 +201,6 @@ window.onload = function () { // wait for load in a dumb way because B-0
     }
   }
 
-  var $downloadBtn = $('#btn-download').on('click', function (e) {
-    e.preventDefault()
-    $downloadBtn.addClass('loading')
-    generateZip(generateCSS(), generateJavascript(), function () {
-      $downloadBtn.removeClass('loading')
-      setTimeout(generateUrl, 500)
-    })
-  })
-
   var inputsComponent = $('#less-section input')
   var inputsPlugin    = $('#plugin-section input')
   var inputsVariables = $('#less-variables-section input')
@@ -238,5 +242,33 @@ window.onload = function () { // wait for load in a dumb way because B-0
     }
   })
 
+  var $compileBtn = $('#btn-compile')
+  var $downloadBtn = $('#btn-download')
+
+  $compileBtn.on('click', function (e) {
+    e.preventDefault()
+
+    $compileBtn.attr('disabled', 'disabled')
+
+    generateZip(generateCSS(), generateJavascript(), function (blob) {
+      $compileBtn.removeAttr('disabled')
+      saveAs(blob, "bootstrap.zip")
+      createGist(getCustomizerData())
+    })
+  })
+
+  // browser support alerts
+  if (!window.URL && navigator.userAgent.toLowerCase().indexOf('safari') != -1) {
+    showCallout("Looks like you're using safari, which sadly doesn't have the best support\
+                 for HTML5 blobs. Because of this your file will be downloaded with the name <code>\"untitled\"</code>.\
+                 However, if you check your downloads folder, just rename this <code>\"untitled\"</code> file\
+                 to <code>\"bootstrap.zip\"</code> and you should be good to go!")
+  } else if (!window.URL && !window.webkitURL) {
+    $('.bs-docs-section, .bs-sidebar').css('display', 'none')
+
+    showCallout("Looks like your current browser doesn't support the Bootstrap Customizer. Please take a second\
+                to <a href=\"https://www.google.com/intl/en/chrome/browser/\"> upgrade to a more modern browser</a>.", true)
+  }
+
   parseUrl()
 }
\ No newline at end of file

assets/js/filesaver.js

+/* Blob.js
+ * A Blob implementation.
+ * 2013-06-20
+ *
+ * By Eli Grey, http://eligrey.com
+ * By Devin Samarin, https://github.com/eboyjr
+ * License: X11/MIT
+ *   See LICENSE.md
+ */
+
+/*global self, unescape */
+/*jslint bitwise: true, regexp: true, confusion: true, es5: true, vars: true, white: true,
+  plusplus: true */
+
+/*! @source http://purl.eligrey.com/github/Blob.js/blob/master/Blob.js */
+
+if (typeof Blob !== "function" || typeof URL === "undefined")
+if (typeof Blob === "function" && typeof webkitURL !== "undefined") self.URL = webkitURL;
+else var Blob = (function (view) {
+  "use strict";
+
+  var BlobBuilder = view.BlobBuilder || view.WebKitBlobBuilder || view.MozBlobBuilder || view.MSBlobBuilder || (function(view) {
+    var
+        get_class = function(object) {
+        return Object.prototype.toString.call(object).match(/^\[object\s(.*)\]$/)[1];
+      }
+      , FakeBlobBuilder = function BlobBuilder() {
+        this.data = [];
+      }
+      , FakeBlob = function Blob(data, type, encoding) {
+        this.data = data;
+        this.size = data.length;
+        this.type = type;
+        this.encoding = encoding;
+      }
+      , FBB_proto = FakeBlobBuilder.prototype
+      , FB_proto = FakeBlob.prototype
+      , FileReaderSync = view.FileReaderSync
+      , FileException = function(type) {
+        this.code = this[this.name = type];
+      }
+      , file_ex_codes = (
+          "NOT_FOUND_ERR SECURITY_ERR ABORT_ERR NOT_READABLE_ERR ENCODING_ERR "
+        + "NO_MODIFICATION_ALLOWED_ERR INVALID_STATE_ERR SYNTAX_ERR"
+      ).split(" ")
+      , file_ex_code = file_ex_codes.length
+      , real_URL = view.URL || view.webkitURL || view
+      , real_create_object_URL = real_URL.createObjectURL
+      , real_revoke_object_URL = real_URL.revokeObjectURL
+      , URL = real_URL
+      , btoa = view.btoa
+      , atob = view.atob
+
+      , ArrayBuffer = view.ArrayBuffer
+      , Uint8Array = view.Uint8Array
+    ;
+    FakeBlob.fake = FB_proto.fake = true;
+    while (file_ex_code--) {
+      FileException.prototype[file_ex_codes[file_ex_code]] = file_ex_code + 1;
+    }
+    if (!real_URL.createObjectURL) {
+      URL = view.URL = {};
+    }
+    URL.createObjectURL = function(blob) {
+      var
+          type = blob.type
+        , data_URI_header
+      ;
+      if (type === null) {
+        type = "application/octet-stream";
+      }
+      if (blob instanceof FakeBlob) {
+        data_URI_header = "data:" + type;
+        if (blob.encoding === "base64") {
+          return data_URI_header + ";base64," + blob.data;
+        } else if (blob.encoding === "URI") {
+          return data_URI_header + "," + decodeURIComponent(blob.data);
+        } if (btoa) {
+          return data_URI_header + ";base64," + btoa(blob.data);
+        } else {
+          return data_URI_header + "," + encodeURIComponent(blob.data);
+        }
+      } else if (real_create_object_URL) {
+        return real_create_object_URL.call(real_URL, blob);
+      }
+    };
+    URL.revokeObjectURL = function(object_URL) {
+      if (object_URL.substring(0, 5) !== "data:" && real_revoke_object_URL) {
+        real_revoke_object_URL.call(real_URL, object_URL);
+      }
+    };
+    FBB_proto.append = function(data/*, endings*/) {
+      var bb = this.data;
+      // decode data to a binary string
+      if (Uint8Array && (data instanceof ArrayBuffer || data instanceof Uint8Array)) {
+        var
+            str = ""
+          , buf = new Uint8Array(data)
+          , i = 0
+          , buf_len = buf.length
+        ;
+        for (; i < buf_len; i++) {
+          str += String.fromCharCode(buf[i]);
+        }
+        bb.push(str);
+      } else if (get_class(data) === "Blob" || get_class(data) === "File") {
+        if (FileReaderSync) {
+          var fr = new FileReaderSync;
+          bb.push(fr.readAsBinaryString(data));
+        } else {
+          // async FileReader won't work as BlobBuilder is sync
+          throw new FileException("NOT_READABLE_ERR");
+        }
+      } else if (data instanceof FakeBlob) {
+        if (data.encoding === "base64" && atob) {
+          bb.push(atob(data.data));
+        } else if (data.encoding === "URI") {
+          bb.push(decodeURIComponent(data.data));
+        } else if (data.encoding === "raw") {
+          bb.push(data.data);
+        }
+      } else {
+        if (typeof data !== "string") {
+          data += ""; // convert unsupported types to strings
+        }
+        // decode UTF-16 to binary string
+        bb.push(unescape(encodeURIComponent(data)));
+      }
+    };
+    FBB_proto.getBlob = function(type) {
+      if (!arguments.length) {
+        type = null;
+      }
+      return new FakeBlob(this.data.join(""), type, "raw");
+    };
+    FBB_proto.toString = function() {
+      return "[object BlobBuilder]";
+    };
+    FB_proto.slice = function(start, end, type) {
+      var args = arguments.length;
+      if (args < 3) {
+        type = null;
+      }
+      return new FakeBlob(
+          this.data.slice(start, args > 1 ? end : this.data.length)
+        , type
+        , this.encoding
+      );
+    };
+    FB_proto.toString = function() {
+      return "[object Blob]";
+    };
+    return FakeBlobBuilder;
+  }(view));
+
+  return function Blob(blobParts, options) {
+    var type = options ? (options.type || "") : "";
+    var builder = new BlobBuilder();
+    if (blobParts) {
+      for (var i = 0, len = blobParts.length; i < len; i++) {
+        builder.append(blobParts[i]);
+      }
+    }
+    return builder.getBlob(type);
+  };
+}(self));
+
+/*! @source http://purl.eligrey.com/github/FileSaver.js/blob/master/FileSaver.js */
+var saveAs=saveAs||(navigator.msSaveOrOpenBlob&&navigator.msSaveOrOpenBlob.bind(navigator))||(function(h){"use strict";var r=h.document,l=function(){return h.URL||h.webkitURL||h},e=h.URL||h.webkitURL||h,n=r.createElementNS("http://www.w3.org/1999/xhtml","a"),g=!h.externalHost&&"download" in n,j=function(t){var s=r.createEvent("MouseEvents");s.initMouseEvent("click",true,false,h,0,0,0,0,0,false,false,false,false,0,null);t.dispatchEvent(s)},o=h.webkitRequestFileSystem,p=h.requestFileSystem||o||h.mozRequestFileSystem,m=function(s){(h.setImmediate||h.setTimeout)(function(){throw s},0)},c="application/octet-stream",k=0,b=[],i=function(){var t=b.length;while(t--){var s=b[t];if(typeof s==="string"){e.revokeObjectURL(s)}else{s.remove()}}b.length=0},q=function(t,s,w){s=[].concat(s);var v=s.length;while(v--){var x=t["on"+s[v]];if(typeof x==="function"){try{x.call(t,w||t)}catch(u){m(u)}}}},f=function(t,u){var v=this,B=t.type,E=false,x,w,s=function(){var F=l().createObjectURL(t);b.push(F);return F},A=function(){q(v,"writestart progress write writeend".split(" "))},D=function(){if(E||!x){x=s(t)}if(w){w.location.href=x}else{window.open(x,"_blank")}v.readyState=v.DONE;A()},z=function(F){return function(){if(v.readyState!==v.DONE){return F.apply(this,arguments)}}},y={create:true,exclusive:false},C;v.readyState=v.INIT;if(!u){u="download"}if(g){x=s(t);n.href=x;n.download=u;j(n);v.readyState=v.DONE;A();return}if(h.chrome&&B&&B!==c){C=t.slice||t.webkitSlice;t=C.call(t,0,t.size,c);E=true}if(o&&u!=="download"){u+=".download"}if(B===c||o){w=h}if(!p){D();return}k+=t.size;p(h.TEMPORARY,k,z(function(F){F.root.getDirectory("saved",y,z(function(G){var H=function(){G.getFile(u,y,z(function(I){I.createWriter(z(function(J){J.onwriteend=function(K){w.location.href=I.toURL();b.push(I);v.readyState=v.DONE;q(v,"writeend",K)};J.onerror=function(){var K=J.error;if(K.code!==K.ABORT_ERR){D()}};"writestart progress write abort".split(" ").forEach(function(K){J["on"+K]=v["on"+K]});J.write(t);v.abort=function(){J.abort();v.readyState=v.DONE};v.readyState=v.WRITING}),D)}),D)};G.getFile(u,{create:false},z(function(I){I.remove();H()}),z(function(I){if(I.code===I.NOT_FOUND_ERR){H()}else{D()}}))}),D)}),D)},d=f.prototype,a=function(s,t){return new f(s,t)};d.abort=function(){var s=this;s.readyState=s.DONE;q(s,"abort")};d.readyState=d.INIT=0;d.WRITING=1;d.DONE=2;d.error=d.onwritestart=d.onprogress=d.onwrite=d.onabort=d.onerror=d.onwriteend=null;h.addEventListener("unload",i,false);return a}(self));
\ No newline at end of file

customize.html

@@ -81,7 +81,7 @@ base_url: "../"
         <h4>Utility classes</h4>
         <div class="checkbox">
           <label>
-            <input type="checkbox" checked value="utilities.less">
+            <input type="checkbox" checked value="utilities.less" data-dependents="navbar.less">
             Basic utilities
           </label>
         </div>
@@ -112,7 +112,7 @@ base_url: "../"
         </div>
         <div class="checkbox">
           <label>
-            <input type="checkbox" checked value="navbar.less" data-dependencies="forms.less">
+            <input type="checkbox" checked value="navbar.less" data-dependencies="forms.less,utilities.less">
             Navbar
           </label>
         </div>
@@ -1475,11 +1475,7 @@ base_url: "../"
     </div>
     <p class="lead">Hooray! Your custom version of Bootstrap is now ready to be compiled. Just click the button below to finish the process.</p>
     <div class="bs-customize-download">
-      <button id="btn-download" class="btn btn-block btn-lg btn-bs" onclick="_gaq.push(['_trackEvent', 'Customize', 'Download', 'Customize and Download']);">Customize and Download</button>
-    </div>
-    <div class="bs-callout bs-callout-danger">
-      <h4>What's included?</h4>
-      <p>Downloads include compiled CSS, compiled and minified CSS, and compiled jQuery plugins, all nicely packed up into a zipball for your convenience.</p>
+      <button id="btn-compile" class="btn btn-block btn-lg btn-bs" onclick="_gaq.push(['_trackEvent', 'Customize', 'Download', 'Customize and Download']);">Compile and Download</button>
     </div>
   </div><!-- /download -->
 </form>