Merge pull request #172 from linchpin/release/v1.3.0

Release/v1.3.0

CHANGELOG.md

@@ -1,5 +1,19 @@
 # Changelog #
 
+## 1.3.0 ##
+* Added - REST endpoint for saving settings changes (preparation for new UI in future versions)
+* Added - Settings now utilize ajax/REST for updating settings
+* Added - New Feature. You can now choose to display the title of your Courier Notice for all Styles of notices.
+* Added - Added some FAQs to the readme.txt
+* Added - FAQ.md that is updated and generated from the readme.txt
+* Added - Some new screenshots were added so users can get a sense of what Courier Notices look like by default.
+* Updated - Popup/Modal notices now only show 1 at a time!
+* Fixed - Minor display issue for "Sub Tabs" within the Settings area of the WordPress admin
+* Fixed - Cleaned up spacing of Headers and Sub Titles within Settings to make things easier to read.
+* Fixed - Numerous nitpicky CSS things that you may or may not notice (margins, column spacing and more)
+* Fixed - When adding a new "type" of "Informational" Courier notices, the color pickers were not initializing properly
+* Fixed - Quality of life fix: Removed theme based "editor styles" on courier notices
+
 ## 1.2.7 ##
 * Updated - Window load for modal placement
 

FAQ.md

@@ -1 +1,9 @@
 # Frequently Asked Questions #
+
+## Does this plugin work with Full Page Caching or WordPress Object Caching? ##
+
+Yes, just be sure to enable the option to load Courier Notices using AJAX
+
+## I'm looking for a specific type of notice that courier doesn't have, what's next? ##
+
+The great thing is that Courier Notices is highly extendable and our team is adding new features constantly since release. You can always create a pull request in GitHub or add an issue. You can also take a look at the Pro version which also has some great features.

README.md

@@ -6,9 +6,9 @@ Add dismissible and non-dismissible notices throughout your website.
 
 Add dismissible and non-dismissible notices throughout your website.
 
-* Customize the colors and icons used by your Courier Notices
+* Customize the colors and icons used by your Courier Notices **no coding needed**
 * Add new "types" of notices as needed
-* Comes with a common library of useful notices
+* Comes with a common library of useful notices (Modal, Header, Footer)
 * Place courier notices within the header, footer or any where using CSS selectors (similar to selectors in jQuery)
 * Display popover/page take over modal style notices
 * Can be used in conjunction with other popular plugins
@@ -25,6 +25,11 @@ e.g.
 
 ## Screenshots ##
 
+1. List of "Types" of Informational Courier Notices within the WordPress admin
+2. Editing colors and icons of a Courier Notice
+3. Frontend display of a few Courier Notices, including dismissible notices.
+4. Frontend display of a modal Courier Notice.
+
 
 ## Shortcodes ##
 

assets/js/admin/edit.js

@@ -44,12 +44,51 @@ export default function edit() {
 			.on( 'click', '.copy-text', copy_text )
 			.on( 'change', '#courier_style', show_hide_type )
 			.on( 'change', '#courier_placement_display', change_placement )
-			.on( 'change', '#courier_style', modal_option_rules )
+			.on( 'change', '#courier_style', toggle_notice_style_options )
 			.on( 'focus', '#courier-shortcode', function () {
 				$( '#courier-shortcode' ).select();
 			} );
 	}
 
