npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

jquery-localize

v0.1.0

Published

A jQuery plugin that makes it easy to i18n your static web site.

Downloads

538

Readme

jquery.localize.js

Build Status

A jQuery plugin that makes it easy to i18n your static web site.

Synopsis

  • Lazily loads JSON translation files based on a simple naming convention.
  • By default, applies the translations to your document based on simple attribute convention.
  • Tested with jQuery versions 1.7.2, 1.8.3, 1.9.1, 1.10.2, 1.11.0, 2.0.3, 2.1.0

Getting Started

Download the production version or the development version.

Load the jquery-localize plugin on your page.

It's the file located at dist/jquery.localize.js

Mark up tags whose content you want to be translated

Somewhere in your html:

<h1 data-localize="greeting"> Hello! </h1>

Provide a JSON language file that has translations:

example-fr.json:

{
  "greeting": "Bonjour!"
}

Use the localize plugin.

<script>
// In a browser where the language is set to French
$("[data-localize]").localize("example")

// You can also override the language detection, and pass in a language code
$("[data-localize]").localize("example", { language: "fr" })
</script>

Gory Details

Language file loading

The first argument of the localize method is the name of the language pack. You might have a different language pack for different parts of your website.

Here's an example of loading several language packs:

<script>
$("[data-localize]")
    .localize("header")
    .localize("sidebar")
    .localize("footer")
</script>

If the language of the browser were set to "fr", then the plugin would try to load:

  • header-fr.json
  • sidebar-fr.json
  • footer-fr.json

if the language of the browser also had a country code, like "fr-FR", then the plugin would ALSO try to load:

  • header-fr-FR.json
  • sidebar-fr-FR.json
  • footer-fr-FR.json

This let's you define partial language refinements for different regions. For instance, you can have the base language translation file for a language that translates 100 different phrases, and for countries were maybe a some of those phrases would be out of place, you can just provide a country-specific file with just those special phrases defined.

Skipping Languages (aka Optimizing for My Language)

This is useful if you've got a default language. For example, if all of your content is served in english, then you probably don't want the overhead of loading up unecessary (and probably non-existant) english langauge packs (foo-en.json)

You can tell the localize plugin to always skip certain languages using the skipLanguage option:

<script>
//using a string will skip ONLY if the language code matches exactly
//this would prevent loading only if the language was "en-US"
$("[data-localize]").localize("example", { skipLanguage: "en-US" })

//using a regex will skip if the regex matches
//this would prevent loading of any english language translations
$("[data-localize]").localize("example", { skipLanguage: /^en/ })

//using an array of strings will skip if any of the strings matches exactly
$("[data-localize]").localize("example", { skipLanguage: ["en", "en-US"] })
</script>

Applying the language file

If you rely on the default callback and use the "data-localize" attribute then the changes will be applied for you.

Examples:

HTML:

<p data-localize="title">Tracker Pro XT Deluxe</p>
<p data-localize="search.placeholder">Search...</p>
<p data-localize="search.button">Go!</p>
<p data-localize="footer.disclaimer">Use at your own risk.</p>
<p data-localize="menu.dashboard">Dashboard</p>
<p data-localize="menu.list">Bug List</p>
<p data-localize="menu.logout">Logout</p>

application-es.json (fake spanish)

{
  "title": "Tracker Pro XT Deluxo",
  "search": {
    "placeholder": "Searcho...",
    "button": "Vamos!"
  },
  "footer": {
    "disclaimer": "Bewaro."
  },
  "menu": {
    "dashboard": "Dashboardo",
    "list": "Bug Listo",
    "logout": "Exito"
  }
}

Localize it!

<script>
$("[data-localize]").localize("application", { language: "es" });
</script>

Callbacks

You can provide a callback if you want to augment or replace the default callback provided by the plugin. Your callback should take at least 1 argument: the language data (contents of your json file). It can optionally accept a second argument, which is a reference to the default callback function. This is handy if you still want the default behavior, but also need to do something else with the language data.

<script>
$("[data-localize]").localize("application", {
    language: "es",
    callback: function(data, defaultCallback){
        data.title = data.title + currentBugName();
        defaultCallback(data)
    }
});
</script>

See the test/samples for working examples.

Contributing

To contribute to this plugin, please read the contributing guidelines.

Credits & Licensing

Copyright (c) Jim Garvin (http://github.com/coderifous), 2008.

Dual licensed under the GPL (http://dev.jquery.com/browser/trunk/jquery/GPL-LICENSE.txt) and MIT (http://dev.jquery.com/browser/trunk/jquery/MIT-LICENSE.txt) licenses.

Written by Jim Garvin (@coderifous) for use on LMGTFY.com. Please use it, and contribute changes.

http://github.com/coderifous/jquery-localize

Based off of Keith Wood's Localisation jQuery plugin. http://keith-wood.name/localisation.html