adds ajaxy-like refreshing of metabox contents

palasthotel · Dec 13, 2017 · 025be38 · 025be38
1 parent 3721bd7
commit 025be38
Show file tree

Hide file tree

Showing 3 changed files with 47 additions and 7 deletions.
diff --git a/classes/metabox.php b/classes/metabox.php
@@ -83,7 +83,8 @@ public function render( $post ) {
     	'postremoved' => esc_html__( 'Post successfully removed from postqueue.', Plugin::DOMAIN ),
     	'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 )
+    	'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 )
     ) );
 		$store = $this->store;
 		require $this->plugin->dir .'partials/postqueue-metabox.tpl.php';

diff --git a/js/postqueue-metabox.js b/js/postqueue-metabox.js
@@ -7,12 +7,16 @@
 	 * Start after dom is ready
 	 */
 	$(function() {
+
 		var $messages = $('.postqueue-metabox-wrapper').find('.messages');
+
 		$('.postqueue-remove').on( 'click', function(e) {
-  		let $parent = $(this).closest('.postqueue-metabox-postqueuelist-wrapper');
+  		var $this = $(this);
+  		let $parent = $this.closest('.postqueue-metabox-postqueuelist-wrapper');
   		$parent.addClass('is-loading');
-      let postid = $(this).attr('data-postid');
-      let queueid = $(this).attr('data-queueid');
+      let postid = $this.data('postid');
+      let queueid = $this.data('queueid');
+      let queuename = $this.data('queuename');
   		let data = {
   			'action': 'postqueue_remove_post',
   			'postid': postid,
@@ -26,6 +30,8 @@
   			} 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');
 
@@ -36,10 +42,12 @@
       let $parent = $(this).closest('.postqueue-metabox-postqueueselect-wrapper');
   		$parent.addClass('is-loading');
       let postqueue_select_value = $parent.find('.postqueue-select').val();
+
       if( postqueue_select_value != 'none' ) {
         let postid = $(this).attr('data-postid');
         let queueid = postqueue_select_value;
-        console.log('queueid:'+queueid);
+        let $selectedoption = $parent.find('[value="' + postqueue_select_value + '"]');
+        let queuename = $selectedoption.data('queuename');
     		let data = {
     			'action': 'postqueue_add_post',
     			'postid': postid,
@@ -53,6 +61,8 @@
     			} else {
       			$messages.text(objectL10n.postadded);
       			$messages.removeClass('error');
+      			postqueue_metabox_remove_selectoption( queueid, queuename, postid );
+      			postqueue_metabox_add_listitem( queueid, queuename, postid );
     			}
     			$parent.removeClass('is-loading');
     		});
@@ -63,4 +73,33 @@
       }
     });
 	});
+
+	/*
+   * helper function, adds selectoption to metabox DOM
+   */
+	function postqueue_metabox_add_selectoption( queueid, queuename, postid ) {
+  	let $wrapper = $('.postqueue-metabox-wrapper').find('.postqueue-metabox-postqueueselect-wrapper');
+  	$wrapper.find('select').append('<option value="'+queueid+'" data-queuename="'+queuename+'">'+queuename+'</option>');
+	}
+	/*
+   * helper function, removes selectoption to metabox DOM
+   */
+	function postqueue_metabox_remove_selectoption( queueid, queuename, postid ) {
+  	let $wrapper = $('.postqueue-metabox-wrapper').find('.postqueue-metabox-postqueueselect-wrapper');
+  	$wrapper.find("[value='" + queueid + "']").remove();
+  }
+  /*
+   * helper function, adds listitem to metabox DOM
+   */
+  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>');
+  }
+  /*
+   * helper function, removes listitem from metabox DOM
+   */
+  function postqueue_metabox_remove_listitem( queueid, queuename, postid ) {
+    let $wrapper = $('.postqueue-metabox-wrapper').find('.postqueue-metabox-postqueuelist-wrapper');
+    $wrapper.find("[data-queueid='" + queueid + "']").closest('li').remove();
+  }
 })( jQuery );
diff --git a/partials/postqueue-metabox.tpl.php b/partials/postqueue-metabox.tpl.php
@@ -19,7 +19,7 @@
       <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 ); ?>"></span></li>
+        <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: ?>
@@ -38,7 +38,7 @@
         <option value="none">-- <?php esc_html_e( 'choose', Postqueue\Plugin::DOMAIN ); ?> --</option>
       <?php foreach ( $all_postqueues as $postqueue ): ?>
         <?php if( !$store->is_post_in_queue( get_the_ID(), $postqueue->id) ): ?>
-          <option value="<?php echo $postqueue->id; ?>"><?php echo $postqueue->name; ?></option>
+          <option value="<?php echo $postqueue->id; ?>" data-queuename="<?php echo $postqueue->name; ?>"><?php echo $postqueue->name; ?></option>
         <?php endif; ?>
       <?php endforeach; ?>
       </select>