fix: Allow Recipe fields to work properly if they are embedded in a M…

…atrix block ([#63](#63))
nystudio107 · Feb 21, 2023 · 3ed99b2 · 3ed99b2
1 parent bb06b1f
commit 3ed99b2
Show file tree

Hide file tree

Showing 2 changed files with 84 additions and 86 deletions.
diff --git a/src/assetbundles/recipefield/dist/js/Recipe.js b/src/assetbundles/recipefield/dist/js/Recipe.js
@@ -10,102 +10,100 @@
  * @since     1.0.0
  */
 
- ;(function ( $, window, document, undefined ) {
+;(function ($, window, document, undefined) {
 
-    var pluginName = "RecipeRecipe",
-        defaults = {
-        };
+  var pluginName = "RecipeRecipe",
+    defaults = {};
 
-    // Plugin constructor
-    function Plugin( element, options ) {
-        this.element = element;
+  // Plugin constructor
+  function Plugin(element, options) {
+    this.element = element;
 
-        this.options = $.extend( {}, defaults, options) ;
+    this.options = $.extend({}, defaults, options);
 
-        this._defaults = defaults;
-        this._name = pluginName;
+    this._defaults = defaults;
+    this._name = pluginName;
 
-        this.init();
-    }
+    this.init();
+  }
 
-    Plugin.prototype = {
+  Plugin.prototype = {
 
-        init: function(id) {
-            var _this = this;
+    init: function (id) {
+      var _this = this;
 
-            $(function () {
+      $(function () {
 
-/* -- _this.options gives us access to the $jsonVars that our FieldType passed down to us */
+        /* -- _this.options gives us access to the $jsonVars that our FieldType passed down to us */
 
-                // Tab handler
-                $('.recipe-tab-links').on('click', function(e) {
-                    e.preventDefault();
-                    $('.recipe-tab-links').removeClass('sel');
-                    $(this).addClass('sel');
-                    $('.recipe-tab-content').addClass('hidden');
-                    var selector = $(this).attr('href');
-                    $(selector).removeClass('hidden');
-                    // Trigger a resize to make event handlers in Garnish activate
-                    Garnish.$win.trigger('resize');
-                    // Fixes Redactor fixed toolbars on previously hidden panes
-                    Garnish.$doc.trigger('scroll');
-                });
+        // Tab handler
+        $('.recipe-tab-links').on('click', function (e) {
+          e.preventDefault();
+          $('.recipe-tab-links').removeClass('sel');
+          $(this).addClass('sel');
+          $('.recipe-tab-content').addClass('hidden');
+          var selector = $(this).attr('href');
+          $(selector).removeClass('hidden');
+          // Trigger a resize to make event handlers in Garnish activate
+          Garnish.$win.trigger('resize');
+          // Fixes Redactor fixed toolbars on previously hidden panes
+          Garnish.$doc.trigger('scroll');
+        });
 
-                // Fetch nutritional info handler
-                $('.fetch-nutritional-info button').on('click', function(e) {
-                    e.preventDefault();
-                    if ($(this).hasClass('disabled')) {
-                        return;
-                    }
-                    var ingredients = [];
-
-                    var field = $(this).attr('data-field');
-                    $('#fields-' + field + 'ingredients tbody tr').each(function() {
-                        var ingredient = [];
-                        $(this).find('textarea, select').each(function() {
-                            ingredient.push($(this).val());
-                        })
-                        ingredients.push(ingredient.join(' '));
-                    });
-
-                    var serves = $('#fields-' + field + 'serves').val();
-
-                    $('.fetch-nutritional-info button').addClass('disabled');
-                    $('.fetch-nutritional-info .spinner').removeClass('hidden');
-
-                    Craft.postActionRequest('recipe/nutrition-api/get-nutritional-info',
-                        {
-                            ingredients: ingredients,
-                            serves: serves,
-                        },
-                        function(response) {
-                            if (typeof response.error !== 'undefined') {
-                                Craft.cp.displayError(response.error);
-                            }
-                            else {
-                                $.each(response, function(index, value) {
-                                    $('#fields-' + field + index).val(value);
-                                });
-                            }
-
-                            $('.fetch-nutritional-info button').removeClass('disabled');
-                            $('.fetch-nutritional-info .spinner').addClass('hidden');
-                        }
-                    );
+        // Fetch nutritional info handler
+        $('.fetch-nutritional-info button').on('click', function (e) {
+          e.preventDefault();
+          if ($(this).hasClass('disabled')) {
+            return;
+          }
+          var ingredients = [];
+
+          var field = $(this).attr('data-field');
+          $('#' + field + 'ingredients tbody tr').each(function () {
+            var ingredient = [];
+            $(this).find('textarea, select').each(function () {
+              ingredient.push($(this).val());
+            })
+            ingredients.push(ingredient.join(' '));
+          });
+
+          var serves = $('#fields-' + field + 'serves').val();
+
+          $('.fetch-nutritional-info button').addClass('disabled');
+          $('.fetch-nutritional-info .spinner').removeClass('hidden');
+
+          Craft.postActionRequest('recipe/nutrition-api/get-nutritional-info',
+            {
+              ingredients: ingredients,
+              serves: serves,
+            },
+            function (response) {
+              if (typeof response.error !== 'undefined') {
+                Craft.cp.displayError(response.error);
+              } else {
+                $.each(response, function (index, value) {
+                  $('#fields-' + field + index).val(value);
                 });
-            });
-        }
-    };
-
-    // A really lightweight plugin wrapper around the constructor,
-    // preventing against multiple instantiations
-    $.fn[pluginName] = function ( options ) {
-        return this.each(function () {
-            if (!$.data(this, "plugin_" + pluginName)) {
-                $.data(this, "plugin_" + pluginName,
-                new Plugin( this, options ));
+              }
+
+              $('.fetch-nutritional-info button').removeClass('disabled');
+              $('.fetch-nutritional-info .spinner').addClass('hidden');
             }
+          );
         });
-    };
-
-})( jQuery, window, document );
+      });
+    }
+  };
+
+  // A really lightweight plugin wrapper around the constructor,
+  // preventing against multiple instantiations
+  $.fn[pluginName] = function (options) {
+    return this.each(function () {
+      if (!$.data(this, "plugin_" + pluginName)) {
+        $.data(this, "plugin_" + pluginName,
+          new Plugin(this, options));
+      }
+    });
+  };
+
+})(jQuery, window, document);
diff --git a/src/templates/_components/fields/Recipe_input.twig b/src/templates/_components/fields/Recipe_input.twig
@@ -354,7 +354,7 @@
             {% if hasApiCredentials %}
                 <div class="fetch-nutritional-info text-right" style="margin: -8px 0 -24px;">
                     <span class="spinner hidden"></span>
-                    <button data-field="{{ name }}" class="btn submit">
+                    <button data-field="{{ nameSpacedId }}" class="btn submit">
                         Fetch Nutritional Information
                     </button>
                 </div>