hide/show pod by class toggle

Author: haarg

root/source.html

@@ -45,7 +45,7 @@
     </div>
   </li>
   <% IF module.sloc > 0 %>
-  <li><div><a href="javascript:togglePod(<% module.pod_lines.json %>)"><i class="fa fa-exchange fa-fw black"></i>Toggle pod</a></div></li>
+  <li><div><button class="btn-link" onclick="togglePod()"><i class="fa fa-exchange fa-fw black"></i>Toggle pod</button></div></li>
   <% END %>
   <li class="nav-header">Info</li>
   <li><% module.sloc %> lines of code</li>
@@ -67,7 +67,8 @@
 //SyntaxHighlighter.all();
 $(document).ready(function() {
 <% IF module.sloc > 0 %>
-togglePod(<% module.pod_lines.json %>);
+  setPodLines(<% module.pod_lines.json %>);
+  togglePod();
 <% END %>
 if(document.location.hash)
     document.location.href = document.location.href;

root/static/js/cpan.js

@@ -26,26 +26,6 @@ $.extend({
     }
 });
 
-var podVisible = false;
-
-function togglePod(lines) {
-    var toggle = podVisible ? 'none' : 'block';
-    podVisible = !podVisible;
-    if (!lines || !lines.length) return;
-    for (var i = 0; i < lines.length; i++) {
-        var start = lines[i][0],
-        length = lines[i][1];
-        var sourceC = $('.container')[0].children;
-        var linesC = $('.gutter')[0].children;
-        var x;
-        for (x = start; x < start + length; x++) {
-            sourceC[x].style.display = toggle;
-            linesC[x].style.display = toggle;
-        }
-
-    }
-}
-
 function togglePanel(side) {
     var panel = $('#' + side + '-panel');
     var shower = $('#show-' + side + '-panel');

root/static/js/syntaxhighlighter.js

@@ -143,3 +143,20 @@ $(function () {
         SyntaxHighlighter.highlight(config, source);
     });
 });
+
+function setPodLines (lines) {
+    if (!lines || !lines.length) return;
+    for (var i = 0; i < lines.length; i++) {
+        var start = lines[i][0];
+        var length = lines[i][1];
+        var selectors = [];
+        for (var x = start; x < start + length; x++) {
+            selectors.push('.number' + (x+1));
+        }
+        $('#source .syntaxhighlighter .line').filter(selectors.join(', ')).addClass('pod-line');
+    }
+}
+
+function togglePod() {
+    $('.syntaxhighlighter').toggleClass('pod-hidden');
+}

root/static/less/global.less

@@ -238,7 +238,6 @@ ul {
 /* Contributors list on release pages
 * see /release/Plack for example
 */
-
 #contributors {
     min-height: 40px;
 

root/static/less/syntaxhighlighter.less

@@ -24,3 +24,7 @@ pre code {
 .syntaxhighlighter .container:after {
     content: none !important;
 }
+
+.pod-hidden .pod-line {
+    display: none;
+}