Skip to content

Commit

Permalink
Formatting cleanup (#467)
Browse files Browse the repository at this point in the history 
* Formatting cleanup
  • Loading branch information
@wiredearp
wiredearp authored Dec 13, 2017
1 parent a94d127 commit 04639b7
Show file tree
Hide file tree
Showing 6 changed files with 75 additions and 84 deletions.
17 changes: 17 additions & 0 deletions docs/dist/assets/dox.css
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

71 changes: 27 additions & 44 deletions docs/dist/components/forms/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -68,9 +68,8 @@ <h1><span>Form</span></h1>
</div>
</figure>
<h3><span>
<span class="el">textarea</span>
</span>
</h3>
<code class="el">textarea</code>
</span></h3>
<p>Starts out with three lines, but will expand up to ten as content is entered. The <code class="attr-pair"><span>rows</span></code> attribute can be used to adjust the initial amount of lines to show.</p>
<figure data-ts="DoxMarkup" data-ts.code="%3Cform%20data-ts%3D%22Form%22%3E%0A%09%3Cfieldset%3E%0A%09%09%3Clabel%3E%0A%09%09%09%3Cspan%3ETextarea%3C%2Fspan%3E%0A%09%09%09%3Ctextarea%3E%3C%2Ftextarea%3E%0A%09%09%3C%2Flabel%3E%0A%09%3C%2Ffieldset%3E%0A%3C%2Fform%3E">
<script type="text/html">
Expand Down Expand Up @@ -142,10 +141,8 @@ <h3><span>
</div>
</figure>
<h3><span>
<span class="el">input</span>
<span class="attr-pair">
<span>type</span>=&quot;<span>text</span>&quot;
</span>
<code class="el">input</code>
<code class="attr-pair"><span>type</span>=&quot;<span>text</span>&quot;</code>
</span>
</h3>
<figure data-ts="DoxMarkup" data-ts.code="%3Cform%20data-ts%3D%22Form%22%3E%0A%09%3Cfieldset%3E%0A%09%09%3Clabel%3E%0A%09%09%09%3Cspan%3EText%3C%2Fspan%3E%0A%09%09%09%3Cinput%20type%3D%22text%22%20required%2F%3E%0A%09%09%3C%2Flabel%3E%0A%09%3C%2Ffieldset%3E%0A%3C%2Fform%3E">
Expand Down Expand Up @@ -183,10 +180,8 @@ <h3><span>
</div>
</figure>
<h3><span>
<span class="el">input</span>
<span class="attr-pair">
<span>type</span>=&quot;<span>tel</span>&quot;
</span>
<code class="el">input</code>
<code class="attr-pair"><span>type</span>=&quot;<span>tel</span>&quot;</code>
</span>
</h3>
<figure data-ts="DoxMarkup" data-ts.code="%3Cform%20data-ts%3D%22Form%22%3E%0A%09%3Cfieldset%3E%0A%09%09%3Clabel%3E%0A%09%09%09%3Cspan%3ETel%3C%2Fspan%3E%0A%09%09%09%3Cinput%20type%3D%22tel%22%20required%2F%3E%0A%09%09%3C%2Flabel%3E%0A%09%3C%2Ffieldset%3E%0A%3C%2Fform%3E">
Expand Down Expand Up @@ -224,10 +219,8 @@ <h3><span>
</div>
</figure>
<h3><span>
<span class="el">input</span>
<span class="attr-pair">
<span>type</span>=&quot;<span>email</span>&quot;
</span>
<code class="el">input</code>
<code class="attr-pair"><span>type</span>=&quot;<span>email</span>&quot;</code>
</span>
</h3>
<figure data-ts="DoxMarkup" data-ts.code="%3Cform%20data-ts%3D%22Form%22%3E%0A%09%3Cfieldset%3E%0A%09%09%3Clabel%3E%0A%09%09%09%3Cspan%3EEmail%3C%2Fspan%3E%0A%09%09%09%3Cinput%20type%3D%22email%22%20required%2F%3E%0A%09%09%3C%2Flabel%3E%0A%09%3C%2Ffieldset%3E%0A%3C%2Fform%3E">
Expand Down Expand Up @@ -265,10 +258,8 @@ <h3><span>
</div>
</figure>
<h3><span>
<span class="el">input</span>
<span class="attr-pair">
<span>type</span>=&quot;<span>number</span>&quot;
</span>
<code class="el">input</code>
<code class="attr-pair"><span>type</span>=&quot;<span>number</span>&quot;</code>
</span>
</h3>
<p>
Expand Down Expand Up @@ -309,10 +300,8 @@ <h3><span>
</div>
</figure>
<h3><span>
<span class="el">input</span>
<span class="attr-pair">
<span>type</span>=&quot;<span>date</span>&quot;
</span>
<code class="el">input</code>
<code class="attr-pair"><span>type</span>=&quot;<span>date</span>&quot;</code>
</span>
</h3>
<figure data-ts="DoxMarkup" data-ts.code="%3Cform%20data-ts%3D%22Form%22%3E%0A%09%3Cfieldset%3E%0A%09%09%3Clabel%3E%0A%09%09%09%3Cspan%3EDate%3C%2Fspan%3E%0A%09%09%09%3Cinput%20type%3D%22date%22%0A%09%09%09%09value%3D%222015-01-01%22%0A%09%09%09%09min%3D%222014-01-01%22%0A%09%09%09%09max%3D%222016-01-01%22%2F%3E%0A%09%09%3C%2Flabel%3E%0A%09%3C%2Ffieldset%3E%0A%3C%2Fform%3E">
Expand Down Expand Up @@ -356,9 +345,8 @@ <h3><span>
</div>
</figure>
<h3><span>
<span class="el">select</span>
</span>
</h3>
<code class="el">select</code>
</span></h3>
<p>
The <code class="el">select</code> will open in an Aside, but you&apos;ll mantain it like a normal <code class="el">select</code>. Note that the <code class="el">select</code> only triggers a
<code>change</code> event when the Aside is fully closed!
Expand Down Expand Up @@ -470,18 +458,19 @@ <h3><span>
manually create the empty <code class="el">option</code> and make sure that it is explicitly selected as default.</p>
</div>
<h3><span>
<span class="el">select</span>
<span class="attr-name">multiple</span>
<code class="el">select</code>
<code class="attr-pair"><span>multiple
</span></code>
</span>
</h3>
<p>The <code class="el">select</code> <code class="attr-pair"><span>multiple</span></code> only triggers a change when the <samp>Done</samp> button is pressed. You can customize the button label by adding a <code class="el">button</code> to the <code class="el">label</code> element, but note that this only configures the <em>text</em> on the button (eg. no event listeners are fired).</p>
<figure data-ts="DoxMarkup" data-ts.code="%3Cform%20data-ts%3D%22Form%22%3E%0A%09%3Cfieldset%3E%0A%09%09%3Clabel%3E%0A%09%09%09%3Cspan%3ESelect%20multiple%3C%2Fspan%3E%0A%09%09%09%3Cselect%20multiple%3E%0A%09%09%09%09%3Coption%20value%3D%22a%22%3EOne%3C%2Foption%3E%0A%09%09%09%09%3Coption%20value%3D%22b%22%3ETwo%3C%2Foption%3E%0A%09%09%09%09%3Coption%20value%3D%22c%22%3EThree%3C%2Foption%3E%0A%09%09%09%09%3Coption%20value%3D%22d%22%3EFour%3C%2Foption%3E%0A%09%09%09%09%3Coption%20value%3D%22e%22%3EFive%3C%2Foption%3E%0A%09%09%09%3C%2Fselect%3E%0A%09%09%09%3Cbutton%3ECool%2C%20apply%20changes!%3C%2Fbutton%3E%0A%09%09%3C%2Flabel%3E%0A%09%3C%2Ffieldset%3E%0A%3C%2Fform%3E">
<figure data-ts="DoxMarkup" data-ts.code="%3Cform%20data-ts%3D%22Form%22%3E%0A%09%3Cfieldset%3E%0A%09%09%3Clabel%3E%0A%09%09%09%3Cspan%3ESelect%20multiple%3C%2Fspan%3E%0A%09%09%09%3Cselect%20multiple%20id%3D%22multijohn%22%3E%0A%09%09%09%09%3Coption%20value%3D%22a%22%3EOne%3C%2Foption%3E%0A%09%09%09%09%3Coption%20value%3D%22b%22%3ETwo%3C%2Foption%3E%0A%09%09%09%09%3Coption%20value%3D%22c%22%3EThree%3C%2Foption%3E%0A%09%09%09%09%3Coption%20value%3D%22d%22%3EFour%3C%2Foption%3E%0A%09%09%09%09%3Coption%20value%3D%22e%22%3EFive%3C%2Foption%3E%0A%09%09%09%3C%2Fselect%3E%0A%09%09%09%3Cbutton%3ECool%2C%20apply%20changes!%3C%2Fbutton%3E%0A%09%09%3C%2Flabel%3E%0A%09%3C%2Ffieldset%3E%0A%3C%2Fform%3E">
<script type="text/html">
<form data-ts="Form">
<fieldset>
<label>
<span>Select multiple</span>
<select multiple>
<select multiple id="multijohn">
<option value="a">One</option>
<option value="b">Two</option>
<option value="c">Three</option>
Expand All @@ -499,7 +488,7 @@ <h3><span>
<fieldset>
<label>
<span>Select multiple</span>
<select multiple>
<select multiple id="multijohn">
<option value="a">One</option>
<option value="b">Two</option>
<option value="c">Three</option>
Expand All @@ -516,7 +505,7 @@ <h3><span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>fieldset</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>label</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span><span class="token punctuation">&gt;</span></span>Select multiple<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>select</span> <span class="token attr-name">multiple</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>select</span> <span class="token attr-name">multiple</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>multijohn<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>a<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>One<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>option</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>b<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Two<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>option</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>c<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Three<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>option</span><span class="token punctuation">&gt;</span></span>
Expand All @@ -531,10 +520,8 @@ <h3><span>
</div>
</figure>
<h3><span>
<span class="el">input</span>
<span class="attr-pair">
<span>type</span>=&quot;<span>radio</span>&quot;
</span>
<code class="el">input</code>
<code class="attr-pair"><span>type</span>=&quot;<span>radio</span>&quot;</code>
</span>
</h3>
<p>Radio element. Generally used to choose something.</p>
Expand Down Expand Up @@ -588,10 +575,8 @@ <h3><span>
</div>
</figure>
<h3><span>
<span class="el">input</span>
<span class="attr-pair">
<span>type</span>=&quot;<span>checkbox</span>&quot;
</span>
<code class="el">input</code>
<code class="attr-pair"><span>type</span>=&quot;<span>checkbox</span>&quot;</code>
</span>
</h3>
<p>Checkbox element. Generally used to indicate consent on forms.</p>
Expand Down Expand Up @@ -645,10 +630,8 @@ <h3><span>
</div>
</figure>
<h3><span>
<span class="el">input</span>
<span class="attr-pair">
<span>type</span>=&quot;<span>checkbox</span>&quot;
</span>
<code class="el">input</code>
<code class="attr-pair"><span>type</span>=&quot;<span>textbox</span>&quot;</code>
<span style="color:rgb(127,127,127);">(alternate version)</span>
</span>
</h3>
Expand Down
2 changes: 1 addition & 1 deletion docs/dist/lunr.json
View file

Large diffs are not rendered by default.

6 changes: 6 additions & 0 deletions docs/src/less/dox-typo.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -81,6 +81,12 @@ samp {
hyphens: none;
}

h1,h2,h3 {
code, pre, var, kbd, samp {
font-size: inherit;
}
}

/* Remove font-weight hack for certain elements ..............................*/
ul.splitscreen li:last-child {
&,
Expand Down
58 changes: 21 additions & 37 deletions docs/src/xhtml/components/forms/index.xhtml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@
</figure>

<h3>
<span class="el">textarea</span>
<elm>textarea</elm>
</h3>
<p>Starts out with three lines, but will expand up to ten as content is entered. The <att>rows</att> attribute can be used to adjust the initial amount of lines to show.</p>
<figure data-ts="DoxMarkup">
Expand Down Expand Up @@ -66,10 +66,8 @@
</figure>

<h3>
<span class="el">input</span>
<span class="attr-pair">
<span>type</span>=&quot;<span>text</span>&quot;
</span>
<elm>input</elm>
<att>type=text</att>
</h3>
<figure data-ts="DoxMarkup">
<output/>
Expand All @@ -86,10 +84,8 @@
</figure>

<h3>
<span class="el">input</span>
<span class="attr-pair">
<span>type</span>=&quot;<span>tel</span>&quot;
</span>
<elm>input</elm>
<att>type=tel</att>
</h3>
<figure data-ts="DoxMarkup">
<output/>
Expand All @@ -106,10 +102,8 @@
</figure>

<h3>
<span class="el">input</span>
<span class="attr-pair">
<span>type</span>=&quot;<span>email</span>&quot;
</span>
<elm>input</elm>
<att>type=email</att>
</h3>
<figure data-ts="DoxMarkup">
<output/>
Expand All @@ -126,10 +120,8 @@
</figure>

<h3>
<span class="el">input</span>
<span class="attr-pair">
<span>type</span>=&quot;<span>number</span>&quot;
</span>
<elm>input</elm>
<att>type=number</att>
</h3>
<p>
Set the class <att>class="ts-right"</att> on the <elm>label</elm> to make your number text align right.
Expand All @@ -149,10 +141,8 @@
</figure>

<h3>
<span class="el">input</span>
<span class="attr-pair">
<span>type</span>=&quot;<span>date</span>&quot;
</span>
<elm>input</elm>
<att>type=date</att>
</h3>
<figure data-ts="DoxMarkup">
<output/>
Expand All @@ -172,7 +162,7 @@
</figure>

<h3>
<span class="el">select</span>
<elm>select</elm>
</h3>
<p>
The <elm>select</elm> will open in an Aside, but you'll
Expand Down Expand Up @@ -229,8 +219,8 @@
</div>

<h3>
<span class="el">select</span>
<span class="attr-name">multiple</span>
<elm>select</elm>
<att>multiple<att/>
</h3>
<p>The <elm>select</elm> <att>multiple</att> only triggers a change when the <samp>Done</samp> button is pressed. You can customize the button label by adding a <elm>button</elm> to the <elm>label</elm> element, but note that this only configures the <em>text</em> on the button (eg. no event listeners are fired).</p>
<figure data-ts="DoxMarkup">
Expand All @@ -240,7 +230,7 @@
<fieldset>
<label>
<span>Select multiple</span>
<select multiple>
<select multiple id="multijohn">
<option value="a">One</option>
<option value="b">Two</option>
<option value="c">Three</option>
Expand All @@ -255,10 +245,8 @@
</figure>

<h3>
<span class="el">input</span>
<span class="attr-pair">
<span>type</span>=&quot;<span>radio</span>&quot;
</span>
<elm>input</elm>
<att>type=radio</att>
</h3>
<p>Radio element. Generally used to choose something.</p>
<figure data-ts="DoxMarkup">
Expand All @@ -281,10 +269,8 @@
</figure>

<h3>
<span class="el">input</span>
<span class="attr-pair">
<span>type</span>=&quot;<span>checkbox</span>&quot;
</span>
<elm>input</elm>
<att>type=checkbox</att>
</h3>
<p>Checkbox element. Generally used to indicate consent on forms.</p>
<figure data-ts="DoxMarkup">
Expand All @@ -307,10 +293,8 @@
</figure>

<h3>
<span class="el">input</span>
<span class="attr-pair">
<span>type</span>=&quot;<span>checkbox</span>&quot;
</span>
<elm>input</elm>
<att>type=textbox</att>
<span style="color:rgb(127,127,127);">(alternate version)</span>
</h3>
<p>We call it the <code>switch</code>. Used mainly for toggling preferences/settings. Note that <code>switch</code> differs from the <code>checkbox</code> only by the order of HTML elements.</p>
Expand Down
5 changes: 3 additions & 2 deletions docs/tasks/processor.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -380,16 +380,17 @@ function splitscreen($) {
* @returns {$}
*/
function specialtags($) {
const value = val => (val.startsWith('"') ? val.slice(1, -1) : val);
$('att').each(function(i, tag) {
var txt = $(tag).text();
var att = txt.split('=')[0];
var val = txt.split('="')[1];
var val = txt.split('=')[1];
$(tag).replaceWith(
'<code class="attr-pair">' +
'<span>' +
att +
'</span>' +
(val ? '="<span>' + val.slice(0, -1) + '</span>"' : '') +
(val ? '="<span>' + value(val) + '</span>"' : '') +
'</code>'
);
});
Expand Down

0 comments on commit 04639b7

Please sign in to comment.