[ADD] doc: language switcher
This commit is contained in:
parent
4d2b24adcb
commit
abfe20bff6
|
@ -25,6 +25,76 @@ $(function () {
|
|||
});
|
||||
}, 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
|
||||
ZeroClipboard.config({
|
||||
moviePath: '_static/ZeroClipboard.swf',
|
||||
|
|
|
@ -6757,8 +6757,43 @@ td.field-body > ul {
|
|||
border-left: 1px solid #777777;
|
||||
}
|
||||
}
|
||||
.stripe .switchable > .highlight,
|
||||
.stripe [class*=only-] {
|
||||
.stripe .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;
|
||||
}
|
||||
.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;
|
||||
}
|
||||
.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 ===
|
||||
.switchable > .highlight,
|
||||
[class*=only-] {
|
||||
[class*=only-],
|
||||
.switchable > .highlight {
|
||||
display: none;
|
||||
}
|
||||
// must be final rule of page
|
||||
|
|
Loading…
Reference in New Issue