Add ajax tag post + improved the way templating works

2017-08-01 13:54:01 +02:00 · 2017-08-01 13:54:01 +02:00 · e68637198f
Parent 3bd6a0ab8f
--- a/public/js/kilo.js
+++ b/public/js/kilo.js
@ -4,7 +4,7 @@ var Kilo = function (params) {

  // public variables
  // Boolean defining if we are in sukebei
-  this.sukebei = (params.sukebei !== undefined) ? params.sukebei : 0
+  this.sukebei = (params.sukebei !== undefined) ? params.sukebei : false
  // Boolean defining if a user is trusted
  this.userTrusted = (params.userTrusted !== undefined) ? params.userTrusted : false
  // Boolean defining if a user is logged
--- a/public/js/modal.js
+++ b/public/js/modal.js
@ -3,19 +3,29 @@
 // Get the modal
 var Modal = {
  active: 0,
+  // Initialise a modal or multiple ones
+  // takes as parameter an object params:
+  // @param params Object{ elements: NodeList|Node, button: ID(eg. #something)|Class(eg. .something), before: callback, after: callback, close: callback }
  Init: function (params) {
    var elements = params.elements
    var button = (params.button != undefined) ? params.button : false
-    if (elements.innerHTML != undefined) {
-
-    } else {
+    if (elements.innerHTML == undefined) {
      var nbEl = elements.length
      for (var i = 0; i < nbEl; i++) {
        var modal = elements[i];
        this.addModal(modal, button, i, params.before, params.after, params.close)
      }
+    } else {
+      this.addModal(modal, button, i, params.before, params.after, params.close)
    }
  },
+  // addModal prepare a modal (called by Init so you don't have use it)
+  // @param modal Node
+  // @param btn  ID(eg. #something)|Class(eg. .something)
+  // @param i If multiple btn, points out to which btn in the array apply the event
+  // @param before_callback callback called before opening a modal
+  // @param after_callback callback called after opening a modal
+  // @param close_callback callback called after closing a modal
  addModal: function (modal, btn, i, before_callback, after_callback, close_callback) {
    var isBtnArray = false;
    // Get the button that opens the modal
@ -26,8 +36,18 @@ var Modal = {
    } else if (btn.match(/^\./)) {
      btn = document.getElementsByClassName(btn.substr(1));
      isBtnArray = true;
+    } else if (btn instanceof Array) {
+      btn = btn.map(function(val, index) {
+        if (val.match(/^#/)) {
+          return document.getElementById(val.substr(1));
+        } else if (val.match(/^\./)) {
+          return document.getElementsByClassName(val.substr(1))[index];
+        }
+        return document.querySelector(val)
+      })
+      isBtnArray = true;
    } else {
-      console.error("Couldn't find the button")
+      console.error("Couldn't find the button, please provide either a #id, a .classname or an array of #id")
      return
    }
    if ((isBtnArray) && (i > 0) && (btn.length > 0) && (btn.length > i)) {
@ -67,16 +87,23 @@ var Modal = {
      }
    });
  },
+  // CloseActive closes the opened modal, if any
  CloseActive: function () {
    if (this.active != 0) {
      this.active.style.display = "none";
      this.active = 0;
    }
  },
+  // GetActive return the opened modal div
  GetActive: function () {
    return this.active;
  },
+  // Open opens a modal and closes the active one if any
  Open: function (q) {
+    var activeModal = this.GetActive()
+    if (activeModal != 0) {
+      this.CloseActive()
+    }
    var modal = document.querySelector(q);
    if (modal != undefined) {
      modal.style.display = "none";
--- a/templates/layouts/partials/torrent_item.jet.html
+++ b/templates/layouts/partials/torrent_item.jet.html
@ -1,40 +1,67 @@
-{{ range _, cat := GetCategories(false, true) }}
+<script type="text/javascript">
+// {{ range _, cat := GetCategories(false, true) }}
 T.Add("{{ cat.ID }}", "{{ T(cat.Name) }}")
-{{end}}
-{{ range _, language := GetTorrentLanguages() }}
+// {{end}}
+// {{ range _, language := GetTorrentLanguages() }}
 T.Add("{{ language.Code }}", "{{ LanguageName(language, T) }}")
-{{ if language.Tag != language.Code }}
+// {{ if language.Tag != language.Code }}
 T.Add("{{ language.Tag }}", "{{ LanguageName(language, T) }}")
-{{end}}
-{{end}}
+// {{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() }}
-		(( TorrentsMod.enabled ) ? "<td class=\"tr-cb\">" :  "<td class=\"tr-cb hide\"" + ((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) ? Templates.FlagCode(torrent.languages[0]) : "multiple") +"\" title=\""+torrent.languages.map(function (el, i) { return T.r(el)}).join(",")+"\" alt=\""+torrent.languages.map(function (el, i) { return T.r(el)}).join(",")+"\"></a>" : "") +
-            "</a>"+
-        "</div></td>"+
-        "<td class=\"tr-name home-td\""+  (torrent.comments.length  == 0 ? "colspan=\"2\"" : "" ) +"><a href=\"/view/"+torrent.id+"\">"+Templates.EncodeEntities(torrent.name) +"</a></td>"+
-        ((torrent.comments.length > 0) ? "<td class=\"tr-cs home-td\"><span>"+ torrent.comments.length + "</span></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-smol\">"+torrent.seeders+"</td>"+
-        "<td class=\"tr-le home-td hide-smol\">"+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>";
+    var tr_class = "torrent-info hidden"
+    if (torrent.status == 2) {
+            tr_class += " remake"
+    } else if (torrent.status == 3) {
+            tr_class += " trusted"
+    } else if (torrent.status == 4) {
+            tr_class += " aplus"
+    }
+    // {{ if User.HasAdmin() }}
+    var cb_hide = (!TorrentsMod.enabled) ? " hide" : ""
+    var cb_show = (TorrentsMod.enabled) ? ' style="display:table-cell;"' : ""
+    // {{ end }}
+    var catClass = "nyaa-cat"
+    // {{ if Sukebei() }}
+    catClass += "sukebei-cat-"+ torrent.category + torrent.sub_category
+    // {{else}}
+    catClass += "nyaa-cat-"+ torrent.sub_category
+    // {{end}}
+    var languages = ""
+    var colspan = (torrent.comments.length  == 0 ? ` colspan="2"` : "" )
+    var commentTd = ((torrent.comments.length > 0) ? '<td class="tr-cs home-td"><span>' + torrent.comments.length + '</span></td>' : "")
+    var dlLink = (torrent.torrent != "" ? ' <a href="` + torrent.torrent + `" title="{{ T("torrent_file") }}"><div class="icon-floppy"></div></a>' : "")
+
+    if (torrent.languages[0] != "") {
+        var flagClass = (torrent.languages.length == 1) ? Templates.FlagCode(torrent.languages[0]) : "multiple"
+        var langs = torrent.languages.map(function (el, i) { return T.r(el)}).join(",") 
+        languages = `<a href="{{ URL.Parse("/search?c=") }}` + torrent.category + `_` + torrent.sub_category + `&lang=` + torrent.languages.join(",") + `"><img src="img/blank.gif" class="flag flag-` + flagClass + `" title="` + langs + `" alt="` + langs + `"></a>`
+    }
+
+    return `<tr id="torrent_` + torrent.id + `" class="` + tr_class + `">
+        {{ if User.HasAdmin() }}
+        <td class="tr-cb` + cb_hide + `"` + cb_show + `>
+            <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">
+        <div class="` + catClass +`">
+            <a href="{{ URL.Parse("/search?c=") }}` + torrent.category + `_` + torrent.sub_category + `" class="category">
+                ` + languages + `
+            </a>
+        </div></td>
+        <td class="tr-name home-td"` +  colspan + `><a href="/view/` + torrent.id + `">` + Templates.EncodeEntities(torrent.name) + `</a></td>
+        `+ commentTd +`
+        <td class="tr-links home-td">
+            <a href="` + torrent.magnet + `" title="{{ T("magnet_link") }}">
+                <div class="icon-magnet"></div>
+            </a>`+ dlLink +`
+        </td>"+
+        <td class="tr-size home-td hide-xs">` + humanFileSize(torrent.filesize) + `</td>
+        <td class="tr-se home-td hide-smol">` + torrent.seeders + `</td>
+        <td class="tr-le home-td hide-smol">` + 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>`;
 });
+</script>
--- a/templates/layouts/partials/torrent_item_upload.jet.html
+++ b/templates/layouts/partials/torrent_item_upload.jet.html
@ -1,35 +1,58 @@
-{{ range _, cat := GetCategories(false, true) }}
+<script type="text/javascript">
+// {{ range _, cat := GetCategories(false, true) }}
 T.Add("{{ cat.ID }}", "{{ T(cat.Name) }}")
-{{end}}
-{{ range _, language := GetTorrentLanguages() }}
+// {{end}}
+// {{ range _, language := GetTorrentLanguages() }}
 T.Add("{{ language.Code }}", "{{ LanguageName(language, T) }}")
-{{ if language.Tag != language.Code }}
+// {{ if language.Tag != language.Code }}
 T.Add("{{ language.Tag }}", "{{ LanguageName(language, T) }}")
-{{end}}
-{{end}}
+// {{end}}
+// {{end}}
 Templates.Add("torrents.item", function(torrent) {
-    return "<tr id=\"torrent_" + torrent.id + "\" class=\"torrent-info hidden"+ ((torrent.status == 2) ? " remake" : ((torrent.status == 3) ? " trusted" : ((torrent.status == 3) ? " aplus" : "" )))+"\">"+
-    "<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 class=\"category\">"+
-                ((torrent.languages[0] != "") ? "<a><img src=\"img/blank.gif\" class=\"flag flag-"+ ((torrent.languages.length == 1) ? Templates.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\""+  (torrent.comments.length  == 0 ? "colspan=\"2\"" : "" ) +"><a>"+Templates.EncodeEntities(torrent.name) +"</a></td>"+
-        ((torrent.comments.length > 0) ? "<td class=\"tr-cs home-td\"><span>"+ torrent.comments.length + "</span></td>" : "")+
-        "<td class=\"tr-links home-td\">"+
-            "<a  title=\"{{ T("magnet_link") }}\">"+
-                "<div class=\"icon-magnet\"></div>"+
-            "</a>"+(torrent.torrent != "" ? " <a><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-smol\">"+torrent.seeders+"</td>"+
-        "<td class=\"tr-le home-td hide-smol\">"+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>";
+    var tr_class = "torrent-info hidden"
+    if (torrent.status == 2) {
+            tr_class += " remake"
+    } else if (torrent.status == 3) {
+            tr_class += " trusted"
+    } else if (torrent.status == 4) {
+            tr_class += " aplus"
+    }
+    var catClass = "nyaa-cat"
+    // {{ if Sukebei() }}
+    catClass += "sukebei-cat-"+ torrent.category + torrent.sub_category
+    // {{else}}
+    catClass += "nyaa-cat-"+ torrent.sub_category
+    // {{end}}
+    var languages = ""
+    var colspan = (torrent.comments.length  == 0 ? ` colspan="2"` : "" )
+    var commentTd = ((torrent.comments.length > 0) ? '<td class="tr-cs home-td"><span>' + torrent.comments.length + '</span></td>' : "")
+    var dlLink = (torrent.torrent != "" ? ' <a><div class="icon-floppy"></div></a>' : "")
+
+    if (torrent.languages[0] != "") {
+        var flagClass = (torrent.languages.length == 1) ? Templates.FlagCode(torrent.languages[0]) : "multiple"
+        var langs = torrent.languages.map(function (el, i) { return T.r(el)}).join(",") 
+        languages = `<a><img src="img/blank.gif" class="flag flag-` + flagClass + `" title="` + langs + `"></a>`
+    }
+
+    return `<tr id="torrent_` + torrent.id + `" class="` + tr_class + `">
+    <td class="tr-cat home-td">
+        <div class="` + catClass +`">
+            <a class="category">
+                ` + languages + `
+            </a>
+        </div></td>
+        <td class="tr-name home-td"` +  colspan + `><a>` + Templates.EncodeEntities(torrent.name) + `</a></td>
+        `+ commentTd +`
+        <td class="tr-links home-td">
+            <a  title="{{ T("magnet_link") }}">
+                <div class="icon-magnet"></div>
+            </a>`+ dlLink +`
+        </td>"+
+        <td class="tr-size home-td hide-xs">` + humanFileSize(torrent.filesize) + `</td>
+        <td class="tr-se home-td hide-smol">` + torrent.seeders + `</td>
+        <td class="tr-le home-td hide-smol">` + 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>`;
 });
+</script>
--- a/templates/site/torrents/upload.jet.html
+++ b/templates/site/torrents/upload.jet.html
@ -175,13 +175,20 @@
  <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_upload" }}
+  <script type="text/javascript">
  var preview = new Kilo({
-    userTrusted: {{User.IsTrusted()}},
-    listContext: true,
-    sukebei: {{ if Sukebei() }}true{{else}}0{{end}}
-    {{ if User.ID > 0 }}, isMember: true{{end}} })
+    // {{ if User.IsTrusted()}}
+    userTrusted: true,
+    // {{ end }}
+    // {{ if Sukebei() }}
+    sukebei: true,
+    // {{end}}
+    // {{ if User.ID > 0 }}
+    isMember: true,
+    // {{end}}
+    listContext: true
+  })
    preview.render()
    </script>
    <script type="text/javascript">new SimpleMDE({ element: document.getElementById("desc"), spellChecker: false, showIcons: [ "strikethrough", "code", "table", "horizontal-rule" ] });</script>
--- a/templates/site/torrents/view.jet.html
+++ b/templates/site/torrents/view.jet.html
@ -1,6 +1,7 @@
 {{ extends "layouts/index_site" }}
 {{ import "layouts/partials/helpers/csrf" }}
 {{ import "layouts/partials/helpers/captcha" }}
+{{ import "layouts/partials/helpers/errors" }}
 {{ import "layouts/partials/helpers/treeview" }}
 {{block title()}}{{Torrent.Name}}{{end}}
 {{block content_body()}}
@ -65,7 +66,7 @@
    </tr>
    {{end}}
 	{{ if len(Torrent.Tags) != 0 || User.ID > 0 }}
-    <tr class="torrent-info-row">
+    <tr class="torrent-info-row" id="tags-torrent">
      <td class="torrent-info-td torrent-info-label">{{ T("torrent_tags")}}:</td>
      <td class="tr-flag torrent-view-td torrent-info-data">
        {{ range Torrent.Tags}}
@ -78,7 +79,7 @@
          {{ end }}
        </span>
        {{end}}
-        {{ if User.ID > 0 }}<a href="/torrent/tag?id={{ Torrent.ID }}" class="add-tag">{{ T("add") }}</a>{{ end }}
+        {{ if User.ID > 0 }}<a id="tagPopup" href="/torrent/tag?id={{ Torrent.ID }}" class="add-tag">{{ T("add") }}</a>{{ end }}
      </td>
    </tr>
 	{{ end }}
@ -159,7 +160,7 @@
  </div>
 </div>
 {{ if User.ID > 0 }}
-<!-- Modal -->
+<!-- Modal to report a torrent -->
 <div id="modal_mod_tools" class="modal">
  <!-- Modal content -->
  <div class="modal-content">
@ -193,15 +194,89 @@
    </form>
  </div>
 </div>
+<!-- Modal to add a tag -->
+<div id="modal_tag_form" class="modal">
+  <!-- Modal content -->
+  <div class="modal-content">
+    <form method="post" action="/torrent/tag?id={{Torrent.ID}}">
+      <div class="modal-header">
+        <span class="close">&times;</span>
+        <h2>{{  T("add_tag") }}</h2>
+      </div>
+      <div class="modal-body">
+        <h4>{{  T("add_tag") }}</h4>
+        {{ yield csrf_field() }}
+        <div class="form-group">
+          <label class="input-label" for="tag">{{ T("tag")}}</label>
+          <input type="text" id="tag" name="tag" class="form-input up-input" value="{{Form.Tag}}" required/>
+          {{ yield errors(name="Tag")}}
+        </div>
+        <div class="form-group">
+          <label class="input-label" for="type">{{ T("tagtype")}}</label>
+          <select name="type" id="type" class="form-input up-input">
+            {{ range _, type := Config.Torrents.Tags.Types }}
+            <option value="{{ type }}" {{if Form.Type == type }}selected{{end}}>{{T("tagtype_" + type) }}</option>
+            {{ end }}
+          </select>
+          {{ yield errors(name="Type")}}
+        </div>
+      </div>
+      <div class="modal-footer">
+        <span>
+          <button id="confirm_changes" type="submit">{{  T("add")}}</button>
+          <button class="close" onclick="Modal.CloseActive();">{{  T("close")}}</button>
+        </span>
+        <h3>{{  T("are_you_sure") }} </h3>
+      </div>
+    </form>
+  </div>
+</div>
 {{end}}
 {{end}}
 {{ block footer_js()}}
 <script type="text/javascript" src="{{ URL.Parse("/js/modal.js") }}"></script>
+<script type="text/javascript" src="{{ URL.Parse("/js/query.js") }}"></script>
+<script type="text/javascript" src="{{ URL.Parse("/js/templates.js") }}"></script>
 <script type="text/javascript">
+// {{ range _, type := Config.Torrents.Tags.Types }}
+  T.Add("tagtype_{{ type }}", '{{ T("tagtype_" + type) }}')
+// {{ end }}
+
+Templates.Add("tag", function(tag) {
+  var tagClass = (tag.accepted) ? "tag" : "tag pending"
+  var tagTitle = (tag.accepted) ? 'Tag: ' + tag.type + '({{ T("accepted") }} )' : tag.type + "(" + tag.total + ")"
+
+  return `<span class="`+ tagClass +`" title="`+ tagTitle +`">
+          <span class="tag-text votable">
+          `.T.r("tagtype_" + tag.type)+`: ` + tag.tag + `
+          </span>
+          <a href="/torrent/tag/remove?id={{Torrent.ID}}&tag=` + tag.tag + `&type=` + tag.type + `" class="tag-form minus"></a>
+        </span>`
+})
+
 // Modal initialization
 Modal.Init({
  elements: document.getElementsByClassName("modal"),
-  button: "#reportPopup"
+  // order of apparition of the modals
+  button: ["#reportPopup", "#tagPopup"]
 });
+
+document.querySelector("#modal_tag_form form").addEventListener("submit", function(e) {
+  var form = e.target
+  var tag = form.querySelector("input#tag").value
+  var tagtype = form.querySelector("select#type").value
+
+  Query.Post(form.action+"&json", "tag="+tag+"&type="+tagtype, function(data) {
+    if (data.ok) {
+      Modal.CloseActive()
+      var tagHTml = Templates.render("tag", data.data)
+      document.getElementById("tags-torrent").innerHTML = tagHTml + document.getElementById("tags-torrent").innerHTML
+    } else {
+      alert("Couldn't add a tag, please check your internet connexion and that all fields are filled.")
+    }
+  })
+
+  e.preventDefault()
+})
 </script>
 {{end}}