Browse Source

Merge branch 'master' of github.com:RubaXa/Sortable

pull/141/head
RubaXa 10 years ago
parent
commit
c196b32a76
  1. 18
      Gruntfile.js
  2. 32
      README.md
  3. 26
      meteor/README.md
  4. 20
      meteor/package.js
  5. 75
      meteor/publish.sh
  6. 35
      meteor/runtests.sh
  7. 3
      package.json

18
Gruntfile.js

@ -17,14 +17,32 @@ module.exports = function (grunt){
'<%= pkg.exportName %>.min.js': ['<%= pkg.exportName %>.js']
}
}
},
shell: {
'meteor-test': {
command: 'meteor/runtests.sh'
},
'meteor-publish': {
command: 'meteor/publish.sh'
}
}
});
// These plugins provide necessary tasks.
grunt.loadNpmTasks('grunt-version');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-shell');
// Meteor tasks
grunt.registerTask('meteor-test', 'shell:meteor-test');
grunt.registerTask('meteor-publish', 'shell:meteor-publish');
// ideally we'd run tests before publishing, but the chances of tests breaking (given that
// Meteor is orthogonal to the library) are so small that it's not worth the maintainer's time
// grunt.regsterTask('meteor', ['shell:meteor-test', 'shell:meteor-publish']);
grunt.registerTask('meteor', 'shell:meteor-publish');
// Default task.
grunt.registerTask('default', ['version', 'uglify']);

32
README.md

