hugo-theme-relearn/js/variant.min.js

56 lines
22 KiB
JavaScript
Raw Normal View History

window.relearn=window.relearn||{};function ready(e){document.readyState=="complete"?e():document.addEventListener("DOMContentLoaded",e)}var variants={variants:window.relearn.themevariants,customvariantname:window.relearn.customvariantname,isstylesheetloaded:!0,setup:function(){this.addCustomVariantStyles();var t=window.localStorage.getItem(window.relearn.absBaseUri+"/customvariantstylesheet"),e=window.localStorage.getItem(window.relearn.absBaseUri+"/customvariant");!t||!e?(t="",window.localStorage.removeItem(window.relearn.absBaseUri+"/customvariantstylesheet"),e="",window.localStorage.removeItem(window.relearn.absBaseUri+"/customvariant")):e&&!window.relearn.themevariants.includes(e)&&(e=window.relearn.themevariants[0],window.localStorage.setItem(window.relearn.absBaseUri+"/customvariant",e)),this.updateCustomVariantStyles(t),this.init(),ready(this.init.bind(this))},init:function(){this.addCustomVariantOption(),window.relearn.markVariant(),window.relearn.changeVariant(window.localStorage.getItem(window.relearn.absBaseUri+"/variant"))},addCustomVariantOption:function(){var e,n=window.localStorage.getItem(window.relearn.absBaseUri+"/customvariant"),t=document.querySelector("#R-select-variant");if(!n||!t)return;e=document.querySelector("#R-select-variant-"+this.customvariantname),e||(e=document.createElement("option"),e.id="R-select-variant-"+this.customvariantname,e.value=this.customvariantname,e.text=this.customvariantname.replace(/-/g," ").replace(/\w\S*/g,function(e){return e.replace(/^\w/g,function(e){return e.toUpperCase()})}),t.appendChild(e),document.querySelectorAll(".footerVariantSwitch").forEach(function(e){e.classList.add("showVariantSwitch")}))},removeCustomVariantOption:function(){var e=document.querySelector("#R-select-variant-"+this.customvariantname);e&&(e.remove(),this.variants.length<=1&&document.querySelectorAll(".footerVariantSwitch").forEach(function(e){e.classList.remove("showVariantSwitch")}))},addCustomVariantStyles:function(){var t=document.querySelector("head"),e=document.createElement("style");e.id="R-variant-styles-"+this.customvariantname,t.appendChild(e)},updateCustomVariantStyles:function(e){e=":root:not([data-r-output-format='print'])[data-r-theme-variant='"+this.customvariantname+`'] {
&`+e+`
}`;var t=document.querySelector("#R-variant-styles-"+this.customvariantname);t&&(t.textContent=e)},saveCustomVariant:function(){var e,t=window.localStorage.getItem(window.relearn.absBaseUri+"/variant");t!=this.customvariantname&&window.localStorage.setItem(window.relearn.absBaseUri+"/customvariant",t),e=this.generateStylesheet(this.customvariantname),window.localStorage.setItem(window.relearn.absBaseUri+"/variant",this.customvariantname),window.localStorage.setItem(window.relearn.absBaseUri+"/customvariantstylesheet",e),this.updateCustomVariantStyles(e),this.addCustomVariantOption(),window.relearn.markVariant(),window.relearn.changeVariant(this.customvariantname)},normalizeColor:function(e){return!e||!e.trim?e:(e=e.trim(),e=e.replace(/\s*\(\s*/g,"( "),e=e.replace(/\s*\)\s*/g," )"),e=e.replace(/\s*,\s*/g,", "),e=e.replace(/0*\./g,"."),e=e.replace(/ +/g," "),e)},getColorValue:function(e){return this.normalizeColor(getComputedStyle(document.documentElement).getPropertyValue("--INTERNAL-"+e))},getColorProperty:function(e,t){var s=this.findColor(e),n=this.normalizeColor(t.getPropertyValue("--"+e)).replace("--INTERNAL-","--");return n},findRootRule:function(e,t){for(let n of e??[]){if(n.conditionText&&n.conditionText!="screen"||n.selectorText&&!n.selectorText.startsWith(":root:not"))return null;if(t.some(e=>n.selectorText===e)){for(let e of n.cssRules??[])if(e.selectorText==="&:root")return e.style;return null}let s=this.findRootRule(n.cssRules,t);if(s)return s}return null},findLoadedStylesheet:function(e,t){for(let n of document.styleSheets)if(n.ownerNode.id===e)return this.findRootRule(n.cssRules,t);return null},findColor:function(e){var t=this.variantvariables.find(function(t){return t.name==e});return t},generateColorVariable:function(e,t){var n="",s=this.getColorProperty(e.name,t);return s&&(n+=" --"+e.name+": "+s+"; /* "+e.tooltip+` */
`),n},generateStylesheet:function(e){var n,t=null;if(e!=this.customvariantname){if(t=this.findLoadedStylesheet("R-format-style",[':root:not([data-r-output-format="print"])[data-r-theme-variant="'+e+'"]']),!t){alert("There is nothing to be generated as auto mode variants will be generated by Hugo");return}}else if(t=this.findLoadedStylesheet("R-variant-styles-"+e,[':root:not([data-r-output-format="print"])[data-r-theme-variant="'+e+'"]']),!t&&(n=window.localStorage.getItem(window.relearn.absBaseUri+"/customvariant"),t=this.findLoadedStylesheet("R-format-style",[':root:not([data-r-output-format="print"])[data-r-theme-variant="'+n+'"]']),!t)){alert("There is nothing to be generated as auto mode variants will be generated by Hugo");return}return t=`:root {
/* `+e+` */
`+this.variantvariables.reduce(function(e,n){return e+this.generateColorVariable(n,t)}.bind(this),"")+`}
`,t},download:function(e,t,n){var o=new Blob([e],{type:t}),i=window.URL.createObjectURL(o),s=document.createElement("a");s.setAttribute("href",i),s.setAttribute("download",n),s.click()},changeColor:function(e){var t,n,s,i,a,c,r=window.localStorage.getItem(window.relearn.absBaseUri+"/variant"),o=window.localStorage.getItem(window.relearn.absBaseUri+"/customvariant");if(o&&this.customvariantname!=r){alert('You already have changes based on the "'+o+'" variant. Please proceed editing the custom variant, reset your changes or ignore this message.');return}if(o=o??r,c=this.findLoadedStylesheet("R-format-style",[':root:not([data-r-output-format="print"])[data-r-theme-variant="'+o+'"]']),!c){alert("An auto mode variant can not be changed. Please select its light/dark variant directly to make changes");return}if(s=this.findLoadedStylesheet("R-variant-styles-"+this.customvariantname,[':root:not([data-r-output-format="print"])[data-r-theme-variant="'+this.customvariantname+'"]']),s||(this.saveCustomVariant(),s=this.findLoadedStylesheet("R-variant-styles-"+this.customvariantname,[':root:not([data-r-output-format="print"])[data-r-theme-variant="'+this.customvariantname+'"]'])),t=this.findColor(e),a=this.getColorProperty(e,s),i=e+`
`+t.tooltip+`
`,t.fallback?i+=`
Inherits value "`+this.getColorValue(t.fallback)+'" from '+t.fallback+` if not set
`:t.default&&(i+=`
Defaults to value "`+this.normalizeColor(t.default)+`" if not set
`),n=prompt(i,a),n===null)return;n?(n=this.normalizeColor(n).replace("--INTERNAL-","--").replace("--","--INTERNAL-"),n!=a&&s.setProperty("--"+e,n)):s.removeProperty("--"+e),this.saveCustomVariant()},resetVariant:function(){var t,e=window.localStorage.getItem(window.relearn.absBaseUri+"/customvariant");e&&confirm("You have made changes to your custom variant. Are you sure you want to reset all changes?")&&(t=window.localStorage.getItem(window.relearn.absBaseUri+"/variant"),t!=this.customvariantname&&(e=t),window.localStorage.removeItem(window.relearn.absBaseUri+"/customvariant"),window.localStorage.removeItem(window.relearn.absBaseUri+"/customvariantstylesheet"),window.localStorage.setItem(window.relearn.absBaseUri+"/variant",e),this.updateCustomVariantStyles(""),this.removeCustomVariantOption(),window.relearn.markVariant(),window.relearn.changeVariant(e))},getStylesheet:function(){var t=window.localStorage.getItem(window.relearn.absBaseUri+"/variant"),e=this.generateStylesheet(t);e&&(console.log(e),this.download(e,"text/css","theme-"+t+".css"))},generator:function(e){var t,n=this.generateGraph(),s=document.querySelectorAll(e);s.forEach(function(e){e.innerHTML=n}),t=setInterval(function(){document.querySelectorAll(e+" .mermaid > svg").length&&(clearInterval(t),this.styleGraph())}.bind(this),25)},adjustCSSRules:function(e,t,n){if(n)if(n.sup){let e=new URL(n,document.baseURI).href;n=[...document.styleSheets].filter(t=>t.href==e)}else n=[n];else n=[...document.styleSheets];e=e.replace(/\s+/g," ");const i=t=>[...t.cssRules].reverse().find(t=>t.selectorText==e);let s=n.map(i).filter(e=>e).pop();const o=t.sup?t.split(/\s*;\s*/).map(e=>e.split(/\s*:\s*/)):Object.entries(t);if(s)for(let[e,t]of o)s.style.setProperty(e,...t.split(/ *!(?=important)/));else sheet=n.pop(),t.sup||(t=o.reduce((e,[t,n])=>`${e}; ${t}: ${n}`,"")),sheet.insertRule(`${e} { ${t} }`,sheet.cssRules.length)},styleGraphGroup:function(e,t){this.adjustCSSRules("#R-body svg "+e+" > rect","color: var(--INTERNAL-"+t+"); fill: var(--INTERNAL-"+t+"); stroke: #80808080;"),this.adjustCSSRules("#R-body svg "+e+" > .label .nodeLabel","color: var(--INTERNAL-"+t+"); fill: var(--INTERNAL-"+t+"); stroke: #80808080;"),this.adjustCSSRules("#R-body svg "+e+" > .cluster-label .nodeLabel","color: var(--INTERNAL-"+t+"); fill: var(--INTERNAL-"+t+"); stroke: #80808080;"),this.adjustCSSRules("#R-body svg "+e+" .nodeLabel","filter: grayscale(1) invert(1) contrast(10000);")},styleGraph:function(){this.variantvariables.forEach(function(e){this.styleGraphGroup("."+e.name,e.name)}.bind(this)),this.styleGraphGroup("#maincontent","MAIN-BG-color"),this.styleGraphGroup("#mainheadings","MAIN-BG-color"),this.styleGraphGroup("#code","CODE-BLOCK-BG-color"),this.styleGraphGroup("#inlinecode","CODE-INLINE-BG-color"),this.styleGraphGroup("#blockcode","CODE-BLOCK-BG-color"),this.styleGraphGroup("#thirdparty","MAIN-BG-color"),this.styleGraphGroup("#coloredboxes","BOX-BG-color"),this.styleGraphGroup("#menu","MENU-SECTIONS-BG-color"),this.styleGraphGroup("#menuheader","MENU-HEADER-BG-color"),this.styleGraphGroup("#menusections","MENU-SECTIONS-ACTIVE-BG-color")},generateGraphGroupedEdge:function(e){var t="";return e.fallback&&e.group==this.findColor(e.fallback).group?t+=e.fallback+":::"+e.fallback+" --> "+e.name+":::"+e.name:t+=e.name+":::"+e.name,t},generateGraphVarGroupedEdge:function(e){var t="";return e.fallback&&e.group!=this.findColor(e.fallback).group&&(t+=" "+e.fallback+":::"+e.fallback+" --> "+e.name+":::"+e.name+`
`),t},generateGraph:function(){var t,e={},n="";return this.variantvariables.forEach(function(t){var s=t.group||" ";e[s]=(e[s]||[]).concat(t),n+=" click "+t.name+` variants.changeColor
`}),t=`flowchart LR
subgraph menu["menu"]
direction TB
subgraph menuheader["header"]
direction LR
`+e.header.reduce(function(e,t){return e+" "+this.generateGraphGroupedEdge(t)+`
`}.bind(this),"")+` end
subgraph menusections["sections"]
direction LR
`+e.sections.reduce(function(e,t){return e+" "+this.generateGraphGroupedEdge(t)+`
`}.bind(this),"")+` end
end
subgraph maincontent["content"]
direction TB
`+e.content.reduce(function(e,t){return e+" "+this.generateGraphGroupedEdge(t)+`
`}.bind(this),"")+` subgraph mainheadings["headings"]
direction LR
`+e.headings.reduce(function(e,t){return e+" "+this.generateGraphGroupedEdge(t)+`
`}.bind(this),"")+` end
subgraph code["code"]
direction TB
`+e.code.reduce(function(e,t){return e+" "+this.generateGraphGroupedEdge(t)+`
`}.bind(this),"")+` subgraph inlinecode["inline code"]
direction LR
`+e["inline code"].reduce(function(e,t){return e+" "+this.generateGraphGroupedEdge(t)+`
`}.bind(this),"")+` end
subgraph blockcode["code blocks"]
direction LR
`+e["code blocks"].reduce(function(e,t){return e+" "+this.generateGraphGroupedEdge(t)+`
`}.bind(this),"")+` end
end
subgraph thirdparty["3rd party"]
direction LR
`+e["3rd party"].reduce(function(e,t){return e+" "+this.generateGraphGroupedEdge(t)+`
`}.bind(this),"")+` end
subgraph coloredboxes["colored boxes"]
direction LR
`+e["colored boxes"].reduce(function(e,t){return e+" "+this.generateGraphGroupedEdge(t)+`
`}.bind(this),"")+` end
end
`+this.variantvariables.reduce(function(e,t){return e+this.generateGraphVarGroupedEdge(t)}.bind(this),"")+n,console.log(t),t},variantvariables:[{name:"PRIMARY-color",group:"content",fallback:"MENU-HEADER-BG-color",tooltip:"brand primary color"},{name:"SECONDARY-color",group:"content",fallback:"MAIN-LINK-color",tooltip:"brand secondary color"},{name:"ACCENT-color",group:"content",default:"#ffff00",tooltip:"brand accent color, used for search highlights"},{name:"MAIN-TOPBAR-BORDER-color",group:"content",default:"transparent",tooltip:"border color between topbar and content"},{name:"MAIN-LINK-color",group:"content",fallback:"SECONDARY-color",tooltip:"link color of content"},{name:"MAIN-LINK-HOVER-color",group:"content",fallback:"MAIN-LINK-color",tooltip:"hoverd link color of content"},{name:"MAIN-BG-color",group:"content",default:"#ffffff",tooltip:"background color of content"},{name:"TAG-BG-color",group:"content",fallback:"PRIMARY-color",tooltip:"tag color"},{name:"MAIN-TEXT-color",group:"content",default:"#101010",tooltip:"text color of content and h1 titles"},{name:"MAIN-TITLES-TEXT-color",group:"headings",fallback:"MAIN-TEXT-color",tooltip:"text color of h2-h6 titles and transparent box titles"},{name:"MAIN-TITLES-H1-TEXT-color",group:"headings",fallback:"MAIN-TEXT-color",tooltip:"text color of h1 titles"},{name:"MAIN-TITLES-H2-TEXT-color",group:"headings",fallback:"MAIN-TITLES-TEXT-color",tooltip:"text color of h2-h6 titles"},{name:"MAIN-TITLES-H3-TEXT-color",group:"headings",fallback:"MAIN-TITLES-H2-TEXT-color",tooltip:"text color of h3-h6 titles"},{name:"MAIN-TITLES-H4-TEXT-color",group:"headings",fallback:"MAIN-TITLES-H3-TEXT-color",tooltip:"text color of h4-h6 titles"},{name:"MAIN-TITLES-H5-TEXT-color",group:"headings",fallback:"MAIN-TITLES-H4-TEXT-color",tooltip:"text color of h5-h6 titles"},{name:"MAIN-TITLES-H6-TEXT-color",group:"headings",fallback:"MAIN-TITLES-H5-TEXT-color",tooltip:"text color of h6 titles"},{name:"MAIN-font",group:"content",default:'"Roboto Flex", "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif',tooltip:"text font of content and h1 titles"},{name:"MAIN-TITLES-font",group:"headings",fallback:"MAIN-font",tooltip:"text font of h2-h6 titles and transparent box titles"},{name:"MAIN-TITLES-H1-font",group:"headings",fallback:"MAIN-font",tooltip:"text font of h1 titles"},{name:"MAIN-TITLES-H2-font",group:"headings",fallback:"MAIN-TITLES-font",tooltip:"text font of h2-h6 titles"},{name:"MAIN-TITLES-H3-font",group:"headings",fallback:"MAIN-TITLES-H2-font",tooltip:"text font of h3-h6 titles"},{name:"MAIN-TITLES-H4-font",group:"headings",fallback:"MAIN-TITLES-H3-font",tooltip:"text font of h4-h6 titles"},{name:"MAIN-TITLES-H5-font",group:"headings",fallback:"MAIN-TITLES-H4-font",tooltip:"text font of h5-h6 titles"},{name:"MAIN-TITLES-H6-font",group:"headings",fallback:"MAIN-TITLES-H5-font",tooltip:"text font of h6 titles"},{name:"CODE-theme",group:"code",default:"relearn-light",tooltip:"name of the chroma stylesheet file"},{name:"CODE-font",group:"code",default:'"Consolas", menlo, monospace',tooltip:"text font of code"},{name:"CODE-BLOCK-color",group:"code blocks",default:"#000000",tooltip:"fallback text color of block code; should be adjusted to your selected chroma style"},{name:"CODE-BLOCK-BG-color",group:"code blocks",default:"#f8f8f8",tooltip:"fallback background color of block code; should be adjusted to your selected chroma style"},{name:"CODE-BLOCK-BORDER-color",group:"code blocks",fallback:"CODE-BLOCK-BG-color",tooltip:"border color of block code"},{name:"CODE-INLINE-color",group:"inline code",default:"#5e5e5e",tooltip:"text color of inline code"},{name:"CODE-INLINE-BG-color",group:"inline code",default:"#fffae9",tooltip:"background color of inline code"},{name:"CODE-INLINE-BORDER-color",group:"inline code",default:"#fbf0cb",tooltip:"border color of inline code"},{name:"BROWSER-theme",group:"3rd party",default:"light",tooltip:"name of the theme for browser scrollbars of the main section"},{name:"MERMAID-theme",group:"3rd party",default:"default",tooltip:"name of the default Mermaid theme f