Skip to content

Commit 1df873a

Browse files
WebCoder49WebCoder49
committed
Add tests, make work for Prism; Clean up code
1 parent c91d9da commit 1df873a

17 files changed

+597
-290
lines changed

‎code-input.css‎

Lines changed: 12 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -4,30 +4,29 @@
44

55

66
code-input {
7-
/* Allow other elems to be inside */
8-
position: relative;
9-
top: 0;
10-
left: 0;
7+
/* Allow other elements to be inside */
118
display: block;
129
overflow-y: auto;
1310
overflow-x: auto;
1411

12+
position: relative;
13+
top: 0;
14+
left: 0;
15+
1516
/* Normal inline styles */
1617
margin: 8px;
1718
--padding: 16px;
1819
height: 250px;
19-
2020
font-size: normal;
2121
font-family: monospace;
2222
line-height: 1.5; /* Inherited to child elements */
2323
tab-size: 2;
2424
caret-color: darkgrey;
2525
white-space: pre;
2626
padding: 0!important; /* Use --padding */
27-
2827
display: grid;
29-
grid-template-columns: auto;
30-
grid-template-rows: auto;
28+
grid-template-columns: 100%;
29+
grid-template-rows: 100%;
3130
}
3231

3332

@@ -52,7 +51,7 @@ code-input textarea, code-input:not(.code-input_pre-element-styled) pre code, co
5251
}
5352
code-input:not(.code-input_pre-element-styled) pre code, code-input.code-input_pre-element-styled pre {
5453
height: max-content;
55-
width: max-content;
54+
width: max-content;
5655
}
5756

