Added vertical table view

content/notes/notes.css

@@ -78,12 +78,32 @@ td {
     cursor: pointer;
 }
 
-th {
+tr:first-child td {
     background-color: white;
     padding:0.3em;
     border: solid 1px;
     position: sticky;
     top: 0;
+	/* z-index: 100!important; */
+	font-weight: bolder;
+}
+
+tr:first-child td:first-letter, td:first-child:first-letter {
+	text-transform: capitalize;
+}
+
+td:first-child {
+    background-color: white;
+    padding:0.3em;
+    border: solid 1px;
+    position: sticky;
+	left: 0;
+	/* z-index: 100!important; */
+	font-weight: bolder;
+}
+
+tr:first-child > td:first-child {
+	z-index: 1!important;
 }
 
 .zn-menubar {

content/notes/notes.js

@@ -6,6 +6,11 @@ Notes = {
 		this.body.focus();
 	},
 
+	isvertical()
+	{
+		return (Zotero.ZeNotes.Prefs.get("vertical-table")=="true" || Zotero.ZeNotes.Prefs.get("vertical-table")==true);
+	},
+
 	async savesettings(settings)
 	{
 		var usersettings = {};
@@ -61,36 +66,169 @@ Notes = {
 			Zotero.ZeNotes.Ui.reload();
 		});
 	},
-
-	async loaddata ()
+		
+	async loaddata()
     {
 		var notes = await Zotero.ZeNotes.Data.get();
 		var usersettings = await this.getsettings();
 		var columns = notes["info_columns"].concat(notes["selected_tags"]);
 		columns = this.tableutils.removehiddenandsort(columns, usersettings);
 
-		var width = Zotero.ZeNotes.Prefs.get("column-width");
+		var hsize = Zotero.ZeNotes.Prefs.get("header-size");
 
-		var widths = usersettings["width"];
+		var hsizes = usersettings["width"]; // Keep "width" in the database
 
 		// Only "tagged_items" instead of "selected_items"
 		var items = notes["tagged_items"];
 		items = items.sort(this.tableutils.custommultiplesortfunc(usersettings));
 
 		var table = document.createElement("table");
-        var trh = document.createElement("tr");
         table.id = "notes-table"
-        table.appendChild(trh);
-
 		table.style.tableLayout = "fixed";
+		if(this.isvertical())
+		{
+			this.vtable(table, columns, items, hsizes, hsize);
+		}
+		else
+		{
+			this.htable(table, columns, items, hsizes, hsize);
+		}
+    },
+
+	vtable(table, columns, items, hsizes, hsize)
+	{
+		var trs = {};
+		var i = 0;
+		var width = Zotero.ZeNotes.Prefs.get("column-width");
+		columns.forEach(c=>{
+			i+=1;
+			var trh = document.createElement("tr");
+            var tdh = document.createElement("td");
+			table.appendChild(trh);
+			trs[c] = trh;
+            Notes.innerHTML(tdh, c);
+            tdh.className = "context-menu-header draggable-header";
+			tdh.setAttribute("draggable", "true");
+            tdh.dataset.column = c;
+
+			if(i>1)
+			{
+				tdh.style.height = hsize+"px";
+			}
+
+			tdh.style.userSelect = "none";
+            trh.appendChild(tdh);
+
+			tdh.addEventListener("dragstart", function(e){
+				e.dataTransfer.setData('text/plain', e.target.dataset.column);
+			})
+
+			tdh.addEventListener("dragover", function(e){
+				e.preventDefault();
+			})
+
+			tdh.addEventListener("drop", function(e){
+				var source = e.dataTransfer.getData("text/plain");
+				var destination = e.target.dataset.column;
+				Notes.insertcolumn(source, destination);
+			})
+
+			if(Object.keys(hsizes).includes(c))
+			{
+				if(hsizes[c]!="")
+				{
+					tdh.style.height = hsizes[c]+"px";
+				}
+			}
+        });
+
+        items.forEach(v=>{
+			var i = 0;
+            columns.forEach(c=>{
+                i+=1;
+				let td = document.createElement("td");
+				var tr = trs[c];
+				tr.appendChild(td);
+				if(c in v) {
+					try {
+						Notes.innerHTML(td, v[c]);
+					}
+					catch(e)
+					{
+						alert(e+"=>"+c+": "+v[c]+" : ");
+					}
+                }
+
+                if(Notes.infotags.includes(c))
+                {
+                    td.dataset.type = "info";
+                    td.className = "context-menu-two info";
+                }
+                else
+                {
+                    td.dataset.type = "tag";
+                    td.className = "context-menu-one tag";
+                }
+
+                var span = td.querySelector(".notekey");
+
+                if(span)
+                {
+                    td.dataset.notekey = span.innerText;
+                    span.parentNode.removeChild(span);
+                }
+                else
+                {
+                    td.dataset.notekey = "";
+                }
+
+                td.dataset.column = c;
+                td.dataset.itemid = v.itemid;
+                td.dataset.itemkey = v.key;
+                td.dataset.filenames = JSON.stringify(v.filenames);
+                td.dataset.filekey = v.filekey;
 
-        columns.forEach(c=>{
-            var tdh = document.createElement("th");
+                td.querySelectorAll(".annotation").forEach(a=>{
+                    a.addEventListener("mouseover", function(e){
+                        e.target.parentNode.dataset.attachmentid = e.target.dataset.attachmentid;
+                        e.target.parentNode.dataset.attachmentkey = e.target.dataset.attachmentkey;
+                        e.target.parentNode.dataset.annotationpage = e.target.dataset.annotationpage;
+                        e.target.parentNode.dataset.annotationkey = e.target.dataset.annotationkey;
+                        e.target.parentNode.dataset.annotationdomid = e.target.id;
+                    });
+                });
+
+				if(i>1)
+				{
+					td.style.height = hsize+"px";
+				}
+
+				td.style.minWidth = width+"px";
+
+				if(Object.keys(hsizes).includes(c))
+				{
+					if(hsizes[c]!="")
+					{
+						td.style.height = hsizes[c]+"px";
+					}
+				}
+
+            });
+        }); 
+        document.getElementById("zn-body").appendChild(table);
+	},
+
+	htable(table, columns, items, hsizes, hsize)
+	{
+		var trh = document.createElement("tr");
+		table.appendChild(trh);
+		columns.forEach(c=>{
+            var tdh = document.createElement("td");
             Notes.innerHTML(tdh, c);
             tdh.className = "context-menu-header draggable-header";
 			tdh.setAttribute("draggable", "true");
             tdh.dataset.column = c;
-			tdh.style.minWidth = width+"px";
+			tdh.style.minWidth = hsize+"px";
 			tdh.style.userSelect = "none";
             trh.appendChild(tdh);
 
@@ -108,23 +246,21 @@ Notes = {
 				Notes.insertcolumn(source, destination);
 			})
 
-			if(Object.keys(widths).includes(c))
+			if(Object.keys(hsizes).includes(c))
 			{
-				if(widths[c]!="")
+				if(hsizes[c]!="")
 				{
-					tdh.style.minWidth = widths[c]+"px";
+					tdh.style.minWidth = hsizes[c]+"px";
 				}
 			}
         });
 
         items.forEach(v=>{
-
 			var tr = document.createElement("tr");
             table.appendChild(tr);
             columns.forEach(c=>{
                 let td = document.createElement("td");
 				tr.appendChild(td);
-
                 if(c in v){
 
 					try {
@@ -174,19 +310,20 @@ Notes = {
                         e.target.parentNode.dataset.annotationdomid = e.target.id;
                     });
                 });
-				td.style.minWidth = width+"px";
-				if(Object.keys(widths).includes(c))
+				td.style.minWidth = hsize+"px";
+				if(Object.keys(hsizes).includes(c))
 				{
-					if(widths[c]!="")
+					if(hsizes[c]!="")
 					{
-						td.style.minWidth = widths[c]+"px";
+						td.style.minWidth = hsizes[c]+"px";
 					}
 				}
 
             });
         }); 
         document.getElementById("zn-body").appendChild(table);
-    },
+	},
+
 	innerHTML(elt, txt)
 	{
 		if (Zotero.platformMajorVersion >= 102) {

content/settings/display.xhtml

@@ -1,7 +1,9 @@
 <div xmlns="http://www.w3.org/1999/xhtml">
 	<table id="display">
+		<tr><td><label for="zn-vertical-table">Vertical table</label></td><td><input type="checkbox" onchange="Zotero_Preferences.ZeNotes.setpreference(event, 'vertical-table');" id="zn-vertical-table"/></td><td></td></tr>
 		<tr><td>Highlight opacity</td><td><input type="range" min="0" max="255" value="255" id="zn-bg-slider" onchange="Zotero_Preferences.ZeNotes.setpreference(event, 'bg-opacity');" oninput="Zotero_Preferences.ZeNotes.updateopacity(event);"/></td><td class='highlight' style='background-color: #FFFF00; height: 1.1em;' id="zn-bg-sample">Lorem ipsum</td></tr>
-		<tr><td>Column width</td><td><input id="zn-column-width" type="range" value="100" min="20" max="1500" onchange="Zotero_Preferences.ZeNotes.setpreference(event, 'column-width');" oninput="Zotero_Preferences.ZeNotes.updatecolumnwidth(event);"/></td><td><input id="zn-column-width-val" /></td></tr>
+		<tr><td>Header size</td><td><input id="zn-header-size" type="range" value="100" min="20" max="1500" onchange="Zotero_Preferences.ZeNotes.setpreference(event, 'header-size');" oninput="Zotero_Preferences.ZeNotes.updatecolumnwidth(event);"/></td><td><input id="zn-header-size-val" /></td></tr>
+		<tr><td>Column width (for vertical)</td><td><input id="zn-column-width" type="range" value="100" min="20" max="1500" onchange="Zotero_Preferences.ZeNotes.setpreference(event, 'column-width');" oninput="Zotero_Preferences.ZeNotes.updatedisplay(event, 'zn-column-width-val');"/></td><td><input id="zn-column-width-val" /></td></tr>
 		<tr><td>Filter html</td><td colspan="2"><input id="zn-html-filter" type="text" onchange="Zotero_Preferences.ZeNotes.setpreference(event, 'html-filter');" style="width:100%;" placeholder="Comma separeted CSS selectors"/></td><td></td></tr>
 	</table>
 </div>

content/settings/manage-tags.xhtml

@@ -5,7 +5,7 @@
 			<th>Order</th>
 			<th>Type</th>
 			<th>Status</th>
-			<th>Width</th>
+			<th>Header size</th>
 			<th></th>
 		</tr>
 		</thead>

content/settings/preferences.js

@@ -20,18 +20,6 @@ Zotero_Preferences.ZeNotes = {
 		});	
 	},
 
