add unique IDs to ticker containers and ticks in HTML markup

Ticker containers get a consecutive number unique within a markup.
Ticks will get an ID based on this number and the post ID.

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() );
 						}
 					}
 
@@ -432,12 +432,12 @@ class SCLiveticker {
 	 * @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 integer $id      Tick ID.
 	 *
 	 * @return string HTML code of tick.
 	 */
-	private static function tick_html( $time, $title, $content, $is_widget = false ) {
+	private static function tick_html( $time, $title, $content, $id ) {
-		return '<li class="sclt-tick">'
+		return '<li class="sclt-tick" data-sclt-tick-id="' . esc_attr( $id ) . '">'
 			. '<span class="sclt-tick-time">' . esc_html( $time ) . '</span>'
 			. '<span class="sclt-tick-title">' . esc_html( $title ) . '</span>'
 			. '<div class="sclt-tick-content">' . $content . '</div></li>';
@@ -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 = '<li';
 		if ( $highlight ) {
 			$out .= ' class="sclt-widget-new"';
 		}
+		if ( $id > 0 ) {
+			$out .= ' data-sclt-tick-id="' . esc_attr( $id ) . '"';
+		}
 		return $out . '>'
 			. '<span class="sclt-widget-time">' . esc_html( $time ) . '</span>'
 			. '<span class="sclt-widget-title">' . $title . '</span>'

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()
 			);
 		}
 

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 );
+				var o = parseElement( elem, false, ++c );
-				if ( '0' === elem.lastPoll ) {
+				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 );
+					var o = parseElement( elem, true, ++c );
-					if ( 0 === elem.lastPoll ) {
+					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;