javascript の回転演算子を使用して、親セクションと子セクションのテキスト インデントを作成できるシンプルな wysiwig エディターを作成しようとしています。言語は DJ ソフトウェア Virtual DJ 用ですが、見た目も機能も JavaScript とまったく同じです。
ソートしたいコードの例は次のとおりです
query1 ? query2 ? "query1 and query2 are true" : "query1 is true but query2 is false" : query3 ? "query1 and query2 are false but query3 is true" : "all queries are false"
基本的に私がやりたいことは、タブのように見えるようにパディングを与える css で親条件を div でラップすることです。例を作成するために JSFiddle を試してみましたが、フィードバックを得ることができなかったので、動的に挿入されたときに HTML をライブで更新するものを作成するのに数時間を費やしました。このページには、string.replace をページで操作しやすくするための抽象化された関数を含む説明があります。
私が求めているもののページには2つの例があります。1つはinnerHTMLで、もう1つは書式設定された表示コンテンツです。おそらく、classNames を使用するつもりはありません。CSS3 セレクターを使用して、子ノードを簡単にターゲットにできるので、行のインデントの量を制御します。
助けてくれてありがとう、私はしばらくこれに取り組んできました。それを修正するために考えられる唯一のことは、文字列を逆にして最後からマッチングを行うことですが、それはうまくいきませんでした。 .
あなたが助けることができると思うなら、ページは私の仲間サーバーにもあります http://action-jackson.com.au/indentTest.html
再度、感謝します、
アンドリュー。
- - 編集 - - - - - - - - - - - - - - - - - - - - -
初めてで説明が下手ですみません。Webページの例で十分だと思います。
具体的には、文字列エントリからコードをインデントして、ユーザーが XML 構成ファイルから文字列などを指定できるようにします。次に、正規表現を使用して適切なタグを挿入し、インデントされたページに表示できるようにしたいと考えました。問題は、このプログラムに非常に大きなスクリプトを使用していることです。
var 'jog_fx' 0 ? param_greater 0% ? effect 'qb_filter' slider 3 +0.006 & effect 'ramp_delay' slider 1 +0.007 : effect 'qb_filter' slider 3 -0.005 & effect 'ramp_delay' slider 1 -0.007 : var 'jog_fx' 1 ? param_greater 0% ? effect 'crusher' slider 1 +0.005 & effect 'ramp_delay' slider 1 +0.005 : effect 'crusher' slider 1 -0.005 & effect 'ramp_delay' slider 1 -0.005 : var 'jog_fx' 2 ? param_smaller 0% ? effect 'trans' slider 1 -0.002 & effect 'flanjet' slider 1 -0.001 & effect 'qb_filter' slider 3 -0.002 & effect 'tal-reverb-2' slider 3 -0.001 & effect 'tal-reverb-2' slider 2 +0.0005 : effect 'trans' slider 1 -0.002 & effect 'flanjet' slider 1 +0.001 & effect 'qb_filter' slider 3 +0.002 & effect 'tal-reverb-2' slider 3 +0.001 & effect 'tal-reverb-2' slider 2 -0.0005 : var 'jog_fx' 3 ? param_greater 0% ? effect '3p_delay' slider 1 +0.002 : effect '3p_delay' slider 1 -0.002 : var 'jog_fx' 4 ? effect 'ramp_delay' slider 1 : var 'jog_fx' 5 ? device_side 'left' ? param_greater 0% ? param_multiply 25% & effect 'rollit' slider 3 +0.001 & effect 'rollit' slider 2 +0.001 : param_multiply 25% & effect 'rollit' slider 3 -0.001 & effect 'rollit' slider 2 -0.001 : param_greater 0% ? param_multiply 25% & effect 'rollit2' slider 3 +0.001 & effect 'rollit2' slider 2 +0.001 : param_multiply 25% & effect 'rollit2' slider 3 -0.001 & effect 'rollit2' slider 2 -0.001 : var 'jog_fx' 6 ? param_greater 0% ? effect 'gate_echo' slider +0.01 : effect 'gate_echo' slider 1 -0.01 : var 'jog_fx' 7 ? param_greater 0% ? effect 'multitap delay' slider +0.003 : effect 'multitap delay' slider 1 -0.003 : var 'jog_fx' 8 ? param_greater 0% ? param_multiply 25% & effect 'instajungle' slider 11 +0.01 : param_multiply 25% & effect 'instajungle' slider 11 -0.01 : touchwheel
CSS3 セレクター [p:nth-child(n), p:nth-last-child(n)] を使用できると考えていました。
インデントのために要素にパディング/マージン/左を追加しましたが、それは私が計画した方法ではうまくいきませんでした. 私がする必要があると思うのは、 /\?([^:]:)/ 'start with "? anything :" を含む文字列の部分のみを取得し、次に /\?([^\? ]）/、 "？ なんでも ？" そして最後に /:([^:])(:)/, ": anything :" にタグを追加するだけです。ページで regie() 関数を使用します。
log(regie(str, [/\?([^\?]*)(/?)/g, /\?([^:]*)(\:)/g, /:([^:])(:)/g], ['</div>$1 <div class="forwards">$2 </div>', '</div>$1 <div class="forwards">$2</div>', '</div>$1 <div class="backwards">$2 </div>',]));
<!doctype html>
<html>
<head>
<title>Test Suite</title>
<link href='http://fonts.googleapis.com/css?family=Ubuntu+Mono' rel='stylesheet' type='text/css'>
<!-- <link href='indent.css' rel='stylesheet' type='text/css'> -->
<style type='text/css'>
body{ background: #17191a; color: #aaa; font-family: 'Ubuntu Mono', sans-serif; overflow:none; } #content{ width: 1800px; height: 940px; margin:auto; } #outputs{ width: 1060px; float:left; } .wrapperHouse{ width: 492px; height: 450px; position:relative; overflow:hidden; float:left; margin: 10px; padding:0; } .wrapper{ overflow:hidden; height:500px; width: 500px; height: 450px; background: #27292A; float:left; overflow:hidden; } .scroll{ overflow:hidden; height:1000px; width: 500px; position: relative; top: -295px; z-index:0; transition:0.2s all; padding: 300px 0; } .bg{ box-shadow: 0 0 5px #111 inset,0 0 10px #222 inset; background: #1d1f20; background: -moz-linear-gradient(45deg, #1d1f20 1%, #2e2f30 99%); background: -webkit-gradient(linear, left bottom, right top, color-stop(1%,#1d1f20), color-stop(99%,#2e2f30)); background: -webkit-linear-gradient(45deg, #1d1f20 1%,#2e2f30 99%); background: -o-linear-gradient(45deg, #1d1f20 1%,#2e2f30 99%); background: -ms-linear-gradient(45deg, #1d1f20 1%,#2e2f30 99%); background: linear-gradient(45deg, #1d1f20 1%,#2e2f30 99%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1d1f20', endColorstr='#2e2f30',GradientType=1 ); } .bgh{ background: #35383a; background: -moz-linear-gradient(top, #35383a 0%, #131619 99%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#35383a), color-stop(99%,#131619)); background: -webkit-linear-gradient(top, #35383a 0%,#131619 99%); background: -o-linear-gradient(top, #35383a 0%,#131619 99%); background: -ms-linear-gradient(top, #35383a 0%,#131619 99%); background: linear-gradient(to bottom, #35383a 0%,#131619 99%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#35383a', endColorstr='#131619',GradientType=0 ); } .bg:focus{ box-shadow: 0 0 5px #111 inset,0 0 10px #17199a inset; } #scriptHouse, #scriptWrapperHouse{ width: 700px; height: 920px; padding:0; } #scriptWindow{ background: #27292A; width: 700px; height: 920px; } .scriptWrapper h2{ width: 700px; transition:0.5s all; } .scriptWrapper h2:hover{ text-shadow:0 0 10px #099CC9; cursor: pointer; } #innerScript{ width: 660px; height: 1820px; padding:200px 20px; font-family: monospace; font-size: 1.1em; margin:0; position: relative; top: -180px; } .indent{ padding-left: 25px; } .true{ color: #099CC9; } .false{ color:#ae4343; } .query{ color: #ada243; } .string, .comment{ color:#43aed8; } .func{ color:#c244d6; } h2{ background: #000000; font-family: sans-serif; text-align: center; padding:0; padding-top:10px; margin:0; width: 492px; height:50px; background: #1a1c1e; border:1px solid #212325; transition:0.5s all; z-index:5; position: relative; top:0px; } h2:hover{ text-shadow:0 0 10px #099CC9; cursor: pointer; } pre{left:-30px;}
</style>
<body onload="check()">
<section id="content">
<section id="outputs">
<section class="wrapperHouse">
<div class="h2House bg"><h2 class="bgh">
inner html example
</h2></div>
<div id="pageHtml" class="bg wrapper">
<pre id="pre1" class="scroll"></pre>
</div>
</section>
<section class="wrapperHouse">
<header class="h2House bg"><h2 class="bgh">output of html example</h2></header>
<div id="indentHouse" class="bg wrapper">
<div id="innerIndent" class="scroll">
<div class="indent">
query1 ?
<div class="indent">
query2 ?
<div class="indent">
query1 are and query2 are true :
</div>
</div>
<div class="indent">
query1 is true but query2 is false :
</div>
<div class="indent">query3 ?
<div class="indent">
query1 and query2 are false but query3 is true :
</div>
</div>
<div>
all queries are false
</div>
</div>
</div>
</div>
</section>
<section class="wrapperHouse">
<header class="h2House bg"><h2 class="bgh" onclick="clearWindow()">inner html</h2></header>
<div id="realHtmlHouse" class="bg wrapper">
<pre id="realHtml" class="scroll"></pre>
</div>
</section>
<section class="wrapperHouse">
<div id="realOutputHouse" class="bg wrapper">
<header class="h2House bg"><h2 class="bgh" onclick="clearWindow()">output html</h2></header>
<div id="realOutputInner" class="scroll"></div>
</div>
</section>
</section>
<section id="scriptWrapperHouse" class="wrapperHouse">
<div class="scriptWrapper h2House bg"><h2 class="bgh" onclick="run()">click to run javascript</h2></div>
<div id="scriptHouse" class="wrapper bg">
<div id="scriptWindow">
<div id="innerScript" class="scroll" spellcheck="false" contenteditable="true">
<p class="comment">// the string of text is stored in the variable 'str'</p>
<p class="comment">// the log to the windows use <span class="func">log(string);</span></p>
<p class="comment">// for an abstracted replace function use
<br>// <span class="func">regie(string, search:array||string, replace:array||string, function:optional);</span>
<br>// if passing an array use regular expresson, string is for a single replace string that gets converted to RegExp
<br>// a function can be passed as an argument if it is necessary</p><br><p></p>
</div>
</div>
</div>
</section>
</section> <!-- end content -->
<script type="text/javascript">
function id(id){
return document.getElementById(id);
}
function tag(name){
return document.getElementsByTagName(name);
}
function classs(name){
return document.getElementsByClassName(name);
}
var output = id('realOutputInner');
var str = "query1 ? query2 ? query1 are and query2 are true : query1 is true but query2 is false : query3 ? query1 and query2 are false but query3 is true : all queries are false";
function log(text){
//debugger;
tag('pre')[1].innerHTML = text.replace(/</g, '<').replace(/(true|false|query)([0-9]*)/g, '<span class="$1">$1$2</span>');
output.innerHTML = text.replace(/(true|false|query)([0-9]*)/g, '<span class="$1">$1$2</span>');
};
function clearWindow(){
output.innerHTML = '';
tag('pre')[1].innerHTML = '';
};
var comStyle = function(element , pseudoElt){
if(!pseudoElt){pseudoElt = null}
if(id(element).style.top != ''){
return id(element).style
} else {
return window.getComputedStyle(document.getElementById(element), pseudoElt);
}
}
function regie(str, search, replacage, fn){
var rep = str;
//debugger;
console.log('arg1: ' + arguments[1] + ' arg2: ' + arguments[2]);
if(arguments.length < 4){
console.log('3 args');
if(typeof arguments[1] == 'string' && typeof arguments[2] == 'string'){
search = new RegExp(search, 'g');
str = str.replace(search, replacage);
} else {
console.log('args are not strings');
for(var i = 0; i < search.length; i++){
if(search[i].test(str)){
str = str.replace(search[i], replacage[i]);
}
}
}
} else {
console.log('4 args');
if(typeof arguments[1] == 'string' && typeof arguments[2] == 'string'){
for(var i = 0; i < search.length; i++){
if(search[i].test(str)){
str = str.replace(search[i], fn) + ' ';
}
}
} else {
for(var i = 0; i < search.length; i++){
if(search[i].test(str)){
str = str.replace(search[i], fn) + ' ';
}
}
}
}
return str;
};
function check(){
for (var i = 0; i < 2; i++) {
tag('pre')[i].innerHTML = regie(id('innerIndent').innerHTML, [/</g , /(true|false|query)([0-9]*)/g, /^\t\t/, /\t/g] , ['<', '<span class="$1">$1$2</span>', '', ' ']);
};
console.log(id('innerIndent').innerHTML);
id('indentHouse').innerHTML = regie(id('indentHouse').innerHTML, '(true|false|query)([0-9]*)' , '<span class="$1">$1$2</span>');
id('realOutputInner').innerHTML = id('innerIndent').innerHTML;
};
function run(){
var stuff = id('innerScript').innerText.replace(/<[a-z0-9 =\"\']*>/g, '');
eval(stuff);
};
function displaywheel(e){
e.preventDefault();
var scroll = classs('scroll');
for (var i = 0; i < scroll.length; i++) {
scroll[i].style.top = window.getComputedStyle(document.getElementById(scroll[i].id), null).top;
};
//console.log(e.target);
var evt=window.event || e;
var delta=evt.detail? evt.detail*(-120) : evt.wheelDelta;
if(delta < 0){
var pos = parseInt(e.target.style.top);
pos -= 50;
e.target.style.top = pos +'px';
} else {
var pos = parseInt(e.target.style.top);
pos += 50;
e.target.style.top = pos +'px';
}
}
var mousewheelevt=(/Firefox/i.test(navigator.userAgent))? "DOMMouseScroll" : "mousewheel";
(function(){
var scroll = classs('wrapper');
for (var i = 0; i < scroll.length; i++) {(function(x){
scroll[x].addEventListener(mousewheelevt, displaywheel, false);
}(i));
}
})();
</script>
</body>
</html>