Merge pull request #47 from INN/9-expiration-date-picker

Revisions to the NPR API editor meta box

Author: benlk

assets/css/jquery-ui.css

@@ -0,0 +1,63 @@
+/**
+ * Styles for the NPR Story API meta box
+ */
+#ds_npr_document_meta ul ul {
+  margin-top: 6px;
+}
+#ds_npr_document_meta ul ul ul {
+  padding-left: 24px;
+}
+#nprone-expiry {
+  border-top: 1px solid #eee;
+  padding-top: 6px;
+}
+#nprone-expiry-form,
+#nprone-expiry-form select,
+#nprone-expiry-form input {
+  font-size: 12px;
+  padding-left: 0;
+  padding-right: 0;
+}
+#nprone-expiry-form .row {
+  clear: both;
+  margin-top: 6px;
+  line-height: 28px;
+}
+button.link-effect {
+  border: none;
+  color: #0073aa;
+  text-decoration: underline;
+}
+#nprone-expiry-month {
+  vertical-align: baseline;
+  margin: 0;
+}
+
+/*
+ * Minimal Datepicker styles
+ */
+#ui-datepicker-div {
+  background: #fff;
+  border: 1px solid #e5e5e5;
+  padding: 6px;
+  box-shadow: 0 3px 5px rgba(0,0,0,.2);
+}
+.ui-datepicker .ui-datepicker-header {
+  border: none;
+}
+.ui-datepicker-calendar .ui-state-default {
+  text-decoration: none;
+  background-color: transparent;
+}
+.ui-datepicker .ui-datepicker-current-day a {
+  border-color: #0073aa #006799 #006799;
+  background: #0085ba;
+  color: #fff;
+  font-weight: bold;
+}
+.ui-datepicker .ui-datepicker-today a {
+  background: #fff;
+  border: 1px solid #c5c5c5;
+  font-weight: bold;
+  color: #000;
+}

assets/css/meta-box.css

@@ -0,0 +1,92 @@
+/**
+ * NPR Story API meta box functions and features
+ */
+document.addEventListener('DOMContentLoaded', () => {
+	'use strict';
+	var $ = jQuery;
+
+	// contains the inputs
+	var $container = $( '#ds-npr-publish-actions' );
+
+	// initialize the form
+	$container.find( 'input' ).on( 'change', li_checking );
+
+	// Upon update, do the thing
+	li_checking.call( $container.find( '#send_to_api' ) );
+
+	/*
+	 * If a checkbox in an li gets unchecked, uncheck and disable its child li
+	 * If a checkbox in an li gets checked, enable its child li
+	 */
+	function li_checking( event ) {
+		var checked =  $( this ).prop('checked');
+		var $results = $( this ).closest( 'li' ).children( 'ul' ).children( 'li' ); // Only get the first level of list.
+		$results.each( function( element ) {
+			// Triggering the change event on the child does not work.
+			if ( checked ) {
+				var recurse = $( this ).children( 'label' ).children( 'input' ).prop( 'disabled', false );
+				li_checking.call( recurse );
+			} else {
+				recurse = $( this ).children( 'label' ).children( 'input' ).prop( 'disabled', true ).prop( 'checked', false );
+				li_checking.call( recurse );
+			}
+		});
+	}
+
+	// edit the time selector
+	$( '#nprone-expiry-edit' ).on( 'click', function( event ) {
+		event.preventDefault();
+		$( '#nprone-expiry-form' ).toggleClass( 'hidden' );
+		$( this ).toggleClass( 'hidden' );
+	});
+	// close the time selector
+	$( '#nprone-expiry-cancel' ).on( 'click', function( event ) {
+		event.preventDefault();
+		$( '#nprone-expiry-form' ).toggleClass( 'hidden' );
+		$( '#nprone-expiry-edit' ).toggleClass( 'hidden' );
+	});
+	// save the time selector
+	$( '#nprone-expiry-ok' ).on( 'click', function( event ) {
+		event.preventDefault();
+		$( '#nprone-expiry-form' ).toggleClass( 'hidden' );
+		$( '#nprone-expiry-edit' ).toggleClass( 'hidden' );
+
+		// but then it needs to update the displayed data in #nprone-expiry-display. How is it to do that?
+		// This needs to take:
+		// - the YYYY-MM-DD value of #nprone-expiry-datepicker
+		// - the HH:MM value of #nprone-expiry-hour
+		// and output a string in the format Apr 1, 2020 @ 09:01 / Nov 1, 2018 @ 23:59
+		var d = new Date();
+		var dateinput = $( '#nprone-expiry-datepicker' ).val().split('-');
+		var timeinput = $( '#nprone-expiry-hour' ).val().split(':');
+
+		d.setFullYear(dateinput[0]);
+		d.setMonth(dateinput[1] - 1); // because this is zero-indexed?
+		d.setDate(dateinput[2]);
+		d.setHours(timeinput[0]);
+		d.setMinutes(timeinput[1]);
+
+		var string = d.toLocaleString("en-us", { month: "short" })
+		           + " "
+		           + d.getDate()
+		           + ", "
+		           + d.getFullYear()
+		           + " @ "
+		           + d.getHours()
+		           + ":"
+		           + (d.getMinutes() < 10? '0' : '') + d.getMinutes();
+
+		$( '#nprone-expiry-display time' ).text( string );
+	});
+
+
+	// Activate the date picker, if and only if the browser doesn't have a native datepicker
+	// @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date#JavaScript
+	var test = document.createElement( 'input' );
+	test.type = 'date';
+	if ( test.type !== 'date' ) {
+		$( '#nprone-expiry-datepicker' ).attr('type', 'text').css('width', '8em').datepicker({
+			dateFormat: 'yy-mm-dd'
+		});
+	}
+});