Skip to content

Commit

Permalink
update docs
Browse files Browse the repository at this point in the history
  • Loading branch information
@uNmAnNeR
uNmAnNeR committed Feb 3, 2022
1 parent b308ebd commit 7ffd220
Show file tree
Hide file tree
Showing 4 changed files with 221 additions and 29 deletions.
142 changes: 139 additions & 3 deletions docs/api/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -511,6 +511,12 @@ <h3 class='mb0 no-anchor'>imask</h3>
#typedValue
</a></li>

<li><a
href='#maskeddatemaskequals'
class='regular pre-open'>
#maskEquals
</a></li>

</ul>


Expand Down Expand Up @@ -1118,6 +1124,16 @@ <h3 class='mb0 no-anchor'>imask</h3>
</li>


<li><a
href='#isfixed'
class="">
isFixed

</a>

</li>


<li><a
href='#blockindex'
class="">
Expand Down Expand Up @@ -5203,7 +5219,7 @@ <h3 class='fl m0' id='maskeddate'>

<p>
Type:
<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean">boolean</a>
(<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean">boolean</a> | <code>"pad"</code>)
</p>


Expand Down Expand Up @@ -5545,6 +5561,72 @@ <h3 class='fl m0' id='maskeddate'>



</section>

</div>
</div>

<div class='border-bottom' id='maskeddatemaskequals'>
<div class="clearfix small pointer toggle-sibling">
<div class="py1 contain">
<a class='icon pin-right py1 dark-link caret-right'>▸</a>
<span class='code strong strong truncate'>maskEquals(mask)</span>
</div>
</div>
<div class="clearfix display-none toggle-target">
<section class='p2 mb2 clearfix bg-white minishadow'>




<div class='pre p1 fill-light mt0'>maskEquals(mask: any): <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean">boolean</a></div>











<div class='py1 quiet mt1 prose-big'>Parameters</div>
<div class='prose'>

<div class='space-bottom0'>
<div>
<span class='code bold'>mask</span> <code class='quiet'>(any)</code>

</div>

</div>

</div>






<div class='py1 quiet mt1 prose-big'>Returns</div>
<code><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean">boolean</a></code>
















</section>

</div>
Expand Down Expand Up @@ -7971,7 +8053,7 @@ <h3 class='fl m0' id='masked'>

<p>
Type:
<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean">boolean</a>?
(<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean">boolean</a>? | <code>"shift"</code>)
</p>


Expand Down Expand Up @@ -10912,6 +10994,60 @@ <h3 class='fl m0' id='_israwinput'>












</section>




<section class='p2 mb2 clearfix bg-white minishadow'>


<div class='clearfix'>

<h3 class='fl m0' id='isfixed'>
isFixed
</h3>


</div>



<div class='pre p1 fill-light mt0'>isFixed</div>

<p>
Type:
<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean">boolean</a>
</p>























Expand Down Expand Up @@ -11584,7 +11720,7 @@ <h3 class='fl m0' id='maskedrange'>

<p>
Type:
<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean">boolean</a>
(<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean">boolean</a> | <code>"pad"</code>)
</p>


Expand Down
101 changes: 78 additions & 23 deletions docs/guide.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -245,27 +245,27 @@ <h3 id="masked-base" class="section-h"><a href="#masked-base">Common Behavior</a
});</code></pre>

<h4 id="overwrite" class="section-h"><a href="#overwrite">Overwrite Mode <kbd>since 5.0</kbd></a></h4>
<p>Enables characters overwriting instead of inserting:</p>
<p>Enables characters overwriting (replace or shift) instead of inserting.</p>
<div class="form-item">
<label><code>Date</code> mask in overwrite and autofix modes</label>
<input id="date-overwrite-mask" type="text" value="">
<label>Simple <code>6-digits</code> mask in overwrite mode</label>
<div class="input-select">
<input id="overwrite-mask" type="text" value="">
<select id="select-overwrite">
<option value="false">Overwrite: false</option>
<option value="true">Overwrite: true</option>
<option value="shift">Overwrite: shift (new in v6.4.0)</option>
</select>
</div>

<div class="toggle-panel">
<label for="date-overwrite-mask-source" class="muted">source</label>
<input id="date-overwrite-mask-source" type="checkbox">
<label for="overwrite-mask-source" class="muted">source</label>
<input id="overwrite-mask-source" type="checkbox">
<div class="toggle-panel-content">
<pre><code>var overwriteMask = IMask(
document.getElementById('date-overwrite-mask'),
document.getElementById('overwrite-mask'),
{
mask: Date,
mask: '000000',
lazy: false,
overwrite: true,
autofix: true,
blocks: {
d: {mask: IMask.MaskedRange, placeholderChar: 'd', from: 1, to: 31, maxLength: 2},
m: {mask: IMask.MaskedRange, placeholderChar: 'm', from: 1, to: 12, maxLength: 2},
Y: {mask: IMask.MaskedRange, placeholderChar: 'y', from: 1900, to: 2999, maxLength: 4}
}
}
);</code></pre>
</div>
Expand Down Expand Up @@ -522,6 +522,38 @@ <h3 id="masked-pattern" class="section-h"><a href="#masked-pattern">Pattern Mask
}
});</code></pre>

