CSSやJScript、VBScriptのちょっとした確認やテストをブラウザでするHTML その３

その２を少しだけ変更、機能を付け足した。

書いているスクリプトのタイプをセレクトボックスで選択するように変更。

Runボタンで下のテキストエリアのスクリプトを実行。

CopyボタンでクリップボードにHTML形式でコピー。
(私の都合の良い変換になっている。スペース4つはタブに変換）

Writeボタンを押すと下のテキストエリアに書いてある関数や変数を、上のテキストエリアから参照できるようになる。
（押す度に書いてある内容に一時的に変更される。
最初から書いてある関数名に重なるとおかしくなるけれど
馬鹿っぽい関数名なのでそうそう重なることはないとは思う。
あと、Writeという単語が適切かどうかわからん。）

ボタンにフォーカスを移動させてもわかりづらいので、一瞬だけ色が変わるように変更。

test.html
※動作確認はIE6のみ。

4/18修正

無駄だらけの内容の、気付いた所で簡単な箇所だけ修正。

4/20修正

ウィンドウサイズを変えてもボタンがウィンドウ内に収まるようにしたつもり。

その他細かい箇所修正。

4/23修正

フォントサイズを%指定に。

配置にinlineを使うのをやめた。

4/27修正

preの部分のスタイルシート変更。

6/16修正

書き直した。

08/10/12 更新

FC2ブログはUPしたファイルが古くなるとファイルが削除されるんか？
なくなっとるぞｗ
まぁいいや、ついでだから書き直して編集エリアを下にした。
新たな小技として、Alt + i キーで選択範囲を
CSSなら':'、スクリプトなら'='の位置を揃えるようにしてみたけど崩れる恐れあり。

<html>
	<head>
		<title>TEST-HTML</title>
		<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
		<meta http-equiv="Content-Style-Type" content="text/css">
		<meta http-equiv="Content-Script-Type" content="text/javascript">
		<style type="text/css">
			body {
				margin  : 0;
				overflow: auto;
			}
			table.test-main {
				width          : 100%;
				height         : 100%;
				border-collapse: collapse;
			}
			tr.test-frame {
				height: 50%;
			}
			td.test-btn {
				width         : 150px;
				background    : #555;
				vertical-align: top;
			}
			td.test-btn span {
				font-size: 80%;
				color    : #fff;
				margin   : 3px;
			}
			#test-view {
				width   : 100%;
				height  : 100%;
				overflow: auto;
			}
			textarea#test-body,
			textarea#test-script {
				width         : 100%;
				height        : 50%;
				overflow      : auto;
				word-wrap     : normal;
				word-break    : break-all;
				padding       : 5px;
				letter-spacing: 1.5;
				line-height   : 1.2;
				background    : #333;
				color         : #fff;
				border        : 1px solid #fff;
				font-size     : 100%;
			}
			td.test-btn button {
				width         : 100%;
				height        : auto;
				font-size     : 90%;
				letter-spacing: 1.5;
				background    : expression(document.activeElement == this ? '#ff0' : '#222');
				color         : expression(document.activeElement == this ? '#000' : '#fff');
				border        : 3px outset #fff;
			}
			#test-msg {
				width         : 80%;
				position      : absolute;
				top           : 80%;
				left          : 10px;
				font          : bold 20px;
				color         : #ff0;
				letter-spacing: 1.5;
				line-height   : 1.2;
				display       : none
			}
		</style>
		<script type="text/javascript"></script>
		<script type="text/vbscript"></script>
		<script type="text/javascript">
			window.onload = function() {testTest(2)};
			function testTest() {
				var arg   = arguments;
				var _mode = 'j';
				switch(arg[0]) {
					case 1: return $(arg[1]);
					case 2: addButton(); return;
				}
				function addButton() {
					var o_btn = document.getElementsByTagName('button');
					var in_text;
					for (var i in o_btn) {
						in_text = o_btn[i].innerText;
						if      (/^Write/.test(in_text))      writeHTML(o_btn[i]);
						else if (/Run/.test(in_text))         scriptRun(o_btn[i]);
						else if (/SCWrite/.test(in_text))     writeBody(o_btn[i]);
						else if (/Copy/.test(in_text))        copyHTML(o_btn[i]);
						else if (/Body|ScriptA/.test(in_text)) chgArea(o_btn[i]);
						else if (/Wrap/.test(in_text))        chgWrap(o_btn[i]);
						else if (/Java/.test(in_text))  chgMode(o_btn[i]);
					}
					addEvent($('test-body'), 'keydown', function() {chkKey('body')});
					addEvent($('test-script'), 'keydown', function() {chkKey('script')});
					$('test-body').value = '<style type="text/css">\n\n</style>\n';
					tryFocus($('test-body'));
				};
				function scriptRun(elm) {
					addEvent(elm, 'click', function() {
						var mt = (_mode == 'j' ? 'Java' : 'VB') + 'Script: Error';
						try {
							if (_mode == 'j') jsRun();
							else vsRun();
						} catch(e) {
							messageBox(e.message, mt);
						}
						tryFocus($('test-script'));
					});
				};
				function writeHTML(elm) {
					addEvent(elm, 'click', function() {
						$('test-view').innerHTML = '<body>' + $('test-body').value;
						tryFocus($('test-body'));
					});
				};
				function writeBody(elm) {
					addEvent(elm, 'click', function() {
						var sc_area       = $('test-script');
						var scps          = document.scripts;
						var num_sc        = (_mode == 'j' ? 0 : 1);
						var mt            = (_mode == 'j' ? 'Java' : 'VB') + 'Script';
						scps[num_sc].text = sc_area.value;
						messageBox('書き込みました', mt);
						tryFocus(sc_area);
					});
				};
				function chgArea(elm) {
					addEvent(elm, 'click', function() {
						var in_text  = elm.innerText;
						var arr_area = ['test-body', 'test-script'];
						var del_area = (/body/i.test(in_text) ? $(arr_area[0]) : $(arr_area[1]));
						var chg_area = (/body/i.test(in_text) ? $(arr_area[1]) : $(arr_area[0]));
						if (del_area.style.display == 'none') {
							del_area.style.height  = '50%';
							chg_area.style.height  = '50%';
							del_area.style.display = 'block';
						} else {
							del_area.style.display = 'none';
							chg_area.style.height  = '100%';
							chg_area.style.display = 'block';
						}
						tryFocus(chg_area);
					});
				};
				function chgWrap(elm) {
					addEvent(elm, 'click', function() {
						var str_btn = (/on/i.test(elm.innerText) ? 'OFF' : 'ON');
						var str_wrp = (str_btn == 'ON' ? 'normal' : 'break-word');
						elm.innerHTML = 'Wrap-' + str_btn + '(<u>U</u>)';
						$('test-body').style.wordWrap   = str_wrp;
						$('test-script').style.wordWrap = str_wrp;
					});
				};
				function chgMode(elm) {
					addEvent(elm, 'click', function() {
						_mode         = (_mode == 'j' ? 'v' : 'j');
						var in_htm    = (_mode == 'j' ? 'Java' : 'VB') + 'Script(<u>J</u>)';
						elm.innerHTML = in_htm;
					});
					
				};
				function copyHTML(elm) {
					addEvent(elm, 'click', function() {
						var arr_line   = $('test-body').value.split(/[\r\n]/);
						var arr_sline  = $('test-script').value.split(/[\r\n]/);
						var arr_css    = <span data-unlink>;
						var arr_body   = </span>;
						var arr_script = <span data-unlink>;
						var str_text   = '';
						var sc_type    = (_mode == 'j' ? 'java' : 'vb') + 'script';
						var i          = 0;
						if (/^\s*<\s*style\s+/i.test(arr_line[0])) {
							i = 1;
							for (;i < arr_line.length; i ++) {
								if (/^\s*<\s*\/\s*style/i.test(arr_line[i])) break;
								arr_css.push('\t\t\t' + arr_line[i]);
							}
							i ++;
						}
						if (arr_line[i])
							for (; i < arr_line.length; i ++)
								arr_body.push('\t\t' + arr_line[i]);
						if (arr_sline[0])
							for (i = 0; i < arr_sline.length; i ++)
								arr_script.push('\t\t\t' + arr_sline[i]);

str_text = '<html>\n' +
							'\t<head>\n' +
							'\t\t<title></title>\n' +
							'\t\t<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">\n' +
							'\t\t<meta http-equiv="Content-Style-Type" content="text/css">\n' +
							'\t\t<meta http-equiv="Content-Script-Type" content="text/' + sc_type + '">\n' +
							(arr_css.length ? '\t\t<style type="text/css">\n' +
								arr_css.join('\n') + '\n\t\t</' + 'style>\n' : '') +
							(arr_script.length ? '\t\t<script type="text/' + sc_type +
								'">\n' + arr_script.join('\n') + '\n\t\t</' + 'script>\n' : '') +
							'\t</' + 'head>\n\t<body>\n' +
							(arr_body.length ? arr_body.join('\n') + '\n' : '') +
							'\t</' + 'body>\n</' + 'html>';
						clipboardData.setData('text', str_text);
						messageBox('コピーしました', '確認');
					});
				};
				function messageBox(str, mt) {
					var elm  = $('test-msg');
					var act  = ['onclick', 'onkeydown'];
					elm.innerHTML     = '<font color=#ff8000>' + mt + '</font><br>' + str;
					elm.style.display = 'block';
					(function(_act) {
						setTimeout(function() {
							document.body[_act] = function() {
								elm.style.display = 'none';
								for (var i in act) this[act[i]] = null;
							};
						}, 500);
						if (/click/i.test(_act)) arguments.callee(act[1]);
					})(act[0]);
				};
				function insSpCss() {
					var act_area  = $('test-body');
					var rag       = act_area.document.selection.createRange();
					var arr_aft   = rag.text.split(/\}/);
					var str_inner = '', line_src, _chk, arr_src, str_src, arr_prop, str_trim;
					var _insSp    = function(str, l) {return str + new Array((l - str.length) + 1).join(' ')};
					var _lineChk  = function(grp) {
						var len_max  = 0;
						var arr_bef  = </span>;
						var arr_line = grp.split(/[\r\n]/);
						return function(f) {
							for (var i in arr_line) {
								arr_prop = arr_line[i].split(/:/);
								if (arr_prop[1] && !/\{|,\s*$/.test(arr_line[i]) && !/http$/i.test(arr_prop[0])) {
									str_trim = arr_prop[0].replace(/\s+$/g, '');
									if (f) {
										if (str_trim.length > len_max) len_max = str_trim.length;
									} else {
										arr_prop[0] = _insSp(str_trim, len_max);
										arr_prop[1] = ' ' + arr_prop[1].replace(/^\s+/g, '');
										arr_line[i] = arr_prop.join(':');
									}
								}
								if (!f) arr_bef.push(arr_line[i]);
							}
							if (f) arguments.callee();
							return arr_bef;
						};
					};
					for (var s in arr_aft) {
						line_src = arr_aft[s];
							if (/\w/.test(line_src)) {
								_chk        = _lineChk(line_src);
								arr_src     = _chk(1);
								str_src     = arr_src.join('\n');
								str_inner  += str_src + (arr_src.length == 1 ? '}\n'
										: /\{.*\w/.test(str_src) ? '}\n'
										: !/\w/.test(arr_src[arr_src.length - 1]) ? '}\n'
										: '\n}\n');
							}	
					}
					rag.text = str_inner;
					tryFocus(act_area);
				};
				function insSpace() {
					var act_area = $('test-script');
					var rag      = act_area.document.selection.createRange();
					var arr_aft  = [];
					var len_max  = 0;
					var arr_text = rag.text.split(/[\r\n]/);
					var _insSp   = function(str, l) {return str + new Array((l - str.length) + 2).join(' ')};
					var _lineChk = function(f) {
						var arr_line, str_trim, str_len
						for (var i in  arr_text) {
							arr_line = arr_text[i].replace(/==/g, '%<-3429429->%').split(/=/);
							if (arr_line[1]) {
								str_trim = arr_line[0].replace(/\s+$/g, '');
								str_len  = str_trim.length;
								if (f) {
									if (str_len > len_max) len_max = str_len;
								} else {
									arr_line[0] = _insSp(str_trim, len_max);
									arr_line[1] = ' ' + arr_line[1].replace(/^\s+/g, '');
									arr_aft.push(arr_line.join('=').replace(/%<-3429429->%/g, '=='));
								}
							} else {
								if (!f) arr_aft.push(arr_text[i]);
							}
						}
						if (f) arguments.callee();
					};
					_lineChk(1);
					rag.text = arr_aft.join('\n');
					tryFocus(act_area);
				};
				function chkKey(area_name) {
					var key_code = event.keyCode;
					var alt_key  = event.altKey;
					if (key_code == 9 && !event.shiftKey && !event.ctrlKey) {
						event.returnValue = false;
						document.selection.createRange().text = '\t';
					} else if (area_name == 'script' && alt_key && key_code == 73) {
						insSpace();
					} else if (area_name == 'body' && alt_key && key_code == 73) {
						insSpCss();
					}
				};
				function tryFocus(obj) {try {obj.focus()} catch(e) {}};
				function addEvent(elm, act, func) {elm.attachEvent('on' + act, func)};
				function $(id) {return document.getElementById(id)};
			};
			function jsRun() {(new Function(testTest(1, 'test-script').value))()};
		</script>
		<script type="text/vbscript">
			option explicit
			sub vsRun()
				execute(testTest(1, "test-script").value)
			end sub
		</script>
	</head>
	<body>
		<table class=test-main><tbody>
			<tr class=test-frame>
				<td colspan=2>
					<div id=test-view></div>
				</td>
			</tr>
			<tr class=test-frame>
				<td>
					<textarea id=test-body accesskey=n></textarea><textarea id=test-script accesskey=m></textarea>
				</td>
				<td class=test-btn>
					<button accesskey=g>Write(<u>G</u>)</button>
					<button accesskey=r>Run(<u>R</u>)</button>
					<button accesskey=q>SCWrite(<u>Q</u>)</button>
					<button accesskey=y>Copy(<u>Y</u>)</button>
					<button accesskey=l>BodyArea(<u>L</u>)</button>
					<button accesskey=k>ScriptArea(<u>K</u>)</button>
					<button accesskey=u>Wrap-ON(<u>U</u>)</button>
					<button accesskey=j>JavaScript(<u>J</u>)</button>
					<span>BodyArea (<u>N</u>)</span><br>
					<span>ScriptArea (<u>M</u>)</span><br>
					<span>[Alt + i] insSpace</span>
				</td>
			</tr>
		</tbody></table>
		<div id=test-msg></div>
	</body>
</html>