Skip to content

Commit 9eeca46

Browse files
WebCoder49WebCoder49
authored
Merge pull request #137 from WebCoder49/classes-for-templates
Test new scrolling with internationalisation and classes for templates
2 parents 2c6f354 + fe408d3 commit 9eeca46

18 files changed

+472
-93
lines changed

‎README.md‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -54,8 +54,8 @@ From JSDelivr CDN (click)
5454

5555
```html
5656
<!--In the <head>-->
57-
<script src="https://cdn.jsdelivr.net/gh/WebCoder49/code-input@2.3/code-input.min.js"></script>
58-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/WebCoder49/code-input@2.3/code-input.min.css">
57+
<script src="https://cdn.jsdelivr.net/gh/WebCoder49/code-input@2.5/code-input.min.js"></script>
58+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/WebCoder49/code-input@2.5/code-input.min.css">
5959
```
6060
</details>
6161

@@ -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.css‎

Lines changed: 36 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -66,8 +66,23 @@ code-input textarea, code-input pre, code-input pre * {
6666
font-family: inherit!important;
6767
line-height: inherit!important;
6868
tab-size: inherit!important;
69+
text-align: inherit!important;
6970
}
7071

72+
/* Make changing the text direction propogate */
73+
code-input textarea[dir=auto] + pre {
74+
unicode-bidi: plaintext;
75+
}
76+
77+
code-input textarea[dir=ltr] + pre {
78+
direction: ltr;
79+
}
80+
81+
code-input textarea[dir=rtl] + pre {
82+
direction: rtl;
83+
}
84+
85+
7186
code-input textarea, code-input pre {
7287
/* In the same place */
7388
grid-column: 1;
@@ -138,37 +153,52 @@ code-input:not(.code-input_loaded) pre, code-input:not(.code-input_loaded) texta
138153

139154
/* Contains dialog boxes that might appear as the result of a plugin.
140155
Sticks to the top of the code-input element */
156+
141157
code-input .code-input_dialog-container {
142158
z-index: 2;
143159

144160
position: sticky;
145161
grid-row: 1;
146162
grid-column: 1;
147163

148-
top: 0px;
164+
top: 0;
149165
left: 0;
166+
167+
margin: 0;
168+
padding: 0;
150169
width: 100%;
151170
height: 0;
152171

153-
/* Dialog boxes' text is left-aligned */
154-
text-align: left;
172+
/* Dialog boxes' text is based on text-direction */
173+
text-align: inherit;
155174
}
175+
[dir=rtl] code-input .code-input_dialog-container, code-input[dir=rtl] .code-input_dialog-container {
176+
left: unset;
177+
right: 0;
178+
}
179+
156180
/* Instructions specific to keyboard navigation set by plugins that override Tab functionality. */
157181
code-input .code-input_dialog-container .code-input_keyboard-navigation-instructions {
158182
top: 0;
159-
right: 0;
183+
left: 0;
184+
160185
display: block;
161186
position: absolute;
162187
background-color: black;
163188
color: white;
164189
padding: 2px;
165190
padding-left: 10px;
166-
text-wrap: pretty;
191+
margin: 0;
192+
text-wrap: balance;
167193
overflow: hidden;
168194
text-overflow: ellipsis;
169195
width: calc(100% - 12px);
170196
max-height: 3em;
171197
}
198+
code-input:has(pre[dir=rtl]) .code-input_dialog-container .code-input_keyboard-navigation-instructions {
199+
left: unset;
200+
right: 0;
201+
}
172202

173203
code-input:not(:has(textarea:focus)) .code-input_dialog-container .code-input_keyboard-navigation-instructions,
174204
code-input.code-input_mouse-focused .code-input_dialog-container .code-input_keyboard-navigation-instructions,
@@ -182,4 +212,4 @@ code-input:not(:has(.code-input_keyboard-navigation-instructions:empty)):has(tex
182212
code-input:not(:has(.code-input_keyboard-navigation-instructions:empty)):has(textarea:focus):not(.code-input_mouse-focused):not(.code-input_pre-element-styled) pre code,
183213
code-input:not(:has(.code-input_keyboard-navigation-instructions:empty)):has(textarea:focus):not(.code-input_mouse-focused).code-input_pre-element-styled pre {
184214
padding-top: calc(var(--padding) + 3em)!important;
185-
}
215+
}

‎code-input.d.ts‎

Lines changed: 62 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -132,14 +132,36 @@ export namespace plugins {
132132
* Create a find-and-replace command plugin to pass into a template
133133
* @param {boolean} useCtrlF Should Ctrl+F be overriden for find-and-replace find functionality? If not, you can trigger it yourself using (instance of this plugin)`.showPrompt(code-input element, false)`.
134134
* @param {boolean} useCtrlH Should Ctrl+H be overriden for find-and-replace replace functionality? If not, you can trigger it yourself using (instance of this plugin)`.showPrompt(code-input element, true)`.
135+
* @param {Object} instructionTranslations: user interface string keys mapped to translated versions for localisation. Look at the find-and-replace.js source code for the English text.
135136
*/
136-
constructor(useCtrlF?: boolean, useCtrlH?: boolean);
137+
constructor(useCtrlF?: boolean, useCtrlH?: boolean,
138+
instructionTranslations?: {
139+
start?: string;
140+
none?: string;
141+
oneFound?: string;
142+
matchIndex?: (index: Number, count: Number) => string;
143+
error?: (message: string) => string;
144+
infiniteLoopError?: string;
145+
closeDialog?: string;
146+
findPlaceholder?: string;
147+
findCaseSensitive?: string;
148+
findRegExp?: string;
149+
replaceTitle?: string;
150+
replacePlaceholder?: string;
151+
findNext?: string;
152+
findPrevious?: string;
153+
replaceActionShort?: string;
154+
replaceAction?: string;
155+
replaceAllActionShort?: string;
156+
replaceAllAction?: string
157+
}
158+
);
137159
/**
138160
* Show a find-and-replace dialog.
139161
* @param {codeInput.CodeInput} codeInputElement the `<code-input>` element.
140162
* @param {boolean} replacePartExpanded whether the replace part of the find-and-replace dialog should be expanded
141163
*/
142-
showPrompt(codeInput: CodeInput, replacePartExpanded: boolean): void;
164+
showPrompt(codeInputElement: CodeInput, replacePartExpanded: boolean): void;
143165
}
144166

145167
/**
@@ -150,8 +172,13 @@ export namespace plugins {
150172
/**
151173
* Create a go-to-line command plugin to pass into a template
152174
* @param {boolean} useCtrlG Should Ctrl+G be overriden for go-to-line functionality? If not, you can trigger it yourself using (instance of this plugin)`.showPrompt(code-input element)`.
175+
* @param {Object} instructionTranslations: user interface string keys mapped to translated versions for localisation. Look at the go-to-line.js source code for the English text.
153176
*/
154-
constructor(useCtrlG: boolean);
177+
constructor(useCtrlG: boolean,
178+
instructionTranslations?: {
179+
closeDialog?: string;
180+
input?: string;
181+
});
155182
/**
156183
* Show a search-like dialog prompting line number.
157184
* @param {codeInput.CodeInput} codeInput the `<code-input>` element.
@@ -171,8 +198,12 @@ export namespace plugins {
171198
* @param {Number} numSpaces How many spaces is each tab character worth? Defaults to 4.
172199
* @param {Object} bracketPairs Opening brackets mapped to closing brackets, default and example {"(": ")", "[": "]", "{": "}"}. All brackets must only be one character, and this can be left as null to remove bracket-based indentation behaviour.
173200
* @param {boolean} escTabToChangeFocus Whether pressing the Escape key before (Shift+)Tab should make this keypress focus on a different element (Tab's default behaviour). You should always either enable this or use this plugin's disableTabIndentation and enableTabIndentation methods linked to other keyboard shortcuts, for accessibility.
201+
* @param {Object} instructionTranslations: user interface string keys mapped to translated versions for localisation. Look at the go-to-line.js source code for the English text.
174202
*/
175-
constructor(defaultSpaces?: boolean, numSpaces?: Number, bracketPairs?: Object, escTabToChangeFocus?: boolean);
203+
constructor(defaultSpaces?: boolean, numSpaces?: Number, bracketPairs?: Object, escTabToChangeFocus?: boolean, instructionTranslations?: {
204+
tabForIndentation?: string;
205+
tabForNavigation?: string;
206+
});
176207
}
177208

