Modifing the list manager with javascript

Sometimes you may have logic in your theme that alters the presentation of your articles (for example some comments graphic loaded by a third-party javascript). These changes of the presentation will not appear in the article preview. You can tackle this by using the javascript events that gets triggered by the list manager.

Adding javascript files

add_filter('arlima_admin_scripts-main', 'add_my_scripts_to_list_manager');
function add_my_scripts_to_list_manager($scripts) {
   $js_file = plugin_dir_url(__FILE__) .'/js/arlima-admin-fix.js';
   $scripts[] = $js_file;
   return $scripts;
}

jQuery events

Here we will go through all the events that you can listen to with javascript in the list manager.

$document:previewUpdate

The event previewUpdate is triggered on the document object every time the article preview is rendered or updated. The event callback will get an argument telling if the entire preview was updated or only a part of the preview. The partargument can be either streamer, title, content, imageSettings or all (meaning that everything was rendered).

---

Example 1 - Adding a special class to articles with external URL:s

jQuery(document).on('previewUpdate', function(evt, part) {
  /* Add a special class to articles referring to an external URL but only as 
    long as the article doesn't have the "sport-teaser" format */

  var article = ArlimaArticleForm.article,
      hasExternalURL = article.opt('overridingURL') != '',
      isSportTeaser = article.opt('format') == 'sport-teaser'

  if( part == 'all' && hasExternalURL && !isSportTeaser ) {
      ArlimaArticlePreview.$iframeBody.find('.tmpl-article').addClass('external-teaser');
  }
});

---

Example 2 - Add a lock icon to articles protected by a paywall

add_filter('arlima_wp_post', function($post) {
  // Add info about paywall to post object exposed in the list manager
  $post->is_behind_paywall = is_paywall_protected( $post );
  return $post;
});

jQuery(document).on('previewUpdate', function(evt, part) {
  var article = ArlimaArticleForm.article,
      hasPost = article.data.post ? true:false,
      isBehindPaywall = hasPost && ArlimaArticleConnection.currentPost.is_behind_paywall,
      lockHTML = '<span class="lock-icon"></span>';

  if( hasPost && (part == 'all' || part == 'content') ) {
      // First remove possible icon added the last time this event was triggered
      ArlimaArticlePreview.getContentElement().find('.lock-icon').remove();
      if( isBehindPaywall ) {
          ArlimaArticlePreview.getContentElement().find('p').eq(0).prepend(lockHTML);
      }     
  }
});

$document:postLoaded

The event postLoaded is triggered on the document object every time post data gets loaded from the server.

jQuery(document).on('postsLoaded', function(evt, posts) {
  console.log(posts);  // the post data loaded from the server
});

$window:arlimaFormImageLoaded

This event is called every time an image in the article form is loaded (bullet point 7 in the interface walkthrough )

$element:change

The change event is triggered on the list element every time an article in the list is added, edited, re-positioned or removed.

jQuery.each(ArlimaListContainer.lists, function(i, list) {
   list.$elem.on('change', function() {
      // The list has changed some how
   });
});