diff --git a/includes/class-scliveticker.php b/includes/class-scliveticker.php index 7ef9e11..da80043 100644 --- a/includes/class-scliveticker.php +++ b/includes/class-scliveticker.php @@ -223,7 +223,7 @@ class SCLiveticker { $last = null; while ( $wp_query->have_posts() ) { $wp_query->the_post(); - $ticks .= self::tick_html( get_the_time( 'd.m.Y H:i' ), get_the_title(), get_the_content() ); + $ticks .= self::tick_html( get_the_time( 'd.m.Y H:i' ), get_the_title(), get_the_content(), get_the_ID() ); if ( is_null( $last ) ) { $last = get_post_modified_time( 'Y-m-d\TH:i:s', true ); } @@ -264,7 +264,7 @@ class SCLiveticker { if ( self::$shortcode_present || self::$widget_present || self::block_present() ) { wp_enqueue_script( 'scliveticker-js', - SCLIVETICKER_BASE . 'scripts/liveticker.js', + SCLIVETICKER_BASE . 'scripts/liveticker.min.js', array(), self::VERSION, true @@ -360,9 +360,9 @@ class SCLiveticker { while ( $query->have_posts() ) { $query->the_post(); if ( $is_widget ) { - $out .= self::tick_html_widget( get_the_time( 'd.m.Y H:i' ), get_the_title(), false ); + $out .= self::tick_html_widget( get_the_time( 'd.m.Y H:i' ), get_the_title(), false, get_the_ID() ); } else { - $out .= self::tick_html( get_the_time( 'd.m.Y H:i' ), get_the_title(), get_the_content(), $is_widget ); + $out .= self::tick_html( get_the_time( 'd.m.Y H:i' ), get_the_title(), get_the_content(), get_the_ID() ); } } @@ -429,15 +429,15 @@ class SCLiveticker { /** * Generate HTML code for a tick element. * - * @param string $time Tick time (readable). - * @param string $title Tick title. - * @param string $content Tick content. - * @param boolean $is_widget Is the code for Widget. + * @param string $time Tick time (readable). + * @param string $title Tick title. + * @param string $content Tick content. + * @param integer $id Tick ID. * * @return string HTML code of tick. */ - private static function tick_html( $time, $title, $content, $is_widget = false ) { - return '
  • ' + private static function tick_html( $time, $title, $content, $id ) { + return '
  • ' . '' . esc_html( $time ) . '' . '' . esc_html( $title ) . '' . '
    ' . $content . '
  • '; @@ -449,14 +449,18 @@ class SCLiveticker { * @param string $time Tick time (readable). * @param string $title Tick title. * @param boolean $highlight Highlight element. + * @param integer $id Tick ID. * * @return string HTML code of widget tick. */ - public static function tick_html_widget( $time, $title, $highlight ) { + public static function tick_html_widget( $time, $title, $highlight, $id = 0 ) { $out = ' 0 ) { + $out .= ' data-sclt-tick-id="' . esc_attr( $id ) . '"'; + } return $out . '>' . '' . esc_html( $time ) . '' . '' . $title . '' diff --git a/includes/class-widget.php b/includes/class-widget.php index 0fca864..1996ff0 100644 --- a/includes/class-widget.php +++ b/includes/class-widget.php @@ -101,7 +101,8 @@ class Widget extends WP_Widget { echo SCLiveticker::tick_html_widget( esc_html( get_the_time( 'd.m.Y - H:i' ) ), get_the_title(), - ( '1' === $highlight && get_the_time( 'U' ) > ( time() - $highlight_time ) ) + ( '1' === $highlight && get_the_time( 'U' ) > ( time() - $highlight_time ) ), + get_the_ID() ); } diff --git a/scripts/liveticker.js b/scripts/liveticker.js index 629873b..56d9132 100644 --- a/scripts/liveticker.js +++ b/scripts/liveticker.js @@ -15,6 +15,7 @@ */ var init = function() { var updateNow = false; + var c = 0; // Opt out if AJAX pobject not present. if ( 'undefined' === typeof scliveticker ) { @@ -29,11 +30,11 @@ ticker = [].map.call( document.querySelectorAll( 'div.wp-block-scliveticker-ticker.sclt-ajax' ), function( elem ) { - elem = parseElement( elem, false ); - if ( '0' === elem.lastPoll ) { + var o = parseElement( elem, false, ++c ); + if ( '0' === o.lastPoll ) { updateNow = true; } - return elem; + return o; } ); @@ -42,11 +43,11 @@ [].map.call( document.querySelectorAll( 'div.wp-widget-scliveticker-ticker.sclt-ajax' ), function( elem ) { - elem = parseElement( elem, true ); - if ( 0 === elem.lastPoll ) { + var o = parseElement( elem, true, ++c ); + if ( 0 === o.lastPoll ) { updateNow = true; } - return elem; + return o; } ) ); @@ -66,18 +67,33 @@ * * @param {HTMLElement} elem The element. * @param {boolean} widget Is the element a widget? + * @param {number} n Number of the container. * @return {{ticker: string, lastPoll: number, ticks: any, limit: string, isWidget: *}} Ticker descriptor object. */ - var parseElement = function( elem, widget ) { + var parseElement = function( elem, widget, n ) { var list = elem.querySelector( 'ul' ); var last = elem.getAttribute( 'data-sclt-last' ); + elem.id = 'sclt-' + n; + if ( ! list ) { list = document.createElement( 'ul' ); elem.appendChild( list ); + } else { + [].forEach.call( + elem.querySelectorAll( 'li.sclt-tick' ), + function( li ) { + var id = li.getAttribute( 'data-sclt-tick-id' ); + if ( id ) { + li.id = 'sclt-' + n + '-' + id; + li.removeAttribute( 'data-sclt-tick-id' ); + } + } + ); } return { + id: n, ticker: elem.getAttribute( 'data-sclt-ticker' ), limit: elem.getAttribute( 'data-sclt-limit' ), lastPoll: last, @@ -141,6 +157,7 @@ var content = document.createElement( 'div' ); var cls = t.isWidget ? 'sclt-widget' : 'sclt-tick'; + li.id = 'sclt-' + t.id + '-' + u.id; li.classList.add( cls ); time.classList.add( cls + '-time' ); time.innerText = u.modified_rendered;