From dd0a6ef5e71aec18fdf4dfc5fdd133469b7ff903 Mon Sep 17 00:00:00 2001 From: Fabrizio Balliano Date: Sun, 21 Apr 2024 15:35:44 +0100 Subject: [PATCH] Rewrote js/mage/adminhtml/accordion.js without prototypejs --- js/mage/adminhtml/accordion.js | 149 +++++++++++++++++---------------- 1 file changed, 78 insertions(+), 71 deletions(-) diff --git a/js/mage/adminhtml/accordion.js b/js/mage/adminhtml/accordion.js index e1855f9600a..44762ddcf08 100644 --- a/js/mage/adminhtml/accordion.js +++ b/js/mage/adminhtml/accordion.js @@ -11,51 +11,52 @@ * @copyright Copyright (c) 2022 The OpenMage Contributors (https://www.openmage.org) * @license https://opensource.org/licenses/afl-3.0.php Academic Free License (AFL 3.0) */ -var varienAccordion = new Class.create(); -varienAccordion.prototype = { - initialize : function(containerId, activeOnlyOne){ +class varienAccordion { + constructor(containerId, activeOnlyOne) { this.containerId = containerId; this.activeOnlyOne = activeOnlyOne || false; - this.container = $(this.containerId); - this.items = $$('#'+this.containerId+' dt'); - this.loader = new varienLoader(true); + this.container = document.getElementById(this.containerId); + this.items = Array.from(document.querySelectorAll(`#${this.containerId} dt`)); + this.loader = new varienLoader(true); - var links = $$('#'+this.containerId+' dt a'); - for(var i in links){ - if(links[i].href){ - Event.observe(links[i],'click',this.clickItem.bind(this)); - this.items[i].dd = this.items[i].next('dd'); - this.items[i].link = links[i]; + let links = Array.from(document.querySelectorAll(`#${this.containerId} dt a`)); + links.forEach((link, index) => { + if (link.href) { + link.addEventListener('click', this.clickItem.bind(this)); + this.items[index].dd = this.items[index].nextElementSibling; + this.items[index].link = link; } - } + }); this.initFromCookie(); - }, - initFromCookie : function () { - var activeItemId, visibility; - if (this.activeOnlyOne && - (activeItemId = Cookie.read(this.cookiePrefix() + 'active-item')) !== null) { + } + + initFromCookie() { + let activeItemId, visibility; + if (this.activeOnlyOne && (activeItemId = Cookie.read(this.cookiePrefix() + 'active-item')) !== null) { this.hideAllItems(); this.showItem(this.getItemById(activeItemId)); - } else if(!this.activeOnlyOne) { - this.items.each(function(item){ - if((visibility = Cookie.read(this.cookiePrefix() + item.id)) !== null) { - if(visibility == 0) { + } else if (!this.activeOnlyOne) { + this.items.forEach((item) => { + if ((visibility = Cookie.read(this.cookiePrefix() + item.id)) !== null) { + if (visibility == 0) { this.hideItem(item); } else { this.showItem(item); } } - }.bind(this)); + }); } - }, - cookiePrefix: function () { - return 'accordion-' + this.containerId + '-'; - }, - getItemById : function (itemId) { - var result = null; + } + + cookiePrefix() { + return `accordion-${this.containerId}-`; + } - this.items.each(function(item){ + getItemById(itemId) { + let result = null; + + this.items.forEach((item) => { if (item.id == itemId) { result = item; throw $break; @@ -63,66 +64,72 @@ varienAccordion.prototype = { }); return result; - }, - clickItem : function(event){ - var item = Event.findElement(event, 'dt'); - if(this.activeOnlyOne){ + } + + clickItem(event) { + let item = event.target.closest('dt'); + if (this.activeOnlyOne) { this.hideAllItems(); this.showItem(item); - Cookie.write(this.cookiePrefix() + 'active-item', item.id, 30*24*60*60); - } - else{ - if(this.isItemVisible(item)){ + Cookie.write(this.cookiePrefix() + 'active-item', item.id, 30 * 24 * 60 * 60); + } else { + if (this.isItemVisible(item)) { this.hideItem(item); - Cookie.write(this.cookiePrefix() + item.id, 0, 30*24*60*60); - } - else { + Cookie.write(this.cookiePrefix() + item.id, 0, 30 * 24 * 60 * 60); + } else { this.showItem(item); - Cookie.write(this.cookiePrefix() + item.id, 1, 30*24*60*60); + Cookie.write(this.cookiePrefix() + item.id, 1, 30 * 24 * 60 * 60); } } - Event.stop(event); - }, - showItem : function(item){ - if(item && item.link){ - if(item.link.href){ + event.stopPropagation(); + event.preventDefault(); + } + + showItem(item) { + if (item && item.link) { + if (item.link.href) { this.loadContent(item); } - Element.addClassName(item, 'open'); - Element.addClassName(item.dd, 'open'); + item.classList.add('open'); + item.dd.classList.add('open'); } - }, - hideItem : function(item){ - Element.removeClassName(item, 'open'); - Element.removeClassName(item.dd, 'open'); - }, - isItemVisible : function(item){ - return Element.hasClassName(item, 'open'); - }, - loadContent : function(item){ - if(item.link.href.indexOf('#') == item.link.href.length-1){ + } + + hideItem(item) { + item.classList.remove('open'); + item.dd.classList.remove('open'); + } + + isItemVisible(item) { + return item.classList.contains('open'); + } + + loadContent(item) { + if (item.link.href.endsWith('#')) { return; } - if (Element.hasClassName(item.link, 'ajax')) { + if (item.link.classList.contains('ajax')) { this.loadingItem = item; - this.loader.load(item.link.href, {updaterId : this.loadingItem.dd.id}, this.setItemContent.bind(this)); + this.loader.load(item.link.href, {updaterId: this.loadingItem.dd.id}, this.setItemContent.bind(this)); return; } location.href = item.link.href; - }, - setItemContent : function(content){ + } + + setItemContent(content) { if (content.isJSON) { return; } this.loadingItem.dd.innerHTML = content; - }, - hideAllItems : function(){ - for(var i in this.items){ - if(this.items[i].id){ - Element.removeClassName(this.items[i], 'open'); - Element.removeClassName(this.items[i].dd, 'open'); + } + + hideAllItems() { + this.items.forEach((item) => { + if (item.id) { + item.classList.remove('open'); + item.dd.classList.remove('open'); } - } + }); } -}; +}