[4.0][RFC] svg icons instead of the ugly gif

build/build-modules-js/settings.json

@@ -16,9 +16,14 @@
       "editor-codemirror",
       "hidden-mail",
       "editor-none",
-      "toolbar-button"
+      "toolbar-button",
+      "language-flag"
     ],
     "webcomponents": {
+      "language-flag": {
+        "css": "media/system/webcomponents/css",
+        "js": "media/system/webcomponents/js"
+      },
       "field-media": {
         "css": "media/system/webcomponents/css",
         "js": "media/system/webcomponents/js"

build/media/mod_languages/css/template.css

@@ -1,26 +1,25 @@
-div.mod-languages ul {
+.mod-languages__list {
 	margin: 0;
 	padding: 0;
-	list-style:none;
+	list-style: none;
 }
-div.mod-languages li {
+
+.mod-languages__list li {
 	margin-left: 5px;
 	margin-right: 5px;
 }
 
-div.mod-languages ul.lang-inline li {
+.mod-languages__list.lang-inline {
+	margin: 0;
+	padding: 0;
+	list-style: none;
 	display:inline-block;
 }
 
-div.mod-languages ul.lang-block li {
+.mod-languages__list > .lang-block {
 	display:block;
 }
 
-div.mod-languages img {
-	border:none;
-	display:inline-block;
-}
-
-div.mod-languages a {
+.mod-languages__list > a {
 	text-decoration: none;
 }

build/media/webcomponents/js/language-flag/language-flag.js

@@ -0,0 +1,35 @@
+class LanguageFlag extends HTMLElement {
+  constructor() {
+    super();
+  }
+  connectedCallback() {
+    const style = this.style;
+    style.display = 'inline-block';
+    style.position = 'relative';
+    style.backgroundSize = 'contain';
+    style.backgroundPosition = '50%';
+    style.backgroundRepeat = 'no-repeat';
+    style.height = '1em';
+
+    this.render()
+  }
+
+  // @todo use images from: https://github.com/lipis/flag-icon-css
+  get path() { return 'https://cdnjs.cloudflare.com/ajax/libs/flag-icon-css/3.1.0/flags'}
+  set path(value) {
+    this.path = value;
+    this.render()
+  }
+
+  get country() { return this.getAttribute('country') }
+  set country(value) {
+    this.setAttribute('country', value);
+    this.render()
+  }
+
+  render() {
+    this.style.backgroundImage = `url(${this.path}/1x1/${this.country.toLowerCase()}.svg)`;
+    this.style.width = '1em';
+  }
+}
+customElements.define('joomla-language-flag', LanguageFlag);

modules/mod_languages/tmpl/default.php

@@ -13,12 +13,8 @@
 use Joomla\CMS\HTML\HTMLHelper;
 use Joomla\CMS\Uri\Uri;
 
-HTMLHelper::_('stylesheet', 'mod_languages/template.css', array('version' => 'auto', 'relative' => true));
-
-if ($params->get('dropdown', 1) && !$params->get('dropdownimage', 0))
-{
-	HTMLHelper::_('formbehavior.chosen');
-}
+HTMLHelper::_('stylesheet', 'mod_languages/template.min.css', ['version' => 'auto', 'relative' => true]);
+HTMLHelper::_('webcomponent', 'system/webcomponents/joomla-language-flag.min.js', ['version' => 'auto', 'relative' => true]);
 ?>
 <div class="mod-languages">
 <?php if ($headerText) : ?>
@@ -27,7 +23,7 @@
 
 <?php if ($params->get('dropdown', 1) && !$params->get('dropdownimage', 0)) : ?>
 	<form name="lang" method="post" action="<?php echo htmlspecialchars(Uri::current(), ENT_COMPAT, 'UTF-8'); ?>">
-	<select class="inputbox advancedSelect" onchange="document.location.replace(this.value);" >
+	<select class="inputbox" onchange="document.location.replace(this.value);" >
 	<?php foreach ($list as $language) : ?>
 		<option dir=<?php echo $language->rtl ? '"rtl"' : '"ltr"'; ?> value="<?php echo $language->link; ?>" <?php echo $language->active ? 'selected="selected"' : ''; ?>>
 		<?php echo $params->get('full_name', 1) ? $language->title_native : strtoupper($language->sef); ?></option>
@@ -41,7 +37,7 @@
 				<a href="#" data-toggle="dropdown" class="btn dropdown-toggle">
 					<span class="caret"></span>
 					<?php if ($language->image) : ?>
-						&nbsp;<?php echo HTMLHelper::_('image', 'mod_languages/' . $language->image . '.gif', '', null, true); ?>
+						&nbsp;<joomla-language-flag country="<?php echo substr($language->image, 3); ?>"></joomla-language-flag>
 					<?php endif; ?>
 					<?php echo $params->get('full_name', 1) ? $language->title_native : strtoupper($language->sef); ?>
 				</a>
@@ -53,7 +49,7 @@
 				<li<?php echo $language->active ? ' class="lang-active"' : ''; ?>>
 				<a href="<?php echo $language->link; ?>">
 					<?php if ($language->image) : ?>
-						<?php echo HTMLHelper::_('image', 'mod_languages/' . $language->image . '.gif', '', null, true); ?>
+						<joomla-language-flag country="<?php echo substr($language->image, 3); ?>"></joomla-language-flag>
 					<?php endif; ?>
 					<?php echo $params->get('full_name', 1) ? $language->title_native : strtoupper($language->sef); ?>
 				</a>
@@ -70,7 +66,7 @@
 			<a href="<?php echo $language->link; ?>">
 			<?php if ($params->get('image', 1)) : ?>
 				<?php if ($language->image) : ?>
-					<?php echo HTMLHelper::_('image', 'mod_languages/' . $language->image . '.gif', $language->title_native, array('title' => $language->title_native), true); ?>
+					<joomla-language-flag country="<?php echo substr($language->image, 3); ?>"></joomla-language-flag>
 				<?php else : ?>
 					<span class="badge badge-secondary"><?php echo strtoupper($language->sef); ?></span>
 				<?php endif; ?>