Javascript greeklish to uppercase greek function

[theoamd]

Το πρόβλημα προφανές.

Το θέμα είναι, ΟΚ, εύκολο να κάνεις ένα function που εντός HTML μετατρέπει ότι εισάγεται στο εν λόγω text field σε κεφαλαία, αλλά πως θα γίνει εφικτή η μετατροπή των εισαχθέντων greeklish σε greek uppercase?

Τι εννοώ

https://www.e-food.gr/

[nucleus]

Με λίγο "ψάξιμο" στον κώδικα της σελίδας έχουμε.

Τα παρακάτω styles

<style>
    .chzn-container-single .chzn-search input{
        padding: 0 !important;
        height: 0 !important;
    }
    #page-home .lezanta .chzn-drop {
        margin: 2px 0 0 3px;
    }
    #page-home .lezanta .chzn-search {
        height: 8px;
        padding: 0;
    }
</style>

Για την αναζήτηση

<div class="lezanta action-search">
        <h2>Ξεκινήστε την παραγγελία σας</h2>
        <div style="float:left;margin-right:20px;">    
            <input type="text" data-helptext="Εισάγετε τη διεύθυνσή σας:" class="address_auto watermarked" id="address" name="address" autocomplete="off" style="width:325px;" />
        </div>
        <div style="width:207px;float:left;">
            <select name="city" id="city" class="chzn-select" style="max-width:192px;">
                <option value="" selected="selected">Επιλέξτε νομό</option>
                <option value="Αττική">Αττική</option>
                <option value="Θεσσαλονίκη">Θεσσαλονίκη</option>
                <option value="Πάτρα">Πάτρα</option>
            </select>
        </div>
        <input type="hidden" id="latitude" name="latitude" value="" />
        <input type="hidden" id="longitude" name="longitude" value="" />
        <input type="hidden" id="street_county" name="county" value="" />
        <input type="hidden" id="street_address" name="gaddress" value="" />
        <input type="hidden" id="street_number" name="number" value="" />
        <input type="hidden" id="street_zip" name="zip" value="" />
        <input type="hidden" id="seo_type" name="seo_type" value="," />
        <a href="#" class="button-search">Αναζήτηση εστιατορίων <div class="arrow-right"></div></a>
        <div class="search-baloon"></div>
    </div>

Και τον παρακάτω κώδικα στο κάτω μέρος της σελίδας

<script type="text/javascript">
$(document).ready(function () {
	/*
	 * START PUBLISHING EVENTS
	 */
	//send a message on each keystroke to apply transliteration
	$(".lezanta").delegate("input", "keyup", function (e) {
		$.publish("HOME:SEARCH:TRANSLITERATE", [this]);
	});

	//subscribe to newsletter
	$("a.submit-email").bind("click", function (e) {
		e.preventDefault();
		$.publish("NEWSLETTER:SUBSCRIBE", [this]);
	});

	//apply various home related event listeners
	EFD.HOME.applyEventListeners();

	//apply global site listeners
	EFD.GLOBAL.applyEvents();

	/*
	 * START SUBSCRIBING TO MESSAGES
	 */
	//apply call to transliterate typed text
	$.subscribe("HOME:SEARCH:TRANSLITERATE", function (textbox) {
		EFD.applyTransliteration(textbox)
	})

	$.subscribe("NEWSLETTER:SUBSCRIBE", function (LinkButton) {
		EFD.NEWSLETTER.subscribe(LinkButton);
	})

});

</script>

Αναζήτηση το source code με EFD και tadaa

<script type="text/javascript" src="js/modules/efd.js?version=2.0.2final"></script>

Kαι μόλις βρήκαμε την js βιβλιοθήκη για το transliterate.Αυτά.

ΣΗΜΕΙΩΣΗ

Μην χρησιμοποιήσεις το παραπάνω Library σε κάποιο site προτού βεβαιωθείς για τους όρους χρήσης που μπορεί να περιλαμβάνει.

[theoamd]

Από την τελευταία παράθεσή σου, καταλαβαίνω ότι το source code της συνάρτησης βρίσκεται σε κάποιο κατάλογο, στον οποίο και προφανώς δεν έχουμε πρόσβαση. Ή δεν κατάλαβα σωστά;

*Για να διευκρινίσω, δεν είναι απαραίτητο να χρησιμοποιώ κάποια "κλεμμένη" μέθοδο, απλά θέλω να υλοποιήσω μια συνάρτηση javascript, η οποία να κάνει την προαναφερθείσα δουλειά.

[nucleus]

