├── .npmignore
├── .gitignore
├── package.json
├── LICENSE
├── README.md
└── lib
    └── index.js


/.npmignore:
--------------------------------------------------------------------------------
1 | /node_modules
2 | /test.js
3 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # Compiled source #
 2 | ###################
 3 | *.com
 4 | *.class
 5 | *.dll
 6 | *.exe
 7 | *.o
 8 | *.so
 9 | 
10 | # Packages #
11 | ############
12 | # it's better to unpack these files and commit the raw source
13 | # git has its own built in compression methods
14 | *.7z
15 | *.dmg
16 | *.gz
17 | *.iso
18 | *.jar
19 | *.rar
20 | *.tar
21 | *.zip
22 | 
23 | # Logs and databases #
24 | ######################
25 | *.log
26 | *.sql
27 | *.sqlite
28 | 
29 | # OS generated files #
30 | ######################
31 | .DS_Store
32 | .DS_Store?
33 | ._*
34 | .Spotlight-V100
35 | .Trashes
36 | ehthumbs.db
37 | Thumbs.db
38 | 
39 | 
40 | # Custom
41 | #####################
42 | /node_modules
43 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "react-masonry-mixin",
 3 |   "version": "1.0.5",
 4 |   "main": "./lib/index",
 5 |   "description": "A masonry mixin for React.js",
 6 |   "dependencies": {
 7 |     "masonry": "eiriklv/masonry",
 8 |     "imagesloaded": "eiriklv/imagesloaded"
 9 |   },