-	initcolumnwidth()
-	{
-		var sample = document.getElementById("zn-column-width-val");
-		var value = Zotero.ZeNotes.Prefs.get("column-width");
-		var el = document.getElementById("zn-column-width");
-		if(el!=null)
-		{
-			sample.value = value;
-			el.value = value;
-		}
-	},
-
 	loadpreference(prefid, elid)
 	{
 		var el = document.getElementById(elid)
@@ -66,7 +54,13 @@ Zotero_Preferences.ZeNotes = {
 
 	updatecolumnwidth(e)
 	{
-		var sample = document.getElementById("zn-column-width-val");
+		var sample = document.getElementById("zn-header-size-val");
+		sample.value = e.target.value;
+	},
+
+	updatedisplay(e, id)
+	{
+		var sample = document.getElementById(id);
 		sample.value = e.target.value;
 	},
 
@@ -218,9 +212,15 @@ Zotero_Preferences.ZeNotes = {
 			Zotero_Preferences.ZeNotes.loadtables();
 			Zotero_Preferences.ZeNotes.loadpreferences();
 			Zotero_Preferences.ZeNotes.initopacity();
-			Zotero_Preferences.ZeNotes.initcolumnwidth();
 			Zotero_Preferences.ZeNotes.loadpreference("html-filter", "zn-html-filter");
 			Zotero_Preferences.ZeNotes.loadpreference("load-on-change", "zn-reload-on-change");
+			Zotero_Preferences.ZeNotes.loadpreference("vertical-table", "zn-vertical-table");
+
+			Zotero_Preferences.ZeNotes.loadpreference("header-size", "zn-header-size-val");
+			Zotero_Preferences.ZeNotes.loadpreference("header-size", "zn-header-size");
+
+			Zotero_Preferences.ZeNotes.loadpreference("column-width", "zn-column-width-val");
+			Zotero_Preferences.ZeNotes.loadpreference("column-width", "zn-column-width");
 		})
 		.catch(error => {
 			console.log('Error loading content: ' + error);

install.rdf

@@ -5,7 +5,7 @@
     <Description about="urn:mozilla:install-manifest">
         <em:id>[email protected]</em:id>
         <em:name>ZeNotes</em:name>
-        <em:version>0.4.2</em:version>
+        <em:version>0.4.3</em:version>
         <em:multiprocessCompatible>true</em:multiprocessCompatible>
         <em:updateURL>https://raw.githubusercontent.com/frianasoa/zenotes/main/zenote-update.json</em:updateURL>
         <em:homepageURL>https://github.com/frianasoa/zenotes</em:homepageURL>

manifest.json

@@ -1,7 +1,7 @@
 {
     "manifest_version": 2,
     "name": "Ze Notes",
-    "version": "0.4.2",
+    "version": "0.4.3",
     "description": "Advanced notes manager",
     "homepage_url": "https://github.com/frianasoa/zenotes",
     "author": "Fanantenana Rianasoa Andriariniaina",

prefs.js

@@ -1 +1,4 @@
-pref("extensions.make-it-red.intensity", 100);
+user_pref("extensions.zenotes.bg-opacity", "100");
+user_pref("extensions.zenotes.column-width", "20");
+user_pref("extensions.zenotes.header-size", "20");
+user_pref("extensions.zenotes.load-on-change", "true");

zenote-update.json

@@ -3,9 +3,9 @@
     "[email protected]": {
       "updates": [
         {
-          "version": "0.4.2",
-          "update_link": "https://github.com/frianasoa/Ze-Notes/releases/download/v0.4.2/zenotes-v0.4.2.xpi",
-          "update_hash": "sha256:8940a73220a150528ebfec40ae01f7c856ca558d75a6776bfaca365cbd843052",
+          "version": "0.4.3",
+          "update_link": "https://github.com/frianasoa/Ze-Notes/releases/download/v0.4.3/zenotes-v0.4.3.xpi",
+          "update_hash": "sha256:17480345dcd5f03a612ba8faaf1481d02b468b60aa19475a909414da125175d0",
           "applications": {
             "gecko": {
               "strict_min_version": "60.0"