mirror of
https://github.com/marcriera/ddgo-controller-docs.git
synced 2025-07-01 07:51:55 +02:00
deploy: 13edcf14d1
This commit is contained in:
MarcRiera
commit
e31963e3c6
102 changed files with 20075 additions and 0 deletions
255
js/auto-complete.js
Normal file
255
js/auto-complete.js
Normal file
|
|
@ -0,0 +1,255 @@
|
|||
/*
|
||||
JavaScript autoComplete v1.0.4
|
||||
#46 - positioning
|
||||
#75 - complete
|
||||
McShelby/hugo-theme-relearn#155
|
||||
Copyright (c) 2014 Simon Steinberger / Pixabay
|
||||
GitHub: https://github.com/Pixabay/JavaScript-autoComplete
|
||||
License: http://www.opensource.org/licenses/mit-license.php
|
||||
*/
|
||||
|
||||
var autoComplete = (function(){
|
||||
// "use strict";
|
||||
function autoComplete(options){
|
||||
if (!document.querySelector) return;
|
||||
|
||||
// helpers
|
||||
function hasClass(el, className){ return el.classList ? el.classList.contains(className) : new RegExp('\\b'+ className+'\\b').test(el.className); }
|
||||
|
||||
function addEvent(el, type, handler){
|
||||
if (el.attachEvent) el.attachEvent('on'+type, handler); else el.addEventListener(type, handler);
|
||||
}
|
||||
function removeEvent(el, type, handler){
|
||||
// if (el.removeEventListener) not working in IE11
|
||||
if (el.detachEvent) el.detachEvent('on'+type, handler); else el.removeEventListener(type, handler);
|
||||
}
|
||||
function live(elClass, event, cb, context){
|
||||
addEvent(context || document, event, function(e){
|
||||
var found, el = e.target || e.srcElement;
|
||||
while (el && !(found = hasClass(el, elClass))) el = el.parentElement;
|
||||
if (found) cb.call(el, e);
|
||||
});
|
||||
}
|
||||
|
||||
var o = {
|
||||
selector: 0,
|
||||
source: 0,
|
||||
minChars: 3,
|
||||
delay: 150,
|
||||
offsetLeft: 0,
|
||||
offsetTop: 1,
|
||||
cache: 1,
|
||||
menuClass: '',
|
||||
selectorToInsert: 0,
|
||||
renderItem: function (item, search){
|
||||
// escape special characters
|
||||
search = search.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&');
|
||||
var re = new RegExp("(" + search.split(' ').join('|') + ")", "gi");
|
||||
return '<div class="autocomplete-suggestion" data-val="' + item + '">' + item.replace(re, "<b>$1</b>") + '</div>';
|
||||
},
|
||||
onSelect: function(e, term, item){}
|
||||
};
|
||||
for (var k in options) { if (options.hasOwnProperty(k)) o[k] = options[k]; }
|
||||
|
||||
// init
|
||||
var elems = typeof o.selector == 'object' ? [o.selector] : document.querySelectorAll(o.selector);
|
||||
for (var i=0; i<elems.length; i++) {
|
||||
var that = elems[i];
|
||||
|
||||
// create suggestions container "sc"
|
||||
that.sc = document.createElement('div');
|
||||
that.sc.className = 'autocomplete-suggestions '+o.menuClass;
|
||||
|
||||
that.autocompleteAttr = that.getAttribute('autocomplete');
|
||||
that.setAttribute('autocomplete', 'off');
|
||||
that.cache = {};
|
||||
that.last_val = '';
|
||||
|
||||
var parentElement;
|
||||
if (typeof o.selectorToInsert === "string" && document.querySelector(o.selectorToInsert) instanceof HTMLElement) {
|
||||
parentElement = document.querySelector(o.selectorToInsert);
|
||||
}
|
||||
that.updateSC = function(resize, next){
|
||||
var rect = that.getBoundingClientRect();
|
||||
var parentOffsetLeft = 0;
|
||||
var parentOffsetTop = 0;
|
||||
var pageXOffset = 0;
|
||||
var pageYOffset = 0;
|
||||
if (parentElement != false) {
|
||||
parentOffsetLeft = parentElement.getBoundingClientRect().left;
|
||||
parentOffsetTop = parentElement.getBoundingClientRect().top;
|
||||
} else {
|
||||
pageXOffset = window.pageXOffset || document.documentElement.scrollLeft;
|
||||
pageYOffset = window.pageYOffset || document.documentElement.scrollTop;
|
||||
}
|
||||
that.sc.style.left = Math.round(rect.left + pageXOffset + o.offsetLeft - parentOffsetLeft) + 'px';
|
||||
that.sc.style.top = Math.round(rect.bottom + pageYOffset + o.offsetTop - parentOffsetTop) + 'px';
|
||||
that.sc.style.width = Math.round(rect.right - rect.left) + 'px'; // outerWidth
|
||||
if (!resize) {
|
||||
that.sc.style.display = 'block';
|
||||
if (!that.sc.maxHeight) { that.sc.maxHeight = parseInt((window.getComputedStyle ? getComputedStyle(that.sc, null) : that.sc.currentStyle).maxHeight); }
|
||||
if (!that.sc.suggestionHeight) that.sc.suggestionHeight = that.sc.querySelector('.autocomplete-suggestion').offsetHeight;
|
||||
if (that.sc.suggestionHeight)
|
||||
if (!next) that.sc.scrollTop = 0;
|
||||
else {
|
||||
var scrTop = that.sc.scrollTop, selTop = next.getBoundingClientRect().top - that.sc.getBoundingClientRect().top;
|
||||
if (selTop + that.sc.suggestionHeight - that.sc.maxHeight > 0)
|
||||
that.sc.scrollTop = selTop + that.sc.suggestionHeight + scrTop - that.sc.maxHeight;
|
||||
else if (selTop < 0)
|
||||
that.sc.scrollTop = selTop + scrTop;
|
||||
}
|
||||
}
|
||||
}
|
||||
addEvent(window, 'resize', that.updateSC);
|
||||
|
||||
if (typeof o.selectorToInsert === "string" && document.querySelector(o.selectorToInsert) instanceof HTMLElement) {
|
||||
document.querySelector(o.selectorToInsert).appendChild(that.sc);
|
||||
} else {
|
||||
document.body.appendChild(that.sc);
|
||||
}
|
||||
|
||||
live('autocomplete-suggestion', 'mouseleave', function(e){
|
||||
var sel = that.sc.querySelector('.autocomplete-suggestion.selected');
|
||||
if (sel) setTimeout(function(){ sel.className = sel.className.replace('selected', ''); }, 20);
|
||||
}, that.sc);
|
||||
|
||||
live('autocomplete-suggestion', 'mouseover', function(e){
|
||||
var sel = that.sc.querySelector('.autocomplete-suggestion.selected');
|
||||
if (sel) sel.className = sel.className.replace('selected', '');
|
||||
this.className += ' selected';
|
||||
}, that.sc);
|
||||
|
||||
live('autocomplete-suggestion', 'mousedown', function(e){
|
||||
if (hasClass(this, 'autocomplete-suggestion')) { // else outside click
|
||||
var v = this.getAttribute('data-val');
|
||||
that.value = v;
|
||||
o.onSelect(e, v, this);
|
||||
that.sc.style.display = 'none';
|
||||
}
|
||||
}, that.sc);
|
||||
|
||||
that.blurHandler = function(){
|
||||
try { var over_sb = document.querySelector('.autocomplete-suggestions:hover'); } catch(e){ var over_sb = 0; }
|
||||
if (!over_sb) {
|
||||
that.last_val = that.value;
|
||||
that.sc.style.display = 'none';
|
||||
setTimeout(function(){ that.sc.style.display = 'none'; }, 350); // hide suggestions on fast input
|
||||
} else if (that !== document.activeElement) setTimeout(function(){ that.focus(); }, 20);
|
||||
};
|
||||
addEvent(that, 'blur', that.blurHandler);
|
||||
|
||||
var suggest = function(data){
|
||||
var val = that.value;
|
||||
that.cache[val] = data;
|
||||
if (data.length && val.length >= o.minChars) {
|
||||
var s = '';
|
||||
for (var i=0;i<data.length;i++) s += o.renderItem(data[i], val);
|
||||
that.sc.innerHTML = s;
|
||||
that.updateSC(0);
|
||||
}
|
||||
else
|
||||
that.sc.style.display = 'none';
|
||||
}
|
||||
|
||||
that.keydownHandler = function(e){
|
||||
var key = window.event ? e.keyCode : e.which;
|
||||
// down (40), up (38)
|
||||
if ((key == 40 || key == 38) && that.sc.innerHTML) {
|
||||
var next, sel = that.sc.querySelector('.autocomplete-suggestion.selected');
|
||||
if (!sel) {
|
||||
next = (key == 40) ? that.sc.querySelector('.autocomplete-suggestion') : that.sc.childNodes[that.sc.childNodes.length - 1]; // first : last
|
||||
next.className += ' selected';
|
||||
that.value = next.getAttribute('data-val');
|
||||
} else {
|
||||
next = (key == 40) ? sel.nextSibling : sel.previousSibling;
|
||||
if (next) {
|
||||
sel.className = sel.className.replace('selected', '');
|
||||
next.className += ' selected';
|
||||
that.value = next.getAttribute('data-val');
|
||||
}
|
||||
else { sel.className = sel.className.replace('selected', ''); that.value = that.last_val; next = 0; }
|
||||
}
|
||||
that.updateSC(0, next);
|
||||
return false;
|
||||
}
|
||||
// esc
|
||||
else if (key == 27) { that.value = that.last_val; that.sc.style.display = 'none'; }
|
||||
// enter
|
||||
else if (key == 13 || key == 9) {
|
||||
var sel = that.sc.querySelector('.autocomplete-suggestion.selected');
|
||||
if (sel && that.sc.style.display != 'none') { o.onSelect(e, sel.getAttribute('data-val'), sel); setTimeout(function(){ that.sc.style.display = 'none'; }, 20); }
|
||||
}
|
||||
};
|
||||
addEvent(that, 'keydown', that.keydownHandler);
|
||||
|
||||
that.keyupHandler = function(e){
|
||||
var key = window.event ? e.keyCode : e.which;
|
||||
if (!key || (key < 35 || key > 40) && key != 13 && key != 27) {
|
||||
var val = that.value;
|
||||
if (val.length >= o.minChars) {
|
||||
if (val != that.last_val) {
|
||||
that.last_val = val;
|
||||
clearTimeout(that.timer);
|
||||
if (o.cache) {
|
||||
if (val in that.cache) { suggest(that.cache[val]); return; }
|
||||
// no requests if previous suggestions were empty
|
||||
for (var i=1; i<val.length-o.minChars; i++) {
|
||||
var part = val.slice(0, val.length-i);
|
||||
if (part in that.cache && !that.cache[part].length) { suggest([]); return; }
|
||||
}
|
||||
}
|
||||
that.timer = setTimeout(function(){ o.source(val, suggest) }, o.delay);
|
||||
}
|
||||
} else {
|
||||
that.last_val = val;
|
||||
that.sc.style.display = 'none';
|
||||
}
|
||||
}
|
||||
};
|
||||
addEvent(that, 'keyup', that.keyupHandler);
|
||||
|
||||
that.focusHandler = function(e){
|
||||
that.last_val = '\n';
|
||||
that.keyupHandler(e)
|
||||
};
|
||||
if (!o.minChars) addEvent(that, 'focus', that.focusHandler);
|
||||
}
|
||||
|
||||
// public destroy method
|
||||
this.destroy = function(){
|
||||
for (var i=0; i<elems.length; i++) {
|
||||
var that = elems[i];
|
||||
removeEvent(window, 'resize', that.updateSC);
|
||||
removeEvent(that, 'blur', that.blurHandler);
|
||||
removeEvent(that, 'focus', that.focusHandler);
|
||||
removeEvent(that, 'keydown', that.keydownHandler);
|
||||
removeEvent(that, 'keyup', that.keyupHandler);
|
||||
if (that.autocompleteAttr)
|
||||
that.setAttribute('autocomplete', that.autocompleteAttr);
|
||||
else
|
||||
that.removeAttribute('autocomplete');
|
||||
try {
|
||||
if (o.selectorToInsert && document.querySelector(o.selectorToInsert).contains(that.sc)) {
|
||||
document.querySelector(o.selectorToInsert).removeChild(that.sc);
|
||||
} else {
|
||||
document.body.removeChild(that.sc);
|
||||
}
|
||||
} catch (error) {
|
||||
console.log('Destroying error: can\'t find target selector', error);
|
||||
throw error;
|
||||
}
|
||||
that = null;
|
||||
}
|
||||
};
|
||||
}
|
||||
return autoComplete;
|
||||
})();
|
||||
|
||||
(function(){
|
||||
if (typeof define === 'function' && define.amd)
|
||||
define('autoComplete', function () { return autoComplete; });
|
||||
else if (typeof module !== 'undefined' && module.exports)
|
||||
module.exports = autoComplete;
|
||||
else
|
||||
window.autoComplete = autoComplete;
|
||||
})();
|
||||
7
js/clipboard.min.js
vendored
Normal file
7
js/clipboard.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
9
js/featherlight.min.js
vendored
Normal file
9
js/featherlight.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
2
js/jquery.min.js
vendored
Normal file
2
js/jquery.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
642
js/jquery.svg.pan.zoom.js
Normal file
642
js/jquery.svg.pan.zoom.js
Normal file
|
|
@ -0,0 +1,642 @@
|
|||
// Generated by CoffeeScript 1.10.0
|
||||
|
||||
/*
|
||||
Base: jQuery SVG Pan Zoom v1.0.3, October 2015 (labeled v1.0.2, June 2015)
|
||||
McShelby.hugo-theme-relearn:
|
||||
Change 1: OnMouseUp restore image cursor (not document cursor)
|
||||
Change 2: add PR #18
|
||||
Change 3: remove default limits enlargement of 15% as image can not be restored to initial size by zooming out only
|
||||
|
||||
|
||||
Author: Daniel Hoffmann Bernardes (daniel.hoffmann.bernardes@gmail.com)
|
||||
|
||||
Repository: https://github.com/DanielHoffmann/jquery-svg-pan-zoom/
|
||||
|
||||
jQuery plugin to enable pan and zoom in SVG images either programmatically or through mouse/touch events.
|
||||
|
||||
[Demo page](http://danielhoffmann.github.io/jquery-svg-pan-zoom/)
|
||||
|
||||
* Features
|
||||
- Programmatically manipulate the SVG viewBox
|
||||
- Mouse and touch events to pan the SVG viewBox
|
||||
- Mousewheel events to zoom in or out the SVG viewBox
|
||||
- Animations
|
||||
- Mousewheel zooming keeps the cursor over the same coordinates relative to the image (A.K.A. GoogleMaps-like zoom)
|
||||
- Limiting the navigable area
|
||||
|
||||
* Requirements
|
||||
|
||||
jQuery
|
||||
|
||||
SVG-enabled browser (does not work with SVG work-arounds that use Flash)
|
||||
|
||||
* The viewBox
|
||||
The viewBox is an attribute of SVG images that defines the area of the SVG that is visible, it is defined by 4 numbers: X, Y, Width, Height. These numbers together specify the visible area. This plugin works by manipulating these four numbers. For example, moving the image to the right alters the X value while zooming in reduces Width and Height.
|
||||
|
||||
|
||||
* Usage
|
||||
```javascript
|
||||
var svgPanZoom= $("svg").svgPanZoom(options)
|
||||
```
|
||||
|
||||
If the selection has more than one element `svgPanZoom` will return an array with a SvgPanZoom object for each image in the same order of the selection. If only one element is selected then the return is a single SvgPanZoom object. If no elements are selected the above call returns `null`
|
||||
|
||||
The returned SvgPanZoom object contains all options, these options can be overriden at any time directly, for example to disable mouseWheel events simply:
|
||||
|
||||
```javascript
|
||||
svgPanZoom.events.mouseWheel= false
|
||||
```
|
||||
|
||||
|
||||
the SvgPanZoom object also has methods for manipulating the viewBox programmatically. For example:
|
||||
|
||||
```javascript
|
||||
svgPanZoom.zoomIn()
|
||||
```
|
||||
|
||||
will zoomIn the image using options.zoomFactor.
|
||||
|
||||
* Building
|
||||
This project requires coffeescript to be installed in order to build.
|
||||
|
||||
`coffee -m --compile --output compiled/ src/`
|
||||
|
||||
* Options
|
||||
|
||||
```javascript
|
||||
Options:
|
||||
{
|
||||
events: {
|
||||
mouseWheel: boolean (true), // enables mouse wheel zooming events
|
||||
doubleClick: boolean (true), // enables double-click to zoom-in events
|
||||
drag: boolean (true), // enables drag and drop to move the SVG events
|
||||
dragCursor: string "move" // cursor to use while dragging the SVG
|
||||
},
|
||||
animationTime: number (300), // time in milliseconds to use as default for animations. Set 0 to remove the animation
|
||||
zoomFactor: number (0.25), // how much to zoom-in or zoom-out
|
||||
maxZoom: number (3), //maximum zoom in, must be a number bigger than 1
|
||||
panFactor: (number (100), // how much to move the viewBox when calling .panDirection() methods
|
||||
initialViewBox: { // the initial viewBox, if null or undefined will try to use the viewBox set in the svg tag. Also accepts string in the format "X Y Width Height"
|
||||
x: number (0) // the top-left corner X coordinate
|
||||
y: number (0) // the top-left corner Y coordinate
|
||||
width: number (1000) // the width of the viewBox
|
||||
height: number (1000) // the height of the viewBox
|
||||
},
|
||||
limits: { // the limits in which the image can be moved. If null or undefined will use the initialViewBox plus 15% in each direction
|
||||
x: number (-150)
|
||||
y: number (-150)
|
||||
x2: number (1150)
|
||||
y2: number (1150)
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
* Methods
|
||||
|
||||
- pan
|
||||
|
||||
```javascript
|
||||
svgPanZoom.panLeft(amount, animationTime)
|
||||
svgPanZoom.panRight(amount, animationTime)
|
||||
svgPanZoom.panUp(amount, animationTime)
|
||||
svgPanZoom.panDown(amount, animationTime)
|
||||
```
|
||||
|
||||
Moves the SVG viewBox in the specified direction. Parameters:
|
||||
- amount: Number, optional. How much to move the viewBox, defaults to options.panFactor.
|
||||
- animationTime: Number, optional. How long the animation should last, defaults to options.animationTime.
|
||||
|
||||
|
||||
- zoom
|
||||
|
||||
```javascript
|
||||
svgPanZoom.zoomIn(animationTime)
|
||||
svgPanZoom.zoomOut(animationTime)
|
||||
```
|
||||
|
||||
Zooms the viewBox. Parameters:
|
||||
- animationTime: Number, optional. How long the animation should last, defaults to options.animationTime.
|
||||
|
||||
|
||||
- reset
|
||||
|
||||
```javascript
|
||||
svgPanZoom.reset()
|
||||
```
|
||||
|
||||
Resets the SVG to options.initialViewBox values.
|
||||
|
||||
- getViewBox
|
||||
|
||||
```javascript
|
||||
svgPanZoom.getViewBox()
|
||||
```
|
||||
|
||||
Returns the viewbox in this format:
|
||||
|
||||
```javascript
|
||||
{
|
||||
x: number
|
||||
y: number
|
||||
width: number
|
||||
height: number
|
||||
}
|
||||
```
|
||||
|
||||
- setViewBox
|
||||
|
||||
```javascript
|
||||
svgPanZoom.setViewBox(x, y, width, height, animationTime)
|
||||
```
|
||||
|
||||
Changes the viewBox to the specified coordinates. Will respect the `options.limits` adapting the viewBox if needed (moving or reducing it to fit into `options.limits`
|
||||
- x: Number, the new x coodinate of the top-left corner
|
||||
- y: Number, the new y coodinate of the top-left corner
|
||||
- width: Number, the new width of the viewBox
|
||||
- height: Number, the new height of the viewBox
|
||||
- animationTime: Number, optional. How long the animation should last, defaults to options.animationTime.
|
||||
|
||||
- setCenter
|
||||
|
||||
```javascript
|
||||
svgPanZoom.setCenter(x, y, animationTime)
|
||||
```
|
||||
|
||||
Sets the center of the SVG. Parameters:
|
||||
- x: Number, the new x coordinate of the center
|
||||
- y: Number, the new y coordinate of the center
|
||||
- animationTime: Number, optional. How long the animation should last, defaults to options.animationTime.
|
||||
|
||||
|
||||
|
||||
|
||||
* Notes:
|
||||
|
||||
- Only works in SVGs inlined in the HTML. You can use $.load() to load the SVG image in the page using AJAX and call $().svgPanZoom() in the callback
|
||||
- Touch pinch events to zoom not yet supported
|
||||
- This plugin does not create any controls (like arrows to move the image) on top of the SVG. These controls are simple to create manually and they can call the methods to move the image.
|
||||
- Do not manipulate the SVG viewBox attribute manually, use SvgPanZoom.setViewBox() instead
|
||||
|
||||
Copyright (C) 2014 Daniel Hoffmann Bernardes, Ícaro Technologies
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
|
||||
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
|
||||
*/
|
||||
|
||||
(function() {
|
||||
var hasProp = {}.hasOwnProperty;
|
||||
|
||||
(function($) {
|
||||
var checkLimits, defaultOptions, defaultViewBox, getViewBoxCoordinatesFromEvent, parseViewBoxString;
|
||||
defaultOptions = {
|
||||
events: {
|
||||
mouseWheel: true,
|
||||
doubleClick: true,
|
||||
drag: true,
|
||||
dragCursor: "move"
|
||||
},
|
||||
animationTime: 300,
|
||||
zoomFactor: 0.25,
|
||||
maxZoom: 3,
|
||||
panFactor: 100,
|
||||
initialViewBox: null,
|
||||
limits: null
|
||||
};
|
||||
defaultViewBox = {
|
||||
x: 0,
|
||||
y: 0,
|
||||
width: 1000,
|
||||
height: 1000
|
||||
};
|
||||
|
||||
/**
|
||||
* Check the limits of the view box, return a new viewBox that respects the limits while keeping
|
||||
* the original view box size if possible. If the view box needs to be reduced, the returned view
|
||||
* box will keep the aspect ratio of the original view box.
|
||||
*
|
||||
* @param {Object} viewBox
|
||||
* The original view box. Takes numbers, in the format `{x, y, width, height}`.
|
||||
*
|
||||
* @param {Object} limits
|
||||
* Extents which can be shown, in the view box coordinate system. Takes numbers in the format
|
||||
* `{x, y, x2, y2}`.
|
||||
*
|
||||
* @return {Object} viewBox
|
||||
* A new view box object, squeezed into the limits. Contains numbers, in the format `{x, y,
|
||||
* width, height}`.
|
||||
*/
|
||||
checkLimits = function(viewBox, limits) {
|
||||
var limitsHeight, limitsWidth, reductionFactor, vb;
|
||||
vb = $.extend({}, viewBox);
|
||||
limitsWidth = Math.abs(limits.x2 - limits.x);
|
||||
limitsHeight = Math.abs(limits.y2 - limits.y);
|
||||
if (vb.width > limitsWidth) {
|
||||
if (vb.height > limitsHeight) {
|
||||
if (limitsWidth > limitsHeight) {
|
||||
reductionFactor = limitsHeight / vb.height;
|
||||
vb.height = limitsHeight;
|
||||
vb.width = vb.width * reductionFactor;
|
||||
} else {
|
||||
reductionFactor = limitsWidth / vb.width;
|
||||
vb.width = limitsWidth;
|
||||
vb.height = vb.height * reductionFactor;
|
||||
}
|
||||
} else {
|
||||
reductionFactor = limitsWidth / vb.width;
|
||||
vb.width = limitsWidth;
|
||||
vb.height = vb.height * reductionFactor;
|
||||
}
|
||||
} else if (vb.height > limitsHeight) {
|
||||
reductionFactor = limitsHeight / vb.height;
|
||||
vb.height = limitsHeight;
|
||||
vb.width = vb.width * reductionFactor;
|
||||
}
|
||||
if (vb.x < limits.x) {
|
||||
vb.x = limits.x;
|
||||
}
|
||||
if (vb.y < limits.y) {
|
||||
vb.y = limits.y;
|
||||
}
|
||||
if (vb.x + vb.width > limits.x2) {
|
||||
vb.x = limits.x2 - vb.width;
|
||||
}
|
||||
if (vb.y + vb.height > limits.y2) {
|
||||
vb.y = limits.y2 - vb.height;
|
||||
}
|
||||
return vb;
|
||||
};
|
||||
|
||||
/**
|
||||
* Parse the viewbox string as defined in the spec for the svg tag.
|
||||
*
|
||||
* @param {String} viewBoxString
|
||||
* A valid value of the `viewBox` attribute.
|
||||
*
|
||||
* @return {Object} viewBox
|
||||
* A view box object. Contains numbers, in the format `{x, y, width, height}`.
|
||||
*/
|
||||
parseViewBoxString = function(string) {
|
||||
var vb;
|
||||
vb = string.replace("\s+", " ").split(" ");
|
||||
return vb = {
|
||||
x: parseFloat(vb[0]),
|
||||
y: parseFloat(vb[1]),
|
||||
width: parseFloat(vb[2]),
|
||||
height: parseFloat(vb[3])
|
||||
};
|
||||
};
|
||||
|
||||
/**
|
||||
* Get the mouse or first touch position from the `event`, relative to the SVG viewBox.
|
||||
*
|
||||
* @param {SVGElement} svgRoot
|
||||
* The `<svg>` DOM object
|
||||
*
|
||||
* @param {MouseEvent|TouchEvent|jQueryEvent} event
|
||||
* The DOM or jQuery event.
|
||||
*
|
||||
* @return {Object}
|
||||
* Coordinates of the event. Contains numbers, in the format `{x, y}`.
|
||||
*/
|
||||
getViewBoxCoordinatesFromEvent = function(svgRoot, event) {
|
||||
var ctm, foo, pos;
|
||||
foo = {
|
||||
x: null,
|
||||
y: null
|
||||
};
|
||||
if (event.type === "touchstart" || event.type === "touchmove") {
|
||||
if ((event.originalEvent != null) && (event.touches == null)) {
|
||||
foo.x = event.originalEvent.touches[0].clientX;
|
||||
foo.y = event.originalEvent.touches[0].clientY;
|
||||
} else {
|
||||
foo.x = event.touches[0].clientX;
|
||||
foo.y = event.touches[0].clientY;
|
||||
}
|
||||
} else {
|
||||
if (event.clientX != null) {
|
||||
foo.x = event.clientX;
|
||||
foo.y = event.clientY;
|
||||
} else {
|
||||
foo.x = event.originalEvent.clientX;
|
||||
foo.y = event.originalEvent.clientY;
|
||||
}
|
||||
}
|
||||
pos = svgRoot.createSVGPoint();
|
||||
pos.x = parseInt(foo.x, 10);
|
||||
pos.y = parseInt(foo.y, 10);
|
||||
ctm = svgRoot.getScreenCTM();
|
||||
ctm = ctm.inverse();
|
||||
pos = pos.matrixTransform(ctm);
|
||||
return pos;
|
||||
};
|
||||
return $.fn.svgPanZoom = function(options) {
|
||||
var ret;
|
||||
ret = [];
|
||||
this.each(function() {
|
||||
var $animationDiv, dragStarted, horizontalSizeIncrement, key, opts, preventClick, value, vb, verticalSizeIncrement, viewBox;
|
||||
opts = $.extend(true, {}, defaultOptions, options);
|
||||
opts.$svg = $(this);
|
||||
if (opts.animationTime == null) {
|
||||
opts.animationTime = 0;
|
||||
}
|
||||
opts.$svg[0].setAttribute("preserveAspectRatio", "xMidYMid meet");
|
||||
vb = $.extend({}, this.viewBox.baseVal);
|
||||
if (vb.x == null) {
|
||||
vb.x = 0;
|
||||
}
|
||||
if (vb.y == null) {
|
||||
vb.y = 0;
|
||||
}
|
||||
if (vb.width == null) {
|
||||
vb.width = 0;
|
||||
}
|
||||
if (vb.height == null) {
|
||||
vb.height = 0;
|
||||
}
|
||||
if (opts.initialViewBox != null) {
|
||||
if (typeof opts.initialViewBox === "string") {
|
||||
vb = parseViewBoxString(opts.initialViewBox);
|
||||
} else if (typeof opts.initialViewBox === "object") {
|
||||
vb = $.extend({}, defaultViewBox, opts.initialViewBox);
|
||||
} else {
|
||||
throw "initialViewBox is of invalid type";
|
||||
}
|
||||
} else if (vb.x === 0 && vb.y === 0 && vb.width === 0 && vb.height === 0) {
|
||||
vb = defaultViewBox;
|
||||
}
|
||||
viewBox = vb;
|
||||
opts.initialViewBox = $.extend({}, viewBox);
|
||||
if (opts.limits == null) {
|
||||
horizontalSizeIncrement = viewBox.width * 0.15;
|
||||
verticalSizeIncrement = viewBox.height * 0.15;
|
||||
opts.limits = {
|
||||
x: viewBox.x,
|
||||
y: viewBox.y,
|
||||
x2: viewBox.x + viewBox.width,
|
||||
y2: viewBox.y + viewBox.height
|
||||
};
|
||||
}
|
||||
opts.reset = function() {
|
||||
var inivb;
|
||||
inivb = this.initialViewBox;
|
||||
this.setViewBox(inivb.x, inivb.y, inivb.width, inivb.height, 0);
|
||||
};
|
||||
opts.getViewBox = function() {
|
||||
return $.extend({}, viewBox);
|
||||
};
|
||||
$animationDiv = $("<div></div>");
|
||||
opts.setViewBox = function(x, y, width, height, animationTime) {
|
||||
if (animationTime == null) {
|
||||
animationTime = this.animationTime;
|
||||
}
|
||||
if (animationTime > 0) {
|
||||
$animationDiv.css({
|
||||
left: viewBox.x + "px",
|
||||
top: viewBox.y + "px",
|
||||
width: viewBox.width + "px",
|
||||
height: viewBox.height + "px"
|
||||
});
|
||||
}
|
||||
viewBox = {
|
||||
x: x != null ? x : viewBox.x,
|
||||
y: y != null ? y : viewBox.y,
|
||||
width: width ? width : viewBox.width,
|
||||
height: height ? height : viewBox.height
|
||||
};
|
||||
viewBox = checkLimits(viewBox, this.limits);
|
||||
if (animationTime > 0) {
|
||||
$animationDiv.stop().animate({
|
||||
left: viewBox.x,
|
||||
top: viewBox.y,
|
||||
width: viewBox.width,
|
||||
height: viewBox.height
|
||||
}, {
|
||||
duration: animationTime,
|
||||
easing: "linear",
|
||||
step: (function(value, properties) {
|
||||
var $div;
|
||||
$div = $animationDiv;
|
||||
this.$svg[0].setAttribute("viewBox", ($div.css("left").slice(0, -2)) + " " + ($div.css("top").slice(0, -2)) + " " + ($div.css("width").slice(0, -2)) + " " + ($div.css("height").slice(0, -2)));
|
||||
}).bind(this)
|
||||
});
|
||||
} else {
|
||||
this.$svg[0].setAttribute("viewBox", viewBox.x + " " + viewBox.y + " " + viewBox.width + " " + viewBox.height);
|
||||
}
|
||||
};
|
||||
opts.panLeft = function(amount, animationTime) {
|
||||
if (amount == null) {
|
||||
amount = this.panFactor;
|
||||
}
|
||||
if (animationTime == null) {
|
||||
animationTime = this.animationTime;
|
||||
}
|
||||
this.panRight(-amount, animationTime);
|
||||
};
|
||||
opts.panRight = function(amount, animationTime) {
|
||||
if (amount == null) {
|
||||
amount = this.panFactor;
|
||||
}
|
||||
if (animationTime == null) {
|
||||
animationTime = this.animationTime;
|
||||
}
|
||||
this.setViewBox(viewBox.x + amount, null, null, null, animationTime);
|
||||
};
|
||||
opts.panUp = function(amount, animationTime) {
|
||||
if (amount == null) {
|
||||
amount = this.panFactor;
|
||||
}
|
||||
if (animationTime == null) {
|
||||
animationTime = this.animationTime;
|
||||
}
|
||||
this.panDown(-amount, animationTime);
|
||||
};
|
||||
opts.panDown = function(amount, animationTime) {
|
||||
if (amount == null) {
|
||||
amount = this.panFactor;
|
||||
}
|
||||
if (animationTime == null) {
|
||||
animationTime = this.animationTime;
|
||||
}
|
||||
this.setViewBox(null, viewBox.y + amount, null, null, animationTime);
|
||||
};
|
||||
opts.zoomIn = function(amount, animationTime) {
|
||||
if (amount == null) {
|
||||
amount = this.zoomFactor;
|
||||
}
|
||||
if (animationTime == null) {
|
||||
animationTime = this.animationTime;
|
||||
}
|
||||
this.zoomOut(-amount, animationTime);
|
||||
};
|
||||
opts.zoomOut = function(amount, animationTime) {
|
||||
var center, newHeight, newWidth;
|
||||
if (amount == null) {
|
||||
amount = this.zoomFactor;
|
||||
}
|
||||
if (animationTime == null) {
|
||||
animationTime = this.animationTime;
|
||||
}
|
||||
if (amount === 0) {
|
||||
return;
|
||||
} else if (amount < 0) {
|
||||
amount = Math.abs(amount);
|
||||
newWidth = viewBox.width / (1 + amount);
|
||||
newHeight = viewBox.height / (1 + amount);
|
||||
} else {
|
||||
newWidth = viewBox.width * (1 + amount);
|
||||
newHeight = viewBox.height * (1 + amount);
|
||||
}
|
||||
center = {
|
||||
x: viewBox.x + viewBox.width / 2,
|
||||
y: viewBox.y + viewBox.height / 2
|
||||
};
|
||||
this.setViewBox(center.x - newWidth / 2, center.y - newHeight / 2, newWidth, newHeight, animationTime);
|
||||
};
|
||||
opts.setCenter = function(x, y, animationTime) {
|
||||
if (animationTime == null) {
|
||||
animationTime = this.animationTime;
|
||||
}
|
||||
this.setViewBox(x - viewBox.width / 2, y - viewBox.height / 2, viewBox.width, viewBox.height, animationTime);
|
||||
};
|
||||
for (key in opts) {
|
||||
if (!hasProp.call(opts, key)) continue;
|
||||
value = opts[key];
|
||||
if (typeof value === "function") {
|
||||
opts.key = value.bind(opts);
|
||||
}
|
||||
}
|
||||
opts.$svg.on("mousewheel DOMMouseScroll MozMousePixelScroll", (function(ev) {
|
||||
var delta, minHeight, minWidth, newMousePosition, newViewBox, newcenter, oldDistanceFromCenter, oldMousePosition, oldViewBox, oldcenter, reductionFactor;
|
||||
delta = parseInt(ev.originalEvent.wheelDelta || -ev.originalEvent.detail);
|
||||
if (delta === 0 || opts.events.mouseWheel !== true) {
|
||||
return;
|
||||
}
|
||||
oldViewBox = this.getViewBox();
|
||||
ev.preventDefault();
|
||||
ev.stopPropagation();
|
||||
oldMousePosition = getViewBoxCoordinatesFromEvent(this.$svg[0], ev);
|
||||
oldcenter = {
|
||||
x: viewBox.x + viewBox.width / 2,
|
||||
y: viewBox.y + viewBox.height / 2
|
||||
};
|
||||
oldDistanceFromCenter = {
|
||||
x: oldcenter.x - oldMousePosition.x,
|
||||
y: oldcenter.y - oldMousePosition.y
|
||||
};
|
||||
if (delta > 0) {
|
||||
this.zoomIn(void 0, 0);
|
||||
minWidth = this.initialViewBox.width / this.maxZoom;
|
||||
minHeight = this.initialViewBox.height / this.maxZoom;
|
||||
if (viewBox.width < minWidth) {
|
||||
reductionFactor = minWidth / viewBox.width;
|
||||
viewBox.width = minWidth;
|
||||
viewBox.height = viewBox.height * reductionFactor;
|
||||
}
|
||||
if (viewBox.height < minHeight) {
|
||||
reductionFactor = minHeight / viewBox.height;
|
||||
viewBox.height = minHeight;
|
||||
viewBox.width = viewBox.width * reductionFactor;
|
||||
}
|
||||
} else {
|
||||
this.zoomOut(void 0, 0);
|
||||
}
|
||||
newMousePosition = getViewBoxCoordinatesFromEvent(this.$svg[0], ev);
|
||||
newcenter = {
|
||||
x: oldcenter.x + (oldMousePosition.x - newMousePosition.x),
|
||||
y: oldcenter.y + (oldMousePosition.y - newMousePosition.y)
|
||||
};
|
||||
this.setCenter(newcenter.x, newcenter.y, 0);
|
||||
newViewBox = this.getViewBox();
|
||||
this.setViewBox(oldViewBox.x, oldViewBox.y, oldViewBox.width, oldViewBox.height, 0);
|
||||
this.setViewBox(newViewBox.x, newViewBox.y, newViewBox.width, newViewBox.height);
|
||||
}).bind(opts));
|
||||
opts.$svg.dblclick((function(ev) {
|
||||
if (opts.events.doubleClick !== true) {
|
||||
return;
|
||||
}
|
||||
ev.preventDefault();
|
||||
ev.stopPropagation();
|
||||
return this.zoomIn();
|
||||
}).bind(opts));
|
||||
opts.$svg[0].addEventListener("click", function(ev) {
|
||||
var preventClick;
|
||||
if (preventClick) {
|
||||
preventClick = false;
|
||||
ev.stopPropagation();
|
||||
return ev.preventDefault();
|
||||
}
|
||||
}, true);
|
||||
dragStarted = false;
|
||||
preventClick = false;
|
||||
opts.$svg.on("mousedown touchstart", (function(ev) {
|
||||
var $body, domBody, initialViewBox, mouseMoveCallback, mouseUpCallback, oldCursor;
|
||||
if (dragStarted) {
|
||||
return;
|
||||
}
|
||||
if (opts.events.drag !== true || (ev.type === "mousedown" && ev.which !== 1)) {
|
||||
return;
|
||||
}
|
||||
dragStarted = true;
|
||||
preventClick = false;
|
||||
ev.preventDefault();
|
||||
ev.stopPropagation();
|
||||
initialViewBox = $.extend({}, viewBox);
|
||||
$body = $(window.document.body);
|
||||
domBody = $body[0];
|
||||
oldCursor = this.$svg.css("cursor");
|
||||
if (this.events.dragCursor != null) {
|
||||
this.$svg.css("cursor", this.events.dragCursor);
|
||||
}
|
||||
mouseMoveCallback = (function(ev2) {
|
||||
var currentMousePosition, initialMousePosition;
|
||||
ev2.preventDefault();
|
||||
ev2.stopPropagation();
|
||||
initialMousePosition = getViewBoxCoordinatesFromEvent(this.$svg[0], ev);
|
||||
currentMousePosition = getViewBoxCoordinatesFromEvent(this.$svg[0], ev2);
|
||||
if (Math.sqrt(Math.pow(ev.pageX + ev2.pageX, 2) + Math.pow(ev.pageY + ev2.pageY, 2)) > 3) {
|
||||
preventClick = true;
|
||||
}
|
||||
this.setViewBox(initialViewBox.x + initialMousePosition.x - currentMousePosition.x, initialViewBox.y + initialMousePosition.y - currentMousePosition.y, null, null, 0);
|
||||
}).bind(opts);
|
||||
mouseUpCallback = (function(ev2) {
|
||||
if (ev2.type === "mouseout" && ev2.target !== ev2.currentTarget) {
|
||||
return;
|
||||
}
|
||||
ev2.preventDefault();
|
||||
ev2.stopPropagation();
|
||||
domBody.removeEventListener("mousemove", mouseMoveCallback, true);
|
||||
domBody.removeEventListener("touchmove", mouseMoveCallback, true);
|
||||
domBody.removeEventListener("mouseup", mouseUpCallback, true);
|
||||
domBody.removeEventListener("touchend", mouseUpCallback, true);
|
||||
domBody.removeEventListener("touchcancel", mouseUpCallback, true);
|
||||
domBody.removeEventListener("mouseout", mouseUpCallback, true);
|
||||
if (this.events.dragCursor != null) {
|
||||
this.$svg.css("cursor", oldCursor);
|
||||
}
|
||||
dragStarted = false;
|
||||
}).bind(opts);
|
||||
domBody.addEventListener("mousemove", mouseMoveCallback, true);
|
||||
domBody.addEventListener("touchmove", mouseMoveCallback, true);
|
||||
domBody.addEventListener("mouseup", mouseUpCallback, true);
|
||||
domBody.addEventListener("touchend", mouseUpCallback, true);
|
||||
domBody.addEventListener("touchcancel", mouseUpCallback, true);
|
||||
domBody.addEventListener("mouseout", mouseUpCallback, true);
|
||||
}).bind(opts));
|
||||
opts.setViewBox(vb.x, vb.y, vb.width, vb.height, 0);
|
||||
ret.push(opts);
|
||||
});
|
||||
if (ret.length === 0) {
|
||||
return null;
|
||||
}
|
||||
if (ret.length === 1) {
|
||||
return ret[0];
|
||||
} else {
|
||||
return ret;
|
||||
}
|
||||
};
|
||||
})(jQuery);
|
||||
|
||||
}).call(this);
|
||||
|
||||
//# sourceMappingURL=jquery.svg.pan.zoom.js.map
|
||||
6
js/lunr.min.js
vendored
Normal file
6
js/lunr.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
3
js/mermaid.min.js
vendored
Normal file
3
js/mermaid.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
20
js/perfect-scrollbar.min.js
vendored
Normal file
20
js/perfect-scrollbar.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
3670
js/rapidoc-min.js
vendored
Normal file
3670
js/rapidoc-min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
105
js/search.js
Normal file
105
js/search.js
Normal file
|
|
@ -0,0 +1,105 @@
|
|||
var lunrIndex, pagesIndex;
|
||||
|
||||
// Initialize lunrjs using our generated index file
|
||||
function initLunr() {
|
||||
// First retrieve the index file
|
||||
$.getJSON(index_url)
|
||||
.done(function(index) {
|
||||
pagesIndex = index;
|
||||
// Set up lunrjs by declaring the fields we use
|
||||
// Also provide their boost level for the ranking
|
||||
lunrIndex = lunr(function() {
|
||||
this.ref('index');
|
||||
this.field('title', {
|
||||
boost: 15
|
||||
});
|
||||
this.field('tags', {
|
||||
boost: 10
|
||||
});
|
||||
this.field('content', {
|
||||
boost: 5
|
||||
});
|
||||
|
||||
this.pipeline.remove(lunr.stemmer);
|
||||
this.searchPipeline.remove(lunr.stemmer);
|
||||
|
||||
// Feed lunr with each file and let lunr actually index them
|
||||
pagesIndex.forEach(function(page, idx) {
|
||||
page.index = idx;
|
||||
this.add(page);
|
||||
}, this);
|
||||
})
|
||||
})
|
||||
.fail(function(jqxhr, textStatus, error) {
|
||||
var err = textStatus + ', ' + error;
|
||||
console.error('Error getting Hugo index file:', err);
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Trigger a search in lunr and transform the result
|
||||
*
|
||||
* @param {String} term
|
||||
* @return {Array} results
|
||||
*/
|
||||
function search(term) {
|
||||
// Find the item in our index corresponding to the lunr one to have more info
|
||||
// Remove Lunr special search characters: https://lunrjs.com/guides/searching.html
|
||||
var searchTerm = lunr.tokenizer(term.replace(/[*:^~+-]/, ' ')).reduce( function(a,token){return a.concat(searchPatterns(token.str))}, []).join(' ');
|
||||
return !searchTerm ? [] : lunrIndex.search(searchTerm).map(function(result) {
|
||||
return { index: result.ref, matches: Object.keys(result.matchData.metadata) }
|
||||
});
|
||||
}
|
||||
|
||||
function searchPatterns(word) {
|
||||
return [
|
||||
word + '^100',
|
||||
word + '*^10',
|
||||
'*' + word + '^10',
|
||||
word + '~' + Math.floor(word.length / 4) + '^1' // allow 1 in 4 letters to have a typo
|
||||
];
|
||||
}
|
||||
|
||||
// Let's get started
|
||||
initLunr();
|
||||
$(function() {
|
||||
var searchList = new autoComplete({
|
||||
/* selector for the search box element */
|
||||
selectorToInsert: '#header-wrapper',
|
||||
selector: '#search-by',
|
||||
/* source is the callback to perform the search */
|
||||
source: function(term, response) {
|
||||
response(search(term));
|
||||
},
|
||||
/* renderItem displays individual search results */
|
||||
renderItem: function(item, term) {
|
||||
var page = pagesIndex[item.index];
|
||||
var numContextWords = 2;
|
||||
var contextPattern = '(?:\\S+ +){0,' + numContextWords + '}\\S*\\b(?:' +
|
||||
item.matches.map( function(match){return match.replace(/\W/g, '\\$&')} ).join('|') +
|
||||
')\\b\\S*(?: +\\S+){0,' + numContextWords + '}';
|
||||
var context = page.content.match(new RegExp(contextPattern, 'i'));
|
||||
var divcontext = document.createElement('div');
|
||||
divcontext.className = 'context';
|
||||
divcontext.innerText = (context || '');
|
||||
var divsuggestion = document.createElement('div');
|
||||
divsuggestion.className = 'autocomplete-suggestion';
|
||||
divsuggestion.setAttribute('data-term', term);
|
||||
divsuggestion.setAttribute('data-title', page.title);
|
||||
divsuggestion.setAttribute('data-uri', baseUri + page.uri);
|
||||
divsuggestion.setAttribute('data-context', context);
|
||||
divsuggestion.innerText = '» ' + page.title;
|
||||
divsuggestion.appendChild(divcontext);
|
||||
return divsuggestion.outerHTML;
|
||||
},
|
||||
/* onSelect callback fires when a search suggestion is chosen */
|
||||
onSelect: function(e, term, item) {
|
||||
location.href = item.getAttribute('data-uri');
|
||||
}
|
||||
});
|
||||
|
||||
// JavaScript-autoComplete only registers the focus event when minChars is 0 which doesn't make sense, let's do it ourselves
|
||||
// https://github.com/Pixabay/JavaScript-autoComplete/blob/master/auto-complete.js#L191
|
||||
var selector = $('#search-by').get(0);
|
||||
$(selector).focus(selector.focusHandler);
|
||||
});
|
||||
727
js/theme.js
Normal file
727
js/theme.js
Normal file
|
|
@ -0,0 +1,727 @@
|
|||
var theme = true;
|
||||
var isIE = /*@cc_on!@*/false || !!document.documentMode;
|
||||
if( isIE ){
|
||||
// we don't support sidebar flyout in IE
|
||||
document.querySelector( 'body' ).classList.remove( 'mobile-support' );
|
||||
}
|
||||
else{
|
||||
document.querySelector( 'body' ).classList.add( 'mobile-support' );
|
||||
}
|
||||
var isPrint = document.querySelector( 'body' ).classList.contains( 'print' );
|
||||
|
||||
var touchsupport = ('ontouchstart' in window) || (navigator.maxTouchPoints > 0) || (navigator.msMaxTouchPoints > 0)
|
||||
|
||||
var formelements = 'button, datalist, fieldset, input, label, legend, meter, optgroup, option, output, progress, select, textarea';
|
||||
|
||||
function switchTab(tabGroup, tabId) {
|
||||
allTabItems = jQuery("[data-tab-group='"+tabGroup+"']");
|
||||
targetTabItems = jQuery("[data-tab-group='"+tabGroup+"'][data-tab-item='"+tabId+"']");
|
||||
|
||||
// if event is undefined then switchTab was called from restoreTabSelection
|
||||
// so it's not a button event and we don't need to safe the selction or
|
||||
// prevent page jump
|
||||
var isButtonEvent = event != undefined;
|
||||
|
||||
if(isButtonEvent){
|
||||
// save button position relative to viewport
|
||||
var yposButton = event.target.getBoundingClientRect().top;
|
||||
}
|
||||
|
||||
allTabItems.removeClass("active");
|
||||
targetTabItems.addClass("active");
|
||||
|
||||
if(isButtonEvent){
|
||||
// reset screen to the same position relative to clicked button to prevent page jump
|
||||
var yposButtonDiff = event.target.getBoundingClientRect().top - yposButton;
|
||||
window.scrollTo(window.scrollX, window.scrollY+yposButtonDiff);
|
||||
|
||||
// Store the selection to make it persistent
|
||||
if(window.localStorage){
|
||||
var selectionsJSON = window.localStorage.getItem(baseUriFull+"tab-selections");
|
||||
if(selectionsJSON){
|
||||
var tabSelections = JSON.parse(selectionsJSON);
|
||||
}else{
|
||||
var tabSelections = {};
|
||||
}
|
||||
tabSelections[tabGroup] = tabId;
|
||||
window.localStorage.setItem(baseUriFull+"tab-selections", JSON.stringify(tabSelections));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function restoreTabSelections() {
|
||||
if(window.localStorage){
|
||||
var selectionsJSON = window.localStorage.getItem(baseUriFull+"tab-selections");
|
||||
if(selectionsJSON){
|
||||
var tabSelections = JSON.parse(selectionsJSON);
|
||||
}else{
|
||||
var tabSelections = {};
|
||||
}
|
||||
Object.keys(tabSelections).forEach(function(tabGroup) {
|
||||
var tabItem = tabSelections[tabGroup];
|
||||
switchTab(tabGroup, tabItem);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function initMermaid( update ) {
|
||||
// we are either in update or initialization mode;
|
||||
// during initialization, we want to edit the DOM;
|
||||
// during update we only want to execute if something chanegd
|
||||
var decodeHTML = function( html ){
|
||||
var txt = document.createElement( 'textarea' );
|
||||
txt.innerHTML = html;
|
||||
return txt.value;
|
||||
};
|
||||
|
||||
var parseGraph = function( graph ){
|
||||
var d = /^\s*(%%\s*\{\s*\w+\s*:([^%]*?)%%\s*\n?)/g;
|
||||
var m = d.exec( graph );
|
||||
var dir = {};
|
||||
var content = graph;
|
||||
if( m && m.length == 3 ){
|
||||
dir = JSON.parse( '{ "dummy": ' + m[2] ).dummy;
|
||||
content = graph.substring( d.lastIndex );
|
||||
}
|
||||
return { dir: dir, content: content };
|
||||
};
|
||||
|
||||
var serializeGraph = function( graph ){
|
||||
return '%%{init: ' + JSON.stringify( graph.dir ) + '}%%\n' + graph.content;
|
||||
};
|
||||
|
||||
var init_func = function(){
|
||||
state.is_initialized = true;
|
||||
var is_initialized = false;
|
||||
var theme = variants.getColorValue( 'MERMAID-theme' );
|
||||
document.querySelectorAll('.mermaid').forEach( function( element ){
|
||||
var parse = parseGraph( decodeHTML( element.innerHTML ) );
|
||||
|
||||
if( parse.dir.theme ){
|
||||
parse.dir.relearn_user_theme = true;
|
||||
}
|
||||
if( !parse.dir.relearn_user_theme ){
|
||||
parse.dir.theme = theme;
|
||||
}
|
||||
is_initialized = true;
|
||||
|
||||
var graph = serializeGraph( parse );
|
||||
element.innerHTML = graph;
|
||||
var new_element = document.createElement( 'div' );
|
||||
new_element.classList.add( 'mermaid-container' );
|
||||
new_element.innerHTML = '<div class="mermaid-code">' + graph + '</div>' + element.outerHTML;
|
||||
element.parentNode.replaceChild( new_element, element );
|
||||
});
|
||||
return is_initialized;
|
||||
}
|
||||
|
||||
var update_func = function(){
|
||||
var is_initialized = false;
|
||||
var theme = variants.getColorValue( 'MERMAID-theme' );
|
||||
document.querySelectorAll( '.mermaid-container' ).forEach( function( e ){
|
||||
var element = e.querySelector( '.mermaid' );
|
||||
var code = e.querySelector( '.mermaid-code' );
|
||||
var parse = parseGraph( decodeHTML( code.innerHTML ) );
|
||||
|
||||
if( parse.dir.relearn_user_theme ){
|
||||
return;
|
||||
}
|
||||
if( parse.dir.theme == theme ){
|
||||
return;
|
||||
}
|
||||
is_initialized = true;
|
||||
|
||||
parse.dir.theme = theme;
|
||||
var graph = serializeGraph( parse );
|
||||
element.removeAttribute('data-processed');
|
||||
element.innerHTML = graph;
|
||||
code.innerHTML = graph;
|
||||
});
|
||||
return is_initialized;
|
||||
};
|
||||
|
||||
var state = this;
|
||||
if( update && !state.is_initialized ){
|
||||
return;
|
||||
}
|
||||
if( typeof variants == 'undefined' ){
|
||||
return;
|
||||
}
|
||||
if( typeof mermaid == 'undefined' || typeof mermaid.mermaidAPI == 'undefined' ){
|
||||
return;
|
||||
}
|
||||
|
||||
var is_initialized = ( update ? update_func() : init_func() );
|
||||
if( is_initialized ){
|
||||
mermaid.init();
|
||||
$(".mermaid svg").svgPanZoom({});
|
||||
}
|
||||
}
|
||||
|
||||
function initSwagger( update ){
|
||||
if( typeof variants == 'undefined' ){
|
||||
return;
|
||||
}
|
||||
var attrs = [
|
||||
[ 'bg-color', variants.getColorValue( 'MAIN-BG-color' ) ],
|
||||
[ 'mono-font', variants.getColorValue( 'CODE-font' ) ],
|
||||
[ 'primary-color', variants.getColorValue( 'TAG-BG-color' ) ],
|
||||
[ 'regular-font', variants.getColorValue( 'MAIN-font' ) ],
|
||||
[ 'text-color', variants.getColorValue( 'MAIN-TEXT-color' ) ],
|
||||
[ 'theme', variants.getColorValue( 'SWAGGER-theme' ) ],
|
||||
];
|
||||
document.querySelectorAll( 'rapi-doc' ).forEach( function( e ){
|
||||
attrs.forEach( function( attr ){
|
||||
e.setAttribute( attr[0], attr[1] );
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function initAnchorClipboard(){
|
||||
document.querySelectorAll( 'h1~h2,h1~h3,h1~h4,h1~h5,h1~h6').forEach( function( element ){
|
||||
var url = encodeURI(document.location.origin + document.location.pathname);
|
||||
var link = url + "#"+element.id;
|
||||
var new_element = document.createElement( 'span' );
|
||||
new_element.classList.add( 'anchor' );
|
||||
new_element.setAttribute( 'title', window.T_Copy_link_to_clipboard );
|
||||
new_element.setAttribute( 'data-clipboard-text', link );
|
||||
new_element.innerHTML = '<i class="fas fa-link fa-lg"></i>';
|
||||
element.appendChild( new_element );
|
||||
});
|
||||
|
||||
$(".anchor").on('mouseleave', function(e) {
|
||||
$(this).attr('aria-label', null).removeClass('tooltipped tooltipped-s tooltipped-w');
|
||||
});
|
||||
|
||||
var clip = new ClipboardJS('.anchor');
|
||||
clip.on('success', function(e) {
|
||||
e.clearSelection();
|
||||
$(e.trigger).attr('aria-label', window.T_Link_copied_to_clipboard).addClass('tooltipped tooltipped-s');
|
||||
});
|
||||
}
|
||||
|
||||
function initCodeClipboard(){
|
||||
function fallbackMessage(action) {
|
||||
var actionMsg = '';
|
||||
var actionKey = (action === 'cut' ? 'X' : 'C');
|
||||
|
||||
if (/iPhone|iPad/i.test(navigator.userAgent)) {
|
||||
actionMsg = 'No support :(';
|
||||
}
|
||||
else if (/Mac/i.test(navigator.userAgent)) {
|
||||
actionMsg = 'Press ⌘-' + actionKey + ' to ' + action;
|
||||
}
|
||||
else {
|
||||
actionMsg = 'Press Ctrl-' + actionKey + ' to ' + action;
|
||||
}
|
||||
|
||||
return actionMsg;
|
||||
}
|
||||
|
||||
$('code').each(function() {
|
||||
var code = $(this),
|
||||
text = code.text();
|
||||
|
||||
if (text.length > 5) {
|
||||
var clip = new ClipboardJS('.copy-to-clipboard-button', {
|
||||
text: function(trigger) {
|
||||
var text = $(trigger).prev('code').text();
|
||||
// remove a trailing line break, this may most likely
|
||||
// come from the browser / Hugo transformation
|
||||
text = text.replace(/\n$/, '');
|
||||
// removes leading $ signs from text in an assumption
|
||||
// that this has to be the unix prompt marker - weird
|
||||
return text.replace(/^\$\s/gm, '');
|
||||
}
|
||||
});
|
||||
|
||||
clip.on('success', function(e) {
|
||||
e.clearSelection();
|
||||
var inPre = $(e.trigger).parent().prop('tagName') == 'PRE';
|
||||
$(e.trigger).attr('aria-label', window.T_Copied_to_clipboard).addClass('tooltipped tooltipped-' + (inPre ? 'w' : 's'));
|
||||
});
|
||||
|
||||
clip.on('error', function(e) {
|
||||
var inPre = $(e.trigger).parent().prop('tagName') == 'PRE';
|
||||
$(e.trigger).attr('aria-label', fallbackMessage(e.action)).addClass('tooltipped tooltipped-' + (inPre ? 'w' : 's'));
|
||||
$(document).one('copy', function(){
|
||||
$(e.trigger).attr('aria-label', window.T_Copied_to_clipboard).addClass('tooltipped tooltipped-' + (inPre ? 'w' : 's'));
|
||||
});
|
||||
});
|
||||
|
||||
var parent = code.parent();
|
||||
var inPre = parent.prop('tagName') == 'PRE';
|
||||
code.addClass('copy-to-clipboard-code');
|
||||
if( inPre ){
|
||||
parent.addClass( 'copy-to-clipboard' );
|
||||
}
|
||||
else{
|
||||
code.replaceWith($('<span/>', {'class': 'copy-to-clipboard'}).append(code.clone() ));
|
||||
code = parent.children('.copy-to-clipboard').last().children('.copy-to-clipboard-code');
|
||||
}
|
||||
code.after( $('<span>').addClass("copy-to-clipboard-button").attr("title", window.T_Copy_to_clipboard).append("<i class='fas fa-copy'></i>") );
|
||||
code.next('.copy-to-clipboard-button').on('mouseleave', function() {
|
||||
$(this).attr('aria-label', null).removeClass('tooltipped tooltipped-s tooltipped-w');
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function initArrowNav(){
|
||||
// button navigation
|
||||
jQuery(function() {
|
||||
jQuery('a.nav-prev').click(function(){
|
||||
location.href = jQuery(this).attr('href');
|
||||
});
|
||||
jQuery('a.nav-next').click(function() {
|
||||
location.href = jQuery(this).attr('href');
|
||||
});
|
||||
});
|
||||
|
||||
// keyboard navigation
|
||||
jQuery(document).keydown(function(e) {
|
||||
if(e.which == '37') {
|
||||
jQuery('a.nav-prev').click();
|
||||
}
|
||||
if(e.which == '39') {
|
||||
jQuery('a.nav-next').click();
|
||||
}
|
||||
});
|
||||
|
||||
// avoid keyboard navigation for input fields
|
||||
jQuery(formelements).keydown(function (e) {
|
||||
if (e.which == '37' || e.which == '39') {
|
||||
e.stopPropagation();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function initMenuScrollbar(){
|
||||
if( isPrint ){
|
||||
return;
|
||||
}
|
||||
|
||||
var content = '#body-inner';
|
||||
var autofocus = false;
|
||||
document.addEventListener('keydown', function(event){
|
||||
// for initial keyboard scrolling support, no element
|
||||
// may be hovered, but we still want to react on
|
||||
// cursor/page up/down. because we can't hack
|
||||
// the scrollbars implementation, we try to trick
|
||||
// it and give focus to the scrollbar - only
|
||||
// to just remove the focus right after scrolling
|
||||
// happend
|
||||
var p = document.querySelector(content).matches(':hover');
|
||||
var m = document.querySelector('#content-wrapper').matches(':hover');
|
||||
var f = event.target.matches( formelements );
|
||||
if( !p && !m && !f ){
|
||||
// only do this hack if none of our scrollbars
|
||||
// is hovered
|
||||
autofocus = true;
|
||||
// if we are showing the sidebar as a flyout we
|
||||
// want to scroll the content-wrapper, otherwise we want
|
||||
// to scroll the body
|
||||
var n = document.querySelector('body').matches('.sidebar-flyout');
|
||||
if( n ){
|
||||
psm.scrollbarY.focus();
|
||||
}
|
||||
else{
|
||||
psc.scrollbarY.focus();
|
||||
}
|
||||
}
|
||||
});
|
||||
// scrollbars will install their own keyboard handlers
|
||||
// that need to be executed inbetween our own handlers
|
||||
var psm = new PerfectScrollbar('#content-wrapper');
|
||||
var psc = new PerfectScrollbar(content);
|
||||
document.addEventListener('keydown', function(){
|
||||
// if we facked initial scrolling, we want to
|
||||
// remove the focus to not leave visual markers on
|
||||
// the scrollbar
|
||||
if( autofocus ){
|
||||
psc.scrollbarY.blur();
|
||||
psm.scrollbarY.blur();
|
||||
autofocus = false;
|
||||
}
|
||||
});
|
||||
// on resize, we have to redraw the scrollbars to let new height
|
||||
// affect their size
|
||||
window.addEventListener('resize', function(){
|
||||
psm && psm.update();
|
||||
psc && psc.update();
|
||||
});
|
||||
// now that we may have collapsible menus, we need to call a resize
|
||||
// for the menu scrollbar if sections are expanded/collapsed
|
||||
document.querySelectorAll('#sidebar .collapsible-menu input.toggle').forEach( function(e){
|
||||
e.addEventListener('change', function(){
|
||||
psm && psm.update();
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function initLightbox(){
|
||||
// wrap image inside a lightbox (to get a full size view in a popup)
|
||||
var images = $("main#body-inner img").not(".inline");
|
||||
images.wrap(function(){
|
||||
var image =$(this);
|
||||
var o = getUrlParameter(image[0].src);
|
||||
var f = o['featherlight'];
|
||||
// IF featherlight is false, do not use feather light
|
||||
if (f != 'false') {
|
||||
if (!image.parent("a").length) {
|
||||
var html = $( "<a>" ).attr("href", image[0].src).attr("data-featherlight", "image").get(0).outerHTML;
|
||||
return html;
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
$('a[rel="lightbox"]').featherlight({
|
||||
root: 'div#body'
|
||||
});
|
||||
}
|
||||
|
||||
function initImageStyles(){
|
||||
// change image styles, depending on parameters set to the image
|
||||
var images = $("main#body-inner img").not(".inline");
|
||||
images.each(function(index){
|
||||
var image = $(this)
|
||||
var o = getUrlParameter(image[0].src);
|
||||
if (typeof o !== "undefined") {
|
||||
var h = o["height"];
|
||||
var w = o["width"];
|
||||
var c = o["classes"];
|
||||
image.css("width", function() {
|
||||
if (typeof w !== "undefined") {
|
||||
return w;
|
||||
} else {
|
||||
return "auto";
|
||||
}
|
||||
});
|
||||
image.css("height", function() {
|
||||
if (typeof h !== "undefined") {
|
||||
return h;
|
||||
} else {
|
||||
return "auto";
|
||||
}
|
||||
});
|
||||
if (typeof c !== "undefined") {
|
||||
var classes = c.split(',');
|
||||
for (i = 0; i < classes.length; i++) {
|
||||
image.addClass(classes[i]);
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function initToc(){
|
||||
function showNav(){
|
||||
var b = document.querySelector( 'body' );
|
||||
b.classList.toggle( 'sidebar-flyout' );
|
||||
var n = b.matches('.sidebar-flyout');
|
||||
if( n ){
|
||||
b.classList.remove( 'toc-flyout' );
|
||||
}
|
||||
}
|
||||
function showToc(){
|
||||
var b = document.querySelector( 'body' );
|
||||
b.classList.toggle( 'toc-flyout' );
|
||||
}
|
||||
|
||||
document.querySelector( '#sidebar-overlay' ).addEventListener( 'click', showNav );
|
||||
document.querySelector( '#sidebar-toggle' ).addEventListener( 'click', showNav );
|
||||
document.querySelector( '#toc-overlay' ).addEventListener( 'click', showToc );
|
||||
var t = document.querySelector( '#toc-menu' );
|
||||
var p = document.querySelector( '.progress' );
|
||||
if( t && p ){
|
||||
// we may not have a toc
|
||||
t.addEventListener( 'click', showToc );
|
||||
p.addEventListener( 'click', showToc );
|
||||
}
|
||||
}
|
||||
|
||||
function initSwipeHandler(){
|
||||
if( !touchsupport ){
|
||||
return;
|
||||
}
|
||||
|
||||
var startx = null;
|
||||
var starty = null;
|
||||
var handleStartX = function(evt) {
|
||||
startx = evt.touches[0].clientX;
|
||||
starty = evt.touches[0].clientY;
|
||||
return false;
|
||||
};
|
||||
var handleMoveX = function(evt) {
|
||||
if( startx !== null ){
|
||||
var diffx = startx - evt.touches[0].clientX;
|
||||
var diffy = starty - evt.touches[0].clientY || .1 ;
|
||||
if( diffx / Math.abs( diffy ) < 2 ){
|
||||
// detect mostly vertical swipes and reset our starting pos
|
||||
// to not detect a horizontal move if vertical swipe is unprecise
|
||||
startx = evt.touches[0].clientX;
|
||||
}
|
||||
else if( diffx > 30 ){
|
||||
startx = null;
|
||||
starty = null;
|
||||
document.querySelector( 'body' ).classList.toggle( 'sidebar-flyout' );
|
||||
}
|
||||
}
|
||||
return false;
|
||||
};
|
||||
var handleEndX = function(evt) {
|
||||
startx = null;
|
||||
starty = null;
|
||||
return false;
|
||||
};
|
||||
|
||||
document.querySelector( '#sidebar-overlay' ).addEventListener("touchstart", handleStartX, false);
|
||||
document.querySelector( '#sidebar' ).addEventListener("touchstart", handleStartX, false);
|
||||
document.querySelectorAll( '#sidebar *' ).forEach( function(e){ e.addEventListener("touchstart", handleStartX); }, false);
|
||||
document.querySelector( '#sidebar-overlay' ).addEventListener("touchmove", handleMoveX, false);
|
||||
document.querySelector( '#sidebar' ).addEventListener("touchmove", handleMoveX, false);
|
||||
document.querySelectorAll( '#sidebar *' ).forEach( function(e){ e.addEventListener("touchmove", handleMoveX); }, false);
|
||||
document.querySelector( '#sidebar-overlay' ).addEventListener("touchend", handleEndX, false);
|
||||
document.querySelector( '#sidebar' ).addEventListener("touchend", handleEndX, false);
|
||||
document.querySelectorAll( '#sidebar *' ).forEach( function(e){ e.addEventListener("touchend", handleEndX); }, false);
|
||||
}
|
||||
|
||||
function scrollToActiveMenu() {
|
||||
window.setTimeout(function(){
|
||||
var e = document.querySelector( '#sidebar ul.topics li.active a' );
|
||||
if( e && e.scrollIntoView ){
|
||||
e.scrollIntoView({
|
||||
block: 'center',
|
||||
});
|
||||
}
|
||||
}, 10);
|
||||
}
|
||||
|
||||
function scrollToFragment() {
|
||||
if( !window.location.hash || window.location.hash.length <= 1 ){
|
||||
return;
|
||||
}
|
||||
window.setTimeout(function(){
|
||||
var e = document.querySelector( window.location.hash );
|
||||
if( e && e.scrollIntoView ){
|
||||
e.scrollIntoView({
|
||||
block: 'start',
|
||||
});
|
||||
}
|
||||
}, 10);
|
||||
}
|
||||
|
||||
// Get Parameters from some url
|
||||
var getUrlParameter = function getUrlParameter(sPageURL) {
|
||||
var url = sPageURL.split('?');
|
||||
var obj = {};
|
||||
if (url.length == 2) {
|
||||
var sURLVariables = url[1].split('&'),
|
||||
sParameterName,
|
||||
i;
|
||||
for (i = 0; i < sURLVariables.length; i++) {
|
||||
sParameterName = sURLVariables[i].split('=');
|
||||
obj[sParameterName[0]] = sParameterName[1];
|
||||
}
|
||||
}
|
||||
return obj;
|
||||
};
|
||||
|
||||
// debouncing function from John Hann
|
||||
// http://unscriptable.com/index.php/2009/03/20/debouncing-javascript-methods/
|
||||
(function($, sr) {
|
||||
|
||||
var debounce = function(func, threshold, execAsap) {
|
||||
var timeout;
|
||||
|
||||
return function debounced() {
|
||||
var obj = this, args = arguments;
|
||||
|
||||
function delayed() {
|
||||
if (!execAsap)
|
||||
func.apply(obj, args);
|
||||
timeout = null;
|
||||
};
|
||||
|
||||
if (timeout)
|
||||
clearTimeout(timeout);
|
||||
else if (execAsap)
|
||||
func.apply(obj, args);
|
||||
|
||||
timeout = setTimeout(delayed, threshold || 100);
|
||||
};
|
||||
}
|
||||
// smartresize
|
||||
jQuery.fn[sr] = function(fn) { return fn ? this.bind('resize', debounce(fn)) : this.trigger(sr); };
|
||||
|
||||
})(jQuery, 'smartresize');
|
||||
|
||||
jQuery(function() {
|
||||
initArrowNav();
|
||||
initMermaid();
|
||||
initSwagger();
|
||||
initMenuScrollbar();
|
||||
scrollToActiveMenu();
|
||||
scrollToFragment();
|
||||
initLightbox();
|
||||
initImageStyles();
|
||||
initToc();
|
||||
initAnchorClipboard();
|
||||
initCodeClipboard();
|
||||
restoreTabSelections();
|
||||
initSwipeHandler();
|
||||
|
||||
jQuery('[data-clear-history-toggle]').on('click', function() {
|
||||
for( var item in sessionStorage ){
|
||||
if( item.substring( 0, baseUriFull.length ) === baseUriFull ){
|
||||
sessionStorage.removeItem( item );
|
||||
}
|
||||
}
|
||||
location.reload();
|
||||
return false;
|
||||
});
|
||||
|
||||
var ajax;
|
||||
jQuery('[data-search-input]').on('input', function() {
|
||||
var input = jQuery(this),
|
||||
value = input.val(),
|
||||
items = jQuery('[data-nav-id]');
|
||||
items.removeClass('search-match');
|
||||
if (!value.length) {
|
||||
$('ul.topics').removeClass('searched');
|
||||
items.css('display', 'block');
|
||||
sessionStorage.removeItem(baseUriFull+'search-value');
|
||||
$("mark").parents(".expand-marked").removeClass("expand-marked");
|
||||
$(".highlightable").unhighlight({ element: 'mark' })
|
||||
return;
|
||||
}
|
||||
|
||||
sessionStorage.setItem(baseUriFull+'search-value', value);
|
||||
$("mark").parents(".expand-marked").removeClass("expand-marked");
|
||||
$(".highlightable").unhighlight({ element: 'mark' }).highlight(value, { element: 'mark' });
|
||||
$("mark").parents(".expand").addClass("expand-marked");
|
||||
|
||||
if (ajax && ajax.abort) ajax.abort();
|
||||
|
||||
jQuery('[data-search-clear]').on('click', function() {
|
||||
jQuery('[data-search-input]').val('').trigger('input');
|
||||
sessionStorage.removeItem(baseUriFull+'search-input');
|
||||
$("mark").parents(".expand-marked").removeClass("expand-marked");
|
||||
$(".highlightable").unhighlight({ element: 'mark' })
|
||||
});
|
||||
});
|
||||
|
||||
$.expr[":"].contains = $.expr.createPseudo(function(arg) {
|
||||
return function( elem ) {
|
||||
return $(elem).text().toUpperCase().indexOf(arg.toUpperCase()) >= 0;
|
||||
};
|
||||
});
|
||||
|
||||
if (sessionStorage.getItem(baseUriFull+'search-value')) {
|
||||
var searchValue = sessionStorage.getItem(baseUriFull+'search-value')
|
||||
$('[data-search-input]').val(searchValue);
|
||||
$('[data-search-input]').trigger('input');
|
||||
var searchedElem = $('#body-inner').find(':contains(' + searchValue + ')').get(0);
|
||||
if (searchedElem) {
|
||||
searchedElem.scrollIntoView(true);
|
||||
var scrolledY = window.scrollY;
|
||||
if(scrolledY){
|
||||
window.scroll(0, scrolledY - 125);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
$(".highlightable").highlight(sessionStorage.getItem(baseUriFull+'search-value'), { element: 'mark' });
|
||||
$("mark").parents(".expand").addClass("expand-marked");
|
||||
|
||||
$('#topbar a:not(:has(img)):not(.btn)').addClass('highlight');
|
||||
$('#body-inner a:not(:has(img)):not(.btn):not(a[rel="footnote"])').addClass('highlight');
|
||||
|
||||
var visitedItem = baseUriFull + 'visited-url/'
|
||||
sessionStorage.setItem(visitedItem+jQuery('body').data('url'), 1);
|
||||
|
||||
// loop through the sessionStorage and see if something should be marked as visited
|
||||
for( var item in sessionStorage ){
|
||||
if( item.substring( 0, visitedItem.length ) === visitedItem && sessionStorage.getItem( item ) == 1 ){
|
||||
var url = item.substring( visitedItem.length );
|
||||
// in case we have `relativeURLs=true` we have to strip the
|
||||
// relative path to root
|
||||
url = url.replace( /\.\.\//g, '/' ).replace( /^\/+\//, '/' );
|
||||
jQuery('[data-nav-id="' + url + '"]').addClass('visited');
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
jQuery.extend({
|
||||
highlight: function(node, re, nodeName, className) {
|
||||
if (node.nodeType === 3 && node.parentElement && node.parentElement.namespaceURI == 'http://www.w3.org/1999/xhtml') { // text nodes
|
||||
var match = node.data.match(re);
|
||||
if (match) {
|
||||
var highlight = document.createElement(nodeName || 'span');
|
||||
highlight.className = className || 'highlight';
|
||||
var wordNode = node.splitText(match.index);
|
||||
wordNode.splitText(match[0].length);
|
||||
var wordClone = wordNode.cloneNode(true);
|
||||
highlight.appendChild(wordClone);
|
||||
wordNode.parentNode.replaceChild(highlight, wordNode);
|
||||
return 1; //skip added node in parent
|
||||
}
|
||||
} else if ((node.nodeType === 1 && node.childNodes) && // only element nodes that have children
|
||||
!/(script|style)/i.test(node.tagName) && // ignore script and style nodes
|
||||
!(node.tagName === nodeName.toUpperCase() && node.className === className)) { // skip if already highlighted
|
||||
for (var i = 0; i < node.childNodes.length; i++) {
|
||||
i += jQuery.highlight(node.childNodes[i], re, nodeName, className);
|
||||
}
|
||||
}
|
||||
return 0;
|
||||
}
|
||||
});
|
||||
|
||||
jQuery.fn.unhighlight = function(options) {
|
||||
var settings = {
|
||||
className: 'highlight',
|
||||
element: 'span'
|
||||
};
|
||||
jQuery.extend(settings, options);
|
||||
|
||||
return this.find(settings.element + "." + settings.className).each(function() {
|
||||
var parent = this.parentNode;
|
||||
parent.replaceChild(this.firstChild, this);
|
||||
parent.normalize();
|
||||
}).end();
|
||||
};
|
||||
|
||||
jQuery.fn.highlight = function(words, options) {
|
||||
var settings = {
|
||||
className: 'highlight',
|
||||
element: 'span',
|
||||
caseSensitive: false,
|
||||
wordsOnly: false
|
||||
};
|
||||
jQuery.extend(settings, options);
|
||||
|
||||
if (!words) { return; }
|
||||
|
||||
if (words.constructor === String) {
|
||||
words = [words];
|
||||
}
|
||||
words = jQuery.grep(words, function(word, i) {
|
||||
return word != '';
|
||||
});
|
||||
words = jQuery.map(words, function(word, i) {
|
||||
return word.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, "\\$&");
|
||||
});
|
||||
if (words.length == 0) { return this; }
|
||||
;
|
||||
|
||||
var flag = settings.caseSensitive ? "" : "i";
|
||||
var pattern = "(" + words.join("|") + ")";
|
||||
if (settings.wordsOnly) {
|
||||
pattern = "\\b" + pattern + "\\b";
|
||||
}
|
||||
var re = new RegExp(pattern, flag);
|
||||
|
||||
return this.each(function() {
|
||||
jQuery.highlight(this, re, settings.element, settings.className);
|
||||
});
|
||||
};
|
||||
604
js/variant.js
Normal file
604
js/variant.js
Normal file
|
|
@ -0,0 +1,604 @@
|
|||
// 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
|
||||
|
||||
// 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;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
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)}}());
|
||||
|
||||
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; }
|
||||
|
||||
var variants = {
|
||||
variant: '',
|
||||
variants: [],
|
||||
customvariantname: 'my-custom-variant',
|
||||
isstylesheetloaded: true,
|
||||
|
||||
init: function( variants ){
|
||||
this.variants = variants;
|
||||
var variant = window.localStorage.getItem( baseUriFull+'variant' ) || ( this.variants.length ? this.variants[0] : '' );
|
||||
this.changeVariant( variant );
|
||||
document.addEventListener( 'readystatechange', function(){
|
||||
if( document.readyState == 'interactive' ){
|
||||
this.markSelectedVariant();
|
||||
}
|
||||
}.bind( this ) );
|
||||
},
|
||||
|
||||
getVariant: function(){
|
||||
return this.variant;
|
||||
},
|
||||
|
||||
setVariant: function( variant ){
|
||||
this.variant = variant;
|
||||
window.localStorage.setItem( baseUriFull+'variant', variant );
|
||||
},
|
||||
|
||||
isVariantLoaded: function(){
|
||||
return window.theme && this.isstylesheetloaded;
|
||||
},
|
||||
|
||||
markSelectedVariant: function(){
|
||||
var variant = this.getVariant();
|
||||
var select = document.querySelector( '#select-variant' );
|
||||
if( !select ){
|
||||
return;
|
||||
}
|
||||
this.addCustomVariantOption();
|
||||
if( variant && select.value != variant ){
|
||||
select.value = variant;
|
||||
}
|
||||
var interval_id = setInterval( function(){
|
||||
if( this.isVariantLoaded() ){
|
||||
clearInterval( interval_id );
|
||||
initMermaid( true );
|
||||
initSwagger( true );
|
||||
}
|
||||
}.bind( this ), 25 );
|
||||
// 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();
|
||||
}
|
||||
},
|
||||
|
||||
generateVariantPath: function( variant, old_path ){
|
||||
var new_path = old_path.replace( /^(.*\/theme-).*?(\.css.*)$/, '$1' + variant + '$2' );
|
||||
return new_path;
|
||||
},
|
||||
|
||||
addCustomVariantOption: function(){
|
||||
var variantbase = window.localStorage.getItem( baseUriFull+'customvariantbase' );
|
||||
if( this.variants.indexOf( variantbase ) < 0 ){
|
||||
variantbase = '';
|
||||
}
|
||||
if( !window.localStorage.getItem( baseUriFull+'customvariant' ) ){
|
||||
variantbase = '';
|
||||
}
|
||||
if( !variantbase ){
|
||||
return;
|
||||
}
|
||||
var select = document.querySelector( '#select-variant' );
|
||||
if( !select ){
|
||||
return;
|
||||
}
|
||||
var option = document.querySelector( '#' + this.customvariantname );
|
||||
if( !option ){
|
||||
option = document.createElement( 'option' );
|
||||
option.id = this.customvariantname;
|
||||
option.value = this.customvariantname;
|
||||
option.text = this.customvariantname.replace( /-/g, ' ' ).replace(/\w\S*/g, function(w){ return w.replace(/^\w/g, function(c){ return c.toUpperCase(); }); });
|
||||
select.appendChild( option );
|
||||
document.querySelectorAll( '.footerVariantSwitch' ).forEach( function( e ){
|
||||
e.classList.add( 'showVariantSwitch' );
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
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 ){
|
||||
window.localStorage.setItem( baseUriFull+'customvariantbase', this.getVariant() );
|
||||
}
|
||||
window.localStorage.setItem( baseUriFull+'customvariant', this.generateStylesheet() );
|
||||
this.setVariant( this.customvariantname );
|
||||
this.markSelectedVariant();
|
||||
},
|
||||
|
||||
loadCustomVariant: function(){
|
||||
var stylesheet = window.localStorage.getItem( baseUriFull+'customvariant' );
|
||||
|
||||
// temp styles to document
|
||||
var head = document.querySelector( 'head' );
|
||||
var style = document.createElement( 'style' );
|
||||
style.id = 'custom-variant-style';
|
||||
style.appendChild( document.createTextNode( stylesheet ) );
|
||||
head.appendChild( style );
|
||||
|
||||
var interval_id = setInterval( function(){
|
||||
if( this.findLoadedStylesheet( 'variant-style' ) ){
|
||||
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 );
|
||||
},
|
||||
|
||||
resetVariant: function(){
|
||||
var variantbase = window.localStorage.getItem( baseUriFull+'customvariantbase' );
|
||||
if( variantbase && confirm( 'You have made changes to your custom variant. Are you sure you want to reset all changes?' ) ){
|
||||
window.localStorage.removeItem( baseUriFull+'customvariantbase' );
|
||||
window.localStorage.removeItem( baseUriFull+'customvariant' );
|
||||
this.removeCustomVariantOption();
|
||||
if( this.getVariant() == this.customvariantname ){
|
||||
this.changeVariant( variantbase );
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
onLoadStylesheet: function(){
|
||||
variants.isstylesheetloaded = true;
|
||||
},
|
||||
|
||||
switchStylesheet: function( variant, without_check ){
|
||||
var link = document.querySelector( '#variant-style' );
|
||||
if( !link ){
|
||||
return;
|
||||
}
|
||||
var old_path = link.getAttribute( 'href' );
|
||||
var new_path = this.generateVariantPath( variant, old_path );
|
||||
this.isstylesheetloaded = false;
|
||||
|
||||
// Chrome needs a new element to trigger the load callback again
|
||||
var new_link = document.createElement( 'link' );
|
||||
new_link.id = 'variant-style';
|
||||
new_link.rel = 'stylesheet';
|
||||
new_link.onload = this.onLoadStylesheet;
|
||||
new_link.setAttribute( 'href', new_path );
|
||||
link.parentNode.replaceChild( new_link, link );
|
||||
},
|
||||
|
||||
changeVariant: function( variant ){
|
||||
if( variant == this.customvariantname ){
|
||||
var variantbase = window.localStorage.getItem( baseUriFull+'customvariantbase' );
|
||||
if( this.variants.indexOf( variantbase ) < 0 ){
|
||||
variant = '';
|
||||
}
|
||||
if( !window.localStorage.getItem( baseUriFull+'customvariant' ) ){
|
||||
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();
|
||||
}
|
||||
},
|
||||
|
||||
generator: function( vargenerator, vardownload, varreset ){
|
||||
var graphDefinition = this.generateGraph();
|
||||
var graphs = document.querySelectorAll( vargenerator );
|
||||
graphs.forEach( function( e ){ e.innerHTML = graphDefinition; });
|
||||
|
||||
var interval_id = setInterval( function(){
|
||||
if( document.querySelectorAll( vargenerator + '.mermaid > svg' ).length ){
|
||||
clearInterval( interval_id );
|
||||
this.styleGraph();
|
||||
}
|
||||
}.bind( this ), 25 );
|
||||
|
||||
var downloads = document.querySelectorAll( vardownload );
|
||||
downloads.forEach( function( e ){ e.addEventListener('click', this.getStylesheet.bind( this )); }.bind( this ) );
|
||||
|
||||
var resets = document.querySelectorAll( varreset );
|
||||
resets.forEach( function( e ){ e.addEventListener('click', this.resetVariant.bind( this )); }.bind( this ) );
|
||||
},
|
||||
|
||||
download: function(data, mimetype, filename){
|
||||
console.log( data );
|
||||
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(){
|
||||
this.download( this.generateStylesheet(), 'text/css', 'theme-' + this.customvariantname + '.css' );
|
||||
},
|
||||
|
||||
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);
|
||||
}
|
||||
},
|
||||
|
||||
normalizeColor: function( c ){
|
||||
if( !c || !c.trim ){
|
||||
return c;
|
||||
}
|
||||
c = c.trim();
|
||||
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, " " );
|
||||
return c;
|
||||
},
|
||||
|
||||
getColorValue: function( c ){
|
||||
return this.normalizeColor( getComputedStyle( document.documentElement ).getPropertyValue( '--INTERNAL-'+c ) );
|
||||
},
|
||||
|
||||
findLoadedStylesheet: function( id ){
|
||||
var style = null;
|
||||
for( var n = 0; n < document.styleSheets.length; ++n ){
|
||||
if( document.styleSheets[n].ownerNode.id == id ){
|
||||
var s = document.styleSheets[n];
|
||||
for( var m = 0; m < s.rules.length; ++m ){
|
||||
if( s.rules[m].selectorText == ':root' ){
|
||||
style = s.rules[m].style;
|
||||
break;
|
||||
}
|
||||
}
|
||||
break;
|
||||
}
|
||||
}
|
||||
return style;
|
||||
},
|
||||
|
||||
changeColor: function( c, without_prompt ){
|
||||
without_prompt = without_prompt || false;
|
||||
var read_style = this.findLoadedStylesheet( 'custom-variant-style' );
|
||||
var write_style = this.findLoadedStylesheet( 'variant-style' );
|
||||
if( !read_style ){
|
||||
read_style = write_style;
|
||||
}
|
||||
|
||||
var e = this.findColor( c );
|
||||
var p = this.normalizeColor( read_style.getPropertyValue( '--'+c ) ).replace( '--INTERNAL-', '--' );
|
||||
var f = this.getColorValue( e.fallback );
|
||||
|
||||
var v = this.getColorValue( e.name );
|
||||
if( v == f || v == this.normalizeColor(e.default) ){
|
||||
v = '';
|
||||
}
|
||||
if( p ){
|
||||
v = p;
|
||||
}
|
||||
|
||||
var n = '';
|
||||
if( without_prompt ){
|
||||
n = v;
|
||||
}
|
||||
else{
|
||||
var t = c + '\n\n' + e.tooltip + '\n';
|
||||
if( e.fallback ){
|
||||
t += '\nInherits value "' + f + '" from ' + e.fallback + ' if not set\n';
|
||||
}
|
||||
if( e.default ){
|
||||
t += '\nDefaults to value "' + this.normalizeColor(e.default) + '" if not set\n';
|
||||
}
|
||||
n = prompt( t, v );
|
||||
}
|
||||
|
||||
if( n ){
|
||||
n = this.normalizeColor( n ).replace( '--INTERNAL-', '--' ).replace( '--', '--INTERNAL-' );
|
||||
if( without_prompt || n != v ){
|
||||
write_style.setProperty( '--'+c, n );
|
||||
}
|
||||
if( !without_prompt ){
|
||||
this.saveCustomVariant();
|
||||
}
|
||||
}
|
||||
else if( n !== null){
|
||||
write_style.removeProperty( '--'+c );
|
||||
if( !without_prompt ){
|
||||
this.saveCustomVariant();
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
findColor: function( name ){
|
||||
var f = this.variantvariables.find( function( x ){
|
||||
return x.name == name;
|
||||
});
|
||||
return f;
|
||||
},
|
||||
|
||||
generateColorVariable: function( e ){
|
||||
var v = '';
|
||||
var gen = true;
|
||||
if( e.fallback ){
|
||||
f = this.findColor( e.fallback );
|
||||
gen = this.getColorValue(f.name) != this.getColorValue(e.name);
|
||||
}
|
||||
else if( e.default ){
|
||||
gen = this.normalizeColor(e.default) != this.getColorValue(e.name);
|
||||
}
|
||||
if( gen ){
|
||||
v += ' --' + e.name + ': ' + this.getColorValue(e.name) + '; /* ' + e.tooltip + ' */\n';
|
||||
}
|
||||
return v;
|
||||
},
|
||||
|
||||
generateStylesheet: function(){
|
||||
var style =
|
||||
'/* ' + this.customvariantname + ' */\n' +
|
||||
':root {\n' +
|
||||
this.variantvariables.sort( function( l, r ){ return l.name.localeCompare(r.name); } ).reduce( function( a, e ){ return a + this.generateColorVariable( e ); }.bind( this ), '' ) +
|
||||
'}\n';
|
||||
return style;
|
||||
},
|
||||
|
||||
styleGraphGroup: function( selector, colorvar ){
|
||||
this.adjustCSSRules( '#body svg '+selector+' > rect', 'color: var(--INTERNAL-'+colorvar+'); fill: var(--INTERNAL-'+colorvar+'); stroke: #80808080;' );
|
||||
this.adjustCSSRules( '#body svg '+selector+' > .label .nodeLabel', 'color: var(--INTERNAL-'+colorvar+'); fill: var(--INTERNAL-'+colorvar+'); stroke: #80808080;' );
|
||||
this.adjustCSSRules( '#body svg '+selector+' > .cluster-label .nodeLabel', 'color: var(--INTERNAL-'+colorvar+'); fill: var(--INTERNAL-'+colorvar+'); stroke: #80808080;' );
|
||||
this.adjustCSSRules( '#body svg '+selector+' .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( '#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 edge = '';
|
||||
if( e.fallback && e.group == this.findColor( e.fallback ).group ){
|
||||
edge += e.fallback+':::'+e.fallback+' --> '+e.name+':::'+e.name;
|
||||
}
|
||||
else{
|
||||
edge += e.name+':::'+e.name;
|
||||
}
|
||||
return edge;
|
||||
},
|
||||
|
||||
generateGraphVarGroupedEdge: function( e ){
|
||||
var edge = '';
|
||||
if( e.fallback && e.group != this.findColor( e.fallback ).group ){
|
||||
edge += ' ' + e.fallback+':::'+e.fallback+' --> '+e.name+':::'+e.name + '\n';
|
||||
}
|
||||
return edge;
|
||||
},
|
||||
|
||||
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' +
|
||||
g_groups[ 'header' ].reduce( function( a, e ){ return a + ' ' + this.generateGraphGroupedEdge( e ) + '\n'; }.bind( this ), '' ) +
|
||||
' end\n' +
|
||||
' subgraph menusections["sections"]\n' +
|
||||
' direction LR\n' +
|
||||
g_groups[ 'sections' ].reduce( function( a, e ){ return a + ' ' + this.generateGraphGroupedEdge( e ) + '\n'; }.bind( this ), '' ) +
|
||||
' end\n' +
|
||||
' end\n' +
|
||||
' subgraph maincontent["content"]\n' +
|
||||
' direction TB\n' +
|
||||
g_groups[ 'content' ].reduce( function( a, e ){ return a + ' ' + this.generateGraphGroupedEdge( e ) + '\n'; }.bind( this ), '' ) +
|
||||
' subgraph mainheadings["headings"]\n' +
|
||||
' direction LR\n' +
|
||||
g_groups[ 'headings' ].reduce( function( a, e ){ return a + ' ' + this.generateGraphGroupedEdge( e ) + '\n'; }.bind( this ), '' ) +
|
||||
' end\n' +
|
||||
' 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' +
|
||||
' 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' +
|
||||
' subgraph coloredboxes["colored boxes"]\n' +
|
||||
' direction LR\n' +
|
||||
g_groups[ 'colored boxes' ].reduce( function( a, e ){ return a + ' ' + this.generateGraphGroupedEdge( e ) + '\n'; }.bind( this ), '' ) +
|
||||
' end\n' +
|
||||
' end\n' +
|
||||
this.variantvariables.reduce( function( a, e ){ return a + this.generateGraphVarGroupedEdge( e ); }.bind( this ), '' ) +
|
||||
g_handler;
|
||||
|
||||
console.log( graph );
|
||||
return graph;
|
||||
},
|
||||
|
||||
variantvariables: [
|
||||
{ name: 'MAIN-TEXT-color', group: 'content', default: '#101010', tooltip: 'text color of content and h1 titles', },
|
||||
{ name: 'MAIN-LINK-color', group: 'content', default: '#486ac9', tooltip: 'link color of content', },
|
||||
{ name: 'MAIN-LINK-HOVER-color', group: 'content', fallback: 'MAIN-LINK-color', tooltip: 'hoverd link color of content', },
|
||||
{ name: 'MAIN-ANCHOR-color', group: 'content', fallback: 'MAIN-LINK-HOVER-color', tooltip: 'anchor color of titles', },
|
||||
{ name: 'MAIN-BG-color', group: 'content', default: '#ffffff', tooltip: 'background color of content', },
|
||||
{ name: 'TAG-BG-color', group: 'content', fallback: 'MENU-HEADER-BG-color', tooltip: 'tag color', },
|
||||
|
||||
{ name: 'MAIN-TITLES-TEXT-color', group: 'headings', default: '#4a4a4a', tooltip: 'text color of h2-h6 titles and transparent box titles', },
|
||||
{ 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', },
|
||||
|
||||
{ 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', },
|
||||
|
||||
{ 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: 'CODE-font', group: 'content', default: '"Consolas", menlo, monospace', tooltip: 'text font of code', },
|
||||
|
||||
{ name: 'MERMAID-theme', group: '3rd party', default: 'default', tooltip: 'name of the default Mermaid theme for this variant, can be overridden in config.toml', },
|
||||
{ name: 'SWAGGER-theme', group: '3rd party', default: 'light', tooltip: 'name of the default Swagger theme for this variant, can be overridden in config.toml', },
|
||||
|
||||
{ name: 'MENU-HEADER-BG-color', group: 'header', default: '#7dc903', tooltip: 'background color of menu header', },
|
||||
{ name: 'MENU-HEADER-BORDER-color', group: 'header', fallback: 'MENU-HEADER-BG-color', tooltip: 'separator color of menu header', },
|
||||
{ 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', },
|
||||
{ name: 'MENU-SEARCH-BORDER-color', group: 'header', fallback: 'MENU-SEARCH-BG-color', tooltip: 'border color of search box', },
|
||||
|
||||
{ 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-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', },
|
||||
{ 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', },
|
||||
{ name: 'MENU-VISITED-color', group: 'sections', default: '#506397', tooltip: 'icon color of visited menu topics if configured', },
|
||||
{ name: 'MENU-SECTION-HR-color', group: 'sections', default: '#606060', tooltip: 'separator color of menu footer', },
|
||||
|
||||
{ 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', },
|
||||
{ name: 'BOX-TEXT-color', group: 'colored boxes', default: 'rgba( 16, 16, 16, 1 )', tooltip: 'text color of colored box content', },
|
||||
|
||||
{ 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', },
|
||||
],
|
||||
};
|
||||
Loading…
Add table
Add a link
Reference in a new issue