diff --git a/assets/css/components/languagePicker.css b/assets/css/components/languagePicker.css new file mode 100644 index 00000000..2b6e30b2 --- /dev/null +++ b/assets/css/components/languagePicker.css @@ -0,0 +1,9 @@ +/** + * Language picker modal stylesheet + * + * @author Pierre HUBERT + */ + +.pick-language-modal .modal-body { + text-align: center; +} \ No newline at end of file diff --git a/assets/js/common/functionsSchema.js b/assets/js/common/functionsSchema.js index e4d9aab3..bd9ed2b7 100644 --- a/assets/js/common/functionsSchema.js +++ b/assets/js/common/functionsSchema.js @@ -523,6 +523,13 @@ var ComunicWeb = { }, + /** + * Language picker + */ + langPicker: { + //TODO : implement + }, + /** * Mails caching component */ diff --git a/assets/js/components/bottom/main.js b/assets/js/components/bottom/main.js index f32893b6..511c2c52 100644 --- a/assets/js/components/bottom/main.js +++ b/assets/js/components/bottom/main.js @@ -49,6 +49,9 @@ ComunicWeb.components.bottom.main = { type: "a", innerHTML: " Language" }); + langLink.onclick = function(){ + ComunicWeb.components.langPicker.show(); + }; } } \ No newline at end of file diff --git a/assets/js/components/languagePicker.js b/assets/js/components/languagePicker.js new file mode 100644 index 00000000..e66f7ae9 --- /dev/null +++ b/assets/js/components/languagePicker.js @@ -0,0 +1,132 @@ +/** + * Language picker + * + * @author Pierre HUBERT + */ + +ComunicWeb.components.langPicker = { + + /** + * Show the language picker + */ + show: function(){ + + //Create a modal root + var modal = createElem2({ + type: "div", + class: "modal modal-primary pick-language-modal" + }); + + var modalDialog = createElem2({ + appendTo: modal, + type: "div", + class: "modal-dialog" + }); + + var modalContent = createElem2({ + appendTo: modalDialog, + type: "div", + class: "modal-content", + }); + + //Modal header + var modalHeader = createElem2({ + appendTo: modalContent, + type: "div", + class: "modal-header" + }); + + var closeModal = createElem2({ + appendTo: modalHeader, + type: "button", + class: "close", + }); + + createElem2({ + appendTo: closeModal, + type: "span", + innerHTML: "x" + }); + + var modalTitle = createElem2({ + appendTo: modalHeader, + type: "h4", + class: "modal-title", + innerHTML: "Change the language" + }); + + //Modal body + var modalBody = createElem2({ + appendTo: modalContent, + type: "div", + class: "modal-body", + }); + + //Display the list of languages + var langs = [ + ["fr", "Français"], + ["en", "English"] + ]; + + var buttons = []; + langs.forEach(lang => { + + const button = createElem2({ + appendTo: modalBody, + type: "div", + class: "btn btn-default", + innerHTML: lang[1] + }); + button.setAttribute("data-lang", lang[0]); + buttons.push(button); + + add_space(modalBody); + + }); + + //Modal footer + var modalFooter = createElem2({ + appendTo: modalContent, + type: "div", + class: "modal-footer" + }); + + var cancelButton = createElem2({ + appendTo: modalFooter, + type: "button", + class: "btn btn-default", + innerHTML: "Cancel" + }); + + + var closeModal = function(){ + //Close modal + $(modal).modal('hide'); + emptyElem(modal); + modal.remove(); + } + + //Create the response function + var respond = function(){ + + //Close the modal + closeModal(); + + //Set the language + ComunicWeb.common.langs.setLang(this.getAttribute("data-lang")); + + //Restart the app + ComunicWeb.common.system.reset(); + } + buttons.forEach(btn => {btn.onclick = respond;}); + + //Make the buttons live + cancelButton.onclick = closeModal; + closeModal.onclick = closeModal; + + //Show the modal + $(modal).modal('show'); + + } + +} \ No newline at end of file diff --git a/system/config/dev.config.php b/system/config/dev.config.php index 5360ac30..f682ced6 100644 --- a/system/config/dev.config.php +++ b/system/config/dev.config.php @@ -116,6 +116,9 @@ class Dev { //Components stylesheets //Menubar stylesheet "css/components/menuBar.css", + + //Language picker stylesheet + "css/components/languagePicker.css", //Searchform stylesheet "css/components/searchForm.css", @@ -214,6 +217,9 @@ class Dev { //Bottom view "js/components/bottom/main.js", + + //Language picker + "js/components/languagePicker.js", //Friends components "js/components/friends/friendsList.js",