[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:
Xavier Morel 2015-01-19 15:36:26 +01:00
parent 52a39e2dd2
commit 4a4d3a60bb
6 changed files with 92 additions and 167 deletions

View File

@ -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'
] %}

View File

@ -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

View File

@ -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;

View File

@ -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