Hours of Operation Widget

assets/css/admin.css

@@ -93,3 +93,50 @@
 .wpcw-widget-social .icons a.inactive:not(:hover) {
 	color: #ccc;
 }
+
+/**
+ * Hours of Operation Widget
+ */
+.wpcw-widget-hours .form div {
+	display: inline-block;
+	width: 100%;
+	margin-bottom: 8px;
+}
+
+	.wpcw-widget-hours .form label + div {
+		margin-top: 8px;
+	}
+
+	.wpcw-widget-hours .additional_content .wpcw-widget-sortable-handle {
+		display: none;
+	}
+
+	.wpcw-widget-hours .form.ui-sortable .js_wpcw_apply_hours_to_all span.dashicons {
+		position: relative;
+		color: inherit;
+		text-decoration: inherit;
+		font-size: 12px;
+		margin-left: -5px;
+	}
+
+	.wpcw-widget-hours .day-checkbox-toggle {
+		float: right;
+	}
+
+.wpcw-widget-hours input[type="checkbox"] {
+	transform: scale( 0.75 );
+	margin-right: 2px;
+}
+
+.wpcw-widget-hours select {
+	width: 49%;
+	min-width: auto;
+	float: left;
+	margin-bottom: 8px;
+}
+
+.wpcw-widget-hours .form div p {
+	display: inline-block;
+	width: 100%;
+	margin: 0;
+}

assets/js/admin.js

