diff options
| -rw-r--r-- | application/controllers/file.php | 40 | ||||
| -rw-r--r-- | application/views/file/html_footer.php | 3 | ||||
| -rw-r--r-- | application/views/file/html_header.php | 2 | ||||
| -rw-r--r-- | data/css/style.css | 82 | ||||
| -rw-r--r-- | data/js/script.js | 17 |
5 files changed, 94 insertions, 50 deletions
diff --git a/application/controllers/file.php b/application/controllers/file.php index 333602fbf..5bd829713 100644 --- a/application/controllers/file.php +++ b/application/controllers/file.php @@ -203,19 +203,43 @@ class File extends CI_Controller { private function _pygmentize($file, $lexer) { $return_value = 0; + $output = ""; - ob_start(); + $output .= '<div class="code content table">'."\n"; + $output .= '<div class="highlight"><pre>'."\n"; - echo '<table class="content"><tr>'; - echo '<td class="numbers"><pre>'; - // generate line numbers (links) - passthru('perl -ne \'print "<a href=\"#n$.\" ><span class=\"anchor\" id=\"n$.\"> </span>$.</a>\n"\' '.escapeshellarg($file), $return_value); - echo '</pre></td><td class="code">'."\n"; + ob_start(); passthru('pygmentize -F codetagify -O encoding=guess,outencoding=utf8 -l '.escapeshellarg($lexer).' -f html '.escapeshellarg($file), $return_value); - - $output = ob_get_contents(); + $buf = ob_get_contents(); ob_end_clean(); + + $buf = explode("\n", $buf); + $line_count = count($buf); + + // Last 2 items are just "</pre></div>" and "" + // We don't need those + unset($buf[$line_count - 2]); + unset($buf[$line_count - 1]); + + foreach ($buf as $key => $line) { + $line_number = $key + 1; + if ($key == 0) { + $line = str_replace("<div class=\"highlight\"><pre>", "", $line); + } + + // Be careful not to add superflous whitespace here (we are in a <pre>) + $output .= "<div class=\"table-row\">" + ."<a href=\"#n$line_number\" class=\"linenumber table-cell\">" + ."<span class=\"anchor\" id=\"n$line_number\"> </span>" + ."</a>" + ."<span class=\"line table-cell\">".$line."</span>\n"; + $output .= "</div>"; + } + + $output .= "</pre></div>"; + $output .= "</div>"; + return array( "return_value" => $return_value, "output" => $output diff --git a/application/views/file/html_footer.php b/application/views/file/html_footer.php index 3a4b05505..bbec7ebd1 100644 --- a/application/views/file/html_footer.php +++ b/application/views/file/html_footer.php @@ -1,6 +1,3 @@ - </td> - </tr> - </table> </div> </div> diff --git a/application/views/file/html_header.php b/application/views/file/html_header.php index e14bad6f5..b861e0a39 100644 --- a/application/views/file/html_header.php +++ b/application/views/file/html_header.php @@ -74,7 +74,7 @@ include(FCPATH."application/views/header.php"); ?> </li> </ul> <div class="btn-group pull-right" style="margin-top: 7px; margin-right:-10px;"> - <a id="linewrap" class="btn btn-small" rel="tooltip" title="Wrap long lines">Linewrap</a> + <a id="linewrap" class="btn btn-small" rel="tooltip" title="Toggle wrapping of long lines">Linewrap</a> <a href="<?php echo site_url($id."/plain") ?>" class="btn btn-small" rel="tooltip" title="View as plain text">Plain</a> <a href="<?php echo site_url($id) ?>" class="btn btn-small" rel="tooltip" title="View as raw file (org. mime type)">Raw</a> <?php if ($current_highlight === 'rmd') { ?> diff --git a/data/css/style.css b/data/css/style.css index ce8052142..454d7f9ea 100644 --- a/data/css/style.css +++ b/data/css/style.css @@ -54,7 +54,53 @@ code, pre, textarea { margin-right: 20px; } -.content .numbers > pre, .content .highlight > pre { +.code pre { + counter-reset: line-numbering; +} + +.code {display: table; margin: 0;} +.code .table-row {display: table-row;} +.code .table-cell {display: table-cell;} + +.code pre a.linenumber { + -webkit-touch-callout: none; + -webkit-user-select: none; + -khtml-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; +} + +.code pre a.linenumber::before { + content: counter(line-numbering); + counter-increment: line-numbering; +} + +.code pre a.linenumber { + padding: 0 6px; /* space after numbers */ + text-align: right; + + background: #ececec; + border-right: 1px solid #ddd; + text-align: right; + margin-left: -2px; + color: #aaa; + word-break: normal; +} + +.code pre :last-child a { + padding-bottom: 10px; +} + +.code pre :first-child a { + padding-top: 10px; +} + +.code pre .table-row .line { + padding-left: 10px; +} + +.content .highlight > pre { background-color: transparent; border: 0; border-radius: 0; @@ -62,41 +108,23 @@ code, pre, textarea { padding: 0; font-size: 12px; line-height: 1.4; - white-space: pre; - word-break: normal; + white-space: pre-wrap; + word-break: break-all; word-wrap: normal; } -.content .numbers { - background: #ececec; - border-right: 1px solid #ddd; - text-align: right; - padding: 10px 6px; - vertical-align: top; -} -.content .numbers a { - color: #aaa; -} -.content .code { +.code { width: 100%; - vertical-align: top; - padding-top: 10px; + padding-top: 0; } -.content .code > .highlight { +.code .highlight { position: relative; - padding-left: 10px; + padding-left: 0; } -.content .code > .highlight > pre { +.code .highlight pre { position: relative; - z-index: 2; } -#highlight_line { +.highlight_line { background: #ffffcc; - position: absolute; - left: 0; - right: 0; - width: 100%; - height: 16px; - z-index: 1; } #file-info { display: none; diff --git a/data/js/script.js b/data/js/script.js index ffa036280..7d84eb9a1 100644 --- a/data/js/script.js +++ b/data/js/script.js @@ -9,17 +9,14 @@ function fixedEncodeURIComponent (str) { $(window).bind('hashchange', function(e) { var hash = window.location.hash; - $('#highlight_line').remove(); + $('.highlight_line').removeClass("highlight_line"); if (hash.match(/^#n\d+$/) === null) { return; } - var link = $(hash); - - $('<div id="highlight_line" />').prependTo('.highlight').css({ - top: link.get(0).offsetTop - 10 + parseInt(link.css("padding-top")) + 'px' - }); + var line = $(hash).parent().parent(); + line.addClass("highlight_line"); }); $(window).trigger('hashchange'); @@ -59,14 +56,12 @@ function fixedEncodeURIComponent (str) { return this; }); - window.lines_wrapped = false; + window.lines_wrapped = true; $('#linewrap').click(function() { if (window.lines_wrapped == true) { - $(".content .numbers").show(); - $(".content .code > .highlight > pre").css("white-space", "pre"); + $(".highlight > pre").css("white-space", "pre"); } else { - $(".content .numbers").hide(); - $(".content .code > .highlight > pre").css("white-space", "pre-wrap"); + $(".highlight > pre").css("white-space", "pre-wrap"); } window.lines_wrapped = !window.lines_wrapped; }); |