Autosave Form

<div data-component="autosave-form">
    <span data-bind="saveStatusText"
          data-bind-class="saveStatusClass"></span>

    <input data-model="title" data-model-trim
           placeholder="Untitled Document">
    <textarea data-model="content"></textarea>
    <input data-model="tags" data-model-trim>
</div>

<script>
wildflower.component('autosave-form', {
    state: {
        title: '',
        content: '',
        tags: '',
        saving: false,
        lastSaved: null,
        // Snapshot of the last successfully saved state.
        // `isDirty` compares current state against this.
        snapshot: { title: '', content: '', tags: '' }
    },
    computed: {
        isDirty() {
            return this.title   !== this.snapshot.title
                || this.content !== this.snapshot.content
                || this.tags    !== this.snapshot.tags;
        },
        saveStatusText() {
            if (this.saving)  return 'Saving...';
            if (this.isDirty) return 'Unsaved changes';
            return 'Saved';
        },
        saveStatusClass() {
            if (this.saving)  return 'save-indicator save-saving';
            if (this.isDirty) return 'save-indicator save-dirty';
            return 'save-indicator save-saved';
        },
        lastSavedText() {
            return this.lastSaved
                ? 'Last saved: ' + this.lastSaved
                : 'Not yet saved';
        }
    },
    // onUpdate fires after any state change. data-model updates
    // state synchronously on every keystroke, so this runs on every
    // edit. We coalesce rapid calls into one save via setTimeout.
    onUpdate() {
        if (!this.isDirty || this.saving) return;
        clearTimeout(this._saveTimer);
        this._saveTimer = setTimeout(() => {
            this.saving = true;
            setTimeout(() => {
                // "Save" completed: snapshot current state so isDirty
                // flips back to false until the user types again.
                this.snapshot = {
                    title:   this.title,
                    content: this.content,
                    tags:    this.tags
                };
                this.saving = false;
                this.lastSaved = new Date().toLocaleTimeString();
            }, 500);
        }, 800);
    },
    destroy() {
        clearTimeout(this._saveTimer);
    }
});
</script>