From 96fa6d50e8ece942d708ef40c0ff3b9256758e2b Mon Sep 17 00:00:00 2001
From: freginold <freginold@users.noreply.github.com>
Date: Fri, 3 Mar 2017 15:54:45 -0500
Subject: [PATCH] v3.2.3-

   - changed new note div from relative to absolute to remove vertical shifting on note display
   - added "collapse all" & "expand all" buttons to options screen
   - centered new note input box
   - removed redundant CSS settings
   - correct punctuation typos on options screen
---
 _note.css | 31 +++++++++++++++--------
 _note.js  | 75 ++++++++++++++++++++++++++++++++++++++++++++++---------
 note.hta  | 22 ++++++++--------
 3 files changed, 94 insertions(+), 34 deletions(-)

diff --git a/_note.css b/_note.css
index 0e36602..50e420d 100644
--- a/_note.css
+++ b/_note.css
@@ -1,4 +1,4 @@
-html {
+body {
   font-size: 1em;
   font-family: serif;
   color: black;
@@ -13,7 +13,7 @@ input[name=screenPos] {
 button:hover,
 input[type=button]:hover,
 input[type=submit]:hover {
-  background: #dbdbdb;
+  background-color: #dbdbdb;
 }
 button[disabled]:hover {
   background: #efefef;
@@ -149,6 +149,18 @@ button[disabled]:hover {
 .uline {
   text-decoration: underline;
 }
+.delBox {
+  position: relative;
+  float: right;
+  width: 110px;
+  padding-bottom: 4px;
+}
+.optionsButtonBox {
+  position: relative;
+  float: right;
+  width: 170px;
+  padding-bottom: 4px;
+}
 #noteList {
   display: block;
   margin: 5px;
@@ -171,7 +183,12 @@ button[disabled]:hover {
   padding-bottom: 4px;
 }
 #newNoteDiv {
-  display: none;
+  position: absolute;
+  text-align: center;
+  top: 30%;
+}
+#newNoteForm {
+  position: relative;
 }
 #noteTitle {
   text-align: center;
@@ -179,21 +196,13 @@ button[disabled]:hover {
   margin-top: 4px;
 }
 #inputDiv {
-  display: none;
   margin-left: 10px;
 }
 #optionsDiv {
-  display: none;
   font-family: serif;
   font-size: 1em;
   overflow: auto;
 }
-#delBox {
-  position: relative;
-  float: right;
-  width: 110px;
-  padding-bottom: 4px;
-}
 #aboutDiv {
   padding-left: 10px;
   margin-left: 25px;
diff --git a/_note.js b/_note.js
index 76414fe..dc913bc 100644
--- a/_note.js
+++ b/_note.js
@@ -5,6 +5,7 @@ var noteBody = document.getElementById('noteBody');
 var inputDiv = document.getElementById('inputDiv');
 var inputBox = document.getElementById('inputBox');
 var newNoteDiv = document.getElementById('newNoteDiv');
+var newNoteForm = document.getElementById('newNoteForm');
 var noteTitle = document.getElementById('noteTitle');
 var optionsDiv = document.getElementById('optionsDiv');
 var aboutDiv = document.getElementById('aboutDiv');
@@ -74,6 +75,8 @@ var moveButtonsHTMLMid = "' onclick='MoveUp(this)'>&uarr;</button> <button class
 var moveButtonsHTMLEnd = "' onclick='MoveDown(this)'>&darr;</button>";
 var lineStartHTML = "<span class='serif'>&sdot; </span>";
 var statusBarHTML = "&nbsp;";
+var expandAllButtonHTML = "<button class='upperRightButton' id='expandAllButton' onclick='expandAll()'>&#9196; Expand All</button>";
+var collapseAllButtonHTML = "<button class='upperRightButton' id='collapseAllButton' onclick='collapseAll();'>&#9195; Collapse All</button>";
 var noteFont = 'serif';
 var fgColor = 'black';
 var firstCoordCheck = true;
@@ -90,6 +93,8 @@ var large = 1.3;
 var aboutInterval = false;
 var flip = false;
 var defTextSize = 1;
