Skip to content

Commit

Permalink
Refactor: memory/performance optimizations, file structure changed, R…
Browse files Browse the repository at this point in the history
…ollup adopted, etc.
  • Loading branch information
Niklas Rämö committed Jun 6, 2018
1 parent e94a625 commit a93a39a
Show file tree
Hide file tree
Showing 134 changed files with 17,159 additions and 8,991 deletions.
13 changes: 0 additions & 13 deletions .editorconfig

This file was deleted.

176 changes: 62 additions & 114 deletions .eslintrc.js
Original file line number Diff line number Diff line change
@@ -1,118 +1,66 @@
module.exports = {
"rules": {
parserOptions: {
ecmaVersion: 7,
sourceType: 'module'
},
rules: {
// Possible errors
"no-duplicate-case": "error",
"no-ex-assign": "error",
"no-empty": ["error", { "allowEmptyCatch": true }],
"no-extra-semi": "error",
"no-func-assign": "error",
"no-invalid-regexp": "error",
"no-irregular-whitespace": "error",
"no-obj-calls": "error",
"no-sparse-arrays": "error",
"no-unexpected-multiline": "error",
"no-unreachable": "error",
"no-unsafe-finally": "error",
"use-isnan": "error",
"valid-typeof": "error",
'no-duplicate-case': 'error',
'no-ex-assign': 'error',
'no-empty': ['error', { allowEmptyCatch: true }],
'no-extra-semi': 'error',
'no-func-assign': 'error',
'no-invalid-regexp': 'error',
'no-irregular-whitespace': 'error',
'no-obj-calls': 'error',
'no-sparse-arrays': 'error',
'no-unexpected-multiline': 'error',
'no-unreachable': 'error',
'no-unsafe-finally': 'error',
'use-isnan': 'error',
'valid-typeof': 'error',
// Best practices
"array-callback-return": "error",
"curly": "error",
"eqeqeq": ["error", "always"],
"guard-for-in": "error",
"no-caller": "error",
"no-case-declarations": "error",
"no-empty-pattern": "error",
"no-eq-null": "error",
"no-eval": "error",
"no-extend-native": "error",
"no-extra-bind": "error",
"no-extra-label": "error",
"no-fallthrough": "error",
"no-floating-decimal": "error",
"no-global-assign": "error",
"no-implicit-globals": "error",
"no-implied-eval": "error",
"no-iterator": "error",
"no-lone-blocks": "error",
"no-multi-spaces": "error",
"no-multi-str": "error",
"no-octal-escape": "error",
"no-octal": "error",
"no-proto": "error",
"no-redeclare": "error",
"no-return-await": "error",
"no-script-url": "error",
"no-self-assign": "error",
"no-self-compare": "error",
"no-sequences": "error",
"no-throw-literal": "error",
"no-unmodified-loop-condition": "error",
"no-unused-expressions": ["error", {"allowShortCircuit": true, "allowTernary": true}],
"no-unused-labels": "error",
"no-useless-call": "error",
"no-useless-concat": "error",
"no-useless-escape": "error",
"no-useless-return": "error",
"no-with": "error",
"radix": ["error", "as-needed"],
// Variables
"no-delete-var": "error",
"no-label-var": "error",
"no-undef-init": "error",
"no-unused-vars": "error",
// Stylistic issues
"array-bracket-spacing": ["warn", "never"],
"block-spacing": "warn",
"brace-style": ["warn", "stroustrup"],
"camelcase": "warn",
"comma-dangle": ["warn", "never"],
"comma-spacing": ["warn", {"before": false, "after": true}],
"comma-style": ["warn", "last"],
"computed-property-spacing": ["warn", "never"],
"eol-last": ["warn", "always"],
"func-call-spacing": ["warn", "never"],
"indent": "off",
"indent-legacy": ["warn", 2, {"SwitchCase": 1, "VariableDeclarator": 1, "FunctionDeclaration": {"body": 1, "parameters": 1}}],
"key-spacing": ["warn", {"beforeColon": false, "afterColon": true, "mode": "strict"}],
"keyword-spacing": ["warn", {"before": true, "after": true}],
"linebreak-style": ["warn", "unix"],
"max-len": ["warn", {"code": Infinity, "comments": 80}],
"new-parens": "warn",
"no-multiple-empty-lines": ["warn", {"max": 1}],
"no-tabs": "warn",
"no-trailing-spaces": "warn",
"no-whitespace-before-property": "warn",
"object-curly-spacing": ["warn", "never"],
"one-var-declaration-per-line": ["warn", "initializations"],
"one-var": ["warn", "never"],
"quote-props": ["warn", "consistent", {"keywords": true}],
"quotes": ["warn", "single", {"allowTemplateLiterals": true}],
"semi-spacing": ["warn", {"before": false, "after": true}],
"semi": ["warn", "always"],
"space-before-blocks": "warn",
"space-before-function-paren": ["warn", {"anonymous": "always", "named": "never", "asyncArrow": "always"}],
"space-in-parens": ["warn", "never"],
"space-infix-ops": ["warn", {"int32Hint": true}],
"space-unary-ops": "warn",
"spaced-comment": ["warn", "always", {"exceptions": ["!"]}],
// ES6
"arrow-body-style": ["error", "always"],
"arrow-parens": ["error", "always"],
"arrow-spacing": ["error", {"before": true, "after": true}],
"constructor-super": "error",
"generator-star-spacing": ["error", {"before": true, "after": false}],
"no-class-assign": "error",
"no-confusing-arrow": "error",
"no-const-assign": "error",
"no-dupe-class-members": "error",
"no-duplicate-imports": "error",
"no-new-symbol": "error",
"no-this-before-super": "error",
"no-useless-constructor": "error",
"require-yield": "error",
"rest-spread-spacing": ["error", "never"],
"template-curly-spacing": "error",
"yield-star-spacing": ["error", "before"]
'array-callback-return': 'error',
eqeqeq: ['error', 'always'],
'no-caller': 'error',
'no-case-declarations': 'error',
'no-empty-pattern': 'error',
'no-eq-null': 'error',
'no-eval': 'error',
'no-extend-native': 'error',
'no-extra-bind': 'error',
'no-extra-label': 'error',
'no-fallthrough': 'error',
'no-floating-decimal': 'error',
'no-global-assign': 'error',
'no-implicit-globals': 'error',
'no-implied-eval': 'error',
'no-iterator': 'error',
'no-lone-blocks': 'error',
'no-multi-spaces': 'error',
'no-multi-str': 'error',
'no-octal-escape': 'error',
'no-octal': 'error',
'no-proto': 'error',
'no-redeclare': 'error',
'no-return-await': 'error',
'no-script-url': 'error',
'no-self-assign': 'error',
'no-self-compare': 'error',
'no-sequences': 'error',
'no-throw-literal': 'error',
'no-unmodified-loop-condition': 'error',
'no-unused-expressions': ['error', { allowShortCircuit: true, allowTernary: true }],
'no-unused-labels': 'error',
'no-useless-call': 'error',
'no-useless-concat': 'error',
'no-useless-escape': 'error',
'no-useless-return': 'error',
'no-with': 'error',
radix: ['error', 'as-needed'],
'no-delete-var': 'error',
'no-label-var': 'error',
'no-undef-init': 'error',
'no-unused-vars': 'error'
}
};
};
4 changes: 4 additions & 0 deletions .prettierrc.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
{
"printWidth": 100,
"singleQuote": true
}
2 changes: 1 addition & 1 deletion .travis.yml
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
language: node_js
node_js:
- '6'
- '8'
env:
email: false
global:
Expand Down
26 changes: 12 additions & 14 deletions CONTRIBUTING.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
# Contributing to Muuri

