diff --git a/.eslintrc.json b/.eslintrc.json index 32330f8..baa189d 100644 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -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" + ] } ] } diff --git a/scripts/block.js b/scripts/block.js index d778544..e37ad52 100644 --- a/scripts/block.js +++ b/scripts/block.js @@ -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) => { + switch (action.type) { 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', @@ -91,20 +74,17 @@ // 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( @@ -112,9 +92,9 @@ { 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( @@ -122,94 +102,88 @@ { 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, + }), + }); +} diff --git a/scripts/liveticker.js b/scripts/liveticker.js index 87cd68e..809dfb1 100644 --- a/scripts/liveticker.js +++ b/scripts/liveticker.js @@ -27,7 +27,7 @@ pollInterval = scliveticker.poll_interval; // Get ticker elements. - ticker = [].map.call( + ticker = Array.prototype.map.call( document.querySelectorAll( 'div.wp-block-scliveticker-ticker.sclt-ajax' ), function( elem ) { var o = parseElement( elem, false, ++c ); @@ -40,7 +40,7 @@ // Get widget elements. ticker.concat( - [].map.call( + Array.prototype.map.call( document.querySelectorAll( 'div.wp-widget-scliveticker-ticker.sclt-ajax' ), function( elem ) { var o = parseElement( elem, true, ++c ); @@ -81,7 +81,7 @@ list = document.createElement( 'ul' ); elem.appendChild( list ); } else { - [].forEach.call( + Array.prototype.forEach.call( elem.querySelectorAll( 'li.sclt-tick' ), function( li ) { var id = li.getAttribute( 'data-sclt-tick-id' ); @@ -231,9 +231,9 @@ // Remove tail, if limit is set. if ( 0 < t.limit && t.limit < t.ticks.children.length ) { if ( 'asc' === t.sort ) { - old = [].slice.call( t.ticks.children, 0, -t.limit ); + old = Array.prototype.slice.call( t.ticks.children, 0, -t.limit ); } else { - old = [].slice.call( t.ticks.children, t.limit ); + old = Array.prototype.slice.call( t.ticks.children, t.limit ); } old.forEach( function( l ) {