add some nice emptiness messages

palasthotel · Dec 13, 2017 · 0b5f342 · 0b5f342
1 parent 025be38
commit 0b5f342
Show file tree

Hide file tree

Showing 3 changed files with 52 additions and 34 deletions.
diff --git a/classes/metabox.php b/classes/metabox.php
@@ -84,7 +84,8 @@ public function render( $post ) {
     	'postadded' => esc_html__( 'Post successfully added to postqueue.', Plugin::DOMAIN ),
     	'pleasechoose' => esc_html__( 'Please choose a postqueue!', Plugin::DOMAIN ),
     	'erroroccured' => esc_html__( 'An error occured while sending the request. Please try again later.', Plugin::DOMAIN ),
-    	'removepostfromthispostqueue' => esc_html__( 'Remove post from this postqueue.', Plugin::DOMAIN )
+    	'removepostfromthispostqueue' => esc_html__( 'Remove post from this postqueue.', Plugin::DOMAIN ),
+    	'notstoredyet' => esc_html__( 'This post is not saved in any postqueue yet. You can add it to one below.', Plugin::DOMAIN )
     ) );
 		$store = $this->store;
 		require $this->plugin->dir .'partials/postqueue-metabox.tpl.php';

diff --git a/js/postqueue-metabox.js b/js/postqueue-metabox.js
@@ -9,34 +9,9 @@
 	$(function() {
 
 		var $messages = $('.postqueue-metabox-wrapper').find('.messages');
+		postqueue_check_empty_list();
 
-		$('.postqueue-remove').on( 'click', function(e) {
-  		var $this = $(this);
-  		let $parent = $this.closest('.postqueue-metabox-postqueuelist-wrapper');
-  		$parent.addClass('is-loading');
-      let postid = $this.data('postid');
-      let queueid = $this.data('queueid');
-      let queuename = $this.data('queuename');
-  		let data = {
-  			'action': 'postqueue_remove_post',
-  			'postid': postid,
-  			'queueid': queueid
-  		};
-
-  		jQuery.post( ajaxurl, data, function(response) {
-  			if( response <= 0 ) {
-    			$messages.text(objectL10n.erroroccured);
-    			$messages.addClass('error');
-  			} else {
-    			$messages.text(objectL10n.postremoved);
-    			$messages.removeClass('error');
-    			postqueue_metabox_remove_listitem( queueid, queuename, postid );
-    			postqueue_metabox_add_selectoption( queueid, queuename, postid );
-  			}
-  			$parent.removeClass('is-loading');
-
-  		});
-    });
+		postqueue_add_remove_eventlisteners();
 
     $('.postqueue-add').on( 'click', function(e) {
       let $parent = $(this).closest('.postqueue-metabox-postqueueselect-wrapper');
@@ -63,6 +38,7 @@
       			$messages.removeClass('error');
       			postqueue_metabox_remove_selectoption( queueid, queuename, postid );
       			postqueue_metabox_add_listitem( queueid, queuename, postid );
+      			postqueue_check_empty_list();
     			}
     			$parent.removeClass('is-loading');
     		});
@@ -94,6 +70,7 @@
   function postqueue_metabox_add_listitem( queueid, queuename, postid ) {
     let $wrapper = $('.postqueue-metabox-wrapper').find('.postqueue-metabox-postqueuelist-wrapper');
     $wrapper.find('ul').append('<li>'+queuename+'<span class="dashicons dashicons-no postqueue-remove" data-queueid="'+queueid+'" data-postid="'+postid+'" title="'+objectL10n.removepostfromthispostqueue+'" data-queuename="'+queuename+'"></span></li>');
+    postqueue_add_remove_eventlisteners();
   }
   /*
    * helper function, removes listitem from metabox DOM
@@ -102,4 +79,48 @@
     let $wrapper = $('.postqueue-metabox-wrapper').find('.postqueue-metabox-postqueuelist-wrapper');
     $wrapper.find("[data-queueid='" + queueid + "']").closest('li').remove();
   }
+
+  /*
+   * helper function, checks if list is empty and prints a text if so
+   */
+  function postqueue_check_empty_list() {
+    let $wrapper = $('.postqueue-metabox-wrapper').find('.postqueue-metabox-postqueuelist-wrapper ul');
+    if( !$wrapper.html().trim() ) {
+      $wrapper.parent().append('<span class="postqueue-metabox-postqueuelist-emptyinfo">'+objectL10n.notstoredyet+'</span>');
+    } else {
+      $wrapper.parent().find('.postqueue-metabox-postqueuelist-emptyinfo').remove();
+    }
+  }
+
+  function postqueue_add_remove_eventlisteners() {
+    $('.postqueue-remove').on( 'click', function(e) {
+  		var $this = $(this);
+  		let $parent = $this.closest('.postqueue-metabox-postqueuelist-wrapper');
+  		$parent.addClass('is-loading');
+      let postid = $this.data('postid');
+      let queueid = $this.data('queueid');
+      let queuename = $this.data('queuename');
+  		let data = {
+  			'action': 'postqueue_remove_post',
+  			'postid': postid,
+  			'queueid': queueid
+  		};
+
+  		jQuery.post( ajaxurl, data, function(response) {
+  			if( response <= 0 ) {
+    			$messages.text(objectL10n.erroroccured);
+    			$messages.addClass('error');
+  			} else {
+    			$messages.text(objectL10n.postremoved);
+    			$messages.removeClass('error');
+    			postqueue_metabox_remove_listitem( queueid, queuename, postid );
+    			postqueue_metabox_add_selectoption( queueid, queuename, postid );
+    			postqueue_check_empty_list();
+  			}
+  			$parent.removeClass('is-loading');
+
+  		});
+    });
+  }
+
 })( jQuery );
diff --git a/partials/postqueue-metabox.tpl.php b/partials/postqueue-metabox.tpl.php
@@ -15,16 +15,12 @@
       $postqueues = $store->get_queues_for_post( get_the_ID() );
     ?>
     <h4><?php esc_html_e( 'Linked postqueues', Postqueue\Plugin::DOMAIN ); ?></h4>
-    <?php if ( count( $postqueues ) > 0 ): ?>
-      <ul>
+    <ul>
       <?php foreach ( $postqueues as $postqueue ): ?>
       <?php $postqueue = $postqueue[0]; ?>
         <li><?php echo $postqueue->name; ?> <span class="dashicons dashicons-no postqueue-remove" data-queueid="<?php echo $postqueue->queue_id; ?>" data-postid="<?php echo get_the_ID(); ?>" title="<?php esc_html_e( 'Remove post from this postqueue.', Postqueue\Plugin::DOMAIN ); ?>" data-queuename="<?php echo $postqueue->name; ?>"></span></li>
       <?php endforeach; ?>
-      </ul>
-    <?php else: ?>
-      <?php esc_html_e( 'This post is not saved in any postqueue yet. You can add it to one below.', Postqueue\Plugin::DOMAIN ); ?><br /><br />
-    <?php endif; ?>
+    </ul>
   </div>
 
   <hr />