178209
/**
@@ -314,17 +345,35 @@ export class Template {
314345
*/
315346
export namespace templates {
316347
/**
317-
* Constructor to create a template that uses Prism.js syntax highlighting (https://prismjs.com/)
318-
* @param {Object} prism Import Prism.js, then after that import pass the `Prism` object as this parameter.
319-
* @param {codeInput.Plugin[]} plugins - An array of plugin objects to add extra features - see `codeInput.plugins`
320-
* @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(...)`
321361
*/
322362
function prism(prism: Object, plugins?: Plugin[]): Template
323363
/**
324-
* Constructor to create a template that uses highlight.js syntax highlighting (https://highlightjs.org/)
325-
* @param {Object} hljs Import highlight.js, then after that import pass the `hljs` object as this parameter.
326-
* @param {codeInput.Plugin[]} plugins - An array of plugin objects to add extra features - see `codeInput.plugins`
327-
* @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(...)`
328377
*/
329378
function hljs(hljs: Object, plugins?: Plugin[]): Template
330379
/**
@@ -355,4 +404,4 @@ export class CodeInput extends HTMLElement { }
355404
* @param {string} templateName - the name to register the template under
356405
* @param {Object} template - a Template object instance - see `codeInput.templates`
357406
*/
358-
export function registerTemplate(templateName: string, template: Template): void;
407+
export function registerTemplate(templateName: string, template: Template): void;

‎code-input.js‎

Lines changed: 73 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 {
@@ -377,6 +358,17 @@ var codeInput = {
377358
});
378359
}
379360

361+
/**
362+
* Replace the keys in destination with any source
363+
* @param {Object} destination Where to place the translated strings, already filled with the keys pointing to English strings.
364+
* @param {Object} source The same keys, or some of them, mapped to translated strings.
365+
*/
366+
addTranslations(destination, source) {
367+
for(const key in source) {
368+
destination[key] = source[key];
369+
}
370+
}
371+
380372
/**
381373
* Runs before code is highlighted.
382374
* @param {codeInput.CodeInput} codeInput - The codeInput element
@@ -1036,4 +1028,59 @@ var codeInput = {
10361028
}
10371029
}
10381030

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

0 commit comments

Comments
 (0)