git.pond.sub.org Git - eow/blob - static/dojo-release-1.1.1/dijit/demos/i18n.html

   1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   2                 "http://www.w3.org/TR/html4/strict.dtd">
   3 <html>
   4 <head>
   5         <title>Dijit I18N Demo</title>
   6
   7         <script>
   8                 var djConfig = {parseOnLoad: true, isDebug: true},
   9                         locale,
  10                         lang,
  11                         bidi;
  12
  13                 // read in HREF arguments
  14                 if(window.location.href.indexOf("?") > -1){
  15                         var str = window.location.href.substr(window.location.href.indexOf("?")+1);
  16                         var ary = str.split(/&/);
  17                         for(var i=0; i<ary.length; i++){
  18                                 var split = ary[i].split(/=/),
  19                                         key = split[0],
  20                                         value = split[1];
  21                                 switch(key){
  22                                         case "locale":
  23                                                 djConfig.locale = locale = value;
  24                                                 lang = locale.replace(/-.*/, "");
  25                                                 break;
  26                                         case "dir":
  27                                                 document.getElementsByTagName("html")[0].dir = value;
  28                                                 bidi = value;
  29                                                 break;
  30                                 }
  31                         }
  32                 }
  33         </script>
  34         <style type="text/css">
  35                 @import "../../dojo/resources/dojo.css";
  36                 @import "../themes/tundra/tundra.css";
  37                 @import "../themes/tundra/tundra_rtl.css";
  38                 @import "../tests/css/dijitTests.css";
  39                 @import "i18n/flags.css";
  40         </style>
  41
  42         <script type="text/javascript" src="../../dojo/dojo.js"></script>
  43
  44         <script language="JavaScript" type="text/javascript">
  45                 dojo.require("dojo.data.ItemFileReadStore");
  46                 dojo.require("dijit.Tree");
  47                 dojo.require("dijit._Calendar");
  48                 dojo.require("dijit.form.DateTextBox");
  49                 dojo.require("dijit.form.CurrencyTextBox");
  50                 dojo.require("dijit.form.NumberSpinner");
  51                 dojo.require("dijit.form.ComboBox");
  52                 dojo.require("dijit.Menu");
  53                 dojo.require("dojo.parser");
  54                 dojo.addOnLoad(function(){
  55                         dojo.byId("locale").innerHTML = locale || "default";
  56                         dojo.byId("dir").innerHTML = bidi || "default";
  57                 });
  58         </script>
  59
  60 </head>
  61 <body class="tundra">
  62         <div dojoType="dojo.data.ItemFileReadStore" jsId="store"
  63                 url="i18n/data.json"></div>
  64         <div dojoType="dijit.tree.ForestStoreModel" jsId="model" store="store" childrenAttrs="languages">
  65                 <!-- Override all the data access functions to work from the I18N data store -->
  66                 <script type="dojo/method" event="getChildren" args="item, onComplete">
  67                         switch(item.root ?  "top" : store.getValue(item, "type")){
  68                                 case "top":
  69                                         return store.fetch({query: {type:'continent'}, onComplete: onComplete});
  70                                 case "continent":
  71                                         return store.fetch({query: {continent: store.getValue(item, "iso")}, onComplete: onComplete});
  72                                 case "country":
  73                                         return dijit.tree.ForestStoreModel.prototype.getChildren.apply(this, arguments);
  74                         }
  75                 </script>
  76                 <script type="dojo/method" event="mayHaveChildren" args="item">
  77                         if(item.root){ return true; }   // top level
  78                         var type = store.getValue(item, "type");
  79                         return (type == "continent" || type == "country");
  80                 </script>
  81         </div>
  82
  83         <h1 class="testTitle" dir="ltr">Dijit I18N Demo (locale=<span id="locale"></span>  dir=<span id="dir"></span>)</h1>
  84
  85         <table width="100%">
  86                 <tr>
  87                         <td width="30%" style="vertical-align: top;">
  88                                 <div dojoType="dijit.Tree" id="mytree" model="model">
  89                                         <!-- override functions for display of each node -->
  90                                         <script type="dojo/method" event="getIconClass" args="item">
  91                                                 var icon =
  92                                                         (!item.root && store.getValue(item, "type") == "country") ?
  93                                                         ("countryIcon country" + store.getValue(item, "iso") + "Icon") :
  94                                                         dijit.Tree.prototype.getIconClass.apply(this, arguments);
  95                                                 return icon;
  96                                         </script>
  97                                         <script type="dojo/method" event="getLabel" args="item">
  98                                                 if(item.root){ return "Continents"; }
  99                                                 var localizedName = lang && store.getValue(item, lang);
 100                                                 return localizedName || (store.getLabel(item) + " \u202b" + "(" + store.getIdentity(item) + ")\u202c");
 101                                         </script>
 102
 103                                         <!-- clicking a node refreshes the page with new locale setting -->
 104                                         <script type="dojo/method" event="onClick" args="item, node">
 105                                                 var type = store.getValue(item, "type");
 106                                                 if(type == "language"){
 107                                                         var lang = store.getIdentity(item),
 108                                                                 locale = lang + "-" + store.getIdentity(node.getParent().item).toLowerCase(),
 109                                                         dir = /ar|fa|he|ps|ur|yi/i.test(lang) ? "rtl" : "ltr";
 110                                                         window.location.href = window.location.href.replace(/\?.*/, "") + "?locale=" + locale + "&dir=" + dir;
 111                                                 }else{
 112                                                         alert("Please click a language, not a country or continent.");
 113                                                 }
 114                                         </script>
 115                                 </div>
 116                         </td>
 117                         <td style="vertical-align: top;">
 118                                 <p dir="ltr">
 119                                 Use the tree to select a language or a language/country combo; the page will reload
 120                                 in the specified locale.  Note that tree is also rerendered using the specified language for top level tree items.
 121                                 Arabic and Hebrew display right-to-left so be sure to try those.
 122                                 </p>
 123                                 <input dojoType="dijit._Calendar"/>
 124
 125                                 <p>Some form controls:</p>
 126
 127                                 <label for="date">Date:</label>
 128                                 <input id="date" dojoType="dijit.form.DateTextBox" value="2006-07-04"/>
 129                                 <br/>
 130                                 <label for="spinner">Number spinner:</label>
 131                                 <input id="spinner" dojoType="dijit.form.NumberSpinner" value="123456789"/>
 132                                 <br/>
 133                                 <label for="currency">Currency:</label>
 134                                 <input id="currency" type="text" name="income1" value="54775.53"
 135                                         dojoType="dijit.form.CurrencyTextBox"
 136                                         required="true"
 137                                         constraints="{fractional:true}"
 138                                         currency="USD"/>
 139                                 <br/>
 140
 141                                 <label for="combo1">Simple Combo:</label>
 142                                 <select id="combo1" dojoType="dijit.form.ComboBox">
 143                                         <option>option #1</option>
 144                                         <option>option #2</option>
 145                                         <option>option #3</option>
 146                                 </select>
 147                                 <br/>
 148                                 <label for="combo2">Combo on languages and countries:</label>
 149                                 <input id="combo2" dojoType="dijit.form.ComboBox"
 150                                                 value=""
 151                                                 store="store"
 152                                                 searchAttr="name"
 153                                                 name="anything"/>
 154                         </td>
 155                 </tr>
 156         </table>
 157 </body>
 158 </html>