First of all thanks for the interest in contributing to Muuri! Here you will find some instructions on how to create an issue or a pull request.
Thanks for the interest in contributing to Muuri! Here you will find some instructions on how to create an issue or a pull request.

## Creating an issue

Expand All @@ -25,32 +25,30 @@ Please [create an issue](https://github.com/haltu/muuri/issues/new) and explain
* [Fork Muuri](https://github.com/haltu/muuri#fork-destination-box).
* Create a new branch for your pull request from the master branch. The name of the pull request branch should start with the id of the issue you opened for the pull request, e.g. `#123-fix-something`.
3. **Setup the development environment.**
* Install gulp-cli: `npm install gulp-cli -g`
* Run `npm install` in the repository's directory.
* You can now run the following gulp commands:
* `gulp`
* Lint, compress and test `muuri.js` file.
* This is the command you should execute _successfully_ before opening the pull request.
* `gulp lint`
* Makes sure `muuri.js` file conforms to the project's ESLint config.
* `gulp compress`
* You can now run the following commands:
* `npm run lint`
* Lints `muuri.js` file.
* `npm run minify`
* Creates a minified version of `muuri.js` file as `muuri.min.js`.
* `gulp test`
* `npm run test-sauce`
* Runs the unit tests in Sauce Labs.
* To make this work you need to create an `.env` file the project root, which should contain `SAUCE_USERNAME` and `SAUCE_ACCESS_KEY` variables.
* Launches chrome, firefox and safari by default.
* You can provide arguments to launch specific browsers: `gulp test --chrome --firefox --safari --edge`
* `gulp test-local`
* You can provide arguments to launch specific browsers: `npm run test-sauce --chrome --firefox --safari --edge`
* `npm run test-local`
* Runs the unit tests locally.
* Launches only chrome by default.
* You can provide arguments to launch specific browsers: `gulp test-local --chrome --firefox --safari --edge`
* You can provide arguments to launch specific browsers: `npm run test-local --chrome --firefox --safari --edge`
* `npm test`
* Lint `muuri.js` and run the unit tests in Sauce Labs.
4. **Do the updates.**
* Now is the time to make the actual updates to Muuri.
* Remember scope. Don't refactor things that are not related to the pull request.
* After you're done update unit tests and docs (`README.md`) if necessary.
* Also, if this is your first pull request to Muuri remember to add yourself to the `AUTHORS.txt` file, e.g. `John Doe <https://github.com/johndoe>`.
5. **Create `muuri.min.js` and make sure nothing is broken.**
* Run `gulp` _successfully_ and try to do some manual testing if possible.
* Run `npm run minify` and `npm test` _successfully_ and try to do some manual testing if possible.
6. **Create the pull request.**
* Do your best to explain what the pull request fixes.
* Mention which issue(s) will be closed by the pull request, e.g. `Closes #123`.
Expand Down
41 changes: 19 additions & 22 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
[![npm](https://img.shields.io/npm/v/muuri.svg)](http://npm.im/muuri)
[![CDNJS](https://img.shields.io/cdnjs/v/muuri.svg)](https://cdnjs.com/libraries/muuri)

Muuri is a magical JavaScript layout engine that allows you to build all kinds of layouts and make them responsive, sortable, filterable, draggable and/or animated. Comparing to what's out there Muuri is a combination of [Packery](http://packery.metafizzy.co/), [Masonry](http://masonry.desandro.com/), [Isotope](http://isotope.metafizzy.co/) and [Sortable](https://github.com/RubaXa/Sortable). Wanna see it in action? Check out the [demo](http://haltu.github.io/muuri/) on the website.
Muuri is a JavaScript layout engine that allows you to build all kinds of layouts and make them responsive, sortable, filterable, draggable and/or animated. Comparing to what's out there Muuri is a combination of [Packery](http://packery.metafizzy.co/), [Masonry](http://masonry.desandro.com/), [Isotope](http://isotope.metafizzy.co/) and [Sortable](https://github.com/RubaXa/Sortable). Wanna see it in action? Check out the [demo](http://haltu.github.io/muuri/) on the website.

Muuri's default "First Fit" bin packing layout algorithm generates layouts similar to [Packery](https://github.com/metafizzy/packery) and [Masonry](http://masonry.desandro.com/). The implementation is heavily based on the "maxrects" approach as described by Jukka Jylänki in his research [A Thousand Ways to Pack the Bin](http://clb.demon.fi/files/RectangleBinPack.pdf). If that's not your cup of tea you can always provide your own layout algorithm to position the items as you wish.

Expand Down Expand Up @@ -36,14 +36,14 @@ Muuri uses [Web Animations](https://developer.mozilla.org/en-US/docs/Web/API/Web
### 1. Get Muuri

Download from GitHub:
* [muuri.js](https://raw.githubusercontent.com/haltu/muuri/0.5.4/muuri.js) - for development (not minified, with comments).
* [muuri.min.js](https://raw.githubusercontent.com/haltu/muuri/0.5.4/muuri.min.js) - for production (minified, no comments).
* [muuri.js](https://raw.githubusercontent.com/haltu/muuri/0.6.0/muuri.js) - for development (not minified, with comments).
* [muuri.min.js](https://raw.githubusercontent.com/haltu/muuri/0.6.0/muuri.min.js) - for production (minified, no comments).

Or link directly via CDNJS:

```html
<script src="https://cdnjs.cloudflare.com/ajax/libs/muuri/0.5.4/muuri.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/muuri/0.5.4/muuri.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/muuri/0.6.0/muuri.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/muuri/0.6.0/muuri.min.js"></script>
```

Or install with [npm](https://www.npmjs.com/):
Expand Down Expand Up @@ -159,7 +159,7 @@ You can view this little tutorial demo [here](https://codepen.io/niklasramo/pen/

**Syntax**

`Muuri( element, [options] )`
`Muuri( element, [options] )`

**Parameters**

Expand Down Expand Up @@ -870,7 +870,7 @@ var grid = new Muuri(elem, {
### Grid methods

* [grid.getElement()](#gridgetelement)
* [grid.getItems( [targets], [state] )](#gridgetitems-targets-state-)
* [grid.getItems( [targets] )](#gridgetitems-targets-)
* [grid.refreshItems( [items] )](#gridrefreshitems-items-)
* [grid.refreshSortData( [items] )](#gridrefreshsortdata-items-)
* [grid.synchronize()](#gridsynchronize)
Expand Down Expand Up @@ -898,19 +898,15 @@ Get the instance element.
var elem = grid.getElement();
```

### grid.getItems( [targets], [state] )
### grid.getItems( [targets] )

Get all items in the grid. Optionally you can provide specific targets (indices or elements) and filter the results by the items' state.
Get all items in the grid. Optionally you can provide specific targets (indices or elements).

**Parameters**

* **targets** &nbsp;&mdash;&nbsp; *array / element / Muuri.Item / number*
* An array of item instances/elements/indices.
* Optional.
* **state** &nbsp;&mdash;&nbsp; *string*
* Accepted values: `'active'`, `'inactive'`, `'visible'`, `'hidden'`, `'showing'`, `'hiding'`, `'positioning'`, `'dragging'`, `'releasing'`, `'migrating'`.
* Default value: `undefined`.
* Optional.

**Returns** &nbsp;&mdash;&nbsp; *array*

Expand All @@ -920,20 +916,21 @@ Returns the queried items.
// Get all items, both active and inactive.
var allItems = grid.getItems();

// Get all active (visible) items.
var activeItems = grid.getItems('active');
// Get all active items.
var activeItems = grid.getItems().filter(function (item) {
return item.isActive();
});

// Get all inactive (hidden) items.
var inactiveItems = grid.getItems('inactive');
// Get all positioning items.
var positioningItems = grid.getItems().filter(function (item) {
return item.isPositioning();
});

// Get the first item (active or inactive).
// Get the first item.
var firstItem = grid.getItems(0)[0];

// Get specific items by their elements (inactive or active).
// Get specific items by their elements.
var items = grid.getItems([elemA, elemB]);

// Get specific inactive items.
var items = grid.getItems([elemA, elemB], 'inactive');
```

### grid.refreshItems( [items] )
Expand Down
31 changes: 0 additions & 31 deletions bower.json

This file was deleted.

Loading

0 comments on commit a93a39a

Please sign in to comment.