Ticker HTML and CSS classes harmonized

includes/class-wpliveticker2-widget.php

@@ -60,7 +60,7 @@ class WPLiveticker2_Widget extends WP_Widget {
 		}
 
 		?>
-		<ul class="wplt_widget">
+		<ul class="wplt2-widget">
 			<?php
 			$args = array(
 				'post_type' => 'wplt2_tick',
@@ -79,7 +79,7 @@ class WPLiveticker2_Widget extends WP_Widget {
 				$wp_query->the_post();
 				?>
 				<li>
-					<span class="wplt_widget_time"><?php echo esc_html( get_the_time( 'd.m.Y - H.i' ) ); ?></span><span class="wplt_widget_content<?php if ( '1' === $highlight && get_the_time( 'U' ) > ( time() - $highlight_time ) ) {
+					<span class="wplt2-widget-time"><?php echo esc_html( get_the_time( 'd.m.Y - H.i' ) ); ?></span><span class="wplt-widget-content<?php if ( '1' === $highlight && get_the_time( 'U' ) > ( time() - $highlight_time ) ) {
 						echo '_new';
 } ?>"><br /><?php echo the_title(); ?></span></li>
 				<?php
@@ -92,7 +92,7 @@ class WPLiveticker2_Widget extends WP_Widget {
 
 		<?php
 		if ( $link ) {
-			print '<p class="wplt_widget_link"><a href="' . esc_attr( $link ) . '">' . esc_html__( 'show all', 'wplt2' ) . '...</a></p>';
+			print '<p class="wplt2-widget-link"><a href="' . esc_attr( $link ) . '">' . esc_html__( 'show all', 'wplt2' ) . '...</a></p>';
 		}
 		// @codingStandardsIgnoreLine
 		echo $after_widget;

includes/class-wpliveticker2.php

@@ -200,10 +200,7 @@ class WPLiveticker2 {
 
 			while ( $wp_query->have_posts() ) {
 				$wp_query->the_post();
-				$output .= '<li class="wplt2_tick">
+				$output .= self::tick_html( get_the_time( 'd.m.Y H.i' ), get_the_title(), get_the_content() );
-						  <p><span class="wplt2_tick_time">' . get_the_time( 'd.m.Y H.i' ) . '</span>
-						  <span class="wplt2_tick_title">' . get_the_title() . '</span></p>
-						  <p class="wplt2_tick_content">' . get_the_content() . '</p></li>';
 			}
 
 			$output .= '</ul>';
@@ -266,48 +263,45 @@ class WPLiveticker2 {
 
 		// Extract update requests.
 		if ( isset( $_POST['update'] ) && is_array( $_POST['update'] ) ) {
+			$res = array();
 			foreach ( $_POST['update'] as $updateReq ) {
 				if ( isset ( $updateReq['s'] ) ) {
 					$slug     = $updateReq['s'];
 					$limit    = ( isset ( $updateReq['l'] ) ) ? intval( $updateReq['l'] ) : - 1;
 					$lastPoll = ( isset ( $updateReq['t'] ) ) ? intval( $updateReq['t'] ) : 0;
 
-					// TODO: fetch updates, render and add to result.
+					// Query new ticks from DB.
+					$queryArgs = array(
+						'post_type'      => 'wplt2_tick',
+						'posts_per_page' => $limit,
+						'tax_query'      => array(
+							array(
+								'taxonomy' => 'wplt2_ticker',
+								'field'    => 'slug',
+								'terms'    => $slug,
+							)
+						)
+					);
+
+					$query = new WP_Query( $queryArgs );
+
+					$out = '';
+					while ( $query->have_posts() ) {
+						$query->the_post();
+						$out .= self::tick_html( get_the_time( 'd.m.Y H.i' ), get_the_title(), get_the_content() );
+					}
+					$res[] = array(
+						's' => $slug,
+						'h' => $out,
+						't' => time(),
+					);
 				}
 			}
+			// Echo JSON encoded result set.
+			echo json_encode( $res );
 		}
 
 		exit;
-
-		//		if ( $slug ) {
-		//			// get new ticks from database
-		//			$args = array(
-		//				'post_type'      => 'wplt_tick',
-		//				'posts_per_page' => '-1',
-		//				'tax_query'      => array(
-		//					array(
-		//						'taxonomy' => 'wplt_ticker',
-		//						'field'    => 'slug',
-		//						'terms'    => $slug
-		//					)
-		//				)
-		//			);
-		//
-		//			$wp_query = new WP_Query( $args );
-		//			$output   = '';
-		//
-		//			while ( $wp_query->have_posts() ) {
-		//				$wp_query->the_post();
-		//				$output .= '<li class="wplt2-tick">'
-		//				           . '<p><span class="wplt2-tick_time">' . get_the_time( 'd.m.Y H.i' ) . '</span>'
-		//				           . '<span class="wplt2-tick-title">' . get_the_title() . '</span></p>'
-		//				           . '<p class="wplt2-tick-content">' . get_the_content() . '</p></li>';
-		//			}
-		//
-		//			// Echo success response
-		//			echo $output;
-		//		}
-		//		die();
 	}
 
 	/**
@@ -336,4 +330,18 @@ class WPLiveticker2 {
 			'reset_settings' => 0,
 		);
 	}
+
+	/**
+	 * Generate HTML code for a tick element.
+	 *
+	 * @param string $time    Tick time (readable).
+	 * @param string $title   Tick title.
+	 * @param string $content Tick content.
+	 */
+	private static function tick_html( $time, $title, $content ) {
+		return '<li class="wplt2-tick">'
+		       . '<p><span class="wplt2-tick_time">' . esc_html( $time ) . '</span>'
+		       . '<span class="wplt2-tick-title">' . esc_html( $title ) . '</span></p>'
+		       . '<p class="wplt2-tick-content">' . $content . '</p></li>';
+	}
 }

styles/wp-liveticker2.css

@@ -1,58 +1,58 @@
-ul.wplt2_ticker {
+ul.wplt2-ticker {
 	list-style-type: none;
 }
 
-li.wplt2_tick {
+li.wplt2-tick {
 	background-color: #F5F5F5;
 	margin: 0.1em;
 	padding: 0.1em 0.3em;
 }
 
-li.wplt2_tick p {
+li.wplt2-tick p {
 	margin: 0.3em;
 }
 
-span.wplt2_tick_time {
+span.wplt2-tick-time {
 	color: #002C58;
 	font-size: 0.7em;
 	font-style: italic;
 }
 
-span.wplt2_tick_title {
+span.wplt2-tick-title {
 	color: #002C58;
 	font-weight: bold;
 	margin-left: 0.5em;
 }
 
-p.wplt2_tick_content {
+p.wplt2-tick-content {
 	margin-top: -0.7em;
 	text-indent: 0.5em;
 }
 
-ul.wplt_2widget {
+ul.wplt2-widget {
 	list-style-type: none;
 	margin-top: -0.5em;
 }
 
-ul.wplt2_widget li {
+ul.wplt2-widget li {
 	text-align: left;
 }
 
-span.wplt2_widget_time {
+span.wplt2-widget-time {
 	font-size: 0.7em;
 	font-style: italic;
 }
 
-span.wplt2_widget_content {
+span.wplt2-widget-content {
 	color: #002C58;
 	text-indent: 0.2em;
 }
 
-span.wplt2_widget_content_new {
+span.wplt2-widget-content-new {
 	color: #800000;
 	text-indent: 0.2em;
 }
 
-p.wplt2_widget_link {
+p.wplt2-widget-link {
 	text-align: right;
 }