Add permalink button (lang and t_dir only).

Author: scossu

scriptshifter/static/ss.js

@@ -68,11 +68,12 @@ document.getElementById('lang').addEventListener('change',(event)=>{
             });
         });
 
+    set_permalink();
     event.preventDefault();
     return false;
 })
 
-// Change language select menu based on query string
+// Change language select menu based on query string.
 var nav_lang = qd["lang"]
 if (nav_lang != undefined) {
     var lang_sel = document.getElementById("lang");
@@ -100,6 +101,22 @@ if (t_dir == "r2s") {
 }
 
 
+// Change paermalink based on current language and options.
+function set_permalink() {
+    document.getElementById("permalink").setAttribute(
+        "href",
+        window.location.origin +
+        "?lang=" + document.getElementById("lang").value +
+        "&dir=" + (document.getElementById("opt_s2r").checked  ? "s2r" : "r2s")
+    );
+}
+
+
+document.querySelectorAll('input[name="t_dir"]').forEach(el => {
+  el.addEventListener('change', set_permalink);
+});
+
+
 document.getElementById('transliterate').addEventListener('submit',(event)=>{
 
     if (fb_active) {
@@ -161,6 +178,7 @@ document.getElementById('transliterate').addEventListener('submit',(event)=>{
 
 })
 
+// Submit feedback form.
 if (fb_active) {
     document.getElementById('feedback_btn').addEventListener('click',(event)=>{
         document.getElementById('lang_fb_input').value = document.getElementById('lang').value;

scriptshifter/templates/index.html

@@ -50,6 +50,8 @@
             margin-right: .4em;
         }
 
+        .comment {font-size: 90%; }
+
     </style>
 
 
@@ -123,6 +125,19 @@ <h3>General Options</h3>
         </fieldset>
         {% endif %}
     </form>
+    <section id="permalink_sec">
+        <p><a id="permalink" class="button button-outline" href="#">
+            Permalink
+        </a></p>
+        <p class="comment">
+          You can right-click on the permalink button, copy it to the
+          clipboard, and/or bookmark it if you use the current
+          language/direction often. The bookmark will take you back to the
+          interface set to the options you chose. <strong>Note:</strong> At the
+          moment, only language and direction are saved. Other options are
+          always reset when the page is reloaded.
+        </p>
+    </section>
 
     {% if feedback_form %}
     <div id="feedback_cont" class="hidden">