Rewrote js/varien/menu.js without prototypejs but no longer linked in…

… the base theme (#3946)
OpenMage · May 2, 2024 · fc62e31 · fc62e31
1 parent 458f9e6
commit fc62e31
Show file tree

Hide file tree

Showing 4 changed files with 43 additions and 47 deletions.
diff --git a/app/design/frontend/base/default/layout/oauth.xml b/app/design/frontend/base/default/layout/oauth.xml
@@ -28,7 +28,6 @@
             <action method="removeItem"><type>js</type><name>scriptaculous/controls.js</name></action>
             <action method="removeItem"><type>js</type><name>scriptaculous/slider.js</name></action>
             <action method="removeItem"><type>js</type><name>varien/js.js</name></action>
-            <action method="removeItem"><type>js</type><name>varien/menu.js</name></action>
         </reference>
         <remove name="top.links"/>
         <remove name="top.search"/>

diff --git a/app/design/frontend/base/default/layout/page.xml b/app/design/frontend/base/default/layout/page.xml
@@ -33,7 +33,6 @@ Default layout, loads most of the pages
                 <action method="addJs"><script>scriptaculous/slider.js</script></action>
                 <action method="addJs"><script>varien/js.js</script></action>
                 <action method="addJs"><script>varien/form.js</script></action>
-                <action method="addJs"><script>varien/menu.js</script></action>
                 <action method="addJs"><script>mage/translate.js</script></action>
                 <action method="addJs"><script>mage/cookies.js</script></action>
 

diff --git a/app/design/frontend/rwd/default/layout/oauth.xml b/app/design/frontend/rwd/default/layout/oauth.xml
@@ -28,7 +28,6 @@
             <action method="removeItem"><type>js</type><name>scriptaculous/controls.js</name></action>
             <action method="removeItem"><type>js</type><name>scriptaculous/slider.js</name></action>
             <action method="removeItem"><type>js</type><name>varien/js.js</name></action>
-            <action method="removeItem"><type>js</type><name>varien/menu.js</name></action>
         </reference>
         <remove name="top.links"/>
         <remove name="top.search"/>

diff --git a/js/varien/menu.js b/js/varien/menu.js
@@ -17,88 +17,87 @@
  * @param {String} id id of ul element with navigation lists
  * @param {Object} settings object with settings
  */
-var mainNav = function() {
-
+var mainNav = function () {
     var main = {
-        obj_nav :   $(arguments[0]) || $("nav"),
+        obj_nav: document.getElementById('nav'),
 
-        settings :  {
-            show_delay      :   0,
-            hide_delay      :   0,
+        settings: {
+            show_delay: 0,
+            hide_delay: 0,
         },
 
-        init :  function(obj, level) {
-            obj.lists = obj.childElements();
-            obj.lists.each(function(el,ind){
+        init: function (obj, level) {
+            obj.lists = Array.from(obj.children);
+            obj.lists.forEach(function (el, ind) {
                 main.handlNavElement(el);
             });
         },
 
-        handlNavElement :   function(list) {
-            if(list !== undefined){
-                list.onmouseover = function(){
-                    main.fireNavEvent(this,true);
-                };
-                list.onmouseout = function(){
-                    main.fireNavEvent(this,false);
-                };
-                if(list.down("ul")){
-                    main.init(list.down("ul"), true);
+        handlNavElement: function (list) {
+            if (list !== undefined) {
+                list.addEventListener('mouseover', function () {
+                    main.fireNavEvent(this, true);
+                });
+                list.addEventListener('mouseout', function () {
+                    main.fireNavEvent(this, false);
+                });
+
+                let nestedUl = list.querySelector('ul');
+                if (nestedUl) {
+                    main.init(nestedUl, true);
                 }
             }
         },
 
-        fireNavEvent :  function(elm,ev) {
-            if(ev){
-                elm.addClassName("over");
-                elm.down("a").addClassName("over");
-                if (elm.childElements()[1]) {
-                    main.show(elm.childElements()[1]);
+        fireNavEvent: function (elm, ev) {
+            if (ev) {
+                elm.classList.add("over");
+                elm.querySelector("a").classList.add("over");
+                let secondChild = elm.children[1];
+                if (secondChild) {
+                    main.show(secondChild);
                 }
             } else {
-                elm.removeClassName("over");
-                elm.down("a").removeClassName("over");
-                if (elm.childElements()[1]) {
-                    main.hide(elm.childElements()[1]);
+                elm.classList.remove("over");
+                elm.querySelector("a").classList.remove("over");
+                let secondChild = elm.children[1];
+                if (secondChild) {
+                    main.hide(secondChild);
                 }
             }
         },
 
-        show : function (sub_elm) {
+        show: function (sub_elm) {
             if (sub_elm.hide_time_id) {
                 clearTimeout(sub_elm.hide_time_id);
             }
-            sub_elm.show_time_id = setTimeout(function() {
-                if (!sub_elm.hasClassName("shown-sub")) {
-                    sub_elm.addClassName("shown-sub");
+            sub_elm.show_time_id = setTimeout(() => {
+                if (!sub_elm.classList.contains("shown-sub")) {
+                    sub_elm.classList.add("shown-sub");
                 }
             }, main.settings.show_delay);
         },
 
-        hide : function (sub_elm) {
+        hide: function (sub_elm) {
             if (sub_elm.show_time_id) {
                 clearTimeout(sub_elm.show_time_id);
             }
-            sub_elm.hide_time_id = setTimeout(function(){
-                if (sub_elm.hasClassName("shown-sub")) {
-                    sub_elm.removeClassName("shown-sub");
+            sub_elm.hide_time_id = setTimeout(function () {
+                if (sub_elm.classList.contains("shown-sub")) {
+                    sub_elm.classList.remove("shown-sub");
                 }
             }, main.settings.hide_delay);
         }
 
     };
     if (arguments[1]) {
-        main.settings = Object.extend(main.settings, arguments[1]);
+        main.settings = {...main.settings, ...arguments[1]};
     }
     if (main.obj_nav) {
         main.init(main.obj_nav, false);
     }
 };
 
-document.observe("dom:loaded", function() {
-    //run navigation without delays and with default id="#nav"
-    //mainNav();
-
-    //run navigation with delays
-    mainNav("nav", {"show_delay":"100","hide_delay":"100"});
+document.addEventListener("DOMContentLoaded", function () {
+    mainNav("nav", {"show_delay": "100", "hide_delay": "100"});
 });