Git Product home page Git Product logo

Comments (7)

SahAssar avatar SahAssar commented on August 23, 2024

Hey,

This solution is a bit crude, but should work:

<ul class="localeswitcher">
    {% for iso, locale in locales if locale.slug == app.request.get('_locale') %}
        {{_self.localeoutput(iso, locale)}}
    {% endfor %}
    {% for iso, locale in locales if locale.slug != app.request.get('_locale') %}
        {{_self.localeoutput(iso, locale)}}
    {% endfor %}
</ul>
{% macro localeoutput(iso, locale) %}
    {% if app.request.get('slug') != '' %}
        {% set newslug = get_slug_from_locale(record, iso) ?: record.slug %}
    {% endif %}
    <li {% if locale.slug == app.request.get('_locale') %}class="active"{% endif %}>
        <a href="{{ url(
            app.request.get('_route'), 
            app.request.get('_route_params')|merge({_locale: locale.slug, slug: newslug })
            )}}">
            {{ locale.label }}
        </a>
{% endmacro %}

from translate.

Puddingboy avatar Puddingboy commented on August 23, 2024

So you prefer a 2 loops option? In my own attempt I had excluded the link from the loop and used a js object to match a language label with the abrivation. I was just wondering if there was a better method. My attempt.

<a href="#" id='language-button' class='language-button'><i class={{app.request.get('_locale')}}></i></a>
<ul class="language-list" id='language-list'>
    {% for iso, locale in locales %}
        {% if app.request.get('_route') != 'homepage' %}
            {% set newslug = get_slug_from_locale(record, iso) %}
        {% endif %}
        {% if locale.slug != app.request.get('_locale') %}
            <li>
                <a href="{{ url(
                app.request.get('_route'), 
                app.request.get('_route_params')|merge({_locale: locale.slug, slug: newslug ?: record.slug})
                )}}"><i class="{{ locale.slug }}"></i>{{ locale.label }}</a>
            </li>
        {% endif %}
    {% endfor %}
</ul>

accompanied with a piece of js:

var langs = {
        en : 'English',
        fr : 'Français',
        nl : 'Nederlands'
    };

    var cur_lang = langs[langbutton.getElementsByTagName('i')[0].className];
    langbutton.appendChild(d.createTextNode(cur_lang));

I wish there was something I could use to create a proper label without having to create several loops or a js attachment. Do you think a future update may include a way to fetch all current locale info?

from translate.

SahAssar avatar SahAssar commented on August 23, 2024

@Puddingboy Sorry it's taken me so long to respond to this. I do think that a double loop in twig is going to be much, much more efficient than doing it in JS clientside. I'm still in the early phases of this extension and if adding a feature like this is going to be helpful to you I can imagine it will be helpful for others too. I'll get on this as soon as I have a spare moment :)

from translate.

Puddingboy avatar Puddingboy commented on August 23, 2024

Please don't make it a priority if you have other debugging to do and important features to add. This will be a minor convenience for my case. I can't speak for others.

I think SEO compatibillity may be a bigger thing to work at.

from translate.

SahAssar avatar SahAssar commented on August 23, 2024

@Puddingboy If you have any hints for SEO compatibility that would probably be helpful! I'd be very interested in hearing what needs to be done on that front, could you open a issue with those suggestions since I probably need fix some things there for work soon anyway...

from translate.

SahAssar avatar SahAssar commented on August 23, 2024

This will probably be a part of #30 in some way (as in a more configurable localeswitcher), so leaving this here...

from translate.

SahAssar avatar SahAssar commented on August 23, 2024

Closing as this is the same as #14, but that one has all the meaty stuff about ARIA roles and so on. :)

from translate.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.