Issue #3268651: Allow triggering element definition

js/ajax.js

@@ -6,64 +6,118 @@
 
   'use strict';
 
-  Drupal.behaviors.lazyViewsAjax = {
-    attach: function (context) {
-      // Attach ajax action to any item.
-      $('[data-lv-id]', context).once('attach-ajax-links').each(this.attachLazyAjax);
-    },
-    attachLazyAjax: function (idx, item) {
-      var $el = $(item);
-
-      var view_id = $el.attr('data-lv-id');
-      var view_display = $el.attr('data-lv-display') || false;
-
-      // Need a display.
-      if (!view_id || !view_display) return;
-
-      // @todo move these to a defaults extend.
-      var view_args = $el.attr('data-lv-args') || {};
-      var view_dom_id = $el.attr('data-lv-target') || 'lazy-view';
-      var execute = $el.attr('data-lv-execute') || false;
-
-      // Allows for not adding the prefix
-      var target_exists = $('.js-view-dom-id-' + view_dom_id).length;
-      if (!target_exists) {
-        var $target = $('.' + view_dom_id + ', #' + view_dom_id);
+  class LazyViews {
+
+    constructor() {
+      this.attachLazyAjax = this.attachLazyAjax.bind(this);
+    }
+
+    attachLazyAjax(idx, item) {
+      let $el = $(item);
+
+      let view_id = $el.data('lv-id');
+      let view_display = $el.data('lv-display') || false;
+
+      // Need a view ID and view display.
+      if (!view_id || !view_display) {
+        return;
+      }
+
+      let view_dom_id = this.getTarget(item);
+      let trigger_element = this.getTrigger(item);
+
+      // Need target and trigger element
+      if (!view_dom_id || !trigger_element) {
+        return;
+      }
+
+      let view_args = $el.data('lv-args') || {};
+      let execute = $el.data('lv-execute') || false;
+      let event = $el.data('lv-trigger-method') || 'click';
+
+      this.loadView(trigger_element, event, view_dom_id, view_id, view_display, view_args, execute);
+    }
+
+    getTarget(item) {
+      let $el = $(item);
+
+      // Check if target is set
+      let view_dom_id = $el.data('lv-target') || false;
+      if (view_dom_id){
+        let $target = $('.' + view_dom_id + ', #' + view_dom_id);
         if ($target.length) {
-          target_exists = true;
-          $target.addClass('js-view-dom-id-' + view_dom_id);
+          if (!$target.hasClass('js-view-dom-id-' + view_dom_id)){
+            $target.addClass('js-view-dom-id-' + view_dom_id);
+          }
+        }else{
+          view_dom_id = false;
+        }
+      }
+      // If not target then it becomes target
+      if (!view_dom_id){
+        let target_id = $el.attr('id') || false;
+        if (!target_id) {
+          view_dom_id = 'lazy-views-'+Math.random().toString(36).substr(2, 10);
+          $el.attr('id', view_dom_id);
+        }else{
+          view_dom_id = target_id;
+        }
+        if (!$el.hasClass('js-view-dom-id-' + view_dom_id)) {
+          $el.addClass('js-view-dom-id-' + view_dom_id);
         }
       }
 
-      // Do nothing if no placholder.
-      if (target_exists) {
-
-        // Everything we need to specify about the view.
-        var view_info = {
-          view_name: view_id,
-          view_display_id: view_display,
-          view_args: view_args,
-          view_dom_id: view_dom_id,
-        };
-
-        // Details of the ajax action.
-        var ajax_settings = {
-          submit: view_info,
-          url: drupalSettings.path.baseUrl + 'views/ajax',
-          element: item,
-          event: execute || 'click',
-          progress: { type: 'fullscreen' },
-        };
-
-        var ajax_call = Drupal.ajax(ajax_settings);
-
-        // Load right away.
-        if (execute) {
-          ajax_call.execute();
+      return view_dom_id;
+    }
+
+    getTrigger(item){
+      let $el = $(item);
+      let trigger_element = item;
+
+      // Check if trigger element is set
+      let trigger = $el.data('lv-trigger') || false;
+      if (trigger){
+        let element = $('#' + trigger + ', .' + trigger);
+        if (element.length) {
+          trigger_element = element[0];
         }
       }
+
+      return trigger_element;
+    }
+
+    loadView(element, event, target, view_name, view_display_id, view_args, execute) {
+      let view_info = {
+        view_name: view_name,
+        view_display_id: view_display_id,
+        view_args: view_args,
+        view_dom_id: target,
+      };
+
+      // Details of the ajax action.
+      let ajax_settings = {
+        submit: view_info,
+        url: drupalSettings.path.baseUrl + 'views/ajax',
+        element: element,
+        event: execute || event,
+        progress: {type: 'fullscreen'},
+      };
+
+      let ajax_call = Drupal.ajax(ajax_settings);
+
+      // Load right away.
+      if (execute) {
+        ajax_call.execute();
+      }
+    }
+  }
+
+  Drupal.behaviors.lazyViewsAjax = {
+    attach: function (context) {
+      // Attach ajax action to any item.
+      let lazyViews = new LazyViews();
+      $('[data-lv-id]', context).once('attach-ajax-links').each(lazyViews.attachLazyAjax);
     }
   };
 
 })(jQuery, Drupal);
-