[ADD] ZeroClipboard-based "copy" button on snippets
Also fix ruby setup code, some of its bits were actually Python and didn't quite work when pasted into irb...
This commit is contained in:
parent
c98e5b2d2c
commit
5d79dd80e5
|
@ -35,28 +35,28 @@ $(function () {
|
||||||
* actually not all blocks because we don't want to add the setup bits to
|
* actually not all blocks because we don't want to add the setup bits to
|
||||||
the setup bits, so that's kinda shit
|
the setup bits, so that's kinda shit
|
||||||
*/
|
*/
|
||||||
document.addEventListener('copy', function (e) {
|
|
||||||
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;
|
|
||||||
}
|
|
||||||
e.preventDefault();
|
|
||||||
|
|
||||||
// get generic setup code
|
document.addEventListener('copy', copyCode);
|
||||||
var prefix = document.querySelector('.setupcode.highlight-' + lang).textContent;
|
|
||||||
|
|
||||||
// prepend setup code to current snippet, get all of current snippet
|
ZeroClipboard.config({
|
||||||
// in case only part of it was selected
|
swfPath: '../_static/zeroclipboard-2.1.6/ZeroClipboard.swf',
|
||||||
var data = prefix + target.textContent;
|
flashLoadTimeout: 3e3,
|
||||||
// sane browsers
|
});
|
||||||
e.clipboardData.setData('text/plain', data);
|
var zc = new ZeroClipboard();
|
||||||
// MSIE
|
zc.on('ready', function () {
|
||||||
e.clipboardData.setData('Text', data);
|
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
|
// stripe page stuff
|
||||||
|
@ -96,6 +96,36 @@ $(function () {
|
||||||
});
|
});
|
||||||
})(); }
|
})(); }
|
||||||
|
|
||||||
|
|
||||||
|
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
|
* @param {Node} node highlight node to get the language of
|
||||||
* @returns {String|null} either the highlight language or null
|
* @returns {String|null} either the highlight language or null
|
||||||
|
|
|
@ -6653,23 +6653,20 @@ div.section > h2 {
|
||||||
word-break: normal;
|
word-break: normal;
|
||||||
word-wrap: normal;
|
word-wrap: normal;
|
||||||
}
|
}
|
||||||
|
.switchable .highlight.with-btn-clipboard pre {
|
||||||
|
padding-right: 50px;
|
||||||
|
}
|
||||||
/*
|
/*
|
||||||
* ZeroClipboard styles
|
* ZeroClipboard styles
|
||||||
*/
|
*/
|
||||||
.zero-clipboard {
|
.highlight {
|
||||||
position: relative;
|
position: relative;
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
@media (min-width: 768px) {
|
|
||||||
.zero-clipboard {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
.btn-clipboard {
|
.btn-clipboard {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0;
|
top: 0;
|
||||||
right: 0;
|
right: 0;
|
||||||
z-index: 10;
|
z-index: 3;
|
||||||
display: block;
|
display: block;
|
||||||
padding: 5px 8px;
|
padding: 5px 8px;
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
|
@ -6679,10 +6676,14 @@ div.section > h2 {
|
||||||
border: 1px solid #e1e1e8;
|
border: 1px solid #e1e1e8;
|
||||||
border-radius: 0 4px 0 4px;
|
border-radius: 0 4px 0 4px;
|
||||||
}
|
}
|
||||||
.btn-clipboard-hover {
|
.btn-clipboard:focus {
|
||||||
color: #fff;
|
outline: none;
|
||||||
background-color: #a24689;
|
}
|
||||||
border-color: #a24689;
|
.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 {
|
img.align-center {
|
||||||
display: block;
|
display: block;
|
||||||
|
|
|
@ -473,23 +473,22 @@ div.section > h2 {
|
||||||
word-break: normal;
|
word-break: normal;
|
||||||
word-wrap: normal;
|
word-wrap: normal;
|
||||||
}
|
}
|
||||||
|
.switchable .highlight.with-btn-clipboard pre {
|
||||||
|
// avoid copy button overlapping with even long lines
|
||||||
|
padding-right: 50px;
|
||||||
|
}
|
||||||
|
|
||||||
/*
|
/*
|
||||||
* ZeroClipboard styles
|
* ZeroClipboard styles
|
||||||
*/
|
*/
|
||||||
|
.highlight {
|
||||||
.zero-clipboard {
|
|
||||||
position: relative;
|
position: relative;
|
||||||
display: none;
|
|
||||||
@media (min-width: @screen-sm-min) {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
.btn-clipboard {
|
.btn-clipboard {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0;
|
top: 0;
|
||||||
right: 0;
|
right: 0;
|
||||||
z-index: 10;
|
z-index: 3;
|
||||||
display: block;
|
display: block;
|
||||||
padding: 5px 8px;
|
padding: 5px 8px;
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
|
@ -498,11 +497,15 @@ div.section > h2 {
|
||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
border: 1px solid #e1e1e8;
|
border: 1px solid #e1e1e8;
|
||||||
border-radius: 0 4px 0 4px;
|
border-radius: 0 4px 0 4px;
|
||||||
}
|
|
||||||
.btn-clipboard-hover {
|
&:focus {
|
||||||
color: #fff;
|
outline: none;
|
||||||
background-color: @brand-primary;
|
}
|
||||||
border-color: @brand-primary;
|
|
||||||
|
&.active {
|
||||||
|
background-color: #ffffad;
|
||||||
|
.transition(background-color .5s linear);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// rST styles
|
// rST styles
|
||||||
|
|
|
@ -43,8 +43,8 @@ Connection and authentication
|
||||||
url, db, username, password = \
|
url, db, username, password = \
|
||||||
info['host'], info['database'], info['user'], info['password']
|
info['host'], info['database'], info['user'], info['password']
|
||||||
common = XMLRPC::Client.new2("#{url}/xmlrpc/2/common")
|
common = XMLRPC::Client.new2("#{url}/xmlrpc/2/common")
|
||||||
uid = common.authenticate(db, username, password, {})
|
uid = common.call('authenticate', db, username, password, {})
|
||||||
models = xmlrpclib.ServerProxy('{}/xmlrpc/2/object'.format(url))
|
models = XMLRPC::Client.new2("#{url}/xmlrpc/2/object").proxy
|
||||||
|
|
||||||
.. code-block:: php
|
.. code-block:: php
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue