HTML + Rendered = HTMLed.js for Jquery mobile Framework

This light weight javascript framework that converts the Jquery Mobile HTML pages to language specific pages and renders it to the user on the fly. This works with Tokens Identifiers or Place Holder where the strings are replaced to the specified language.

See the below code example or checkout the index.html page on github

<h3>label.description</h3> //"label.description" is a place holder defined in ".properties" file
<p>label.descriptionText</p>"label.descriptionText" is a place holder defined in ".properties" file

This is designed only for Jquery Mobile framework.

Implementation/Usage:

• Create a project (sample project is found on Github for reference)
• Add meta tag content in the head tag

 <meta charset="UTF-8">

• Remember to add the "HTMLed.js" <script> tag before the Jquery Mobile framework <script> tag.
• Now link your configuration file in "HTMLed.js" <script> tag as below. See the index.html.

        <script type="text/javascript" charset="utf-8" src="js/HTMLed.js" data-config="lang.json"></script>

• Your project is good to go!!

For External HTML pages

• Call $.HTMLed() API with the options as parameter to the method as shown below

$.HTMLed({
    externalPage : "popup.html",
    options : {                     
        langPref: "fr",    
        langBundle:"bundle", //Ignore this if the "fr.properties" is inside the "bundle" as declared in your config JSON file
    },
    callBack:function(parsed){
        $('#popup-container').html(parsed);
        $('#popup-wrapper').popup("open", { transition: "pop" }); 
    }                                            
});

the above option illustrates the example of loading external HTML page as popup

• Callback in the parameter provides you the flexibility to use the parsed HTML the way you want to implement.

API and usage/options:

".properties" file:

Its basically a JSON file parsed inside the framework. Hence while writing a language specific ".properties" file , write it exactly as a JSON file otherwise your language bundle will not load properly. Strictly follow the JSON formatting.

"autoDetect" - true :

It is used to detect the browser specific language settings. If you set it as true, it get's the browser language settings and automatically load it for you. Here is the catch when set as "true" - You should have the ".properties" file name exactly matching the name of the browser language returned. You can use this JSfiddle Link to get or see the language name set for the browser. For example if it returns "en-US" your ".properties" file for that specific language should be named as "en-US.properties". The framework will load it automatically and display the page in that language as specified.

"autoDetect" - false :

If you want to explicitly load the language irrespective of your browser settings, then make "autoDetect" to "false" in the Global variable. This will load the language file given in "langPref". Just mention as "langPref: en-US", this load "en-US.properties" file.

$.HTMLed.rePage() :

If you want to change the language at runtime, call this api as below. See the index.html.

      $.HTMLed.rePage({
          langPref:"en"
      });

The above option illustrates the french page reloaded in english on the fly. Document get reloaded. Please i advocate you to use localstorage to persist the data to save the current session

$.HTMLed.restore() - Restores the page to original state :

This API restore to original page that was changed on runtime using rePage() API. Note: The document in reloaded, hence all the dynamic data will be lost. Please use localstorage to persist the data for current session.

Testing in a browser:

While testing on Chrome you have to disable the web security. This can be done by

• on Windows Start->Run->type "(chrome_installation_path)\chrome.exe" --disable-web-security
• on Linux ubuntu -> Open terminal -> run command -> "google-chrome --disable-web-security --allow-file-access-from-files"
• Now load your Jquery Mobile page into the chrome it will work.

Works fine in Firefox , no tweak needed!!

Support or Contact:

i am available on nirus@live.in You can raise a question on stackoverflow.com and send the link to me, i will answer it. If you have any suggestion or feature enhancement or special request reach me directly or leave a comment on github.com Your input is valuable. I would appreciate it. Check this corner for updates on HTMLed.js framework.