⬡ Connect widget for remoteStorage.js
Clone or download
Latest commit 3756349 Jan 19, 2018
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
build 1.3.0 Jan 19, 2018
demo Add config option for skipping the initial state Dec 26, 2017
scripts Create bower package Jan 9, 2018
src Formatting Jan 17, 2018
.gitignore Watch and build. Rinse and repeat. Nov 15, 2015
.jshintrc Use new way for handling rs.js errors May 29, 2017
README.md Remove non-dev dependencies status from README Jan 17, 2018
bower.json 1.3.0 Jan 19, 2018
package-lock.json 1.3.0 Jan 19, 2018
package.json 1.3.0 Jan 19, 2018
webpack.config.js Inline all assets in template again May 30, 2017

README.md

remotestorage-widget

npm devDependency Status

A ready-to-use connect/sync widget, as add-on library for remoteStorage.js.

Usage

import RemoteStorage from 'remotestoragejs';
import Widget from 'remotestorage-widget';

// ...

const remoteStorage = new RemoteStorage(/* options */);

remoteStorage.access.claim('bookmarks', 'rw');

const widget = new Widget(remoteStorage);
widget.attach();

// ...

Configuration

The widget has some configuration options to customize the behavior:

Option Description Type Default
leaveOpen Keep the widget open when user clicks outside of it Boolean false
autoCloseAfter Timeout after which the widget closes automatically (in milliseconds). The widget only closes when a storage is connected. Number 1500
skipInitial Don't show the initial connect hint, but show sign-in screen directly instead Boolean false
logging Enable logging for debugging purposes Boolean false

Example:

const widget = new Widget(remoteStorage, { autoCloseAfter: 2000 });

Available Functions

attach(elementID) - Attach the widget to the DOM and display it. You can use an optional element ID that the widget should be attached to. Otherwise it will be attached to the body.

While the attach() method is required for the widget to be actually shown, the following functions are usually not needed. They allow for fine-tuning the experience.

close() - Close/minimize the widget to only show the icon.

open() - Open the widget when it's minimized.

toggle() - Switch between open and closed state.

Development / Customization

Install deps:

npm install

Build, run and watch demo/test app:

npm start

The demo app will then be served at http://localhost:8008