aboutsummaryrefslogtreecommitdiff
path: root/contexts/data/lib/closure-library/closure/goog/demos/charpicker.html
blob: 7c769c8d02d60d3a3a94bc398d775805b6e819f5 (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
<!DOCTYPE html>
<html>
<!--
Copyright 2010 The Closure Library Authors. All Rights Reserved.

Use of this source code is governed by the Apache License, Version 2.0.
See the COPYING file for details.
-->
<head>
  <title>goog.ui.CharPicker</title>
  <meta charset=utf-8>
  <!-- common css used by all closure demos; not required for char picker -->
  <link rel="stylesheet" href="css/demo.css">

  <!-- used only for button in this page; not required for char picker-->
  <link rel="stylesheet" href="../css/menubutton.css">

  <!-- only required css for char picker -->
  <link rel="stylesheet" href="../css/charpicker.css">

  <script src="../base.js"></script>
  <script>
    goog.require('goog.i18n.CharPickerData');
    goog.require('goog.i18n.uChar.LocalNameFetcher');
    goog.require('goog.ui.CharPicker');
  </script>

  <style>
    #p1_value {
      color: red;
      font-weight: bold;
      font-size: large;
    }

    p {
      height: 2em;
    }
  </style>
</head>

<body>
  <h1>goog.ui.CharPicker</h1>
  <p>You have selected: <span id="p1_value">none</span>
  <div id="char-picker"></div>

  <script>
    var picker = new goog.ui.CharPicker(new goog.i18n.CharPickerData(),
        new goog.i18n.uChar.LocalNameFetcher(),
        ["\uD869\uDED6", "a", "b", "c"], 10, 1);
    var el = goog.dom.getElement('char-picker');
    picker.decorate(el);

    // Action on selection
    var selectionAction = function() {
      goog.dom.setTextContent(goog.dom.getElement('p1_value'),
          picker.getSelectedChar());
    };

    // Get selected locale from the char picker.
    goog.events.listen(picker, 'action', function(e) { selectionAction(); });
  </script>
  <p>
    <input type="button" value="Dispose" onclick="picker.dispose()">
  </p>
</body>
</html>