Skip to content

Commit 71cc8b4

Browse files
AndiDittrichAndiDittrich
committed
added linenumber controls; added icons to settings panel
1 parent 5d941a1 commit 71cc8b4

File tree

8 files changed

+147
-49
lines changed

8 files changed

+147
-49
lines changed

‎dist/enlighterjs.gutenberg.min.js‎

Lines changed: 68 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,37 @@ var EnlighterJS_Gutenberg = (function (exports) {
1717

1818
// wrapper..
1919

20+
/*eslint no-undef: 0 */
21+
var _editorConfig = EnlighterJS_EditorConfig;
22+
23+
// get list of available themes
24+
function getThemes() {
25+
26+
// add default theme (selected globally)
27+
var themes = {
28+
'': 'Global settings (' + _editorConfig.config.theme + ')'
29+
};
30+
31+
// swap key/values
32+
Object.keys(_editorConfig.themes).forEach(function (label) {
33+
themes[_editorConfig.themes[label]] = label;
34+
});
35+
36+
return themes;
37+
}
38+
39+
// get list of available languages
40+
function getLanguages() {
41+
var languages = {};
42+
43+
// swap key/values
44+
Object.keys(_editorConfig.languages).forEach(function (label) {
45+
languages[_editorConfig.languages[label]] = label;
46+
});
47+
48+
return languages;
49+
}
50+
2051
// ----------------------------------------------------------------------
2152

2253
// create a language selection menu
@@ -25,21 +56,24 @@ var EnlighterJS_Gutenberg = (function (exports) {
2556
value = _ref.value;
2657

2758

59+
// get language list
60+
var languages = getLanguages();
61+
2862
// generate dropdown list
29-
var languageItemList = Object.keys(EnlighterJS_EditorConfig.languages).map(function (label) {
63+
var languageItemList = Object.keys(languages).map(function (key) {
3064

31-
// extract language identifier
32-
var languageIdentifier = EnlighterJS_EditorConfig.languages[label];
65+
// extract language label
66+
var label = languages[key];
3367

3468
return {
3569
title: label,
3670

3771
// current item active ?
38-
isActive: value === languageIdentifier,
72+
isActive: value === key,
3973

4074
// passthrough
4175
onClick: function onClick() {
42-
return onChange(languageIdentifier);
76+
return onChange(key);
4377
}
4478
};
4579
});
@@ -61,15 +95,18 @@ var EnlighterJS_Gutenberg = (function (exports) {
6195
value = _ref.value;
6296

6397

98+
// get language list
99+
var languages = getLanguages();
100+
64101
// generate dropdown list
65-
var languageItemList = Object.keys(EnlighterJS_EditorConfig.languages).map(function (label) {
102+
var languageItemList = Object.keys(languages).map(function (key) {
66103

67-
// extract language identifier
68-
var languageIdentifier = EnlighterJS_EditorConfig.languages[label];
104+
// extract language label
105+
var label = languages[key];
69106

70107
return {
71108
label: label,
72-
value: languageIdentifier
109+
value: key
73110
};
74111
});
75112

@@ -90,15 +127,18 @@ var EnlighterJS_Gutenberg = (function (exports) {
90127
value = _ref.value;
91128

92129

130+
// get themes
131+
var themes = getThemes();
132+
93133
// generate dropdown list
94-
var themeItemList = Object.keys(EnlighterJS_EditorConfig.themes).map(function (label) {
134+
var themeItemList = Object.keys(themes).map(function (key) {
95135

96-
// extract theme identifier
97-
var themeIdentifier = EnlighterJS_EditorConfig.themes[label];
136+
// extract theme label
137+
var label = themes[key];
98138

99139
return {
100140
label: label,
101-
value: themeIdentifier
141+
value: key
102142
};
103143
});
104144

@@ -114,10 +154,14 @@ var EnlighterJS_Gutenberg = (function (exports) {
114154
// ----------------------------------------------------------------------
115155

116156
// get object key by value
117-
function getLanguageLabel(lang) {
118-
return Object.keys(EnlighterJS_EditorConfig.languages).find(function (key) {
119-
return EnlighterJS_EditorConfig.languages[key] === lang;
120-
});
157+
function getLanguageLabel(key) {
158+
var langs = getLanguages();
159+
160+
if (langs[key]) {
161+
return langs[key];
162+
} else {
163+
return 'Unknown language';
164+
}
121165
}
122166

123167
// ----------------------------------------------------------------------
@@ -186,7 +230,7 @@ var EnlighterJS_Gutenberg = (function (exports) {
186230
null,
187231
wp.element.createElement(
188232
Components.PanelBody,
189-
{ title: 'Appearance' },
233+
{ title: 'Appearance', icon: 'admin-appearance' },
190234
wp.element.createElement(
191235
'p',
192236
null,
@@ -220,17 +264,18 @@ var EnlighterJS_Gutenberg = (function (exports) {
220264
return setAttributes({ theme: theme });
221265
}
222266
}),
223-
wp.element.createElement(Components.ToggleControl, {
224-
label: 'Show linenumbers',
225-
checked: attributes.linenumbers,
267+
wp.element.createElement(Components.RadioControl, {
268+
label: 'Linenumbers',
269+
selected: attributes.linenumbers,
270+
options: [{ label: 'Global settings', value: 'x' }, { label: 'Show', value: 'true' }, { label: 'Hide', value: 'false' }],
226271
onChange: function onChange(linenumbers) {
227272
return setAttributes({ linenumbers: linenumbers });
228273
}
229274
})
230275
),
231276
wp.element.createElement(
232277
Components.PanelBody,
233-
{ title: 'Codegroup' },
278+
{ title: 'Codegroup', initialOpen: false, icon: 'excerpt-view' },
234279
wp.element.createElement(
235280
'p',
236281
null,
@@ -424,7 +469,7 @@ var EnlighterJS_Gutenberg = (function (exports) {
424469
className: false,
425470

426471
// disable html edit mode
427-
html: false
472+
html: true
428473
},
429474

430475
// handle deprecated blocks (previous plugin version)

‎src/blocks/codeblock/edit.js‎

Lines changed: 10 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,7 @@ export default function edit({attributes, setAttributes}){
4444
</div>
4545

4646
<Editor.InspectorControls>
47-
<Components.PanelBody title="Appearance">
47+
<Components.PanelBody title="Appearance" icon="admin-appearance">
4848
<p>Override the global plugin settings of the current block.</p>
4949
<_LanguageSelect
5050
value={attributes.language}
@@ -66,14 +66,19 @@ export default function edit({attributes, setAttributes}){
6666
value={attributes.theme}
6767
onChange={(theme) => setAttributes({theme})}
6868
/>
69-
<Components.ToggleControl
70-
label="Show linenumbers"
71-
checked={ attributes.linenumbers }
69+
<Components.RadioControl
70+
label="Linenumbers"
71+
selected={attributes.linenumbers}
72+
options={[
73+
{label: 'Global settings', value: '' },
74+
{label: 'Show', value: 'true' },
75+
{label: 'Hide', value: 'false' }
76+
]}
7277
onChange={(linenumbers) => setAttributes({linenumbers})}
7378
/>
7479
</Components.PanelBody>
7580

76-
<Components.PanelBody title="Codegroup">
81+
<Components.PanelBody title="Codegroup" initialOpen={false} icon="excerpt-view">
7782
<p>Create a group of multiple codeblocks by setting a unique group identifier.</p>
7883
<Components.TextControl
7984
label="Title"

‎src/blocks/codeblock/index.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@ export default {
3636
className: false,
3737

3838
// disable html edit mode
39-
html: false
39+
html: true
4040
},
4141

4242
// handle deprecated blocks (previous plugin version)

‎src/components/blockcontrols/LanguageMenu.js‎

Lines changed: 9 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -7,25 +7,28 @@
77
// ----------------------------------------------------------------------
88

99
import {Components} from '../../wp';
10-
import _editorConfig from '../../config';
10+
import {getLanguages} from '../../config';
1111

1212
// create a language selection menu
1313
export default function LanguageMenu({onChange, value}){
1414

15+
// get language list
16+
const languages = getLanguages();
17+
1518
// generate dropdown list
16-
const languageItemList = Object.keys(_editorConfig.languages).map(label => {
19+
const languageItemList = Object.keys(languages).map(key => {
1720

18-
// extract language identifier
19-
const languageIdentifier = _editorConfig.languages[label];
21+
// extract language label
22+
const label = languages[key];
2023

2124
return {
2225
title: label,
2326

2427
// current item active ?
25-
isActive: (value === languageIdentifier),
28+
isActive: (value === key),
2629

2730
// passthrough
28-
onClick: () => onChange(languageIdentifier)
31+
onClick: () => onChange(key)
2932
};
3033
});
3134

‎src/components/inspectorcontrols/LanguageSelect.js‎

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -7,20 +7,23 @@
77
// ----------------------------------------------------------------------
88

99
import {Components} from '../../wp';
10-
import _editorConfig from '../../config';
10+
import {getLanguages} from '../../config';
1111

1212
// create a language selection menu
1313
export default function LanguageSelect({onChange, value}){
1414

15+
// get language list
16+
const languages = getLanguages();
17+
1518
// generate dropdown list
16-
const languageItemList = Object.keys(_editorConfig.languages).map(label => {
19+
const languageItemList = Object.keys(languages).map(key => {
1720

18-
// extract language identifier
19-
const languageIdentifier = _editorConfig.languages[label];
21+
// extract language label
22+
const label = languages[key];
2023

2124
return {
2225
label: label,
23-
value: languageIdentifier
26+
value: key
2427
};
2528
});
2629

‎src/components/inspectorcontrols/ThemeSelect.js‎

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -7,20 +7,23 @@
77
// ----------------------------------------------------------------------
88

99
import {Components} from '../../wp';
10-
import _editorConfig from '../../config';
10+
import {getThemes} from '../../config';
1111

1212
// create a theme selection menu
1313
export default function ThemeSelect({onChange, value}){
1414

15+
// get themes
16+
const themes = getThemes();
17+
1518
// generate dropdown list
16-
const themeItemList = Object.keys(_editorConfig.themes).map(label => {
19+
const themeItemList = Object.keys(themes).map(key => {
1720

18-
// extract theme identifier
19-
const themeIdentifier = _editorConfig.themes[label];
21+
// extract theme label
22+
const label = themes[key];
2023

2124
return {
2225
label: label,
23-
value: themeIdentifier
26+
value: key
2427
};
2528
});
2629

‎src/config.js‎

Lines changed: 34 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,38 @@
11
// wrapper..
22

33
/*eslint no-undef: 0 */
4-
export default EnlighterJS_EditorConfig;
4+
const _editorConfig = EnlighterJS_EditorConfig;
5+
6+
// get list of available themes
7+
export function getThemes(){
8+
9+
// add default theme (selected globally)
10+
const themes = {
11+
'': 'Global settings (' + _editorConfig.config.theme + ')'
12+
};
13+
14+
// swap key/values
15+
Object.keys(_editorConfig.themes).forEach(label => {
16+
themes[_editorConfig.themes[label]] = label;
17+
});
18+
19+
return themes;
20+
}
21+
22+
// get list of available languages
23+
export function getLanguages(){
24+
const languages = {};
25+
26+
// swap key/values
27+
Object.keys(_editorConfig.languages).forEach(label => {
28+
languages[_editorConfig.languages[label]] = label;
29+
});
30+
31+
return languages;
32+
}
33+
34+
// global plugin config
35+
export function getGlobalConfig(){
36+
return _editorConfig.config;
37+
}
538

‎src/languages.js‎

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,9 +6,15 @@
66
// Copyright 2018 Andi Dittrich <https://andidittrich.de>
77
// ----------------------------------------------------------------------
88

9-
import _editorConfig from './config';
9+
import {getLanguages} from './config';
1010

1111
// get object key by value
12-
export function getLanguageLabel(lang){
13-
return Object.keys(_editorConfig.languages).find(key => _editorConfig.languages[key] === lang);
12+
export function getLanguageLabel(key){
13+
const langs = getLanguages();
14+
15+
if (langs[key]){
16+
return langs[key];
17+
}else{
18+
return 'Unknown language';
19+
}
1420
}

0 commit comments

Comments
 (0)