5857
code-input:not(.code-input_pre-element-styled) pre, code-input.code-input_pre-element-styled pre code {
@@ -71,15 +70,12 @@ code-input textarea, code-input pre, code-input pre * {
7170
tab-size: inherit!important;
7271
}
7372

74-
7573
code-input textarea, code-input pre {
7674
/* In the same place */
77-
position: absolute;
78-
top: 0;
79-
left: 0;
75+
grid-column: 1;
76+
grid-row: 1;
8077
}
8178

82-
8379
/* Move the textarea in front of the result */
8480

8581
code-input textarea {
@@ -92,7 +88,7 @@ code-input pre {
9288
code-input:not(.code-input_loaded) pre, code-input:not(.code-input_loaded) textarea {
9389
opacity: 0;
9490
}
95-
code-input:not(.code-input_loaded)::after {
91+
code-input:not(.code-input_loaded)::before {
9692
color: #ccc;
9793
}
9894

@@ -121,17 +117,9 @@ code-input textarea {
121117
outline: none!important;
122118
}
123119

124-
code-input:not(.code-input_registered)::after {
120+
code-input:not(.code-input_registered)::before {
125121
/* Display message to register */
126122
content: "Use codeInput.registerTemplate to set up.";
127123
display: block;
128124
color: grey;
129-
}
130-
131-
/* To prevent Ctrl+F in result element */
132-
code-input pre .code-input_searching-disabled::before {
133-
content: attr(data-content);
134-
}
135-
code-input pre .code-input_searching-disabled {
136-
font-size: 0;
137125
}

‎code-input.js‎

Lines changed: 23 additions & 98 deletions
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,6 @@ var codeInput = {
2929
* code-input element.
3030
*/
3131
textareaSyncAttributes: [
32-
"aria-*",
3332
"value",
3433
// Form validation - https://developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation#using_built-in_form_validation
3534
"min", "max",
@@ -124,7 +123,7 @@ var codeInput = {
124123
elem = codeInput.templateNotYetRegisteredQueue[templateName][i];
125124
elem.template = template;
126125
codeInput.runOnceWindowLoaded((function(elem) { elem.connectedCallback(); }).bind(null, elem), elem);
127-
// Bind sets elem in parameter
126+
// Bind sets elem as first parameter of function
128127
// So innerHTML can be read
129128
}
130129
console.log(`code-input: template: Added existing elements with template ${templateName}`);
@@ -138,7 +137,7 @@ var codeInput = {
138137
elem = codeInput.templateNotYetRegisteredQueue[undefined][i];
139138
elem.template = template;
140139
codeInput.runOnceWindowLoaded((function(elem) { elem.connectedCallback(); }).bind(null, elem), elem);
141-
// Bind sets elem in parameter
140+
// Bind sets elem as first parameter of function
142141
// So innerHTML can be read
143142
}
144143
}
@@ -257,9 +256,7 @@ var codeInput = {
257256
},
258257

259258
/**
260-
* Constructor to create a proof-of-concept template that gives a message if too many characters are typed.
261-
* @param {codeInput.Plugin[]} plugins - An array of plugin objects to add extra features - see `codeInput.plugins`
262-
* @returns template object
259+
* @deprecated Make your own version of this template if you need it - we think it isn't widely used so will remove it from the next version of code-input.
263260
*/
264261
characterLimit(plugins) {
265262
return {
@@ -283,11 +280,7 @@ var codeInput = {
283280
},
284281

285282
/**
286-
* Constructor to create a proof-of-concept template that shows text in a repeating series of colors.
287-
* @param {string[]} rainbowColors - An array of CSS colors, in the order each color will be shown
288-
* @param {string} delimiter - The character used to split up parts of text where each part is a different colour (e.g. "" = characters, " " = words)
289-
* @param {codeInput.Plugin[]} plugins - An array of plugin objects to add extra features - see `codeInput.plugins`
290-
* @returns template object
283+
* @deprecated Make your own version of this template if you need it - we think it isn't widely used so will remove it from the next version of code-input.
291284
*/
292285
rainbowText(rainbowColors = ["red", "orangered", "orange", "goldenrod", "gold", "green", "darkgreen", "navy", "blue", "magenta"], delimiter = "", plugins = []) {
293286
return {
@@ -311,13 +304,13 @@ var codeInput = {
311304
},
312305

313306
/**
314-
* @deprecated Please use `codeInput.characterLimit(plugins)`
307+
* @deprecated Make your own version of this template if you need it - we think it isn't widely used so will remove it from the next version of code-input.
315308
*/
316309
character_limit() {
317310
return this.characterLimit([]);
318311
},
319312
/**
320-
* @deprecated Please use `codeInput.rainbowText`
313+
* @deprecated Make your own version of this template if you need it - we think it isn't widely used so will remove it from the next version of code-input.
321314
*/
322315
rainbow_text(rainbowColors = ["red", "orangered", "orange", "goldenrod", "gold", "green", "darkgreen", "navy", "blue", "magenta"], delimiter = "", plugins = []) {
323316
return this.rainbowText(rainbowColors, delimiter, plugins);
@@ -379,14 +372,7 @@ var codeInput = {
379372
console.log("code-input: plugin: Created plugin");
380373

381374
observedAttributes.forEach((attribute) => {
382-
// Move plugin attribute to codeInput observed attributes
383-
let regexFromWildcard = codeInput.wildcard2regex(attribute);
384-
if(regexFromWildcard == null) {
385-
// Not a wildcard
386-
codeInput.observedAttributes.push(attribute);
387-
} else {
388-
codeInput.observedAttributes.regexp.push(regexFromWildcard);
389-
}
375+
codeInput.observedAttributes.push(attribute);
390376
});
391377
}
392378

@@ -495,7 +481,7 @@ var codeInput = {
495481
needsHighlight = false; // Just inputted
496482

497483
/**
498-
* Highlight the code ASAP
484+
* Highlight the code as soon as possible
499485
*/
500486
scheduleHighlight() {
501487
this.needsHighlight = true;
@@ -505,16 +491,18 @@ var codeInput = {
505491
* Call an animation frame
506492
*/
507493
animateFrame() {
508-
// Sync size
494+
// Synchronise the size of the pre/code and textarea elements
509495
if(this.template.preElementStyled) {
496+
this.style.backgroundColor = getComputedStyle(this.preElement).backgroundColor;
510497
this.textareaElement.style.height = getComputedStyle(this.preElement).height;
511498
this.textareaElement.style.width = getComputedStyle(this.preElement).width;
512499
} else {
500+
this.style.backgroundColor = getComputedStyle(this.codeElement).backgroundColor;
513501
this.textareaElement.style.height = getComputedStyle(this.codeElement).height;
514502
this.textareaElement.style.width = getComputedStyle(this.codeElement).width;
515503
}
516504

517-
// Sync content
505+
// Synchronise the contents of the pre/code and textarea elements
518506
if(this.needsHighlight) {
519507
this.update();
520508
this.needsHighlight = false;
@@ -600,7 +588,7 @@ var codeInput = {
600588
this.pluginEvt("beforeElementsAdded");
601589

602590
// First-time attribute sync
603-
let lang = this.getAttribute("lang");
591+
let lang = this.getAttribute("language") || this.getAttribute("lang");
604592
let placeholder = this.getAttribute("placeholder") || this.getAttribute("lang") || "";
605593
let value = this.unescapeHtml(this.innerHTML) || this.getAttribute("value") || "";
606594
// Value attribute deprecated, but included for compatibility
@@ -619,19 +607,12 @@ var codeInput = {
619607
this.innerHTML = ""; // Clear Content
620608

621609
// Synchronise attributes to textarea
622-
codeInput.textareaSyncAttributes.forEach((attribute) => {
623-
if (this.hasAttribute(attribute)) {
610+
for(let i = 0; i < this.attributes.length; i++) {
611+
let attribute = this.attributes[i].name;
612+
if (codeInput.textareaSyncAttributes.includes(attribute) || attribute.substring(0, 5) == "aria-") {
624613
textarea.setAttribute(attribute, this.getAttribute(attribute));
625614
}
626-
});
627-
codeInput.textareaSyncAttributes.regexp.forEach((reg) =>
628-
{
629-
for(const attr of this.attributes) {
630-
if (attr.nodeName.match(reg)) {
631-
textarea.setAttribute(attr.nodeName, attr.nodeValue);
632-
}
633-
}
634-
});
615+
}
635616

636617
textarea.addEventListener('input', (evt) => { this.value = this.textareaElement.value; });
637618

@@ -672,7 +653,7 @@ var codeInput = {
672653
}
673654

674655
/**
675-
* @deprecated Please use `codeInput.CodeInput.escapeHtml`
656+
* @deprecated Please use `codeInput.CodeInput.getTemplate`
676657
*/
677658
get_template() {
678659
return this.getTemplate();
@@ -716,13 +697,8 @@ var codeInput = {
716697
return this.attributeChangedCallback(mutation.attributeName, mutation.oldValue, super.getAttribute(mutation.attributeName));
717698
}
718699
}
719-
720-
/* Check wildcard attributes */
721-
for(let i = 0; i < codeInput.observedAttributes.regexp.length; i++) {
722-
const reg = codeInput.observedAttributes.regexp[i];
723-
if (mutation.attributeName.match(reg)) {
724-
return this.attributeChangedCallback(mutation.attributeName, mutation.oldValue, super.getAttribute(mutation.attributeName));
725-
}
700+
if (mutation.attributeName.substring(0, 5) == "aria-") {
701+
return this.attributeChangedCallback(mutation.attributeName, mutation.oldValue, super.getAttribute(mutation.attributeName));
726702
}
727703
}
728704
}
@@ -746,9 +722,6 @@ var codeInput = {
746722
case "value":
747723
this.value = newValue;
748724
break;
749-
case "placeholder":
750-
this.textareaElement.placeholder = newValue;
751-
break;
752725
case "template":
753726
this.template = codeInput.usedTemplates[newValue || codeInput.defaultTemplate];
754727
if (this.template.preElementStyled) this.classList.add("code-input_pre-element-styled");
@@ -759,6 +732,7 @@ var codeInput = {
759732
break;
760733

761734
case "lang":
735+
case "language":
762736

763737
let code = this.codeElement;
764738
let mainTextarea = this.textareaElement;
@@ -790,7 +764,7 @@ var codeInput = {
790764

791765
break;
792766
default:
793-
if (codeInput.textareaSyncAttributes.includes(name)) {
767+
if (codeInput.textareaSyncAttributes.includes(name) || name.substring(0, 5) == "aria-") {
794768
if(newValue == null || newValue == undefined) {
795769
this.textareaElement.removeAttribute(name);
796770
} else {
@@ -968,30 +942,6 @@ var codeInput = {
968942
};
969943
},
970944

971-
arrayWildcards2regex(list) {
972-
for(let i = 0; i < list.length; i++) {
973-
const name = list[i];
974-
if (name.indexOf("*") < 0)
975-
continue;
976-
977-
list.regexp.push(new RegExp("^" +
978-
name.replace(/[/\-\\^$+?.()|[\]{}]/g, '\\$&')
979-
.replace("*", ".*")
980-
+ "$", "i"));
981-
list.splice(i--, 1);
982-
};
983-
},
984-
985-
wildcard2regex(wildcard) {
986-
if (wildcard.indexOf("*") < 0)
987-
return null;
988-
989-
return new RegExp("^" +
990-
wildcard.replace(/[/\-\\^$+?.()|[\]{}]/g, '\\$&')
991-
.replace("*", ".*")
992-
+ "$", "i");
993-
},
994-
995945
/**
996946
* To ensure the DOM is ready, run this callback after the window
997947
* has loaded (or now if it has already loaded)
@@ -1009,29 +959,4 @@ window.addEventListener("load", function() {
1009959
codeInput.windowLoaded = true;
1010960
});
1011961

1012-
1013-
/**
1014-
* convert wildcards into regex
1015-
*/
1016-
1017-
{
1018-
Object.defineProperty(codeInput.textareaSyncAttributes, 'regexp', {
1019-
value: [],
1020-
writable: false,
1021-
enumerable: false,
1022-
configurable: false
1023-
});
1024-
codeInput.observedAttributes = codeInput.observedAttributes.concat(codeInput.textareaSyncAttributes);
1025-
1026-
Object.defineProperty(codeInput.observedAttributes, 'regexp', {
1027-
value: [],
1028-
writable: false,
1029-
enumerable: false,
1030-
configurable: false
1031-
});
1032-
1033-
codeInput.arrayWildcards2regex(codeInput.textareaSyncAttributes);
1034-
codeInput.arrayWildcards2regex(codeInput.observedAttributes);
1035-
}
1036-
1037-
customElements.define("code-input", codeInput.CodeInput);
962+
customElements.define("code-input", codeInput.CodeInput);

‎plugins/README.md‎

Lines changed: 0 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -29,13 +29,6 @@ Files: [autodetect.js](./autodetect.js)
2929

3030
[🚀 *CodePen Demo*](https://codepen.io/WebCoder49/pen/eYLyMae)
3131

32-
### Debounce Update
33-
Debounce the update and highlighting function ([What is Debouncing?](https://medium.com/@jamischarles/what-is-debouncing-2505c0648ff1))
34-
35-
Files: [debounce-update.js](./debounce-update.js)
36-
37-
[🚀 *CodePen Demo*](https://codepen.io/WebCoder49/pen/GRXyxzV)
38-
3932
### Go To Line
4033
Add a feature to go to a specific line when a line number is given (or column as well, in the format line no:column no) that appears when (optionally) Ctrl+G is pressed or when JavaScript triggers it.
4134

0 commit comments

Comments
 (0)