+	/**
+	 * Show or hide different options based on notice style
+	 *
+	 * @since 1.3.0
+	 */
+	function toggle_notice_style_options( event ) {
+		modal_option_rules( event );
+		toggle_show_hide_title_options( event );
+	}
+
+	/**
+	 * Show/Hde title controls.
+	 * Display is dependant on global settings per notice and individual Courier Notice meta
+	 *
+	 * @since 1.3.0
+	 *
+	 * @param event
+	 */
+	function toggle_show_hide_title_options( event ) {
+		let $this                = $( '#courier_style' ),
+			$selected_option     = $this.find('option:selected'),
+			val                  = $selected_option.val(),
+			label                = $selected_option.text(),
+			$show_hide_info      = $('#show-hide-info'),
+			$selected_style      = $('#selected-courier-notice-type'),
+			enabled_style_titles = $selected_style.attr('data-enable-title');
+
+		$selected_style.text( label );
+
+		$('.show-hide-toggle').removeClass('hide').hide();
+
+		if ( enabled_style_titles.indexOf( val ) === -1 ) {
+			$show_hide_info.hide();
+			$('#show-title-toggle').show();
+		} else {
+			$show_hide_info.show();
+			$('#hide-title-toggle').show();
+		}
+	}
 
 	/**
 	 * Show / Hide rules for Modals
@@ -70,7 +109,7 @@ export default function edit() {
 
 		let $this = $( '#courier_style' );
 
-		if ( $this.find('option:selected').val() === 'popup-modal' ) {
+		if ( 'popup-modal' === $this.find('option:selected').val() ) {
 
 			$('#courier_dismissible').prop( 'checked', 'checked' ).addClass('disabled').on( 'click', function( event ) {
 				event.stopImmediatePropagation();
@@ -155,7 +194,7 @@ export default function edit() {
 			notice_id = $this.attr('data-courier-notice-id'),
 			$notice   = $this.parents('.notice');
 
-		$.post(courier_notices_admin_data.reactivate_endpoint + notice_id + '/', {
+		$.post( courier_notices_admin_data.reactivate_endpoint + notice_id + '/', {
 			success: function (data) {
 				$notice.fadeOut();
 			}

assets/js/admin/settings.js

@@ -0,0 +1,144 @@
+import jQuery from 'jquery';
+
+let $ = jQuery;
+
+export default function settings() {
+
+	// Extend Serialize Array to also include checkboxes that are not selected
+	(function ($) {
+		let _base_serializeArray = $.fn.serializeArray;
+
+		/**
+		 * extract the field name based on key
+		 *
+		 * @param fieldName
+		 * @return {*}
+		 */
+		function cleanupFieldName( fieldName ) {
+
+			let matches = fieldName.match(/\[([a-zA-Z_]*)\]/);
+
+			if ( matches ) {
+				return matches[1];
+			}
+
+			return fieldName;
+		}
+
+		$.fn.serializeArray = function () {
+
+			let originalArray = _base_serializeArray.apply(this);
+			let dataCleanup   = {};
+
+			$.each( this.find("input"), function (i, element) {
+
+				if ( "checkbox" === element.type || "radio" === element.type ) {
+					element.checked
+						? originalArray[i].value = true
+						: originalArray.splice( i, 0, { name: element.name, value: false })
+				}
+
+				let fieldName = cleanupFieldName( element.name );
+
+				if ( dataCleanup[ fieldName ] !== undefined ) { // The field exists, if it's not an array create one
+					if ( ! Array.isArray( dataCleanup[ fieldName ] ) ) {
+						if ( false !== dataCleanup[ fieldName ] ) {
+							dataCleanup[ fieldName ] = [ dataCleanup[ fieldName ] ];
+						} else {
+							dataCleanup[ fieldName ] = [];
+						}
+					}
+
+					if ( false !== element.value && element.checked ) {
+						dataCleanup[ fieldName ].push( element.value );
+					}
+				} else {
+
+					if ( "checkbox" === element.type || "radio" === element.type ) {
+						if ( element.checked ) {
+							if ( false !== element.value ) {
+								dataCleanup[ fieldName ] = element.value;
+							} else {
+								dataCleanup[ fieldName ] = false;
+							}
+						} else {
+							dataCleanup[ fieldName ] = false;
+						}
+					} else {
+						dataCleanup[ fieldName ] = element.value;
+					}
+				}
+			});
+
+			for( const field in dataCleanup ) {
+				if ( typeof dataCleanup[field] !== 'object' ) {
+					continue;
+				}
+
+				if ( 0 === dataCleanup[field].length ) {
+					dataCleanup[field] = false;
+				}
+			}
+
+			return dataCleanup;
+		};
+	})(jQuery);
+
+    setup_forms();
+
+	/**
+	 * Convert our form data to a json object
+	 *
+	 * @param form
+	 * @return {{}}
+	 */
+	function formDataToJSON( form ) {
+		let formData = $(form).serializeArray();
+
+		return formData;
+	}
+
+    /**
+     * Initialize our dismiss
+     * Add our events
+	 *
+	 * @since 1.0
+     */
+    function setup_forms() {
+
+    	let $settings_form = $( '.courier-notices-settings-form' );
+
+		$settings_form.find( '#submit' ).on('click', function(event ) {
+			event.preventDefault();
+
+			$(this).attr({
+				'disabled':'disabled',
+				'value' : 'Saving',
+			})
+			.parents('form').submit();
+		});
+
+		$settings_form.on( 'submit', function(event) {
+			event.preventDefault();
+			event.stopImmediatePropagation();
+
+			let $form = $(this);
+			let formData = formDataToJSON(this);
+				formData['settings_key'] = formData['option_page'];
+				formData['method'] = 'POST';
+				formData._wpnonce = courier_notices_admin_data.settings_nonce;
+			$.ajax( {
+				'url' :	courier_notices_admin_data.settings_endpoint,
+				'beforeSend' : function ( xhr ) {
+					xhr.setRequestHeader( 'X-WP-Nonce', formData._wpnonce );
+				},
+				'method' : 'POST',
+				'data' : formData,
+			} ).done(function ( response ) {
+				$settings_form.find( '#submit' ).attr({
+					'value' : 'Save Changes',
+				}).removeAttr('disabled');
+			});
+		} );
+    }
+}