<h4 id="lazy" class="section-h"><a href="#lazy">Lazy Mode</a></h4>
<div class="form-item">
<label></label>
<div class="input-checkbox">
<input id="pattern-lazy-mask" type="text" value="">
<label>
<input type="checkbox" name="lazy" id="toggle-pattern-lazy-mask">
lazy
</label>
</div>

<div class="toggle-panel">
<label for="pattern-lazy-mask-source" class="muted">source</label>
<input id="pattern-lazy-mask-source" type="checkbox">
<div class="toggle-panel-content">
<pre><code>var lazyMask = IMask(
document.getElementById('pattern-lazy-mask'),
{
mask: Date,
lazy: &lt;CHECK&gt;,
autofix: true,
blocks: {
d: {mask: IMask.MaskedRange, placeholderChar: 'd', from: 1, to: 31, maxLength: 2},
m: {mask: IMask.MaskedRange, placeholderChar: 'm', from: 1, to: 12, maxLength: 2},
Y: {mask: IMask.MaskedRange, placeholderChar: 'y', from: 1900, to: 2999, maxLength: 4}
}
}
);</code></pre>
</div>
</div>
</div>

<h4 id="eager" class="section-h"><a href="#eager">Eager Mode <kbd>since 6.3.0</kbd></a></h4>
<div class="form-item">
<label></label>
Expand Down Expand Up @@ -1074,19 +1106,21 @@ <h3 id="treeshaking" class="section-h"><a href="#treeshaking">Treeshaking <kbd>s
});

var overwriteMask = IMask(
document.getElementById('date-overwrite-mask'),
document.getElementById('overwrite-mask'),
{
mask: Date,
mask: '000000',
lazy: false,
overwrite: true,
autofix: true,
blocks: {
d: {mask: IMask.MaskedRange, placeholderChar: 'd', from: 1, to: 31, maxLength: 2},
m: {mask: IMask.MaskedRange, placeholderChar: 'm', from: 1, to: 12, maxLength: 2},
Y: {mask: IMask.MaskedRange, placeholderChar: 'y', from: 1900, to: 2999, maxLength: 4}
}
}
);
var selectOverwrite = document.getElementById('select-overwrite');
selectOverwrite.addEventListener('change', function (e) {
var val = e.target.value;
overwriteMask.updateOptions({
overwrite: val === 'false' ? false :
val === 'true' ? true :
'shift',
});
});

var numberMask = IMask(document.getElementById('numbers-mask'), {
mask: Number,
Expand Down Expand Up @@ -1288,6 +1322,27 @@ <h3 id="treeshaking" class="section-h"><a href="#treeshaking">Treeshaking <kbd>s
});
});

var lazyMask = IMask(
document.getElementById('pattern-lazy-mask'),
{
mask: Date,
lazy: false,
autofix: true,
blocks: {
d: {mask: IMask.MaskedRange, placeholderChar: 'd', from: 1, to: 31, maxLength: 2},
m: {mask: IMask.MaskedRange, placeholderChar: 'm', from: 1, to: 12, maxLength: 2},
Y: {mask: IMask.MaskedRange, placeholderChar: 'y', from: 1900, to: 2999, maxLength: 4}
}
}
);

var togglelazy = document.getElementById('toggle-pattern-lazy-mask');
togglelazy.addEventListener('change', function (e) {
lazyMask.updateOptions({
lazy: e.target.checked,
});
});

var eagerMask = IMask(
document.getElementById('pattern-eager-mask'),
{
Expand Down
4 changes: 2 additions & 2 deletions docs/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ <h4>Features</h4>
<li>get and set <em>value</em> and <em>unmasked value</em> easily</li>
<li>no external dependencies</li>
<li>supports <a href="guide.html#overwrite">overwrite</a> mode</li>
<li>supports all major browsers and <span class="req">*</span><a href="guide.html#support-older">IE11+</a></li>
<li>supports all major browsers</li>
<li>supports <em>web components</em></li>
<li>supports <em>contenteditable</em></li>
<li><a href="guide.html#masked-base"><strong>RegExp</strong> mask</a></li>
Expand All @@ -22,7 +22,7 @@ <h4>Features</h4>
<li><a href="guide.html#masked-dynamic"><strong>Dynamic/on-the-fly</strong> mask</a></li>
<li><a href="guide.html#masked-pattern"><strong>Pattern</strong> mask</a></li>
<ul>
<li>show placeholder always or when needed</li>
<li>show placeholder <a href="guide.html#lazy">always or when needed</a></li>
<li>unmasked value can contain fixed parts</li>
<li>optional input parts</li>
<li>custom definitions</li>
Expand Down
3 changes: 2 additions & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -66,7 +66,8 @@
"coverage": "lerna run coveralls --scope imask",
"watch:core": "lerna run watch --scope imask --stream",
"watch:vue": "lerna run watch --scope vue-imask --stream",
"watch:react": "lerna run watch --scope react-imask --stream"
"watch:react": "lerna run watch --scope react-imask --stream",
"watch:docs": "bundle exec jekyll serve --livereload --source docs --destination docs/_site"
},
"collective": {
"type": "opencollective",
Expand Down

0 comments on commit 7ffd220

Please sign in to comment.