From cd6ec7400c323c1034cbbbb6e187d9574c8dfa2b Mon Sep 17 00:00:00 2001
From: Alex Tselegidis <alextselegidis@gmail.com>
Date: Mon, 17 Jan 2022 17:42:12 +0100
Subject: [PATCH] Create new lang utility.

---
 assets/js/utils/lang.js | 78 +++++++++++++++++++++++++++++++++++++++++
 1 file changed, 78 insertions(+)
 create mode 100644 assets/js/utils/lang.js

diff --git a/assets/js/utils/lang.js b/assets/js/utils/lang.js
new file mode 100644
index 00000000..ff215d5e
--- /dev/null
+++ b/assets/js/utils/lang.js
@@ -0,0 +1,78 @@
+/* ----------------------------------------------------------------------------
+ * Easy!Appointments - Open Source Web Scheduler
+ *
+ * @package     EasyAppointments
+ * @author      A.Tselegidis <alextselegidis@gmail.com>
+ * @copyright   Copyright (c) Alex Tselegidis
+ * @license     https://opensource.org/licenses/GPL-3.0 - GPLv3
+ * @link        https://easyappointments.org
+ * @since       v1.5.0
+ * ---------------------------------------------------------------------------- */
+
+/**
+ * Lang utility.
+ *
+ * This module implements the functionality of dates.
+ */
+window.App.Utils.Lang = (function () {
+    /**
+     * Enable Language Selection
+     *
+     * Enables the language selection functionality. Must be called on every page has a language selection button.
+     * This method requires the global variable 'availableLanguages' to be initialized before the execution.
+     *
+     * @param {Object} $target Selected element button for the language selection.
+     */
+    function enableLanguageSelection($target) {
+        // Select Language
+        const $languageList = $('<ul/>', {
+            'id': 'language-list',
+            'html': availableLanguages.map((availableLanguage) =>
+                $('<li/>', {
+                    'class': 'language',
+                    'data-language': availableLanguage,
+                    'text': GeneralFunctions.upperCaseFirstLetter(availableLanguage)
+                })
+            )
+        });
+
+        $target.popover({
+            placement: 'top',
+            title: 'Select Language',
+            content: $languageList[0],
+            html: true,
+            container: 'body',
+            trigger: 'manual'
+        });
+
+        $target.on('click', function (event) {
+            event.stopPropagation();
+
+            const $target = $(event.target);
+
+            if ($('#language-list').length === 0) {
+                $target.popover('show');
+            } else {
+                $target.popover('hide');
+            }
+
+            $target.toggleClass('active');
+        });
+
+        $(document).on('click', 'li.language', (event) => {
+            // Change language with HTTP request and refresh page.
+
+            const language = $(event.target).data('language');
+
+            App.Http.Account.changeLanguage(language).done(() => document.location.reload());
+        });
+
+        $(document).on('click', () => {
+            $target.popover('hide');
+        });
+    }
+
+    return {
+        enableLanguageSelection
+    };
+})();