v3.1.2-

- fixed issue with not centering correctly when a non-default size - removed coordinates display, replaced it with a screen position reset button (to center window) - added new background colors: orange, forest green, brown - made edit text box responsive - improved input text box responsiveness - added highlight on hover to all non-disabled buttons
freginold · Dec 9, 2016 · 856e9e3 · 856e9e3
1 parent 239dc4f
commit 856e9e3
Show file tree

Hide file tree

Showing 4 changed files with 83 additions and 44 deletions.
diff --git a/_note.css b/_note.css
@@ -7,6 +7,17 @@ h4 {
   margin-bottom: 2px;
   text-decoration: underline;
 }
+input[name=screenPos] {
+  display: none;
+}
+button:hover,
+input[type=button]:hover,
+input[type=submit]:hover {
+  background: #dbdbdb;
+}
+button[disabled]:hover {
+  background: #efefef;
+}
 .upperRightButton {
   position: relative;
   float: left;
@@ -108,9 +119,6 @@ h4 {
   padding-right: 0.2em;
   vertical-align: middle;
 }
-.moveButtons:hover {
-  background: #dbdbdb;
-}
 .uBut {
   margin-left: 1px;
   margin-right: 2px;
@@ -129,6 +137,9 @@ h4 {
 .overflowClass {
   word-break: break-all;
 }
+.optButton {
+  margin-bottom: 2px;
+}
 #noteList {
   display: block;
   margin: 5px;

diff --git a/_note.js b/_note.js
@@ -111,10 +111,21 @@ function applyOptions() {
     case "blue":
       bgColor = "#a9d6df";
       break;
+	case "orange":
+	  bgColor = "#FFCF5F";
+	  break;
     case "charcoal":
       bgColor = "#555555";
       fgColor = "#ffffff";
       break;
+    case "forestgreen":
+      bgColor = "#228542";
+      fgColor = "#ffffff";
+      break;
+    case "brown":
+      bgColor = "#A88042";
+      fgColor = "#ffffff";
+      break;
     case "black":
       bgColor = "#222222";
       fgColor = "#eeeeee";
@@ -164,8 +175,11 @@ function saveOptions() {
   else if (document.getElementsByName('bg')[3].checked) { Opt2 = 'pink'; }
   else if (document.getElementsByName('bg')[4].checked) { Opt2 = 'green'; }
   else if (document.getElementsByName('bg')[5].checked) { Opt2 = 'blue'; }
-  else if (document.getElementsByName('bg')[6].checked) { Opt2 = 'charcoal'; }
-  else if (document.getElementsByName('bg')[7].checked) { Opt2 = 'black'; }
+  else if (document.getElementsByName('bg')[6].checked) { Opt2 = 'orange'; }  
+  else if (document.getElementsByName('bg')[7].checked) { Opt2 = 'charcoal'; }
+  else if (document.getElementsByName('bg')[8].checked) { Opt2 = 'forestgreen'; }
+  else if (document.getElementsByName('bg')[9].checked) { Opt2 = 'brown'; }    
+  else if (document.getElementsByName('bg')[10].checked) { Opt2 = 'black'; }
   // option 3 - font
   Opt3 = 'p1';
   if (localFontCheckBox[0].checked) { Opt3 = 'uf0'; }
@@ -226,9 +240,6 @@ function showOptions() {
     }
   }
   switch (Opt2) {
-    case "gray":
-      document.getElementsByName('bg')[0].checked=true;
-      break;
     case "yellow":
       document.getElementsByName('bg')[1].checked=true;
       break;
@@ -244,12 +255,23 @@ function showOptions() {
     case "blue":
       document.getElementsByName('bg')[5].checked=true;
       break;
-    case "charcoal":
+    case "orange":
       document.getElementsByName('bg')[6].checked=true;
+      break;	  
+    case "charcoal":
+      document.getElementsByName('bg')[7].checked=true;
+      break;
+    case "forestgreen":
+      document.getElementsByName('bg')[8].checked=true;
+      break;
+    case "brown":
+      document.getElementsByName('bg')[9].checked=true;
       break;
     case "black":
-      document.getElementsByName('bg')[7].checked=true;
+      document.getElementsByName('bg')[10].checked=true;
       break;
+	default:
+	  document.getElementsByName('bg')[0].checked=true;
   }
   var fonts = document.getElementsByName('font');
   // populate user font boxes, if they've been saved
@@ -276,15 +298,17 @@ function showOptions() {
     if (sizes[i].value == Opt4) { sizes[i].checked=true; }
   }
   if (Opt9 == 'cc') { document.getElementsByName('screenPos')[1].checked = true; }
-  else { document.getElementsByName('screenPos')[0].checked = true; }
+  else {
+    document.getElementsByName('screenPos')[0].checked = true;
+	document.getElementById('screenPosResetButton').disabled = true;
+  }
   if (Opt12 == 'hide') { document.getElementsByName('statusOption')[0].checked = true; }
   else { document.getElementsByName('statusOption')[1].checked = true; }
   if (Opt14 == NoteWidth && Opt15 == NoteHeight) {
     // default width and height
 	document.getElementById('screenSizeResetButton').disabled = true;
   }
   checkCoords();
-  showCoords();
 }
 
 function clearAll() {
@@ -503,18 +527,25 @@ function checkCoords() {
   }
   noteBody.style.width = document.documentElement.clientWidth * 0.96;
   var tempSize = 100 - (((NoteWidth - document.documentElement.clientWidth) / NoteWidth) * 100);
-  if (tempSize > 100) { tempSize = 100; }
   inputBox.size = tempSize;
+  if (!!document.getElementById('editBox')) {
+    // set edit text box size
+  	document.getElementById('editBox').size = inputBox.size * 0.8;
+    if (noteBody.scrollWidth >= (noteBody.offsetWidth - 5)) { 
+      document.getElementById('editBox').size = inputBox.size * 0.5;
+	}
+  }
   oldX = currentX;
   oldY = currentY;
   getCoords();
   if (!firstCoordCheck) {
     if ((oldX != currentX) || (oldY != currentY)) {
-      if (Opt9 == 'cc') { showCoords(); savePos(); }
+      if (Opt9 == 'cc') { 	document.getElementById('screenPosResetButton').disabled = false; getCoords(); savePos(); }
       else {
         Opt9 = 'cc';
+		document.getElementById('screenPosResetButton').disabled = false;
         document.getElementsByName('screenPos')[1].checked = true;
-        showCoords();
+        getCoords();
         savePos();
       }
     }
@@ -539,11 +570,6 @@ function getCoords() {
   currentY = window.screenTop;
 }
 
-function showCoords() {
-  getCoords();
-  coords.innerText = "[" + (currentX - offsetX) + ", " + (currentY - offsetY) + "]";
-}
-
 function getOffset() {
   // determine x & y offset amt at start
   var nowX = window.screenLeft;
@@ -561,6 +587,7 @@ function goEdit(itemObj) {
   editing = true;
   var editBoxHTML = "<form name='editForm' onsubmit='event.returnValue=false;SubmitEdit(editBox.value);' action='#'><input type='text' size=50 id='editBox' /><input type='submit' style='color: green; margin-left: 2px;' value='Change' /><input type='button' style='color: red; margin-left: 2px;' value='Cancel' onclick='canceledEdit();' /></form>";
   document.getElementById(itemToEdit).innerHTML = editBoxHTML;
+  checkCoords();   // to set editBox size right away
   document.getElementById('editBox').value = uneditedString;
   document.getElementById('editBox').focus();
   document.getElementById('editBox').select();
@@ -671,6 +698,7 @@ function checkSize() {
   if ((oldW != Opt14) || (oldH != Opt15)) {
     // size has changed
     saveSize();
+	document.getElementById('screenPosResetButton').disabled = false;
     firstCall = true;
   }
   else { firstCall = true; }
@@ -690,8 +718,6 @@ function getDefaultSize() {
 
 function resetSize() {
   // reset window size
-//  Opt14 = NoteWidth;
-//  Opt15 = NoteHeight;
   getDefaultSize();
   correctSize();
   window.resizeTo(NoteWidth, NoteHeight);
@@ -705,10 +731,6 @@ function resetSize() {
 function correctSize() {
   // to correct for getBoundingClientRect() and resizeTo() not matching up exactly
   var tempRect = document.documentElement.getBoundingClientRect();
-//  Opt14 = tempRect.right - tempRect.left;
-//  Opt15 = tempRect.bottom - tempRect.top;
-//  Opt14 = Opt14 + (Opt14 - tempRect.right - tempRect.left);
-//  Opt15 = Opt15 + (Opt15 - tempRect.bottom - tempRect.top);
   var percentW = (Opt14 / (tempRect.right - tempRect.left));
   var percentH = (Opt15 / (tempRect.bottom - tempRect.top));  
   newOpt14 = Math.floor(Opt14 * percentW);
@@ -725,6 +747,14 @@ function checkFor1stCharNum(thisChar) {
   else { return false; }
 }
 
+function resetPos() {
+  // reset and center window position
+  Opt9 = "mm";
+  setPos();
+  savePos();
+  document.getElementById('screenPosResetButton').disabled = true;  
+}
+
 function showSize() { alert("O: " + Opt14 + " " + Opt15 + "\nDef: " + NoteWidth + " " + NoteHeight); }
   // for testing
 
@@ -750,12 +780,6 @@ for (i=0; i<inputs.length; i++) {
         break;
     }
   }
-  else if (inputs[i].value == "mm") {
-    inputs[i].attachEvent('onclick', function() { showCoords(); savePos(); setPos(); showCoords(); });
-  }
-  else if (inputs[i].value == "cc") {
-    inputs[i].attachEvent('onclick', function() { showCoords(); savePos(); });
-  }
   else if (inputs[i].className == "optionInput") {
     inputs[i].attachEvent('onclick', saveOptions);
   }

diff --git a/_note.vbs b/_note.vbs
@@ -1,6 +1,6 @@
 ' Settings (saved in config file):
 ' 1. Time Stamp: hide/show
-' 2. Background Color: gray/yellow/white/pink/green/blue/charcoal/black
+' 2. Background Color: gray/yellow/white/pink/green/blue/orange/charcoal/forestgreen/brown/black
 ' 3. Note Font: p1-serif/p2-sans serif/uf0/uf1/uf2/uf3
 ' 4. Note Font Size: small/medium/large
 ' 5. User Font 1
@@ -53,8 +53,6 @@ Const InvalidFNMsg2 = "The following characters are prohibited:"
 NewFileWithPath = ""
 NoteWidth = round(screen.availWidth/1.5)
 NoteHeight = round(screen.availHeight/1.31)
-MidXPos = screen.availWidth/2 - NoteWidth/2
-MidYPos = screen.availHeight/2 - NoteHeight/2
 EditedString = ""
 
 Opt1 = Default1
@@ -541,6 +539,8 @@ Sub SetPos
     Case "cc"
       window.moveTo currentX, currentY
     Case Else
+	  MidXPos = screen.availWidth/2 - Opt14/2
+	  MidYPos = screen.availHeight/2 - Opt15/2
       window.moveTo MidXPos, MidYPos
   End Select
 End Sub

diff --git a/note.hta b/note.hta
@@ -9,7 +9,7 @@
   Scroll = no
   Icon = "note_icon.ico"
   navigable = no
-  version = "3.1.0"
+  version = "3.1.1"
 >
 <title>Note</title>
 <link href='_note.css' rel='stylesheet' type='text/css'>
@@ -54,17 +54,18 @@
   <br />
   <table><tr>
   <td class='optionsColumn'>
-  <button id='undeleteButton' onclick='Undelete()' disabled=true>Restore last deleted item</button><br />
-  <button id='backupButton' onclick='dispBackupDiv();'>Backup...</button>
   <h4>Background Color:</h4>
   <label><input type='radio' name='bg' class='optionInput' value='gray' /> Gray &nbsp;<span class='goItalic'>(default)</span></label><br />
   <label><input type='radio' name='bg' class='optionInput' value='yellow' /> Yellow</label><br />
   <label><input type='radio' name='bg' class='optionInput' value='white' /> White</label><br />
   <label><input type='radio' name='bg' class='optionInput' value='pink' /> Pink</label><br />
   <label><input type='radio' name='bg' class='optionInput' value='green' /> Green</label><br />
   <label><input type='radio' name='bg' class='optionInput' value='blue' /> Blue</label><br />
-  <label><input type='radio' name='bg' class='optionInput' value='charcoal' /> Charcoal <span class='smallFont'>(white text)</span></label><br />
-  <label><input type='radio' name='bg' class='optionInput' value='black' /> Black <span class='smallFont'>(white text)</span></label>
+  <label><input type='radio' name='bg' class='optionInput' value='orange' /> Orange</label><br />
+  <label><input type='radio' name='bg' class='optionInput' value='charcoal' /> Charcoal <span class='smallFont'>(w/ white text)</span></label><br />
+  <label><input type='radio' name='bg' class='optionInput' value='forestgreen' /> Forest Green <span class='smallFont'>(w/ white text)</span></label><br />
+  <label><input type='radio' name='bg' class='optionInput' value='brown' /> Brown <span class='smallFont'>(w/ white text)</span></label><br />
+  <label><input type='radio' name='bg' class='optionInput' value='black' /> Black <span class='smallFont'>(w/ white text)</span></label>
   </td>
   <td class='optionsColumn'>
   <h4>Note Font:</h4>
@@ -121,10 +122,12 @@
   <label class='largeFont'><input type='radio' name='textSize' class='optionInput' value='large'> Large</label>
   </td>
   <td class='optionsColumn'>
-  <h4>Screen Position:</h4>
-  <label><input type='radio' name='screenPos' class='optionInput' value='mm'> Centered &nbsp;<span class='goItalic'>(default)</span></label><br />
-  <label><input type='radio' name='screenPos' class='optionInput' value='cc'> Custom: <span id='coords' class='smallFont'></span>
-    <br /><span class='smallFont'>&ensp;&emsp;&emsp;(Drag to desired position)</span></label>
+  <input type='radio' name='screenPos' class='optionInput' value='mm'>
+  <input type='radio' name='screenPos' class='optionInput' value='cc'>
+  <button class='optButton' id='undeleteButton' onclick='Undelete()' disabled=true>Restore last deleted item</button><br />
+  <button class='optButton' id='screenPosResetButton' onclick='resetPos();'>Reset Window Position</button><br />
+  <button class='optButton' id='screenSizeResetButton' onclick='resetSize();'>Reset Window Size</button><br />
+  <button class='optButton' id='backupButton' onclick='dispBackupDiv();'>Backup...</button><br />
   <h4>Status Bar:</h4>
   <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>
@@ -149,6 +152,7 @@
 
 <script language='vbscript' src='_note.vbs'></script>
 <script language='javascript' src='_note.js'></script>
+<script language='javascript' src='_temp.js'></script>
 
 </body>
 </html>