Skip to content

rewrite block.js in ES6 syntax #41

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
stklcode wants to merge 1 commit into
base: develop
Choose a base branch
from
Draft

rewrite block.js in ES6 syntax #41

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
30 changes: 20 additions & 10 deletions .eslintrc.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,34 +1,44 @@
{
"env": {
"es6": false,
"browser": true
},
"globals": {
"scliveticker": "readonly",
"wp": "readonly"
},
"extends": [
"plugin:@wordpress/eslint-plugin/custom",
"plugin:@wordpress/eslint-plugin/es5",
"plugin:@wordpress/eslint-plugin/i18n"
],
"rules": {
"@wordpress/i18n-text-domain": [
"error",
{
"allowedTextDomain": [ "stklcode-liveticker" ]
"allowedTextDomain": ["stklcode-liveticker"]
}
]
},
"overrides": [
{
"files": [
"*"
],
"files": ["*"],
"rules": {
"no-var": "off",
"object-shorthand": "off"
}
},
{
"files": ["scripts/block.js"],
"env": {
"es6": true
},
"extends": ["plugin:@wordpress/eslint-plugin/recommended"]
},
{
"files": ["scripts/liveticker.js"],
"env": {
"es6": false
},
"extends": [
"plugin:@wordpress/eslint-plugin/custom",
"plugin:@wordpress/eslint-plugin/es5",
"plugin:@wordpress/eslint-plugin/i18n"
]
}
]
}
258 changes: 116 additions & 142 deletions scripts/block.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,76 +3,59 @@
*
* Gutenberg Block to integrate the liveticker widget without shortcode.
*/
( function() {
var __ = wp.i18n.__;
var registerBlockType = wp.blocks.registerBlockType;
var registerStore = wp.data.registerStore;
var withSelect = wp.data.withSelect;
var el = wp.element.createElement;
{
const __ = wp.i18n.__;
const registerBlockType = wp.blocks.registerBlockType;
const registerStore = wp.data.registerStore;
const withSelect = wp.data.withSelect;
const el = wp.element.createElement;

/**
* Datastore actions.
*/
var actions = {
setTickers: function( tickers ) {
return {
type: 'SET_TICKERS',
tickers: tickers,
};
},
getTickers: function( path ) {
return {
type: 'RECEIVE_TICKERS',
path: path,
};
},
const actions = {
setTickers: (tickers) => ({ type: 'SET_TICKERS', tickers }),
};

registerStore( 'scliveticker/ticker', {
reducer: function( state, action ) {
if ( undefined === state ) {
state = { tickers: null };
}
switch ( action.type ) {
registerStore('scliveticker/ticker', {
reducer: (state = { tickers: null }, action) => {

Check warning on line 21 in scripts/block.js

View check run for this annotation

SonarQubeCloud / SonarCloud Code Analysis

Do not use an object literal as default for parameter `state`. 


See more on https://sonarcloud.io/project/issues?id=stklcode%3Awp-liveticker&issues=AZzti850t5t5DmIVy8fB&open=AZzti850t5t5DmIVy8fB&pullRequest=41
switch (action.type) {

Check warning on line 22 in scripts/block.js

View check run for this annotation

SonarQubeCloud / SonarCloud Code Analysis

Replace this "switch" statement by "if" statements to increase readability. 


See more on https://sonarcloud.io/project/issues?id=stklcode%3Awp-liveticker&issues=AZzti850t5t5DmIVy8fC&open=AZzti850t5t5DmIVy8fC&pullRequest=41
case 'SET_TICKERS':
state.tickers = action.tickers;
return {
...state,
tickers: action.tickers,
};
default:
return state;
case 'RECEIVE_TICKERS':
return action.tickers;
}

return state;
},

actions: actions,
actions,

selectors: {
receiveTickers: function( state ) {
return state.tickers;
},
receiveTickers: (state) => state.tickers,
},

resolvers: {
receiveTickers: function() {
return wp.apiFetch( { path: '/wp/v2/scliveticker_ticker' } ).then( function( tickers ) {
return actions.setTickers( tickers.map( function( t ) {
return {
name: t.name,
slug: t.slug,
};
} ) );
} );
},
receiveTickers: () =>
wp
.apiFetch({ path: '/wp/v2/scliveticker_ticker' })
.then((tickers) =>
actions.setTickers(
tickers.map((t) => ({
name: t.name,
slug: t.slug,
}))
)
),
},
} );
});

registerBlockType( 'scliveticker/ticker', {
title: __( 'Liveticker', 'stklcode-liveticker' ),
registerBlockType('scliveticker/ticker', {
title: __('Liveticker', 'stklcode-liveticker'),
icon: 'rss',
category: 'widgets',
keywords: [
__( 'Liveticker', 'stklcode-liveticker' ),
],
keywords: [__('Liveticker', 'stklcode-liveticker')],
attributes: {
ticker: {
type: 'string',
Expand All @@ -91,125 +74,116 @@
// implicit default: 'desc', left empty here for backwards compatibility of the block
},
},
edit: withSelect( function( select ) {
return {
tickers: select( 'scliveticker/ticker' ).receiveTickers(),
};
} )( function( props ) {
var label = [
el(
wp.components.Dashicon,
{ icon: 'rss' }
),
__( 'Liveticker', 'stklcode-liveticker' ),
edit: withSelect((select) => ({
tickers: select('scliveticker/ticker').receiveTickers(),
}))((props) => {
const { attributes, className, setAttributes, tickers } = props;

const label = [
el(wp.components.Dashicon, { icon: 'rss' }),
__('Liveticker', 'stklcode-liveticker'),
];
var content;
if ( null === props.tickers ) {
let content;
if (null === tickers) {
// Tickers not yet loaded.
content = [
el(
'span',
{ className: 'components-base-control label' },
label
),
el( wp.components.Spinner ),
el(wp.components.Spinner),
];
} else if ( 0 === props.tickers.length ) {
} else if (0 === tickers.length) {
// No tickers available.
content = [
el(
'span',
{ className: 'components-base-control label' },
label
),
el( 'span', null, __( 'No tickers available', 'stklcode-liveticker' ) ),
el(
'span',
null,
__('No tickers available', 'stklcode-liveticker')
),
];
} else {
// Tickers loaded and available.
if ( 0 === props.attributes.ticker.length && props.tickers.length > 0 ) {
props.attributes.ticker = props.tickers[ 0 ].slug;
if (!attributes.ticker && tickers.length > 0) {
setAttributes({ ticker: tickers[0].slug });
}
content = [
el(
wp.components.SelectControl,
{
label: label,
value: props.attributes.ticker,
options: props.tickers.map( function( t ) {
return {
value: t.slug,
label: t.name,
};
} ),
onChange: function( val ) {
props.setAttributes( { ticker: val } );
},
}
),
el(
wp.components.TextControl,
{
label: __( 'Number of Ticks', 'stklcode-liveticker' ),
type: 'number',
min: 1,
step: 1,
disabled: props.attributes.unlimited,
value: props.attributes.limit,
onChange: function( val ) {
props.setAttributes( { limit: Number( val ) } );
el(wp.components.SelectControl, {
label,
value: attributes.ticker,
options: tickers.map((t) => ({
value: t.slug,
label: t.name,
})),
onChange: (val) => {
setAttributes({ ticker: val });
},
}),
el(wp.components.TextControl, {
label: __('Number of Ticks', 'stklcode-liveticker'),
type: 'number',
min: 1,
step: 1,
disabled: attributes.unlimited,
value: attributes.limit,
onChange: (val) => {
setAttributes({ limit: Number(val) });
},
}),
el(wp.components.CheckboxControl, {
label: __('unlimited', 'stklcode-liveticker'),
checked: attributes.unlimited,
onChange: (val) => {
setAttributes({ unlimited: val });
},
}),
el(wp.components.SelectControl, {
label: __('Output direction', 'stklcode-liveticker'),
value: attributes.sort,
options: [
{
value: 'desc',
label: __(
'newest first',
'stklcode-liveticker'
),
},
}
),
el(
wp.components.CheckboxControl,
{
label: __( 'unlimited', 'stklcode-liveticker' ),
checked: props.attributes.unlimited,
onChange: function( val ) {
props.setAttributes( { unlimited: val } );
},
}
),
el(
wp.components.SelectControl,
{
label: __( 'Output direction', 'stklcode-liveticker' ),
value: props.attributes.sort,
options: [
{
value: 'desc',
label: __( 'newest first', 'stklcode-liveticker' ),
},
{
value: 'asc',
label: __( 'oldest first', 'stklcode-liveticker' ),
},
],
onChange: function( val ) {
props.setAttributes( { sort: val } );
{
value: 'asc',
label: __(
'oldest first',
'stklcode-liveticker'
),
},
}
),
],
onChange: (val) => {
setAttributes({ sort: val });
},
}),
];
}

return el(
'div',
{ className: props.className + ' components-placeholder' },
{ className: className + ' components-placeholder' },
content
);
} ),
save: function( props ) {
return el(
'div',
{
className: 'sclt-ajax',
'data-sclt-ticker': props.attributes.ticker,
'data-sclt-limit': props.attributes.unlimited ? 0 : props.attributes.limit,
'data-sclt-last': 0,
'data-sclt-sort': props.attributes.sort,
}
);
},
} );
}() );
}),
save: (props) =>
el('div', {
className: 'sclt-ajax',
'data-sclt-ticker': props.attributes.ticker,
'data-sclt-limit': props.attributes.unlimited
? 0
: props.attributes.limit,
'data-sclt-last': 0,
'data-sclt-sort': props.attributes.sort,
}),
});
}
Loading
Loading