diff --git a/pardus_options_library.js b/pardus_options_library.js index 2ad4bcb..f029506 100644 --- a/pardus_options_library.js +++ b/pardus_options_library.js @@ -36,6 +36,10 @@ class PardusOptionsUtility { window.localStorage.setItem('pardusOptionsOpenTab', id); window.dispatchEvent(new window.Event('storage')); } + + static getImagePackUrl() { + return String(document.querySelector('body').style.backgroundImage).replace(/url\("*|"*\)|[a-z0-9]+\.gif/g, ''); + } } class HtmlElement { @@ -637,7 +641,7 @@ class OptionsBox extends HtmlElement { this.getFunction = getFunction; const headerHtml = (premium) ? '' : ''; - this.frontContainer = `
${headerHtml}${heading}`; + this.frontContainer = `
${headerHtml}${heading}`; this.backContainer = '
'; this.innerHtml = ''; this.description = new DescriptionElement({ @@ -971,7 +975,7 @@ class OptionsContent extends HtmlElement { if (this.content !== null) { return this.content; } - return `${this.heading}`; + return ``; } - return ``; + return ``; } setActive() { - this.getElement().setAttribute('style', "background: transparent url('//static.pardus.at/img/std/tabactive.png') repeat scroll 0% 0%; cursor: default;"); + this.getElement().setAttribute('style', `background: transparent url('${PardusOptionsUtility.getImagePackUrl()}tabactive.png') repeat scroll 0% 0%; cursor: default;`); this.getElement().setAttribute('onmouseover', "this.style.cursor='default'"); this.getElement().removeAttribute('onmouseout'); this.active = true; } setInactive() { - this.getElement().setAttribute('style', "background: transparent url('//static.pardus.at/img/std/tab.png') repeat scroll 0% 0%; cursor: default;"); - this.getElement().setAttribute('onmouseover', "this.style.background='url(//static.pardus.at/img/std/tabactive.png)';this.style.cursor='default'"); - this.getElement().setAttribute('onmouseout', "this.style.background='url(//static.pardus.at/img/std/tab.png)'"); + this.getElement().setAttribute('style', `background: transparent url('${PardusOptionsUtility.getImagePackUrl()}tab.png') repeat scroll 0% 0%; cursor: default;`); + this.getElement().setAttribute('onmouseover', `this.style.background='url(${PardusOptionsUtility.getImagePackUrl()}tabactive.png)';this.style.cursor='default'`); + this.getElement().setAttribute('onmouseout', `this.style.background='url(${PardusOptionsUtility.getImagePackUrl()}tab.png)'`); this.active = false; } } @@ -1088,7 +1092,7 @@ class TabsRow extends HtmlElement { } toString() { - return ``; + return ``; } } @@ -1130,7 +1134,7 @@ class ContentsArea extends HtmlElement { } toString() { - return ``; + return ``; } } @@ -1148,6 +1152,7 @@ class PardusOptions { // Give the Pardus options an appropriate id, and remove it from the DOM defaultPardusOptionsContent.setAttribute('id', 'options-content-pardus-default'); + defaultPardusOptionsContent.setAttribute('class', 'tabstyle'); defaultPardusOptionsContent.remove(); // Add this object to the DOM within the main containing element @@ -1182,7 +1187,7 @@ class PardusOptions { static getPardusOptionsElement() { const template = document.createElement('template'); - template.innerHTML = `${this.getContentElement()}
${this.getTabsElement()}
`; + template.innerHTML = `${this.getContentElement()}
${this.getTabsElement()}
`; return template.content.firstChild; }