metafizzy / outlayer Goto Github PK
View Code? Open in Web Editor NEW:construction_worker: the brains & guts of a layout library
:construction_worker: the brains & guts of a layout library
Should bail nicely if user enters non-element argument for new Layout()
. Fixes regression with Packery tests.
should get utils.isElement( queryElement )
RequireJS already comes with a document ready handling so no need for this one when I am using outlayer together with RequireJS ...
Any ideas how we can do this to reduce the file size?
For support with Component(1) and browserify desandro/masonry#426, desandro/masonry#480
After .destroy()
, the resize handler is still active and will be triggered as it is debounced.
It appears as though the change to "main" introduced in this commit causes errors when masonry is included via wiredep. Reverting "main" back to an array of both item.js and outlayer.js gets rid of the error shown below.
Uncaught TypeError: Cannot read property 'Item' of undefined -- outlayer.js:42
Uncaught TypeError: Cannot read property 'create' of undefined -- masonry.js:43
both item.js and outlayer.js use the same utility functions. It might make sense to put them together into one utility object and remove duplication.
return this
on methods to allow chaining:
masonry.layout()
.reloadItems();
I know the example above could be accomplished by using .appended()
but there might be some useful cases for chaining.
Consider replacing it with a much smaller one:
https://github.com/thomaswelton/bower-event-emitter
It's 2 KB only and is really good enough ...
Hi @desandro:
Your copyright notice and the MIT license text are not contained on GitHub but on a separate MIT license page (http://desandro.mit-license.org/). This actually poses a problem for automated FOSS compliance processes. While code scanners will pick up on the string 'MIT' in the README.md, your copyright notice will be systematically missed.
Would you please consider changing your license information so that your code can be more easily used in compliance with the license? A good method for declaring copyright and licensing is https://reuse.software.
Please see my comment on PR #21, there is a critical bug there that better don't make into the next release.
Thanks!
The native web console in Firefox version 28 reports the above warning at line outlayer.js:114.
Hello,
It appears that commit 914f1f2 introduced a bug:
914f1f2#diff-a63318b17de3bf77b5cd6eb71e7aae44R46
How can window.Outlayer.Item
be defined before assigning the result of the factory
call to window.Outlayer
?
My Karma tests fail on this when launching PhantomJS, with the following error:
Running "karma:dev" (karma) task
INFO [karma]: Karma v0.12.31 server started at http://localhost:9876/
INFO [launcher]: Starting browser PhantomJS
INFO [PhantomJS 1.9.8 (Windows 8)]: Connected on socket _xqtqhxXOy8qR62SOmNJ with id 26908454
PhantomJS 1.9.8 (Windows 8) ERROR
TypeError: 'undefined' is not an object (evaluating 'window.Outlayer.Item')
at src/main/bower_components/outlayer/outlayer.js:42
Or did I got the root cause wrong ?
I'm using Masonry, but I guess this is Outlayer's concern. I'd like the initial layout of Masonry to be animated.
My use-case is that I have some HTML that is initially rendered on the server with a simple flexbox layout, and I re-do the layout on the client side with Masonry. When Masonry kicks in, the elements 'jump' to their computed place, without any transition.
Would it be possible to add a transition on the initial layout?
Hello!
We are currently using Packery on one of our sites. After re-cloning of one our repos, I noticed that only one element in our Packery-powered gallery was loading, and the console was giving an error:
Uncaught TypeError: Cannot set property 'opacity' of undefined
from file item.js:301
This seems to be an issue only with Outlayer 1.1.4. 1.1.3 works fine.
I originally posted this as metafizzy/packery#216, before realizing the issue was part of Outlayer.
Dynamically appended elements are given the isTransitioning attribute due to their reveal. However, there is currently no check or callback for when the reveal animations end to remove this attribute. This causes a conflict with the _transitionTo function, as the property is set when it shouldn't be, preventing the 'layout' event from properly broadcasting for dynamic elements.
Since at latest 1.1.8, outlayer started reflowing elements by animating them correctly at first, but then suddenly shifting element locations mid-animation, finally moving them into their correct positions.
I wish I could record the transition effect, but it's difficult to capture.
From metafizzy/packery#20
It works brilliantly for me, until I attempt to use it with jQuery, which is where i get the classic "Object [object Object] has no method 'packery' " error (I'm following the config paths option from the appendix link you posted). I tried to shim it in the config with a dep of jquery, but to no avail. Do you know what I'm missing?
when set to false, disables setting size of container
1 Gaps will occur when layout is changed — on resize, or item size changes — with percentPosition: true
AND when the container element has padding. See demo: http://codepen.io/desandro/pen/ZGdqqZ
2 Gaps in columns with percent width items and container padding. See demo http://codepen.io/desandro/pen/KpjGxr
Hi ! and first of all thanks a lot for publishing so many useful public libraries : )
I've included Packery in my application, as a commonJS module.
Upon instantiation, I get this (blocking) error in the devtools console :
TypeError: CSS2Properties doesn't have an indexed property setter.
I've traced it back to https://github.com/metafizzy/outlayer/blob/master/outlayer.js#L144
the 2nd argument of this function call being a string, FF won't add it as a property of this.element.style
, which is a CSS2Properties object : https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleDeclaration
I just commented out this line to get my project to work.
I wish I could propose a better way to do this right now and submit a pull request.
I hope this issue will be useful anyway.
best.
Hi all,
So I'm having an issue where Masonry will only try to fit DIVs next to each other if it has excessive space. For instance, I have 2 divs one with 300px width and another with 700px width in a container of 1000px width. Mathmatically, 300 + 700 = 1000 no? When I try to use masonry on this layout, it will stack DIVs on top of each other instead of next to each other. The only way I've gotten it to work is to increase with width of the container to about 300px more than the required width.
Working but not whitespace: https://dl.dropboxusercontent.com/u/8556362/Capture1.PNG
Not-working, but should: https://dl.dropboxusercontent.com/u/8556362/Capture.PNG
Example Code:
<title></title> <style> #container { margin: 0 auto; padding: 0; width: 1000px !important; //310 div1 + 650 div 2 + 20 (margins) = 980. Does not work width: 1300px !important; //Giving it an extra 300px works but obviously not want I'm going for height: 500px; background: #007733; } .box { background-color: #000000; margin: 5px; width: 1000px; height: 100px; } </style> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="masonry.js"></script> <script> setTimeout(function() { var container = document.querySelector("#container"); window.msnry = new Masonry( container, { columnWidth: 0, itemSelector: ".box", gutterWidth: 0, isFitWidth: false, isAnimated: true }); },1000); </script>Not sure if I'm doing something wrong or this is actually a bug. Any help would be appreciated.
When I do
const Masonry = require("masonry-layout")
window.Masonry = Masonry
$().masonry
doesn't work even when jquery is already added.
I think the problem is jquery-bridget
is not available so it doesn't add the widget.
Lines 889 to 891 in fc751c1
jquery-bridget
as dependencyjquery-bridget
in https://github.com/metafizzy/outlayer/blob/master/outlayer.js just like ev-emitter
, etc.Lines 25 to 31 in fc751c1
Happy to hear, if there are any alternatives or if PR is invited.
Not sure if this is a bug or workflow decision, but when you reinitialize the items with Outlayer.prototype.reloadItems, new stamped items are not refreshed.
Why is not implemented this way?
Outlayer.prototype._create = function() {
// get items from children
this.reloadItems();
// set container style
utils.extend( this.element.style, this.options.containerStyle );
// bind resize method
if ( this.options.isResizeBound ) {
this.bindResize();
}
};
// goes through all children again and gets bricks in proper order
Outlayer.prototype.reloadItems = function() {
// collection of item elements
this.items = this._itemize( this.element.children );
// elements that affect layout, but are not laid out
this.stamps = [];
this.stamp( this.options.stamp );
};
Per desandro/masonry#496, items that are isHidden should not need to be laid out. Consider changing _getItemsForLayout
to
Masonry.prototype._getItemsForLayout = function( items ) {
var layoutItems = [];
for ( var i=0, len = items.length; i < len; i++ ) {
var item = items[i];
if ( !item.isIgnored && !item.isHidden ) {
layoutItems.push( item );
}
}
return layoutItems;
};
More of an FYI than an issue, but when using outlayer (via Masonry) with grid classes that use fractions (ie. desk-1/3) the fraction needs to be escaped for it to work properly. Otherwise, Chrome (and maybe others) throw a SyntaxError.
Uncaught SyntaxError: Failed to execute 'querySelector' on 'Element': '.desk-1/3' is not a valid selector.
I'm able to get around it by using the selector '.desk-1\\/3'
I think IE8 is not popular anymore. And more libraries are dropping support for it.
IMO the Eventie package is obsolete.
I got this issue while using react-masonry-mixin, but the problem seems to stem from outlayer. Not really sure why, but desandro-matches-selector just had a new version released, might have something to do with that.
Temporarily worked around this by setting an alias 'matches-selector': 'desandro-matches-selector',
in webpack, but I thought I'd post in case anyone else had similar problems.
ERROR in ../~/react-masonry-mixin/~/masonry/~/outlayer/outlayer.js
Module not found: Error: Cannot resolve module 'matches-selector' in /Users/eldh/Code/quinyx/js/node_modules/react-masonry-mixin/node_modules/masonry/node_modules/outlayer
@ ../~/react-masonry-mixin/~/masonry/~/outlayer/outlayer.js 993:4-31
Commit 2a462d0 breaks all translate3d
transitions, if using percentPosition:true
. I tested this using Isotope 2.2.1 in the newest versions of Chrome, Firefox and Internet Explorer.
Reason for the transitions breaking: Since the update, the x and y values for translate3d
are not in pixels anymore, but in %
. The values that are being used here are those returned from Item.prototype.getXValue
. This works perfectly fine for Item.prototype.layoutPosition
, but not for Item.prototype._transitionTo
, because percent values in translate3d
are not relative to the item's parent, but relative to the item itself.
See this StackOverflow thread: http://stackoverflow.com/questions/25046493/transform3d-using-percentage-to-move-within-parent-object
I constructed a very basic example to demonstrate this: https://jsfiddle.net/51vL64df/
Try resizing the output! If the width goes below 800px, responsiveness kicks in and Isotope tries transitioning all items to their new positions.
I made some component using outlayer.
I'd like to share this component to many people.
But I couldn't do it becacuse outlayer does not support cdn or packaged files.
cf. the masonry supports packaged files and cdn url.
https://github.com/desandro/masonry/tree/master/dist
http://cdnjs.com/libraries/masonry
so I send the pr #44
please merged.....
Is it possible to adjust JSDoc through the code?
In case if project contains JSDoc validation there are such errors (e.g. when using masonry-layout which uses outlayer):
ERROR: Unable to parse a tag's type expression for source file some.js in line XXX with tag title "param" and text "{Array of Outlayer.Items} items": Invalid type expression "Array of Outlayer.Items": Expected "|" but "o" found.
ERROR: Unable to parse a tag's type expression for source file ... in line ...with tag title "param" and text "{Array of Outlayer.Items} items": Invalid type expression "Array of Outlayer.Items": Expected "|" but "o" found.
ERROR: Unable to parse a tag's type expression for source file ... in line ... with tag title "param" and text "{Array of Outlayer.Items} items": Invalid type expression "Array of Outlayer.Items": Expected "|" but "o" found.
ERROR: Unable to parse a tag's type expression for source file ... in line ... with tag title "param" and text "{Array of Outlayer.Items} items": Invalid type expression "Array of Outlayer.Items": Expected "|" but "o" found.
ERROR: Unable to parse a tag's type expression for source file ... in line ... with tag title "param" and text "{Array or NodeList or Element} elems": Invalid type expression "Array or NodeList or Element": Expected "|" but "o" found.
ERROR: Unable to parse a tag's type expression for source file ... in line ... with tag title "param" and text "{Array or NodeList or Element} elems": Invalid type expression "Array or NodeList or Element": Expected "|" but "o" found.
ERROR: Unable to parse a tag's type expression for source file ... in line ... with tag title "param" and text "{Element, String} element": Invalid type expression "Element, String": Expected "!", "#", "$", "(", "-", ".", "/", "0", ":", "<", "=", "?", "@", "[]", "\\", "_", "|", "~", "", "", Unicode combining mark, Unicode decimal number, Unicode letter number, Unicode lowercase letter, Unicode modifier letter, Unicode other letter, Unicode punctuation connector, Unicode titlecase letter, Unicode uppercase letter, [1-9], or end of input but "," found.
ERROR: Unable to parse a tag's type expression for source file ... in line ... with tag title "param" and text "{Element, String} element": Invalid type expression "Element, String": Expected "!", "#", "$", "(", "-", ".", "/", "0", ":", "<", "=", "?", "@", "[]", "\\", "_", "|", "~", "", "", Unicode combining mark, Unicode decimal number, Unicode letter number, Unicode lowercase letter, Unicode modifier letter, Unicode other letter, Unicode punctuation connector, Unicode titlecase letter, Unicode uppercase letter, [1-9], or end of input but "," found.
ERROR: Unable to parse a tag's type expression for source file ... in line ... with tag title "param" and text "{Array or NodeList or HTMLElement} elems": Invalid type expression "Array or NodeList or HTMLElement": Expected "|" but "o" found.
ERROR: Unable to parse a tag's type expression for source file ... in line ... with tag title "param" and text "{Array or NodeList or HTMLElement} elems": Invalid type expression "Array or NodeList or HTMLElement": Expected "|" but "o" found.
ERROR: Unable to parse a tag's type expression for source file ... in line ... with tag title "param" and text "{Array or NodeList or HTMLElement} elems": Invalid type expression "Array or NodeList or HTMLElement": Expected "|" but "o" found.
May be better to use:
This is awkward
$container.masonry( 'on', 'layoutComplete', function() {...});
Outlayer animation uses CSS transitions. Browsers that do not support transitions get no animation. If you'd like to see animation for IE8 and IE9, please +1.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.