[IMP] doc: simplify webservice api doc
* remove ZeroClipboard, pain to test locally and deployment didn't work right due to needing absolute path to the swf always * remove the clipboard alteration on the fly, behaves oddly and can be confusing * add an explicit button to expand and collapse the setup content * fixup some styling
This commit is contained in:
parent
52a39e2dd2
commit
4a4d3a60bb
|
@ -6,7 +6,6 @@
|
|||
'_static/bootstrap/js/tooltip.js',
|
||||
'_static/bootstrap/js/collapse.js',
|
||||
'_static/bootstrap/js/dropdown.js',
|
||||
'_static/zeroclipboard-2.1.6/ZeroClipboard.min.js',
|
||||
'_static/app.js'
|
||||
] %}
|
||||
|
||||
|
|
|
@ -25,40 +25,6 @@ $(function () {
|
|||
});
|
||||
}, 100);
|
||||
|
||||
/*
|
||||
for clipboard:
|
||||
* add per-language setup code to document, hidden
|
||||
* adds button to each switchable language block except when they're setup
|
||||
stuff because fuck'em
|
||||
* per-language, add clipboard hook to prefix with setup bit on-copy
|
||||
* setup bit is... ?
|
||||
* actually not all blocks because we don't want to add the setup bits to
|
||||
the setup bits, so that's kinda shit
|
||||
*/
|
||||
|
||||
document.addEventListener('copy', copyCode);
|
||||
|
||||
ZeroClipboard.config({
|
||||
swfPath: '../_static/zeroclipboard-2.1.6/ZeroClipboard.swf',
|
||||
flashLoadTimeout: 3e3,
|
||||
});
|
||||
var zc = new ZeroClipboard();
|
||||
zc.on('ready', function () {
|
||||
var $highlighted = $('.switchable:not(.setup) .highlight').addClass('with-btn-clipboard');
|
||||
var $clipboard_buttons =
|
||||
$('<button type="button" class="btn-clipboard">Copy</button>')
|
||||
.on('transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd', function () {
|
||||
$(this).removeClass('active');
|
||||
})
|
||||
.prependTo($highlighted);
|
||||
zc.clip($clipboard_buttons);
|
||||
});
|
||||
zc.on('copy', function (e) {
|
||||
// yellow flash
|
||||
$(e.target).addClass('active');
|
||||
copyCode(e);
|
||||
});
|
||||
|
||||
// stripe page stuff
|
||||
if ($('div.document-super').hasClass('stripe')) { (function () {
|
||||
// iterate on highlighted PL blocks (but not results because that'd
|
||||
|
@ -95,38 +61,31 @@ $(function () {
|
|||
sheet.insertRule(sel + '{' + content + '}', lastIndex);
|
||||
});
|
||||
$switcher.affix();
|
||||
|
||||
$('<button type="button" class="btn-show-setup">Toggle Setup Code</button>')
|
||||
.prependTo('.switchable:not(.setup) .highlight');
|
||||
$(document).on('click', '.btn-show-setup', function (e) {
|
||||
var $target = $(e.target);
|
||||
var target = $target.closest('.switchable:not(.setup)').get(0);
|
||||
// not in a switchable (???)
|
||||
if (!target) { return; }
|
||||
var lang = getHighlightLanguage(target);
|
||||
if (!lang) {
|
||||
// switchable without highlight (e.g. language-specific notes),
|
||||
// don't munge
|
||||
return;
|
||||
}
|
||||
|
||||
var $setup_code = $target.prev();
|
||||
if ($setup_code.length) {
|
||||
// remove existing setup code
|
||||
$setup_code.remove();
|
||||
} else {
|
||||
$('.setupcode.highlight-' + lang + ' pre').clone().insertBefore($target);
|
||||
}
|
||||
});
|
||||
})(); }
|
||||
|
||||
|
||||
function copyCode(e) {
|
||||
// works for both C-c and "Copy" button if copy button is injected
|
||||
// inside highlighted code section
|
||||
var target = $(e.target).closest('.switchable:not(.setup)').get(0);
|
||||
// not in a switchable
|
||||
if (!target) { return; }
|
||||
var lang = getHighlightLanguage(target);
|
||||
if (!lang) {
|
||||
// switchable without highlight (e.g. language-specific notes),
|
||||
// don't munge
|
||||
return;
|
||||
}
|
||||
|
||||
// get generic setup code
|
||||
var setup_selector = '.setupcode.highlight-' + lang + ' pre';
|
||||
var setup = document.querySelector(setup_selector).textContent;
|
||||
|
||||
// prepend setup code to current snippet, get all of current snippet
|
||||
// in case only part of it was selected. Ensure we don't get e.g.
|
||||
// button text around snippet itself
|
||||
var data = setup + '\n' + target.querySelector('pre').textContent;
|
||||
// sane browsers & ZeroClipboard
|
||||
e.clipboardData.setData('text/plain', data);
|
||||
// MSIE
|
||||
e.clipboardData.setData('Text', data);
|
||||
|
||||
// no preventDefault on ZC event
|
||||
e.preventDefault && e.preventDefault();
|
||||
}
|
||||
/**
|
||||
* @param {Node} node highlight node to get the language of
|
||||
* @returns {String|null} either the highlight language or null
|
||||
|
|
|
@ -4076,7 +4076,7 @@ select[multiple].input-group-sm > .input-group-btn > .btn {
|
|||
}
|
||||
}
|
||||
.navbar-default {
|
||||
background-color: #ffffff;
|
||||
background-color: white;
|
||||
border-color: 0;
|
||||
}
|
||||
.navbar-default .navbar-brand {
|
||||
|
@ -6663,49 +6663,43 @@ div.section > h2 {
|
|||
.admonition.exercise > .admonition-title {
|
||||
color: #555555;
|
||||
}
|
||||
/*
|
||||
* Code snippets
|
||||
*
|
||||
* Generated via Pygments
|
||||
*/
|
||||
.highlight {
|
||||
position: relative;
|
||||
color: #333333;
|
||||
background: #eeeeee none !important;
|
||||
border: 1px solid #777777;
|
||||
border-radius: 4px 0 4px 4px;
|
||||
margin: 10px 0;
|
||||
}
|
||||
.highlight pre {
|
||||
padding: 4px;
|
||||
padding: 0;
|
||||
margin: 10px;
|
||||
font-size: 75%;
|
||||
word-break: normal;
|
||||
word-wrap: normal;
|
||||
background: none;
|
||||
border: none;
|
||||
}
|
||||
.switchable .highlight.with-btn-clipboard pre {
|
||||
padding-right: 50px;
|
||||
.highlight:hover .btn-show-setup {
|
||||
display: block;
|
||||
}
|
||||
/*
|
||||
* ZeroClipboard styles
|
||||
*/
|
||||
.highlight {
|
||||
position: relative;
|
||||
}
|
||||
.btn-clipboard {
|
||||
.highlight .btn-show-setup {
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 100%;
|
||||
right: 0;
|
||||
z-index: 3;
|
||||
display: block;
|
||||
padding: 5px 8px;
|
||||
font-size: 12px;
|
||||
color: #777;
|
||||
color: #777777;
|
||||
cursor: pointer;
|
||||
background-color: #fff;
|
||||
border: 1px solid #e1e1e8;
|
||||
border-radius: 0 4px 0 4px;
|
||||
border: 1px solid #777777;
|
||||
border-radius: 4px 4px 0 0;
|
||||
background: inherit;
|
||||
}
|
||||
.btn-clipboard:focus {
|
||||
.highlight .btn-show-setup:focus {
|
||||
outline: none;
|
||||
}
|
||||
.btn-clipboard.active {
|
||||
background-color: #ffffad;
|
||||
-webkit-transition: background-color 0.5s linear;
|
||||
-o-transition: background-color 0.5s linear;
|
||||
transition: background-color 0.5s linear;
|
||||
}
|
||||
img.align-center {
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
|
@ -6843,20 +6837,14 @@ td.field-body > ul {
|
|||
border-bottom-color: #777777;
|
||||
border-right-color: #777777;
|
||||
}
|
||||
.stripe .section > .force-right pre,
|
||||
.stripe .section > [class*=highlight] pre {
|
||||
padding: 0;
|
||||
margin: 10px;
|
||||
background: none;
|
||||
border: none;
|
||||
}
|
||||
.stripe .section > .force-right .highlight,
|
||||
.stripe .section > [class*=highlight] .highlight {
|
||||
border-color: #555555;
|
||||
border-style: solid;
|
||||
border-width: 1px 0;
|
||||
border-radius: 0;
|
||||
color: #cccccc;
|
||||
background: none;
|
||||
background: none !important;
|
||||
/* Line Numbers */
|
||||
/* Comment */
|
||||
/* Error */
|
||||
|
@ -7243,14 +7231,12 @@ td.field-body > ul {
|
|||
.stripe .highlight pre {
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
.stripe .btn-clipboard {
|
||||
.stripe .btn-show-setup {
|
||||
background-color: transparent;
|
||||
color: #eeeeee;
|
||||
border-color: #777777;
|
||||
border-top: none;
|
||||
border-top-right-radius: 0;
|
||||
}
|
||||
.stripe .btn-clipboard.active {
|
||||
.stripe .btn-show-setup.active {
|
||||
background-color: #555555;
|
||||
-webkit-transition: background-color 0.5s linear;
|
||||
-o-transition: background-color 0.5s linear;
|
||||
|
|
|
@ -465,50 +465,50 @@ div.section > h2 {
|
|||
}
|
||||
}
|
||||
|
||||
/*
|
||||
* Code snippets
|
||||
*
|
||||
* Generated via Pygments
|
||||
*/
|
||||
.highlight pre {
|
||||
padding: 4px;
|
||||
font-size: 75%;
|
||||
// don't break lines within words
|
||||
word-break: normal;
|
||||
word-wrap: normal;
|
||||
}
|
||||
.switchable .highlight.with-btn-clipboard pre {
|
||||
// avoid copy button overlapping with even long lines
|
||||
padding-right: 50px;
|
||||
}
|
||||
|
||||
/*
|
||||
* ZeroClipboard styles
|
||||
*/
|
||||
.highlight {
|
||||
position: relative;
|
||||
}
|
||||
.btn-clipboard {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
z-index: 3;
|
||||
display: block;
|
||||
padding: 5px 8px;
|
||||
font-size: 12px;
|
||||
color: #777;
|
||||
cursor: pointer;
|
||||
background-color: #fff;
|
||||
border: 1px solid #e1e1e8;
|
||||
border-radius: 0 4px 0 4px;
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
// move styling from pre to highlight so can have multiple pre elements in
|
||||
// a single "code block" for ease of adding and removing setup code &al
|
||||
color: @gray-dark;
|
||||
// force override of pygments yellow background background
|
||||
background: @gray-lighter none !important;
|
||||
border: 1px solid @gray-light;
|
||||
border-radius: @border-radius-base 0 @border-radius-base @border-radius-base;
|
||||
margin: 10px 0;
|
||||
|
||||
pre {
|
||||
padding: 0;
|
||||
margin: 10px;
|
||||
font-size: 75%;
|
||||
// don't break lines within words
|
||||
word-break: normal;
|
||||
word-wrap: normal;
|
||||
|
||||
background: none;
|
||||
border: none;
|
||||
}
|
||||
|
||||
&.active {
|
||||
background-color: #ffffad;
|
||||
.transition(background-color .5s linear);
|
||||
&:hover .btn-show-setup {
|
||||
display: block;
|
||||
}
|
||||
.btn-show-setup {
|
||||
display: none;
|
||||
position: absolute;
|
||||
bottom: 100%;
|
||||
right: 0;
|
||||
z-index: 3;
|
||||
padding: 5px 8px;
|
||||
font-size: 12px;
|
||||
color: @gray-light;
|
||||
cursor: pointer;
|
||||
border: 1px solid @gray-light;
|
||||
border-radius: @border-radius-base @border-radius-base 0 0;
|
||||
background: inherit;
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -638,22 +638,14 @@ td.field-body {
|
|||
border-bottom-color: @separator-right;
|
||||
border-right-color: @separator-right;
|
||||
}
|
||||
pre {
|
||||
// padding leads to overflow scrollbar in safari for no reason I understand,
|
||||
// margin does not have that issue
|
||||
padding: 0;
|
||||
margin: 10px;
|
||||
|
||||
background: none;
|
||||
border: none;
|
||||
}
|
||||
.highlight {
|
||||
border-color: @gray;
|
||||
border-style: solid;
|
||||
border-width: 1px 0;
|
||||
border-radius: 0;
|
||||
// solarized-ish from https://gist.github.com/qguv/7936275
|
||||
color: @color-right-code;
|
||||
background: none;
|
||||
background: none !important;
|
||||
.lineno { color: #586e75 } /* Line Numbers */
|
||||
.c { color: #586e75 } /* Comment */
|
||||
.err { color: @color-right-code } /* Error */
|
||||
|
@ -761,12 +753,10 @@ td.field-body {
|
|||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
.btn-clipboard {
|
||||
.btn-show-setup {
|
||||
background-color: transparent;
|
||||
color: @color-right;
|
||||
border-color: @separator-right;
|
||||
border-top: none;
|
||||
border-top-right-radius: 0;
|
||||
|
||||
&.active {
|
||||
background-color: @gray;
|
||||
|
|
File diff suppressed because one or more lines are too long
Binary file not shown.
Loading…
Reference in New Issue