2023-11-16 22:53:34 +00:00
window . relearn = window . relearn || { } ;
2022-02-20 22:58:51 +00:00
// we need to load this script in the html head to avoid flickering
// on page load if the user has selected a non default variant
2022-04-03 16:04:03 +00:00
// polyfill this rotten piece of sh...oftware
if ( typeof NodeList !== "undefined" && NodeList . prototype && ! NodeList . prototype . forEach ) {
NodeList . prototype . forEach = Array . prototype . forEach ;
}
if ( ! String . prototype . startsWith ) {
Object . defineProperty ( String . prototype , 'startsWith' , {
value : function ( search , rawPos ) {
var pos = rawPos > 0 ? rawPos | 0 : 0 ;
return this . substring ( pos , pos + search . length ) === search ;
}
} ) ;
}
2023-02-04 15:30:49 +00:00
"function" != typeof Object . assign && ( Object . assign = function ( n , t ) { "use strict" ; if ( null == n ) throw new TypeError ( "Cannot convert undefined or null to object" ) ; for ( var r = Object ( n ) , e = 1 ; e < arguments . length ; e ++ ) { var o = arguments [ e ] ; if ( null != o ) for ( var c in o ) Object . prototype . hasOwnProperty . call ( o , c ) && ( r [ c ] = o [ c ] ) } return r } ) ;
2022-04-03 16:04:03 +00:00
if ( ! Array . prototype . find ) { Array . prototype . find = function ( predicate ) { if ( this === null ) { throw new TypeError ( 'Array.prototype.find called on null or undefined' ) } if ( typeof predicate !== 'function' ) { throw new TypeError ( 'predicate must be a function' ) } var list = Object ( this ) ; var length = list . length >>> 0 ; var thisArg = arguments [ 1 ] ; var value ; for ( var i = 0 ; i < length ; i += 1 ) { value = list [ i ] ; if ( predicate . call ( thisArg , value , i , list ) ) { return value } } return undefined } }
Array . from || ( Array . from = function ( ) { var r ; try { r = Symbol . iterator ? Symbol . iterator : "Symbol(Symbol.iterator)" } catch ( t ) { r = "Symbol(Symbol.iterator)" } var t = Object . prototype . toString , n = function ( r ) { return "function" == typeof r || "[object Function]" === t . call ( r ) } , o = Math . pow ( 2 , 53 ) - 1 , e = function ( r ) { var t = function ( r ) { var t = Number ( r ) ; return isNaN ( t ) ? 0 : 0 !== t && isFinite ( t ) ? ( t > 0 ? 1 : - 1 ) * Math . floor ( Math . abs ( t ) ) : t } ( r ) ; return Math . min ( Math . max ( t , 0 ) , o ) } , a = function ( t , n ) { var o = t && n [ r ] ( ) ; return function ( r ) { return t ? o . next ( ) : n [ r ] } } , i = function ( r , t , n , o , e , a ) { for ( var i = 0 ; i < n || e ; ) { var u = o ( i ) , f = e ? u . value : u ; if ( e && u . done ) return t ; t [ i ] = a ? void 0 === r ? a ( f , i ) : a . call ( r , f , i ) : f , i += 1 } if ( e ) throw new TypeError ( "Array.from: provided arrayLike or iterator has length more then 2 ** 52 - 1" ) ; return t . length = n , t } ; return function ( t ) { var o = this , u = Object ( t ) , f = n ( u [ r ] ) ; if ( null == t && ! f ) throw new TypeError ( "Array.from requires an array-like object or iterator - not null or undefined" ) ; var l , c = arguments . length > 1 ? arguments [ 1 ] : void 0 ; if ( void 0 !== c ) { if ( ! n ( c ) ) throw new TypeError ( "Array.from: when provided, the second argument must be a function" ) ; arguments . length > 2 && ( l = arguments [ 2 ] ) } var y = e ( u . length ) , h = n ( o ) ? Object ( new o ( y ) ) : new Array ( y ) ; return i ( l , h , y , a ( f , u ) , f , c ) } } ( ) ) ;
2023-02-04 15:02:34 +00:00
const ElementPrototype = window . Element . prototype ;
if ( typeof ElementPrototype . matches !== 'function' ) { ElementPrototype . matches = ElementPrototype . msMatchesSelector || ElementPrototype . mozMatchesSelector || ElementPrototype . webkitMatchesSelector || function matches ( selector ) { let element = this ; const elements = ( element . document || element . ownerDocument ) . querySelectorAll ( selector ) ; let index = 0 ; while ( elements [ index ] && elements [ index ] !== element ) { index += 1 } return Boolean ( elements [ index ] ) } } if ( typeof ElementPrototype . closest !== 'function' ) { ElementPrototype . closest = function closest ( selector ) { let element = this ; while ( element && element . nodeType === 1 ) { if ( element . matches ( selector ) ) { return element } element = element . parentNode } return null } }
2022-04-03 13:22:14 +00:00
function _createForOfIteratorHelperLoose ( o , allowArrayLike ) { var it = typeof Symbol !== "undefined" && o [ Symbol . iterator ] || o [ "@@iterator" ] ; if ( it ) return ( it = it . call ( o ) ) . next . bind ( it ) ; if ( Array . isArray ( o ) || ( it = _unsupportedIterableToArray ( o ) ) || allowArrayLike && o && typeof o . length === "number" ) { if ( it ) o = it ; var i = 0 ; return function ( ) { if ( i >= o . length ) return { done : true } ; return { done : false , value : o [ i ++ ] } ; } ; } throw new TypeError ( "Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method." ) ; }
function _unsupportedIterableToArray ( o , minLen ) { if ( ! o ) return ; if ( typeof o === "string" ) return _arrayLikeToArray ( o , minLen ) ; var n = Object . prototype . toString . call ( o ) . slice ( 8 , - 1 ) ; if ( n === "Object" && o . constructor ) n = o . constructor . name ; if ( n === "Map" || n === "Set" ) return Array . from ( o ) ; if ( n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/ . test ( n ) ) return _arrayLikeToArray ( o , minLen ) ; }
function _arrayLikeToArray ( arr , len ) { if ( len == null || len > arr . length ) len = arr . length ; for ( var i = 0 , arr2 = new Array ( len ) ; i < len ; i ++ ) { arr2 [ i ] = arr [ i ] ; } return arr2 ; }
2023-02-03 22:36:00 +00:00
function ready ( fn ) { if ( document . readyState == 'complete' ) { fn ( ) ; } else { document . addEventListener ( 'DOMContentLoaded' , fn ) ; } }
2023-01-29 23:31:15 +00:00
2022-02-20 22:58:51 +00:00
var variants = {
variant : '' ,
variants : [ ] ,
2022-02-21 22:11:42 +00:00
customvariantname : 'my-custom-variant' ,
2022-03-28 09:57:30 +00:00
isstylesheetloaded : true ,
2022-02-20 22:58:51 +00:00
init : function ( variants ) {
this . variants = variants ;
2023-11-16 22:53:34 +00:00
var variant = window . localStorage . getItem ( window . relearn . baseUriFull + 'variant' ) || ( this . variants . length ? this . variants [ 0 ] : '' ) ;
2022-02-20 22:58:51 +00:00
this . changeVariant ( variant ) ;
document . addEventListener ( 'readystatechange' , function ( ) {
if ( document . readyState == 'interactive' ) {
2022-02-21 22:11:42 +00:00
this . markSelectedVariant ( ) ;
2022-02-20 22:58:51 +00:00
}
} . bind ( this ) ) ;
} ,
getVariant : function ( ) {
return this . variant ;
} ,
setVariant : function ( variant ) {
this . variant = variant ;
2023-11-16 22:53:34 +00:00
window . localStorage . setItem ( window . relearn . baseUriFull + 'variant' , variant ) ;
2022-02-20 22:58:51 +00:00
} ,
2022-03-28 09:57:30 +00:00
isVariantLoaded : function ( ) {
return window . theme && this . isstylesheetloaded ;
} ,
2022-02-21 22:11:42 +00:00
markSelectedVariant : function ( ) {
var variant = this . getVariant ( ) ;
2023-09-23 08:19:35 +00:00
var select = document . querySelector ( '#R-select-variant' ) ;
2022-02-20 22:58:51 +00:00
if ( ! select ) {
return ;
}
2022-02-21 22:11:42 +00:00
this . addCustomVariantOption ( ) ;
if ( variant && select . value != variant ) {
2022-02-20 22:58:51 +00:00
select . value = variant ;
}
2022-03-28 09:57:30 +00:00
var interval _id = setInterval ( function ( ) {
if ( this . isVariantLoaded ( ) ) {
clearInterval ( interval _id ) ;
2023-08-12 21:14:47 +00:00
updateTheme ( { variant : variant } ) ;
2022-03-19 19:19:27 +00:00
}
} . bind ( this ) , 25 ) ;
2022-02-21 00:00:54 +00:00
// remove selection, because if some uses an arrow navigation"
// by pressing the left or right cursor key, we will automatically
// select a different style
if ( document . activeElement ) {
document . activeElement . blur ( ) ;
}
} ,
2022-02-24 20:54:38 +00:00
generateVariantPath : function ( variant , old _path ) {
2022-02-21 00:00:54 +00:00
var new _path = old _path . replace ( /^(.*\/theme-).*?(\.css.*)$/ , '$1' + variant + '$2' ) ;
return new _path ;
2022-02-20 22:58:51 +00:00
} ,
2022-02-21 22:11:42 +00:00
addCustomVariantOption : function ( ) {
2023-11-16 22:53:34 +00:00
var variantbase = window . localStorage . getItem ( window . relearn . baseUriFull + 'customvariantbase' ) ;
2022-02-21 22:11:42 +00:00
if ( this . variants . indexOf ( variantbase ) < 0 ) {
variantbase = '' ;
}
2023-11-16 22:53:34 +00:00
if ( ! window . localStorage . getItem ( window . relearn . baseUriFull + 'customvariant' ) ) {
2022-02-21 22:11:42 +00:00
variantbase = '' ;
2022-02-20 22:58:51 +00:00
}
2022-02-21 22:11:42 +00:00
if ( ! variantbase ) {
2022-02-20 22:58:51 +00:00
return ;
}
2023-09-23 08:19:35 +00:00
var select = document . querySelector ( '#R-select-variant' ) ;
2022-02-21 22:11:42 +00:00
if ( ! select ) {
2022-02-20 22:58:51 +00:00
return ;
}
2022-02-21 22:11:42 +00:00
var option = document . querySelector ( '#' + this . customvariantname ) ;
if ( ! option ) {
option = document . createElement ( 'option' ) ;
option . id = this . customvariantname ;
option . value = this . customvariantname ;
2022-02-24 20:54:38 +00:00
option . text = this . customvariantname . replace ( /-/g , ' ' ) . replace ( /\w\S*/g , function ( w ) { return w . replace ( /^\w/g , function ( c ) { return c . toUpperCase ( ) ; } ) ; } ) ;
2022-02-21 22:11:42 +00:00
select . appendChild ( option ) ;
document . querySelectorAll ( '.footerVariantSwitch' ) . forEach ( function ( e ) {
e . classList . add ( 'showVariantSwitch' ) ;
} ) ;
2022-02-20 22:58:51 +00:00
}
} ,
2022-02-21 22:11:42 +00:00
removeCustomVariantOption : function ( ) {
var option = document . querySelector ( '#' + this . customvariantname ) ;
if ( option ) {
option . remove ( ) ;
}
if ( this . variants . length <= 1 ) {
document . querySelectorAll ( '.footerVariantSwitch' ) . forEach ( function ( e ) {
e . classList . remove ( 'showVariantSwitch' ) ;
} ) ;
}
} ,
saveCustomVariant : function ( ) {
if ( this . getVariant ( ) != this . customvariantname ) {
2023-11-16 22:53:34 +00:00
window . localStorage . setItem ( window . relearn . baseUriFull + 'customvariantbase' , this . getVariant ( ) ) ;
2022-02-21 22:11:42 +00:00
}
2023-11-16 22:53:34 +00:00
window . localStorage . setItem ( window . relearn . baseUriFull + 'customvariant' , this . generateStylesheet ( ) ) ;
2022-02-21 22:11:42 +00:00
this . setVariant ( this . customvariantname ) ;
this . markSelectedVariant ( ) ;
} ,
loadCustomVariant : function ( ) {
2023-11-16 22:53:34 +00:00
var stylesheet = window . localStorage . getItem ( window . relearn . baseUriFull + 'customvariant' ) ;
2022-02-21 22:11:42 +00:00
// temp styles to document
var head = document . querySelector ( 'head' ) ;
var style = document . createElement ( 'style' ) ;
2023-09-23 08:19:35 +00:00
style . id = 'R-custom-variant-style' ;
2022-02-21 22:11:42 +00:00
style . appendChild ( document . createTextNode ( stylesheet ) ) ;
head . appendChild ( style ) ;
var interval _id = setInterval ( function ( ) {
2023-09-23 08:19:35 +00:00
if ( this . findLoadedStylesheet ( 'R-variant-style' ) ) {
2022-02-21 22:11:42 +00:00
clearInterval ( interval _id ) ;
// save the styles to the current variant stylesheet
this . variantvariables . forEach ( function ( e ) {
this . changeColor ( e . name , true ) ;
} . bind ( this ) ) ;
// remove temp styles
style . remove ( ) ;
this . saveCustomVariant ( ) ;
}
} . bind ( this ) , 25 ) ;
} ,
2022-02-21 00:00:54 +00:00
resetVariant : function ( ) {
2023-11-16 22:53:34 +00:00
var variantbase = window . localStorage . getItem ( window . relearn . baseUriFull + 'customvariantbase' ) ;
2022-02-21 22:11:42 +00:00
if ( variantbase && confirm ( 'You have made changes to your custom variant. Are you sure you want to reset all changes?' ) ) {
2023-11-16 22:53:34 +00:00
window . localStorage . removeItem ( window . relearn . baseUriFull + 'customvariantbase' ) ;
window . localStorage . removeItem ( window . relearn . baseUriFull + 'customvariant' ) ;
2022-02-21 22:20:27 +00:00
this . removeCustomVariantOption ( ) ;
2022-02-24 21:15:30 +00:00
if ( this . getVariant ( ) == this . customvariantname ) {
2022-02-22 07:48:57 +00:00
this . changeVariant ( variantbase ) ;
}
2022-02-21 22:11:42 +00:00
}
} ,
2022-03-28 09:57:30 +00:00
onLoadStylesheet : function ( ) {
variants . isstylesheetloaded = true ;
} ,
2022-02-21 22:11:42 +00:00
switchStylesheet : function ( variant , without _check ) {
2023-09-23 08:19:35 +00:00
var link = document . querySelector ( '#R-variant-style' ) ;
2022-02-21 00:00:54 +00:00
if ( ! link ) {
return ;
}
var old _path = link . getAttribute ( 'href' ) ;
2022-02-21 22:11:42 +00:00
var new _path = this . generateVariantPath ( variant , old _path ) ;
2022-03-28 09:57:30 +00:00
this . isstylesheetloaded = false ;
// Chrome needs a new element to trigger the load callback again
var new _link = document . createElement ( 'link' ) ;
2023-09-23 08:19:35 +00:00
new _link . id = 'R-variant-style' ;
2022-03-28 09:57:30 +00:00
new _link . rel = 'stylesheet' ;
new _link . onload = this . onLoadStylesheet ;
new _link . setAttribute ( 'href' , new _path ) ;
link . parentNode . replaceChild ( new _link , link ) ;
2022-02-21 00:00:54 +00:00
} ,
2022-02-21 22:11:42 +00:00
changeVariant : function ( variant ) {
if ( variant == this . customvariantname ) {
2023-11-16 22:53:34 +00:00
var variantbase = window . localStorage . getItem ( window . relearn . baseUriFull + 'customvariantbase' ) ;
2022-02-21 22:11:42 +00:00
if ( this . variants . indexOf ( variantbase ) < 0 ) {
variant = '' ;
}
2023-11-16 22:53:34 +00:00
if ( ! window . localStorage . getItem ( window . relearn . baseUriFull + 'customvariant' ) ) {
2022-02-21 22:11:42 +00:00
variant = '' ;
}
this . setVariant ( variant ) ;
if ( ! variant ) {
return ;
}
this . switchStylesheet ( variantbase ) ;
this . loadCustomVariant ( ) ;
}
else {
if ( this . variants . indexOf ( variant ) < 0 ) {
variant = this . variants . length ? this . variants [ 0 ] : '' ;
}
this . setVariant ( variant ) ;
if ( ! variant ) {
return ;
}
this . switchStylesheet ( variant ) ;
this . markSelectedVariant ( ) ;
}
} ,
2022-11-28 17:44:03 +00:00
generator : function ( vargenerator ) {
2022-02-20 22:58:51 +00:00
var graphDefinition = this . generateGraph ( ) ;
2022-02-21 22:11:42 +00:00
var graphs = document . querySelectorAll ( vargenerator ) ;
graphs . forEach ( function ( e ) { e . innerHTML = graphDefinition ; } ) ;
2022-02-20 22:58:51 +00:00
var interval _id = setInterval ( function ( ) {
if ( document . querySelectorAll ( vargenerator + '.mermaid > svg' ) . length ) {
clearInterval ( interval _id ) ;
this . styleGraph ( ) ;
}
2022-02-21 22:11:42 +00:00
} . bind ( this ) , 25 ) ;
2022-02-20 22:58:51 +00:00
} ,
download : function ( data , mimetype , filename ) {
var blob = new Blob ( [ data ] , { type : mimetype } ) ;
var url = window . URL . createObjectURL ( blob ) ;
var a = document . createElement ( 'a' ) ;
a . setAttribute ( 'href' , url ) ;
a . setAttribute ( 'download' , filename ) ;
a . click ( ) ;
} ,
getStylesheet : function ( ) {
2022-02-21 22:11:42 +00:00
this . download ( this . generateStylesheet ( ) , 'text/css' , 'theme-' + this . customvariantname + '.css' ) ;
2022-02-20 22:58:51 +00:00
} ,
2022-04-03 13:22:14 +00:00
adjustCSSRules : function ( selector , props , sheets ) {
// get stylesheet(s)
if ( ! sheets ) sheets = [ ] . concat ( Array . from ( document . styleSheets ) ) ; else if ( sheets . sup ) {
// sheets is a string
var absoluteURL = new URL ( sheets , document . baseURI ) . href ;
sheets = [ ] . concat ( document . styleSheets ) . filter ( function ( i ) {
return i . href == absoluteURL ;
} ) ;
} else sheets = [ sheets ] ; // sheets is a stylesheet
// CSS (& HTML) reduce spaces in selector to one.
selector = selector . replace ( /\s+/g , ' ' ) ;
var findRule = function findRule ( s ) {
return [ ] . concat ( s . cssRules ) . reverse ( ) . find ( function ( i ) {
return i . selectorText == selector ;
} ) ;
} ;
var rule = sheets . map ( findRule ) . filter ( function ( i ) {
return i ;
} ) . pop ( ) ;
var propsArr = props . sup ? props . split ( /\s*;\s*/ ) . map ( function ( i ) {
return i . split ( /\s*:\s*/ ) ;
} ) // from string
: Object . entries ( props ) ; // from Object
if ( rule ) {
for ( var _iterator = _createForOfIteratorHelperLoose ( propsArr ) , _step ; ! ( _step = _iterator ( ) ) . done ; ) {
var _rule$style ;
var _step$value = _step . value ,
prop = _step$value [ 0 ] ,
val = _step$value [ 1 ] ;
// rule.style[prop] = val; is against the spec, and does not support !important.
( _rule$style = rule . style ) . setProperty . apply ( _rule$style , [ prop ] . concat ( val . split ( / *!(?=important)/ ) ) ) ;
}
} else {
sheet = sheets . pop ( ) ;
if ( ! props . sup ) props = propsArr . reduce ( function ( str , _ref ) {
var k = _ref [ 0 ] ,
v = _ref [ 1 ] ;
return str + "; " + k + ": " + v ;
} , '' ) ;
sheet . insertRule ( selector + " { " + props + " }" , sheet . cssRules . length ) ;
}
} ,
2022-02-20 22:58:51 +00:00
normalizeColor : function ( c ) {
if ( ! c || ! c . trim ) {
return c ;
}
c = c . trim ( ) ;
2022-02-22 19:38:41 +00:00
c = c . replace ( /\s*\(\s*/g , "( " ) ;
c = c . replace ( /\s*\)\s*/g , " )" ) ;
c = c . replace ( /\s*,\s*/g , ", " ) ;
c = c . replace ( /0*\./g , "." ) ;
c = c . replace ( / +/g , " " ) ;
2022-02-20 22:58:51 +00:00
return c ;
} ,
getColorValue : function ( c ) {
return this . normalizeColor ( getComputedStyle ( document . documentElement ) . getPropertyValue ( '--INTERNAL-' + c ) ) ;
} ,
2022-05-22 22:01:22 +00:00
getColorProperty : function ( c , read _style ) {
var e = this . findColor ( c ) ;
var p = this . normalizeColor ( read _style . getPropertyValue ( '--' + c ) ) . replace ( '--INTERNAL-' , '--' ) ;
return p ;
} ,
2022-02-21 22:11:42 +00:00
findLoadedStylesheet : function ( id ) {
2022-02-20 22:58:51 +00:00
for ( var n = 0 ; n < document . styleSheets . length ; ++ n ) {
2022-02-21 22:11:42 +00:00
if ( document . styleSheets [ n ] . ownerNode . id == id ) {
var s = document . styleSheets [ n ] ;
2022-11-22 17:22:36 +00:00
if ( s . rules && s . rules . length ) {
for ( var m = 0 ; m < s . rules . length ; ++ m ) {
if ( s . rules [ m ] . selectorText == ':root' ) {
return s . rules [ m ] . style ;
}
if ( s . rules [ m ] . cssRules && s . rules [ m ] . cssRules . length ) {
for ( var o = 0 ; o < s . rules [ m ] . cssRules . length ; ++ o ) {
if ( s . rules [ m ] . cssRules [ o ] . selectorText == ':root' ) {
return s . rules [ m ] . cssRules [ o ] . style ;
}
}
}
2022-02-21 22:11:42 +00:00
}
2022-02-20 22:58:51 +00:00
}
2022-02-21 22:11:42 +00:00
break ;
2022-02-20 22:58:51 +00:00
}
}
2022-11-22 17:22:36 +00:00
return null ;
2022-02-21 22:11:42 +00:00
} ,
changeColor : function ( c , without _prompt ) {
2022-05-22 22:01:22 +00:00
var with _prompt = ! ( without _prompt || false ) ;
2023-02-05 10:47:44 +00:00
if ( this . getVariant ( ) == 'auto' ) {
if ( with _prompt ) {
alert ( 'The Auto variant can not be changed. Please select the light/dark variant directly to make changes' ) ;
}
return ;
}
2022-05-22 22:01:22 +00:00
2023-09-23 08:19:35 +00:00
var read _style = this . findLoadedStylesheet ( 'R-custom-variant-style' ) ;
var write _style = this . findLoadedStylesheet ( 'R-variant-style' ) ;
2022-02-21 22:11:42 +00:00
if ( ! read _style ) {
read _style = write _style ;
2022-02-20 22:58:51 +00:00
}
var e = this . findColor ( c ) ;
2022-05-22 22:01:22 +00:00
var v = this . getColorProperty ( c , read _style ) ;
2022-02-21 22:11:42 +00:00
var n = '' ;
2022-05-22 22:01:22 +00:00
if ( ! with _prompt ) {
2022-02-21 22:11:42 +00:00
n = v ;
2022-02-20 22:58:51 +00:00
}
2022-02-21 22:11:42 +00:00
else {
var t = c + '\n\n' + e . tooltip + '\n' ;
if ( e . fallback ) {
2022-05-22 22:01:22 +00:00
t += '\nInherits value "' + this . getColorValue ( e . fallback ) + '" from ' + e . fallback + ' if not set\n' ;
2022-02-21 22:11:42 +00:00
}
2022-05-22 22:01:22 +00:00
else if ( e . default ) {
2022-02-21 22:11:42 +00:00
t += '\nDefaults to value "' + this . normalizeColor ( e . default ) + '" if not set\n' ;
}
n = prompt ( t , v ) ;
2022-05-22 22:01:22 +00:00
if ( n === null ) {
// user canceld operation
return ;
}
2022-02-20 22:58:51 +00:00
}
if ( n ) {
2022-05-22 22:01:22 +00:00
// value set to specific value
2022-02-20 22:58:51 +00:00
n = this . normalizeColor ( n ) . replace ( '--INTERNAL-' , '--' ) . replace ( '--' , '--INTERNAL-' ) ;
2022-05-22 22:01:22 +00:00
if ( ! with _prompt || n != v ) {
2022-02-21 22:11:42 +00:00
write _style . setProperty ( '--' + c , n ) ;
}
2022-02-20 22:58:51 +00:00
}
2022-05-22 22:01:22 +00:00
else {
// value emptied, so delete it
2022-02-21 22:11:42 +00:00
write _style . removeProperty ( '--' + c ) ;
2022-05-22 22:01:22 +00:00
}
if ( with _prompt ) {
this . saveCustomVariant ( ) ;
2022-02-20 22:58:51 +00:00
}
} ,
findColor : function ( name ) {
var f = this . variantvariables . find ( function ( x ) {
return x . name == name ;
} ) ;
return f ;
} ,
2022-05-22 22:01:22 +00:00
generateColorVariable : function ( e , read _style ) {
2022-02-20 22:58:51 +00:00
var v = '' ;
2022-05-22 22:01:22 +00:00
var gen = this . getColorProperty ( e . name , read _style ) ;
2022-02-20 22:58:51 +00:00
if ( gen ) {
2022-05-22 22:01:22 +00:00
v += ' --' + e . name + ': ' + gen + '; /* ' + e . tooltip + ' */\n' ;
2022-02-20 22:58:51 +00:00
}
return v ;
} ,
generateStylesheet : function ( ) {
2023-09-23 08:19:35 +00:00
var read _style = this . findLoadedStylesheet ( 'R-custom-variant-style' ) ;
var write _style = this . findLoadedStylesheet ( 'R-variant-style' ) ;
2022-05-22 22:01:22 +00:00
if ( ! read _style ) {
read _style = write _style ;
}
2022-02-20 22:58:51 +00:00
var style =
2022-02-21 22:11:42 +00:00
'/* ' + this . customvariantname + ' */\n' +
2022-02-20 22:58:51 +00:00
':root {\n' +
2022-05-22 22:01:22 +00:00
this . variantvariables . reduce ( function ( a , e ) { return a + this . generateColorVariable ( e , read _style ) ; } . bind ( this ) , '' ) +
2022-02-20 22:58:51 +00:00
'}\n' ;
2022-05-22 22:01:22 +00:00
console . log ( style ) ;
2022-02-20 22:58:51 +00:00
return style ;
} ,
styleGraphGroup : function ( selector , colorvar ) {
2023-09-23 08:19:35 +00:00
this . adjustCSSRules ( '#R-body svg ' + selector + ' > rect' , 'color: var(--INTERNAL-' + colorvar + '); fill: var(--INTERNAL-' + colorvar + '); stroke: #80808080;' ) ;
this . adjustCSSRules ( '#R-body svg ' + selector + ' > .label .nodeLabel' , 'color: var(--INTERNAL-' + colorvar + '); fill: var(--INTERNAL-' + colorvar + '); stroke: #80808080;' ) ;
this . adjustCSSRules ( '#R-body svg ' + selector + ' > .cluster-label .nodeLabel' , 'color: var(--INTERNAL-' + colorvar + '); fill: var(--INTERNAL-' + colorvar + '); stroke: #80808080;' ) ;
this . adjustCSSRules ( '#R-body svg ' + selector + ' .nodeLabel' , 'filter: grayscale(1) invert(1) contrast(10000);' ) ;
2022-02-20 22:58:51 +00:00
} ,
styleGraph : function ( ) {
this . variantvariables . forEach ( function ( e ) {
this . styleGraphGroup ( '.' + e . name , e . name ) ;
} . bind ( this ) ) ;
2022-02-21 00:00:54 +00:00
this . styleGraphGroup ( '#maincontent' , 'MAIN-BG-color' ) ;
this . styleGraphGroup ( '#mainheadings' , 'MAIN-BG-color' ) ;
2022-11-22 19:54:17 +00:00
this . styleGraphGroup ( '#code' , 'CODE-BLOCK-BG-color' ) ;
2022-02-21 00:00:54 +00:00
this . styleGraphGroup ( '#inlinecode' , 'CODE-INLINE-BG-color' ) ;
this . styleGraphGroup ( '#blockcode' , 'CODE-BLOCK-BG-color' ) ;
2022-03-27 20:25:36 +00:00
this . styleGraphGroup ( '#thirdparty' , 'MAIN-BG-color' ) ;
2022-02-20 22:58:51 +00:00
this . styleGraphGroup ( '#coloredboxes' , 'BOX-BG-color' ) ;
2022-02-21 00:00:54 +00:00
this . styleGraphGroup ( '#menu' , 'MENU-SECTIONS-BG-color' ) ;
this . styleGraphGroup ( '#menuheader' , 'MENU-HEADER-BG-color' ) ;
this . styleGraphGroup ( '#menusections' , 'MENU-SECTIONS-ACTIVE-BG-color' ) ;
2022-02-20 22:58:51 +00:00
} ,
2022-02-20 23:46:42 +00:00
generateGraphGroupedEdge : function ( e ) {
2022-02-20 22:58:51 +00:00
var edge = '' ;
2022-02-20 23:46:42 +00:00
if ( e . fallback && e . group == this . findColor ( e . fallback ) . group ) {
2022-02-20 22:58:51 +00:00
edge += e . fallback + ':::' + e . fallback + ' --> ' + e . name + ':::' + e . name ;
}
else {
edge += e . name + ':::' + e . name ;
}
return edge ;
} ,
2022-02-20 23:46:42 +00:00
generateGraphVarGroupedEdge : function ( e ) {
var edge = '' ;
if ( e . fallback && e . group != this . findColor ( e . fallback ) . group ) {
2022-02-21 00:00:54 +00:00
edge += ' ' + e . fallback + ':::' + e . fallback + ' --> ' + e . name + ':::' + e . name + '\n' ;
2022-02-20 23:46:42 +00:00
}
return edge ;
} ,
2022-02-20 22:58:51 +00:00
generateGraph : function ( ) {
var g _groups = { } ;
var g _handler = '' ;
this . variantvariables . forEach ( function ( e ) {
var group = e . group || ' ' ;
g _groups [ group ] = ( g _groups [ group ] || [ ] ) . concat ( e ) ;
g _handler += ' click ' + e . name + ' variants.changeColor\n' ;
} ) ;
var graph =
'flowchart LR\n' +
' subgraph menu["menu"]\n' +
' direction TB\n' +
' subgraph menuheader["header"]\n' +
' direction LR\n' +
2022-02-20 23:46:42 +00:00
g _groups [ 'header' ] . reduce ( function ( a , e ) { return a + ' ' + this . generateGraphGroupedEdge ( e ) + '\n' ; } . bind ( this ) , '' ) +
2022-02-20 22:58:51 +00:00
' end\n' +
' subgraph menusections["sections"]\n' +
' direction LR\n' +
2022-02-20 23:46:42 +00:00
g _groups [ 'sections' ] . reduce ( function ( a , e ) { return a + ' ' + this . generateGraphGroupedEdge ( e ) + '\n' ; } . bind ( this ) , '' ) +
2022-02-20 22:58:51 +00:00
' end\n' +
' end\n' +
' subgraph maincontent["content"]\n' +
' direction TB\n' +
2022-02-20 23:46:42 +00:00
g _groups [ 'content' ] . reduce ( function ( a , e ) { return a + ' ' + this . generateGraphGroupedEdge ( e ) + '\n' ; } . bind ( this ) , '' ) +
2022-02-20 22:58:51 +00:00
' subgraph mainheadings["headings"]\n' +
' direction LR\n' +
2022-02-20 23:46:42 +00:00
g _groups [ 'headings' ] . reduce ( function ( a , e ) { return a + ' ' + this . generateGraphGroupedEdge ( e ) + '\n' ; } . bind ( this ) , '' ) +
2022-02-20 22:58:51 +00:00
' end\n' +
2022-11-22 19:54:17 +00:00
' subgraph code["code"]\n' +
' direction TB\n' +
g _groups [ 'code' ] . reduce ( function ( a , e ) { return a + ' ' + this . generateGraphGroupedEdge ( e ) + '\n' ; } . bind ( this ) , '' ) +
' subgraph inlinecode["inline code"]\n' +
' direction LR\n' +
g _groups [ 'inline code' ] . reduce ( function ( a , e ) { return a + ' ' + this . generateGraphGroupedEdge ( e ) + '\n' ; } . bind ( this ) , '' ) +
' end\n' +
' subgraph blockcode["code blocks"]\n' +
' direction LR\n' +
g _groups [ 'code blocks' ] . reduce ( function ( a , e ) { return a + ' ' + this . generateGraphGroupedEdge ( e ) + '\n' ; } . bind ( this ) , '' ) +
' end\n' +
2022-02-20 22:58:51 +00:00
' end\n' +
2022-03-27 20:25:36 +00:00
' subgraph thirdparty["3rd party"]\n' +
' direction LR\n' +
g _groups [ '3rd party' ] . reduce ( function ( a , e ) { return a + ' ' + this . generateGraphGroupedEdge ( e ) + '\n' ; } . bind ( this ) , '' ) +
' end\n' +
2022-02-20 22:58:51 +00:00
' subgraph coloredboxes["colored boxes"]\n' +
' direction LR\n' +
2022-02-20 23:46:42 +00:00
g _groups [ 'colored boxes' ] . reduce ( function ( a , e ) { return a + ' ' + this . generateGraphGroupedEdge ( e ) + '\n' ; } . bind ( this ) , '' ) +
2022-02-20 22:58:51 +00:00
' end\n' +
' end\n' +
2022-02-21 00:00:54 +00:00
this . variantvariables . reduce ( function ( a , e ) { return a + this . generateGraphVarGroupedEdge ( e ) ; } . bind ( this ) , '' ) +
2022-02-20 22:58:51 +00:00
g _handler ;
console . log ( graph ) ;
return graph ;
} ,
variantvariables : [
2022-05-22 22:01:22 +00:00
{ 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' , } ,
2022-12-02 19:45:52 +00:00
{ name : 'ACCENT-color' , group : 'content' , default : '#ffff00' , tooltip : 'brand accent color, used for search highlights' , } ,
2022-05-22 22:01:22 +00:00
2023-08-25 01:15:27 +00:00
{ name : 'MAIN-TOPBAR-BORDER-color' , group : 'content' , default : 'transparent' , tooltip : 'border color between topbar and content' , } ,
2022-05-22 22:01:22 +00:00
{ name : 'MAIN-LINK-color' , group : 'content' , fallback : 'SECONDARY-color' , tooltip : 'link color of content' , } ,
2022-02-20 22:58:51 +00:00
{ 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' , } ,
2022-05-22 22:01:22 +00:00
{ name : 'TAG-BG-color' , group : 'content' , fallback : 'PRIMARY-color' , tooltip : 'tag color' , } ,
2022-02-20 22:58:51 +00:00
2022-11-22 19:54:17 +00:00
{ 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' , } ,
2022-02-20 22:58:51 +00:00
{ name : 'MAIN-TITLES-H1-color' , group : 'headings' , fallback : 'MAIN-TEXT-color' , tooltip : 'text color of h1 titles' , } ,
{ name : 'MAIN-TITLES-H2-color' , group : 'headings' , fallback : 'MAIN-TITLES-TEXT-color' , tooltip : 'text color of h2-h6 titles' , } ,
{ name : 'MAIN-TITLES-H3-color' , group : 'headings' , fallback : 'MAIN-TITLES-H2-color' , tooltip : 'text color of h3-h6 titles' , } ,
{ name : 'MAIN-TITLES-H4-color' , group : 'headings' , fallback : 'MAIN-TITLES-H3-color' , tooltip : 'text color of h4-h6 titles' , } ,
{ name : 'MAIN-TITLES-H5-color' , group : 'headings' , fallback : 'MAIN-TITLES-H4-color' , tooltip : 'text color of h5-h6 titles' , } ,
{ name : 'MAIN-TITLES-H6-color' , group : 'headings' , fallback : 'MAIN-TITLES-H5-color' , tooltip : 'text color of h6 titles' , } ,
2022-03-27 20:25:36 +00:00
{ name : 'MAIN-font' , group : 'content' , default : '"Work Sans", "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif' , tooltip : 'text font of content and h1 titles' , } ,
{ name : 'MAIN-TITLES-TEXT-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-TEXT-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' , } ,
2022-02-20 22:58:51 +00:00
{ 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' , } ,
2022-02-22 19:38:41 +00:00
{ name : 'CODE-INLINE-BORDER-color' , group : 'inline code' , default : '#fbf0cb' , tooltip : 'border color of inline code' , } ,
2022-02-20 22:58:51 +00:00
2022-11-22 19:54:17 +00:00
{ name : 'CODE-font' , group : 'code' , default : '"Consolas", menlo, monospace' , tooltip : 'text font of code' , } ,
2022-03-27 20:25:36 +00:00
2023-02-26 11:48:34 +00:00
{ name : 'BROWSER-theme' , group : '3rd party' , default : 'light' , tooltip : 'name of the theme for browser scrollbars of the main section' , } ,
2022-03-27 20:25:36 +00:00
{ name : 'MERMAID-theme' , group : '3rd party' , default : 'default' , tooltip : 'name of the default Mermaid theme for this variant, can be overridden in config.toml' , } ,
2023-05-14 21:06:26 +00:00
{ name : 'OPENAPI-theme' , group : '3rd party' , default : 'light' , tooltip : 'name of the default OpenAPI theme for this variant, can be overridden in config.toml' , } ,
2023-08-13 11:18:37 +00:00
{ name : 'OPENAPI-CODE-theme' , group : '3rd party' , default : 'obsidian' , tooltip : 'name of the default OpenAPI code theme for this variant, can be overridden in config.toml' , } ,
2022-03-19 19:19:27 +00:00
2023-08-25 01:15:27 +00:00
{ name : 'MENU-BORDER-color' , group : 'header' , default : 'transparent' , tooltip : 'border color between menu and content' , } ,
{ name : 'MENU-TOPBAR-BORDER-color' , group : 'header' , fallback : 'MENU-HEADER-BG-color' , tooltip : 'border color of vertical line between menu and topbar' , } ,
{ name : 'MENU-TOPBAR-SEPARATOR-color' , group : 'header' , default : 'transparent' , tooltip : 'separator color of vertical line between menu and topbar' , } ,
2022-05-22 22:01:22 +00:00
{ name : 'MENU-HEADER-BG-color' , group : 'header' , fallback : 'PRIMARY-color' , tooltip : 'background color of menu header' , } ,
2023-08-25 01:15:27 +00:00
{ name : 'MENU-HEADER-BORDER-color' , group : 'header' , fallback : 'MENU-HEADER-BG-color' , tooltip : 'border color between menu header and menu' , } ,
{ name : 'MENU-HEADER-SEPARATOR-color' , group : 'header' , fallback : 'MENU-HEADER-BORDER-color' , tooltip : 'separator color between menu header and menu' , } ,
2022-02-20 22:58:51 +00:00
{ name : 'MENU-HOME-LINK-color' , group : 'header' , default : '#323232' , tooltip : 'home button color if configured' , } ,
{ name : 'MENU-HOME-LINK-HOVER-color' , group : 'header' , default : '#808080' , tooltip : 'hoverd home button color if configured' , } ,
{ name : 'MENU-SEARCH-color' , group : 'header' , default : '#e0e0e0' , tooltip : 'text and icon color of search box' , } ,
{ name : 'MENU-SEARCH-BG-color' , group : 'header' , default : '#323232' , tooltip : 'background color of search box' , } ,
2022-02-24 11:31:20 +00:00
{ name : 'MENU-SEARCH-BORDER-color' , group : 'header' , fallback : 'MENU-SEARCH-BG-color' , tooltip : 'border color of search box' , } ,
2022-02-20 22:58:51 +00:00
{ name : 'MENU-SECTIONS-BG-color' , group : 'sections' , default : '#282828' , tooltip : 'background of the menu; this is NOT just a color value but can be a complete CSS background definition including gradients, etc.' , } ,
{ name : 'MENU-SECTIONS-ACTIVE-BG-color' , group : 'sections' , default : 'rgba( 0, 0, 0, .166 )' , tooltip : 'background color of the active menu section' , } ,
{ name : 'MENU-SECTIONS-LINK-color' , group : 'sections' , default : '#bababa' , tooltip : 'link color of menu topics' , } ,
{ name : 'MENU-SECTIONS-LINK-HOVER-color' , group : 'sections' , fallback : 'MENU-SECTIONS-LINK-color' , tooltip : 'hoverd link color of menu topics' , } ,
2022-05-22 22:01:22 +00:00
{ name : 'MENU-SECTION-ACTIVE-CATEGORY-color' , group : 'sections' , default : '#444444' , tooltip : 'text color of the displayed menu topic' , } ,
{ name : 'MENU-SECTION-ACTIVE-CATEGORY-BG-color' , group : 'sections' , fallback : 'MAIN-BG-color' , tooltip : 'background color of the displayed menu topic' , } ,
2023-08-25 01:15:27 +00:00
{ name : 'MENU-SECTION-ACTIVE-CATEGORY-BORDER-color' , group : 'sections' , default : 'transparent' , tooltip : 'border color between the displayed menu topic and the content' , } ,
{ name : 'MENU-SECTION-SEPARATOR-color' , group : 'sections' , default : '#606060' , tooltip : 'separator color between menu sections and menu footer' , } ,
2022-05-22 22:01:22 +00:00
{ name : 'MENU-VISITED-color' , group : 'sections' , fallback : 'SECONDARY-color' , tooltip : 'icon color of visited menu topics if configured' , } ,
2022-02-20 22:58:51 +00:00
{ name : 'BOX-CAPTION-color' , group : 'colored boxes' , default : 'rgba( 255, 255, 255, 1 )' , tooltip : 'text color of colored box titles' , } ,
{ name : 'BOX-BG-color' , group : 'colored boxes' , default : 'rgba( 255, 255, 255, .833 )' , tooltip : 'background color of colored boxes' , } ,
2022-11-22 19:54:17 +00:00
{ name : 'BOX-TEXT-color' , group : 'colored boxes' , fallback : 'MAIN-TEXT-color' , tooltip : 'text color of colored box content' , } ,
2022-02-20 22:58:51 +00:00
{ name : 'BOX-BLUE-color' , group : 'colored boxes' , default : 'rgba( 48, 117, 229, 1 )' , tooltip : 'background color of blue boxes' , } ,
{ name : 'BOX-INFO-color' , group : 'colored boxes' , fallback : 'BOX-BLUE-color' , tooltip : 'background color of info boxes' , } ,
{ name : 'BOX-BLUE-TEXT-color' , group : 'colored boxes' , fallback : 'BOX-TEXT-color' , tooltip : 'text color of blue boxes' , } ,
{ name : 'BOX-INFO-TEXT-color' , group : 'colored boxes' , fallback : 'BOX-BLUE-TEXT-color' , tooltip : 'text color of info boxes' , } ,
{ name : 'BOX-GREEN-color' , group : 'colored boxes' , default : 'rgba( 42, 178, 24, 1 )' , tooltip : 'background color of green boxes' , } ,
{ name : 'BOX-TIP-color' , group : 'colored boxes' , fallback : 'BOX-GREEN-color' , tooltip : 'background color of tip boxes' , } ,
{ name : 'BOX-GREEN-TEXT-color' , group : 'colored boxes' , fallback : 'BOX-TEXT-color' , tooltip : 'text color of green boxes' , } ,
{ name : 'BOX-TIP-TEXT-color' , group : 'colored boxes' , fallback : 'BOX-GREEN-TEXT-color' , tooltip : 'text color of tip boxes' , } ,
{ name : 'BOX-GREY-color' , group : 'colored boxes' , default : 'rgba( 128, 128, 128, 1 )' , tooltip : 'background color of grey boxes' , } ,
{ name : 'BOX-NEUTRAL-color' , group : 'colored boxes' , fallback : 'BOX-GREY-color' , tooltip : 'background color of neutral boxes' , } ,
{ name : 'BOX-GREY-TEXT-color' , group : 'colored boxes' , fallback : 'BOX-TEXT-color' , tooltip : 'text color of grey boxes' , } ,
{ name : 'BOX-NEUTRAL-TEXT-color' , group : 'colored boxes' , fallback : 'BOX-GREY-TEXT-color' , tooltip : 'text color of neutral boxes' , } ,
{ name : 'BOX-ORANGE-color' , group : 'colored boxes' , default : 'rgba( 237, 153, 9, 1 )' , tooltip : 'background color of orange boxes' , } ,
{ name : 'BOX-NOTE-color' , group : 'colored boxes' , fallback : 'BOX-ORANGE-color' , tooltip : 'background color of note boxes' , } ,
{ name : 'BOX-ORANGE-TEXT-color' , group : 'colored boxes' , fallback : 'BOX-TEXT-color' , tooltip : 'text color of orange boxes' , } ,
{ name : 'BOX-NOTE-TEXT-color' , group : 'colored boxes' , fallback : 'BOX-ORANGE-TEXT-color' , tooltip : 'text color of note boxes' , } ,
{ name : 'BOX-RED-color' , group : 'colored boxes' , default : 'rgba( 224, 62, 62, 1 )' , tooltip : 'background color of red boxes' , } ,
{ name : 'BOX-WARNING-color' , group : 'colored boxes' , fallback : 'BOX-RED-color' , tooltip : 'background color of warning boxes' , } ,
{ name : 'BOX-RED-TEXT-color' , group : 'colored boxes' , fallback : 'BOX-TEXT-color' , tooltip : 'text color of red boxes' , } ,
{ name : 'BOX-WARNING-TEXT-color' , group : 'colored boxes' , fallback : 'BOX-RED-TEXT-color' , tooltip : 'text color of warning boxes' , } ,
2022-02-22 19:38:41 +00:00
] ,
2022-02-20 22:58:51 +00:00
} ;
