xref: /aosp_15_r20/external/cldr/docs/charts/keyboard/static/index.html (revision 912701f9769bb47905792267661f0baf2b85bed5) 
1*912701f9SAndroid Build Coastguard Worker<html>
2*912701f9SAndroid Build Coastguard Worker  <head>
3*912701f9SAndroid Build Coastguard Worker    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
4*912701f9SAndroid Build Coastguard Worker    <title>CLDR | Proposed Keyboard 3.0  Chart</title>
5*912701f9SAndroid Build Coastguard Worker    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
6*912701f9SAndroid Build Coastguard Worker    <script src="./keyboard-chart.js"></script>
7*912701f9SAndroid Build Coastguard Worker    <script src="./data/keyboard-data.js"></script>
8*912701f9SAndroid Build Coastguard Worker    <link href="./keyboard-chart.css" rel="stylesheet" />
9*912701f9SAndroid Build Coastguard Worker    <link rel="stylesheet" type="text/css" href="https://www.unicode.org/webscripts/standard_styles.css">
10*912701f9SAndroid Build Coastguard Worker  </head>
11*912701f9SAndroid Build Coastguard Worker  <body>
12*912701f9SAndroid Build Coastguard Worker    <div id="app">
13*912701f9SAndroid Build Coastguard Worker        <!-- standard unicode header-->
14*912701f9SAndroid Build Coastguard Worker        <table width="100%" cellpadding="0" cellspacing="0" border="0">
15*912701f9SAndroid Build Coastguard Worker            <!-- BEGIN HEADER BAR -->
16*912701f9SAndroid Build Coastguard Worker                <tr>
17*912701f9SAndroid Build Coastguard Worker                  <td colspan="2">
18*912701f9SAndroid Build Coastguard Worker                  <table width="100%" border="0" cellpadding="0" cellspacing="0">
19*912701f9SAndroid Build Coastguard Worker                    <tr>
20*912701f9SAndroid Build Coastguard Worker
21*912701f9SAndroid Build Coastguard Worker                      <td class="icon" style="width:38px; height:35px">
22*912701f9SAndroid Build Coastguard Worker                      <a href="https://www.unicode.org/">
23*912701f9SAndroid Build Coastguard Worker                      <img border="0" src="https://www.unicode.org/webscripts/logo60s2.gif" align="middle"
24*912701f9SAndroid Build Coastguard Worker                      alt="[Unicode]" width="34" height="33"></a>
25*912701f9SAndroid Build Coastguard Worker                      </td>
26*912701f9SAndroid Build Coastguard Worker
27*912701f9SAndroid Build Coastguard Worker                      <td class="icon" style="vertical-align:middle">
28*912701f9SAndroid Build Coastguard Worker                      <a class="bar"> </a>
29*912701f9SAndroid Build Coastguard Worker                      <a class="bar" href="https://cldr.unicode.org/index/keyboard-workgroup"><font size="3">CLDR | Keyboard-SC | Charts</font></a>
30*912701f9SAndroid Build Coastguard Worker                      </td>
31*912701f9SAndroid Build Coastguard Worker
32*912701f9SAndroid Build Coastguard Worker                      <td class="bar">
33*912701f9SAndroid Build Coastguard Worker                      <a href="https://www.unicode.org/main.html" class="bar">Tech Site</a>
34*912701f9SAndroid Build Coastguard Worker                      | <a href="https://www.unicode.org/sitemap/" class="bar">Site Map</a> |
35*912701f9SAndroid Build Coastguard Worker                      <a href="https://www.unicode.org/search" class="bar">Search </a>
36*912701f9SAndroid Build Coastguard Worker                      </td>
37*912701f9SAndroid Build Coastguard Worker
38*912701f9SAndroid Build Coastguard Worker                    </tr>
39*912701f9SAndroid Build Coastguard Worker                  </table>
40*912701f9SAndroid Build Coastguard Worker                  </td>
41*912701f9SAndroid Build Coastguard Worker                </tr>
42*912701f9SAndroid Build Coastguard Worker                <tr>
43*912701f9SAndroid Build Coastguard Worker                  <td colspan="2" class="gray">&nbsp;</td>
44*912701f9SAndroid Build Coastguard Worker                </tr>
45*912701f9SAndroid Build Coastguard Worker            <!-- END HEADER BAR -->
46*912701f9SAndroid Build Coastguard Worker  <!-- BEGIN CONTENTS -->
47*912701f9SAndroid Build Coastguard Worker  <tr>
48*912701f9SAndroid Build Coastguard Worker    <td class="contents" valign="top">
49*912701f9SAndroid Build Coastguard Worker
50*912701f9SAndroid Build Coastguard Worker
51*912701f9SAndroid Build Coastguard Worker      <i
52*912701f9SAndroid Build Coastguard Worker        >Note: This is a very preliminary chart. For feedback on this chart or
53*912701f9SAndroid Build Coastguard Worker        contents, please comment on:
54*912701f9SAndroid Build Coastguard Worker        <a href="https://unicode-org.atlassian.net/browse/CLDR-17205"
55*912701f9SAndroid Build Coastguard Worker          >https://unicode-org.atlassian.net/browse/CLDR-17205</a
56*912701f9SAndroid Build Coastguard Worker        ></i
57*912701f9SAndroid Build Coastguard Worker      >
58*912701f9SAndroid Build Coastguard Worker      <!-- {{ message }} -->
59*912701f9SAndroid Build Coastguard Worker      <hr />
60*912701f9SAndroid Build Coastguard Worker      <div>
61*912701f9SAndroid Build Coastguard Worker        <span v-for="file of files" :key="file">
62*912701f9SAndroid Build Coastguard Worker          <a :href="'#'+file">{{file}}</a> |
63*912701f9SAndroid Build Coastguard Worker        </span>
64*912701f9SAndroid Build Coastguard Worker      </div>
65*912701f9SAndroid Build Coastguard Worker      <hr />
66*912701f9SAndroid Build Coastguard Worker      <ol>
67*912701f9SAndroid Build Coastguard Worker        <li v-for="file of files" :key="file">
68*912701f9SAndroid Build Coastguard Worker          <h2 :id="file"><code>{{file}}</code></h2>
69*912701f9SAndroid Build Coastguard Worker          <ul>
70*912701f9SAndroid Build Coastguard Worker            <li v-for="layers of getLayers(file)">
71*912701f9SAndroid Build Coastguard Worker              <h3 v-if="layers.formId">Form: {{ layers.formId }}</h3>
72*912701f9SAndroid Build Coastguard Worker              <h3 v-if="layers.id">ID: {{ layers.id }}</h3>
73*912701f9SAndroid Build Coastguard Worker              <h4 v-if="layers.minDeviceWidth">
74*912701f9SAndroid Build Coastguard Worker                minDeviceWidth: {{ layers.minDeviceWidth }}mm
75*912701f9SAndroid Build Coastguard Worker              </h4>
76*912701f9SAndroid Build Coastguard Worker              <ul>
77*912701f9SAndroid Build Coastguard Worker                <li v-for="layer of layers.layer">
78*912701f9SAndroid Build Coastguard Worker                  <h4 v-if="layer.modifiers">Modifier: {{ layer.modifiers }}</h4>
79*912701f9SAndroid Build Coastguard Worker                  <h4 v-if="layer.id">{{ layer.id }}</h4>
80*912701f9SAndroid Build Coastguard Worker                  <div class="rows">
81*912701f9SAndroid Build Coastguard Worker                    <div class="row" v-for="row of layer.row">
82*912701f9SAndroid Build Coastguard Worker                      <span
83*912701f9SAndroid Build Coastguard Worker                        :title="key.id"
84*912701f9SAndroid Build Coastguard Worker                        :class="getKeyClass(key)"
85*912701f9SAndroid Build Coastguard Worker                        v-for="key of row.keys"
86*912701f9SAndroid Build Coastguard Worker                      >
87*912701f9SAndroid Build Coastguard Worker                        {{key.output}}
88*912701f9SAndroid Build Coastguard Worker                        <b title="Switch" v-if="key.layerId">☞ {{key.layerId}}</b>
89*912701f9SAndroid Build Coastguard Worker                      </span>
90*912701f9SAndroid Build Coastguard Worker                    </div>
91*912701f9SAndroid Build Coastguard Worker                  </div>
92*912701f9SAndroid Build Coastguard Worker                </li>
93*912701f9SAndroid Build Coastguard Worker              </ul>
94*912701f9SAndroid Build Coastguard Worker            </li>
95*912701f9SAndroid Build Coastguard Worker          </ul>
96*912701f9SAndroid Build Coastguard Worker          <hr />
97*912701f9SAndroid Build Coastguard Worker        </li>
98*912701f9SAndroid Build Coastguard Worker      </ol>
99*912701f9SAndroid Build Coastguard Worker      </td>
100*912701f9SAndroid Build Coastguard Worker      </tr>
101*912701f9SAndroid Build Coastguard Worker      </table>
102*912701f9SAndroid Build Coastguard Worker      </div>
103*912701f9SAndroid Build Coastguard Worker    <script>
104*912701f9SAndroid Build Coastguard Worker      const { createApp } = Vue;
105*912701f9SAndroid Build Coastguard Worker
106*912701f9SAndroid Build Coastguard Worker      createApp({
107*912701f9SAndroid Build Coastguard Worker        data() {
108*912701f9SAndroid Build Coastguard Worker          return {};
109*912701f9SAndroid Build Coastguard Worker        },
110*912701f9SAndroid Build Coastguard Worker        computed: {
111*912701f9SAndroid Build Coastguard Worker          files() {
112*912701f9SAndroid Build Coastguard Worker            return getIds();
113*912701f9SAndroid Build Coastguard Worker          },
114*912701f9SAndroid Build Coastguard Worker        },
115*912701f9SAndroid Build Coastguard Worker        methods: {
116*912701f9SAndroid Build Coastguard Worker          getLayers(id) {
117*912701f9SAndroid Build Coastguard Worker            return getKeyboardLayers(id);
118*912701f9SAndroid Build Coastguard Worker          },
119*912701f9SAndroid Build Coastguard Worker          getKeys(id) {
120*912701f9SAndroid Build Coastguard Worker            return getKeyboardKeys(id);
121*912701f9SAndroid Build Coastguard Worker          },
122*912701f9SAndroid Build Coastguard Worker          getKeyClass(key) {
123*912701f9SAndroid Build Coastguard Worker            if (key.gap) {
124*912701f9SAndroid Build Coastguard Worker              return "gap-key key";
125*912701f9SAndroid Build Coastguard Worker            } else if (key.to) {
126*912701f9SAndroid Build Coastguard Worker              return "to-key key";
127*912701f9SAndroid Build Coastguard Worker            } else if (key.switch) {
128*912701f9SAndroid Build Coastguard Worker              return "switch-key key";
129*912701f9SAndroid Build Coastguard Worker            } else {
130*912701f9SAndroid Build Coastguard Worker              return "key";
131*912701f9SAndroid Build Coastguard Worker            }
132*912701f9SAndroid Build Coastguard Worker          },
133*912701f9SAndroid Build Coastguard Worker        },
134*912701f9SAndroid Build Coastguard Worker      }).mount("#app");
135*912701f9SAndroid Build Coastguard Worker    </script>
136*912701f9SAndroid Build Coastguard Worker
137*912701f9SAndroid Build Coastguard Worker  </body>
138*912701f9SAndroid Build Coastguard Worker</html>
139