+var sectionsCollapsed = 0;
+var sectionsTotal = 0;
 var currentNote, dummyVar, bgColor, i, currentX, currentY, oldX, oldY, offsetX, offsetY;
 var lastLine, itemToEdit, itemTotal, statusTimer, prevNote, aboutCounter;
 
@@ -241,9 +246,9 @@ function saveSize() {
 
 function showOptions() {
   clearAll();
-  noteBody.style.display='none';
-  noteTitle.innerText = 'Options:';
-  optionsDiv.style.display='block';
+  noteTitle.innerHTML = "<div class='optionsButtonBox'>" + expandAllButtonHTML + collapseAllButtonHTML + "</div>" + 'Options:';
+  checkCollapseExpandButtons();
+  optionsDiv.style.display = 'block';
   for (i = 0; i<document.getElementsByTagName('td').length; i++) {
     if (document.getElementsByTagName('td')[i].className == 'optionsColumn') {
       document.getElementsByTagName('td')[i].style.width = (document.body.clientWidth / 3);
@@ -330,11 +335,11 @@ function clearAll() {
   setTimeout(function(){ firstCall = true; } , 250);
   GetFileList()
   newNoteDiv.style.display = 'none';
-  optionsDiv.style.display='none';
+  optionsDiv.style.display = 'none';
   inputDiv.style.display = 'none';
   aboutDiv.style.display = 'none';
   backupDiv.style.display = 'none';
-  noteBody.style.display='block';
+  noteBody.style.display = 'none';
   noteBody.innerText = '';
   noteTitle.innerText = '';
   newNoteInputBox.value = '';
@@ -352,13 +357,14 @@ function clearAll() {
 function showNotes(cNote) {
   // load note file
   clearAll();
+  noteBody.style.display = 'block';
   prevNote = currentNote;
   currentNote = cNote;
   editing = false;
   window[currentNote].className = 'noteButton activeNote';
   var currentNoteDisplay = currentNote;
   if (currentNote == "&") { currentNoteDisplay = "&#38;"; }    // to deal w/ & as only char in title
-  noteTitle.innerHTML = "<div id='delBox'>" + renButtonHTML + delButtonHTML + "</div>" + currentNoteDisplay;
+  noteTitle.innerHTML = "<div class='delBox'>" + renButtonHTML + delButtonHTML + "</div>" + currentNoteDisplay;
   getLines(currentNote);
   if (currentNote == prevNote) {
     // if reloading the same note
@@ -377,7 +383,7 @@ function showNotes(cNote) {
     window['d' + (lastLine-1)].style.filter = "alpha(opacity = 25)";
     window['d' + (lastLine-1)].style.opacity = .25;
   }
-  inputDiv.style.display='block';
+  inputDiv.style.display = 'block';
   inputBox.focus();
 }
 
@@ -416,9 +422,9 @@ function onSubmitted(tempVar) {
 
 function showNewNoteBox() {
   clearAll();
-  noteBody.style.display='none';
   noteTitle.innerText = 'Name for new note:';
   newNoteDiv.style.display = 'block';
+  centerNewNoteForm();
   newNoteInputBox.focus();
 }
 
@@ -434,6 +440,11 @@ function createNewNote(newNoteName) {
   else { newNoteInputBox.value = ''; }
 }
 
+function centerNewNoteForm() {
+  // manually center the input box on the new note screen
+  newNoteForm.style.left = document.documentElement.clientWidth / 2 - (newNoteForm.firstChild.size * 6 + 10);
+}
+
 function getLocalFont(n) {
   localFontShow[n].style.display='none';
   localFontDiv[n].style.display='inline';
@@ -505,7 +516,6 @@ function deleteNote() {
 function displayAbout() {
   // display license info/help file
   clearAll();
-  noteBody.style.display='none';
   noteTitle.innerText = "About Note";
   aboutDiv.style.display = 'block';
   document.getElementById('versionInfo').innerHTML = "<span id='line1'>" + currentVer + "</span><br><span id='line2'>" + license + "</span>";
@@ -700,7 +710,6 @@ function highlight(tempNum) {
 function dispBackupDiv() {
   // show backup div: backup button, current backup dir, button to change dir
   clearAll();
-  noteBody.style.display='none';
   noteTitle.innerText = "Backup";
   backupDiv.style.display = 'block';
   var Opt13Display = Opt13;
@@ -764,6 +773,7 @@ function checkSize() {
     firstCall = true;
   }
   else { firstCall = true; }
+  if (newNoteDiv.style.display != "none") { centerNewNoteForm(); }
 }
 
 function getDefaultSize() {
@@ -834,13 +844,53 @@ function resetDefault() {
 function collapse(num) {
 	// collapse options section
 	document.getElementById('section' + num).style.display = "none";
-	document.getElementById('symbol' + num).innerHTML = "&#10133;";
+	document.getElementById('symbol' + num).innerHTML = "&#9654;";
+	sectionsCollapsed++;
+	checkCollapseExpandButtons();
 }
 
 function expand(num) {
 	// expand options section
 	document.getElementById('section' + num).style.display = "inline";
-	document.getElementById('symbol' + num).innerHTML = "&#10134;";
+	document.getElementById('symbol' + num).innerHTML = "&#9662;";
+	sectionsCollapsed--;
+	checkCollapseExpandButtons();
+}
+
+function expandAll() {
+	// expand all options settings
+	for (var i = 0; i < document.getElementsByTagName('label').length; i++) {
+		var thisId = document.getElementsByTagName('label')[i].id;
+		if (thisId.slice(0, 6) === "header") {
+			var thisNum = thisId.slice(thisId.length - 2, thisId.length);
+			var thisSection = "section" + thisNum;
+			if (document.getElementById(thisSection).style.display == "none") { expand(thisNum); }
+		}
+	}
+	sectionsCollapsed = 0;
+	checkCollapseExpandButtons();
+}
+
+function collapseAll() {
+	// collapse all options settings
+	for (var i = 0; i < document.getElementsByTagName('label').length; i++) {
+		var thisId = document.getElementsByTagName('label')[i].id;
+		if (thisId.slice(0, 6) === "header") {
+			var thisNum = thisId.slice(thisId.length - 2, thisId.length);
+			var thisSection = "section" + thisNum;
+			if (document.getElementById(thisSection).style.display !== "none") { collapse(thisNum); }
+		}
+	}
+	sectionsCollapsed = sectionsTotal;
+	checkCollapseExpandButtons();
+}
+
+function checkCollapseExpandButtons() {
+	// if all options either collapsed or expanded, disable the corresponding button
+	if (sectionsCollapsed === sectionsTotal) { document.getElementById('collapseAllButton').disabled = true; }
+	else { document.getElementById('collapseAllButton').disabled = false; }
+	if (sectionsCollapsed === 0) { document.getElementById('expandAllButton').disabled = true; }
+	else { document.getElementById('expandAllButton').disabled = false; }	
 }
 
 
@@ -891,6 +941,7 @@ for (var i = 0; i < document.getElementsByTagName('label').length; i++) {
 	// add click handlers to option headings for expanding/collapsing
 	var thisId = document.getElementsByTagName('label')[i].id;
 	if (thisId.slice(0, 6) === "header") {
+		sectionsTotal++;
 		document.getElementById(thisId).onclick = function() {
 			var thisNum = this.id.slice(this.id.length - 2, this.id.length);
 			var thisSection = "section" + thisNum;
diff --git a/note.hta b/note.hta
index 0073e80..28ff392 100644
--- a/note.hta
+++ b/note.hta
@@ -9,7 +9,7 @@
   Scroll = no
   Icon = "note_icon.ico"
   navigable = no
-  version = "3.2.2"
+  version = "3.2.3"
 >
 <title>Note</title>
 <link href='_note.css' rel='stylesheet' type='text/css'>
@@ -30,7 +30,7 @@
 <div id='noteBody'></div>
 
 <div id='newNoteDiv'>
-  <form name='newNoteForm' onsubmit='createNewNote(newNoteInputBox.value);' action='#' >
+  <form id='newNoteForm' name='newNoteForm' onsubmit='createNewNote(newNoteInputBox.value);' action='#' >
     <input type='text' size=20 id='newNoteInputBox' />
     <input type='submit' value='Create' />
   </form>
@@ -55,7 +55,7 @@
   <br />
   <table><tr>
   <td class='optionsColumn'>
-  <label id='header01'><h3><span id='symbol01'>&#10134;</span> <span class='uline'>Background Color:</span></h3></label>
+  <label id='header01'><h3><span id='symbol01'>&#9662;</span> <span class='uline'>Background Color</span></h3></label>
   <div id='section01' class='optionSections'>
   <label id='ltgrayL'><input type='radio' name='bg' class='optionInput' value='gray' /> Light Gray &nbsp;<span class='goItalic'>(default)</span> </label><br />
   <label id='yellowL'><input type='radio' name='bg' class='optionInput' value='yellow' /> Yellow </label><br />
@@ -71,7 +71,7 @@
   <label id='blackL'><input type='radio' name='bg' class='optionInput' value='black' /> Black </label></div>
   </td>
   <td class='optionsColumn'>
-  <label id='header02'><h3><span id='symbol02'>&#10134;</span> <span class='uline'>Note Font:</span></h3></label>
+  <label id='header02'><h3><span id='symbol02'>&#9662;</span> <span class='uline'>Note Font</span></h3></label>
   <div id='section02' class='optionSections'>
   <label><input type='radio' name='font' id='localFontCheckBox0' class='optionInput' value='uf0' />
     <div id='localFontDiv0' class='localFontDiv'> <span class='smallFont'>Choose any local font:</span>
@@ -121,7 +121,7 @@
   <label class='serif'><input type='radio' name='font' class='optionInput' value='p2' /> Serif &nbsp;<span class='goItalic'>(default)</span></label>
   </div>
   <br /><br /><br />
-  <label id='header03'><h3><span id='symbol03'>&#10134;</span> <span class='uline'>Note Font Size:</span></h3></label>
+  <label id='header03'><h3><span id='symbol03'>&#9662;</span> <span class='uline'>Note Font Size</span></h3></label>
   <div id='section03' class='optionSections'>
   <label class='smallFont'><input type='radio' name='textSize' class='optionInput' value='small'> Small</label><br />
   <label class='mediumFont'><input type='radio' name='textSize' class='optionInput' value='medium'> Medium &nbsp;<span class='goItalic'>(default)</span></label><br />
@@ -129,22 +129,22 @@
   </div>
   </td>
   <td class='optionsColumn'>
-  <label id='header04'><h3><span id='symbol04'>&#10134;</span> <span class='uline'>Size & Position</span></h3></label>
+  <label id='header04'><h3><span id='symbol04'>&#9662;</span> <span class='uline'>Size & Position</span></h3></label>
   <div id='section04' class='optionSections'>
   <input type='radio' name='screenPos' class='optionInput' value='mm'>
   <input type='radio' name='screenPos' class='optionInput' value='cc'>
   <button class='optButton' id='screenPosResetButton' onclick='resetPos();'>Reset Window Position</button><br />
   <button class='optButton' id='screenSizeResetButton' onclick='resetSize();'>Reset Window Size</button>
   </div>
-  <br /><br />
-  <label id='header05'><h3><span id='symbol05'>&#10134;</span> <span class='uline'>Backup / Restore</span></h3></label>
+  <br /><br /><br />
+  <label id='header05'><h3><span id='symbol05'>&#9662;</span> <span class='uline'>Backup / Restore</span></h3></label>
   <div id='section05' class='optionSections'>
   <button class='optButton' id='undeleteButton' onclick='Undelete()' disabled=true>Restore Last Deleted Item</button><br />
   <button class='optButton' id='backupButton' onclick='dispBackupDiv();'>Backup...</button><br />
-  <button class='optButton' id='defaultButton' onclick='resetDefault();'>Restore All Default Settings</button>
+  <button class='optButton' id='defaultButton' onclick='resetDefault();'>Restore Default Settings</button>
   </div>
-  <br /><br />
-  <label id='header06'><h3><span id='symbol06'>&#10134;</span> <span class='uline'>Status Bar:</span></h3></label>
+  <br /><br /><br />
+  <label id='header06'><h3><span id='symbol06'>&#9662;</span> <span class='uline'>Status Bar</span></h3></label>
   <div id='section06' class='optionSections'>
   <label><input type='radio' name='statusOption' class='optionInput' value='Hide' /> Hide</label><br />
   <label><input type='radio' name='statusOption' class='optionInput' value='Show' /> Show &nbsp;<span class='goItalic'>(default)</span></label><br />