Context list on upload preview (#1220)

* Update kilo.js

* torrent item js as a separate file to prevent redudancy

* Adding context list

* Fix indent

public/js/kilo.js

@@ -5,6 +5,7 @@ var Kilo = function (params) {
   this.sukebei = (params.sukebei !== undefined) ? params.sukebei : 0
   this.userTrusted = (params.userTrusted !== undefined) ? params.userTrusted : false
   this.isMember = (params.isMember !== undefined) ? params.isMember : false
+  this.listContext = (params.listContext !== undefined) ? params.listContext : false
   this.langSelect = (params.langSelect !== undefined) ? params.langSelect : 'languages'
   this.locale = (params.locale !== undefined) ? params.locale : ''
   this.formatDate = {
@@ -35,10 +36,6 @@ var Kilo = function (params) {
     document.getElementsByClassName('torrent-preview-table')[0].style.display = 'block'
     document.getElementsByClassName('table-torrent-date')[0].innerText = new Date(Date.now()).toISOString()
 	
-	//Adding the torrent under and above the previewed one. Akuma, you do this
-	var torrentHTML = ["", ""];
-	document.getElementById("torrentListResults").innerHTML = torrentHTML[0] + document.getElementById("torrentListResults").innerHTML + torrentHTML[1];
-
     // Adding listener events
     for (var langIndex = 0; langIndex < document.getElementsByName(this.langSelect).length; langIndex++) {
       document.getElementsByName(this.langSelect)[langIndex].addEventListener('change', updateTorrentLang)
@@ -62,7 +59,18 @@ var Kilo = function (params) {
     this.setName(formName.value)
     this.setCategory(formCategory.selectedIndex)
     updateTorrentLang()
-	
+
+    //Adding the torrent under and above the previewed one. 
+    if (this.listContext) {
+      Query.Get('/api/search?limit=2', function (torrents) {
+        var torrentHTML = []
+        var l = torrents.length
+        for (var i = 0; i < l; i++) {
+          torrentHTML.push(Templates.Render('torrents.item', torrents[i]))
+        }
+        document.getElementById("torrentListResults").innerHTML = torrentHTML[0] + document.getElementById("torrentListResults").innerHTML + torrentHTML[1];
+      })
+    }
   }
   // Helpers function for events and render
   this.setRemake = function (b) {
@@ -124,4 +132,4 @@ var Kilo = function (params) {
     document.getElementsByClassName('table-torrent-flag')[0].className = 'table-torrent-flag flag flag-' + langCat
     document.getElementsByClassName('table-torrent-flag')[0].title = langTitle
   }
-}
+}

public/js/main.js

@@ -90,4 +90,17 @@ document.getElementsByClassName("form-input refine")[0].addEventListener("click"
   if(document.getElementsByClassName("box refine")[0].style.display == "block")
   scrollTo(0, 0);
 });
+  function humanFileSize(bytes, si) {
+    var k = si ? 1000 : 1024;
+    var i = ~~(Math.log(bytes) / Math.log(k));
+    return i == 0 ? bytes + " B" : (bytes / Math.pow(k, i)).toFixed(1) + " " + "KMGTPEZY"[i - 1] + (si ? "" : "i") + "B";
+  }
+
+  function flagCode(language) {
+    split = language.split("-");
+    if (split.length > 1) {
+      return split[0];
+    }
+    return language;
+  }
 // @license-end

public/js/template.js

@@ -7,6 +7,10 @@ var Templates = {
     this.tmpl[templateName] = template
   },
   Render: function(templateName, model) {
+    if (this.tmpl[templateName] === undefined) {
+      console.log("The template with name '%s' doesn't exist", templateName)
+      return
+    }
     return this.tmpl[templateName](model)
   },
   ApplyItemListRenderer: function(params) {

public/js/torrents.js

@@ -25,32 +25,18 @@ var Torrents = {
             parseAllDates();
             Torrents.Refresh()
           });
-        }, this.Seconds*1000);
+      }, this.Seconds*1000);
-      }
-    },
-    StartRefresh: function() {
-      this.CanRefresh = true;
-      this.Refresh()
     }
+  },
+  StartRefresh: function() {
+    this.CanRefresh = true;
+    this.Refresh()
   }
+}
 
