Skip to content

Commit ea52d9c

Browse files
wimpyprogrammerwimpyprogrammer
committed
Merge branch 'release/1.1.0'
2 parents 8399544 + 29a7f5f commit ea52d9c

17 files changed

+118
-58
lines changed

‎.eslintrc.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,7 @@
3030
{
3131
"ignore": [
3232
"history",
33+
"lodash",
3334
// Workaround for alexgorbatchev/eslint-import-resolver-typescript#17
3435
"regexp-tree/ast",
3536
"RegexColorizer"

‎.travis.yml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
language: node_js
22
node_js:
33
- 'node'
4-
- '8'
4+
- '10'
55
script:
66
- npm run travisci
77
cache:

‎demo/index.html‎

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,7 @@
4343

4444
<script
4545
crossorigin="anonymous"
46-
src="https://polyfill.app/api/polyfill?features=url,es.number.is-nan,es.string.raw,event.constructor&context=window"
46+
src="https://polyfill.app/api/polyfill?features=class-list,es.array.includes,es.number.is-nan,es.string.raw,event.constructor,url&context=window"
4747
></script>
4848
</head>
4949

@@ -125,6 +125,7 @@
125125
id="delimiter"
126126
class="form-control js-delimiter track-field"
127127
>
128+
<option value="block">Block</option>
128129
<option value="&#10;">Newline</option>
129130
<option value=",">Comma</option>
130131
<option value=" ">Space</option>
@@ -171,7 +172,7 @@
171172
<div class="card-header">
172173
Your Regular Expression, optimized and colored:
173174
</div>
174-
<div class="card-body js-output-optimized"></div>
175+
<div class="card-body output-optimized js-output-optimized"></div>
175176
<div class="card-footer text-muted">
176177
Optimization by
177178
<a
@@ -184,7 +185,7 @@
184185
</div>
185186
</div>
186187

187-
<div class="form-group output-container">
188+
<div class="form-group output-container js-output-container">
188189
<label for="output">
189190
Strings matched by your Regular Expression:
190191
</label>
@@ -250,6 +251,11 @@ <h5 class="card-title">Thanks for your feedback!</h5>
250251
integrity="sha256-MuBtHI2giF+TT2E9FjNxVovCaSkndV8cq59ddt915Co="
251252
src="https://cdnjs.cloudflare.com/ajax/libs/history/4.9.0/history.min.js"
252253
></script>
254+
<script
255+
crossorigin="anonymous"
256+
integrity="sha256-yEkk5ZYVs/fZgvxWU+sCb8bHTk9jScxIaZQD+CZ4vcg="
257+
src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.15/lodash.core.min.js"
258+
></script>
253259
<script src="https://cdn.jsdelivr.net/gh/slevithan/regex-colorizer@0.3.1/regex-colorizer.min.js"></script>
254260
<script type="text/javascript" src="lib/demo.js"></script>
255261
</body>

‎demo/src/_variables.scss‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -30,3 +30,15 @@ $breakpoint-sm: 576px;
3030
$breakpoint-md: 768px;
3131
$breakpoint-lg: 992px;
3232
$breakpoint-xl: 1200px;
33+
34+
@mixin md-only {
35+
@media (min-width: #{$breakpoint-md}) and (max-width: #{$breakpoint-lg - 1px}) {
36+
@content;
37+
}
38+
}
39+
40+
@mixin lg-up {
41+
@media (min-width: #{$breakpoint-lg}) {
42+
@content;
43+
}
44+
}

‎demo/src/components/demo-form.scss‎

Lines changed: 10 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,21 @@
11
@import '../_variables';
22

3+
#pattern {
4+
font-size: 140%;
5+
}
6+
7+
#max-results,
8+
#delimiter {
9+
// Inherit from <body>: https://stackoverflow.com/a/2875114
10+
font-size: inherit;
11+
}
12+
313
input:invalid,
414
textarea:invalid,
515
select:invalid {
616
border: 2px solid $danger;
717
}
818