@@ -37,7 +37,7 @@
 
 	function start_sortable() {
 
-		var $contact_form = $( '.wpcw-widget .form' );
+		var $contact_form = $( '.wpcw-widget .form' ).not( '.wpcw-widget-hours .form' );
 
 		$contact_form.sortable( {
 			items : '> *:not(.not-sortable)',
@@ -166,6 +166,50 @@
 		// Social
 		$( document ).on( 'click', '.wpcw-widget-social .icons a', socialField.init );
 
+		// Hours of Operation select field toggle
+		$( 'body' ).on( 'change', '.js_wphoow_closed_checkbox', function( e ) {
+
+			var select_fields = $( e.currentTarget ).parents( '.day-container' ).find( 'select' );
+
+			if ( $( this ).is( ':checked' ) ) {
+
+				select_fields.attr( 'disabled', 'disabled' );
+
+				return;
+
+			}
+
+			select_fields.removeAttr( 'disabled' );
+
+		} );
+
+		$( 'body' ).on( 'click', '.js_wpcw_apply_hours_to_all', function( e ) {
+
+			var store_closed = false;
+
+			if ( $( this ).next().is( ':checked' ) ) {
+
+				$( '.wpcw-widget-hours .day-container' ).find( 'select' ).attr( 'disabled', 'disabled' );
+				$( '.wpcw-widget-hours .day-checkbox-toggle' ).find( 'input[type="checkbox"]' ).prop( 'checked', true );
+				e.preventDefault();
+
+				return;
+
+			}
+
+			var first_container = $( this ).parents( '.day-container' ),
+			    open   = first_container.find( 'select:first-child' ).val(),
+			    closed = first_container.find( 'select:nth-child(2)' ).val();
+
+			$( '.wpcw-widget-hours .day-checkbox-toggle' ).find( 'input[type="checkbox"]' ).prop( 'checked', false );
+			$( '.wpcw-widget-hours .day-container' ).find( 'select' ).removeAttr( 'disabled' );
+			$( '.wpcw-widget-hours .day-container' ).find( 'select:first-child' ).val( open );
+			$( '.wpcw-widget-hours .day-container' ).find( 'select:nth-child(2)' ).val( closed );
+
+			e.preventDefault();
+
+		} );
+
 		// Sortable
 		$( document ).on( 'wpcw.change', start_sortable );
 		$( document ).on( 'click.widgets-toggle', start_sortable );

contact-widgets.php

@@ -2,7 +2,7 @@
 /**
  * Plugin Name: Contact Widgets
  * Description: Beautifully display social media and contact information on your website with these simple widgets.
- * Version: 1.3.3
+ * Version: 1.3.4
  * Author: GoDaddy
  * Author URI: https://godaddy.com
  * Text Domain: contact-widgets

includes/class-base-widget.php

@@ -396,10 +396,120 @@ protected function render_form_textarea( array $field ) {
 
 	}
 
+	/**
+	 * Render the hours container and select fields
+	 *
+	 * @param  array $field Field data.
+	 * @param  array $day   The current day in the iteration.
+	 * @param  array $hours The array of times.
+	 *
+	 * @since NEXT
+	 *
+	 * @return mixed
+	 */
+	protected function render_day_input( $field, $day, array $hours ) {
+
+		$field['name']     = str_replace( 'value', strtolower( $day ), $field['name'] );
+		$field['disabled'] = $hours['not_open'] ? true : false;
+
+		$apply_to_all_toggle = key( $field['days'] ) === $day ? '<a href="#" class="js_wpcw_apply_hours_to_all">' . sprintf( _x( 'Apply to All %s', 'Dashicon Down Arrow', 'contact-widgets' ), '<span class="dashicons dashicons-arrow-down-alt"></span>' ) . '</a>' : '';
+
+		printf(
+			'<div class="day-container">%1$s<p>%2$s</p></div>',
+			'<strong>' . esc_html( ucwords( $day ) ) . '<span class="day-checkbox-toggle">' . $apply_to_all_toggle . '<input name="' . $field['name'] . '[not_open]" id="' . $field['name'] . '[not_open]" class="js_wphoow_closed_checkbox" type="checkbox" value="1" ' . $this->checked( $hours['not_open'], true ) . '><label for="' . $field['name'] . '[not_open]" class="js_wphoow_closed_checkbox"><small>' . esc_html__( 'Closed', 'contact-widgets' ) . '</small></label></strong></span>',
+			$this->render_hours_selection( $field, sanitize_title( $day ), $hours )
+		);
+
+	}
+
+	/**
+	 * Render the 'Hours' select fields
+	 *
+	 * @param array $field Field data
+	 * @param array $day   The current day in the iteration.
+	 * @param array $hours The array of times.
+	 *
+	 * @since NEXT
+	 *
+	 * @return mixed
+	 */
+	protected function render_hours_selection( $field, $day, $hours ) {
+
+		ob_start();
+
+		$times = $this->get_half_hour_time_array();
+
+		$field['name'] = str_replace( 'value', strtolower( $day ), $field['name'] );
+
+		$disabled_field = $field['disabled'] ? ' disabled="disabled"' : '';
+
+		?>
+
+		<select name="<?php echo esc_attr( $field['name'] . '[open]' ); ?>" <?php echo $disabled_field; ?>>
+
+		<?php
+
+		foreach ( $times as $time ) {
+
+			?>
+
+			<option <?php selected( $hours['open'], $time ); ?>><?php echo esc_html( $time ); ?></option>
+
+			<?php
+
+		}
+
+		?>
+
+		</select>
+
+		<select name="<?php echo esc_attr( $field['name'] . '[closed]' ); ?>" <?php echo $disabled_field; ?>>
+
+		<?php
+
+		foreach ( $times as $time ) {
+
+			?>
+
+			<option <?php selected( $hours['closed'], $time ); ?>><?php echo esc_html( $time ); ?></option>
+
+			<?php
+
+		}
+
+		?>
+
+		</select>
+
+		<?php
+
+		return ob_get_clean();
+
+	}
+
+	/**
+	 * Generate an array of times in half hour increments
+	 *
+	 * @since NEXT
+	 *
+	 * @return array
+	 */
+	protected function get_half_hour_time_array() {
+
+		$half_hour_steps = range( 0, 47 * 1800, 1800 );
+
+		return array_map( function ( $time ) {
+
+			return date( get_option( 'time_format' ), $time );
+
+		}, $half_hour_steps );
+
+	}
+
 	/**
 	 * Close wrapper of form field
 	 *
-	 * @param array $field
+	 * @param array
 	 */
 	protected function after_form_field( array $field ) {