https://github.com/evrowe/localize

A lightweight, client-side localization javascript class
https://github.com/evrowe/localize

Last synced: about 1 year ago
JSON representation

A lightweight, client-side localization javascript class

• Host: GitHub
• URL: https://github.com/evrowe/localize
• Owner: evrowe
• License: gpl-2.0
• Created: 2014-10-21T00:46:52.000Z (over 11 years ago)
• Default Branch: master
• Last Pushed: 2015-03-10T17:15:53.000Z (about 11 years ago)
• Last Synced: 2025-01-23T21:42:04.688Z (over 1 year ago)
• Language: JavaScript
• Size: 180 KB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: readme.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

          
#Localize.js

Localize.js is a lightweight client-side library meant to enable easy localization in client-side web applications. Localization dictionaries can be sourced from an API or a local file. Supports All modern browsers and IE8+

##Usage

Minimal setup and initialization follows the following pattern:

    // Create a new instance of the Localize class

    var Localization = new Localize();

    // Run initial setup to do basic configuration

    Localization.setupLocalize({

      basePath: '/path/to/endpoint',

      currentLocale: 'en-US',

      defaultContext: 'UI-COMMON'

    });

    // Grab some content

    Localization.getLocalizedData({

      context: 'UI-COMMON',

      pathSuffix: 'common.json'

    });

At this point, the Localize class will be set up and ready for you to fetch localized text. This is usable in your Javascript code and your HTML. Also included is a handlebars helper for Ember applications.

###Text replacement in javascript

Getting localized text in your javascript is performed by calling the `fetch()` method on the class and supplying it with a key.

    Localization.fetch('someKey');

### Text replacement in HTML

To localize text in your HTML, you can use any arbitrary element (`` tags are recommended) with a class name of `localize-me`. This element will also need a `data-key` attribute containing the translation key.

    

To replace these tags in your HTML, call the `replaceAll()` method. You can override the default class name by setting `replacementClassName: 'foo'` in the options hash.

    // Default, basic usage

    Localization.replaceAll();

    // Substitute an alternate class name and dictionary context

    Localization.replaceAll({

      replacementClassName: 'change-this',

      replacementModule: 'UI-BASIC'

    });

### Text replacement in Handlebars/Ember

Text localization is as simple as invoking the `localize` helper in your handlebars templates. Localize.js does the rest.

    {{localize "someKey"}}