Skip to content

Commit 3af3a7d

Browse files
orchardguidesorchardguides
authored
Fine Tuning
1 parent 1de9b4a commit 3af3a7d

File tree

8 files changed

+96
-87
lines changed

8 files changed

+96
-87
lines changed

‎KeiHTMLEditor.html

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
<div>
2+
</div>Kei HTML Editor - a web-based tool for online creation of rich-text documents.
3+
<br>
4+
<br>
5+
Designed & programmed by Kei G. Gauthier, CPA, MSTax.
6+
<br>
7+
<br>
8+
Released under the <a href="https://creativecommons.org/licenses/by/3.0/us/" target="_blank">Creative Commons Attribution 3.0 License</a>.
9+
<br>
10+
<br>
11+
<div style="text-align:center; vertical-align:center;">
12+
<a href="http://www.fatcow.com/free-icons"target="_blank">
13+
<img src="./icons/FatCow/fatcow.png" alt="Icon" data-toggle="tooltip" data-placement="top" title="Link to Farm Fresh Icons"/>
14+
</a>
15+
</div>
16+
<br>
17+
The <a href="http://www.fatcow.com/free-icons"target="_blank">Farm Fresh Web Icons</a> used in this project are made available under the <a href="https://creativecommons.org/licenses/by/3.0/us/" target="_blank">Creative Commons Attribution 3.0 License</a>. The file names of Farm Fresh Icons that have been altered by the creator of the Kei HTML Editor are prefaced with 'kei_'.
18+
</div>

‎css/KeiEditorMenu.css

