stklcode/wp-liveticker
1
0
Fork 0
Code Issues Releases 7 Activity

implement Gutenberg block to add liveticker without legacy shortcode

Browse Source 
* implement react-based JS block
* refactor shortcode and widget to use the same syntax and classes
This commit is contained in:
Stefan Kalscheuer
2019-11-23 17:54:53 +01:00
parent e201d7c02f
commit 9ddcc41c6b
11 changed files with 168 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

91
scripts/block.js Normal file
View File

@ -0,0 +1,91 @@
/**
* stklcode-liveticker Gutenberg Block
*
* Gutenberg Block to integrate the liveticker widget without shortcode.
*/
( function() {
var { __ } = wp.i18n;
var { registerBlockType } = wp.blocks;
var el = wp.element.createElement;
registerBlockType( 'scliveticker/ticker', {
title: __( 'Liveticker', 'stklcode-liveticker' ),
icon: 'rss',
category: 'widgets',
keywords: [
__( 'Liveticker', 'stklcode-liveticker' ),
],
attributes: {
ticker: {
type: 'string',
default: '',
},
limit: {
type: 'number',
default: 5,
},
unlimited: {
type: 'boolean',
default: false,
},
},
edit: function( props ) {
return el(
'div',
{ className: props.className + ' components-placeholder' },
[
el(
wp.components.TextControl,
{
label: [
el(
wp.components.Dashicon,
{ icon: 'rss' }
),
__( 'Liveticker', 'stklcode-liveticker' ) ],
value: props.attributes.ticker,
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: val } );
},
}
),
el(
wp.components.CheckboxControl,
{
label: __( 'unlimited', 'stklcode-liveticker' ),
checked: props.attributes.unlimited,
onChange: function( val ) {
props.setAttributes( { unlimited: val } );
},
}
),
],
);
},
save: function( props ) {
return el(
'div',
{
className: props.className + ' sclt-ajax',
'data-sclt-ticker': props.attributes.ticker,
'data-sclt-limit': props.attributes.unlimited ? 0 : props.attributes.limit,
'data-sclt-last': 0,
}
);
},
} );
}() );

24
scripts/liveticker.js
View File

@ -1,7 +1,7 @@
/**
* Contructor of the scLiveticker object.
*
* @constructor
* @class
*/
function scLiveticker() {
}
@ -24,26 +24,38 @@ scLiveticker.init = function() {
// Get ticker elements.
scLiveticker.ticker = [].map.call(
document.querySelectorAll( 'ul.sclt-ticker-ajax' ),
document.querySelectorAll( 'div.wp-block-scliveticker-ticker.sclt-ajax' ),
function( elem ) {
var list = elem.querySelector( 'ul' );
if ( ! list ) {
list = document.createElement( 'ul' );
elem.appendChild( list );
}
return {
s: elem.getAttribute( 'data-sclt-ticker' ),
l: elem.getAttribute( 'data-sclt-limit' ),
t: elem.getAttribute( 'data-sclt-last' ),
e: elem,
e: list,
};
}
);
// Get widget elements.
scLiveticker.widgets = [].map.call(
document.querySelectorAll( 'ul.sclt-widget-ajax' ),
document.querySelectorAll( 'div.wp-widget-scliveticker-ticker.sclt-ajax' ),
function( elem ) {
var list = elem.querySelector( 'ul' );
if ( ! list ) {
list = document.createElement( 'ul' );
elem.appendChild( list );
}
return {
w: elem.getAttribute( 'data-sclt-ticker' ),
l: elem.getAttribute( 'data-sclt-limit' ),
t: elem.getAttribute( 'data-sclt-last' ),
e: elem,
e: list,
};
}
);
@ -132,7 +144,7 @@ scLiveticker.update = function() {
scLiveticker.updateHTML = function( t, u ) {
// Prepend HTML of new ticks.
t.e.innerHTML = u.h + t.e.innerHTML;
t.e.setAttribute( 'data-sclt-last', u.t );
t.e.parentNode.setAttribute( 'data-sclt-last', u.t );
// Remove tail, if limit is set.
if ( 0 < t.l ) {