novarobot
/
webperl-for
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Style updates

Browse Source 
Mostly made textareas a little more well-behaved in terms of scrolling,
wrapping, and sizing
master
Hauke D 7 years ago
parent 1cac09ccf3
commit 52271aeafe
1 changed files with 55 additions and 34 deletions
Show Stats Download Patch File Download Diff File

89
web/regex_tester.html
Unescape Escape View File

@ -49,6 +49,10 @@ pre {
min-height: 1em; min-height: 1em;
display: flow-root; display: flow-root;
} }
.samptxt_outer {
display: block;
overflow: auto;
}
pre.samptxt { pre.samptxt {
padding: 2px; padding: 2px;
display: inline-block; display: inline-block;
@ -56,14 +60,16 @@ pre.samptxt {
textarea.samp_ta { textarea.samp_ta {
min-width: 10em; min-width: 10em;
min-height: 1em; min-height: 1em;
max-width: calc(100% - 1.5em); width: calc(100% - 1.7em);
width: 100%; height: 1.1em;
border: 1px solid grey; border: 1px solid grey;
padding: 1px; padding: 1px;
display: inline-block; display: inline-block;
resize: vertical;
} }
.closebtn { .closebtn {
float: right; float: right;
margin-left: 5px;
cursor: pointer; cursor: pointer;
} }
.re_output { .re_output {
@ -215,33 +221,37 @@ sub sample_init {
my $samp = shift; my $samp = shift;
state $samp_id = 'a'; state $samp_id = 'a';
$samp->attr('id',"samp_".$samp_id++) unless $samp->attr('id'); $samp->attr('id',"samp_".$samp_id++) unless $samp->attr('id');
my $samptxt = $samp->children(".samptxt"); my $samptxt = $samp->find(".samptxt");
my $samptxt_outer = $jq->('<div/>',{class=>"samptxt_outer"});
$samptxt->wrap($samptxt_outer);
my $samp_ta = $jq->('<textarea/>', {class=>"samp_ta"}); my $samp_ta = $jq->('<textarea/>', {class=>"samp_ta"});
$samp_ta->hide(); $samp_ta->hide();
$samp_ta->appendTo($samp); $samp_ta->appendTo($samp);
my $closebtn = $jq->('<div/>', {html=>"&#x274E;",class=>"closebtn", my $closebtn = $jq->('<div/>', {html=>"&#x274E;",class=>"closebtn",
title=>"Delete Sample"}); title=>"Delete Sample"});
$closebtn->appendTo($samp); $closebtn->prependTo($samp);
$jq->('<pre/>', {class=>'re_output'})->appendTo($samp); $jq->('<pre/>', {class=>'re_output'})->appendTo($samp);
$jq->('<pre/>', {class=>'re_warns'})->appendTo($samp); $jq->('<pre/>', {class=>'re_warns'})->appendTo($samp);
$jq->('<pre/>', {class=>'re_errors'})->appendTo($samp); $jq->('<pre/>', {class=>'re_errors'})->appendTo($samp);
$samp->click(sub { $samp->click(sub {
return if $samp_ta->is(':visible'); return if $samp_ta->is(':visible');
$samp_ta->height($samptxt->height);
$samp_ta->val($samptxt->text); $samp_ta->val($samptxt->text);
my $th = $samptxt->height;
$samptxt->hide; $samptxt->hide;
$samp_ta->show; $samp_ta->show;
my $sh = $samp_ta->[0]{scrollHeight}-2; # subtract padding
# I'm not quite sure of the rounding that's happening in the browser yet...
$samp_ta->height( int($sh) > int($th)+1 ? $sh : $th );
$samp_ta->focus; $samp_ta->focus;
}); });
$samp_ta->focusout(sub { $samp_ta->focusout(sub {
$samptxt->text($samp_ta->val); $samptxt->text($samp_ta->val);
$samptxt->height($samp_ta->height);
$samp_ta->hide; $samp_ta->hide;
$samptxt->show; $samptxt->show;
update(); update();
}); });
$samp_ta->on('input', sub { $samp_ta->on('input', sub { # autoexpand for new lines
$samp_ta->height($samp_ta->[0]->{scrollHeight}-2); # subtract padding $samp_ta->height($samp_ta->[0]{scrollHeight}-2); # subtract padding
}); });
$closebtn->click(sub { $samp->remove; update() }); $closebtn->click(sub { $samp->remove; update() });
} }
@ -325,8 +335,8 @@ $ta_flags->keyup( \&update);
js('$(window)')->on('hashchange',\&hashchange); js('$(window)')->on('hashchange',\&hashchange);
$ta_regex->on('input', sub { $ta_regex->on('input', sub { # autoexpand for new lines
$ta_regex->height($ta_regex->[0]->{scrollHeight}); $ta_regex->height($ta_regex->[0]{scrollHeight});
}); });
hashchange(); hashchange();
@ -370,7 +380,7 @@ sub actual_update {
my @samps; my @samps;
for my $sample (map {$jq->($_)} $jq->('.sample')->@*) { for my $sample (map {$jq->($_)} $jq->('.sample')->@*) {
my $samptxt = $sample->children('.samptxt'); my $samptxt = $sample->find('.samptxt');
my $text = $samptxt->text; my $text = $samptxt->text;
push @samps, $text; # for use below push @samps, $text; # for use below
my $code = $precode . ( $re_debug ? "use re \"debug\";\n" : '' ) my $code = $precode . ( $re_debug ? "use re \"debug\";\n" : '' )
@ -446,7 +456,7 @@ sub run_code_callback {
if (!$sample->{length}) { if (!$sample->{length}) {
warn "got callback for nonexistent sample ".$rv->{context}; warn "got callback for nonexistent sample ".$rv->{context};
return } return }
my $samptxt = $sample->children('.samptxt'); my $samptxt = $sample->find('.samptxt');
my $text = $samptxt->text; my $text = $samptxt->text;
my $errs = ''; my $errs = '';
if ( $rv->{out} && $rv->{out}->@* ) { if ( $rv->{out} && $rv->{out}->@* ) {
@ -540,7 +550,7 @@ sub hashchange {
} }
if (exists $res{regex} && exists $res{flags}) { if (exists $res{regex} && exists $res{flags}) {
$ta_regex->val($res{regex}); $ta_regex->val($res{regex});
$ta_regex->height($ta_regex->[0]->{scrollHeight}); $ta_regex->height($ta_regex->[0]{scrollHeight});
$ta_flags->val($res{flags}); $ta_flags->val($res{flags});
sampcode_show() if $res{showsampcode}; sampcode_show() if $res{showsampcode};
precode_show($res{pre}) if exists $res{pre}; precode_show($res{pre}) if exists $res{pre};
@ -560,24 +570,26 @@ sub hashchange {
</head> </head>
<body> <body>
<div style="margin-bottom:1em;font-size:1.2em"><b>Perl Regex Tester</b> <div style="margin-bottom:1em;font-size:1.2em;text-align:center;"><b>Perl Regex Tester</b>
- powered by <a href="http://webperl.zero-g.net" target="_blank">WebPerl</a> (beta)</div> - powered by <a href="http://webperl.zero-g.net" target="_blank">WebPerl</a> (beta)</div>
<div id="loading" style="position:absolute;left:40%;font-size:1.2em;font-weight:bold;color:red;"><tt>Loading...</tt></div> <div id="loading" style="position:absolute;left:40%;font-size:1.2em;font-weight:bold;color:red;"><tt>Loading...</tt></div>
<div style="margin-bottom:1em"> <div style="margin-bottom:1em;">
<div><button id="precodebtn">Add Preamble Code</button></div> <div>
<textarea id="precode" rows="3" cols="80" style="display:none"> <button id="precodebtn">Add Preamble Code</button>
my $x = "foo"; # example </div>
</textarea> <div>
<textarea id="precode" rows="3" cols="80" style="display:none;min-height:1.2em;min-width:10em;max-width:100%;">my $x = "foo"; # example</textarea>
</div>
</div> </div>
<div style="margin-bottom:1em"> <div style="margin-bottom:1em;white-space:nowrap;">
<div><tt style="vertical-align: top;">m{</tt <div><tt style="vertical-align:top;">m{</tt
><textarea id="regex" rows="1" cols="50" style="height:1.2em" ><textarea id="regex" rows="1" cols="60" style="height:1.2em;min-height:1.2em;min-width:10em;"
title="Perl Regular Expression">wo(.)</textarea title="Perl Regular Expression">wo(.)</textarea
><tt style="vertical-align: text-bottom;">}</tt ><tt style="vertical-align:text-bottom;">}</tt
><textarea id="flags" rows="1" cols="5" style="height:1.2em" ><textarea id="flags" rows="1" cols="7" style="height:1.2em;min-height:1.2em;min-width:3em;"
title="Flags for Regular Expression">gi</textarea></div> title="Flags for Regular Expression">gi</textarea></div>
<pre id="warnmsgs" class="re_warns"></pre> <pre id="warnmsgs" class="re_warns"></pre>
</div> </div>
@ -588,29 +600,38 @@ my $x = "foo"; # example
<div class="sample"> <div class="sample">
<pre class="samptxt">Oh, what a wonderful world!</pre> <pre class="samptxt">Oh, what a wonderful world!</pre>
</div> </div>
<div style="text-align:right"> <div style="text-align:right;">
<!-- note this is used as the insertion point for new samples, be careful when changing -->
<button id="addsamp">Add Sample</button> <button id="addsamp">Add Sample</button>
</div> </div>
<div style="margin-top:0.5em"> <div style="margin-top:0.5em;">
<div style="white-space:nowrap;">
<button id="sampcodebtn">Show Example Perl Code</button> <button id="sampcodebtn">Show Example Perl Code</button>
<span id="codecopy" style="cursor:pointer" title="Copy to Clipboard">&#x1F4CB;</span><br/> <span id="codecopy" style="cursor:pointer;" title="Copy to Clipboard">&#x1F4CB;</span><br/>
<textarea id="samplecode" rows="20" cols="80" style="font-size:0.8em;display:none" readonly="readonly"></textarea> </div>
<div>
<textarea id="samplecode" rows="20" cols="80" style="display:none;font-size:0.8em;min-height:1.2em;min-width:10em;max-width:100%;" readonly="readonly"></textarea>
</div>
</div> </div>
<div style="margin-top:0.5em"> <div style="margin-top:0.5em;">
<button id="re_debug"><tt>use re "debug";</tt></button> <button id="re_debug"><tt>use re "debug";</tt></button>
</div> </div>
<div style="margin-top:0.5em"> <div style="margin-top:0.5em;">
<div style="white-space:nowrap;">
URL: URL:
<textarea id="thisurl" rows="2" cols="80" style="height:2.4em;font-size:0.8em" readonly="readonly"></textarea> <span id="urlcopy" style="cursor:pointer;" title="Copy to Clipboard">&#x1F4CB;</span>
<span id="urlcopy" style="cursor:pointer" title="Copy to Clipboard">&#x1F4CB;</span> </div>
<div>
<textarea id="thisurl" rows="2" cols="80" style="font-size:0.8em;height:2.4em;min-height:1.2em;min-width:10em;max-width:100%;" readonly="readonly"></textarea>
</div>
</div> </div>
<pre id="perlinfo" style="margin-top:0.5em">perl v?, WebPerl v?</pre> <pre id="perlinfo" style="margin-top:0.5em;">perl v?, WebPerl v?</pre>
<div style="margin-top:1em;font-size:0.8em"> <div style="margin-top:1em;font-size:0.8em;">
Perl Regular Expression Documentation: Perl Regular Expression Documentation:
<a href="http://perldoc.perl.org/perlretut.html" target="_blank">Tutorial</a>, <a href="http://perldoc.perl.org/perlretut.html" target="_blank">Tutorial</a>,
<a href="http://perldoc.perl.org/perlrequick.html" target="_blank">Quick Start</a>, <a href="http://perldoc.perl.org/perlrequick.html" target="_blank">Quick Start</a>,

Write Preview
Loading…
Cancel
Save