Conditionally load flexibility for IE only

closes canjs/canjs#3100

Author: imaustink

.gitignore

@@ -4,4 +4,5 @@ doc/
 index.html
 .vscode
 *.log
-.DS_Store
+.DS_Store
+npm-debug.log

bit-docs.js

@@ -9,8 +9,18 @@ module.exports = function(bitDocs){
     bitDocs.register("html", {
         templates: path.join(__dirname, "templates"),
         dependencies: dependencies,
-        staticDist: path.join(__dirname, "dist", "static")
+        staticDist: path.join(__dirname, "dist", "static"),
+        package: {
+            steal: {
+                configDependencies: [
+                    "./node_modules/steal-conditional/conditional"
+                ]
+            },
+            devDependencies: {
+                "flexibility": "^2.0.1"
+            }
+        }
     });
 
     bitDocs.register("tags", tags);
-}
+};

build-search-worker.js

@@ -14,7 +14,7 @@ var dest = siteConfig.dest + '/static/search-worker.js';
 
 fs.mkdir(siteConfig.dest, function() {
   stealTools.export({
-    system: {
+    steal: {
       config: __dirname + '/package.json!npm',
       main: 'static/search-worker'
     },

make-example.js

@@ -13,13 +13,24 @@ var docMap = readFile(__dirname+"/docMap.json").then(function(source){
 var siteConfig = {
     html: {
         templates: path.join(__dirname, "templates"),
+        package: {
+            steal: {
+                configDependencies: [
+                    "./node_modules/steal-conditional/conditional"
+                ]
+            },
+            devDependencies: {
+                "flexibility": "^2.0.1"
+            }
+        },
         dependencies: {
             "bit-docs-html-canjs": __dirname,
             "bit-docs-prettify": "^0.1.0",
-			"bit-docs-html-highlight-line": "^0.2.2",
-			//TODO: This should not be include here and should only be included in package.json.
-			//  we get an error without this, here, though
-			"steal-stache": "^3.0.1"
+            "bit-docs-html-highlight-line": "^0.2.2",
+            //TODO: This should not be include here and should only be included in package.json.
+            //  we get an error without this, here, though
+            "steal-stache": "^3.0.1",
+            "steal-conditional": "^0.3.6"
         },
         staticDist: [
             path.join(__dirname, "dist", "static")

package.json

@@ -30,27 +30,28 @@
     "url": "https://github.com/canjs/bit-docs-html-canjs/issues"
   },
   "homepage": "https://github.com/canjs/bit-docs-html-canjs#readme",
-  "system": {},
   "dependencies": {
     "can-control": "^3.0.3",
     "can-util": "^3.0.10",
     "escape-html": "^1.0.3",
     "flexibility": "^2.0.1",
-    "jquery": "^2.2.4",
+    "jquery": "^3.1.1",
     "lodash": "^4.17.4",
     "lunr": "bit-docs/lunr.js#279-safari-exception",
     "steal-stache": "^3.0.1",
     "unescape-html": "^1.0.0"
   },
   "devDependencies": {
-    "bit-docs-generate-html": "^0.7.0",
+    "bit-docs-generate-html": "^0.8.0",
     "bit-docs-generate-searchmap": "^0.1.3",
     "bit-docs-html-toc": "^0.6.0",
     "connect": "^3.5.0",
     "normalize.css": "^5.0.0",
     "q": "^1.4.1",
-    "steal": "^0.16.44",
-    "steal-qunit": "^0.1.4",
+    "steal": "^1.5.9",
+    "steal-conditional": "^0.3.6",
+    "steal-qunit": "^1.0.1",
+    "steal-tools": "^1.8.2",
     "testee": "^0.7.0",
     "zombie": "^5.0.5"
   }

static/breadcrumb.less

@@ -74,6 +74,7 @@
 		}
 	}
 }
+
 .on-this-page {
 	font-size: 14px;
 	margin-bottom: @gutter !important;
@@ -117,6 +118,7 @@
 		}
 	}
 }
+
 .nav-toggle {
 	display: none;
 	float: right;
@@ -136,6 +138,7 @@
 		transform: rotate(90deg);
 	}
 }
+
 .on-this-page:empty{
 	visibility: hidden;
 }

static/canjs.js

@@ -1,4 +1,4 @@
-var flexibility = require("flexibility");
+require("flexibility#?./needs-flexibility");
 require("./canjs.less!");
 var LoadingBar = require('./loading-bar.js');
 $ = require("jquery");
@@ -32,8 +32,9 @@ var $articleContainer,
 	init();
 
 	// flexbox for ie9/10
-	flexibility(document.getElementById('everything'));
-	//flexibility(document.documentElement);
+	if(typeof flexibility !== 'undefined'){
+		flexibility(document.getElementById('everything'));
+	}
 
 	// prevent sidebar from changing width when header hides
 	$('#left').css('min-width', $('.top-left').width());
@@ -224,7 +225,7 @@ function navigate(href, updateLocation) {
 		},
 		success: function(content) {
 
-			if(updateLocation !== false){
+			if(window.history.pushState && updateLocation !== false){
 				window.history.pushState(null, null, href);
 			}
 
@@ -284,7 +285,7 @@ function navigate(href, updateLocation) {
 			}
 		},
 		error: function() {
-			if(updateLocation !== false){
+			if(window.history.pushState && updateLocation !== false){
 				window.history.pushState(null, null, href);
 			}
 			// just reload the page if this fails

static/canjs.less

@@ -1,5 +1,5 @@
 /*---------- UTILITIES ----------*/
-@import "/node_modules/normalize.css/normalize.css";
+@import "locate://normalize.css/normalize.css";
 @import "variables.less";
 @import "mixins.less";
 

static/header.less

@@ -1,14 +1,11 @@
 .top-right-top {
-  -js-display: flex; // ie9/10 flexbox fix
-  display: flex;
+  .flex;
   flex-direction: row-reverse;
+  -ms-flex-direction: row-reverse;
   flex-shrink: 0;
-  height: 53px;
+  height: @brand-height;
   justify-content: space-between;
 }
-.top-left {
-    display: none;
-}
 .brand {
     height: @brand-height;
     padding-top: @gutter;
@@ -114,7 +111,6 @@
 .top-right-links {
     display: none;
     @media screen and (min-width: @breakpoint){
-        -js-display: flex; // ie9/10 flexbox fix
         .flex;
         list-style: none;
         margin: @gutter @gutter*2;
@@ -123,8 +119,7 @@
         flex-basis: 100%;
         align-self: flex-start;
         > li {
-            -js-display: flex; // ie9/10 flexbox fix
-            display: flex;
+            .flex;
             font-size: 14px;
             margin-right: @gutter;
             > a {
@@ -136,7 +131,6 @@
 
 // ----- BITOVI BITS DROPDOWN -----
 .top-right-bitovi {
-    -js-display: flex; // ie9/10 flexbox fix
     .flex;
     padding: 0;
     margin: 0;

static/layout.less

@@ -1,5 +1,4 @@
 #everything {
-  -js-display: flex; // ie9/10 flexbox fix
   .flex;
   -webkit-flex-flow: row wrap;
   justify-content: flex-start;
@@ -10,6 +9,7 @@
   -webkit-overflow-scrolling: touch
 }
 #left {
+  -ms-flex-wrap: wrap;
   position: fixed;
   width: @sidebar-width;
   min-width: 0;
@@ -26,6 +26,7 @@
   }
 }
 #right {
+  -ms-flex-wrap: wrap;
   height: 100%;
   min-height: 100%;
   max-height: 100%;
@@ -54,13 +55,15 @@
 
 @media screen and (min-width: @breakpoint){
   .top-left {
+    width: 100%;
     height: auto;
   }
 }
 .top-right {
   flex-shrink: 0;
   flex-wrap: nowrap;
   height: auto;
+  width: 100%;
   .border-bottom;
   @media screen and (min-width: @breakpoint){
     border: none;