diff --git a/ReadMe.md b/ReadMe.md index abae31e..ff8b965 100644 --- a/ReadMe.md +++ b/ReadMe.md @@ -1,3 +1,7 @@ + +[localization](https://codesandbox.io/s/i18n-example-ipfeu?from-embed=&file=/i18n/de.json:0-652) + + Thanks for downloading this theme! ## Other Useful Links diff --git a/css/style.css b/css/style.css index f977529..f4a1039 100644 --- a/css/style.css +++ b/css/style.css @@ -1135,8 +1135,8 @@ form label { .plus-button a { - width: 70px; - height: 70px; + width: 50px; + height: 50px; background:#F14E95; display: table; text-align: center; @@ -1151,7 +1151,7 @@ form label { { display: table-cell; vertical-align: middle; - height: 60px; + height: 50px; font-size: 40px; line-height: 40px; color: #efefef; diff --git a/i18n/de.json b/i18n/de.json new file mode 100644 index 0000000..b73119a --- /dev/null +++ b/i18n/de.json @@ -0,0 +1,16 @@ +{ + "top_left_title": "Hochzeit", + "welcoming_title": "Wir werden am 01.07.2022 heiraten!", + "invitation_text": "Liebe Gäste, zu unserer Hochzeit laden wir euch recht herzlich ein. Bitte gebt uns mit folgendem Formular bis zum 03.03.2022 Bescheid, ob ihr teilnehmt! Über das Plus-Symbol könnt ihr eure Begleitpersonen hinzufügen. Falls ihr nicht teilnehmen könnt, bitte einfach die Seite wieder verlassen. Die Feier wird in 55234 Kettenheim (DE) stattfinden.", + "header_text": "Nimmst du teil?", + "greetings": "Liebe Grüße
Draga & Julian", + "guest_count": "Geschätzte Gäste", + "firstname": "Vorname", + "lastname": "Nachname", + "E-Mail": "E-Mail", + "telephone_number": "Telefonnummer", + "submit": "Absenden", + "already_participating": "Bereits teilgenommen", + "success_title": "Teilgenommen", + "success_text": "Wir freuen uns auf euch!" +} \ No newline at end of file diff --git a/i18n/hr.json b/i18n/hr.json new file mode 100644 index 0000000..d63b968 --- /dev/null +++ b/i18n/hr.json @@ -0,0 +1,16 @@ +{ + "top_left_title": "Vjenčanje", + "welcoming_title": "Vjenčajmo se 01.07.2022 !", + "invitation_text": "Dragi gosti, srdačno Vas pozivamo na naše vjenčanje. Molimo vas da nam do 3. ožujka 2022 javite hoćete li sudjelovati putem sljedećeg obrasca! Svoje pratitelje možete dodati putem simbola plus. Ako niste u mogućnosti sudjelovati, jednostavno napustite stranicu. Proslava će se održati u 55234 Kettenheim (Njemačka).", + "header_text": "Hoćete doc?", + "greetings": "Topli pozdravi
Draga & Julian", + "guest_count": "broj Gostiju", + "firstname": "Ime", + "lastname": "prezime", + "E-Mail": "E-Mail", + "telephone_number": "broj telefona", + "submit": "podnijeti", + "already_participating": "Već sudjelovali", + "success_title": "Sudjelovali", + "success_text": "Veselimo se vasem sudjelovanju!" +} \ No newline at end of file diff --git a/index.html b/index.html index 2f4645a..fe0ec84 100644 --- a/index.html +++ b/index.html @@ -9,7 +9,7 @@ - Hochzeit — 100% Free Fully Responsive HTML5 Template by FREEHTML5.co + Hochzeit @@ -61,6 +61,9 @@ + + + @@ -78,7 +81,7 @@
@@ -95,7 +98,7 @@

Draga & Julian

-

Wir werden am 01.07.2022 heiraten!

+

Wir werden am 01.07.2022 heiraten!

@@ -108,45 +111,52 @@
-

Nimmst du teil?

-

Liebe Gäste, zu unserer Hochzeit laden wir euch recht herzlich ein. Bitte gebt uns mit +

Nimmst du teil?

+

Liebe Gäste, zu unserer Hochzeit laden wir euch recht herzlich ein. Bitte gebt uns mit folgendem Formular bis zum 03.03.2022 Bescheid, ob ihr teilnehmt! Über das Plus-Symbol könnt ihr eure Begleitpersonen hinzufügen. Falls ihr nicht teilnehmen könnt, bitte einfach die Seite wieder verlassen. Die Feier wird in 55234 Kettenheim (DE) stattfinden.

-

- Liebe Grüße
+

+ Liebe Grüße
Draga & Julian

-
+
-
+
-
-
+
-
-
+
-
+
+
+ + +
+
@@ -159,7 +169,7 @@
- +
@@ -170,7 +180,7 @@ 1 - Geschätzte Gäste + Geschätzte Gäste
@@ -182,7 +192,6 @@
- @@ -200,7 +209,8 @@ - + + @@ -212,17 +222,17 @@ // default example simplyCountdown('.simply-countdown-one', { year: d.getFullYear(), - month: d.getMonth() + 1, + month: d.getMonth(), day: d.getDate() }); //jQuery example - $('#simply-countdown-losange').simplyCountdown({ - year: d.getFullYear(), - month: d.getMonth() + 1, - day: d.getDate(), - enableUtc: false - }); + // $('#simply-countdown-losange').simplyCountdown({ + // year: d.getFullYear(), + // month: d.getMonth() + 1, + // day: d.getDate(), + // enableUtc: false + // }); diff --git a/js/main.js b/js/main.js index 5232694..c95ed98 100644 --- a/js/main.js +++ b/js/main.js @@ -182,8 +182,8 @@ }; - var addField = function() { - $('.js-addField').on('click', function(event){ + var addField = async function() { + $('.js-addField').on('click', async function(event){ event.preventDefault(); @@ -219,7 +219,8 @@ inputElement.setAttribute("type","firstname"); inputElement.classList.add('form-control'); inputElement.setAttribute("id","firstname"); - inputElement.setAttribute("placeholder","Vorname"); + let firstname_placeholder = await translator.getTranslationByKey(document.documentElement.lang,"firstname"); + inputElement.setAttribute("placeholder", firstname_placeholder); formGroupDiv.appendChild(inputElement); outerDiv.appendChild(firstNameDiv); @@ -244,13 +245,14 @@ firstNameInputElement.setAttribute("type","lastname"); firstNameInputElement.classList.add('form-control'); firstNameInputElement.setAttribute("id","lastname"); - firstNameInputElement.setAttribute("placeholder","Nachname"); + let lastname_placeholder = await translator.getTranslationByKey(document.documentElement.lang,"lastname"); + firstNameInputElement.setAttribute("placeholder", lastname_placeholder); lastnameFormGroupDiv.appendChild(firstNameInputElement); outerDiv.appendChild(lastNameDiv); container.appendChild(outerDiv); - + return false; }); } @@ -304,12 +306,7 @@ }()); - - - -//var form = document.getElementById("js-submitbtn"); - -document.getElementById("js-submitbtn").addEventListener("click", function () { +document.getElementById("js-submitbtn").addEventListener("click", async function () { //form.submit(); //console.log("Hello world!"); @@ -319,8 +316,196 @@ document.getElementById("js-submitbtn").addEventListener("click", function () { console.log("Vorname:" + inputs[0].value); console.log("Nachname:" + inputs[1].value); console.log("Telefon:" + inputs[2].value); - for (let i = 3; i < inputs.length; i+=2) { + console.log("E-Mail:" + inputs[3].value); + for (let i = 4; i < inputs.length; i+=2) { console.log("Mitbringsel:" + inputs[i].value, inputs[i+1].value); } - }); \ No newline at end of file + + //Swal.fire("Our First Alert", "With some body text and success icon!", "success"); + + + document.getElementById("attentant-container").remove(); + document.getElementById("js-submitbtn").disabled = 'true'; + document.getElementById("js-submitbtn").textContent = await translator.getTranslationByKey(document.documentElement.lang,"already_participating"); + + let title = 'Teilgenommen'; + let text = "Wir freuen uns auf euch!"; + title = await translator.getTranslationByKey(document.documentElement.lang,"success_title"); + text = await translator.getTranslationByKey(document.documentElement.lang,"success_text"); + console.log(document.documentElement.lang); + + swal({ + title: title, + text: text, + type: 'success', + showConfirmButton: false, + timer: 2000 + }).then(function () { + // swal( 'Ready?!', 'Your form is going to be submitted.' 'success'); + //document.querySelector('#myfrm').submit(); // manully submit + }).catch(function(timeout) { }); + + + //TODO: Refresh attentats count + }); + + + class Translator { + constructor(options = {}) { + this._options = Object.assign({}, this.defaultConfig, options); + this._elements = document.querySelectorAll("[data-i18n]"); + this._cache = new Map(); + + if (this._options.detectLanguage) { + this._options.defaultLanguage = this._detectLanguage(); + } + + if ( + this._options.defaultLanguage && + typeof this._options.defaultLanguage == "string" + ) { + this._getResource(this._options.defaultLanguage); + } + } + + _detectLanguage() { + var stored = localStorage.getItem("language"); + + if (this._options.persist && stored) { + return stored; + } + + var lang = navigator.languages + ? navigator.languages[0] + : navigator.language; + + return lang.substr(0, 2); + } + + _fetch(path) { + return fetch(path) + .then(response => response.json()) + .catch(() => { + console.error( + `Could not load ${path}. Please make sure that the file exists.` + ); + }); + } + + async _getResource(lang) { + if (this._cache.has(lang)) { + return JSON.parse(this._cache.get(lang)); + } + + var translation = await this._fetch( + `${this._options.filesLocation}/${lang}.json` + ); + + if (!this._cache.has(lang)) { + this._cache.set(lang, JSON.stringify(translation)); + } + + return translation; + } + + async load(lang) { + if (!this._options.languages.includes(lang)) { + return; + } + + this._translate(await this._getResource(lang)); + + document.documentElement.lang = lang; + + if (this._options.persist) { + localStorage.setItem("language", lang); + } + } + + async getTranslationByKey(lang, key) { + if (!key) throw new Error("Expected a key to translate, got nothing."); + + if (typeof key != "string") + throw new Error( + `Expected a string for the key parameter, got ${typeof key} instead.` + ); + + var translation = await this._getResource(lang); + + return this._getValueFromJSON(key, translation, true); + } + + _getValueFromJSON(key, json, fallback) { + var text = key.split(".").reduce((obj, i) => obj[i], json); + + if (!text && this._options.defaultLanguage && fallback) { + let fallbackTranslation = JSON.parse( + this._cache.get(this._options.defaultLanguage) + ); + + text = this._getValueFromJSON(key, fallbackTranslation, false); + } else if (!text) { + text = key; + console.warn(`Could not find text for attribute "${key}".`); + } + + return text; + } + + _translate(translation) { + var zip = (keys, values) => keys.map((key, i) => [key, values[i]]); + var nullSafeSplit = (str, separator) => (str ? str.split(separator) : null); + + var replace = element => { + var keys = nullSafeSplit(element.getAttribute("data-i18n"), " ") || []; + var properties = nullSafeSplit( + element.getAttribute("data-i18n-attr"), + " " + ) || ["innerHTML"]; + + if (keys.length > 0 && keys.length !== properties.length) { + console.error( + "data-i18n and data-i18n-attr must contain the same number of items" + ); + } else { + var pairs = zip(keys, properties); + pairs.forEach(pair => { + const [key, property] = pair; + var text = this._getValueFromJSON(key, translation, true); + + if (text) { + element[property] = text; + element.setAttribute(property, text); + } else { + console.error(`Could not find text for attribute "${key}".`); + } + }); + } + }; + + this._elements.forEach(replace); + } + + get defaultConfig() { + return { + persist: false, + languages: ["de"], + defaultLanguage: "", + detectLanguage: true, + filesLocation: "/i18n" + }; + } + } + + + var translator = new Translator({ + persist: false, + languages: ["hr", "de"], + defaultLanguage: "hr", + detectLanguage: true, + filesLocation: "/i18n" + }); + translator.load("hr"); + + \ No newline at end of file