mirror of https://github.com/metafizzy/isotope
Dan Dascalescu
10 years ago
9 changed files with 252 additions and 1 deletions
@ -0,0 +1,25 @@
|
||||
Packaging [Isotope](http://isotope.metafizzy.co/) 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 |
||||
|
||||
* Automated and visual test for the fitRows layout |
||||
|
||||
|
||||
# TODO |
||||
|
||||
* Add other tests; however, that is overkill, and the responsibiity of Isotope, not of the Meteor integration. |
||||
@ -0,0 +1,3 @@
|
||||
/*global Isotope:true*/ // Meteor.js creates a file-scope global for exporting. This comment prevents a potential JSHint warning.
|
||||
Isotope = window.Isotope; |
||||
delete window.Isotope; |
||||
@ -0,0 +1,33 @@
|
||||
// package metadata file for Meteor.js
|
||||
'use strict'; |
||||
|
||||
var packageName = 'isotope:isotope'; // http://atmospherejs.com/isotope/isotope
|
||||
var where = 'client'; // where to install: 'client' or 'server'. For both, pass nothing.
|
||||
|
||||
var packageJson = JSON.parse(Npm.require("fs").readFileSync('package.json')); |
||||
|
||||
Package.describe({ |
||||
name: packageName, |
||||
summary: 'Isotope (official): filter and sort magical layouts: fit rows, packery, masonry, fit columns etc.', // limited to 100 characters
|
||||
version: packageJson.version, |
||||
git: 'https://github.com/metafizzy/isotope.git' |
||||
}); |
||||
|
||||
Package.onUse(function (api) { |
||||
api.versionsFrom('METEOR@1.0'); |
||||
api.export('Isotope'); |
||||
api.addFiles([ |
||||
'dist/isotope.pkgd.js', |
||||
'meteor/export.js' |
||||
], where); |
||||
}); |
||||
|
||||
Package.onTest(function (api) { |
||||
api.use(packageName, where); |
||||
api.use(['tinytest', 'http'], where); |
||||
|
||||
api.addFiles([ |
||||
'test/tests.css', |
||||
'meteor/test.js' |
||||
], where); |
||||
}); |
||||
@ -0,0 +1,76 @@
|
||||
#!/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 |
||||
cd "$( dirname "$0" )/.." |
||||
|
||||
|
||||
function cleanup() { |
||||
# we copied the file as package.js, regardless of its original name |
||||
rm package.js |
||||
|
||||
# temporary build files |
||||
rm -rf ".build.$PACKAGE_NAME" versions.json |
||||
} |
||||
|
||||
|
||||
# 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 |
||||
OUTPUT=$( meteor publish 2>&1 ) |
||||
|
||||
if (( $? > 0 )); then |
||||
# there was an error |
||||
|
||||
if [[ $OUTPUT =~ "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 |
||||
# 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< -------------------------------------------------------- |
||||
$OUTPUT |
||||
--------------------------------------------- >8 -------------------------------------------------------- |
||||
" |
||||
cleanup |
||||
exit 1 |
||||
fi |
||||
else |
||||
# no error on the first `meteor publish` attempt |
||||
echo "$OUTPUT" # just in case meteor said something interesting |
||||
echo "Thanks for releasing a new version of $PACKAGE_NAME! You can see it at |
||||
https://atmospherejs.com/$ATMOSPHERE_NAME" |
||||
fi |
||||
|
||||
cleanup |
||||
|
||||
done |
||||
@ -0,0 +1,37 @@
|
||||
#!/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 |
||||
cd "$( dirname "$0" )/.." |
||||
|
||||
# run tests and delete the temporary package.js even if Ctrl+C is pressed |
||||
int_trap() { |
||||
echo |
||||
printf "Tests interrupted. Hopefully you verified in the browser that tests pass?\n\n" |
||||
} |
||||
|
||||
trap int_trap INT |
||||
|
||||
# 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 |
||||
|
||||
rm package.js |
||||
|
||||
done |
||||
@ -0,0 +1,58 @@
|
||||
'use strict'; |
||||
|
||||
Tinytest.addAsync('Isotope - fitRows', function (test, done) { |
||||
var isotopeDropZone = document.createElement('div'); |
||||
document.body.appendChild(isotopeDropZone); |
||||
|
||||
// TODO ideally we'd get the htmls straight from this repo, but no idea how to do this from TinyTest - http://stackoverflow.com/questions/27180892/pull-an-html-file-into-a-tinytest
|
||||
HTTP.get('https://rawgit.com/metafizzy/isotope/master/test/index.html', function callback(error, result) { |
||||
|
||||
// adapted from test/fit-rows.js
|
||||
function checkPosition(item, x, y) { |
||||
var elem = item.element; |
||||
var left = parseInt(elem.style.left, 10); |
||||
var top = parseInt(elem.style.top, 10); |
||||
test.equal([ left, top ], [ x, y ], 'item position ' + x + ', ' + y); |
||||
} |
||||
|
||||
if (error) { |
||||
test.fail({message: 'Error getting the test file. Do we have an Internet connection to rawgit.com?'}); |
||||
} else { |
||||
// [^] matches across newlines. Stay within the <body>, or else the fragment will attempt to load resources on its own.
|
||||
isotopeDropZone.innerHTML = result.content.match(/<h2>fitRows[^]+<\/div>/); |
||||
|
||||
test.ok({message: 'Visual test passed if the fitRows look like two towers, and failed if they look like a rotated L'}); |
||||
|
||||
var iso = new Isotope('#fitrows-gutter', { |
||||
layoutMode: 'fitRows', |
||||
itemSelector: '.item', |
||||
transitionDuration: 0 |
||||
}); |
||||
|
||||
checkPosition(iso.items[0], 0, 0); |
||||
checkPosition(iso.items[1], 60, 0); |
||||
|
||||
// check gutter
|
||||
iso.options.fitRows = { |
||||
gutter: 10 |
||||
}; |
||||
iso.layout(); |
||||
|
||||
checkPosition(iso.items[0], 0, 0); |
||||
checkPosition(iso.items[1], 70, 0); |
||||
|
||||
// check gutter, with element sizing
|
||||
iso.options.fitRows = { |
||||
gutter: '.gutter-sizer' |
||||
}; |
||||
iso.layout(); |
||||
|
||||
checkPosition(iso.items[0], 0, 0); |
||||
checkPosition(iso.items[1], 78, 0); |
||||
} |
||||
|
||||
done(); |
||||
|
||||
}); |
||||
|
||||
}); |
||||
Loading…
Reference in new issue