@ -2,10 +2,13 @@
Sortable is a minimalist JavaScript library for reorderable drag-and-drop lists.
Demo: http://rubaxa.github.io/Sortable/
## Features
* Supports touch devices and [modern](http://caniuse.com/#search=drag) browsers
* Built using native HTML5 drag and drop API
* Can drag from one list to another or within the same list
* Supports drag handles *and selectable text* (better than voidberg's html5sortable)
* Simple API
* Lightweight, 2KB gzipped
* No jQuery
@ -34,8 +37,8 @@ new Sortable(el);
new Sortable(el, {
group: "name",
store: null, // @see Store
handle: ".my-handle", // Restricts sort start click/touch to the specified element
filter: ".ignor-elements", // Selectors that do not lead to dragging (String or Function)
handle: ".my-handle", // Drag handle selector within list items
filter: ".ignore-elements", // Selectors that do not lead to dragging (String or Function)
draggable: ".item", // Specifies which items inside the element should be sortable
ghostClass: "sortable-ghost",
@ -60,10 +63,33 @@ new Sortable(el, {
});
```
#### handle
To make list items draggable, Sortable disables text selection by the user. That's not always desirable. To allow text selection, define a drag handler, which is an area of every list element that allows it to be dragged around.
```js
new Sortable(el, {
handle: ".my-handle",
});
```
```html
<ul>
<li><span class="my-handle">:: </span> list item text one
<li><span class="my-handle">:: </span> list item text two
</ul>
```
```css
.my-handle {
cursor: move
}
```
---
### Method
### Methods
##### closest(el:`String`[, selector:`HTMLElement`]):`HTMLElement|null`
For each element in the set, get the first element that matches the selector by testing the element itself and traversing up through its ancestors in the DOM tree.

26
meteor/README.md

@ -0,0 +1,26 @@
Packaging [Sortable](http://rubaxa.github.io/Sortable/) for [Meteor.js](http://meteor.com).
# Meteor
If you're new to Meteor, here's what the excitement is all about -
[watch the first two minutes](https://www.youtube.com/watch?v=fsi0aJ9yr2o); you'll be hooked by 1:28.
That screencast is from 2012. In the meantime, Meteor has become a mature JavaScript-everywhere web
development framework. Read more at [Why Meteor](http://www.meteorpedia.com/read/Why_Meteor).
# Issues
If you encounter an issue while using this package, please CC @dandv when you file it in this repo.
# DONE
* Instantiation test
# TODO
* Meteor collection backing
* Tests ensuring correct rendering with Meteor dynamic templates

20
meteor/package.js

@ -1,24 +1,30 @@
var packageName = 'rubaxa:sortable';
// package metadata file for Meteor.js
'use strict';
var packageName = 'rubaxa:sortable'; // http://atmospherejs.com/sortable/sortable
var where = 'client'; // where to install: 'client', 'server', or ['client', 'server']
var packageJson = JSON.parse(Npm.require("fs").readFileSync('package.json'));
Package.describe({
name: packageName,
summary: 'Sortable (official): minimalist reorderable drag-and-drop lists on modern browsers and touch devices',
version: '0.5.2',
version: packageJson.version,
git: 'https://github.com/RubaXa/Sortable.git'
});
Package.onUse(function (api) {
api.versionsFrom('0.9.0');
api.versionsFrom('METEOR@0.9.0');
api.export('Sortable');
api.addFiles([
'Sortable.js'
], 'client'
], where
);
});
Package.onTest(function (api) {
api.use(packageName, 'client');
api.use('tinytest', 'client');
api.use(packageName, where);
api.use('tinytest', where);
api.addFiles('meteor/test.js', 'client');
api.addFiles('meteor/test.js', where);
});

75
meteor/publish.sh

@ -1,23 +1,72 @@
#!/bin/bash
# Publish package on Meteor's Atmosphere.js
# Make sure Meteor is installed, per https://www.meteor.com/install. The curl'ed script is totally safe; takes 2 minutes to read its source and check.
type meteor >/dev/null 2>&1 || { curl https://install.meteor.com/ | sh; }
# sanity check: make sure we're in the root directory of the checkout
DIR=$( cd "$( dirname "$0" )" && pwd )
cd $DIR/..
cd "$( dirname "$0" )/.."
# Meteor expects package.js to be in the root directory of the checkout, so copy it there temporarily
cp meteor/package.js ./
# publish package, creating it if it's the first time we're publishing
PACKAGE_NAME=$(grep -i name package.js | head -1 | cut -d "'" -f 2)
PACKAGE_EXISTS=$(meteor search $PACKAGE_NAME 2>/dev/null | wc -l)
function cleanup() {
# we copied the file as package.js, regardless of its original name
rm package.js
if [ $PACKAGE_EXISTS -gt 0 ]; then
meteor publish
else
meteor publish --create
fi
# temporary build files
rm -rf ".build.$PACKAGE_NAME" versions.json
}
rm package.js
# publish separately any package*.js files we have, e.g. package.js, package-compat.js
for PACKAGE_FILE in meteor/package*.js; do
# Meteor expects package.js to be in the root directory of the checkout, so copy there our package file under that name, temporarily
cp $PACKAGE_FILE ./package.js
# publish package, creating it if it's the first time we're publishing
PACKAGE_NAME=$(grep -i name $PACKAGE_FILE | head -1 | cut -d "'" -f 2)
ATMOSPHERE_NAME=${PACKAGE_NAME/://}
echo "Publishing $PACKAGE_NAME..."
# attempt to re-publish the package - the most common operation once the initial release has been made
POTENTIAL_ERROR=$( meteor publish 2>&1 )
if [[ $POTENTIAL_ERROR =~ "There is no package named" ]]; then
# actually this is the first time the package is created, so pass the special --create flag and congratulate the maintainer
echo "Thank you for creating the official Meteor package for this library!"
if meteor publish --create; then
echo "Please post the following to https://github.com/raix/Meteor-community-discussions/issues/14:
--------------------------------------------- 8< --------------------------------------------------------
Happy to announce that I've published the official $PACKAGE_NAME to Atmosphere. Please star!
https://atmospherejs.com/$ATMOSPHERE_NAME
--------------------------------------------- >8 --------------------------------------------------------
"
else
echo "We got an error. Please post it at https://github.com/raix/Meteor-community-discussions/issues/14"
cleanup
exit 1
fi
else
if (( $? > 0 )); then
# the error wasn't that the package didn't exist, so we need to ask for help
echo "We got an error. Please post it at https://github.com/raix/Meteor-community-discussions/issues/14:
--------------------------------------------- 8< --------------------------------------------------------
$POTENTIAL_ERROR
--------------------------------------------- >8 --------------------------------------------------------
"
cleanup
exit 1
else
echo "Thanks for releasing a new version of $PACKAGE_NAME! You can see it at
https://atmospherejs.com/$ATMOSPHERE_NAME"
fi
fi
cleanup
done

35
meteor/runtests.sh

@ -1,28 +1,37 @@
# Test Meteor package before publishing to Atmosphere.js
#!/bin/sh
# Test Meteor package before publishing to Atmospherejs.com
# Make sure Meteor is installed, per https://www.meteor.com/install. The curl'ed script is totally safe; takes 2 minutes to read its source and check.
type meteor >/dev/null 2>&1 || { curl https://install.meteor.com/ | sh; }
# sanity check: make sure we're in the root directory of the checkout
DIR=$( cd "$( dirname "$0" )" && pwd )
cd $DIR/..
# Meteor expects package.js to be in the root directory of the checkout, so copy it there temporarily
cp meteor/package.js ./
cd "$( dirname "$0" )/.."
# run tests and delete the temporary package.js even if Ctrl+C is pressed
int_trap() {
echo
echo "Tests interrupted."
printf "Tests interrupted. Hopefully you verified in the browser that tests pass?\n\n"
}
trap int_trap INT
meteor test-packages ./
# test any package*.js packages we may have, e.g. package.js, package-compat.js
for PACKAGE_FILE in meteor/package*.js; do
PACKAGE_NAME=$(grep -i name $PACKAGE_FILE | head -1 | cut -d "'" -f 2)
echo "Testing $PACKAGE_NAME..."
# Meteor expects package.js to be in the root directory of the checkout, so copy there our package file under that name, temporarily
cp $PACKAGE_FILE ./package.js
# provide an invalid MONGO_URL so Meteor doesn't bog us down with an empty Mongo database
MONGO_URL=mongodb:// meteor test-packages ./
rm -rf ".build.$PACKAGE_NAME"
rm -rf ".build.local-test:$PACKAGE_NAME"
rm versions.json 2>/dev/null
PACKAGE_NAME=$(grep -i name package.js | head -1 | cut -d "'" -f 2)
rm -rf ".build.$PACKAGE_NAME"
rm -rf ".build.local-test:$PACKAGE_NAME"
rm versions.json
rm package.js
rm package.js
done

3
package.json

@ -5,7 +5,8 @@
"devDependencies": {
"grunt": "*",
"grunt-version": "*",
"grunt-contrib-uglify": "*"
"grunt-contrib-uglify": "*",
"grunt-shell": "*"
},
"description": "Minimalist library for reorderable drag-and-drop lists on modern browsers and touch devices. No jQuery.",
"main": "Sortable.js",

Loading…
Cancel
Save