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