10 |   "devDependencies": {},
11 |   "scripts": {
12 |     "test": "echo \"Error: no test specified\" && exit 1"
13 |   },
14 |   "repository": {
15 |     "type": "git",
16 |     "url": "git://github.com/eiriklv/react-masonry-mixin.git"
17 |   },
18 |   "keywords": [
19 |     "react",
20 |     "mixin",
21 |     "masonry",
22 |     "packery",
23 |     "isotope",
24 |     "react-component"
25 |   ],
26 |   "author": "Eirik Vullum <evullum@gmail.com> (http://www.evconsult.no/)",
27 |   "bugs": {
28 |     "url": "https://github.com/eiriklv/react-masonry-mixin/issues"
29 |   },
30 |   "homepage": "https://github.com/eiriklv/react-masonry-mixin",
31 |   "license": "MIT"
32 | }
33 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | The MIT License (MIT)
 2 | 
 3 | Copyright (c) 2014 Eirik L. Vullum
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 
23 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | React Masonry Mixin
 2 | ===================
 3 | 
 4 | [![npm version](https://badge.fury.io/js/react-masonry-mixin.svg)](http://badge.fury.io/js/react-masonry-mixin)
 5 | 
 6 | #### Introduction:
 7 | A React.js Masonry mixin. (Also available as a [component](https://github.com/eiriklv/react-masonry-component))
 8 | 
 9 | #### Live demo:
10 | [hearsay.me (web)](http://www.hearsay.me)
11 | [hearsay.me (github)](https://github.com/eiriklv/hearsay-frontend)
12 | 
13 | #### Usage:
14 | 
15 | * The mixin is now bundled with Masonry, so no additional dependencies needed!
16 | * ~~You will have to use Masonry as a script dependency, as there is no complete npm module available at the moment.~~
17 | * You can optionally include Masonry as a script tag
18 | `<script src='//cdnjs.cloudflare.com/ajax/libs/masonry/3.1.5/masonry.pkgd.min.js' />`
19 | 
20 | * To use the mixin
21 |  * require the mixin
22 |  * pass a reference and a masonry options object
23 |  * make sure you use the same reference as `ref` in your component
24 |  * if you need to - access the masonry object through `this.masonry` in your component
25 | 
26 | * example code
27 | 
28 | ```js 
29 | var React = require('react');
30 | var MasonryMixin = require('react-masonry-mixin');
31 |  
32 | var masonryOptions = {
33 |     transitionDuration: 0
34 | };
35 |  
36 | var SomeComponent = React.createClass({
37 | 
38 |     mixins: [MasonryMixin('masonryContainer', masonryOptions)],
39 |  
40 |     render: function () {
41 |         var childElements = this.props.elements.map(function(element){
42 |            return (
43 |                 <div className="someclass">
44 |                     {element.name}
45 |                 </div>
46 |             );
47 |         });
48 |         
49 |         return (
50 |             <div ref="masonryContainer">
51 |                 {childElements}
52 |             </div>
53 |         );
54 |     }
55 | });
56 | 
57 | module.exports = SomeComponent;
58 | ```
59 | 


--------------------------------------------------------------------------------
/lib/index.js:
--------------------------------------------------------------------------------
  1 | var isBrowser = (typeof window !== 'undefined');
  2 | var Masonry = isBrowser ? window.Masonry || require('masonry') : null;
  3 | var imagesloaded = isBrowser ? require('imagesloaded') : null;
  4 | var nullNode = { getDOMNode: function() { return null; } };
  5 | 
  6 | function MasonryMixin() {
  7 |     return function(reference, options) {
  8 | 
  9 |         options.useImagesLoaded = options.useImagesLoaded === undefined ?
 10 |             true :
 11 |             options.useImagesLoaded;
 12 | 
 13 |         return {
 14 |             masonry: false,
 15 | 
 16 |             domChildren: [],
 17 | 
 18 |             initializeMasonry: function(force) {
 19 |                 if (!this.masonry || force) {
 20 |                     this.masonry = new Masonry(this.refs[reference].getDOMNode(), options);
 21 |                     this.domChildren = this.getNewDomChildren();
 22 |                 }
 23 |             },
 24 | 
 25 |             initializeMasonry: function(force) {
 26 |                 if (!this.masonry || force) {
 27 |                     this.masonry = new Masonry(
 28 |                         React.findDOMNode ? React.findDOMNode(this.refs[reference]) : (this.refs[reference] || nullNode).getDOMNode(),
 29 |                         options
 30 |                     );
 31 | 
 32 |                     this.domChildren = this.getNewDomChildren();
 33 |                 }
 34 |             },
 35 | 
 36 |             getNewDomChildren: function() {
 37 |                 var node = React.findDOMNode ? React.findDOMNode(this.refs[reference]) : (this.refs[reference] || nullNode).getDOMNode();
 38 |                 var children = options.itemSelector ? node.querySelectorAll(options.itemSelector) : node.children;
 39 |                 return Array.prototype.slice.call(children);
 40 |             },
 41 | 
 42 |             diffDomChildren: function() {
 43 |                 var oldChildren = this.domChildren.filter(function(element) {
 44 |                     /*
 45 |                      * take only elements attached to DOM
 46 |                      * (aka the parent is the masonry container, not null)
 47 |                      */
 48 |                     return !!element.parentNode;
 49 |                 });
 50 | 
 51 |                 var newChildren = this.getNewDomChildren();
 52 | 
 53 |                 var removed = oldChildren.filter(function(oldChild) {
 54 |                     return !~newChildren.indexOf(oldChild);
 55 |                 });
 56 | 
 57 |                 var domDiff = newChildren.filter(function(newChild) {
 58 |                     return !~oldChildren.indexOf(newChild);
 59 |                 });
 60 | 
 61 |                 var beginningIndex = 0;
 62 | 
 63 |                 // get everything added to the beginning of the DOMNode list
 64 |                 var prepended = domDiff.filter(function(newChild, i) {
 65 |                     var prepend = (beginningIndex === newChildren.indexOf(newChild));
 66 | 
 67 |                     if (prepend) {
 68 |                         // increase the index
 69 |                         beginningIndex++;
 70 |                     }
 71 | 
 72 |                     return prepend;
 73 |                 })
 74 | 
 75 |                 // we assume that everything else is appended
 76 |                 var appended = domDiff.filter(function(el) {
 77 |                     return prepended.indexOf(el) === -1;
 78 |                 });
 79 | 
 80 |                 /*
 81 |                  * otherwise we reverse it because so we're going through the list picking off the items that
 82 |                  * have been added at the end of the list. this complex logic is preserved in case it needs to be
 83 |                  * invoked 
 84 |                  * 
 85 |                  * var endingIndex = newChildren.length - 1;
 86 |                  * 
 87 |                  * domDiff.reverse().filter(function(newChild, i){
 88 |                  *     var append = endingIndex == newChildren.indexOf(newChild);
 89 |                  *     
 90 |                  *     if (append) {
 91 |                  *         endingIndex--;
 92 |                  *     }
 93 |                  *     
 94 |                  *     return append;
 95 |                  * });
 96 |                  */
 97 | 
 98 |                 // get everything added to the end of the DOMNode list
 99 |                 var moved = [];
100 | 
101 |                 if (removed.length === 0) {
102 |                     moved = oldChildren.filter(function(child, index) {
103 |                         return index !== newChildren.indexOf(child);
104 |                     });
105 |                 }
106 | 
107 |                 this.domChildren = newChildren;
108 | 
109 |                 return {
110 |                     old: oldChildren,
111 |                     new: newChildren,
112 |                     removed: removed,
113 |                     appended: appended,
114 |                     prepended: prepended,
115 |                     moved: moved
116 |                 };
117 |             },
118 | 
119 |             performLayout: function() {
120 |                 var diff = this.diffDomChildren();
121 | 
122 |                 if (diff.removed.length > 0) {
123 |                     this.masonry.remove(diff.removed);
124 |                     this.masonry.reloadItems();
125 |                 }
126 | 
127 |                 if (diff.appended.length > 0) {
128 |                     this.masonry.appended(diff.appended);
129 |                     this.masonry.reloadItems();
130 |                 }
131 | 
132 |                 if (diff.prepended.length > 0) {
133 |                     this.masonry.prepended(diff.prepended);
134 |                 }
135 | 
136 |                 if (diff.moved.length > 0) {
137 |                     this.masonry.reloadItems();
138 |                 }
139 | 
140 |                 this.masonry.layout();
141 |             },
142 | 
143 |             imagesLoaded: function() {
144 |                 if (!options.useImagesLoaded) return;
145 | 
146 |                 imagesloaded(
147 |                     React.findDOMNode ? React.findDOMNode(this.refs[reference]) : (this.refs[reference] || nullNode).getDOMNode(),
148 |                     function(instance) {
149 |                         this.masonry.layout();
150 |                     }.bind(this)
151 |                 );
152 |             },
153 | 
154 |             componentDidMount: function() {
155 |                 this.initializeMasonry();
156 |                 this.imagesLoaded();
157 |             },
158 | 
159 |             componentDidUpdate: function() {
160 |                 this.performLayout();
161 |                 this.imagesLoaded();
162 |             },
163 | 
164 |             componentWillReceiveProps: function() {
165 |                 this._timer = setTimeout(function() {
166 |                     this.masonry.reloadItems();
167 |                     this.isMounted && this.isMounted() && this.forceUpdate();
168 |                 }.bind(this), 0);
169 |             },
170 | 
171 |             componentWillUnmount: function() {
172 |                 clearTimeout(this._timer);
173 |             }
174 |         };
175 |     };
176 | }
177 | 
178 | module.exports = MasonryMixin();
179 | 


--------------------------------------------------------------------------------