XF 2.1 need help to convert $.fn.MyApp=function() to XF.MyApp=function()

Earl

Active member
I have this javascript code
JavaScript:
(function( $ ) {
    "use strict";
    var methods = {
        init : function( options ) {
            var $root = $(this).find("> ul");
            var settings = $.extend({ // Settings; here you can add parameters to menu
                animation: 'slide', // Chose built-in animation method (slide, slideZoomIn, slideZoomOut, roll, shiftUp, cube, fadeIn, slideBackLayer)
                animationDuration: '450ms', // Set durations of animation
                classIn: null, // Class for custom IN animation
                classOut: null, // Class for custom OUT animation
                backText: 'Back', // Here you can put your text for back button
                verticalAlign: false, // Menu will be absolute positioned and vertical aligned
                verticalAlignBlock : null, // Set parent block for vertical align
                //events
                animationStart: function() {}, // Custom callback on animation START
                animationEnd: function() {} // Custom callback on animation END
            }, options);
            return this.each(function() {
                var initMethods = {
                    init: function() { // Initiatoin method
                        var $main = $(this).find("> ul");
                        initMethods.prepareMenu.apply($main); // This method add plugin work classes for menu
                        if (settings.verticalAlign) {
                            initMethods.verticalAlign.apply($main); // This method do element vertical aligned
                        }
                        $(this).find(".lm-has-submenu > a").on("click.layermenu", function(e) { // This function call method which make next slide when user click on menu link with children menus
                            e.preventDefault();
                            initMethods.slideNext.apply($(this));
                        });
                        $(this).on("click.layermenu", ".lm-back", function(e) { // This function call slide back method when user click on "back" menu element
                            e.preventDefault();
                            initMethods.slideBack.apply($(this));
                        });
                    },
                    verticalAlign: function() { // Align element on screen center
                        var $window = $(window),
                            $mainBlock = $root.parent(), $parentBlock, blockHeight; // Get main block height
                        if (settings.verticalAlignBlock != null) {
                            console.log(settings.verticalAlignBlock);
                            $parentBlock = $(settings.verticalAlignBlock);
                        }
                        getHeight();
                        function getHeight() {
                            var windowHeight = $window.outerHeight(),
                                itemHeight = $mainBlock.outerHeight();
                            if ($parentBlock) {
                                var parentBlockHeight = $parentBlock.outerHeight();
                            }
                            if (parentBlockHeight) {
                                blockHeight = parentBlockHeight
                            }
                            else {
                                blockHeight = windowHeight;
                            }
                            $mainBlock.addClass("lm-vertical-aligned").css({ // Align element on screen center
                                'top': (blockHeight - itemHeight) / 2,
                                'transition-duration': settings.animationDuration
                            });
                        }
                        $window.on("load.layermenu resize.layermenu", function() { // Call function when page resize
                            getHeight();
                        });
                    },
                    prepareMenu: function() { // Add some work classes
                        this.parent().addClass("lm-menu-holder");
                        this.addClass("lm-main-menu lm-view-opened");
                        this.find("li > ul").addClass("lm-submenu");
                        this.find("li:has(ul.lm-submenu)").addClass("lm-has-submenu");
                        this.find("ul.lm-submenu").prepend("<li class='lm-back'><a href='#'><span>" + settings.backText + "</span></a></li>"); // Insert back menu element
                    },
                    slideNext: function() { // This function show next menu level
                        var animOut = this.closest(".lm-view-opened").clone(), // Clone of current menu for OUT animation block
                            animIn, currentItem;
                        $root.parent().prepend(animOut); // Insert cloned menu into main div

                        // Hide old menu
                        currentItem = this;
                        currentItem.closest(".lm-view-opened").find(">.lm-has-submenu > a").hide(); // Hide current link
                        currentItem.closest(".lm-view-opened").removeClass("lm-view-opened"); // Hide all li's on current menu
                        currentItem.parent().show(); // Show only one <li> (parent of clicked <a>)
                        currentItem.hide();
                        // Show new menu
                        currentItem.parent().find("> .lm-submenu").addClass("lm-view-opened"); // Find <li> in current menu level and show
                        currentItem.parent().find("> .lm-submenu > .lm-has-submenu > a").show();

                        animIn = currentItem.parent().find("> .lm-submenu").clone(); // Make clone for IN animation

                        currentItem.parent().find("> .lm-submenu").addClass("lm-view-opened").css("visibility", "hidden"); // Hide new level of menu for a while
                        currentItem.parent().find("> .lm-submenu > .lm-has-submenu > a").show().css("visibility", "hidden");
                        $root.parent().prepend(animIn); // Insert IN animation block in to main menu <div>
                        animIn.addClass("lm-animation-clone").css({
                            'animation-duration': settings.animationDuration
                        });
                        animOut.addClass("lm-animation-clone").css({
                            'animation-duration': settings.animationDuration
                        });
                        if ((settings.classIn != null) && (settings.classOut != null)) {
                            animOut.addClass(settings.classOut);
                            animIn.addClass(settings.classIn);
                        } else {
                            switch (settings.animation) { // Adding animations for cloned blocks
                                case "slide":
                                    animOut.addClass("lm-slideOut");
                                    animIn.addClass("lm-slideIn");
                                    break;
                                case "slideZoomIn":
                                    animOut.addClass("lm-slideZoomInOut");
                                    animIn.addClass("lm-slideZoomInIn");
                                    break;
                                case "slideZoomOut":
                                    animOut.addClass("lm-slideZoomOutOut");
                                    animIn.addClass("lm-slideZoomOutIn");
                                    break;
                                case "roll":
                                    animOut.addClass("lm-rollOut");
                                    animIn.addClass("lm-rollIn");
                                    break;
                                case "shiftUp":
                                    animOut.addClass("lm-shiftUpOut");
                                    animIn.addClass("lm-shiftUpIn");
                                    break;
                                case "cube":
                                    animOut.addClass("lm-cubeOut");
                                    animIn.addClass("lm-cubeIn");
                                    break;
                                case "fadeIn":
                                    animOut.addClass("lm-fadeInOut");
                                    animIn.addClass("lm-fadeInIn");
                                    break;
                                case "slideBackLayer":
                                    animOut.addClass("lm-slideBackLayerOut");
                                    animIn.addClass("lm-slideBackLayerIn");
                                    break;
                                default:
                                    animOut.addClass("lm-slideOut");
                                    animIn.addClass("lm-slideIn");
                            }
                        }
                        // Animations ends
                        $(animOut).on("animationStart webkitAnimationStart oAnimationStart MSAnimationEnd", function() {
                            settings.animationStart(); // Callback after animation start
                            if (settings.verticalAlign) {
                                initMethods.verticalAlign();
                            }
                        });
                        $(animOut).on("animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd", function() {
                            $(this).remove(); // Delete cloned block when his animation ends
                        });
                        $(animIn).on("animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd", function() {
                            settings.animationEnd(); // Callback after animation end
                            $(this).remove(); // Delete cloned block when his animation ends
                            currentItem.parent().find("> .lm-submenu").css("visibility", "visible"); // Make current menu visible
                            currentItem.parent().find("> .lm-submenu > .lm-has-submenu > a").css("visibility", "visible");
                        });
                    },
                    slideBack: function() { // This function show previous menu level
                        var animOutRight = this.closest(".lm-view-opened").clone(), // Make clone of current menu
                            animInLeft, currentItem;
                        $root.parent().prepend(animOutRight); // Insert clone into root menu block
                        currentItem = this;
                        // Show preview menu
                        currentItem.closest(".lm-view-opened").parent().parent().addClass("lm-view-opened").find("> .lm-has-submenu > a").show();
                        // Hide old menu
                        currentItem.closest(".lm-view-opened").find("> .lm-has-submenu > a ").hide(); // Find and hide all current menu <li>
                        currentItem.closest(".lm-view-opened").removeClass("lm-view-opened");
                        // Make clone of new menu
                        animInLeft = currentItem.closest(".lm-view-opened").clone();

                        currentItem.closest(".lm-view-opened ").css("visibility", "hidden"); // Make new menu invisible for a while
                        currentItem.closest(".lm-view-opened").find("> .lm-has-submenu > a").css("visibility", "hidden");

                        $root.parent().prepend(animInLeft); // Insert cloned animation left block into main menu
                        animInLeft.addClass("lm-animation-clone").css({
                            'animation-duration': settings.animationDuration
                        });
                        animOutRight.addClass("lm-animation-clone").css({
                            'animation-duration': settings.animationDuration
                        });
                        if ((settings.classIn != null) && (settings.classOut != null)) { // If user added custom animations use it
                            animOutRight.addClass("lm-animation-back " + settings.classOut);
                            animInLeft.addClass("lm-animation-back " + settings.classIn);
                        } else {
                            switch (settings.animation) { // Use built-in animations
                                case "slide":
                                    animOutRight.addClass("lm-animation-back").addClass("lm-slideOut");
                                    animInLeft.addClass("lm-animation-back").addClass("lm-slideIn");
                                    break;
                                case "slideZoomIn":
                                    animOutRight.addClass("lm-animation-back").addClass("lm-slideZoomInOut");
                                    animInLeft.addClass("lm-animation-back").addClass("lm-slideZoomInIn");
                                    break;
                                case "slideZoomOut":
                                    animOutRight.addClass("lm-animation-back").addClass("lm-slideZoomOutOut");
                                    animInLeft.addClass("lm-animation-back").addClass("lm-slideZoomOutIn");
                                    break;
                                case "roll":
                                    animOutRight.addClass("lm-animation-back").addClass("lm-rollOut");
                                    animInLeft.addClass("lm-animation-back").addClass("lm-rollIn");
                                    break;
                                case "shiftUp":
                                    animOutRight.addClass("lm-animation-back").addClass("lm-shiftUpOut");
                                    animInLeft.addClass("lm-animation-back").addClass("lm-shiftUpIn");
                                    break;
                                case "cube":
                                    animOutRight.addClass("lm-animation-back").addClass("lm-cubeOut");
                                    animInLeft.addClass("lm-animation-back").addClass("lm-cubeIn");
                                    break;
                                case "fadeIn":
                                    animOutRight.addClass("lm-animation-back").addClass("lm-fadeInOut");
                                    animInLeft.addClass("lm-animation-back").addClass("lm-fadeInIn");
                                    break;
                                case "slideBackLayer":
                                    animOutRight.addClass("lm-animation-back").addClass("lm-slideBackLayerOut");
                                    animInLeft.addClass("lm-animation-back").addClass("lm-slideBackLayerIn");
                                    break;
                                default:
                                    animOutRight.addClass("lm-animation-back").addClass("lm-slideOut");
                                    animInLeft.addClass("lm-animation-back").addClass("lm-slideIn");
                            }
                        }
                        // Animations ends
                        $(animOutRight).on("animationStart webkitAnimationStart oAnimationStart MSAnimationEnd", function() {
                            settings.animationStart(); // Call custom function when animation starts
                            if (settings.verticalAlign) {
                                initMethods.verticalAlign();
                            }
                        });
                        $(animOutRight).on("animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd", function() {
                            $(this).remove(); // Delete cloned block when his animation ends
                        });
                        $(animInLeft).on("animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd", function() {
                            $(this).remove(); // Delete cloned block when his animation ends
                            currentItem.closest(".lm-view-opened ").css("visibility", "visible"); // Make current new menu visible
                            currentItem.closest(".lm-view-opened").find("> .lm-has-submenu > a").css("visibility", "visible");
                        });
                    }
                };
                initMethods.init.apply(this); // Initiate plugin
            });
        },
        destroy : function( ) {
            $(this).removeClass("lm-menu-holder lm-vertical-aligned");
            $(this).off("click.layermenu");
            $(this).find("lm-back").off("click.layermenu");
            $(this).css({
                "top" :  '',
                "transition-duration" : '',
            });
            $(window).off("load.layermenu resize.layermenu");
            $(this).find(".lm-has-submenu a").off("click.layermenu");
            $(this).find(".lm-main-menu").removeClass("lm-main-menu");
            $(this).find(".lm-view-opened").removeClass("lm-view-opened");
            $(this).find(".lm-has-submenu").removeClass("lm-has-submenu");
            $(this).find(".lm-submenu").removeClass("lm-submenu");
            $(this).find(".lm-back").remove();
            $(this).find("*").removeAttr("style");
            var clearMenu = $(this).find(">ul").clone();
            $(this).find(">ul").remove();
            $(this).prepend(clearMenu);
        }
    };

    $.fn.layerMenu = function( method ) {

        if ( methods[method] ) {
            return methods[ method ].apply( this, Array.prototype.slice.call( arguments, 1 ));
        } else if ( typeof method === 'object' || ! method ) {
            return methods.init.apply( this, arguments );
        } else {
            $.error( 'Method: ' +  method + ' does not exists. jQuery.layerMenu' );
        }
    };

})( jQuery );

I need that to be compatible with XenForo code
like this
JavaScript:
    XF.LayerMenu = function( method ) {

        if ( lm_methods[method] ) {
            return lm_methods[ method ].apply( this, Array.prototype.slice.call( arguments, 1 ));
        } else if ( typeof method === 'object' || ! method ) {
            return lm_methods.init.apply( this, arguments );
        } else {
            $.error( 'Method: ' +  method + ' does not exists. jQuery.layerMenu' );
        }
    };

    XF.Element.register('layer-menu', 'XF.LayerMenu');
}(jQuery, window, document);

Who can help?
Here is the full code: https://codepen.io/earl/pen/OJymOXm
 
Top