9-
.automaticHeight {
10-
box-sizing: padding-box;
11-
overflow: hidden;
12-
resize: none;
13-
}
14-
1519
.alert pre {
1620
color: inherit;
1721
margin-top: 1em;

‎demo/src/components/demo-output.scss‎

Lines changed: 23 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -9,20 +9,37 @@ span[title] {
99
margin-top: 1em;
1010
}
1111

12+
.output-optimized {
13+
font-size: 125%;
14+
}
15+
1216
#output {
13-
border: 1px $primary dotted;
14-
font-size: 1.1em;
15-
height: 30em;
16-
line-height: 1.6em;
17-
padding: 0.5em;
17+
font-size: 1rem;
18+
line-height: 1.6rem;
19+
20+
&.plaintext-output {
21+
border: 1px $primary dotted;
22+
max-height: 30em;
23+
padding: 0.5em;
24+
}
1825

1926
&.wrap-output {
2027
white-space: pre-wrap;
2128
}
2229

23-
&.is-waiting {
30+
&:not(.plaintext-output) > * {
31+
margin-bottom: -0.75em;
32+
overflow: auto;
33+
34+
&:last-child {
35+
margin-bottom: 0;
36+
}
37+
}
38+
39+
.is-waiting & {
2440
background: no-repeat center/5em
2541
url('https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/0.19.3/images/loader-large.gif');
42+
height: 20px + 64px + 20px; // height of loading graphic, plus padding
2643
}
2744

2845
& > :nth-child(odd) {

‎demo/src/components/demo-output.ts‎

Lines changed: 25 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,21 @@
11
/* eslint-disable lines-between-class-members */
22

3+
import { escape } from 'lodash'; // eslint-disable-line import/no-extraneous-dependencies
34
import { colorizeRegex } from '../utils/colorize-regex';
45
import { getElement } from '../utils/dom';
56

67
import './demo-output.scss';
78

89
export default class DemoOutput {
10+
protected $container: HTMLDivElement;
911
protected $expansions: HTMLPreElement;
1012
protected $displayCount: HTMLSpanElement;
1113
protected $totalCount: HTMLSpanElement;
1214
protected $optimized: HTMLDivElement;
1315
protected $optimizedContainer: HTMLDivElement;
1416

1517
public constructor() {
18+
this.$container = getElement('.js-output-container');
1619
this.$expansions = getElement('.js-output');
1720
this.$displayCount = getElement('.js-output-count');
1821
this.$totalCount = getElement('.js-total-count');
@@ -21,15 +24,27 @@ export default class DemoOutput {
2124
}
2225

2326
public display(expansions: string[], delimiter: string) {
24-
this.$expansions.classList.toggle('wrap-output', delimiter !== '\n');
25-
this.$expansions.innerHTML = expansions
26-
.map(string => `<span>${string}</span>`)
27-
.join(delimiter);
27+
const isBlockOutput = delimiter === 'block';
28+
const isWrappingDelimiter = ['\n', 'block'].includes(delimiter);
29+
30+
this.$expansions.classList.toggle('plaintext-output', !isBlockOutput);
31+
this.$expansions.classList.toggle('wrap-output', !isWrappingDelimiter);
32+
33+
if (isBlockOutput) {
34+
this.$expansions.innerHTML = expansions
35+
.map(string => `<div class="alert alert-light">${escape(string)}</div>`)
36+
.join('\n');
37+
} else {
38+
this.$expansions.innerHTML = expansions
39+
.map(string => `<span>${escape(string)}</span>`)
40+
.join(delimiter);
41+
}
42+
2843
this.$displayCount.innerText = expansions.length.toLocaleString();
2944
}
3045

3146
public hideWaiting() {
32-
this.$expansions.classList.remove('is-waiting');
47+
this.$container.classList.remove('is-waiting');
3348
}
3449

3550
public setOptimizedPattern(optimizedPattern: string) {
@@ -46,9 +61,12 @@ export default class DemoOutput {
4661
}
4762

4863
public showWaiting() {
64+
this.$container.classList.add('is-waiting');
65+
66+
this.$expansions.classList.remove('plaintext-output', 'wrap-output');
4967
this.$expansions.innerHTML = '';
50-
this.$expansions.classList.add('is-waiting');
51-
this.$optimizedContainer.hidden = true;
68+
69+
this.$optimized.textContent = '...';
5270
this.$displayCount.innerText = '...';
5371
this.$totalCount.innerText = '...';
5472
}

‎demo/src/demo.scss‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,14 @@
1+
@import './_variables';
2+
3+
body {
4+
@include md-only {
5+
font-size: 1em;
6+
}
7+
@include lg-up {
8+
font-size: 1.1em;
9+
}
10+
}
11+
112
.navbar {
213
> .container {
314
justify-content: inherit;

‎demo/src/demo.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -115,7 +115,7 @@ initializeNewWorker();
115115
const urlData = UrlStorage.read();
116116
const exampleInput = String.raw`/^((https?|ftp|file):\/\/)?([\d\-a-z]{1,5}\.){2,5}([a-z]{2,6})\/([\d\-._a-z]{1,10}\/){0,5}$/`;
117117
const initialData = {
118-
delimiter: urlData.delimiter || '&#10;', // newline
118+
delimiter: urlData.delimiter || 'block',
119119
numResults: urlData.numResults || 100,
120120
pattern: urlData.pattern || exampleInput,
121121
};

‎demo/src/utils/auto-expand-field.scss‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
.automaticHeight {
2+
box-sizing: padding-box;
3+
overflow: hidden;
4+
resize: none;
5+
}

0 commit comments

Comments
 (0)