Skip to content

Commit

Permalink
improve readme
Browse files Browse the repository at this point in the history
  • Loading branch information
Thibault Jan Beyer committed Mar 10, 2019
1 parent 7a3316b commit 900704e
Show file tree
Hide file tree
Showing 4 changed files with 9 additions and 9 deletions.
6 changes: 3 additions & 3 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -79,13 +79,13 @@ new DragSelect({
});
```

<p data-height="265" data-theme-id="0" data-slug-hash="prpwYG" data-default-tab="js,result" data-user="ThibaultJanBeyer" data-embed-version="2" data-pen-title="prpwYG" class="codepen">See the Pen <a href="https://codepen.io/ThibaultJanBeyer/pen/prpwYG/">prpwYG</a> by Thibault Jan Beyer (<a href="https://codepen.io/ThibaultJanBeyer">@ThibaultJanBeyer</a>) on CodePen.</p>
<p data-height="265" data-theme-id="0" data-slug-hash="prpwYG" data-default-tab="js,result" data-user="ThibaultJanBeyer" data-embed-version="2" data-pen-title="prpwYG" class="codepen">See the Pen <a href="https://codepen.io/ThibaultJanBeyer/pen/prpwYG/">prpwYG</a> on CodePen.</p>

## Within a scroll-able Area

Here the selection is constrained. You can only use the selection inside of the container with the red border:

<p data-height="265" data-theme-id="0" data-slug-hash="Nvobgq" data-default-tab="js,result" data-user="ThibaultJanBeyer" data-embed-version="2" data-pen-title="DragSelect with Scrollable AREA" class="codepen">See the Pen <a href="https://codepen.io/ThibaultJanBeyer/pen/Nvobgq/">DragSelect with Scrollable AREA</a> by Thibault Jan Beyer (<a href="https://codepen.io/ThibaultJanBeyer">@ThibaultJanBeyer</a>) on CodePen.</p>
<p data-height="265" data-theme-id="0" data-slug-hash="Nvobgq" data-default-tab="js,result" data-user="ThibaultJanBeyer" data-embed-version="2" data-pen-title="DragSelect with Scrollable AREA" class="codepen">See the Pen <a href="https://codepen.io/ThibaultJanBeyer/pen/Nvobgq/">DragSelect with Scrollable AREA</a> on CodePen.</p>

## extended

Expand Down Expand Up @@ -133,7 +133,7 @@ DragSelect is accessibly by default:
Obviously, keyboard users won’t get the full visual experience but it works similarely to the OS default behaviour. You can select items using the default select keys (usually space or enter) and also multiselect when using a modifier key at the same time (unfortunately this does not work in firefox for now since FF doesn’t add the modifier key in the event object when using the keyboard). There is one little thing you have to do tho’: the `selectables` have to be pressable (clickable)! To achieve this, they should be of type `<button type="button"></button>`.

<p data-height="265" data-theme-id="0" data-slug-hash="prpwYG" data-default-tab="html,result" data-user="ThibaultJanBeyer" data-embed-version="2" data-pen-title="DragSelect" class="codepen">See the Pen <a href="https://codepen.io/ThibaultJanBeyer/pen/prpwYG/">DragSelect</a> by Thibault Jan Beyer (<a href="https://codepen.io/ThibaultJanBeyer">@ThibaultJanBeyer</a>) on CodePen.</p>
<p data-height="265" data-theme-id="0" data-slug-hash="prpwYG" data-default-tab="html,result" data-user="ThibaultJanBeyer" data-embed-version="2" data-pen-title="DragSelect" class="codepen">See the Pen <a href="https://codepen.io/ThibaultJanBeyer/pen/prpwYG/">DragSelect</a> on CodePen.</p>

# Properties:

Expand Down
2 changes: 1 addition & 1 deletion docs/DragSelect.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5762,7 +5762,7 @@ <h5>Returns:</h5>
<br class="clear">

<footer>
Generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.5.5</a> on Sun Mar 10 2019 19:16:48 GMT+0100 (Central European Standard Time) using the Minami theme.
Generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.5.5</a> on Sun Mar 10 2019 19:19:53 GMT+0100 (Central European Standard Time) using the Minami theme.
</footer>

<script>prettyPrint();</script>
Expand Down
2 changes: 1 addition & 1 deletion docs/DragSelect.js.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1292,7 +1292,7 @@ <h1 class="page-title">DragSelect.js</h1>
<br class="clear">

<footer>
Generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.5.5</a> on Sun Mar 10 2019 19:16:48 GMT+0100 (Central European Standard Time) using the Minami theme.
Generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.5.5</a> on Sun Mar 10 2019 19:19:53 GMT+0100 (Central European Standard Time) using the Minami theme.
</footer>

<script>prettyPrint();</script>
Expand Down
8 changes: 4 additions & 4 deletions docs/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -81,10 +81,10 @@ <h1>Usage</h1><p>Now in your JavaScript you can simply pass elements to the func
<h2>simple</h2><p>The simplest possible usage.<br>Choose which elements can be selected:</p>
<pre class="prettyprint source lang-javascript"><code>new DragSelect({
selectables: document.getElementsByClassName('selectable-nodes')
});</code></pre><p data-height="265" data-theme-id="0" data-slug-hash="prpwYG" data-default-tab="js,result" data-user="ThibaultJanBeyer" data-embed-version="2" data-pen-title="prpwYG" class="codepen">See the Pen <a href="https://codepen.io/ThibaultJanBeyer/pen/prpwYG/">prpwYG</a> by Thibault Jan Beyer (<a href="https://codepen.io/ThibaultJanBeyer">@ThibaultJanBeyer</a>) on CodePen.</p>
});</code></pre><p data-height="265" data-theme-id="0" data-slug-hash="prpwYG" data-default-tab="js,result" data-user="ThibaultJanBeyer" data-embed-version="2" data-pen-title="prpwYG" class="codepen">See the Pen <a href="https://codepen.io/ThibaultJanBeyer/pen/prpwYG/">prpwYG</a> on CodePen.</p>

<h2>Within a scroll-able Area</h2><p>Here the selection is constrained. You can only use the selection inside of the container with the red border:</p>
<p data-height="265" data-theme-id="0" data-slug-hash="Nvobgq" data-default-tab="js,result" data-user="ThibaultJanBeyer" data-embed-version="2" data-pen-title="DragSelect with Scrollable AREA" class="codepen">See the Pen <a href="https://codepen.io/ThibaultJanBeyer/pen/Nvobgq/">DragSelect with Scrollable AREA</a> by Thibault Jan Beyer (<a href="https://codepen.io/ThibaultJanBeyer">@ThibaultJanBeyer</a>) on CodePen.</p>
<p data-height="265" data-theme-id="0" data-slug-hash="Nvobgq" data-default-tab="js,result" data-user="ThibaultJanBeyer" data-embed-version="2" data-pen-title="DragSelect with Scrollable AREA" class="codepen">See the Pen <a href="https://codepen.io/ThibaultJanBeyer/pen/Nvobgq/">DragSelect with Scrollable AREA</a> on CodePen.</p>

<h2>extended</h2><p>All options are optional. You could also just initiate the Dragselect by <code>new DragSelect();</code> without any option.<br>Find all possible properties and methods in <strong><a href="https://thibaultjanbeyer.github.io/DragSelect/DragSelect.html">the docs</a></strong> </p>
<pre class="prettyprint source lang-javascript"><code>var ds = new DragSelect({
Expand Down Expand Up @@ -117,7 +117,7 @@ <h2>Accessibility (a11y)</h2><p>DragSelect is accessibly by default: </p>
<p>TLDR; =&gt; Your <code>selectables</code> should be buttons: <code>&lt;button type=&quot;button&quot;&gt;&lt;/button&gt;</code>. </p>
</blockquote>
<p>Obviously, keyboard users won’t get the full visual experience but it works similarely to the OS default behaviour. You can select items using the default select keys (usually space or enter) and also multiselect when using a modifier key at the same time (unfortunately this does not work in firefox for now since FF doesn’t add the modifier key in the event object when using the keyboard). There is one little thing you have to do tho’: the <code>selectables</code> have to be pressable (clickable)! To achieve this, they should be of type <code>&lt;button type=&quot;button&quot;&gt;&lt;/button&gt;</code>. </p>
<p data-height="265" data-theme-id="0" data-slug-hash="prpwYG" data-default-tab="html,result" data-user="ThibaultJanBeyer" data-embed-version="2" data-pen-title="DragSelect" class="codepen">See the Pen <a href="https://codepen.io/ThibaultJanBeyer/pen/prpwYG/">DragSelect</a> by Thibault Jan Beyer (<a href="https://codepen.io/ThibaultJanBeyer">@ThibaultJanBeyer</a>) on CodePen.</p>
<p data-height="265" data-theme-id="0" data-slug-hash="prpwYG" data-default-tab="html,result" data-user="ThibaultJanBeyer" data-embed-version="2" data-pen-title="DragSelect" class="codepen">See the Pen <a href="https://codepen.io/ThibaultJanBeyer/pen/prpwYG/">DragSelect</a> on CodePen.</p>

<h1>Properties:</h1><p>Full list of properties is found in <strong><a href="https://thibaultjanbeyer.github.io/DragSelect/DragSelect.html">the docs</a></strong><br>Here are some properties for your convenience (not all): </p>
<table>
Expand Down Expand Up @@ -361,7 +361,7 @@ <h1>Have Fun!</h1><p>Creating and maintaining useful tools is a lot of work.
<br class="clear">

<footer>
Generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.5.5</a> on Sun Mar 10 2019 19:16:48 GMT+0100 (Central European Standard Time) using the Minami theme.
Generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.5.5</a> on Sun Mar 10 2019 19:19:53 GMT+0100 (Central European Standard Time) using the Minami theme.
</footer>

<script>prettyPrint();</script>
Expand Down

0 comments on commit 900704e

Please sign in to comment.