From 3a2fe5b742cb78e5ac109336ea7b8ddec224f4eb Mon Sep 17 00:00:00 2001
From: ville rantanen <ville.rantanen@iki.fi>
Date: Sat, 17 Jun 2017 15:07:44 +0300
Subject: [PATCH] new tab button with js

---
 index.html | 38 ++++++++++++++++++++++++++++----------
 1 file changed, 28 insertions(+), 10 deletions(-)

diff --git a/index.html b/index.html
index bd6b069..e82e9fe 100644
--- a/index.html
+++ b/index.html
@@ -24,11 +24,15 @@
     A:focus { text-decoration: underline; }
     #filter { width: 100%; }
     #search { width: 100%; display: table; }
-    .search_span { display: table-cell; text-align: center; vertical-align: middle; }
+    .search_span { display: table-cell; text-align: center; vertical-align: middle; 
+                   padding-left: 0.1em; padding-right: 0.1em; }
     .head { font-size: 16px; text-align:left; padding-top: 0.2em; margin-bottom: -0.5em; }
     #menu { font-size: 12px; width: 3em; }
-    .tickbox { width: 3em; }
+    .tickbox {  }
     #reload_span { float: right; }
+    #open_blank_span { cursor: pointer; font-size:16px;}
+    #open_blank_box { position:relative; left: 0.35em }
+    #open_blank_arrow { position: relative; left: -0.25em; top: -0.2em; }
     LI.nolink:before {
        content:" ";
        padding-right: 1.0em;
@@ -101,6 +105,8 @@ function make_menu() {
     sel.id="menu";
     doc.appendChild(sel);
     var opt=document.createElement("option");
+    opt.value="";
+    opt.innerHTML="#";
     sel.appendChild(opt);
     for (c=0; c<linkList.length; c++) {
         if ( linkList[c].substring(0,2) == "# " ) {
@@ -222,15 +228,27 @@ function move_cursor(ev) {
   }
 }
 function toggle_blank() {
-  var blank=document.getElementById('open_blank').checked;
-  var anchors = document.getElementsByTagName('a');
-  for (var i=0; i<anchors.length; i++){
-    if (blank) {
-      anchors[i].setAttribute('target', '_blank');
+  var span=document.getElementById('open_blank_span');
+  var arrow=document.getElementById('open_blank_arrow');
+  if (span.attributes['data']) {
+    if ( span.attributes['data']=="true" ) {
+      span.attributes['data']="false";
     } else {
-      anchors[i].removeAttribute('target');
-    }
+      span.attributes['data']="true";
+    }  
+  } else {
+    span.attributes['data']="true"
   }
+  var blank=span.attributes['data']=="true";
+  var anchors = document.getElementsByTagName('a');
+  if (blank) {
+    for (var i=0; i<anchors.length; i++){ anchors[i].setAttribute('target', '_blank'); }
+    var arrowChar="&#8594;";
+  } else {
+    for (var i=0; i<anchors.length; i++){ anchors[i].removeAttribute('target'); }
+    var arrowChar="&#8592;";
+  }
+  arrow.innerHTML=arrowChar;
 }
 document.onkeyup=move_cursor;
 var linkReg=/([^\[]*)\[([^\]]+)\]\(([^\)]+)\)(.*)/;
@@ -254,7 +272,7 @@ var config = {
 <div id="search">
   <span class="search_span"><input type="text" oninput="filter(event)" onkeypress="filter(event)" onblur="no_filter()" id="filter" title="Filter links by name"></span>
   <span class="search_span" id="menu_span"></span>
-  <span class="search_span tickbox">^<input type=checkbox id=open_blank title="Open links in new window" onclick="toggle_blank()" tabindex=-1></span>
+  <span class="search_span tickbox" id=open_blank_span onclick="toggle_blank()" title="Open links in new window"><span id=open_blank_box>&#9744;</span><span id=open_blank_arrow>&#8592;</span></span>
 </div>
 <div id="main"></div>
 <span class="search_span" id="reload_span"><a href="#" onclick="reload_source()" title="Reload links source">&#8635;</a></span>