libs/js/globalize/examples/browser/browser.js

   1 (function( $ ) {
   2
   3 $(function() {
   4
   5     // setup sample data
   6     window.numbers = [
   7        0, 1, 10, 100, 1000, 10000, 0.1, 0.12, 0.123, 0.1234, 0.12345, 1000.123, 10000.12345,
   8           -1, -10, -100, -1000, -10000, -0.1, -0.12, -0.123, -0.1234, -0.12345, -1000.123, -10000.12345
   9     ];
  10     window.formats = [
  11        "n", "n1", "n3", "d", "d2", "d3", "p", "p1", "p3", "c", "c0"
  12     ];
  13     window.dates = $.map([
  14         "Jan 1, 1970 1:34 PM", "Dec 31, 1970 1:34 PM", "Apr 1, 1999 1:34 PM", "Dec 31, 1999 1:34 PM", "Jan 1, 2000 1:34 PM", "Nov 5, 1955 1:34 PM"
  15     ], function(d) { return d instanceof Date ? d : new Date(Date.parse(d)); } );
  16
  17     window.dateFormats = [
  18         "d", "D", "f", "F", "M", "S", "t", "T", "Y"
  19     ];
  20
  21     // add template extensions to format numbers and dates declaratively
  22     $.extend( $.tmplcmd, {
  23         demoFormat: {
  24             _default: [0,0],
  25             prefix: "_.push(Globalize.format(numbers[$2],formats[$1]));"
  26         },
  27         demoDateFormat: {
  28             _default: [0,0],
  29             prefix: "_.push(Globalize.format(dates[$2],typeof $1 === 'number' ? dateFormats[$1] : $1));"
  30         }
  31     });
  32
  33     // activate tabs
  34     $(".tab").click(function() {
  35         $(".active").removeClass("active").addClass("inactive");
  36         $("#" + this.id + "content").removeClass("inactive").addClass("active");
  37         $(this).removeClass("inactive").addClass("active");
  38     });
  39
  40     // fill cultures dropdown with the available cultures
  41     $.each(sortByName(Globalize.cultures), function(i, culture) {
  42         $("<option/>", {
  43             value: culture.name,
  44             text: culture.name + ": " + culture.englishName + " (" + culture.nativeName + ")"
  45         }).appendTo("#cultures");
  46     });
  47
  48     // re-render templates after selecting a culture
  49     $("#cultures").bind("change keyup", selectCulture)
  50         // set default culture to Japanese in Japan
  51         .val("ja-JP");
  52
  53     // re-render templates after selecting a calendar
  54     var calendars = $("#calendars").bind("change keyup", function() {
  55         Globalize.culture().calendar = Globalize.culture().calendars[calendars.val()] || Globalize.culture().calendars.standard;
  56         render();
  57     });
  58
  59     $("#parseDate").change(function() {
  60         $("#parseDateResult").text(Globalize.parseDate($(this).val()).toString());
  61     });
  62     $("#parseNumber").change(function() {
  63         $("#parseNumberResult").text(Globalize.parseFloat($(this).val()).toString());
  64     });
  65
  66     function sortByName(map) {
  67         // converts a dictionary into a sorted dictionary based on obj.name
  68         var arr = [];
  69         $.each(map, function(name, value) {
  70             arr.push(value);
  71         });
  72         arr.sort(function(a, b) {
  73             return a.name < b.name ? -1 : 1;
  74         });
  75         return arr;
  76     }
  77
  78     function selectCulture() {
  79         // sets the current culture to the value specified in the cultures dropdown,
  80         // populates the calendars dropdown with that cultures calendars,
  81         // and renders the formatting templates.
  82         Globalize.culture($("#cultures").val());
  83
  84         calendars.empty();
  85         $.each(sortByName(Globalize.culture().calendars), function(i, cal) {
  86             $("<option/>", { value: cal.name, text: cal.name }).appendTo(calendars);
  87         });
  88         calendars.val(Globalize.culture().calendar.name);
  89
  90         render();
  91     }
  92
  93     function render() {
  94         $("#dateformat").empty();
  95         $("#dateformattmpl").render({}).appendTo("#dateformat");
  96
  97         $("#format").empty();
  98         $("#formattmpl").render({}).appendTo("#format");
  99
 100         $("#englishName").text(Globalize.culture().englishName);
 101         $("#nativeName").text(Globalize.culture().nativeName);
 102         $("#isRTL").text(Globalize.culture().isRTL ? "YES" : "no");
 103
 104         $("#infonumber").empty();
 105         $("#infonumbertmpl").render(Globalize.culture().numberFormat).appendTo("#infonumber");
 106
 107         $("#infodate").empty();
 108         $("#infodatetmpl").render(Globalize.culture().calendar).appendTo("#infodate");
 109     }
 110
 111     // initial rendering
 112     selectCulture();
 113 });
 114
 115 }( jQuery ));