BranchesTags

Repository files navigation

Joomla UI custom elements

Build Status

SauceLabs testsGreenKeeperWebcomponents.org
Sauce Test StatusGreenkeeper badgePublished on webcomponents.org
Sauce Labs
Browser Matrix

UI components using modern technologies

This is a collection of all the components that Joomla is using. They are developed with the new W3C standard: custom elements. Each component is using plain and optimized javascript for performance. Also the HTML markup (wherever possible) is reduced to offer a great benefit for front end developers).

Using the NPM power

You can install this package by using NPM:

$ npm i joomla-ui-custom-elements

Configuration

The prefix of all the elements is configuarable. To do so duplicate the file settings.yaml and name the new file as settings-custom.yaml. Open the file in your editor and change the prefix to your taste. (It needs to be one word - check the W3C speifications for valid custom element naming). Build your custom elements by executing:

$ grunt

The folder named dist contains all your elements.

Usage

For each component that you need to have available in your page you need to add the custom element in the head of the document:

<scriptsrc="joomla-alert.min.js"></script>

Tests

Once again we are using the great tools from the polymer team here! You will need wct (web component tester) installed globally. To do so just run npm install web-component-tester -g. You might need to run that command as sudo! After that, in the root folder of this project just run wct and see the status of the tests...

The default setup is based on MacOS system and looking for Chrome, Firefox and Safari browsers, you can change this by editing line 5 of https://github.com/joomla-projects/custom-elements/blob/master/wct.conf.json#L5

Browser support

Although all the major browsers are committed to support custom elements some of the all green browsers do need a polyfill. The polyfills can be found in the dist folder and are created by the Polymer team (Polymer is a Google project). The repo for the actual polyfill is: https://github.com/webcomponents/webcomponentsjs

Documentation

Fully documented here

License

The library is released under the GPL license

About

A compilation of Joomla 4 Custom Elements.

Topics

custom-elementsjavascriptjoomlaweb-componentswebcomponents

Resources

Readme
GPL-2.0 license

Code of conduct

Code of conduct

Security policy

Security policy
Activity
Custom properties

Stars

31 stars

Watchers

11 watching

Forks

32 forks
Report repository

Releases

Sponsor this project

Packages

Used by

Contributors

Languages

, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Add copy buttons to all 
 blocks\n(function() {\n function addCopyButtons() {\n document.querySelectorAll('pre code').forEach(function(codeBlock) {\n if (codeBlock.parentElement.hasAttribute('data-copy-added')) return;\n codeBlock.parentElement.setAttribute('data-copy-added', 'true');\n \n var btn = document.createElement('button');\n btn.textContent = 'Copy';\n btn.style.cssText = 'position:absolute;top:4px;right:4px;padding:2px 8px;font-size:11px;background:#4ecdc4;border:none;border-radius:4px;color:#1a1a2e;cursor:pointer;opacity:0.7;transition:opacity 0.2s;';\n btn.onmouseover = function() { this.style.opacity = '1'; };\n btn.onmouseout = function() { this.style.opacity = '0.7'; };\n btn.onclick = function() {\n navigator.clipboard.writeText(codeBlock.textContent).then(function() {\n btn.textContent = 'Copied!';\n setTimeout(function() { btn.textContent = 'Copy'; }, 1500);\n });\n };\n codeBlock.parentElement.style.position = 'relative';\n codeBlock.parentElement.appendChild(btn);\n });\n }\n \n addCopyButtons();\n \n // Re-run on dynamic content\n var observer = new MutationObserver(addCopyButtons);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Add Copy Buttons to Code Blocks");
}
} catch(__e) { console.warn('[Userscript:Add Copy Buttons to Code Blocks]', __e); }
})();
(function(){
try {
var __m = "github.com";
var __re = new RegExp('^' + "github\\.com" + '

Skip to content
BranchesTags
Repository files navigation
Joomla UI custom elements
Build Status
SauceLabs testsGreenKeeperWebcomponents.org
Sauce Test StatusGreenkeeper badgePublished on webcomponents.org
Sauce Labs
Browser Matrix
UI components using modern technologies
This is a collection of all the components that Joomla is using. They are developed with the new W3C standard: custom elements. Each component is using plain and optimized javascript for performance. Also the HTML markup (wherever possible) is reduced to offer a great benefit for front end developers).
Using the NPM power
You can install this package by using NPM:
$ npm i joomla-ui-custom-elements
Configuration
The prefix of all the elements is configuarable. To do so duplicate the file settings.yaml and name the new file as settings-custom.yaml. Open the file in your editor and change the prefix to your taste. (It needs to be one word - check the W3C speifications for valid custom element naming).
Build your custom elements by executing:
$ grunt
The folder named dist contains all your elements.
Usage
For each component that you need to have available in your page you need to add the custom element in the head of the document:
<scriptsrc="joomla-alert.min.js"></script>
Tests
Once again we are using the great tools from the polymer team here!
You will need wct (web component tester) installed globally. To do so just run npm install web-component-tester -g.
You might need to run that command as sudo!
After that, in the root folder of this project just run wct and see the status of the tests...
The default setup is based on MacOS system and looking for Chrome, Firefox and Safari browsers, you can change this by editing line 5 of https://github.com/joomla-projects/custom-elements/blob/master/wct.conf.json#L5
Browser support
Although all the major browsers are committed to support custom elements some of the all green browsers do need a polyfill. The polyfills can be found in the dist folder and are created by the Polymer team (Polymer is a Google project).
The repo for the actual polyfill is: https://github.com/webcomponents/webcomponentsjs
Documentation
Fully documented here
License
The library is released under the GPL license
About
A compilation of Joomla 4 Custom Elements.
Topics
custom-elementsjavascriptjoomlaweb-componentswebcomponents
Resources
Readme
GPL-2.0 license
Code of conduct
Code of conduct
Security policy
Security policy
Activity
Custom properties
Stars
31 stars
Watchers
11 watching
Forks
32 forks
Report repository
Releases
Sponsor this project
Packages
Used by
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Force GitHub README to respect dark mode\n(function() {\n var style = document.createElement('style');\n style.textContent = '\n .markdown-body {\n color-scheme: dark light;\n }\n .markdown-body pre { background: #161b22 !important; }\n .markdown-body code { background: rgba(110, 118, 129, 0.4) !important; }\n .markdown-body table th, .markdown-body table td { border-color: #30363d !important; }\n .markdown-body img { background: #0d1117; }\n .markdown-body blockquote { border-left-color: #8b949e; }\n .markdown-body hr { border-color: #30363d; }\n ';\n document.head.appendChild(style);\n})();", "GitHub Dark Mode README Fix");
}
} catch(__e) { console.warn('[Userscript:GitHub Dark Mode README Fix]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
BranchesTags
Repository files navigation
Joomla UI custom elements
Build Status
SauceLabs testsGreenKeeperWebcomponents.org
Sauce Test StatusGreenkeeper badgePublished on webcomponents.org
Sauce Labs
Browser Matrix
UI components using modern technologies
This is a collection of all the components that Joomla is using. They are developed with the new W3C standard: custom elements. Each component is using plain and optimized javascript for performance. Also the HTML markup (wherever possible) is reduced to offer a great benefit for front end developers).
Using the NPM power
You can install this package by using NPM:
$ npm i joomla-ui-custom-elements
Configuration
The prefix of all the elements is configuarable. To do so duplicate the file settings.yaml and name the new file as settings-custom.yaml. Open the file in your editor and change the prefix to your taste. (It needs to be one word - check the W3C speifications for valid custom element naming).
Build your custom elements by executing:
$ grunt
The folder named dist contains all your elements.
Usage
For each component that you need to have available in your page you need to add the custom element in the head of the document:
<scriptsrc="joomla-alert.min.js"></script>
Tests
Once again we are using the great tools from the polymer team here!
You will need wct (web component tester) installed globally. To do so just run npm install web-component-tester -g.
You might need to run that command as sudo!
After that, in the root folder of this project just run wct and see the status of the tests...
The default setup is based on MacOS system and looking for Chrome, Firefox and Safari browsers, you can change this by editing line 5 of https://github.com/joomla-projects/custom-elements/blob/master/wct.conf.json#L5
Browser support
Although all the major browsers are committed to support custom elements some of the all green browsers do need a polyfill. The polyfills can be found in the dist folder and are created by the Polymer team (Polymer is a Google project).
The repo for the actual polyfill is: https://github.com/webcomponents/webcomponentsjs
Documentation
Fully documented here
License
The library is released under the GPL license
About
A compilation of Joomla 4 Custom Elements.
Topics
custom-elementsjavascriptjoomlaweb-componentswebcomponents
Resources
Readme
GPL-2.0 license
Code of conduct
Code of conduct
Security policy
Security policy
Activity
Custom properties
Stars
31 stars
Watchers
11 watching
Forks
32 forks
Report repository
Releases
Sponsor this project
Packages
Used by
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Highlight search terms from Google/DuckDuckGo/Bing referrer\n(function() {\n var ref = document.referrer;\n var terms = [];\n \n if (ref.includes('google.com') || ref.includes('duckduckgo.com') || ref.includes('bing.com')) {\n var url = new URL(ref);\n var q = url.searchParams.get('q') || url.searchParams.get('p');\n if (q) {\n terms = q.split(/\\s+/).filter(function(t) { return t.length > 2; });\n }\n }\n \n if (terms.length === 0) return;\n \n var style = document.createElement('style');\n style.textContent = '.userscript-highlight { background: #fbbf24; color: #1a1a2e; padding: 1px 3px; border-radius: 2px; }';\n document.head.appendChild(style);\n \n function highlight(node) {\n if (node.nodeType === 3) { // text node\n var text = node.textContent;\n var found = false;\n terms.forEach(function(term) {\n var regex = new RegExp('(' + term.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\') + ')', 'gi');\n if (regex.test(text)) {\n found = true;\n var frag = document.createDocumentFragment();\n var parts = text.split(regex);\n parts.forEach(function(part, i) {\n if (i % 2 === 0) {\n frag.appendChild(document.createTextNode(part));\n } else {\n var span = document.createElement('span');\n span.className = 'userscript-highlight';\n span.textContent = part;\n frag.appendChild(span);\n }\n });\n node.parentNode.replaceChild(frag, node);\n }\n });\n } else if (node.nodeType === 1 && node.childNodes) { // element\n var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT'];\n if (!skipTags.includes(node.tagName)) {\n Array.from(node.childNodes).forEach(highlight);\n }\n }\n }\n \n highlight(document.body);\n \n // Re-highlight on dynamic content\n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1 || node.nodeType === 3) highlight(node);\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Highlight Search Terms");
}
} catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
BranchesTags
Repository files navigation
Joomla UI custom elements
Build Status
SauceLabs testsGreenKeeperWebcomponents.org
Sauce Test StatusGreenkeeper badgePublished on webcomponents.org
Sauce Labs
Browser Matrix
UI components using modern technologies
This is a collection of all the components that Joomla is using. They are developed with the new W3C standard: custom elements. Each component is using plain and optimized javascript for performance. Also the HTML markup (wherever possible) is reduced to offer a great benefit for front end developers).
Using the NPM power
You can install this package by using NPM:
$ npm i joomla-ui-custom-elements
Configuration
The prefix of all the elements is configuarable. To do so duplicate the file settings.yaml and name the new file as settings-custom.yaml. Open the file in your editor and change the prefix to your taste. (It needs to be one word - check the W3C speifications for valid custom element naming).
Build your custom elements by executing:
$ grunt
The folder named dist contains all your elements.
Usage
For each component that you need to have available in your page you need to add the custom element in the head of the document:
<scriptsrc="joomla-alert.min.js"></script>
Tests
Once again we are using the great tools from the polymer team here!
You will need wct (web component tester) installed globally. To do so just run npm install web-component-tester -g.
You might need to run that command as sudo!
After that, in the root folder of this project just run wct and see the status of the tests...
The default setup is based on MacOS system and looking for Chrome, Firefox and Safari browsers, you can change this by editing line 5 of https://github.com/joomla-projects/custom-elements/blob/master/wct.conf.json#L5
Browser support
Although all the major browsers are committed to support custom elements some of the all green browsers do need a polyfill. The polyfills can be found in the dist folder and are created by the Polymer team (Polymer is a Google project).
The repo for the actual polyfill is: https://github.com/webcomponents/webcomponentsjs
Documentation
Fully documented here
License
The library is released under the GPL license
About
A compilation of Joomla 4 Custom Elements.
Topics
custom-elementsjavascriptjoomlaweb-componentswebcomponents
Resources
Readme
GPL-2.0 license
Code of conduct
Code of conduct
Security policy
Security policy
Activity
Custom properties
Stars
31 stars
Watchers
11 watching
Forks
32 forks
Report repository
Releases
Sponsor this project
Packages
Used by
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Strip utm_, fbclid, gclid, etc. from all links on page\n(function() {\n var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content',\n 'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid',\n 'ref', 'ref_src', 'source', 'medium', 'campaign'];\n \n function cleanUrl(url) {\n try {\n var u = new URL(url, window.location.origin);\n var changed = false;\n trackingParams.forEach(function(p) {\n if (u.searchParams.has(p)) {\n u.searchParams.delete(p);\n changed = true;\n }\n });\n return changed ? u.toString() : url;\n } catch (e) {\n return url;\n }\n }\n \n function cleanLinks() {\n document.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n \n cleanLinks();\n \n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1) {\n if (node.tagName === 'A') cleanLinks();\n node.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Remove Tracking Parameters from Links");
}
} catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); }
})();
(function(){
try {
var __m = "youtube.com";
var __re = new RegExp('^' + "youtube\\.com" + '

Skip to content
BranchesTags
Repository files navigation
Joomla UI custom elements
Build Status
SauceLabs testsGreenKeeperWebcomponents.org
Sauce Test StatusGreenkeeper badgePublished on webcomponents.org
Sauce Labs
Browser Matrix
UI components using modern technologies
This is a collection of all the components that Joomla is using. They are developed with the new W3C standard: custom elements. Each component is using plain and optimized javascript for performance. Also the HTML markup (wherever possible) is reduced to offer a great benefit for front end developers).
Using the NPM power
You can install this package by using NPM:
$ npm i joomla-ui-custom-elements
Configuration
The prefix of all the elements is configuarable. To do so duplicate the file settings.yaml and name the new file as settings-custom.yaml. Open the file in your editor and change the prefix to your taste. (It needs to be one word - check the W3C speifications for valid custom element naming).
Build your custom elements by executing:
$ grunt
The folder named dist contains all your elements.
Usage
For each component that you need to have available in your page you need to add the custom element in the head of the document:
<scriptsrc="joomla-alert.min.js"></script>
Tests
Once again we are using the great tools from the polymer team here!
You will need wct (web component tester) installed globally. To do so just run npm install web-component-tester -g.
You might need to run that command as sudo!
After that, in the root folder of this project just run wct and see the status of the tests...
The default setup is based on MacOS system and looking for Chrome, Firefox and Safari browsers, you can change this by editing line 5 of https://github.com/joomla-projects/custom-elements/blob/master/wct.conf.json#L5
Browser support
Although all the major browsers are committed to support custom elements some of the all green browsers do need a polyfill. The polyfills can be found in the dist folder and are created by the Polymer team (Polymer is a Google project).
The repo for the actual polyfill is: https://github.com/webcomponents/webcomponentsjs
Documentation
Fully documented here
License
The library is released under the GPL license
About
A compilation of Joomla 4 Custom Elements.
Topics
custom-elementsjavascriptjoomlaweb-componentswebcomponents
Resources
Readme
GPL-2.0 license
Code of conduct
Code of conduct
Security policy
Security policy
Activity
Custom properties
Stars
31 stars
Watchers
11 watching
Forks
32 forks
Report repository
Releases
Sponsor this project
Packages
Used by
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Auto-enable theater mode on YouTube\n(function() {\n function tryTheater() {\n var btn = document.querySelector('button[aria-label=\"Theater mode\"], ytd-player #player button[title=\"Theater mode\"]');\n if (btn && !btn.classList.contains('activated')) {\n btn.click();\n }\n }\n \n // Try immediately\n tryTheater();\n \n // Try after navigation (SPA)\n var lastUrl = location.href;\n setInterval(function() {\n if (location.href !== lastUrl) {\n lastUrl = location.href;\n setTimeout(tryTheater, 500);\n }\n }, 1000);\n \n // Also try on player load\n var observer = new MutationObserver(tryTheater);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "YouTube Theater Mode Default");
}
} catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
BranchesTags
Repository files navigation
Joomla UI custom elements
Build Status
SauceLabs testsGreenKeeperWebcomponents.org
Sauce Test StatusGreenkeeper badgePublished on webcomponents.org
Sauce Labs
Browser Matrix
UI components using modern technologies
This is a collection of all the components that Joomla is using. They are developed with the new W3C standard: custom elements. Each component is using plain and optimized javascript for performance. Also the HTML markup (wherever possible) is reduced to offer a great benefit for front end developers).
Using the NPM power
You can install this package by using NPM:
$ npm i joomla-ui-custom-elements
Configuration
The prefix of all the elements is configuarable. To do so duplicate the file settings.yaml and name the new file as settings-custom.yaml. Open the file in your editor and change the prefix to your taste. (It needs to be one word - check the W3C speifications for valid custom element naming).
Build your custom elements by executing:
$ grunt
The folder named dist contains all your elements.
Usage
For each component that you need to have available in your page you need to add the custom element in the head of the document:
<scriptsrc="joomla-alert.min.js"></script>
Tests
Once again we are using the great tools from the polymer team here!
You will need wct (web component tester) installed globally. To do so just run npm install web-component-tester -g.
You might need to run that command as sudo!
After that, in the root folder of this project just run wct and see the status of the tests...
The default setup is based on MacOS system and looking for Chrome, Firefox and Safari browsers, you can change this by editing line 5 of https://github.com/joomla-projects/custom-elements/blob/master/wct.conf.json#L5
Browser support
Although all the major browsers are committed to support custom elements some of the all green browsers do need a polyfill. The polyfills can be found in the dist folder and are created by the Polymer team (Polymer is a Google project).
The repo for the actual polyfill is: https://github.com/webcomponents/webcomponentsjs
Documentation
Fully documented here
License
The library is released under the GPL license
About
A compilation of Joomla 4 Custom Elements.
Topics
custom-elementsjavascriptjoomlaweb-componentswebcomponents
Resources
Readme
GPL-2.0 license
Code of conduct
Code of conduct
Security policy
Security policy
Activity
Custom properties
Stars
31 stars
Watchers
11 watching
Forks
32 forks
Report repository
Releases
Sponsor this project
Packages
Used by
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Remove or un-stick sticky/fixed headers that block content\n(function() {\n function unstick() {\n document.querySelectorAll('header, nav, [role=\"banner\"], .header, .navbar, .sticky, .fixed-top, [style*=\"position: fixed\"], [style*=\"position:sticky\"]').forEach(function(el) {\n if (el.style.position === 'fixed' || el.style.position === 'sticky' || \n getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') {\n el.style.position = 'static';\n el.style.top = 'auto';\n el.style.zIndex = 'auto';\n }\n });\n }\n \n unstick();\n \n var observer = new MutationObserver(unstick);\n observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] });\n})();", "Kill Sticky Headers");
}
} catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
BranchesTags
Repository files navigation
Joomla UI custom elements
Build Status
SauceLabs testsGreenKeeperWebcomponents.org
Sauce Test StatusGreenkeeper badgePublished on webcomponents.org
Sauce Labs
Browser Matrix
UI components using modern technologies
This is a collection of all the components that Joomla is using. They are developed with the new W3C standard: custom elements. Each component is using plain and optimized javascript for performance. Also the HTML markup (wherever possible) is reduced to offer a great benefit for front end developers).
Using the NPM power
You can install this package by using NPM:
$ npm i joomla-ui-custom-elements
Configuration
The prefix of all the elements is configuarable. To do so duplicate the file settings.yaml and name the new file as settings-custom.yaml. Open the file in your editor and change the prefix to your taste. (It needs to be one word - check the W3C speifications for valid custom element naming).
Build your custom elements by executing:
$ grunt
The folder named dist contains all your elements.
Usage
For each component that you need to have available in your page you need to add the custom element in the head of the document:
<scriptsrc="joomla-alert.min.js"></script>
Tests
Once again we are using the great tools from the polymer team here!
You will need wct (web component tester) installed globally. To do so just run npm install web-component-tester -g.
You might need to run that command as sudo!
After that, in the root folder of this project just run wct and see the status of the tests...
The default setup is based on MacOS system and looking for Chrome, Firefox and Safari browsers, you can change this by editing line 5 of https://github.com/joomla-projects/custom-elements/blob/master/wct.conf.json#L5
Browser support
Although all the major browsers are committed to support custom elements some of the all green browsers do need a polyfill. The polyfills can be found in the dist folder and are created by the Polymer team (Polymer is a Google project).
The repo for the actual polyfill is: https://github.com/webcomponents/webcomponentsjs
Documentation
Fully documented here
License
The library is released under the GPL license
About
A compilation of Joomla 4 Custom Elements.
Topics
custom-elementsjavascriptjoomlaweb-componentswebcomponents
Resources
Readme
GPL-2.0 license
Code of conduct
Code of conduct
Security policy
Security policy
Activity
Custom properties
Stars
31 stars
Watchers
11 watching
Forks
32 forks
Report repository
Releases
Sponsor this project
Packages
Used by
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Universal Dark Mode - works on any site\n(function() {\n var enabled = true;\n \n function applyDarkMode() {\n if (!enabled) return;\n \n // Create style element if it doesn't exist\n var style = document.getElementById('universal-dark-mode-style');\n if (!style) {\n style = document.createElement('style');\n style.id = 'universal-dark-mode-style';\n document.head.appendChild(style);\n }\n \n // Dark mode CSS - inverts colors but preserves images/video\n style.textContent = '\n /* Invert everything except media */\n html {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #1a1a2e !important;\n }\n \n /* Restore images, videos, iframes, canvas */\n img, video, iframe, canvas, svg, picture, [style*=\"background-image\"] {\n filter: invert(1) hue-rotate(180deg) !important;\n }\n \n /* Preserve specific elements that should not be inverted */\n .no-dark-mode, .no-dark-mode *,\n [data-theme=\"light\"], [data-theme=\"light\"],\n .ace_editor, .ace_editor *,\n .CodeMirror, .CodeMirror *,\n .monaco-editor, .monaco-editor *,\n .markdown-body pre, .markdown-body pre *,\n .highlight, .highlight *,\n pre code, pre code * {\n filter: none !important;\n }\n \n /* Fix common UI elements */\n .modal, .popup, .dropdown-menu, .tooltip, .popover {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #2d2d44 !important;\n border-color: #444 !important;\n }\n \n /* Scrollbars */\n ::-webkit-scrollbar { background: #1a1a2e !important; }\n ::-webkit-scrollbar-thumb { background: #444 !important; }\n ::-webkit-scrollbar-thumb:hover { background: #555 !important; }\n \n /* Selection */\n ::selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ::-moz-selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ';\n }\n \n function removeDarkMode() {\n var style = document.getElementById('universal-dark-mode-style');\n if (style) style.remove();\n }\n \n // Toggle with Alt+Shift+D\n document.addEventListener('keydown', function(e) {\n if (e.altKey && e.shiftKey && e.key === 'D') {\n e.preventDefault();\n enabled = !enabled;\n if (enabled) {\n applyDarkMode();\n console.log('[Universal Dark Mode] Enabled');\n } else {\n removeDarkMode();\n console.log('[Universal Dark Mode] Disabled');\n }\n }\n });\n \n // Apply on load\n applyDarkMode();\n \n // Re-apply on dynamic content\n var observer = new MutationObserver(function(mutations) {\n if (enabled && !document.getElementById('universal-dark-mode-style')) {\n applyDarkMode();\n }\n });\n observer.observe(document.head, { childList: true });\n \n console.log('[Universal Dark Mode] Loaded - Press Alt+Shift+D to toggle');\n})();", "Universal Dark Mode");
}
} catch(__e) { console.warn('[Userscript:Universal Dark Mode]', __e); }
})();
})();

Skip to content
BranchesTags
Repository files navigation
Joomla UI custom elements
Build Status
SauceLabs testsGreenKeeperWebcomponents.org
Sauce Test StatusGreenkeeper badgePublished on webcomponents.org
Sauce Labs
Browser Matrix
UI components using modern technologies
This is a collection of all the components that Joomla is using. They are developed with the new W3C standard: custom elements. Each component is using plain and optimized javascript for performance. Also the HTML markup (wherever possible) is reduced to offer a great benefit for front end developers).
Using the NPM power
You can install this package by using NPM:
$ npm i joomla-ui-custom-elements
Configuration
The prefix of all the elements is configuarable. To do so duplicate the file settings.yaml and name the new file as settings-custom.yaml. Open the file in your editor and change the prefix to your taste. (It needs to be one word - check the W3C speifications for valid custom element naming).
Build your custom elements by executing:
$ grunt
The folder named dist contains all your elements.
Usage
For each component that you need to have available in your page you need to add the custom element in the head of the document:
<scriptsrc="joomla-alert.min.js"></script>
Tests
Once again we are using the great tools from the polymer team here!
You will need wct (web component tester) installed globally. To do so just run npm install web-component-tester -g.
You might need to run that command as sudo!
After that, in the root folder of this project just run wct and see the status of the tests...
The default setup is based on MacOS system and looking for Chrome, Firefox and Safari browsers, you can change this by editing line 5 of https://github.com/joomla-projects/custom-elements/blob/master/wct.conf.json#L5
Browser support
Although all the major browsers are committed to support custom elements some of the all green browsers do need a polyfill. The polyfills can be found in the dist folder and are created by the Polymer team (Polymer is a Google project).
The repo for the actual polyfill is: https://github.com/webcomponents/webcomponentsjs
Documentation
Fully documented here
License
The library is released under the GPL license
About
A compilation of Joomla 4 Custom Elements.
Topics
custom-elementsjavascriptjoomlaweb-componentswebcomponents
Resources
Readme
GPL-2.0 license
Code of conduct
Code of conduct
Security policy
Security policy
Activity
Custom properties
Stars
31 stars
Watchers
11 watching
Forks
32 forks
Report repository
Releases
Sponsor this project
Packages
Used by
Contributors
Languages