"Select All" for each code box.
nicholas.alipaz - March 25, 2009 - 08:09
| Project: | GeSHi Filter for syntax highlighting |
| Version: | 6.x-1.x-dev |
| Component: | User interface |
| Category: | feature request |
| Priority: | normal |
| Assigned: | Unassigned |
| Status: | needs work |
Jump to:
Description
I suggest adding a "Select All" link to code boxes. fairly easy I was able to do it on my site.
in geshifilterpages.inc change:
$source_code = '<div class="geshifilter">'. $geshi->parse_code() .'</div>';
to:
$source_code = '<a href="#" class="selectall" onclick="selectCode(this); return false;">Select All</a><div class="geshifilter">'. $geshi->parse_code() .'</div>';
add to your .js file this function ("borrowed" from phpBB3):
function selectCode(a) {
// Get ID of code block
var e = a.nextSibling.getElementsByTagName('PRE')[0];
// Not IE
if (window.getSelection) {
var s = window.getSelection();
// Safari
if (s.setBaseAndExtent) {
s.setBaseAndExtent(e, 0, e, e.innerText.length - 1);
}
// Firefox and Opera
else {
var r = document.createRange();
r.selectNodeContents(e);
s.removeAllRanges();
s.addRange(r);
}
}
// Some older browsers
else if (document.getSelection) {
var s = document.getSelection();
var r = document.createRange();
r.selectNodeContents(e);
s.removeAllRanges();
s.addRange(r);
}
// IE
else if (document.selection) {
var r = document.body.createTextRange();
r.moveToElementText(e);
r.select();
}
}then of course add a setting to turn it on and off and perhaps some css to make it look like part of the code box. My css looks like:
a.selectall{border:1px solid #CCCCCC;background-color:#F8F8F8;display:block;margin:0.5em 0.5em -0.6em 0.5em;padding:0.2em 0.5em;}
a.selectall:focus, a.selectall:active {outline:0;}Have a look at this post to see it in action:
http://custombuttons2.com/comment/245/I-see-you-have-put-it-your-site
#1
Just thought I would make an alteration to my suggestion...
Again see http://custombuttons2.com/comment/245/I-see-you-have-put-it-your-site for a demonstration.
$source_codewould be better to be:$source_code = '<div class="selectall">'.$lang.': <a class="selectall" href="#select" onclick="selectCode(this); return false;">Select All</a></div><div class="geshifilter">'. $geshi->parse_code() .'</div>';This allows us a little more flexibility in styling and it adds the syntax highlighting language next to the "select all" link.
But if we change this then the javascript function needs to change
var eto:var e = a.parentNode.nextSibling.getElementsByTagName('PRE')[0];then the css would be:
div.selectall{font-weight:bold;text-transform:uppercase;border:1px solid #CCCCCC;background-color:#F8F8F8;display:block;margin:0.5em 0.5em -0.6em 0.5em;padding:0.2em 0.5em;}a.selectall{text-transform:capitalize;font-weight:normal;}
a.selectall:focus, a.selectall:active {outline:0;}
#2
Good idea,
but this feature should be built on jQuery (which is built in in Drupal) instead of the custom javascript you provided.
I'm not very familiar with jQuery, so I can't do it myself,
but I guess it would only require like 5 lines of jQuery magic.