Hours of Operation Widget #22

EvanHerman · 2016-12-13T18:49:47Z

Creating an hours of operation widget.

…between open and close times.

jonathanbardo · 2016-12-13T21:33:29Z

assets/css/admin.css

+/**
+ * Hours of Operation Widget
+ */
+.wphoow-widget .form div {


@EvanHerman Let's use the wpcw prefix for consistency

jonathanbardo · 2016-12-13T21:34:10Z

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


@EvanHerman Don't increment the version number until we decide to release the plugin.

@jbardo I think the version was incremented because we tagged the previous release when we bumped the tested up to version to 4.7.

@EvanHerman That's weird, it shouldn't show off as a change then. Okay moving on!

@jonathanbardo I think the issue was that the version was bumped in the master branch, but the develop branch versions didn't get bumped (that was the only difference between the branches) - so I just pulled what we had on master and started working off that so everything was in sync moving forward.

jonathanbardo · 2016-12-13T21:34:34Z

includes/class-base-widget.php

+
+		$field['name'] = str_replace( 'value', strtolower( $day ), $field['name'] );
+
+		$field['disabled'] = ( $hours['not_open'] ) ? true : false;


@EvanHerman No need for the parenthesis here.

jonathanbardo · 2016-12-13T21:35:20Z

includes/class-base-widget.php

+	 */
+	protected function render_day_input( $field, $day, array $hours ) {
+
+		$field['name'] = str_replace( 'value', strtolower( $day ), $field['name'] );


@EvanHerman I think you can align the equal sign of those 2 assignation since they deal with fields elements.

jonathanbardo · 2016-12-13T21:37:37Z

includes/class-base-widget.php

+
+		$disabled_field = $field['disabled'] ? ' disabled="disabled"' : '';
+
+		echo '<select name="' . esc_attr( $field['name'] . '[open]' ) . '"' . $disabled_field . '>';


@EvanHerman Seems like there is a lot of echo in this block. It might look nicer if we close the php tag and use html directly.

jonathanbardo · 2016-12-13T21:43:52Z

@EvanHerman I feel we might be too restrictive. What about we propose a free text alternative on every field (that way if they close for lunch they can manually add the instruction)?

@fjarrett Any thoughts?

frankiejarrett · 2016-12-13T21:47:11Z

@jonathanbardo I see what you mean, but we need to use micro-formats which will be difficult to display semantically in a machine-readable way without a day/open/close data pattern to work with. https://schema.org/openingHours

jonathanbardo · 2016-12-13T21:51:48Z

@fjarrett I agree, I wouldn't make it default for sure but I want to be as inclusive as we can. The use case we solved won't work for most European countries so I'm thinking we should at least have the possibility of free text. Also, I think we should add an extra textarea at the end for further details (for example: closed during holidays and 1 month in summer etc).

frankiejarrett · 2016-12-13T21:58:35Z

@jonathanbardo Yeah that's a fantastic idea!

…s all days, tweaks per @jbardos comments.

EvanHerman · 2016-12-13T22:22:56Z

@jonathanbardo How do you propose we add the text field for free text? Should it be visible at all times, and just override the open - close text if present?

Also, why wouldn't this scale for most European countries?

jonathanbardo · 2016-12-13T22:25:05Z

@EvanHerman I know a lot of European countries where they close during lunch time or are totally closed in August for example. With the current implementation it would be impossible for them to express that.

As for the free text I would say we should add a toggle to add more details and hide it by default.

EvanHerman · 2016-12-13T22:26:43Z

@jonathanbardo Right, right. I forgot about the lunch breaks in other countries - good catch, didn't cross my mind. 👍

I will get working on the micro formats, free text and additional info fields!

jonathanbardo · 2016-12-14T15:47:00Z

includes/class-hours.php

+				'sanitizer'     => function( $value ) { return current_user_can( 'unfiltered_html' ) ? $value : wp_kses_post( stripslashes( $value ) ); },
+				'escaper'       => function( $value ) { return nl2br( apply_filters( 'widget_text', $value ) ); },
+				'form_callback' => 'render_form_textarea',
+				'description' => __( 'Enter additional information about your store.', 'contact-widgets' ),


@EvanHerman I think Enter additional information about your business. might be more universal.

jonathanbardo · 2016-12-14T15:49:27Z

@EvanHerman Travis seems to be failing https://travis-ci.org/godaddy/wp-contact-widgets/jobs/183766078. store_closed var is never used in admin.js line 188

EvanHerman · 2016-12-14T16:14:06Z

@jonathanbardo The acceptance tests should be passing now. I'll still need to write some acceptance tests for the new Hours of Operation widget when all of the features are built out.

EvanHerman · 2016-12-14T23:10:00Z

includes/class-base-widget.php

+		$hidden_text_field    = ( ! $hours['custom_text_checkbox'] ) ? ' style="display:none;"' : '';
+		$custom_text_field    = '<input type="text" name="' . $field['name'] . '[custom_text]" id="' . $field['name'] . '[custom_text]" class="widefat custom_text_field" value="' . $hours['custom_text'] . '"' . $hidden_text_field . '/>';
+		$closed_checkbox      = '<input name="' . $field['name'] . '[not_open]" id="' . $field['name'] . '[not_open]" class="js_wpcw_closed_checkbox" type="checkbox" value="1" ' . $this->checked( $hours['not_open'], true ) . '><label for="' . $field['name'] . '[not_open]" class="js_wpcw_closed_checkbox"><small>' . esc_html__( 'Closed', 'contact-widgets' ) . '</small></label>';
+


@jonathanbardo This section is a bit verbose. Not sure there is a better way to handle it without introducing additional code, which I didn't want to introduce additional bloat.

EvanHerman · 2016-12-14T23:10:51Z

includes/class-base-widget.php

+		$field['name'] = str_replace( 'value', strtolower( $day ), $field['name'] );
+
+		$disabled_field = $field['disabled'] ? ' disabled="disabled"' : '';
+		$hidden_field   = $hours['custom_text_checkbox'] ? ' style="display:none;"' : '';


@jonathanbardo Looking back on this it may be best to utilize classes for hidden. I'm not a fan of inline styles. Thoughts?

EvanHerman · 2016-12-14T23:12:00Z

includes/class-base-widget.php

+	 */
+	protected function get_half_hour_time_array() {
+
+		$half_hour_steps = range( 0, 47 * 1800, 1800 );


@jonathanbardo @fjarrett What do you think about introducing a filter here to allow users to set increments to whole hours, 15 mins, 10 mins etc.? Do you think that would be beneficial?

EvanHerman · 2016-12-14T23:13:34Z

includes/class-hours.php

+					$hours = $store_hours['not_open'] ? __( 'Closed', 'contact-widgets' ) : $store_hours['open'] . apply_filters( 'wpcw_hours_seperator', ' - ' ) . $store_hours['closed'];
+					$class = $store_hours['not_open'] ? 'closed' : 'open';
+
+					if ( $store_hours['custom_text_checkbox'] ) {


It's worth noting here that when a user has a 'custom text' specified the micro formats are not added to the hours of operation item.

EvanHerman · 2016-12-14T23:52:07Z

I can't quite figure out why the acceptance tests are failing either.
https://travis-ci.org/godaddy/wp-contact-widgets/builds/184093233

I can see why in the log, but it looks like it should be passing.

jonathanbardo · 2016-12-15T14:34:24Z

@EvanHerman Sometimes Selenium is acting weird. When only 1 builds fails I normally try to restart that particular build. I will find some time to look into why it's acting so weird in travis.

frankiejarrett · 2016-12-29T18:32:03Z

assets/js/wp-hours-widget.js

+
+			if ( time_blocks.length ) {
+
+				for ( i = 0; i < time_blocks.length; i++ ) {


@EvanHerman I'm about to change the get_schedule() method output slightly to use a key/value pair for open/close, so this loop will need to change to:

$.each( time_blocks, function( open, close ) {

@fjarrett 👍 No problem. I can adjust after the change.

frankiejarrett · 2016-12-30T15:25:36Z

assets/js/admin.js

+			    $close_select = $parent.find( '.time-block-close' );
+
+			$close_select.children().show();
+			$close_select.find( 'option[value="' + time + '"]' ).prevAll().andSelf().hide();


@EvanHerman .andSelf() is deprecated and replaced by .addBack()

cf. https://api.jquery.com/andself/

frankiejarrett · 2016-12-31T08:00:22Z

includes/class-base-widget.php

+
+		global $_wp_admin_css_colors;
+
+		$active_scheme = $_wp_admin_css_colors[ get_user_option( 'admin_color' ) ];


@EvanHerman Bro!!! Nice one. I didn't know this was possible. 💯

frankiejarrett · 2016-12-31T17:03:37Z

includes/class-base-widget.php

@@ -518,12 +610,33 @@ public function enqueue_scripts() {
 		$suffix = SCRIPT_DEBUG ? '' : '.min';

 		wp_enqueue_style( 'font-awesome', '//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css', [], '4.5.0' );
-		wp_enqueue_style( 'wpcw-admin', \Contact_Widgets::$assets_url . "css/admin{$suffix}.css", [ 'font-awesome' ], Plugin::$version );
-		wp_enqueue_script( 'wpcw-admin', \Contact_Widgets::$assets_url . "js/admin{$suffix}.js", [ 'jquery' ], Plugin::$version, true );
+		wp_enqueue_style( 'jquery-timepicker', Plugin::$assets_url . "css/jquery.timepicker{$suffix}.css", [ 'font-awesome' ], '1.11.9' );


@EvanHerman Since the timepicker is used exclusively by the hours widget, it shouldn't go in the base widget. Instead, we should utilize inheritance inside class-hours.php. Additionally, we should do the same for font-awesome and move it to class-social.php.

Another thing to try would be to add an arg to the enqueue_scripts() method that would allow localize script data to be passed to from every inherited method back to the parent base.

The code below is untested, but it's an example of what I mean:

/* class-hours.php */ public function enqueue_scripts( $localize_script_data = [] ) { $localize_script_data = [ 'time_format' => get_option( 'time_format' ), ]; parent::enqueue_scripts( $localize_script_data ); // Stuff here the hours widget needs to enqueue, like jquery-timepicker }

/* class-base-widget.php */ public function enqueue_scripts( $localize_script_data = [] ) { // Stuff here every widget needs to enqueue, like wpcw-admin static $data = []; // Defaults here $data = array_merge_recursive( $data, $localize_script_data ); if ( $data ) { wp_localize_script( 'wpcw-admin', 'wpcw_admin', $data ); } }

Well, since every widget shares the same JS file that expects the wpcw_admin global to always contain certain values, maybe the localize script data thing isn't necessary after all.

But the general idea of using inheritance for enqueuing other scripts and styles like jquery-timepicker and font-awesome still applies.

…some version

EvanHerman · 2017-01-03T17:36:17Z

@fjarrett I believe in the latest commit I incorporated what you were referencing.

I also went ahead and bumped font awesome up to 4.7.0, since 4.5.0 is somewhat outdated. I added the version number as a class property so we can easily bump it in future. I know Font awesome 5 is in the works.

Hours of operation widget.

0d4b47e

EvanHerman added the enhancement label Dec 13, 2016

EvanHerman self-assigned this Dec 13, 2016

EvanHerman requested review from frankiejarrett and jonathanbardo December 13, 2016 18:49

EvanHerman added 2 commits December 13, 2016 14:03

Refactor.

161f710

Add wpcw_hours_seperator filter to allow users to adjust the divider …

2b6d398

…between open and close times.

jonathanbardo requested changes Dec 13, 2016

View reviewed changes

Refactors, tweaks, new styles, adjusted script, ability to copy acros…

b61adc7

…s all days, tweaks per @jbardos comments.

EvanHerman added 3 commits December 13, 2016 18:07

Add microformat to open/close times.

f4f8b2f

Fix array formatting.

19e194a

Add additional_content field below the hours of operation widget.

85be62d

jonathanbardo reviewed Dec 14, 2016

View reviewed changes

EvanHerman added 2 commits December 14, 2016 10:50

Update additional_content label, remove store_closed from .js

9e45c18

Repair js_wpcw_apply_hours_to_all dashicon

9d89524

First round of 'custom text' section.

ae5944c

EvanHerman commented Dec 14, 2016

View reviewed changes

EvanHerman added 2 commits December 14, 2016 18:19

Prevent form from overflowing and displaying a scroll bar.

d078738

Refactor overflow issue.

0b4f41a

Refactor.

1781a3f

frankiejarrett reviewed Dec 29, 2016

View reviewed changes

frankiejarrett and others added 7 commits December 29, 2016 12:36

Abstract datetime logic, use key/value pairs for open times

8b064f1

Refactor our loop for open business label - front end of site.

1bfbc9f

Update open/closed sign based on end user locale.

fa0cab0

Remove rogue space.

848102b

Update js files for acceptance tests

4240312

Add globals to the top of js file for localized variable

59ca932

update spacing in globals declaration

b674ad0

frankiejarrett reviewed Dec 30, 2016

View reviewed changes

EvanHerman and others added 13 commits December 30, 2016 14:07

Update time selector fields.

9ade607

Style, initialization tweaks to timepicker

33aa7f0

Support multiple instances of the hours widget with JS

f49522a

Rename hours JS file

13ce03b

Update timepicker time format support - inherit from site settings.

17b99b6

Change timeSelect => timePicker

2b53502

Unify timepicker background with admin color scheme.

ddd5710

Make date ranges translatable and RTL compat

c7f36f9

Merge in develop

ee8eed6

Tweak CSS and open string

06d70b7

Move assets_url property to Plugin class

9883db7

update placeholders

5d5c4a9

Initialize time selection fields on initial widget add.

e3bb055

frankiejarrett reviewed Dec 31, 2016

View reviewed changes

Add inheritance, move enqueues into respective classes, bump font awe…

0ae298f

…some version

frankiejarrett mentioned this pull request Jan 10, 2017

Upgrade font awesome to 4.7.0 #34

Closed

frankiejarrett added this to the 2.0.0 milestone Feb 20, 2017

frankiejarrett mentioned this pull request Feb 25, 2017

Port over paint kit hero widget godaddy-wordpress/primer#170

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Hours of Operation Widget #22

Hours of Operation Widget #22

EvanHerman commented Dec 13, 2016

jonathanbardo Dec 13, 2016

jonathanbardo Dec 13, 2016

EvanHerman Dec 13, 2016

jonathanbardo Dec 13, 2016

EvanHerman Dec 13, 2016 •

edited

Loading

jonathanbardo Dec 13, 2016

jonathanbardo Dec 13, 2016

jonathanbardo Dec 13, 2016

jonathanbardo commented Dec 13, 2016

frankiejarrett commented Dec 13, 2016 •

edited

Loading

jonathanbardo commented Dec 13, 2016

frankiejarrett commented Dec 13, 2016

EvanHerman commented Dec 13, 2016 •

edited

Loading

jonathanbardo commented Dec 13, 2016

EvanHerman commented Dec 13, 2016 •

edited

Loading

jonathanbardo Dec 14, 2016

jonathanbardo commented Dec 14, 2016

EvanHerman commented Dec 14, 2016

EvanHerman Dec 14, 2016

EvanHerman Dec 14, 2016

EvanHerman Dec 14, 2016

EvanHerman Dec 14, 2016

EvanHerman commented Dec 14, 2016 •

edited

Loading

jonathanbardo commented Dec 15, 2016

frankiejarrett Dec 29, 2016

EvanHerman Dec 29, 2016

frankiejarrett Dec 30, 2016

frankiejarrett Dec 31, 2016

frankiejarrett Dec 31, 2016 •

edited

Loading

frankiejarrett Dec 31, 2016

EvanHerman commented Jan 3, 2017 •

edited

Loading


		$field['name'] = str_replace( 'value', strtolower( $day ), $field['name'] );

		$field['disabled'] = ( $hours['not_open'] ) ? true : false;


		$disabled_field = $field['disabled'] ? ' disabled="disabled"' : '';

		echo '<select name="' . esc_attr( $field['name'] . '[open]' ) . '"' . $disabled_field . '>';


		if ( time_blocks.length ) {

		for ( i = 0; i < time_blocks.length; i++ ) {


		global $_wp_admin_css_colors;

		$active_scheme = $_wp_admin_css_colors[ get_user_option( 'admin_color' ) ];

Hours of Operation Widget #22

Are you sure you want to change the base?

Hours of Operation Widget #22

Conversation

EvanHerman commented Dec 13, 2016

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

EvanHerman Dec 13, 2016 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

jonathanbardo commented Dec 13, 2016

frankiejarrett commented Dec 13, 2016 • edited Loading

jonathanbardo commented Dec 13, 2016

frankiejarrett commented Dec 13, 2016

EvanHerman commented Dec 13, 2016 • edited Loading

jonathanbardo commented Dec 13, 2016

EvanHerman commented Dec 13, 2016 • edited Loading

Choose a reason for hiding this comment

jonathanbardo commented Dec 14, 2016

EvanHerman commented Dec 14, 2016

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

EvanHerman commented Dec 14, 2016 • edited Loading

jonathanbardo commented Dec 15, 2016

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

frankiejarrett Dec 31, 2016 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

EvanHerman commented Jan 3, 2017 • edited Loading

EvanHerman Dec 13, 2016 •

edited

Loading

frankiejarrett commented Dec 13, 2016 •

edited

Loading

EvanHerman commented Dec 13, 2016 •

edited

Loading

EvanHerman commented Dec 13, 2016 •

edited

Loading

EvanHerman commented Dec 14, 2016 •

edited

Loading

frankiejarrett Dec 31, 2016 •

edited

Loading

EvanHerman commented Jan 3, 2017 •

edited

Loading