change tab names to anchor tags instead of divs

rohanb10 · Mar 5, 2022 · 6645612 · 6645612
1 parent 5d2c971
commit 6645612
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 11 deletions.
diff --git a/scripts/nap_room.js b/scripts/nap_room.js
@@ -224,9 +224,9 @@ function buildTabActions(t, tabDiv) {
 	var menuBtn = tabDiv.querySelector('img.overflow-button');
 	var removeBtn = tabDiv.querySelector('img.remove-button');
 
-	tabName.setAttribute('tabIndex', 0);
-	if (!t.tabs) tabName.onclick = _ => openTab(t);
-	if (!t.tabs) tabName.onkeyup = e => { if (e.keyCode === 13) openTab(t)};
+	if (!t.tabs) tabName.setAttribute('tabIndex', 0);
+	// if (!t.tabs) tabName.onclick = _ => openTab(t);
+	// if (!t.tabs) tabName.onkeyup = e => { if (e.keyCode === 13) openTab(t)};
 
 	if (t.opened) {
 		wakeUpBtn.remove();
@@ -279,7 +279,7 @@ function buildTabActions(t, tabDiv) {
 }
 
 function buildTab(t) {
-	var tab = wrapInDiv({className:`tab${t.tabs ? ' window collapsed':''}`, id: t.id});
+	var title, tab = wrapInDiv({className:`tab${t.tabs ? ' window collapsed':''}`, id: t.id});
 
 	var icon = Object.assign(document.createElement('img'), {
 		className: `icon ${t.tabs ? 'dropdown':'hidden lozad'}`,
@@ -293,7 +293,11 @@ function buildTab(t) {
 	if (!t.tabs) icon.setAttribute('data-src', getFaviconUrl(t.url));
 	var iconContainer = wrapInDiv('icon-container', icon, t.tabs ? '' : loadingIcon);
 
-	var title = wrapInDiv({className: 'tab-name', innerText: t.title, title: t.url ?? ''});
+	if (t.tabs) {
+		title = wrapInDiv({className: 'tab-name', innerText: t.title, title: t.url ?? ''});
+	} else {
+		title = Object.assign(document.createElement('a'), {className: 'tab-name', href: t.url, text: t.title, target: '_blank'})
+	}
 
 	var startedNap = wrapInDiv({className:'nap-time', innerText: `Started napping at ${dayjs(t.timeCreated).format(`${getHourFormat(dayjs(t.timeCreated).minute() !== 0)} [on] ddd D MMM YYYY`)}`})
 	if (t.modifiedTime) startedNap.innerText = `Last modified at ${dayjs(t.modifiedTime).format(`${getHourFormat(dayjs(t.modifiedTime).minute() !== 0)} [on] ddd D MMM YYYY`)}`;
@@ -308,10 +312,11 @@ function buildTab(t) {
 			var littleIcon = Object.assign(document.createElement('img'), {className: 'little-icon lozad'});
 			littleIcon.onerror = _ => littleIcon.src = '../icons/unknown.png';
 			littleIcon.setAttribute('data-src', getFaviconUrl(lt.url))
-			var littleTitle = wrapInDiv({className: 'tab-name', innerText: lt.title, src: '../icons/unknown.png'});
-			var littleTab = wrapInDiv({className: 'little-tab', tabIndex: 0}, littleIcon, littleTitle);
-			littleTab.onclick = _ => openTab(lt);
-			littleTab.onkeyup = e => {if (e.keyCode === 13) openTab(lt)};
+			// var littleTitle = wrapInDiv({className: 'tab-name', innerText: lt.title, src: '../icons/unknown.png'});
+			var littleTitle = Object.assign(document.createElement('a'), {className: 'tab-name', href: lt.url, text: lt.title, target: '_blank', tabIndex: 0})
+			var littleTab = wrapInDiv({className: 'little-tab'}, littleIcon, littleTitle);
+			// littleTab.onclick = _ => openTab(lt);
+			// littleTab.onkeyup = e => {if (e.keyCode === 13) openTab(lt)};
 			littleTabs.append(littleTab);
 		});
 

diff --git a/styles/common.css b/styles/common.css
@@ -99,12 +99,12 @@ a {
 	cursor: pointer;
 	text-decoration: underline;
 }
-a:focus-visible {
+a:not(.tab-name):focus-visible {
 	outline-offset: 3px;
 	outline: 2px dashed crimson;
 	background: none;
 }
-a:hover {
+a:not(.tab-name):hover {
 	background: linear-gradient(90deg, #f3b845 0%, #df4e76 100%);
 	-webkit-background-clip: text;
 	-webkit-text-fill-color: transparent;

diff --git a/styles/nap-room.css b/styles/nap-room.css
@@ -142,6 +142,11 @@ body.dark .tab:focus-visible {
 	overflow: hidden;
 	text-overflow: ellipsis;
 	font-weight: bold;
+	text-decoration: none;
+}
+.tab-name:hover, .tab-name:focus-within {
+	text-decoration: underline;
+	outline: none;
 }
 
 .tabs {