assets/js/admin/types.js

@@ -163,7 +163,7 @@ export default function types() {
 	function cancelAddCourierNoticeType(event) {
 		event.preventDefault();
 
-		var $target = $('#courier-notice-type-new');
+		let $target = $('#courier-notice-type-new');
 
 		$target.fadeOut('fast').promise().done(function () {
 			$('#add-courier-notice-type').removeAttr('disabled').removeClass('disabled');
@@ -192,7 +192,7 @@ export default function types() {
 		var input = $.extend(true, options, inputTemplate);
 
 		displayNewCourierNoticeTypeTemplate(input);
-		// }
+				// }
 	}
 
 	/**
@@ -338,8 +338,12 @@ export default function types() {
 	 */
 	function displayNewCourierNoticeTypeTemplate(item) {
 
-		var $noticeRow = $( courierNoticeTypeTemplate.map( render(item)).join('') );
-		$('table.courier_notice_page_courier tbody').append( $( $noticeRow ) );
+		let $noticeRow = $( courierNoticeTypeTemplate.map( render(item)).join('') );
+			$noticeRow = $( $noticeRow );
+
+		$('table.courier_notice_page_courier tbody').append( $noticeRow );
+
+		setupTypeEditing( $noticeRow );
 	}
 
 	/**
@@ -372,7 +376,7 @@ export default function types() {
 				$target.fadeOut('fast').promise().done(function () {
 					$('#add-courier-notice-type').removeAttr('disabled').removeClass('disabled');
 
-					for (var fragment in response.fragments) {
+					for ( const fragment in response.fragments ) {
 						$(fragment).html(response.fragments[fragment]);
 					}
 				});
@@ -412,7 +416,7 @@ export default function types() {
 			if ( response && response.fragments ) {
 				$target.fadeOut( 'fast' ).promise().done(
 					function() {
-						for ( let fragment in response.fragments) {
+						for ( let fragment in response.fragments ) {
 							$( fragment ).html( response.fragments[ fragment ] );
 						}
 					}

assets/js/courier-notices-admin.js

@@ -4,10 +4,12 @@ import welcome from './admin/welcome';
 import types from './admin/types';
 import edit from './admin/edit';
 import list from './admin/list';
+import settings from './admin/settings';
 import notifications from "./admin/notifications";
 
 jQuery( function() {
     core();
+    settings();
     edit();
     list();
     welcome();

assets/js/frontend/cookie.js

@@ -60,9 +60,9 @@ const keys = () => {
 };
 
 const clear = ( sPath, sDomain ) => {
-	var aKeys = this.keys();
+	let aKeys = this.keys();
 
-	for (var nLen = aKeys.length, nIdx = 0; nIdx < nLen; nIdx++) {
+	for (let nLen = aKeys.length, nIdx = 0; nIdx < nLen; nIdx++) {
 		this.removeItem( aKeys[nIdx], sPath, sDomain );
 	}
 };

assets/js/frontend/core.js

@@ -77,8 +77,14 @@ export default function core() {
 								$( '.courier-notices[data-courier-placement="' + settings.placement + '"]' )
 									.append( $notice );
 
-								$notice.slideDown( 'fast' );
+								$notice.slideDown( 'fast', 'swing', function() {
+									const event = new CustomEvent( 'courierNoticeDisplayed', { detail: index });
+
+									document.dispatchEvent(event);
+								});
 							} );
+
+
 						}
 					} );
 

assets/js/frontend/dismiss.js

@@ -1,5 +1,6 @@
 import jQuery from 'jquery';
 import { getItem, setItem } from './cookie';
+import {displayModal} from './modal';
 
 let $ = jQuery;
 
@@ -15,7 +16,6 @@ export default function dismiss() {
 	 * Add our events
 	 */
 	function init () {
-
 		$body.on( 'click', '.courier-close, .trigger-close', closeClick );
 	}
 
@@ -80,8 +80,13 @@ export default function dismiss() {
 	 * @param notice_id
 	 */
 	function hideNotice( notice_id ) {
-		$( ".courier_notice[data-courier-notice-id='" + notice_id + "']" ).fadeOut();
-		$( '.courier-modal-overlay' ).hide();
+		$( ".courier_notice[data-courier-notice-id='" + notice_id + "']" ).fadeOut( 500, function() {
+			if ( 0 === window.courier_notices_modal_notices.length ) {
+				$( '.courier-modal-overlay' ).addClass('hide').hide();
+			} else {
+				displayModal(0);
+			}
+		});
 
 		setCookie( notice_id );
 	}