How to combine 2 Jquery Plugin Codes?

Question

I have 2 Jquery plugins I want to combine them into one without losing any one's functionality. I tried but the code stops working I think I might be doing wrong. Please Help me.

Plugin Code 1:

!(function ($) {
    jQuery.fn.menuify = function (settings) {
        var config = { seperator: "_", class: "blogger-menu" };

        if (settings) jQuery.extend(config, settings);

        this.each(function () {
            // element-specific code here
            let ul = document.createElement("ul");
            let parentLi = [];
            let findChild = $(this).find("li a");
            let regex = RegExp(config.seperator, "g");
            ul.className = config.class;
            $(findChild).each(function () {
                let link = $(this).attr("href");
                let level = ($(this).text().match(regex) || []).length;
                if (level === 0) {
                    let li = document.createElement("li");
                    let a = document.createElement("a");
                    a.innerHTML = $(this).text();
                    a.href = link;
                    li.append(a);
                    parentLi[level + 1] = li;
                    ul.append(li);
                } else if (level > 0) {
                    let ul = document.createElement("ul");
                    let li = document.createElement("li");
                    let a = document.createElement("a");
                    a.innerHTML = $(this).text().replaceAll(config.seperator, "");
                    a.href = link;
                    li.append(a);
                    parentLi[level + 1] = li;
                    ul.append(li);
                    parentLi[level].append(ul);
                }
            });
            $(this).parent().html(ul);
        });

        return this;
    };
})(jQuery);

The above code converts single-level list to multi-level unordered list.

Plugin Code 2: Second code is manumaker.js The above code converts the multilevel list to responsive menu bar it has some CSS code. This code can be seen here

The Codes basically used to make navigation menus.

Actually i am making nav menu in blogger blog and using list widget for that in which i use _ as a short code to make it a child list. — M.Muzammil, Jan 11 '21 at 08:34
no, I mean why are you trying to combine both plugins instead of calling them separately? — Mhd Alaa Alhaj, Jan 11 '21 at 08:38

lucasfoufou · Answer 1 · 2021-01-12T08:48:21.677

I guess your problem comes from the fact that you have on one plugin the variable $ and on the other jQuery assigned to jQuery, with both of them assigned to $ it should work :

        (function($) {

        $.fn.menuify = function (settings) {
            var config = { seperator: "_", class: "blogger-menu" };

            if (settings) $.extend(config, settings);

            this.each(function () {
                // element-specific code here
                let ul = document.createElement("ul");
                let parentLi = [];
                let findChild = $(this).find("li a");
                let regex = RegExp(config.seperator, "g");
                ul.className = config.class;
                $(findChild).each(function () {
                    let link = $(this).attr("href");
                    let level = ($(this).text().match(regex) || []).length;
                    if (level === 0) {
                        let li = document.createElement("li");
                        let a = document.createElement("a");
                        a.innerHTML = $(this).text();
                        a.href = link;
                        li.append(a);
                        parentLi[level + 1] = li;
                        ul.append(li);
                    } else if (level > 0) {
                        let ul = document.createElement("ul");
                        let li = document.createElement("li");
                        let a = document.createElement("a");
                        a.innerHTML = $(this).text().replaceAll(config.seperator, "");
                        a.href = link;
                        li.append(a);
                        parentLi[level + 1] = li;
                        ul.append(li);
                        parentLi[level].append(ul);
                    }
                });
                $(this).parent().html(ul);
            });

            return this;
        };

      $.fn.menumaker = function(options) {
          
          var cssmenu = $(this), settings = $.extend({
            title: "Menu",
            format: "dropdown",
            breakpoint: 768,
            sticky: false,
            menuify: true
          }, options);

          return this.each(function() {
            cssmenu.find('li ul').parent().addClass('has-sub');
            if (settings.format != 'select') {
              cssmenu.prepend('<div id="menu-button">' + settings.title + '</div>');
              $(this).find("#menu-button").on('click', function(){
                $(this).toggleClass('menu-opened');
                var mainmenu = $(this).next('ul');
                if (mainmenu.hasClass('open')) { 
                  mainmenu.hide().removeClass('open');
                }
                else {
                  mainmenu.show().addClass('open');
                  if (settings.format === "dropdown") {
                    mainmenu.find('ul').show();
                  }
                }
              });

              multiTg = function() {
                cssmenu.find(".has-sub").prepend('<span class="submenu-button"></span>');
                cssmenu.find('.submenu-button').on('click', function() {
                  $(this).toggleClass('submenu-opened');
                  if ($(this).siblings('ul').hasClass('open')) {
                    $(this).siblings('ul').removeClass('open').hide();
                  }
                  else {
                    $(this).siblings('ul').addClass('open').show();
                  }
                });
              };

              if (settings.format === 'multitoggle') multiTg();
              else cssmenu.addClass('dropdown');
            }

            else if (settings.format === 'select')
            {
              cssmenu.append('<select style="width: 100%"/>').addClass('select-list');
              var selectList = cssmenu.find('select');
              selectList.append('<option>' + settings.title + '</option>', {
                                                             "selected": "selected",
                                                             "value": ""});
              cssmenu.find('a').each(function() {
                var element = $(this), indentation = "";
                for (i = 1; i < element.parents('ul').length; i++)
                {
                  indentation += '-';
                }
                selectList.append('<option value="' + $(this).attr('href') + '">' + indentation + element.text() + '</option');
              });
              selectList.on('change', function() {
                window.location = $(this).find("option:selected").val();
              });
            }

            if (settings.sticky === true) cssmenu.css('position', 'fixed');

            resizeFix = function() {
              if ($(window).width() > settings.breakpoint) {
                cssmenu.find('ul').show();
                cssmenu.removeClass('small-screen');
                if (settings.format === 'select') {
                  cssmenu.find('select').hide();
                }
                else {
                  cssmenu.find("#menu-button").removeClass("menu-opened");
                }
              }

              if ($(window).width() <= settings.breakpoint && !cssmenu.hasClass("small-screen")) {
                cssmenu.find('ul').hide().removeClass('open');
                cssmenu.addClass('small-screen');
                if (settings.format === 'select') {
                  cssmenu.find('select').show();
                }
              }
            };
            resizeFix();
            if (settings.menuify === true) $(cssmenu).menuify();
            return $(window).on('resize', resizeFix);

          });
      };
    })(jQuery);

EDIT: I've changed a little bit the code in order to chain the two plugins. Now when calling $.fn.menumaker, you have an option to call menuify or not.

$("#cssmenu").menumaker({
            title: "Menu - Mobile",              // The text of the button which toggles the menu
            breakpoint: 768,            // The breakpoint for switching to the mobile view
            format: "multitoggle",       // It takes three values: dropdown for a simple toggle menu, select for select list menu, multitoggle for a menu where each submenu can be toggled separately
            menuify: true //True by default
        });

Please note that I'm not sure why you're trying to achieve with menuify and that it's possible the 2 plugins counters themselves.

A simpler way to chain those 2 plugins without changing the code could also be like this :

$('#cssmenu').menumaker().menuify();

Actually i want to add extra functionality in the second plugin code and that extra functionality code is the first one. — M.Muzammil, Jan 11 '21 at 09:04
So what you want is for example to do $(var).menumaker(options) and that is calls $.fn.menuify afterwards ? — lucasfoufou, Jan 11 '21 at 09:07

How to combine 2 Jquery Plugin Codes?

1 Answers1