html-css-js/html/unicode-table/v1.html at master · denisde4ev/html-css-js · GitHub

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
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
<!DOCTYPE html><html lang="en">
<head>
  <title>unicode table</title>
  <meta http-equiv="content-type" content="text/html;charset=UTF-8;charset=utf-8">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tailwindcss@latest/dist/tailwind.min.css">
  <!-- github.com/denisde4ev/html-css-js/raw/master/js/lib/jQ/min.js-->
  <script src="../../js/lib/jQ/min.js"></script>
  <style>
    * {margin: 0; padding: 0}
    body {padding: 5px 50px; }
    /**/
    .t01 th, .t01 caption, .t01 .info { font-weight: normal; color: #0009; }
    table.t01 {
    	border-collapse: separate;
    	border-spacing: 5px;
    }
    /**/
    table.t01 td, table.t01 th {
    	border: 1px solid transparent;
    	/*padding: 8px;*/
    	text-align:center;
    }
    table.t01 td span {
    	width: 2em;
    	display: inline-block;
    }

  </style>
</head><body>
<noscript>requres js!</noscript>
<script>const pugvars_clickToCopy = true;</script>
<script>const pugvars_clickForInfo = undefined;</script>
<script>const pugvars_cols = 16;</script>
<main style="font-family: monospace;">
  <h1 class="text-xl">Unicode Table:</h1>
  <table class="t01" id="table01">
    <caption>click any &lt;td&gt; to copy</caption>
    <script>
      function clickedTd(e) {
      	var i = +this.getAttribute('data-i');
      	var char = this.innerText;
      	//
      	var range = document.createRange();
      	range.selectNodeContents(this);
      	//
      	var selection = window.getSelection();
      	selection.removeAllRanges();
      	selection.addRange(range);
      	//
      	document.execCommand('copy');
      	//
      	//selection.removeAllRanges();
      	//
      	//alert(`coppyed: 0x${i.toString(16)}:${char}`)
      }

    </script>
    <!-- TODO/consider: pre compile it with pug-->
    <script>
      // JavaScript for generating a Unicode table
      //var rows = 0x20;
      var cols = pugvars_cols;
      var iEndStr = '0xffff'; // just as I like it
      var iEnd = +iEndStr;
      //
      //var hrMinCharsCount = ( (rows-1) * cols ).toString(16).length;
      //var hrMinCharsCount = ( iEnd - (iEnd%cols) ).toString(16).length;
      var hrMinCharsCount = iEndStr.replace('0x','').length;
      //
      var table =  table01; //document.currentScript.parentElement;
      //
      //for (let row = 0, i = 0; row < rows; row++) { // when fixed rows
      a: for (let i = 0; i <= iEnd; ) {
      	let tr = $.new('tr');
      	table.insertAdjacentElement('beforeEnd', tr);
      	//
      	//tr.insertAdjacentHTML('beforeEnd', `<th>0x${ (row * cols).toString(16).padStart(hrMinCharsCount, '0') }:</th>`);
      	tr.insertAdjacentHTML('beforeEnd',
      		`<th>0x${ (i).toString(16).padStart(hrMinCharsCount, '0') }:</th>`);
      	//
      	for (let col = 0; col < cols; col++) { // note: don't set cols=0, you know its infinite loop
      		tr.insertAdjacentElement('beforeEnd',
      			$.new('td').insertAdjacentElement('beforeEnd',
      				$.new('span')
      				.val('className', pugvars_clickToCopy || pugvars_clickForInfo ? 'cursor-pointer' : '')  // todo?: not elegant
      				.attr('onclick', 'return clickedTd.call(this, event)')
      				.attr('data-i', i)
      				.attr('title', pugvars_clickToCopy ? 'click to copy' : '') // todo?: not elegant
      				//.attr('data-ix16', i.toString(16)) // when testing
      				.val('innerText', String.fromCharCode(i))
      			).parentElement
      		);
      		// .padEnd(2, ' ');
      		//
      		i++;
      		// if ( !(i <= iEnd) ) break a; // verry rare to be needed
      	}
      	//
      }
      table.insertAdjacentHTML('beforeEnd',
      	//`<tr class="info"><td colspan=999 style="text-align:center;">0x${iEnd.toString(16)}</td></tr>`
      	`<tr class="info"><td colspan=999 style="text-align:center;">0x${iEndStr}</td></tr>`
      )
      //
      // document.body.textContent = unicodeTable;


    </script>
    <script>
      table01.querySelectorAll('td').forEach(td=>{
      	if ( td.textContent === '' ) {
      		// no bg
      	} else if ( td.textContent.trim() === '' ) {
      		td.classList.add('bg-gray-500');
      	} else if (td.textContent.length === 1) {
      		td.classList.add('bg-gray-200');
      	}
      });
    </script>
  </table>
</main>