Port to word wrappable line numbers.

client/css/up1.css

@@ -47,7 +47,7 @@
   color: #FFF;
 }
 
-#linenos,#create_linenos {
+#create_linenos {
   color: #7d7d7d;
   float: left;
   font-family: monospace;
@@ -60,6 +60,22 @@
   z-index: -1;
 }
 
+.line {
+  word-wrap: break-word;
+  min-height: 1em;
+}
+
+.line .linenum {
+  color: #7d7d7d;
+  font-family: monospace;
+  padding: 0 15px 0 10px;
+  text-align: center;
+  position: absolute;
+  left: -8px;
+  text-align: right;
+  width: 30px;
+}
+
 #module_download .preview {
   display: block;
   margin: 0 auto;
@@ -266,6 +282,7 @@
 
 .previewtext pre {
   margin: 0;
+
   padding-left: 50px;
 }
 

client/js/download.js

@@ -116,6 +116,13 @@ upload.modules.addmodule({
             }
         }
     },
+    setupLineNumbers: function(ele) {
+      var markup = ele.html()
+      ele.html('<div class="line">' + markup.replace(/\n/g, '</div><div class="line">') + '</div>')
+      ele.find('.line').each(function(i, e) {
+        $(e).prepend($('<span>').addClass('linenum').text(i + 1))
+      })
+    },
     downloaded: function (data) {
         this._.filename.text(data.header.name)
         this._.title.text(data.header.name + ' - Up1')
@@ -166,8 +173,6 @@ upload.modules.addmodule({
       } else if (association == 'text') {
             var textcontent = $('<div>').prop('id', 'downloaded_text').addClass('preview').addClass('previewtext').appendTo(this._.detailsarea)
 
-            var linenos = $('<div>').prop('id', 'linenos').appendTo(textcontent)
-
             var pre = $('<pre>').appendTo(textcontent)
 
             var code = $('<code>').appendTo(pre)
@@ -188,11 +193,7 @@ upload.modules.addmodule({
 
                 hljs.highlightBlock(code[0])
 
-                var length = text.split(/\r\n|\r|\n/).length
-
-                for (var i = 0; i < length; i++) {
-                    linenos.append((i + 1) + '<br>')
-                }
+                this.setupLineNumbers(code)
 
             }.bind(this)
             fr.readAsText(data.decrypted)