Skip to content

Commit

Permalink
added linenumber controls; added icons to settings panel
Browse files Browse the repository at this point in the history
  • Loading branch information
@AndiDittrich
AndiDittrich committed Aug 21, 2018
1 parent 5d941a1 commit 71cc8b4
Show file tree
Hide file tree
Showing 8 changed files with 147 additions and 49 deletions.
91 changes: 68 additions & 23 deletions dist/enlighterjs.gutenberg.min.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,37 @@ var EnlighterJS_Gutenberg = (function (exports) {

// wrapper..

/*eslint no-undef: 0 */
var _editorConfig = EnlighterJS_EditorConfig;

// get list of available themes
function getThemes() {

// add default theme (selected globally)
var themes = {
'': 'Global settings (' + _editorConfig.config.theme + ')'
};

// swap key/values
Object.keys(_editorConfig.themes).forEach(function (label) {
themes[_editorConfig.themes[label]] = label;
});

return themes;
}

// get list of available languages
function getLanguages() {
var languages = {};

// swap key/values
Object.keys(_editorConfig.languages).forEach(function (label) {
languages[_editorConfig.languages[label]] = label;
});

return languages;
}

// ----------------------------------------------------------------------

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


// get language list
var languages = getLanguages();

// generate dropdown list
var languageItemList = Object.keys(EnlighterJS_EditorConfig.languages).map(function (label) {
var languageItemList = Object.keys(languages).map(function (key) {

// extract language identifier
var languageIdentifier = EnlighterJS_EditorConfig.languages[label];
// extract language label
var label = languages[key];

return {
title: label,

// current item active ?
isActive: value === languageIdentifier,
isActive: value === key,

// passthrough
onClick: function onClick() {
return onChange(languageIdentifier);
return onChange(key);
}
};
});
Expand All @@ -61,15 +95,18 @@ var EnlighterJS_Gutenberg = (function (exports) {
value = _ref.value;


// get language list
var languages = getLanguages();

// generate dropdown list
var languageItemList = Object.keys(EnlighterJS_EditorConfig.languages).map(function (label) {
var languageItemList = Object.keys(languages).map(function (key) {

// extract language identifier
var languageIdentifier = EnlighterJS_EditorConfig.languages[label];
// extract language label
var label = languages[key];

return {
label: label,
value: languageIdentifier
value: key
};
});

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


// get themes
var themes = getThemes();

// generate dropdown list
var themeItemList = Object.keys(EnlighterJS_EditorConfig.themes).map(function (label) {
var themeItemList = Object.keys(themes).map(function (key) {

// extract theme identifier
var themeIdentifier = EnlighterJS_EditorConfig.themes[label];
// extract theme label
var label = themes[key];

return {
label: label,
value: themeIdentifier
value: key
};
});

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

// get object key by value
function getLanguageLabel(lang) {
return Object.keys(EnlighterJS_EditorConfig.languages).find(function (key) {
return EnlighterJS_EditorConfig.languages[key] === lang;
});
function getLanguageLabel(key) {
var langs = getLanguages();

if (langs[key]) {
return langs[key];
} else {
return 'Unknown language';
}
}

// ----------------------------------------------------------------------
Expand Down Expand Up @@ -186,7 +230,7 @@ var EnlighterJS_Gutenberg = (function (exports) {
null,
wp.element.createElement(
Components.PanelBody,
{ title: 'Appearance' },
{ title: 'Appearance', icon: 'admin-appearance' },
wp.element.createElement(
'p',
null,
Expand Down Expand Up @@ -220,17 +264,18 @@ var EnlighterJS_Gutenberg = (function (exports) {
return setAttributes({ theme: theme });
}
}),
wp.element.createElement(Components.ToggleControl, {
label: 'Show linenumbers',
checked: attributes.linenumbers,
wp.element.createElement(Components.RadioControl, {
label: 'Linenumbers',
selected: attributes.linenumbers,
options: [{ label: 'Global settings', value: 'x' }, { label: 'Show', value: 'true' }, { label: 'Hide', value: 'false' }],
onChange: function onChange(linenumbers) {
return setAttributes({ linenumbers: linenumbers });
}
})
),
wp.element.createElement(
Components.PanelBody,
{ title: 'Codegroup' },
{ title: 'Codegroup', initialOpen: false, icon: 'excerpt-view' },
wp.element.createElement(
'p',
null,
Expand Down Expand Up @@ -424,7 +469,7 @@ var EnlighterJS_Gutenberg = (function (exports) {
className: false,

// disable html edit mode
html: false
html: true
},

// handle deprecated blocks (previous plugin version)
Expand Down
15 changes: 10 additions & 5 deletions src/blocks/codeblock/edit.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,7 @@ export default function edit({attributes, setAttributes}){
</div>

<Editor.InspectorControls>
<Components.PanelBody title="Appearance">
<Components.PanelBody title="Appearance" icon="admin-appearance">
<p>Override the global plugin settings of the current block.</p>
<_LanguageSelect
value={attributes.language}
Expand All @@ -66,14 +66,19 @@ export default function edit({attributes, setAttributes}){
value={attributes.theme}
onChange={(theme) => setAttributes({theme})}
/>
<Components.ToggleControl
label="Show linenumbers"
checked={ attributes.linenumbers }
<Components.RadioControl
label="Linenumbers"
selected={attributes.linenumbers}
options={[
{label: 'Global settings', value: '' },
{label: 'Show', value: 'true' },
{label: 'Hide', value: 'false' }
]}
onChange={(linenumbers) => setAttributes({linenumbers})}
/>
</Components.PanelBody>

<Components.PanelBody title="Codegroup">
<Components.PanelBody title="Codegroup" initialOpen={false} icon="excerpt-view">
<p>Create a group of multiple codeblocks by setting a unique group identifier.</p>
<Components.TextControl
label="Title"
Expand Down
2 changes: 1 addition & 1 deletion src/blocks/codeblock/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@ export default {
className: false,

// disable html edit mode
html: false
html: true
},

// handle deprecated blocks (previous plugin version)
Expand Down
15 changes: 9 additions & 6 deletions src/components/blockcontrols/LanguageMenu.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,25 +7,28 @@
// ----------------------------------------------------------------------

import {Components} from '../../wp';
import _editorConfig from '../../config';
import {getLanguages} from '../../config';

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

// get language list
const languages = getLanguages();

// generate dropdown list
const languageItemList = Object.keys(_editorConfig.languages).map(label => {
const languageItemList = Object.keys(languages).map(key => {

// extract language identifier
const languageIdentifier = _editorConfig.languages[label];
// extract language label
const label = languages[key];

return {
title: label,

// current item active ?
isActive: (value === languageIdentifier),
isActive: (value === key),

// passthrough
onClick: () => onChange(languageIdentifier)
onClick: () => onChange(key)
};
});

Expand Down
13 changes: 8 additions & 5 deletions src/components/inspectorcontrols/LanguageSelect.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,20 +7,23 @@
// ----------------------------------------------------------------------

import {Components} from '../../wp';
import _editorConfig from '../../config';
import {getLanguages} from '../../config';

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

// get language list
const languages = getLanguages();

// generate dropdown list
const languageItemList = Object.keys(_editorConfig.languages).map(label => {
const languageItemList = Object.keys(languages).map(key => {

// extract language identifier
const languageIdentifier = _editorConfig.languages[label];
// extract language label
const label = languages[key];

return {
label: label,
value: languageIdentifier
value: key
};
});

Expand Down
13 changes: 8 additions & 5 deletions src/components/inspectorcontrols/ThemeSelect.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,20 +7,23 @@
// ----------------------------------------------------------------------

import {Components} from '../../wp';
import _editorConfig from '../../config';
import {getThemes} from '../../config';

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

// get themes
const themes = getThemes();

// generate dropdown list
const themeItemList = Object.keys(_editorConfig.themes).map(label => {
const themeItemList = Object.keys(themes).map(key => {

// extract theme identifier
const themeIdentifier = _editorConfig.themes[label];
// extract theme label
const label = themes[key];

return {
label: label,
value: themeIdentifier
value: key
};
});

Expand Down
35 changes: 34 additions & 1 deletion src/config.js
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,38 @@
// wrapper..

/*eslint no-undef: 0 */
export default EnlighterJS_EditorConfig;
const _editorConfig = EnlighterJS_EditorConfig;

// get list of available themes
export function getThemes(){

// add default theme (selected globally)
const themes = {
'': 'Global settings (' + _editorConfig.config.theme + ')'
};

// swap key/values
Object.keys(_editorConfig.themes).forEach(label => {
themes[_editorConfig.themes[label]] = label;
});

return themes;
}

// get list of available languages
export function getLanguages(){
const languages = {};

// swap key/values
Object.keys(_editorConfig.languages).forEach(label => {
languages[_editorConfig.languages[label]] = label;
});

return languages;
}

// global plugin config
export function getGlobalConfig(){
return _editorConfig.config;
}

12 changes: 9 additions & 3 deletions src/languages.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,9 +6,15 @@
// Copyright 2018 Andi Dittrich <https://andidittrich.de>
// ----------------------------------------------------------------------

import _editorConfig from './config';
import {getLanguages} from './config';

// get object key by value
export function getLanguageLabel(lang){
return Object.keys(_editorConfig.languages).find(key => _editorConfig.languages[key] === lang);
export function getLanguageLabel(key){
const langs = getLanguages();

if (langs[key]){
return langs[key];
}else{
return 'Unknown language';
}
}

0 comments on commit 71cc8b4

Please sign in to comment.