+5-18
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@
3131
margin-top: -56px;
3232
padding:0px;
3333
}
34-
.lists-dropdown-menu {
34+
.list-dropdown-menu {
3535
margin-left: 50px;
3636
margin-top: -56px;
3737
padding:0px;
@@ -43,7 +43,7 @@
4343
}
4444
.selection-dropdown-menu {
4545
margin-left: 50px;
46-
margin-top: -215px;
46+
margin-top: -190px;
4747
padding:0px;
4848
}
4949
.about-dropdown-menu {
@@ -54,20 +54,6 @@
5454
.dropdown:hover>.dropdown-menu {
5555
display: block;
5656
}
57-
.dropdown-submenu {
58-
position: relative;
59-
width:30px;
60-
}
61-
.dropdown-submenu>.dropdown-menu {
62-
border-radius: 0px;
63-
left: 100%;
64-
margin-top: -20px;
65-
padding:0px;
66-
top: 0;
67-
}
68-
.dropdown-submenu:hover>.dropdown-menu {
69-
display: block;
70-
}
7157

7258
.modal-backdrop {
7359
background-color: transparent;
@@ -91,7 +77,7 @@
9177
cursor:pointer;
9278
padding: 3px 20px 3px 20px;
9379
}
94-
.chosen-style {
80+
.style-chosen {
9581
background-color:#ffffff;
9682
border:1px solid #000000;
9783
height:3.5rem;
@@ -109,7 +95,7 @@
10995
height: 20px;
11096
width: 20px;
11197
}
112-
.chosen-color {
98+
.color-chosen {
11399
border:1px solid #000000;
114100
float: left;
115101
height: 20px;
@@ -146,6 +132,7 @@
146132

147133
#keieditable {
148134
border:solid 3px #d3d3d3;
135+
font-size:medium;
149136
margin:1%;
150137
min-height:20rem;
151138
padding:1%;

‎icons/FatCow/kei_table_selection.png

0 Bytes
Loading

‎icons/kei/kei_list_type.png

0 Bytes
Loading

‎index.html

+6-6
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
1212
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.min.js"
1313
integrity="sha384-+sLIOodYLS7CIrQpBjl+C7nPvqq+FbNUBDunl/OZv93DB7Ln/533i8e/mZXLi/P+" crossorigin="anonymous"></script>
14-
14+
1515
<link rel="stylesheet" href="./css/KeiEditorMenu.css">
1616
<script src='./javascript/Edit.js'></script>
1717
<script src='./javascript/Menus.js'></script>
@@ -122,14 +122,14 @@
122122
</div>
123123
<div class="dropdown">
124124
<div class="m-1"><img src="./icons/FatCow/text_list_bullets.png"/></div>
125-
<ul class="dropdown-menu lists-dropdown-menu">
125+
<ul class="dropdown-menu list-dropdown-menu">
126126
<li class="dropdown-item">
127127
<div class="dropdown-item dropdown-header">LIST</div>
128128
<span class="menu-item" onclick="Menus.execCommand('insertunorderedlist')">
129129
<img src="./icons/FatCow/text_list_bullets.png" alt="Icon" data-toggle="tooltip" data-placement="top" title="Toggle List On/Off"/>
130130
</span>
131131
</li>
132-
<li class="dropdown-item list-only-dropdown-item">
132+
<li class="dropdown-item list-only-dropdown-item d-none">
133133
<div class=" dropdown-header">FORMAT LIST</div>
134134
<span class="menu-item" onclick="Menus.showListStyleChooser('ul', 'li')">
135135
<img src="./icons/kei/kei_list_type.png" alt="Icon" data-toggle="tooltip" data-placement="top" title="Type"/>
@@ -159,7 +159,7 @@
159159
<img src="./icons/FatCow/table_add.png" alt="Icon" data-toggle="tooltip" data-placement="top" title="Insert Table"/>
160160
</span>
161161
</li>
162-
<li class="dropdown-item table-select-dropdown-item">
162+
<li class="dropdown-item table-select-dropdown-item d-none">
163163
<div class="dropdown-item dropdown-header">SELECT</div>
164164
<span class="menu-item" onclick="Menus.highlightElement('table');">
165165
<img src="./icons/FatCow/kei_table_select.png" alt="Icon" data-toggle="tooltip" data-placement="top" title="Table"/>
@@ -326,10 +326,10 @@
326326
<ul class="dropdown-menu about-dropdown-menu">
327327
<li class="dropdown-item">
328328
<div class="dropdown-item dropdown-header">HELP</div>
329-
<span class="menu-item" onclick="Menus.showMessageLinkModal('About', './KeiHTMLBrowser.html')">
329+
<span class="menu-item" onclick="Menus.showMessageInLinkModal('About', './KeiHTMLEditor.html')">
330330
<img src="./icons/gtk/kei_gtk-about.png" alt="Icon" data-toggle="tooltip" data-placement="top" title="About"/>
331331
</span>
332-
<span class="menu-item" onclick="Menus.showMessageLinkModal('Formatting Tables', './TableFormatting.html')">
332+
<span class="menu-item" onclick="Menus.showMessageInLinkModal('Formatting Tables', './TableFormatting.html')">
333333
<img src="./icons/FatCow/table.png" alt="Icon" data-toggle="tooltip" data-placement="top" title="Formatting Tables"/>
334334
</span>
335335
</li>

‎javascript/Edit.js

+17-13
Original file line numberDiff line numberDiff line change
@@ -80,18 +80,18 @@ class Edit {
8080
static selectRangeInNode(node, startOffset, endOffset) {
8181
Edit.selectRange(Edit.getRangeInNode(node, startOffset, endOffset));
8282
}
83-
// static setCaretAfterNode(node) { //These probably work but I haven't tested them yet
84-
// var range = document.createRange();
85-
// range.setStartAfter(node);
86-
// range.setEndAfter(node);
87-
// Edit.selectRange(range);
88-
// }
89-
// static setCaretBeforeNode(node) {
90-
// var range = document.createRange();
91-
// range.setStartBefore(node);
92-
// range.setEndBefore(node);
93-
// Edit.selectRange(range);
94-
// }
83+
static setCaretAfterNode(node) {
84+
var range = document.createRange();
85+
range.setStartAfter(node);
86+
range.setEndAfter(node);
87+
Edit.selectRange(range);
88+
}
89+
static setCaretBeforeNode(node) {
90+
var range = document.createRange();
91+
range.setStartBefore(node);
92+
range.setEndBefore(node);
93+
Edit.selectRange(range);
94+
}
9595

9696
// All editing commands are routed through the execCommand function.
9797
static execCommand(action, value) {
@@ -209,7 +209,11 @@ class Edit {
209209
}
210210
if (replacement.tagName.toLowerCase() == 'table') Edit.sanitizeTable(replacement); // Edit.sanitizeTable(table) call
211211

212-
if (['ol','ul'].includes(element.tagName.toLowerCase())) Edit.selectDeleteAndReplaceNode(element, replacement);
212+
if (['ol','ul'].includes(element.tagName.toLowerCase())) {
213+
Edit.setCaretAfterNode(element);
214+
Edit.insertHTML('<br>'); // Kludge to ensure that the list does not absorb the block element that follows
215+
Edit.selectDeleteAndReplaceNode(element, replacement);
216+
}
213217
else Edit.selectAndReplaceNode(element, replacement);
214218
}
215219
}

‎javascript/FindReplace.js

+19-14
Original file line numberDiff line numberDiff line change
@@ -101,17 +101,20 @@ class FindReplace {
101101
if (findReplace.find()) {
102102
document.getElementById('mutableModalBody').innerHTML =
103103
`<div>
104-
<div class="row">
105-
<span class="col-sm-5">Find</span>
106-
<span class="col-sm-7">` + findReplace.target + `</span>
104+
<div class="row m-1">
105+
<span class="col-12 text-primary text-center">Find</span>
107106
</div>
108-
<div class="row">
109-
<span class="col-sm-5";>Replace With</span>
110-
<span class="col-sm-7">` + findReplace.replacement + `</span>
107+
<div class="row m-1">
108+
<span class="col-12">` + findReplace.target + `</span>
111109
</div>
112-
<div class="row">
113-
<span class="col-sm-5">Match Case</span>
114-
<span class="col-sm-7">` + ((findReplace.matchCase) ? 'Yes' : 'No') + `</span>
110+
<div class="row m-1">
111+
<span class="col-12 text-primary text-center">Replace With</span>
112+
</div>
113+
<div class="row m-1">
114+
<span class="col-12">` + findReplace.replacement + `</span>
115+
</div>
116+
<div class="row m-1">
117+
<span class="col-12 text-primary text-center">` + ((findReplace.matchCase) ? 'Match Case' : 'Case Insensitive') + `</span>
115118
</div>
116119
</div>`;
117120
document.getElementById('mutableModalFooter').innerHTML = "";
@@ -140,12 +143,14 @@ class FindReplace {
140143
static finishFindReplace() {
141144
document.getElementById('mutableModalBody').innerHTML =
142145
`<div>
143-
<div class="row">
144-
<label class="col-sm-5">Find</label>
145-
<label class="col-sm-7">` + findReplace.target + `</label>
146+
<div class="row m-1">
147+
<label class="col-12 text-primary text-center">Find</label>
148+
</div>
149+
<div class="row m-1">
150+
<label class="col-12">` + findReplace.target + `</label>
146151
</div>
147-
<div class="row">
148-
<h6 class="col-sm-12" style="text-align:center">No More Matches</h6>
152+
<div class="row m-1">
153+
<h6 class="col-12 text-primary text-center">No More Matches</h6>
149154
</div>
150155
</div>`;
151156
document.getElementById('mutableModalFooter').innerHTML = "";

‎javascript/Menus.js

+31-36
Original file line numberDiff line numberDiff line change
@@ -41,61 +41,56 @@ class Menus {
4141
if (highlightedElementTag) {
4242
$(".edit-dropdown-menu").addClass("invisible");
4343
$(".text-dropdown-menu").addClass("invisible");
44-
$(".lists-dropdown-menu").addClass("invisible");
44+
$(".list-dropdown-menu").addClass("invisible");
4545
$(".selection-dropdown-menu").removeClass("invisible");
4646
} else {
4747
$(".edit-dropdown-menu").removeClass("invisible");
4848
$(".text-dropdown-menu").removeClass("invisible");
49-
$(".lists-dropdown-menu").removeClass("invisible");
49+
$(".list-dropdown-menu").removeClass("invisible");
5050
$(".selection-dropdown-menu").addClass("invisible");
5151
}
52-
53-
if (Edit.isCaretInsideTags(["ol", "ul"])) {
54-
$(".list-only-dropdown-item").removeClass("d-none");
55-
$(".list-only-menu-item").removeClass("d-none");
56-
} else {
57-
$(".list-only-dropdown-item").addClass("d-none");
58-
$(".list-only-menu-item").addClass("d-none");
59-
}
60-
6152
if ((Edit.isCaretInsideTags(["ol", "ul"])) || (highlightedElementTag)) {
6253
$(".paragraph-dropdown-menu").addClass("invisible");
63-
$(".table-insert-dropdown-item").addClass("d-none");
6454
} else {
65-
$(".table-insert-dropdown-item").removeClass("d-none");
6655
$(".paragraph-dropdown-menu").removeClass("invisible");
6756
}
57+
if ((Edit.isCaretInsideTags(["ol", "ul"])) && ((Edit.isCaretInsideTag("table") == false))) {
58+
$(".table-dropdown-menu").addClass("invisible");
59+
} else {
60+
$(".table-dropdown-menu").removeClass("invisible");
61+
}
6862

69-
if (Edit.isCaretInsideTags(["table","ol", "ul"])) {
63+
if ((Edit.isCaretInsideTags(["table", "ol", "ul"])) || (highlightedElementTag)) {
7064
$(".table-insert-dropdown-item").addClass("d-none");
7165
} else {
7266
$(".table-insert-dropdown-item").removeClass("d-none");
7367
}
74-
7568
if (Edit.isCaretInsideTag("table")) {
7669
$(".table-select-dropdown-item").removeClass("d-none");
7770
} else {
7871
$(".table-select-dropdown-item").addClass("d-none");
7972
}
8073

74+
if (Edit.isCaretInsideTags(["ol", "ul"])) {
75+
$(".list-only-dropdown-item").removeClass("d-none");
76+
} else {
77+
$(".list-only-dropdown-item").addClass("d-none");
78+
}
8179
if (highlightedElementTag == 'table') {
8280
$(".table-only-dropdown-item").removeClass("d-none");
8381
} else {
8482
$(".table-only-dropdown-item").addClass("d-none");
8583
}
86-
8784
if (highlightedElementTag == 'col') {
8885
$(".column-only-dropdown-item").removeClass("d-none");
8986
} else {
9087
$(".column-only-dropdown-item").addClass("d-none");
9188
}
92-
9389
if (highlightedElementTag == 'tr') {
9490
$(".row-only-dropdown-item").removeClass("d-none");
9591
} else {
9692
$(".row-only-dropdown-item").addClass("d-none");
9793
}
98-
9994
if (highlightedElementTag == 'td') {
10095
$(".cell-only-dropdown-item").removeClass("d-none");
10196
} else {
@@ -195,7 +190,6 @@ class Menus {
195190
$('#mutableModal').modal("show");
196191
Edit.selectRange(selection);
197192
}
198-
199193
static modalButtonNoDismiss(text, onclick) {
200194
let button = document.createElement("button");
201195
button.className = "btn btn-primary btn-sm";
@@ -208,16 +202,15 @@ class Menus {
208202
button.setAttribute("data-dismiss", "modal");
209203
return button;
210204
}
211-
212205
static modalNumericSelect(labelText, id, min, max, step, selected, units) {
213206
let div = document.createElement("div");
214207
div.className = "row";
215208
let label = document.createElement("label");
216-
label.className = "col-sm-8";
209+
label.className = "col-8";
217210
label.innerHTML = labelText;
218211
div.appendChild(label);
219212
let select = document.createElement("select");
220-
select.className = "col-sm-4 custom-select";
213+
select.className = "col-4 custom-select";
221214
select.id = id;
222215
div.appendChild(select);
223216
for (let value=min; value<=max; value=value+step) {
@@ -260,7 +253,7 @@ class Menus {
260253
let chosenStyleRow = styleTable.insertRow(-1);
261254
let chosenStyleCell = chosenStyleRow.insertCell(-1);
262255
chosenStyleCell.setAttribute("Id", "chosenStyleCell");
263-
chosenStyleCell.className = "chosen-style";
256+
chosenStyleCell.className = "style-chosen";
264257
document.getElementById('mutableModalBody').innerHTML = styleTable.outerHTML;
265258

266259
document.getElementById('mutableModalFooter').innerHTML = "";
@@ -390,7 +383,7 @@ class Menus {
390383
let chosenStyleRow = colorTable.insertRow(-1);
391384
let chosenColorCell = chosenStyleRow.insertCell(-1);
392385
chosenColorCell.setAttribute("Id", "chosenColorCell");
393-
chosenColorCell.className = "chosen-color";
386+
chosenColorCell.className = "color-chosen";
394387
document.getElementById('mutableModalBody').innerHTML = colorTable.outerHTML;
395388

396389
document.getElementById('mutableModalFooter').innerHTML = "";
@@ -448,27 +441,29 @@ class Menus {
448441
document.getElementById('mutableModalTitle').innerHTML = "Find & Replace";
449442
document.getElementById('mutableModalBody').innerHTML =
450443
`<div>
451-
<div class="row mb-1 mr-1">
452-
<label class="col-sm-4">Find</label>
453-
<input type="text" id="target" class="col-sm-8 pl-1"></input>
444+
<div class="row m-1">
445+
<span class="col-12 text-primary text-center">Find</span>
454446
</div>
455-
<div class="row mb-1 mr-1">
456-
<label class="col-sm-4";>Replace</label>
457-
<input type="text" id="replacement" class="col-sm-8 pl-1"></input>
447+
<div class="row m-1">
448+
<input type="text" id="target" class="col-12"></input>
458449
</div>
459-
<div class="row mr-1">
460-
<label class="col-sm-4"></label>
461-
<input type="checkbox" id="matchCase" class="col-sm-1"></input>
462-
<label class="col-sm-7">Match Case</label>
450+
<div class="row m-1">
451+
<span class="col-12 text-primary text-center">Replace</span>
452+
</div>
453+
<div class="row m-1">
454+
<input type="text" id="replacement" class="col-12"></input>
455+
</div>
456+
<div class="row mt-2 mr-1 mb-1 ml-1">
457+
<input type="checkbox" id="matchCase" class="col-1"></input>
458+
<span class="col-7 text-primary text-center">Match Case</span>
463459
</div>
464460
</div>`;
465-
466461
document.getElementById('mutableModalFooter').innerHTML = "";
467462
document.getElementById('mutableModalFooter').appendChild(Menus.modalButtonNoDismiss("Find", "FindReplace.initializeFindReplace()"));
468463
Menus.mutableModalShow();
469464
}
470465

471-
static showMessageLinkModal(title, link) {
466+
static showMessageInLinkModal(title, link) {
472467
document.getElementById('mutableModalTitle').innerHTML = title;
473468
document.getElementById('mutableModalBody').innerHTML = "<embed type='text/html' src='" + link + "'>";
474469
document.getElementById('mutableModalFooter').innerHTML = "";

0 commit comments

Comments
 (0)