https://github.com/zerotohero-dev/slytherin
Slides and stuff.
https://github.com/zerotohero-dev/slytherin
demo drag education framework-agnostic javascript lightweight screencast slytherin tutorials vidcast
Last synced: about 1 year ago
JSON representation
Slides and stuff.
- Host: GitHub
- URL: https://github.com/zerotohero-dev/slytherin
- Owner: zerotohero-dev
- License: other
- Created: 2018-01-04T01:28:52.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2018-02-12T19:13:12.000Z (over 8 years ago)
- Last Synced: 2024-04-26T16:06:11.715Z (about 2 years ago)
- Topics: demo, drag, education, framework-agnostic, javascript, lightweight, screencast, slytherin, tutorials, vidcast
- Language: JavaScript
- Size: 433 KB
- Stars: 4
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE.md
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
[![tests][tests]][tests-url]
[![deploy][deploy]][deploy-url]
[![npm][npm]][npm-url]
[![license][license]][license-url]
```text
_ _
,-(|)--(|)-.
\_ .. _/ Slytherin: Framework-independent slithering utility.
\______/ Makes things draggable.
V V
```
[tests]: https://img.shields.io/travis/jsbites/slytherin.svg
[tests-url]: https://travis-ci.org/jsbites/slytherin
[npm-url]: https://www.npmjs.com/package/slytherin
[npm]: https://img.shields.io/npm/v/slytherin.svg
[deploy]: https://img.shields.io/github/last-commit/jsbites/slytherin.svg?label=last%20deployed
[deploy-url]: https://github.com/jsbites/slytherin/
[license]: https://img.shields.io/npm/l/slytherin.svg
[license-url]: https://www.npmjs.com/package/slytherin
## Demo
[Visit **bytesized.tv/slytherin** for a quick demo](https://bytesized.tv/slytherin).
## Why?
`slytherin` is a drag helper: It makes **DOM** nodes draggable.
Yes, there are many great drag&drop libraries out there; so why a new one?
Well, I created this library mostly for educational purposes. — There will
be a screencast about it soon in [**ByteSized.TV**](https://bytesized.tv).
My goal was to show that creating a drag utility is not that hard, and can
be done under, say, fifty lines of code.
In addition, I wanted something “very” lightweight for my personal use
(_in [JediFocus](https://jedifocus.com/)_). So `slytherin` is also here to
scratch my own itch **:)**
In the end, it does what it says is does: Nothing more, nothing less.
## Installation
`yarn add slytherin`
or
`npm install slytherin`
## Usage Example
For additional examples with comments and documentation
[see the `examples` folder](examples).
The following shows a simple **React** component that uses `slytherin` to
make a part of it **draggable**.
> **Aside**
>
> Slytherin provides **framework-agnostic** `init`, `start`, and `stop` endpoints,
> so you don’t have to use it with **React** — You can practically use it with
> any front-end framework of your liking.
```javascript
import { start, stop, init } from 'slytherin';
import React, { Component } from 'react';
import { render } from 'react-dom';
class SimpleApp extends Component {
constructor(props) {
super(props);
}
componentDidMount() {
// Start listening to drag events.
start();
const box = document.querySelector('.box');
if (!box) {
return;
}
// `init` gives the box super powers:
// makes it draggable.
init(box, {
dragClassName: 'box--shadow',
dragHandleClassName: 'box__header'
});
}
componentWillUnmount() {
// The component is doing a harakiri:
// Stop listening to drag events.
stop();
}
render() {
return (
A Draggable Box
Repello Inimicum!
Salvio Hexia!
Repello Muggletum!
Protego Maxima!
Fianto Duri!
Repello Inimicum!
);
}
}
const reactRoot = document.getElementById('react-root');
if (reactRoot) {
render(, reactRoot);
}
```
## Yarn Scripts
* `yarn run lint`: Lints the project
* `yarn test`: For now, same as `yarn run lint`.
* `yarn serve-examples`: Creates a simple `http` server to serve the examples.
* `yarn run watch-examples`: Creates the bundles required for the examples to
run. Starts webpack in watch mode.
## Wanna Help?
Any help is more than appreciated.
If you want to contribute to the source code, **fork this repository** and
**create a pull request**.
> In lieu of a formal style guide, take care to maintain the existing coding style.
Also, don’t forget to add unit tests for any new or changed functionality.
If you want to report a bug; or share a comment or suggestion, [file an issue](https://github.com/jsbites/bytesized.tv.web/issues/new).
## I’ve Found a Bug; I Have an Idea
[For bug reports and suggestions, please file an issue](https://github.com/jsbites/bytesized.tv.web/issues/new).
## Contact Information
* **Project Maintainer**: [Volkan Özçelik](https://volkan.io/)
* **Project Website**: [bytesized.tv](https://bytesized.tv/)
## License
MIT-licensed. — [See the license file for details](LICENSE.md).
## Code of Conduct
We are committed to making participation in this project a harassment-free experience
for everyone, regardless of the level of experience, gender, gender identity and
expression, sexual orientation, disability, personal appearance, body size, race,
ethnicity, age, religion, or nationality.
[See the code of conduct for details](CODE_OF_CONDUCT.md).
## A [ByteSized.TV][vidcast] Project
This repository is a part of the [Byte-Sized JavaScript VideoCasts][vidcast].
It is a compilation of short (_around ten minutes_) screencasts about **JavaScript**
and related technologies.
[**Learn**, **explore**, and **have fun**][vidcast]!
[vidcast]: https://bytesized.tv/ "ByteSized.TV"