save-slave-dave

Dave is a nice little fellow that attaches himself to your form input components
and pops up when the user makes a change, allowing the user to save their
valuable changes!

install

It's recommended that you use this module with
browserify, as it follows node's
module pattern. **It is assumed that jQuery and
underscore are defined in the global scope at the
time of use, and that
font-awesome is included**.

Given these things, you can just npm install save-slave-dave, then
require('save-slave-dave').

when does dave show up, and what does he do?

Dave is a quiet fellow and will not disturb you right away. However, as soon
as you make a change to the targeted input control, he will shimmy on over
and serve up a way to save the changes you've made. As soon as you've saved,
he's gone again! But if you make more changes, he'll be back.

Dave will also assume you don't want to discard your changes when you stop
focusing on an input control, and will save for you before he leaves. Dave
won't stick around on an input control that you're not interested in.

usage

#### dave(element, save, [opts])

The module exports a single function. The easiest way to use save-slave-dave is
with an or </code>. You can do that by attaching it like so:</p><p class="my-3">``<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">javascript<br />var dave = require('save-slave-dave');</p><p class="my-3">// Dave needs a function do call when it's time to save. Dave will also passed<br />// that function a callback, which you should call when the saving is done. If<br />// you couldn't save, you should pass a truthy value as the first argument of<br />// the callback<br />var saveToDatabase = function(callback) {<br /> database.save($("input#amazing-text").val(), callback);<br />}</p><p class="my-3">dave("input#amazing-text", saveToDatabase);<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">But it doesn't stop there! Sometimes you have more complicated input components,<br />like a tags input! That's no problem. You can also pass an </code>options<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> object<br />specifying the following things:</p><p class="my-3">* </code>targetElement<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> (defaults to </code>element<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">) Dave will listen to </code>focus<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> and </code>blur<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"><br /> events on this element, and use its value to check for changes if no <br /> </code>getValue<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> function was given. Dave will also listen to the </code>keyup<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> event on<br /> this element to check for changes if no </code>listen<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> function was given</code><br />* <code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">getValue</code> a function that returns the current value of the input component.<br /> Defaults to <code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">function() { return opts.targetElement.val() }</code><br />* <code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">listen</code> a function that attaches a change event listener to the input<br /> component. The listener should be fired when changes are made to the control's<br /> value. Defaults to <code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">function (l) { opts.targetElement.on('keyup', l); }</code><br />* <code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">saveOnEnter</code> if <code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">true</code>, dave will save the content when the enter key is<br /> pressed. Not a good idea to set this to true for a textarea. Defaults to true<br /> if the input is not a textarea.</p><p class="my-3"><h2 class="text-xl font-semibold mt-5 mb-3">styling</h2></p><p class="my-3">Dave should be unique. You should style him to suit your website. But we've<br />supplied an example <a href="http://learnboost.github.io/stylus/" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">stylus</a> style to get <br />you started, and to show you what to style. You can see it by looking at the<br /><code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">example.style.styl</code> file in the root of the repo. That style will result in a<br />Dave that looks somewhat like this:</p><p class="my-3"><img src="http://i.imgur.com/iVravHn.gif"/></p><p class="my-3"><h2 class="text-xl font-semibold mt-5 mb-3">license</h2></p><p class="my-3">MIT. See the LICENSE file.</p><p class="my-3"></p></div><div class="flex justify-center absolute inset-x-0 bottom-0 bg-gradient-to-t from-background via-background to-transparent pb-4 pt-16"><button data-slot="button" class="inline-flex items-center justify-center whitespace-nowrap text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down mr-1 h-4 w-4"><path d="m6 9 6 6 6-6"></path></svg>Show more</button></div></div></div><template id="P:3"></template><template id="P:4"></template></div></div></div><div hidden id="S:3"><div data-state="inactive" data-orientation="horizontal" role="tabpanel" aria-labelledby="radix-_R_aav5ubrb_-trigger-dependencies" hidden="" id="radix-_R_aav5ubrb_-content-dependencies" tabindex="0" data-slot="tabs-content" class="flex-1 outline-none mt-6"></div></div><script>$RS=function(a,b){a=document.getElementById(a);b=document.getElementById(b);for(a.parentNode.removeChild(a);a.firstChild;)b.parentNode.insertBefore(a.firstChild,b);b.parentNode.removeChild(b)};$RS("S:3","P:3")</script><div hidden id="S:4"><div data-state="inactive" data-orientation="horizontal" role="tabpanel" aria-labelledby="radix-_R_aav5ubrb_-trigger-versions" hidden="" id="radix-_R_aav5ubrb_-content-versions" tabindex="0" data-slot="tabs-content" class="flex-1 outline-none mt-6"></div></div><script>$RS("S:4","P:4")</script><script>$RC("B:1","S:1")</script></body></html>