/home/web6047/www/cgi-bin/prj/20180128-home_javascript/20191113-newapp.js/20191120-汎用要素リサイズ試作

このファイル: /home/web6047/www/cgi-bin/prj/20180128-home_javascript/20191113-newapp.js/20191120-汎用要素リサイズ試作 - snapshot 20191211/k.js

1 /* AdditionalKey
2
3 このファイルを読み込み、
4 以下の2点を行うと、キーボードのみから、マウスとタッチ入力に対応となる。
5
6 1. ソフトウェアキーボードのHTMLを配置する。
7
8 <table id="softwarePad" width="100%" height="100">
9 <tr>
10 <td></td>
11 <td id="softwareKey38">↑</td>
12 <td></td>
13 </tr>
14 <tr>
15 <td id="softwareKey37">←</td>
16 <td id="softwareKey40">↓</td>
17 <td id="softwareKey39">→</td>
18 </tr>
19 </table>
20
21 ※以下の関数で指定するので、例のようなidは必要。
22
23
24 2. 以下のようなJavaScriptを記述する。
25
26 ak = new AdditionalKey();
27 ak.setSoftwareKey( "softwareKey37", onkeydownx, onkeyupx, 37 );
28 ak.setSoftwareKey( "softwareKey38", onkeydownx, onkeyupx, 38 );
29 ak.setSoftwareKey( "softwareKey39", onkeydownx, onkeyupx, 39 );
30 ak.setSoftwareKey( "softwareKey40", onkeydownx, onkeyupx, 40 );
31 ak.tweakSoftwarePad( "softwarePad" );
32
33 ※"softwareKey37"等は、たとえば上記HTMLのID
34 ※onkeydownx, onkeyupx は、キーイベントハンドラ関数。
35 　window.onkeydown を指定してもよい。
36 ※例の 37, 38, 39, 40 は↑↓←→キーのキー番号
37 ※tweakSoftwarePadはなくてもよいが、あればテキスト選択防止、スライド押しができるようになる。
38
39
40 特徴：
41 上記の例のスクリプトを貼り付けても貼り付けなくても、どちらにせよ
42 元のスクリプトはエラーを出さずに動作できる。
43 つまり依存度が非常に低いので、プログラマーの負担にならない。
44 */
45
46
47 //雑用関数
48

49 function getPseudoStyle( keySelector ) {
50 /*
51 AdditionalKey.prototype.setSoftwareKey のコメント
52 //スマートホンの疑似要素が上手く動かなかったので特別対応
53 にて2回使用。それ以外では使用していない。
54
55 usage: let styleHover = getPseudoStyle( "td:hover" );
56 usage: let styleDefault = getPseudoStyle( "td" );
57
58 getComputedStyle( element, ":hover" ) として、
59 その要素の疑似要素の内容が取得できないとき、この関数を使えば取得できる。
60 なお、ページ上で同じセレクタで重複して設定されている場合は後のほうが有効となる。
61
62 ※getComputedStyleは、疑似要素のbeforeなどでcontentなど取得できるかもしれないが、
63 hoverはbackground-colorが取得できず、疑似要素ではないほうのbackground-colorが取得されてしまった。
64 */
65
66 let res = new Object();
67 /* ページ上のスタイルタグをすべて検索する。
68 keySelectorを見つけたら、そのスタイルの各名前と値の組をresに入れる。
69 */
70 for( let i = 0; i < document.styleSheets.length; i++ ){
71 let ss = document.styleSheets[ i ];
72 for( let j = 0; j < ss.cssRules.length; j++ ){
73 let selectorText = ss.cssRules[ j ].selectorText;
74 let selectors = selectorText.split( /,/ );
75 selectors = selectors.map( selector => selector.replace( /^ +| +$/g, "" ) );
76 if( selectors.indexOf( keySelector ) > -1 ){
77 let text = ss.cssRules[ j ].style.cssText;
78 let pairs = text.split( /;/ );
79 for( let k = 0; k < pairs.length; k++ ) {
80 let pair = pairs[ k ].split( /:/ );
81 let name = pair[ 0 ].replace( /^ /, "" );
82 let value = pair[ 1 ];
83 res[ name ] = value;
84 }//for k
85 }//if
86 }//for j
87 }//for i
88 return res;
89 }

90
91
92
93 AdditionalKey = function() {
94 this.tableFlg = 0; //
95
96 //タッチ対応
97 this.touchFunction1 = function( te ) {
98 for( var i = 0; i < te.changedTouches.length; i++ ) {
99 var touch = te.changedTouches[ i ];
100 touch.target.onmousedown( te );
101 }
102 return false;
103 }
104 this.touchFunction2 = function( te ) {
105 for( var i = 0; i < te.changedTouches.length; i++ ) {
106 var touch = te.changedTouches[ i ];
107 touch.target.onmouseup( te );
108 }
109 }
110 addEventListener( "touchstart", this.touchFunction1 );
111 addEventListener( "touchend", this.touchFunction2 );
112 }
113
114

115 AdditionalKey.prototype.setSoftwareKey = function( elementId, onkeydownx, onkeyupx, keyNum ) {
116 let element = document.getElementById( elementId );
117 let AK = this;
118
119 //スマートホンの疑似要素が上手く動かなかったので特別対応
120
121 //疑似要素で変更したいCSSプロパティ
122 let props = [ "background-color", "font-size", "font-weight" ];
123
124 //td:hoverのCSSプロパティを取得
125 let styleHover = getPseudoStyle( "td:hover" );
126 let styleOnmousedown = new Object();
127 props.map( name => styleOnmousedown[ name ] = styleHover[ name ] );
128
129 //tdのCSSプロパティを取得
130 let styleDefault = getPseudoStyle( "td" );
131 let styleOnmouseup = new Object();
132 props.map( name => styleOnmouseup[ name ] = styleDefault[ name ] );
133
134 //疑似要素の動きの代替
135 element.addEventListener( "touchstart", function( e ) {
136 props.map( name => e.target.style[ name ] = styleOnmousedown[ name ] );
137 } );
138 element.addEventListener( "touchend", function( e ) {
139 props.map( name => e.target.style[ name ] = styleOnmouseup[ name ] );
140 } );
141
142
143 //こちらはソフトウェアキーの実装
144
145 element.onmousedown = function( e ) {
146 e.preventDefault();
147 onkeydownx( { which:keyNum } ) };
148 element.onmouseover = function( e ) {
149 if( ! AK.tableFlg ) return;
150 onkeydownx( { which:keyNum } );
151 }
152 element.onmouseup = function( e ) { onkeyupx( { which:keyNum } ) }
153 element.onmouseout = function( e ) { onkeyupx( { which:keyNum } ) }
154 }

155
156
157

158 AdditionalKey.prototype.tweakSoftwarePad = function( elementId ) {
159
160 let element = document.getElementById( elementId );
161 let AK = this;
162
163 //マウスを押したままスライドするとスライド先のボタンを押す仕組み（タッチでは不可）
164 element.onmousedown = function( e ) { AK.tableFlg = 1 }
165 element.onmouseup = function( e ) { AK.tableFlg = 0 }
166
167 //テキスト選択を防止
168 element.style.WebkitUserSelect = "none";
169 element.style.MozUserSelect = "none";
170 element.style.MsUserSelect = "none";
171 element.style.userSelect = "none";
172 }