Earl
Well-known member
I have this javascript code
I need that to be compatible with XenForo code
like this
Who can help?
Here is the full code: https://codepen.io/earl/pen/OJymOXm
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