-  document.addEventListener("DOMContentLoaded", function() { // if Torrents.CanRefresh is enabled, refresh is automatically done (no need to start it anually)
+document.addEventListener("DOMContentLoaded", function() { // if Torrents.CanRefresh is enabled, refresh is automatically done (no need to start it anually)
-    if (Torrents.CanRefresh) {
+  if (Torrents.CanRefresh) {
-      Torrents.StartRefresh()
+    Torrents.StartRefresh()
-    }
-  })
-
-  function humanFileSize(bytes, si) {
-    var k = si ? 1000 : 1024;
-    var i = ~~(Math.log(bytes) / Math.log(k));
-    return i == 0 ? bytes + " B" : (bytes / Math.pow(k, i)).toFixed(1) + " " + "KMGTPEZY"[i - 1] + (si ? "" : "i") + "B";
-  }
-
-  function flagCode(language) {
-    split = language.split("-");
-    if (split.length > 1) {
-      return split[0];
-    }
-    return language;
   }
+})
   // @license-end

templates/layouts/partials/torrent_item.jet.html

@@ -0,0 +1,42 @@
+{{ range _, cat := GetCategories(false, true) }}
+T.Add("{{ cat.ID }}", "{{ T(cat.Name) }}")
+{{end}}
+{{ range _, language := GetTorrentLanguages() }}
+T.Add("{{ language.Code }}", "{{ LanguageName(language, T) }}")
+{{ if language.Tag != language.Code }}
+T.Add("{{ language.Tag }}", "{{ LanguageName(language, T) }}")
+{{end}}
+{{end}}
+Templates.Add("torrents.item", function(torrent) {
+    return "<tr id=\"torrent_" + torrent.id + "\" class=\"torrent-info"+ ((torrent.status == 2) ? " remake" : ((torrent.status == 3) ? " trusted" : ((torrent.status == 3) ? " aplus" : "" )))+"\">"+
+    {{ if User.HasAdmin() }}
+        "<td class=\"tr-cb\""+ ((TorrentsMod.enabled) ? "style=\"display:table-cell;\"" : "") +">"+
+        "<input data-name=\""+Templates.EncodeEntities(torrent.name)+"\" type=\"checkbox\" id=\"torrent_cb_"+torrent.id+"\" name=\"torrent_id\" value=\""+torrent.id+"\">"+
+        "</td>"+
+    {{ end }}
+    "<td class=\"tr-cat home-td\">"+
+    {{ if Sukebei() }}
+        "<div class=\"nyaa-cat sukebei-cat-"+ torrent.category + torrent.sub_category +"\">"+
+    {{else}}
+        "<div class=\"nyaa-cat nyaa-cat-"+ torrent.sub_category +"\">"+
+    {{end}}
+            "<a href=\"{{URL.Parse("/search?c=") }}"+ torrent.category + "_" + torrent.sub_category +"\" title=\""+ T.r(torrent.category+"_"+torrent.sub_category)+"\" class=\"category\">"+
+                ((torrent.languages[0] != "") ? "<a href=\"{{URL.Parse("/search?c=") }}"+ torrent.category + "_" + torrent.sub_category +"&lang=" + torrent.languages.join(",") +"\"><img src=\"img/blank.gif\" class=\"flag flag-"+ ((torrent.languages.length == 1) ? flagCode(torrent.languages[0]) : "multiple") +"\" title=\""+torrent.languages.map(function (el, i) { return T.r(el)}).join(",")+"\"></a>" : "") +
+            "</a>"+
+        "</div></td>"+
+        "<td class=\"tr-name home-td\"><a href=\"/view/"+torrent.id+"\">"+Templates.EncodeEntities(torrent.name) +"</a></td>"+
+        "<td class=\"tr-cs home-td hide-xs\">"+
+        ((torrent.comments.length > 0) ? "<i class=\"comment-icon\" title=\"{{ T("comments") }}\">" + torrent.comments.length + "</i>" : "")+
+        "</td>"+
+        "<td class=\"tr-links home-td\">"+
+            "<a href=\""+torrent.magnet +"\" title=\"{{ T("magnet_link") }}\">"+
+                "<div class=\"icon-magnet\"></div>"+
+            "</a>"+(torrent.torrent != "" ? " <a href=\""+torrent.torrent+"\" title=\"{{ T("torrent_file") }}\"><div class=\"icon-floppy\"></div></a>" : "") +
+        "</td>"+
+        "<td class=\"tr-size home-td hide-xs\">"+humanFileSize(torrent.filesize)+"</td>"+
+        "<td class=\"tr-se home-td hide-xs\">"+torrent.seeders+"</td>"+
+        "<td class=\"tr-le home-td hide-xs\">"+torrent.leechers+"</td>"+
+        "<td class=\"tr-dl home-td hide-xs\">"+torrent.completed+"</td>"+
+        "<td class=\"tr-date home-td date-short hide-xs\">"+torrent.date+"</td>"+
+    "</tr>";
+});

templates/site/torrents/listing.jet.html

@@ -221,46 +221,7 @@
     {{end}}
 <!-- JS Template for torrents ajax -->
     <script type="text/javascript">
-        {{ range _, cat := GetCategories(false, true) }}
+        {{ include "layouts/partials/torrent_item" }}
-        T.Add("{{ cat.ID }}", "{{ T(cat.Name) }}")
-        {{end}}
-        {{ range _, language := GetTorrentLanguages() }}
-        T.Add("{{ language.Code }}", "{{ LanguageName(language, T) }}")
-        T.Add("{{ language.Tag }}", "{{ LanguageName(language, T) }}")
-        {{end}}
-        Templates.Add("torrents.item", function(torrent) {
-            return "<tr id=\"torrent_" + torrent.id + "\" class=\"torrent-info"+ ((torrent.status == 2) ? " remake" : ((torrent.status == 3) ? " trusted" : ((torrent.status == 3) ? " aplus" : "" )))+"\">"+
-            {{ if User.HasAdmin() }}
-              "<td class=\"tr-cb\""+ ((TorrentsMod.enabled) ? "style=\"display:table-cell;\"" : "") +">"+
-                "<input data-name=\""+Templates.EncodeEntities(torrent.name)+"\" type=\"checkbox\" id=\"torrent_cb_"+torrent.id+"\" name=\"torrent_id\" value=\""+torrent.id+"\">"+
-              "</td>"+
-            {{ end }}
-            "<td class=\"tr-cat home-td\">"+
-			{{ if Sukebei() }}
-              "<div class=\"nyaa-cat sukebei-cat-"+ torrent.category + torrent.sub_category +"\">"+
-			{{else}}
-              "<div class=\"nyaa-cat nyaa-cat-"+ torrent.sub_category +"\">"+
-			{{end}}
-                  "<a href=\"{{URL.Parse("/search?c=") }}"+ torrent.category + "_" + torrent.sub_category +"\" title=\""+ T.r(torrent.category+"_"+torrent.sub_category)+"\" class=\"category\">"+
-                      ((torrent.languages[0] != "") ? "<a href=\"{{URL.Parse("/search?c=") }}"+ torrent.category + "_" + torrent.sub_category +"&lang=" + torrent.languages.join(",") +"\"><img src=\"img/blank.gif\" class=\"flag flag-"+ ((torrent.languages.length == 1) ? flagCode(torrent.languages[0]) : "multiple") +"\" title=\""+torrent.languages.map(function (el, i) { return T.r(el)}).join(",")+"\"></a>" : "") +
-                  "</a>"+
-              "</div></td>"+
-              "<td class=\"tr-name home-td\"><a href=\"/view/"+torrent.id+"\">"+Templates.EncodeEntities(torrent.name) +"</a></td>"+
-              "<td class=\"tr-cs home-td hide-xs\">"+
-              ((torrent.comments.length > 0) ? "<i class=\"comment-icon\" title=\"{{ T("comments") }}\">" + torrent.comments.length + "</i>" : "")+
-              "</td>"+
-              "<td class=\"tr-links home-td\">"+
-                  "<a href=\""+torrent.magnet +"\" title=\"{{ T("magnet_link") }}\">"+
-                      "<div class=\"icon-magnet\"></div>"+
-                  "</a>"+(torrent.torrent != "" ? " <a href=\""+torrent.torrent+"\" title=\"{{ T("torrent_file") }}\"><div class=\"icon-floppy\"></div></a>" : "") +
-              "</td>"+
-              "<td class=\"tr-size home-td hide-xs\">"+humanFileSize(torrent.filesize)+"</td>"+
-              "<td class=\"tr-se home-td hide-xs\">"+torrent.seeders+"</td>"+
-              "<td class=\"tr-le home-td hide-xs\">"+torrent.leechers+"</td>"+
-              "<td class=\"tr-dl home-td hide-xs\">"+torrent.completed+"</td>"+
-              "<td class=\"tr-date home-td date-short hide-xs\">"+torrent.date+"</td>"+
-          "</tr>";
-        });
         Torrents.LastID = {{ lastID(URL, Models) }};
         if (Torrents.LastID > 0) Torrents.CanRefresh = true;     
     </script>

templates/site/torrents/upload.jet.html

@@ -106,14 +106,19 @@
 </div>
 {{end}}
 {{ block footer_js()}}
-<script type="text/javascript" src="/js/kilo.js"></script>
+<script type="text/javascript" src="/js/query.js?v={{ Config.Version}}{{ Config.Build }}"></script>
+<script type="text/javascript" src="/js/translation.js?v={{ Config.Version}}{{ Config.Build }}"></script>
+<script type="text/javascript" src="/js/template.js?v={{ Config.Version}}{{ Config.Build }}"></script>
+<script type="text/javascript" src="/js/kilo.js?v={{ Config.Version}}{{ Config.Build }}"></script>
+<script type="text/javascript" src="/js/simplemde.min.js?v={{ Config.Version}}{{ Config.Build }}"></script>
 <script type="text/javascript">
+{{ include "layouts/partials/torrent_item" }}
 var preview = new Kilo({
 	userTrusted: {{User.IsTrusted()}},
+	listContext: true,
 	sukebei: {{ if Sukebei }}true{{else}}0{{end}}
 	{{ if User.ID > 0 }}, isMember: true{{end}} })
 preview.render()
 </script>
-<script type="text/javascript" src="/js/simplemde.min.js?v={{ Config.Version}}{{ Config.Build }}"></script>
 <script type="text/javascript">new SimpleMDE({ element: document.getElementById("desc"), spellChecker: false, showIcons: [ "strikethrough", "code", "table", "horizontal-rule" ] });</script>
 {{end}}