Από την τελευταία παράθεσή σου, καταλαβαίνω ότι το source code της συνάρτησης βρίσκεται σε κάποιο κατάλογο, στον οποίο και προφανώς δεν έχουμε πρόσβαση. Ή δεν κατάλαβα σωστά;

*Για να διευκρινίσω, δεν είναι απαραίτητο να χρησιμοποιώ κάποια "κλεμμένη" μέθοδο, απλά θέλω να υλοποιήσω μια συνάρτηση javascript, η οποία να κάνει την προαναφερθείσα δουλειά.

Αν βρεις την τελευταία γραμμή που περιέχει την βιβλιοθήκη ενώ βλέπεις τον κώδικα της σελίδας και ακολουθήσεις το link μια χαρά θα στο ανοίξει το js αρχείο με την συνάρτηση που ψάχνεις.

Το full path είναι

https://www.e-food.gr/js/modules/efd.js

[theoamd]

Η αλήθεια είναι ότι με δυσκολεύει, γιατί δεν έχω ασχοληθεί με modules + jQuery.

Κάτι πιο απλό θα ήθελα να υλοποιήσω, που να κάνει όμως, την ίδια δουλειά.

[theoamd]

Ευχαριστώ nucleus.

Έπειτα από λίγο ψάξιμο και προσπάθεια, λύθηκε. :devil:

[nucleus]

var transliterate;

map που αντιστοιχεί τους αγγλικούς με τους ελληνικούς Key : Value το Value μπορείς να το προσπελάσεις

transliterate = {

"a" : "α",

"b" : "β",

"c" : "ψ",

"d" : "δ",

"e" : "ε",

"f" : "φ",

"g" : "γ",

"h" : "η",

"i" : "ι",

"j" : "ξ",

"k" : "κ",

"l" : "λ",

"m" : "μ",

"n" : "ν",

"o" : "ο",

"p" : "π",

"q" : ";",

"r" : "ρ",

"s" : "σ",

"t" : "τ",

"u" : "θ",

"v" : "ω",

"w" : "ς",

"x" : "χ",

"y" : "υ",

"z" : "ζ",

";" : ""

};

μεταβλητές

transliterated = "μεταφρασμένο κείμενο" πίνακας

var transliterated=[],value, char, mappedValue;

παίρνει το κείμενο του textbox Που περνάς σαν όρισμα στην συνάρτηση

value = $(textbox).val().split("");

εδώ νομίζω ότι φτιάχνει ένα ζευγάρι το value και το αποτέλεσμα της συνάρτησης function (char) { return (typeof transliterate[char] !== "undefined") ? transliterate[char] : char;}

Η συνάρτηση είναι ένα απλός έλεγχος.Επιστρέφει τον χαρακτήρα στην θέση του πίνακα transliterate που ορίστηκε παραπάνω αν το βρει αν όχι επιστρέφει τον ίδιο τον char πχ transliterate["a"] = "α"

transliterated = _.map(value, function (char) {

return (typeof transliterate[char] !== "undefined") ? transliterate[char] : char;

})

$(textbox).val(transliterated.join(""));

Μια ώρα να το γράψω το σεντονάκι κρίμα να πάει χαμένο

[theoamd]

Σεντονάκι χαχ :tongue:

Να 'σαι καλά, όπως και να 'χει.

Έκανα ευκολότερη(κατ' εμέ) προσέγγιση, αποθηκεύοντας τα 2 αλφάβητα σε 2 μεταβλητές, τις οποίες εναλλάσσω με χρήση της charAt().

Η τελική επιστροφή του αντίστοιχου ελληνικού χαρακτήρα γίνεται με την toUpperCase(), κολλημένη μπροστά από μια replace() (ήθελα κεφαλαία, όπως διευκρίνισα) .

[nucleus]

Για να κάνεις κεφαλαίο το κείμενο γιατί το κάνεις με javascript και όχι με css?

CSS text-transform property

[theoamd]

Γιατι δεν εκανα τιποτα παραπανω απο την προσθηκη της μεθοδου toUpperCase() στην τελικη μορφη της μεταβλητης.

Βεβαια, εχουν αλλαξει τα αρχικα δεδομενα, καθως μου ζητηθηκε η παρουσα λειτουργικοτητα να κουμπωθει σε ενα opencart template.

Και το λεω ετσι, γιατι το opencart χρησιμοποιει jquery και οχι js και με τοσο μπλεξιμο που υπαρχει στα αρχεια, αμφιβαλλω αν βγαλω ακρη.

--

Sent from Galaxy Ace using no Tapatalk