Skip to content

Commit ac67d60

Browse files
WebCoder49WebCoder49
authored
Merge pull request #147 from WebCoder49/classes-for-templates
Use classes for templates
2 parents b834cbb + fe408d3 commit ac67d60

File tree

4 files changed

+93
-39
lines changed

4 files changed

+93
-39
lines changed

‎README.md‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -64,12 +64,12 @@ The next step is to set up a `template` to link `code-input` to your syntax-high
6464

6565
- *Highlight.js:*
6666
```js
67-
codeInput.registerTemplate("syntax-highlighted", codeInput.templates.hljs(hljs, [] /* Array of plugins (see below) */));
67+
codeInput.registerTemplate("syntax-highlighted", new codeInput.templates.Hljs(hljs, [] /* Array of plugins (see below) */));
6868
```
6969

7070
- *Prism.js:*
7171
```js
72-
codeInput.registerTemplate("syntax-highlighted", codeInput.templates.prism(Prism, [] /* Array of plugins (see below) */));
72+
codeInput.registerTemplate("syntax-highlighted", new codeInput.templates.Prism(Prism, [] /* Array of plugins (see below) */));
7373
```
7474

7575
- *Custom:*
@@ -106,7 +106,7 @@ The next step is to set up a `template` to link `code-input` to your syntax-high
106106
<!--...-->
107107
<script>
108108
codeInput.registerTemplate("syntax-highlighted",
109-
codeInput.templates.hljs(
109+
new codeInput.templates.Hljs(
110110
hljs,
111111
[
112112
new codeInput.plugins.Autodetect(),

‎code-input.d.ts‎

Lines changed: 26 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -345,17 +345,35 @@ export class Template {
345345
*/
346346
export namespace templates {
347347
/**
348-
* Constructor to create a template that uses Prism.js syntax highlighting (https://prismjs.com/)
349-
* @param {Object} prism Import Prism.js, then after that import pass the `Prism` object as this parameter.
350-
* @param {codeInput.Plugin[]} plugins - An array of plugin objects to add extra features - see `codeInput.plugins`
351-
* @returns template object
348+
* A template that uses Prism.js syntax highlighting (https://prismjs.com/).
349+
*/
350+
class Prism extends Template {
351+
/**
352+
* Constructor to create a template that uses Prism.js syntax highlighting (https://prismjs.com/)
353+
* @param {Object} prism Import Prism.js, then after that import pass the `Prism` object as this parameter.
354+
* @param {codeInput.Plugin[]} plugins - An array of plugin objects to add extra features - see `codeInput.plugins`
355+
* @returns template object
356+
*/
357+
constructor(prism: Object, plugins?: Plugin[])
358+
}
359+
/**
360+
* @deprecated Please use `new codeInput.templates.Prism(...)`
352361
*/
353362
function prism(prism: Object, plugins?: Plugin[]): Template
354363
/**
355-
* Constructor to create a template that uses highlight.js syntax highlighting (https://highlightjs.org/)
356-
* @param {Object} hljs Import highlight.js, then after that import pass the `hljs` object as this parameter.
357-
* @param {codeInput.Plugin[]} plugins - An array of plugin objects to add extra features - see `codeInput.plugins`
358-
* @returns template object
364+
* A template that uses highlight.js syntax highlighting (https://highlightjs.org/).
365+
*/
366+
class Hljs extends Template {
367+
/**
368+
* Constructor to create a template that uses highlight.js syntax highlighting (https://highlightjs.org/)
369+
* @param {Object} hljs Import highlight.js, then after that import pass the `hljs` object as this parameter.
370+
* @param {codeInput.Plugin[]} plugins - An array of plugin objects to add extra features - see `codeInput.plugins`
371+
* @returns template object
372+
*/
373+
constructor(hljs: Object, plugins?: Plugin[])
374+
}
375+
/**
376+
* @deprecated Please use `new codeInput.templates.Hljs(...)`
359377
*/
360378
function hljs(hljs: Object, plugins?: Plugin[]): Template
361379
/**

‎code-input.js‎

Lines changed: 62 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -222,38 +222,19 @@ var codeInput = {
222222
* For adding small pieces of functionality, please see `codeInput.plugins`.
223223
*/
224224
templates: {
225+
// (Source code for class templates after var codeInput = ... so they can extend the codeInput.Template class)
225226
/**
226-
* Constructor to create a template that uses Prism.js syntax highlighting (https://prismjs.com/)
227-
* @param {Object} prism Import Prism.js, then after that import pass the `Prism` object as this parameter.
228-
* @param {codeInput.Plugin[]} plugins - An array of plugin objects to add extra features - see `codeInput.plugins`
229-
* @returns {codeInput.Template} template object
227+
* @deprecated Please use `new codeInput.templates.Prism(...)`
230228
*/
231229
prism(prism, plugins = []) { // Dependency: Prism.js (https://prismjs.com/)
232-
return new codeInput.Template(
233-
prism.highlightElement, // highlight
234-
true, // preElementStyled
235-
true, // isCode
236-
false, // includeCodeInputInHighlightFunc
237-
plugins
238-
);
230+
return new codeInput.templates.Prism(prism, plugins);
239231
},
232+
240233
/**
241-
* Constructor to create a template that uses highlight.js syntax highlighting (https://highlightjs.org/)
242-
* @param {Object} hljs Import highlight.js, then after that import pass the `hljs` object as this parameter.
243-
* @param {codeInput.Plugin[]} plugins - An array of plugin objects to add extra features - see `codeInput.plugins`
244-
* @returns {codeInput.Template} template object
234+
* @deprecated Please use `new codeInput.templates.Hljs(...)`
245235
*/
246236
hljs(hljs, plugins = []) { // Dependency: Highlight.js (https://highlightjs.org/)
247-
return new codeInput.Template(
248-
function(codeElement) {
249-
codeElement.removeAttribute("data-highlighted");
250-
hljs.highlightElement(codeElement);
251-
}, // highlight
252-
false, // preElementStyled
253-
true, // isCode
254-
false, // includeCodeInputInHighlightFunc
255-
plugins
256-
);
237+
return new codeInput.templates.Hljs(hljs, plugins);
257238
},
258239

259240
/**
@@ -318,7 +299,7 @@ var codeInput = {
318299
},
319300

320301
/**
321-
* @deprecated Please use `new codeInput.Template()`
302+
* @deprecated Please use `new codeInput.Template(...)`
322303
*/
323304
custom(highlight = function () { }, preElementStyled = true, isCode = true, includeCodeInputInHighlightFunc = false, plugins = []) {
324305
return {
@@ -1058,4 +1039,59 @@ var codeInput = {
10581039
}
10591040
}
10601041

1042+
{
1043+
// Templates are defined here after the codeInput variable is set, because they reference it by extending codeInput.Template.
1044+
1045+
// ESM-SUPPORT-START-TEMPLATE-prism Do not (re)move this - it's needed for ESM generation!
1046+
/**
1047+
* A template that uses Prism.js syntax highlighting (https://prismjs.com/).
1048+
*/
1049+
class Prism extends codeInput.Template { // Dependency: Prism.js (https://prismjs.com/)
1050+
/**
1051+
* Constructor to create a template that uses Prism.js syntax highlighting (https://prismjs.com/)
1052+
* @param {Object} prism Import Prism.js, then after that import pass the `Prism` object as this parameter.
1053+
* @param {codeInput.Plugin[]} plugins - An array of plugin objects to add extra features - see `codeInput.plugins`
1054+
* @returns {codeInput.Template} template object
1055+
*/
1056+
constructor(prism, plugins = []) {
1057+
super(
1058+
prism.highlightElement, // highlight
1059+
true, // preElementStyled
1060+
true, // isCode
1061+
false, // includeCodeInputInHighlightFunc
1062+
plugins
1063+
);
1064+
}
1065+
};
1066+
// ESM-SUPPORT-END-TEMPLATE-prism Do not (re)move this - it's needed for ESM generation!
1067+
codeInput.templates.Prism = Prism;
1068+
1069+
// ESM-SUPPORT-START-TEMPLATE-hljs Do not (re)move this - it's needed for ESM generation!
1070+
/**
1071+
* A template that uses highlight.js syntax highlighting (https://highlightjs.org/).
1072+
*/
1073+
class Hljs extends codeInput.Template { // Dependency: Highlight.js (https://highlightjs.org/)
1074+
/**
1075+
* Constructor to create a template that uses highlight.js syntax highlighting (https://highlightjs.org/)
1076+
* @param {Object} hljs Import highlight.js, then after that import pass the `hljs` object as this parameter.
1077+
* @param {codeInput.Plugin[]} plugins - An array of plugin objects to add extra features - see `codeInput.plugins`
1078+
* @returns {codeInput.Template} template object
1079+
*/
1080+
constructor(hljs, plugins = []) {
1081+
super(
1082+
function(codeElement) {
1083+
codeElement.removeAttribute("data-highlighted");
1084+
hljs.highlightElement(codeElement);
1085+
}, // highlight
1086+
false, // preElementStyled
1087+
true, // isCode
1088+
false, // includeCodeInputInHighlightFunc
1089+
plugins
1090+
);
1091+
}
1092+
};
1093+
// ESM-SUPPORT-END-TEMPLATE-hljs Do not (re)move this - it's needed for ESM generation!
1094+
codeInput.templates.Hljs = Hljs;
1095+
}
1096+
10611097
customElements.define("code-input", codeInput.CodeInput);

‎tests/tester.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -108,7 +108,7 @@ function waitAsync(milliseconds) {
108108
function beginTest(isHLJS) {
109109
let codeInputElem = document.querySelector("code-input");
110110
if(isHLJS) {
111-
codeInput.registerTemplate("code-editor", codeInput.templates.hljs(hljs, [
111+
codeInput.registerTemplate("code-editor", new codeInput.templates.Hljs(hljs, [
112112
new codeInput.plugins.AutoCloseBrackets(),
113113
new codeInput.plugins.Autocomplete(function(popupElem, textarea, selectionEnd) {
114114
if(textarea.value.substring(selectionEnd-5, selectionEnd) == "popup") {
@@ -127,7 +127,7 @@ function beginTest(isHLJS) {
127127
new codeInput.plugins.SpecialChars(true),
128128
]));
129129
} else {
130-
codeInput.registerTemplate("code-editor", codeInput.templates.prism(Prism, [
130+
codeInput.registerTemplate("code-editor", new codeInput.templates.Prism(Prism, [
131131
new codeInput.plugins.AutoCloseBrackets(),
132132
new codeInput.plugins.Autocomplete(function(popupElem, textarea, selectionEnd) {
133133
if(textarea.value.substring(selectionEnd-5, selectionEnd) == "popup") {

0 commit comments

Comments
 (0)