annotate templates/snippet/snippet_details.js @ 104:7d753658dc0e

Add line-number alignment for snippet display Now, the line number lines up with the line itself, even if the line is longer than the width of the box and even if you zoom in. Since this change removes the need for the toggle-wordwrap feature, that has been removed. Also, the line numbers are now right-aligned, and the pre tags have been removed, allowing for neater indentation in the template file. (The useful attributes of <pre> are now being applied via CSS.) There is one minor cosmetic issue: the corners of the snippet display box look a bit fuzzy when the background of the box is dark. Not quite sure how to fix it at the moment.
author dellsystem <ilostwaldo@gmail.com>
date Tue, 11 Sep 2012 17:42:32 -0400
parents f872c643b056
children 3cd28df6f85b
Ignore whitespace changes - Everywhere: Within whitespace: At end of lines:
rev   line source
102
f872c643b056 Updates to snippet functionality (see details)
dellsystem <ilostwaldo@gmail.com>
parents: 48
diff changeset
1 jQuery(document).ready(function () {
46
b7c1c22fdfe8 Format code for 80 columns, add some js to static/ dir
Jordi Gutiérrez Hermoso <jordigh@gmail.com>
parents:
diff changeset
2
b7c1c22fdfe8 Format code for 80 columns, add some js to static/ dir
Jordi Gutiérrez Hermoso <jordigh@gmail.com>
parents:
diff changeset
3 curLine = document.location.hash;
b7c1c22fdfe8 Format code for 80 columns, add some js to static/ dir
Jordi Gutiérrez Hermoso <jordigh@gmail.com>
parents:
diff changeset
4 if(curLine.substring(0,2) == '#l'){
b7c1c22fdfe8 Format code for 80 columns, add some js to static/ dir
Jordi Gutiérrez Hermoso <jordigh@gmail.com>
parents:
diff changeset
5 $('div.snippet div.line'+curLine).addClass('marked');
b7c1c22fdfe8 Format code for 80 columns, add some js to static/ dir
Jordi Gutiérrez Hermoso <jordigh@gmail.com>
parents:
diff changeset
6 }
b7c1c22fdfe8 Format code for 80 columns, add some js to static/ dir
Jordi Gutiérrez Hermoso <jordigh@gmail.com>
parents:
diff changeset
7
b7c1c22fdfe8 Format code for 80 columns, add some js to static/ dir
Jordi Gutiérrez Hermoso <jordigh@gmail.com>
parents:
diff changeset
8 /**
b7c1c22fdfe8 Format code for 80 columns, add some js to static/ dir
Jordi Gutiérrez Hermoso <jordigh@gmail.com>
parents:
diff changeset
9 * Diff Ajax Call
b7c1c22fdfe8 Format code for 80 columns, add some js to static/ dir
Jordi Gutiérrez Hermoso <jordigh@gmail.com>
parents:
diff changeset
10 */
b7c1c22fdfe8 Format code for 80 columns, add some js to static/ dir
Jordi Gutiérrez Hermoso <jordigh@gmail.com>
parents:
diff changeset
11 $("form#diffform").submit(function() {
b7c1c22fdfe8 Format code for 80 columns, add some js to static/ dir
Jordi Gutiérrez Hermoso <jordigh@gmail.com>
parents:
diff changeset
12 $.get("{% url snippet_diff %}", {
b7c1c22fdfe8 Format code for 80 columns, add some js to static/ dir
Jordi Gutiérrez Hermoso <jordigh@gmail.com>
parents:
diff changeset
13 a: $("input[name=a]:checked").val(),
b7c1c22fdfe8 Format code for 80 columns, add some js to static/ dir
Jordi Gutiérrez Hermoso <jordigh@gmail.com>
parents:
diff changeset
14 b: $("input[name=b]:checked").val()
b7c1c22fdfe8 Format code for 80 columns, add some js to static/ dir
Jordi Gutiérrez Hermoso <jordigh@gmail.com>
parents:
diff changeset
15 }, function(data){
48
329a9d17be88 Implement/fix js for snippets and make whiteboxes all same width
Jordi Gutiérrez Hermoso <jordigh@gmail.com>
parents: 47
diff changeset
16 $('#diff').html(data).slideDown('fast');
46
b7c1c22fdfe8 Format code for 80 columns, add some js to static/ dir
Jordi Gutiérrez Hermoso <jordigh@gmail.com>
parents:
diff changeset
17 });
b7c1c22fdfe8 Format code for 80 columns, add some js to static/ dir
Jordi Gutiérrez Hermoso <jordigh@gmail.com>
parents:
diff changeset
18 return false;
b7c1c22fdfe8 Format code for 80 columns, add some js to static/ dir
Jordi Gutiérrez Hermoso <jordigh@gmail.com>
parents:
diff changeset
19 });
b7c1c22fdfe8 Format code for 80 columns, add some js to static/ dir
Jordi Gutiérrez Hermoso <jordigh@gmail.com>
parents:
diff changeset
20
b7c1c22fdfe8 Format code for 80 columns, add some js to static/ dir
Jordi Gutiérrez Hermoso <jordigh@gmail.com>
parents:
diff changeset
21 /**
102
f872c643b056 Updates to snippet functionality (see details)
dellsystem <ilostwaldo@gmail.com>
parents: 48
diff changeset
22 * Changing syntax highlighting colours
f872c643b056 Updates to snippet functionality (see details)
dellsystem <ilostwaldo@gmail.com>
parents: 48
diff changeset
23 */
f872c643b056 Updates to snippet functionality (see details)
dellsystem <ilostwaldo@gmail.com>
parents: 48
diff changeset
24 var currentStyle = $('#change-highlighting').attr('data-default');
f872c643b056 Updates to snippet functionality (see details)
dellsystem <ilostwaldo@gmail.com>
parents: 48
diff changeset
25 $('#change-highlighting').change(function () {
f872c643b056 Updates to snippet functionality (see details)
dellsystem <ilostwaldo@gmail.com>
parents: 48
diff changeset
26 var newStyle = $(this).find(':selected').attr('name');
f872c643b056 Updates to snippet functionality (see details)
dellsystem <ilostwaldo@gmail.com>
parents: 48
diff changeset
27
104
7d753658dc0e Add line-number alignment for snippet display
dellsystem <ilostwaldo@gmail.com>
parents: 102
diff changeset
28 $('.snippet').removeClass(currentStyle).addClass(newStyle);
102
f872c643b056 Updates to snippet functionality (see details)
dellsystem <ilostwaldo@gmail.com>
parents: 48
diff changeset
29 currentStyle = newStyle;
f872c643b056 Updates to snippet functionality (see details)
dellsystem <ilostwaldo@gmail.com>
parents: 48
diff changeset
30 });
46
b7c1c22fdfe8 Format code for 80 columns, add some js to static/ dir
Jordi Gutiérrez Hermoso <jordigh@gmail.com>
parents:
diff changeset
31
b7c1c22fdfe8 Format code for 80 columns, add some js to static/ dir
Jordi Gutiérrez Hermoso <jordigh@gmail.com>
parents:
diff changeset
32 /**
b7c1c22fdfe8 Format code for 80 columns, add some js to static/ dir
Jordi Gutiérrez Hermoso <jordigh@gmail.com>
parents:
diff changeset
33 * Line Highlighting
b7c1c22fdfe8 Format code for 80 columns, add some js to static/ dir
Jordi Gutiérrez Hermoso <jordigh@gmail.com>
parents:
diff changeset
34 */
b7c1c22fdfe8 Format code for 80 columns, add some js to static/ dir
Jordi Gutiérrez Hermoso <jordigh@gmail.com>
parents:
diff changeset
35 $('div.snippet th a').each(function(i){
b7c1c22fdfe8 Format code for 80 columns, add some js to static/ dir
Jordi Gutiérrez Hermoso <jordigh@gmail.com>
parents:
diff changeset
36 $(this).click(function(){
b7c1c22fdfe8 Format code for 80 columns, add some js to static/ dir
Jordi Gutiérrez Hermoso <jordigh@gmail.com>
parents:
diff changeset
37 var j = $(this).text();
b7c1c22fdfe8 Format code for 80 columns, add some js to static/ dir
Jordi Gutiérrez Hermoso <jordigh@gmail.com>
parents:
diff changeset
38 $('div.snippet div.line.marked').removeClass('marked');
b7c1c22fdfe8 Format code for 80 columns, add some js to static/ dir
Jordi Gutiérrez Hermoso <jordigh@gmail.com>
parents:
diff changeset
39 $('div.snippet div.line#l'+j).toggleClass('marked');
b7c1c22fdfe8 Format code for 80 columns, add some js to static/ dir
Jordi Gutiérrez Hermoso <jordigh@gmail.com>
parents:
diff changeset
40 });
b7c1c22fdfe8 Format code for 80 columns, add some js to static/ dir
Jordi Gutiérrez Hermoso <jordigh@gmail.com>
parents:
diff changeset
41 });
b7c1c22fdfe8 Format code for 80 columns, add some js to static/ dir
Jordi Gutiérrez Hermoso <jordigh@gmail.com>
parents:
diff changeset
42
b7c1c22fdfe8 Format code for 80 columns, add some js to static/ dir
Jordi Gutiérrez Hermoso <jordigh@gmail.com>
parents:
diff changeset
43 //{% if request.session.userprefs.display_all_lexer %}
b7c1c22fdfe8 Format code for 80 columns, add some js to static/ dir
Jordi Gutiérrez Hermoso <jordigh@gmail.com>
parents:
diff changeset
44 /**
b7c1c22fdfe8 Format code for 80 columns, add some js to static/ dir
Jordi Gutiérrez Hermoso <jordigh@gmail.com>
parents:
diff changeset
45 * Lexer Guessing
b7c1c22fdfe8 Format code for 80 columns, add some js to static/ dir
Jordi Gutiérrez Hermoso <jordigh@gmail.com>
parents:
diff changeset
46 */
b7c1c22fdfe8 Format code for 80 columns, add some js to static/ dir
Jordi Gutiérrez Hermoso <jordigh@gmail.com>
parents:
diff changeset
47 $('#guess_lexer_btn').click(function(){
b7c1c22fdfe8 Format code for 80 columns, add some js to static/ dir
Jordi Gutiérrez Hermoso <jordigh@gmail.com>
parents:
diff changeset
48 $.getJSON('{% url snippet_guess_lexer %}',
b7c1c22fdfe8 Format code for 80 columns, add some js to static/ dir
Jordi Gutiérrez Hermoso <jordigh@gmail.com>
parents:
diff changeset
49 {'codestring': $('#id_content').val()},
b7c1c22fdfe8 Format code for 80 columns, add some js to static/ dir
Jordi Gutiérrez Hermoso <jordigh@gmail.com>
parents:
diff changeset
50 function(data){
b7c1c22fdfe8 Format code for 80 columns, add some js to static/ dir
Jordi Gutiérrez Hermoso <jordigh@gmail.com>
parents:
diff changeset
51 if(data.lexer == "unknown"){
b7c1c22fdfe8 Format code for 80 columns, add some js to static/ dir
Jordi Gutiérrez Hermoso <jordigh@gmail.com>
parents:
diff changeset
52 $('#guess_lexer_btn').css('color', 'red');
b7c1c22fdfe8 Format code for 80 columns, add some js to static/ dir
Jordi Gutiérrez Hermoso <jordigh@gmail.com>
parents:
diff changeset
53 }else{
b7c1c22fdfe8 Format code for 80 columns, add some js to static/ dir
Jordi Gutiérrez Hermoso <jordigh@gmail.com>
parents:
diff changeset
54 $('#id_lexer').val(data.lexer);
b7c1c22fdfe8 Format code for 80 columns, add some js to static/ dir
Jordi Gutiérrez Hermoso <jordigh@gmail.com>
parents:
diff changeset
55 $('#guess_lexer_btn').css('color', 'inherit');
b7c1c22fdfe8 Format code for 80 columns, add some js to static/ dir
Jordi Gutiérrez Hermoso <jordigh@gmail.com>
parents:
diff changeset
56 }
b7c1c22fdfe8 Format code for 80 columns, add some js to static/ dir
Jordi Gutiérrez Hermoso <jordigh@gmail.com>
parents:
diff changeset
57 });
b7c1c22fdfe8 Format code for 80 columns, add some js to static/ dir
Jordi Gutiérrez Hermoso <jordigh@gmail.com>
parents:
diff changeset
58 });
b7c1c22fdfe8 Format code for 80 columns, add some js to static/ dir
Jordi Gutiérrez Hermoso <jordigh@gmail.com>
parents:
diff changeset
59 //{% endif %}
47
139e4b8ffb17 Fix display of js code and copy-pastability of displayed code
Jordi Gutiérrez Hermoso <jordigh@gmail.com>
parents: 46
diff changeset
60 });