Skip to content

Commit 58ad68b

Browse files
stklcodestklcode
committed
rewrite block.js in ES6 syntax (#41)
1 parent b4bc216 commit 58ad68b

3 files changed

Lines changed: 141 additions & 157 deletions

File tree

‎.eslintrc.json‎

Lines changed: 20 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,44 @@
11
{
22
"env": {
3-
"es6": false,
43
"browser": true
54
},
65
"globals": {
76
"scliveticker": "readonly",
87
"wp": "readonly"
98
},
10-
"extends": [
11-
"plugin:@wordpress/eslint-plugin/custom",
12-
"plugin:@wordpress/eslint-plugin/es5",
13-
"plugin:@wordpress/eslint-plugin/i18n"
14-
],
159
"rules": {
1610
"@wordpress/i18n-text-domain": [
1711
"error",
1812
{
19-
"allowedTextDomain": [ "stklcode-liveticker" ]
13+
"allowedTextDomain": ["stklcode-liveticker"]
2014
}
2115
]
2216
},
2317
"overrides": [
2418
{
25-
"files": [
26-
"*"
27-
],
19+
"files": ["*"],
2820
"rules": {
2921
"no-var": "off",
3022
"object-shorthand": "off"
3123
}
24+
},
25+
{
26+
"files": ["scripts/block.js"],
27+
"env": {
28+
"es6": true
29+
},
30+
"extends": ["plugin:@wordpress/eslint-plugin/recommended"]
31+
},
32+
{
33+
"files": ["scripts/liveticker.js"],
34+
"env": {
35+
"es6": false
36+
},
37+
"extends": [
38+
"plugin:@wordpress/eslint-plugin/custom",
39+
"plugin:@wordpress/eslint-plugin/es5",
40+
"plugin:@wordpress/eslint-plugin/i18n"
41+
]
3242
}
3343
]
3444
}

‎scripts/block.js‎

Lines changed: 116 additions & 142 deletions
Original file line numberDiff line numberDiff line change
@@ -3,76 +3,59 @@
33
*
44
* Gutenberg Block to integrate the liveticker widget without shortcode.
55
*/
6-
( function() {
7-
var __ = wp.i18n.__;
8-
var registerBlockType = wp.blocks.registerBlockType;
9-
var registerStore = wp.data.registerStore;
10-
var withSelect = wp.data.withSelect;
11-
var el = wp.element.createElement;
6+
{
7+
const __ = wp.i18n.__;
8+
const registerBlockType = wp.blocks.registerBlockType;
9+
const registerStore = wp.data.registerStore;
10+
const withSelect = wp.data.withSelect;
11+
const el = wp.element.createElement;
1212

1313
/**
1414
* Datastore actions.
1515
*/
16-
var actions = {
17-
setTickers: function( tickers ) {
18-
return {
19-
type: 'SET_TICKERS',
20-
tickers: tickers,
21-
};
22-
},
23-
getTickers: function( path ) {
24-
return {
25-
type: 'RECEIVE_TICKERS',
26-
path: path,
27-
};
28-
},
16+
const actions = {
17+
setTickers: (tickers) => ({ type: 'SET_TICKERS', tickers }),
2918
};
3019

31-
registerStore( 'scliveticker/ticker', {
32-
reducer: function( state, action ) {
33-
if ( undefined === state ) {
34-
state = { tickers: null };
35-
}
36-
switch ( action.type ) {
20+
registerStore('scliveticker/ticker', {
21+
reducer: (state = { tickers: null }, action) => {
22+
switch (action.type) {
3723
case 'SET_TICKERS':
38-
state.tickers = action.tickers;
24+
return {
25+
...state,
26+
tickers: action.tickers,
27+
};
28+
default:
3929
return state;
40-
case 'RECEIVE_TICKERS':
41-
return action.tickers;
4230
}
43-
44-
return state;
4531
},
4632

47-
actions: actions,
33+
actions,
4834

4935
selectors: {
50-
receiveTickers: function( state ) {
51-
return state.tickers;
52-
},
36+
receiveTickers: (state) => state.tickers,
5337
},
5438

5539
resolvers: {
56-
receiveTickers: function() {
57-
return wp.apiFetch( { path: '/wp/v2/scliveticker_ticker' } ).then( function( tickers ) {
58-
return actions.setTickers( tickers.map( function( t ) {
59-
return {
60-
name: t.name,
61-
slug: t.slug,
62-
};
63-
} ) );
64-
} );
65-
},
40+
receiveTickers: () =>
41+
wp
42+
.apiFetch({ path: '/wp/v2/scliveticker_ticker' })
43+
.then((tickers) =>
44+
actions.setTickers(
45+
tickers.map((t) => ({
46+
name: t.name,
47+
slug: t.slug,
48+
}))
49+
)
50+
),
6651
},
67-
} );
52+
});
6853

69-
registerBlockType( 'scliveticker/ticker', {
70-
title: __( 'Liveticker', 'stklcode-liveticker' ),
54+
registerBlockType('scliveticker/ticker', {
55+
title: __('Liveticker', 'stklcode-liveticker'),
7156
icon: 'rss',
7257
category: 'widgets',
73-
keywords: [
74-
__( 'Liveticker', 'stklcode-liveticker' ),
75-
],
58+
keywords: [__('Liveticker', 'stklcode-liveticker')],
7659
attributes: {
7760
ticker: {
7861
type: 'string',
@@ -91,125 +74,116 @@
9174
// implicit default: 'desc', left empty here for backwards compatibility of the block
9275
},
9376
},
94-
edit: withSelect( function( select ) {
95-
return {
96-
tickers: select( 'scliveticker/ticker' ).receiveTickers(),
97-
};
98-
} )( function( props ) {
99-
var label = [
100-
el(
101-
wp.components.Dashicon,
102-
{ icon: 'rss' }
103-
),
104-
__( 'Liveticker', 'stklcode-liveticker' ),
77+
edit: withSelect((select) => ({
78+
tickers: select('scliveticker/ticker').receiveTickers(),
79+
}))((props) => {
80+
const { attributes, className, setAttributes, tickers } = props;
81+
82+
const label = [
83+
el(wp.components.Dashicon, { icon: 'rss' }),
84+
__('Liveticker', 'stklcode-liveticker'),
10585
];
106-
var content;
107-
if ( null === props.tickers ) {
86+
let content;
87+
if (null === tickers) {
10888
// Tickers not yet loaded.
10989
content = [
11090
el(
11191
'span',
11292
{ className: 'components-base-control label' },
11393
label
11494
),
115-
el( wp.components.Spinner ),
95+
el(wp.components.Spinner),
11696
];
117-
} else if ( 0 === props.tickers.length ) {
97+
} else if (0 === tickers.length) {
11898
// No tickers available.
11999
content = [
120100
el(
121101
'span',
122102
{ className: 'components-base-control label' },
123103
label
124104
),
125-
el( 'span', null, __( 'No tickers available', 'stklcode-liveticker' ) ),
105+
el(
106+
'span',
107+
null,
108+
__('No tickers available', 'stklcode-liveticker')
109+
),
126110
];
127111
} else {
128112
// Tickers loaded and available.
129-
if ( 0 === props.attributes.ticker.length && props.tickers.length > 0 ) {
130-
props.attributes.ticker = props.tickers[ 0 ].slug;
113+
if (!attributes.ticker && tickers.length > 0) {
114+
setAttributes({ ticker: tickers[0].slug });
131115
}
132116
content = [
133-
el(
134-
wp.components.SelectControl,
135-
{
136-
label: label,
137-
value: props.attributes.ticker,
138-
options: props.tickers.map( function( t ) {
139-
return {
140-
value: t.slug,
141-
label: t.name,
142-
};
143-
} ),
144-
onChange: function( val ) {
145-
props.setAttributes( { ticker: val } );
146-
},
147-
}
148-
),
149-
el(
150-
wp.components.TextControl,
151-
{
152-
label: __( 'Number of Ticks', 'stklcode-liveticker' ),
153-
type: 'number',
154-
min: 1,
155-
step: 1,
156-
disabled: props.attributes.unlimited,
157-
value: props.attributes.limit,
158-
onChange: function( val ) {
159-
props.setAttributes( { limit: Number( val ) } );
117+
el(wp.components.SelectControl, {
118+
label,
119+
value: attributes.ticker,
120+
options: tickers.map((t) => ({
121+
value: t.slug,
122+
label: t.name,
123+
})),
124+
onChange: (val) => {
125+
setAttributes({ ticker: val });
126+
},
127+
}),
128+
el(wp.components.TextControl, {
129+
label: __('Number of Ticks', 'stklcode-liveticker'),
130+
type: 'number',
131+
min: 1,
132+
step: 1,
133+
disabled: attributes.unlimited,
134+
value: attributes.limit,
135+
onChange: (val) => {
136+
setAttributes({ limit: Number(val) });
137+
},
138+
}),
139+
el(wp.components.CheckboxControl, {
140+
label: __('unlimited', 'stklcode-liveticker'),
141+
checked: attributes.unlimited,
142+
onChange: (val) => {
143+
setAttributes({ unlimited: val });
144+
},
145+
}),
146+
el(wp.components.SelectControl, {
147+
label: __('Output direction', 'stklcode-liveticker'),
148+
value: attributes.sort,
149+
options: [
150+
{
151+
value: 'desc',
152+
label: __(
153+
'newest first',
154+
'stklcode-liveticker'
155+
),
160156
},
161-
}
162-
),
163-
el(
164-
wp.components.CheckboxControl,
165-
{
166-
label: __( 'unlimited', 'stklcode-liveticker' ),
167-
checked: props.attributes.unlimited,
168-
onChange: function( val ) {
169-
props.setAttributes( { unlimited: val } );
170-
},
171-
}
172-
),
173-
el(
174-
wp.components.SelectControl,
175-
{
176-
label: __( 'Output direction', 'stklcode-liveticker' ),
177-
value: props.attributes.sort,
178-
options: [
179-
{
180-
value: 'desc',
181-
label: __( 'newest first', 'stklcode-liveticker' ),
182-
},
183-
{
184-
value: 'asc',
185-
label: __( 'oldest first', 'stklcode-liveticker' ),
186-
},
187-
],
188-
onChange: function( val ) {
189-
props.setAttributes( { sort: val } );
157+
{
158+
value: 'asc',
159+
label: __(
160+
'oldest first',
161+
'stklcode-liveticker'
162+
),
190163
},
191-
}
192-
),
164+
],
165+
onChange: (val) => {
166+
setAttributes({ sort: val });
167+
},
168+
}),
193169
];
194170
}
195171

196172
return el(
197173
'div',
198-
{ className: props.className + ' components-placeholder' },
174+
{ className: className + ' components-placeholder' },
199175
content
200176
);
201-
} ),
202-
save: function( props ) {
203-
return el(
204-
'div',
205-
{
206-
className: 'sclt-ajax',
207-
'data-sclt-ticker': props.attributes.ticker,
208-
'data-sclt-limit': props.attributes.unlimited ? 0 : props.attributes.limit,
209-
'data-sclt-last': 0,
210-
'data-sclt-sort': props.attributes.sort,
211-
}
212-
);
213-
},
214-
} );
215-
}() );
177+
}),
178+
save: (props) =>
179+
el('div', {
180+
className: 'sclt-ajax',
181+
'data-sclt-ticker': props.attributes.ticker,
182+
'data-sclt-limit': props.attributes.unlimited
183+
? 0
184+
: props.attributes.limit,
185+
'data-sclt-last': 0,
186+
'data-sclt-sort': props.attributes.sort,
187+
}),
188+
});
189+
}

0 commit comments

Comments
 (0)