Chardin.ts

Simple overlay instructions for your apps.

Check out a demo.

Chardin.ts is a restructured version of the jQuery plugin Chardin.js with typescript. There are no dependencies.

Jean-Baptiste-Siméon Chardin

Installing

# npm 
npm i chardin.ts
 
# yarn 
yarn add chardin.ts

Adding data for the instructions

Add the instructions to your elements:

data-intro: Text to show with the instructions
data-position: (left, top, right, bottom), where to place the text with respect to the element

<img src="img/chardin.png" data-intro="An awesome 18th-century painter, who found beauty in everyday, common things." data-position="right" />

Running

Once you have your elements ready you can show instructions running

import {Chardin} from 'chardin.ts';
import 'chardin.ts/chardinjs.scss';
 
let chardin = new Chardin(document.querySelector('body'));
chardin.start();

If you would rather run ChardinJs confined to a particular container (instead of using the whole document) you can change body to some other selector.

let chardin = new Chardin(document.querySelector('.container'));
chardin.start();

You may also refresh instructions overlay any time to reflect whatever changes happened to the underlying page elements since the instructions overlay has been displayed.

let chardin = new Chardin(document.querySelector('body'));
chardin.start();
...
chardin.refresh();

Methods

.start()

Start ChardinJs in the selector.

.toggle()

Toggle ChardinJs.

.stop()

Make your best guess. That's right! Stops ChardinJs in the selector.

Events

'chardinJs:start'

Triggered when chardinJs is correctly started.

'chardinJs:stop'

Triggered when chardinJs is stopped.

Author

Pablo Fernandez

Contributors

• John Weir
• felipeclopes
• Bobby Jack
• Maxim Syabro
• nmeum
• printercu
• Max Loginov

Contributions

If you want to contribute, please:

• Fork the project.
• Make your feature addition or bug fix.
• Add yourself to the list of contributors in the README.md.
• Send me a pull request on Github.

License

Copyright 2019 Pablo Fernandez

Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at

http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.