diff --git a/docs/index.html b/docs/index.html index 3342964f..9160aab5 100644 --- a/docs/index.html +++ b/docs/index.html @@ -1262,7 +1262,6 @@ - diff --git a/docs/js/pico.docs.js b/docs/js/pico.docs.js index 7f656894..160030bb 100644 --- a/docs/js/pico.docs.js +++ b/docs/js/pico.docs.js @@ -6,6 +6,7 @@ */ // Imports +import * as mostVisible from './src/most-visible.min.js'; import { aside } from './src/aside.js'; import { themeSwitcher } from './src/theme-switcher.js'; import { materialDesignColors } from './src/material-design-colors.js'; @@ -32,4 +33,4 @@ colorPicker.init(); grid.init(); // Scrollspy -scrollspy.init(); +scrollspy.init(mostVisible); diff --git a/docs/js/pico.docs.min.js b/docs/js/pico.docs.min.js index 62e56c43..ddaabff2 100644 --- a/docs/js/pico.docs.min.js +++ b/docs/js/pico.docs.min.js @@ -1 +1 @@ -!function(){"use strict";var e=[,function(e,t,n){n.r(t),n.d(t,{aside:function(){return r}});var r={minWidth:"992px",targets:{nav:"aside nav",details:"aside details"},init:function(){if(window.matchMedia("(min-width: "+this.minWidth+")").matches){var e=document.querySelector(this.targets.nav),t=document.querySelectorAll(this.targets.details);e.clientHeightTurn on dark mode",dark:"Turn off dark mode"},buttonsTarget:".theme-switcher",init:function(){this.scheme=this._scheme,this.initSwitchers()},get preferedColorScheme(){return window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light"},initSwitchers:function(){document.querySelectorAll(this.buttonsTarget).forEach(function(e){e.addEventListener("click",function(e){"dark"==this.scheme?this.scheme="light":this.scheme="dark"}.bind(this),!1)}.bind(this))},addButton:function(e){var t=document.createElement(e.tag);t.className=e.class,document.querySelector(e.target).appendChild(t)},set scheme(e){"auto"==e?"dark"==this.preferedColorScheme?this._scheme="dark":this._scheme="light":"dark"!=e&&"light"!=e||(this._scheme=e),this.applyScheme()},get scheme(){return this._scheme},applyScheme:function(){var e;document.querySelector("html").setAttribute("data-theme",this.scheme),document.querySelectorAll(this.buttonsTarget).forEach(function(t){e="dark"==this.scheme?this.change.dark:this.change.light,t.innerHTML=e,t.setAttribute("aria-label",e.replace(/<[^>]*>?/gm,""))}.bind(this))}}},function(e,t,n){n.r(t),n.d(t,{materialDesignColors:function(){return r}});var r={red:{50:"#ffebee",100:"#ffcdd2",200:"#ef9a9a",300:"#e57373",400:"#ef5350",500:"#f44336",600:"#e53935",700:"#d32f2f",800:"#c62828",900:"#b71c1c",a100:"#ff8a80",a200:"#ff5252",a400:"#ff1744",a700:"#d50000",inverse:"#FFF"},pink:{50:"#fce4ec",100:"#f8bbd0",200:"#f48fb1",300:"#f06292",400:"#ec407a",500:"#e91e63",600:"#d81b60",700:"#c2185b",800:"#ad1457",900:"#880e4f",a100:"#ff80ab",a200:"#ff4081",a400:"#f50057",a700:"#c51162",inverse:"#FFF"},purple:{50:"#f3e5f5",100:"#e1bee7",200:"#ce93d8",300:"#ba68c8",400:"#ab47bc",500:"#9c27b0",600:"#8e24aa",700:"#7b1fa2",800:"#6a1b9a",900:"#4a148c",a100:"#ea80fc",a200:"#e040fb",a400:"#d500f9",a700:"#aa00ff",inverse:"#FFF"},"deep-purple":{50:"#ede7f6",100:"#d1c4e9",200:"#b39ddb",300:"#9575cd",400:"#7e57c2",500:"#673ab7",600:"#5e35b1",700:"#512da8",800:"#4527a0",900:"#311b92",a100:"#b388ff",a200:"#7c4dff",a400:"#651fff",a700:"#6200ea",inverse:"#FFF"},indigo:{50:"#e8eaf6",100:"#c5cae9",200:"#9fa8da",300:"#7986cb",400:"#5c6bc0",500:"#3f51b5",600:"#3949ab",700:"#303f9f",800:"#283593",900:"#1a237e",a100:"#8c9eff",a200:"#536dfe",a400:"#3d5afe",a700:"#304ffe",inverse:"#FFF"},blue:{50:"#e3f2fd",100:"#bbdefb",200:"#90caf9",300:"#64b5f6",400:"#42a5f5",500:"#2196f3",600:"#1e88e5",700:"#1976d2",800:"#1565c0",900:"#0d47a1",a100:"#82b1ff",a200:"#448aff",a400:"#2979ff",a700:"#2962ff",inverse:"#FFF"},"light-blue":{50:"#e1f5fe",100:"#b3e5fc",200:"#81d4fa",300:"#4fc3f7",400:"#29b6f6",500:"#03a9f4",600:"#039be5",700:"#0288d1",800:"#0277bd",900:"#01579b",a100:"#80d8ff",a200:"#40c4ff",a400:"#00b0ff",a700:"#0091ea",inverse:"#FFF"},cyan:{50:"#e0f7fa",100:"#b2ebf2",200:"#80deea",300:"#4dd0e1",400:"#26c6da",500:"#00bcd4",600:"#00acc1",700:"#0097a7",800:"#00838f",900:"#006064",a100:"#84ffff",a200:"#18ffff",a400:"#00e5ff",a700:"#00b8d4",inverse:"#FFF"},teal:{50:"#e0f2f1",100:"#b2dfdb",200:"#80cbc4",300:"#4db6ac",400:"#26a69a",500:"#009688",600:"#00897b",700:"#00796b",800:"#00695c",900:"#004d40",a100:"#a7ffeb",a200:"#64ffda",a400:"#1de9b6",a700:"#00bfa5",inverse:"#FFF"},green:{50:"#e8f5e9",100:"#c8e6c9",200:"#a5d6a7",300:"#81c784",400:"#66bb6a",500:"#4caf50",600:"#43a047",700:"#388e3c",800:"#2e7d32",900:"#1b5e20",a100:"#b9f6ca",a200:"#69f0ae",a400:"#00e676",a700:"#00c853",inverse:"#FFF"},"light-green":{50:"#f1f8e9",100:"#dcedc8",200:"#c5e1a5",300:"#aed581",400:"#9ccc65",500:"#8bc34a",600:"#7cb342",700:"#689f38",800:"#558b2f",900:"#33691e",a100:"#ccff90",a200:"#b2ff59",a400:"#76ff03",a700:"#64dd17",inverse:"#FFF"},lime:{50:"#f9fbe7",100:"#f0f4c3",200:"#e6ee9c",300:"#dce775",400:"#d4e157",500:"#cddc39",600:"#c0ca33",700:"#afb42b",800:"#9e9d24",900:"#827717",a100:"#f4ff81",a200:"#eeff41",a400:"#c6ff00",a700:"#aeea00",inverse:"rgba(0, 0, 0, 0.75)"},yellow:{50:"#fffde7",100:"#fff9c4",200:"#fff59d",300:"#fff176",400:"#ffee58",500:"#ffeb3b",600:"#fdd835",700:"#fbc02d",800:"#f9a825",900:"#f57f17",a100:"#ffff8d",a200:"#ffff00",a400:"#ffea00",a700:"#ffd600",inverse:"rgba(0, 0, 0, 0.75)"},amber:{50:"#fff8e1",100:"#ffecb3",200:"#ffe082",300:"#ffd54f",400:"#ffca28",500:"#ffc107",600:"#ffb300",700:"#ffa000",800:"#ff8f00",900:"#ff6f00",a100:"#ffe57f",a200:"#ffd740",a400:"#ffc400",a700:"#ffab00",inverse:"rgba(0, 0, 0, 0.75)"},orange:{50:"#fff3e0",100:"#ffe0b2",200:"#ffcc80",300:"#ffb74d",400:"#ffa726",500:"#ff9800",600:"#fb8c00",700:"#f57c00",800:"#ef6c00",900:"#e65100",a100:"#ffd180",a200:"#ffab40",a400:"#ff9100",a700:"#ff6d00",inverse:"#FFF"},"deep-orange":{50:"#fbe9e7",100:"#ffccbc",200:"#ffab91",300:"#ff8a65",400:"#ff7043",500:"#ff5722",600:"#f4511e",700:"#e64a19",800:"#d84315",900:"#bf360c",a100:"#ff9e80",a200:"#ff6e40",a400:"#ff3d00",a700:"#dd2c00",inverse:"#FFF"},grey:{50:"#fafafa",100:"#f5f5f5",200:"#eeeeee",300:"#e0e0e0",400:"#bdbdbd",500:"#9e9e9e",600:"#757575",700:"#616161",800:"#424242",900:"#212121",inverse:"#FFF"},"blue-grey":{50:"#eceff1",100:"#cfd8dc",200:"#b0bec5",300:"#90a4ae",400:"#78909c",500:"#607d8b",600:"#546e7a",700:"#455a64",800:"#37474f",900:"#263238",inverse:"#FFF"}}},function(e,t,n){n.r(t),n.d(t,{colorPicker:function(){return r}});var r={colors:null,buttonsTarget:'#customization article[data-theme="generated"]',selectorButton:"#customization button[data-color]",selectorSection:"#customization",buttons:null,generatedStyles:null,init:function(){this.generateButtons(),this.setActiveButton("pink"),this.generateTheme("pink")},generateButtons:function(){var e="",t="";for(var n in this.colors)e+='',t+='\n button[data-color="'.concat(n,'"] {\n background-color: ').concat(this.colors[n][600],';\n }\n [data-theme="light"] button[data-color="').concat(n,'"]:hover,\n [data-theme="light"] button[data-color="').concat(n,'"]:active,\n [data-theme="light"] button[data-color="').concat(n,'"]:focus {\n background-color: ').concat(this.colors[n][700],'; \'\n }\n [data-theme="dark"] button[data-color="').concat(n,'"]:hover,\n [data-theme="dark"] button[data-color="').concat(n,'"]:active,\n [data-theme="dark"] button[data-color="').concat(n,'"]:focus {\n background-color: ').concat(this.colors[n][500],";\n }");var r=document.createElement("FIGURE");r.innerHTML=e,document.querySelector(this.buttonsTarget).before(r),this.buttons=document.querySelectorAll(this.selectorButton),this.buttons.forEach(function(e){e.addEventListener("click",function(e){var t=e.target.getAttribute("data-color");this.setActiveButton(t),this.generateTheme(t)}.bind(this),!1)}.bind(this));var a=document.createElement("STYLE");a.setAttribute("title","color-picker"),this.generatedStyles=this.minifyCSS(t),a.innerHTML=this.generatedStyles,document.querySelector("head").appendChild(a)},setActiveButton:function(e){this.buttons.forEach(function(e){e.removeAttribute("class")}.bind(this)),document.querySelector(this.selectorButton+'[data-color="'+e+'"]').setAttribute("class","picked")},generateTheme:function(e){var t=e,n=this.colors[e],r={".name":t.charAt(0).toUpperCase()+t.substring(1)+" ",".c500":n[500],".c600":n[600],".c700":n[700],".c600-outline-light":this.hexToRgbA(n[600],.125),".c600-outline-dark":this.hexToRgbA(n[600],.25),".inverse":n.inverse};Object.keys(r).forEach(function(e){document.querySelectorAll(this.selectorSection+" "+e).forEach(function(t){t.innerHTML=r[e]}.bind(this))}.bind(this));var a='\n [data-theme="generated"] {\n --h4-color: '.concat(n[700],";\n --primary: ").concat(n[600],";\n --primary-hover: ").concat(n[700],";\n --primary-focus: ").concat(this.hexToRgbA(n[600],.125),";\n --primary-inverse: ").concat(n.inverse,';\n }\n @media only screen and (prefers-color-scheme: dark) {\n :root:not([data-theme="light"]) [data-theme="generated"] {\n --h4-color: ').concat(n[400],";\n --primary: ").concat(n[600],";\n --primary-hover: ").concat(n[500],";\n --primary-focus: ").concat(this.hexToRgbA(n[600],.25),";\n --primary-inverse: ").concat(n.inverse,';\n }\n }\n [data-theme="dark"] [data-theme="generated"] {\n --h4-color: ').concat(n[500],";\n --primary: ").concat(n[600],";\n --primary-hover: ").concat(n[500],";\n --primary-focus: ").concat(this.hexToRgbA(n[600],.25),";\n --primary-inverse: ").concat(n.inverse,';\n }\n [data-theme="generated"] {\n --form-element-active-border-color: var(--primary);\n --form-element-focus-color: var(--primary-focus);\n --switch-color: var(--primary-inverse);\n --switch-checked-background-color: var(--primary);\n }');document.querySelector('style[title="color-picker"]').innerHTML=this.generatedStyles+this.minifyCSS(a)},minifyCSS:function(e){return e.replace(/^ +/gm,"")},hexToRgbA:function(e,t){var n;if(/^#([A-Fa-f0-9]{3}){1,2}$/.test(e))return 3==(n=e.substring(1).split("")).length&&(n=[n[0],n[0],n[1],n[1],n[2],n[2]]),"rgba("+[(n="0x"+n.join(""))>>16&255,n>>8&255,255&n].join(", ")+", "+t+")";throw new Error("Bad Hex")}}},function(e,t,n){n.r(t),n.d(t,{grid:function(){return r}});var r={buttons:{text:{add:"Add column",remove:"Remove column"},target:"#grids article"},grid:{current:4,min:1,max:12,gridTarget:"#grids .grid",codeTarget:"#grids pre code"},init:function(){this.addButtons(),this.generateGrid()},addButtons:function(){var e=document.createElement("P");e.innerHTML='\n \n\n "),document.querySelector(this.buttons.target).before(e),document.querySelector("#grids button.add").addEventListener("click",function(){this.addColumn()}.bind(this),!1),document.querySelector("#grids button.remove").addEventListener("click",function(){this.removeColumn()}.bind(this),!1)},generateGrid:function(){for(var e="",t='<div class="grid">\n',n=0;n"+(n+1)+"",t+=" <div>"+(n+1)+"</div>\n";t+="</div>",document.querySelector(this.grid.gridTarget).innerHTML=e,document.querySelector(this.grid.codeTarget).innerHTML=t},addColumn:function(){this.grid.currentthis.grid.min&&(this.grid.current--,this.generateGrid())}}},function(e,t,n){n.r(t),n.d(t,{scrollspy:function(){return r}});var r={minWidth:"992px",interval:75,targets:{sections:'[role="document"] > section',nav:"main aside nav",active:"active"},init:function(){window.matchMedia("(min-width: "+this.minWidth+")").matches&&(this.setActiveNav(),this.scrollStop())},setActiveNav:function(){var e=mostVisible(this.targets.sections).getAttribute("id");document.querySelectorAll(this.targets.nav+" a."+this.targets.active).forEach(function(e){e.classList.remove(this.targets.active)}.bind(this));var t=document.querySelector(this.targets.nav+' a[href="#'+e+'"]');t.classList.add(this.targets.active),t.closest("details").setAttribute("open","")},scrollStop:function(){var e;window.addEventListener("scroll",function(t){window.clearTimeout(e),e=setTimeout(function(){this.setActiveNav()}.bind(this),this.interval)}.bind(this),!1)}}}],t={};function n(r){var a=t[r];if(void 0!==a)return a.exports;var i=t[r]={exports:{}};return e[r](i,i.exports,n),i.exports}n.d=function(e,t){for(var r in t)n.o(t,r)&&!n.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:t[r]})},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var r={};!function(){n.r(r);var e=n(1),t=n(2),a=n(3),i=n(4),c=n(5),o=n(6);e.aside.init(),t.themeSwitcher.addButton({tag:"BUTTON",class:"contrast switcher theme-switcher",target:"body"}),t.themeSwitcher.init(),i.colorPicker.colors=a.materialDesignColors,i.colorPicker.init(),c.grid.init(),o.scrollspy.init()}()}(); \ No newline at end of file +!function(){var e=[,function(e,t){var n,r;r="undefined"!=typeof self?self:this,void 0===(n=function(){return function(e){"use strict";function t(e,n){if(!(this instanceof t))return new t(e,n).getMostVisible();"string"==typeof e&&(e=document.querySelectorAll(e)),this.elements=e,this.options=function(e){for(var t=1;tn[0]?[i,r]:n}),[0,null])[1]},getVisibleHeight:function(e,t){var n=e.getBoundingClientRect(),r=n.top-this.options.offset,i=n.bottom-this.options.offset,a=n.bottom-n.top,c=0<=r&&rTurn on dark mode",dark:"Turn off dark mode"},buttonsTarget:".theme-switcher",init:function(){this.scheme=this._scheme,this.initSwitchers()},get preferedColorScheme(){return window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light"},initSwitchers:function(){document.querySelectorAll(this.buttonsTarget).forEach(function(e){e.addEventListener("click",function(e){"dark"==this.scheme?this.scheme="light":this.scheme="dark"}.bind(this),!1)}.bind(this))},addButton:function(e){var t=document.createElement(e.tag);t.className=e.class,document.querySelector(e.target).appendChild(t)},set scheme(e){"auto"==e?"dark"==this.preferedColorScheme?this._scheme="dark":this._scheme="light":"dark"!=e&&"light"!=e||(this._scheme=e),this.applyScheme()},get scheme(){return this._scheme},applyScheme:function(){var e;document.querySelector("html").setAttribute("data-theme",this.scheme),document.querySelectorAll(this.buttonsTarget).forEach(function(t){e="dark"==this.scheme?this.change.dark:this.change.light,t.innerHTML=e,t.setAttribute("aria-label",e.replace(/<[^>]*>?/gm,""))}.bind(this))}}},function(e,t,n){"use strict";n.r(t),n.d(t,{materialDesignColors:function(){return r}});var r={red:{50:"#ffebee",100:"#ffcdd2",200:"#ef9a9a",300:"#e57373",400:"#ef5350",500:"#f44336",600:"#e53935",700:"#d32f2f",800:"#c62828",900:"#b71c1c",a100:"#ff8a80",a200:"#ff5252",a400:"#ff1744",a700:"#d50000",inverse:"#FFF"},pink:{50:"#fce4ec",100:"#f8bbd0",200:"#f48fb1",300:"#f06292",400:"#ec407a",500:"#e91e63",600:"#d81b60",700:"#c2185b",800:"#ad1457",900:"#880e4f",a100:"#ff80ab",a200:"#ff4081",a400:"#f50057",a700:"#c51162",inverse:"#FFF"},purple:{50:"#f3e5f5",100:"#e1bee7",200:"#ce93d8",300:"#ba68c8",400:"#ab47bc",500:"#9c27b0",600:"#8e24aa",700:"#7b1fa2",800:"#6a1b9a",900:"#4a148c",a100:"#ea80fc",a200:"#e040fb",a400:"#d500f9",a700:"#aa00ff",inverse:"#FFF"},"deep-purple":{50:"#ede7f6",100:"#d1c4e9",200:"#b39ddb",300:"#9575cd",400:"#7e57c2",500:"#673ab7",600:"#5e35b1",700:"#512da8",800:"#4527a0",900:"#311b92",a100:"#b388ff",a200:"#7c4dff",a400:"#651fff",a700:"#6200ea",inverse:"#FFF"},indigo:{50:"#e8eaf6",100:"#c5cae9",200:"#9fa8da",300:"#7986cb",400:"#5c6bc0",500:"#3f51b5",600:"#3949ab",700:"#303f9f",800:"#283593",900:"#1a237e",a100:"#8c9eff",a200:"#536dfe",a400:"#3d5afe",a700:"#304ffe",inverse:"#FFF"},blue:{50:"#e3f2fd",100:"#bbdefb",200:"#90caf9",300:"#64b5f6",400:"#42a5f5",500:"#2196f3",600:"#1e88e5",700:"#1976d2",800:"#1565c0",900:"#0d47a1",a100:"#82b1ff",a200:"#448aff",a400:"#2979ff",a700:"#2962ff",inverse:"#FFF"},"light-blue":{50:"#e1f5fe",100:"#b3e5fc",200:"#81d4fa",300:"#4fc3f7",400:"#29b6f6",500:"#03a9f4",600:"#039be5",700:"#0288d1",800:"#0277bd",900:"#01579b",a100:"#80d8ff",a200:"#40c4ff",a400:"#00b0ff",a700:"#0091ea",inverse:"#FFF"},cyan:{50:"#e0f7fa",100:"#b2ebf2",200:"#80deea",300:"#4dd0e1",400:"#26c6da",500:"#00bcd4",600:"#00acc1",700:"#0097a7",800:"#00838f",900:"#006064",a100:"#84ffff",a200:"#18ffff",a400:"#00e5ff",a700:"#00b8d4",inverse:"#FFF"},teal:{50:"#e0f2f1",100:"#b2dfdb",200:"#80cbc4",300:"#4db6ac",400:"#26a69a",500:"#009688",600:"#00897b",700:"#00796b",800:"#00695c",900:"#004d40",a100:"#a7ffeb",a200:"#64ffda",a400:"#1de9b6",a700:"#00bfa5",inverse:"#FFF"},green:{50:"#e8f5e9",100:"#c8e6c9",200:"#a5d6a7",300:"#81c784",400:"#66bb6a",500:"#4caf50",600:"#43a047",700:"#388e3c",800:"#2e7d32",900:"#1b5e20",a100:"#b9f6ca",a200:"#69f0ae",a400:"#00e676",a700:"#00c853",inverse:"#FFF"},"light-green":{50:"#f1f8e9",100:"#dcedc8",200:"#c5e1a5",300:"#aed581",400:"#9ccc65",500:"#8bc34a",600:"#7cb342",700:"#689f38",800:"#558b2f",900:"#33691e",a100:"#ccff90",a200:"#b2ff59",a400:"#76ff03",a700:"#64dd17",inverse:"#FFF"},lime:{50:"#f9fbe7",100:"#f0f4c3",200:"#e6ee9c",300:"#dce775",400:"#d4e157",500:"#cddc39",600:"#c0ca33",700:"#afb42b",800:"#9e9d24",900:"#827717",a100:"#f4ff81",a200:"#eeff41",a400:"#c6ff00",a700:"#aeea00",inverse:"rgba(0, 0, 0, 0.75)"},yellow:{50:"#fffde7",100:"#fff9c4",200:"#fff59d",300:"#fff176",400:"#ffee58",500:"#ffeb3b",600:"#fdd835",700:"#fbc02d",800:"#f9a825",900:"#f57f17",a100:"#ffff8d",a200:"#ffff00",a400:"#ffea00",a700:"#ffd600",inverse:"rgba(0, 0, 0, 0.75)"},amber:{50:"#fff8e1",100:"#ffecb3",200:"#ffe082",300:"#ffd54f",400:"#ffca28",500:"#ffc107",600:"#ffb300",700:"#ffa000",800:"#ff8f00",900:"#ff6f00",a100:"#ffe57f",a200:"#ffd740",a400:"#ffc400",a700:"#ffab00",inverse:"rgba(0, 0, 0, 0.75)"},orange:{50:"#fff3e0",100:"#ffe0b2",200:"#ffcc80",300:"#ffb74d",400:"#ffa726",500:"#ff9800",600:"#fb8c00",700:"#f57c00",800:"#ef6c00",900:"#e65100",a100:"#ffd180",a200:"#ffab40",a400:"#ff9100",a700:"#ff6d00",inverse:"#FFF"},"deep-orange":{50:"#fbe9e7",100:"#ffccbc",200:"#ffab91",300:"#ff8a65",400:"#ff7043",500:"#ff5722",600:"#f4511e",700:"#e64a19",800:"#d84315",900:"#bf360c",a100:"#ff9e80",a200:"#ff6e40",a400:"#ff3d00",a700:"#dd2c00",inverse:"#FFF"},grey:{50:"#fafafa",100:"#f5f5f5",200:"#eeeeee",300:"#e0e0e0",400:"#bdbdbd",500:"#9e9e9e",600:"#757575",700:"#616161",800:"#424242",900:"#212121",inverse:"#FFF"},"blue-grey":{50:"#eceff1",100:"#cfd8dc",200:"#b0bec5",300:"#90a4ae",400:"#78909c",500:"#607d8b",600:"#546e7a",700:"#455a64",800:"#37474f",900:"#263238",inverse:"#FFF"}}},function(e,t,n){"use strict";n.r(t),n.d(t,{colorPicker:function(){return r}});var r={colors:null,buttonsTarget:'#customization article[data-theme="generated"]',selectorButton:"#customization button[data-color]",selectorSection:"#customization",buttons:null,generatedStyles:null,init:function(){this.generateButtons(),this.setActiveButton("pink"),this.generateTheme("pink")},generateButtons:function(){var e="",t="";for(var n in this.colors)e+='',t+='\n button[data-color="'.concat(n,'"] {\n background-color: ').concat(this.colors[n][600],';\n }\n [data-theme="light"] button[data-color="').concat(n,'"]:hover,\n [data-theme="light"] button[data-color="').concat(n,'"]:active,\n [data-theme="light"] button[data-color="').concat(n,'"]:focus {\n background-color: ').concat(this.colors[n][700],'; \'\n }\n [data-theme="dark"] button[data-color="').concat(n,'"]:hover,\n [data-theme="dark"] button[data-color="').concat(n,'"]:active,\n [data-theme="dark"] button[data-color="').concat(n,'"]:focus {\n background-color: ').concat(this.colors[n][500],";\n }");var r=document.createElement("FIGURE");r.innerHTML=e,document.querySelector(this.buttonsTarget).before(r),this.buttons=document.querySelectorAll(this.selectorButton),this.buttons.forEach(function(e){e.addEventListener("click",function(e){var t=e.target.getAttribute("data-color");this.setActiveButton(t),this.generateTheme(t)}.bind(this),!1)}.bind(this));var i=document.createElement("STYLE");i.setAttribute("title","color-picker"),this.generatedStyles=this.minifyCSS(t),i.innerHTML=this.generatedStyles,document.querySelector("head").appendChild(i)},setActiveButton:function(e){this.buttons.forEach(function(e){e.removeAttribute("class")}.bind(this)),document.querySelector(this.selectorButton+'[data-color="'+e+'"]').setAttribute("class","picked")},generateTheme:function(e){var t=e,n=this.colors[e],r={".name":t.charAt(0).toUpperCase()+t.substring(1)+" ",".c500":n[500],".c600":n[600],".c700":n[700],".c600-outline-light":this.hexToRgbA(n[600],.125),".c600-outline-dark":this.hexToRgbA(n[600],.25),".inverse":n.inverse};Object.keys(r).forEach(function(e){document.querySelectorAll(this.selectorSection+" "+e).forEach(function(t){t.innerHTML=r[e]}.bind(this))}.bind(this));var i='\n [data-theme="generated"] {\n --h4-color: '.concat(n[700],";\n --primary: ").concat(n[600],";\n --primary-hover: ").concat(n[700],";\n --primary-focus: ").concat(this.hexToRgbA(n[600],.125),";\n --primary-inverse: ").concat(n.inverse,';\n }\n @media only screen and (prefers-color-scheme: dark) {\n :root:not([data-theme="light"]) [data-theme="generated"] {\n --h4-color: ').concat(n[400],";\n --primary: ").concat(n[600],";\n --primary-hover: ").concat(n[500],";\n --primary-focus: ").concat(this.hexToRgbA(n[600],.25),";\n --primary-inverse: ").concat(n.inverse,';\n }\n }\n [data-theme="dark"] [data-theme="generated"] {\n --h4-color: ').concat(n[500],";\n --primary: ").concat(n[600],";\n --primary-hover: ").concat(n[500],";\n --primary-focus: ").concat(this.hexToRgbA(n[600],.25),";\n --primary-inverse: ").concat(n.inverse,';\n }\n [data-theme="generated"] {\n --form-element-active-border-color: var(--primary);\n --form-element-focus-color: var(--primary-focus);\n --switch-color: var(--primary-inverse);\n --switch-checked-background-color: var(--primary);\n }');document.querySelector('style[title="color-picker"]').innerHTML=this.generatedStyles+this.minifyCSS(i)},minifyCSS:function(e){return e.replace(/^ +/gm,"")},hexToRgbA:function(e,t){var n;if(/^#([A-Fa-f0-9]{3}){1,2}$/.test(e))return 3==(n=e.substring(1).split("")).length&&(n=[n[0],n[0],n[1],n[1],n[2],n[2]]),"rgba("+[(n="0x"+n.join(""))>>16&255,n>>8&255,255&n].join(", ")+", "+t+")";throw new Error("Bad Hex")}}},function(e,t,n){"use strict";n.r(t),n.d(t,{grid:function(){return r}});var r={buttons:{text:{add:"Add column",remove:"Remove column"},target:"#grids article"},grid:{current:4,min:1,max:12,gridTarget:"#grids .grid",codeTarget:"#grids pre code"},init:function(){this.addButtons(),this.generateGrid()},addButtons:function(){var e=document.createElement("P");e.innerHTML='\n \n\n "),document.querySelector(this.buttons.target).before(e),document.querySelector("#grids button.add").addEventListener("click",function(){this.addColumn()}.bind(this),!1),document.querySelector("#grids button.remove").addEventListener("click",function(){this.removeColumn()}.bind(this),!1)},generateGrid:function(){for(var e="",t='<div class="grid">\n',n=0;n"+(n+1)+"",t+=" <div>"+(n+1)+"</div>\n";t+="</div>",document.querySelector(this.grid.gridTarget).innerHTML=e,document.querySelector(this.grid.codeTarget).innerHTML=t},addColumn:function(){this.grid.currentthis.grid.min&&(this.grid.current--,this.generateGrid())}}},function(e,t,n){"use strict";n.r(t),n.d(t,{scrollspy:function(){return r}});var r={mostVisible:null,minWidth:"992px",interval:75,targets:{sections:'[role="document"] > section',nav:"main aside nav",active:"active"},init:function(e){null==this.mostVisible&&(this.mostVisible=e),window.matchMedia("(min-width: "+this.minWidth+")").matches&&(this.setActiveNav(),this.scrollStop())},setActiveNav:function(){var e=this.mostVisible(this.targets.sections).getAttribute("id");document.querySelectorAll(this.targets.nav+" a."+this.targets.active).forEach(function(e){e.classList.remove(this.targets.active)}.bind(this));var t=document.querySelector(this.targets.nav+' a[href="#'+e+'"]');t.classList.add(this.targets.active),t.closest("details").setAttribute("open","")},scrollStop:function(){var e;window.addEventListener("scroll",function(t){window.clearTimeout(e),e=setTimeout(function(){this.setActiveNav()}.bind(this),this.interval)}.bind(this),!1)}}}],t={};function n(r){var i=t[r];if(void 0!==i)return i.exports;var a=t[r]={exports:{}};return e[r].call(a.exports,a,a.exports,n),a.exports}n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,{a:t}),t},n.d=function(e,t){for(var r in t)n.o(t,r)&&!n.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:t[r]})},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var r={};!function(){"use strict";n.r(r);var e=n(1),t=n(2),i=n(3),a=n(4),c=n(5),o=n(6),f=n(7);t.aside.init(),i.themeSwitcher.addButton({tag:"BUTTON",class:"contrast switcher theme-switcher",target:"body"}),i.themeSwitcher.init(),c.colorPicker.colors=a.materialDesignColors,c.colorPicker.init(),o.grid.init(),f.scrollspy.init(e)}()}(); \ No newline at end of file diff --git a/docs/js/src/most-visible.min.js b/docs/js/src/most-visible.min.js new file mode 100644 index 00000000..0127f15a --- /dev/null +++ b/docs/js/src/most-visible.min.js @@ -0,0 +1,7 @@ +/** + * Most Visible v1.5.0 + * + * @author Andy Palmer + * @license MIT + */ +!function(e,t){"function"==typeof define&&define.amd?define([],function(){return t(e)}):"object"==typeof module&&module.exports?module.exports=t(e):e.mostVisible=t(e)}("undefined"!=typeof self?self:this,function(e){"use strict";function i(e,t){if(!(this instanceof i))return new i(e,t).getMostVisible();"string"==typeof e&&(e=document.querySelectorAll(e)),this.elements=e,this.options=function(e){for(var t=1;te[0]?[i,t]:e},[0,null])[1]},getVisibleHeight:function(e,t){var i=e.getBoundingClientRect(),n=i.top-this.options.offset,o=i.bottom-this.options.offset,s=i.bottom-i.top,r=0<=n&&n