[ADD] doc: language switcher
This commit is contained in:
parent
4d2b24adcb
commit
abfe20bff6
|
@ -25,6 +25,76 @@ $(function () {
|
||||||
});
|
});
|
||||||
}, 100);
|
}, 100);
|
||||||
|
|
||||||
|
// lang switcher
|
||||||
|
function findSheet(pattern, fromSheet) {
|
||||||
|
if (fromSheet) {
|
||||||
|
for(var i=0; i<fromSheet.cssRules.length; ++i) {
|
||||||
|
var rule = fromSheet.cssRules[i];
|
||||||
|
if (rule.type !== CSSRule.IMPORT_RULE) { continue; }
|
||||||
|
if (pattern.test(rule.href)) {
|
||||||
|
return rule.styleSheet;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
var sheets = document.styleSheets;
|
||||||
|
for(var j=0; j<sheets.length; ++j) {
|
||||||
|
var sheet = sheets[j];
|
||||||
|
if (pattern.test(sheet.href)) {
|
||||||
|
return sheet;
|
||||||
|
}
|
||||||
|
var subSheet;
|
||||||
|
if (subSheet = findSheet(pattern, sheet)) {
|
||||||
|
return subSheet;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
function buildSwitcher(languages) {
|
||||||
|
var root = document.createElement('ul');
|
||||||
|
root.className = "switcher";
|
||||||
|
for(var i=0; i<languages.length; ++i) {
|
||||||
|
var item = document.createElement('li');
|
||||||
|
item.textContent = languages[i];
|
||||||
|
if (i === 0) {
|
||||||
|
item.className = "active";
|
||||||
|
}
|
||||||
|
root.appendChild(item);
|
||||||
|
}
|
||||||
|
return root;
|
||||||
|
}
|
||||||
|
if ($('div.document-super').hasClass('stripe')) { (function () {
|
||||||
|
var sheet = findSheet(/style\.css$/);
|
||||||
|
if (!sheet) { return; }
|
||||||
|
|
||||||
|
// collect languages
|
||||||
|
var languages = {};
|
||||||
|
$('div.switchable').each(function () {
|
||||||
|
var classes = this.className.split(/\s+/);
|
||||||
|
for (var i = 0; i < classes.length; ++i) {
|
||||||
|
var cls = classes[i];
|
||||||
|
if (!/^highlight-/.test(cls)) { continue; }
|
||||||
|
languages[cls.slice(10)] = true;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
$(buildSwitcher(Object.keys(languages)))
|
||||||
|
.prependTo('div.documentwrapper')
|
||||||
|
.on('click', 'li', function (e) {
|
||||||
|
$(e.target).addClass('active')
|
||||||
|
.siblings().removeClass('active');
|
||||||
|
var id = e.target.textContent;
|
||||||
|
var lastIndex = sheet.cssRules.length - 1;
|
||||||
|
var content = sheet.cssRules[lastIndex].style.cssText;
|
||||||
|
var sel = [
|
||||||
|
'.stripe .only-', id, ', ',
|
||||||
|
'.stripe .highlight-', id, ' > .highlight'
|
||||||
|
].join('');
|
||||||
|
sheet.deleteRule(lastIndex);
|
||||||
|
sheet.insertRule(sel + '{' + content + '}', lastIndex);
|
||||||
|
});
|
||||||
|
})(); }
|
||||||
|
|
||||||
// Config ZeroClipboard
|
// Config ZeroClipboard
|
||||||
ZeroClipboard.config({
|
ZeroClipboard.config({
|
||||||
moviePath: '_static/ZeroClipboard.swf',
|
moviePath: '_static/ZeroClipboard.swf',
|
||||||
|
|
|
@ -6757,8 +6757,43 @@ td.field-body > ul {
|
||||||
border-left: 1px solid #777777;
|
border-left: 1px solid #777777;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.stripe .switchable > .highlight,
|
.stripe .switcher {
|
||||||
.stripe [class*=only-] {
|
color: white;
|
||||||
|
width: auto !important;
|
||||||
|
float: none !important;
|
||||||
|
position: fixed;
|
||||||
|
display: -webkit-flex;
|
||||||
|
display: flex;
|
||||||
|
-webkit-justify-content: flex-end;
|
||||||
|
justify-content: flex-end;
|
||||||
|
right: 0.5em;
|
||||||
|
list-style: none;
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
z-index: 5;
|
||||||
|
}
|
||||||
|
.stripe .switcher li {
|
||||||
|
background-color: #0f131a;
|
||||||
|
padding: 0.4em 1em;
|
||||||
|
border: 1px solid #333;
|
||||||
|
border-left-width: 0;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.stripe .switcher li:first-child {
|
||||||
|
border-left-width: 1px;
|
||||||
|
border-radius: 5px 0 0 5px;
|
||||||
|
}
|
||||||
|
.stripe .switcher li:last-child {
|
||||||
|
border-radius: 0 5px 5px 0;
|
||||||
|
}
|
||||||
|
.stripe .switcher li:hover {
|
||||||
|
background-color: #222;
|
||||||
|
}
|
||||||
|
.stripe .switcher li.active {
|
||||||
|
background-color: #333;
|
||||||
|
}
|
||||||
|
.stripe [class*=only-],
|
||||||
|
.stripe .switchable > .highlight {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
.stripe .only-python,
|
.stripe .only-python,
|
||||||
|
|
|
@ -593,9 +593,49 @@ td.field-body {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.switcher {
|
||||||
|
color: white;
|
||||||
|
width: auto !important;
|
||||||
|
float: none !important;
|
||||||
|
|
||||||
|
position: fixed;
|
||||||
|
display: -webkit-flex;
|
||||||
|
display: flex;
|
||||||
|
-webkit-justify-content: flex-end;
|
||||||
|
justify-content: flex-end;
|
||||||
|
|
||||||
|
right: 0.5em;
|
||||||
|
list-style: none;
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
z-index: 5;
|
||||||
|
|
||||||
|
li {
|
||||||
|
background-color: #0f131a;
|
||||||
|
padding: 0.4em 1em;
|
||||||
|
border: 1px solid #333;
|
||||||
|
border-left-width: 0;
|
||||||
|
cursor: pointer;
|
||||||
|
&:first-child {
|
||||||
|
border-left-width: 1px;
|
||||||
|
border-radius: 5px 0 0 5px;
|
||||||
|
}
|
||||||
|
&:last-child {
|
||||||
|
border-radius: 0 5px 5px 0;
|
||||||
|
}
|
||||||
|
&:hover {
|
||||||
|
background-color: #222;
|
||||||
|
}
|
||||||
|
&.active {
|
||||||
|
background-color: #333;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
// === show/hide code snippets ===
|
// === show/hide code snippets ===
|
||||||
.switchable > .highlight,
|
[class*=only-],
|
||||||
[class*=only-] {
|
.switchable > .highlight {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
// must be final rule of page
|
// must be final rule of page
|
||||||
|
|
Loading…
Reference in New Issue