JS improvement

docs/index.html

@@ -16,7 +16,7 @@
     <nav class="container-fluid">
       <ul>
         <li>
-          <a href="#">
+          <a href="https://picocss.com">
             <svg aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000" height="3.5rem">
               <path fill="currentColor" d="M633.43 429.23c0 118.38-49.76 184.72-138.87 184.72-53 0-92.04-25.37-108.62-67.32h-2.6v203.12H250V249.7h133.67v64.72h2.28c17.24-43.9 55.3-69.92 107-69.92 90.4 0 140.48 66.02 140.48 184.73zm-136.6 0c0-49.76-22.1-81.96-56.9-81.96s-56.9 32.2-57.24 82.28c.33 50.4 22.1 81.63 57.24 81.63 35.12 0 56.9-31.87 56.9-81.95zM682.5 547.5c0-37.32 30.18-67.5 67.5-67.5s67.5 30.18 67.5 67.5S787.32 615 750 615s-67.5-30.18-67.5-67.5z"/>
             </svg>
@@ -25,7 +25,6 @@
         <li>Documentation</li>
       </ul>
       <ul>
-        <li><a href="https://picocss.com/#examples" class="secondary">Examples</a></li>
         <li><a href="#start" class="secondary">Start</a></li>
         <li><a href="#docs" class="secondary">Docs</a></li>
         <li>

docs/js/pico.docs.js

@@ -1,3 +1,4 @@
+//@prepros-append src/aside.js
 //@prepros-append src/theme-switcher.js
 //@prepros-append src/internal-scroll.js
 //@prepros-append src/grid.js

docs/js/src/aside.js

@@ -0,0 +1,19 @@
+/*!
+ * Aside adjustment
+ *
+ * Pico.css - https://picocss.com
+ * Copyright 2019 - Licensed under MIT
+ */
+
+(function() {
+
+  // Close details if aside > nav have a scrollbar
+  var navWidth = document.querySelector('aside nav').clientWidth;
+  if (navWidth < 200) {
+    var asideDetails = document.querySelectorAll("aside details");
+    for (var i = 1; i < asideDetails.length; i++) {
+     asideDetails[i].removeAttribute("open");
+    }
+  }
+
+})();

docs/js/src/color-picker.js

@@ -16,6 +16,7 @@
     target:         '#customization h5',                 // Buttons inserted after target
     selectorButton: '#customization button[data-color]', // Button selector in Dom
     selectorTheme:  '#customization',                    // Theme selector in Dom
+    styles:         '',
 
     // Source: https://material.io/design/color/the-color-system.html
     system: {
@@ -354,7 +355,6 @@
 
     // Vars
     var colorButtons = '';
-    var colorStyles  = '';
 
     // Colors
     for (var color in data) {
@@ -364,21 +364,21 @@
         colorButtons += '<button data-color="'+ color +'"></button>';
 
         // CSS Styles
-        colorStyles += 'button[data-color="'+ color +'"] {'
+        colors.styles += 'button[data-color="'+ color +'"] {'
-                     +   'background-color: '+ data[color]['600'] +'; '
+                      +   'background-color: '+ data[color]['600'] +'; '
-                     + '}'
+                      + '}'
 
-                     + '[data-theme="light"] button[data-color="'+ color +'"]:hover, '
+                      + '[data-theme="light"] button[data-color="'+ color +'"]:hover, '
-                     + '[data-theme="light"] button[data-color="'+ color +'"]:active, '
+                      + '[data-theme="light"] button[data-color="'+ color +'"]:active, '
-                     + '[data-theme="light"] button[data-color="'+ color +'"]:focus {'
+                      + '[data-theme="light"] button[data-color="'+ color +'"]:focus {'
-                     +   'background-color: '+ data[color]['700'] +'; '
+                      +   'background-color: '+ data[color]['700'] +'; '
-                     + '}'
+                      + '}'
 
-                     + '[data-theme="dark"] button[data-color="'+ color +'"]:hover, '
+                      + '[data-theme="dark"] button[data-color="'+ color +'"]:hover, '
-                     + '[data-theme="dark"] button[data-color="'+ color +'"]:active, '
+                      + '[data-theme="dark"] button[data-color="'+ color +'"]:active, '
-                     + '[data-theme="dark"] button[data-color="'+ color +'"]:focus {'
+                      + '[data-theme="dark"] button[data-color="'+ color +'"]:focus {'
-                     +   'background-color: '+ data[color]['500'] +'; '
+                      +   'background-color: '+ data[color]['500'] +'; '
-                     + '}'
+                      + '}'
       }
     }
 
@@ -399,8 +399,8 @@
     // Insert CSS Styles
     var styles = document.createElement('STYLE');
     styles.setAttribute('title', 'color-picker');
-    styles.innerHTML = colorStyles;
+    styles.innerHTML = colors.styles;
-    document.querySelector('head link').after(styles);
+    document.querySelector('head').appendChild(styles);
   }
 
 
@@ -498,16 +498,7 @@
                         + '}';
 
     // Insert CSS Styles
-    var selectorGenerated = document.querySelector('style:not([title="color-picker"])');
+    document.querySelector('style[title="color-picker"]').innerHTML = colors.styles + generatedStyles;
-    if(typeof(selectorGenerated) != 'undefined' && selectorGenerated != null) {
-      selectorGenerated.innerHTML = generatedStyles;
-    }
-    else {
-      var styles = document.createElement('STYLE');
-      styles.innerHTML = generatedStyles;
-      document.querySelector('head link').after(styles);
-    }
-    document.querySelector(colors.selectorTheme + ' .grid').setAttribute('data-theme', name);
   }
 
 

docs/js/src/internal-scroll.js

@@ -44,9 +44,11 @@
   function internalClick(link) {
     event.preventDefault();
     var anchor = link.href.split("#");
-    anchor = setAnchor(anchor[1]);
+    if (anchor[1] != '') {
-    anchor = document.getElementById(anchor);
+      anchor = setAnchor(anchor[1]);
-    scrollToAnchor(anchor);
+      anchor = document.getElementById(anchor);
+      scrollToAnchor(anchor);
+    }
   }
 
 

docs/js/src/theme-switcher.js

@@ -18,7 +18,7 @@
       on:         '<i>Turn on dark mode</i>',
       off:        '<i>Turn off dark mode</i>'
     },
-    target:       'main', // Button inserted after target
+    target:       'body', // Button append in target
     selector:     'button.switcher', // Button selector in Dom
     currentTheme: systemColorScheme()
   };
@@ -59,7 +59,7 @@
     // Insert Switcher
     var button = document.createElement(switcher.button.element);
     button.className = switcher.button.class;
-    document.querySelector(switcher.target).after(button);
+    document.querySelector(switcher.target).appendChild(button);
 
     // Set Current Theme
     setTheme(switcher.currentTheme);