diff --git a/.gitignore b/.gitignore index a931981..61f2900 100644 --- a/.gitignore +++ b/.gitignore @@ -2,4 +2,4 @@ *.swo *~ *.log -node_modules \ No newline at end of file +node_modules diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md new file mode 100644 index 0000000..e93e488 --- /dev/null +++ b/CONTRIBUTING.md @@ -0,0 +1,64 @@ +# :eight_spoked_asterisk: :stars: :sparkles: :dizzy: :star2: :star2: :sparkles: :dizzy: :star2: :star2: Contributing :star: :star2: :dizzy: :sparkles: :star: :star2: :dizzy: :sparkles: :stars: :eight_spoked_asterisk: + +So, you want to contribute to this project! That's awesome. However, before +doing so, please read the following simple steps how to contribute. This will +make the life easier and will avoid wasting time on things which are not +requested. :sparkles: + +## Discuss the changes before doing them + - First of all, open an issue in the repository, using the [bug tracker][1], + describing the contribution you would like to make, the bug you found or any + other ideas you have. This will help us to get you started on the right + foot. + + - If it makes sense, add the platform and software information (e.g. operating + system, Node.JS version etc.), screenshots (so we can see what you are + seeing). + + - It is recommended to wait for feedback before continuing to next steps. + However, if the issue is clear (e.g. a typo) and the fix is simple, you can + continue and fix it. + +## Fixing issues + - Fork the project in your account and create a branch with your fix: + `some-great-feature` or `some-issue-fix`. + + - Commit your changes in that branch, writing the code following the + [code style][2]. If the project contains tests (generally, the `test` + directory), you are encouraged to add a test as well. :memo: + + - If the project contains a `package.json` or a `bower.json` file add yourself + in the `contributors` array (or `authors` in the case of `bower.json`; + if the array does not exist, create it): + + ```json + { + "contributors": [ + "Your Name (http://your.website)" + ] + } + ``` + +## Creating a pull request + + - Open a pull request, and reference the initial issue in the pull request + message (e.g. *fixes #*). Write a good description and + title, so everybody will know what is fixed/improved. + + - If it makes sense, add screenshots, gifs etc., so it is easier to see what + is going on. + +## Wait for feedback +Before accepting your contributions, we will review them. You may get feedback +about what should be fixed in your modified code. If so, just keep committing +in your branch and the pull request will be updated automatically. + +## Everyone is happy! +Finally, your contributions will be merged, and everyone will be happy! :smile: +Contributions are more than welcome! + +Thanks! :sweat_smile: + +[1]: https://github.com/jillix/svg.draggy.js/issues + +[2]: https://github.com/IonicaBizau/code-style \ No newline at end of file diff --git a/LICENSE b/LICENSE index be82f2f..93cb7c5 100644 --- a/LICENSE +++ b/LICENSE @@ -1,8 +1,6 @@ The MIT License (MIT) -Copyright (c) 2014 Wout Fierens -Copyright (c) 2014 Florian Loch -Copyright (c) 2014-15 jillix +Copyright (c) 2012-16 jillix Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal diff --git a/README.md b/README.md index ebbb339..d17d4d2 100644 --- a/README.md +++ b/README.md @@ -1,9 +1,9 @@ -# svg.draggy.js -A JavaScript library for dragging SVG things. +# svg.draggy.js [![Version](https://img.shields.io/npm/v/svg.draggy.js.svg)](https://www.npmjs.com/package/svg.draggy.js) [![Downloads](https://img.shields.io/npm/dt/svg.draggy.js.svg)](https://www.npmjs.com/package/svg.draggy.js) -[![](http://i.imgur.com/tXn2w8f.jpg)](http://jillix.github.io/svg.draggy.js/) +> A JavaScript library for dragging SVG things. ## Usage + Include this library after including `svg.js` in your html document. [Here you can see a demo](http://jillix.github.io/svg.draggy.js/). To make an element draggable, just do: @@ -17,41 +17,39 @@ rect.draggy(); Yes indeed, that's it! Now the `rect` is draggable. :sparkles: -### Events +## Events + There are four different events available you can llisten to: `beforedrag`, `dragstart`, `dragmove` and `dragend`. This is how you assign them: The `event` object has some custom data added by this library: - `event.detail.delta` is an object containing: - - `x` and `y`: The element coordinates. - - `movedX` and `movedY`: The element total movement values (available only in `dragmove` event). + + - `x` and `y`: The element coordinates. + - `movedX` and `movedY`: The element total movement values (available only in `dragmove` event). + - `event.detail.event` is an object containing the original event #### `dragstart` - ```js -rect.on("dragstart", function(event) { +rect.on('dragstart', function(event) { // Do something }); ``` - #### `beforedrag` - ```js -rect.on("beforedrag", function(event) { +rect.on('beforedrag', function(event) { // Do something }); ``` - #### `dragmove` - ```js -rect.on("dragmove", function(event) { +rect.on('dragmove', function(event) { // Do something }); ``` - ### Constraint + The drag functionality can be limited within a given box. You can pass the the constraint values as an object: ```js @@ -84,24 +82,37 @@ rect.draggy(function (x, y, elem) { return res; }); ``` +### Remove - -## Remove The draggable functionality can be removed with the `fixed()` method: ```js rect.fixed(); ``` - - ### Viewbox + This plugin is viewBox aware but there is only one thing that you need to keep in mind. If you work with a viewBox on the parent element you need to set the width and height attributes to have the same aspect ratio. So let's say you are using `viewbox='0 0 150 100'` you have to make sure the aspect ratio of `width` and `height` is the same: ```js var draw = SVG('paper').attr('viewBox', '0 0 150 100').size(600, 400); ``` -## Documentation +[![svg.draggy.js](http://i.imgur.com/tXn2w8f.jpg)](http://jillix.github.io/svg.draggy.js/) + +## :cloud: Installation + + +Check out the [`src`](/src) directory to download the needed files and include them on your page. + +If you're using this module in a CommonJS environment, you can install it from `npm` and `require` it: + +```sh +$ npm i --save svg.draggy.js +``` + + +## :memo: Documentation + ### `draggy(constraint)` Makes an element draggable. @@ -113,16 +124,15 @@ boolean values.`false` skips moving while `true` allows it. #### Return - **SVG** The SVG element. - -## How to contribute -1. File an issue in the repository, using the bug tracker, describing the - contribution you'd like to make. This will help us to get you started on the - right foot. -2. Fork the project in your account and create a new branch: - `your-great-feature`. -3. Commit your changes in that branch. -4. Open a pull request, and reference the initial issue in the pull request - message. - -## License -See the [LICENSE](./LICENSE) file. + +## :yum: How to contribute +Have an idea? Found a bug? See [how to contribute][contributing]. + +## :scroll: License + +[MIT][license] © [jillix][website] + +[license]: http://showalicense.com/?fullname=jillix%20%3Ccontact%40jillix.com%3E&year=2012#license-mit +[website]: +[contributing]: /CONTRIBUTING.md +[docs]: /DOCUMENTATION.md \ No newline at end of file diff --git a/package.json b/package.json index 1d82b74..7ea571c 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "svg.draggy.js", - "version": "1.1.0", + "version": "1.1.1", "description": "A JavaScript library for dragging SVG things.", "main": "src/svg.draggy.js", "directories": { @@ -31,5 +31,172 @@ "bugs": { "url": "https://github.com/jillix/svg.draggy.js/issues" }, - "homepage": "https://github.com/jillix/svg.draggy.js" -} \ No newline at end of file + "homepage": "https://github.com/jillix/svg.draggy.js", + "blah": { + "ex_img": "http://i.imgur.com/tXn2w8f.jpg", + "ex_url": "http://jillix.github.io/svg.draggy.js/", + "description": [ + { + "h2": "Usage" + }, + { + "p": [ + "Include this library after including `svg.js` in your html document. [Here you can see a demo](http://jillix.github.io/svg.draggy.js/).", + "To make an element draggable, just do:" + ] + }, + { + "code": { + "language": "js", + "content": [ + "var draw = new SVG('svg-container').size(400, 400);", + "var rect = draw.rect(100, 100);", + "", + "rect.draggy();" + ] + } + }, + { + "p": "Yes indeed, that's it! Now the `rect` is draggable. :sparkles:" + }, + { + "h2": "Events" + }, + { + "p": [ + "There are four different events available you can llisten to: `beforedrag`, `dragstart`, `dragmove` and `dragend`. This is how you assign them:", + "The `event` object has some custom data added by this library:" + ] + }, + { + "ul": [ + [ + "`event.detail.delta` is an object containing:", + { + "ul": [ + "`x` and `y`: The element coordinates.", + "`movedX` and `movedY`: The element total movement values (available only in `dragmove` event)." + ] + } + ], + "`event.detail.event` is an object containing the original event" + ] + }, + { + "h4": "`dragstart`" + }, + { + "code": { + "language": "js", + "content": [ + "rect.on('dragstart', function(event) {", + " // Do something", + "});" + ] + } + }, + { + "h4": "`beforedrag`" + }, + { + "code": { + "language": "js", + "content": [ + "rect.on('beforedrag', function(event) {", + " // Do something", + "});" + ] + } + }, + { + "h4": "`dragmove`" + }, + { + "code": { + "language": "js", + "content": [ + "rect.on('dragmove', function(event) {", + " // Do something", + "});" + ] + } + }, + { + "h3": "Constraint" + }, + { + "p": "The drag functionality can be limited within a given box. You can pass the the constraint values as an object:" + }, + { + "code": { + "language": "js", + "content": [ + "rect.draggy({", + " minX: 10,", + " minY: 15,", + " maxX: 200,", + " maxY: 100", + "});" + ] + } + }, + { + "p": "For more dynamic constraints a function can be passed as well:" + }, + { + "code": { + "language": "js", + "content": [ + "rect.draggy(function(x, y) {", + " return { x: x < 1000, y: y < 300 };", + "});" + ] + } + }, + { + "p": "With this you can also easily achieve some snapping functionality:" + }, + { + "code": { + "language": "js", + "content": [ + "var snapRange = 50;", + "rect.draggy(function (x, y, elem) {", + " var res = {};", + "", + " res.x = x - (x % snapRange);", + " res.y = y - (y % snapRange);", + "", + " return res;", + "});" + ] + } + }, + { + "h3": "Remove" + }, + { + "p": "The draggable functionality can be removed with the `fixed()` method:" + }, + { + "code": { + "language": "js", + "content": "rect.fixed();" + } + }, + { + "h3": "Viewbox" + }, + { + "p": "This plugin is viewBox aware but there is only one thing that you need to keep in mind. If you work with a viewBox on the parent element you need to set the width and height attributes to have the same aspect ratio. So let's say you are using `viewbox='0 0 150 100'` you have to make sure the aspect ratio of `width` and `height` is the same:" + }, + { + "code": { + "language": "js", + "content": "var draw = SVG('paper').attr('viewBox', '0 0 150 100').size(600, 400);" + } + } + ], + "generate_license": false + } +}