adopted-ember-addons / ember-collection Goto Github PK

Currently the css property of overflow is auto, however as I am using this in a table, it is necessary to always display the scrollbar (for aligning header and table body).

Would it be possible to have some way of changing/accessing the css property of scroll div? Aside from the scrollbar it would be useful to have access other css properties as well.

Many thanks,
M

At a quick scan of the README I see the example that ember-collection will mange rendering 10,000 items and only draw what should be on screen.

My curiosity is… Since I will never ask my API for 10K records, does ember-collection also mange loading records in chucks?

Are there any plans for supporting a sparse array of models? And only load what should be loaded and drawn accordingly?

Is there an easy way to remember last scroll position after transitioning back into a route that uses this component?

If I apply a filter a list and take it away, DOM elements are inserted in a seemingly random order. This might be expected or even intentional, and I'm not sure if it's ember-collection's problem, but just wanted to point it out.

So if I have these items:

let items = [
  {name: "Item 1"},
  {name: "Item 2"},
  {name: "Item 3"},
  {name: "Item 4"},
  {name: "Item 5"},
  ...
  {name: "Item 10000"},
]

and

<div class='ember-collection-wrapper'>
  {{#ember-collection items=items cell-layout=(fixed-grid-layout 500 50) as |item index| }}
    {{item.name}}
  {{/ember-collection}}
</div>

I get the HTML:

<div class='ember-collection-wrapper'>
  <div> <!-- some wrapper divs -->
    <div>
      <div>
        <!-- the actual items with a bucnh of positioning styles -->
        <div>Item 1</div>
        <div>Item 2</div>
        <div>Item 3</div>
        <div>Item 4</div>
        <div>Item 5</div>
      </div>
    </div>
  </div>
</div>

So far so good.

But if I apply a filter to items (lets say so items is only even number items) the HTML becomes something like this (note the random order)

<div class='ember-collection-wrapper'>
  <div> <!-- some wrapper divs -->
    <div>
      <div>
        <div>Item 14</div>
        <div>Item 2</div>
        <div>Item 12</div>
        <div>Item 4</div>
        <div>Item 10</div>
        <div>Item 8</div>
        <!-- etc... -->
      </div>
    </div>
  </div>
</div>

The positions of the elements remains accurate (with absolute positioning), so the UI looks right.

The only use case for me right now is that I'm using :nth-child(odd) to give alternating row colors, and the random DOM ordering breaks that.

:nth-child(odd) CSS also breaks with just regular scrolling because as new DOM elements are inserted, if the height of the parent can display an odd number of elements n, every n elements, there is a duplication. But this is less my concern than the random ordering on filter.

Here's a sample app to demonstrate: https://github.com/mehulkar/ember-collection-example

Without pre-rendering and measuring, is there support for items with heights which are not know before hand? If not, I tried a work-around where all items are the same height, but expandable. But is this supported since the height has to change dynamically?
I tried the following for a expandable list item:

{{#ember-collection
  items=model
  cell-layout=(mixed-grid-layout dimensions) as |item index|
}} 

Then, in Ember, i changed to height of one item via
this.get('dimensions').replace(index,1,[{width:1000, height:2000}]);
But ember-collection doesnt seem to observe the dimensions array. How can I support either of the above cases?

After leaving the dummy app open for a while I'm pretty sure the requestAnimationFrame is leaking memory somewhere. I'll take a look soon, just wanted to write this down so its being tracked.

Is it possible to create/render nested components/data structures with this component?

Corrently the main view of this component is useless, inside it there is a child view with position: absolute and overflow: auto and inside it there is the real list.

You may use the main view instead of creating the first child view, in this way we'd have less useless markup.

Hi everyone.

I was using your addon but when I put an a ember computed property on the items attribute the list breaks.

First of all renders all correctly but when I make scroll the list don't show the data properly, shows it breaked with more spaces than the necessary between the rows. I checked with all the layouts and have the same problem. How can I allow sort or computed without have an a perfomance issue?

@krisselden and I plan to create this at https://github.com/yapplabs/ember-virtual-scrollkit

I installed the ember-collection addon. While the running my app I got the following error.
"Uncaught Error: Assertion Failed: A helper named 'percentage-columns-layout' could not be found"
What should I do?
Pls help me.

Regards

Knight

I am curious about this one because it's kind of neat-o that ember collection uses the matrix css property to place dom elements in the visual world, but this makes testing a 'sort ordered' list .. really hard .. is it impossible? Don't know.

Assuming each element in the ember collection kinda looks like this:

<div style="position:absolute;top:0;left:0;transform:matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 40, 0, 1);width:1020px;height:100px;">  
  <div class="title">Title-1</div>
</div>

So Visually, you might see on a page:
Title-1
Title-2
Title-3

and the dom order will be same as visually the first time ember-collection renders and lays the elements out.

Then after doing a few sorts, rerenders .. etc .. you go back to original sort and see:

Title-1
Title-2
Title-3

but when you look at the dom you see the elements are in this order:

Title-2
Title-3
Title-1

so doing a query like: $('.title') .. to test .. do I have the right order on my titles? will not work.

I think this is a puzzler of epic proportions ...

I am creating this as per the discussions that are found on this thread: emberjs/list-view#245 (comment) if anyone wants me to add anything to the checklist just comment and I will do my best to keep up with what needs to be done.

Documentation:

• update list-view documentation to point to ember-collection
• update readme to reflect the reason for the new change
• document new features in the new implementation i.e. cell-layout
• document the upgrade path for people using ember-list-view

Implementation:

• upgrade tests and make sure they are all passing
• ???

Release:

• Release first beta version so people can test the current implementation
• decide if we are releasing a 1.13 release version in line with the new "same version" policy in ember

When using an ember-collection, and scrolling down for a bit (so views are recycled and re-ordered). Highlighting a portion that expands more than a few items will sometimes highlight the whole list. This is probably because of the way that the DOM is arranged. Is there any work-around so that highlighting works as expected?

On Mac Safari, with System Preferences set to "Scroll Always",
a vertically oriented ember-collection with content larger than its container does not show a visible scroll bar.
This is not a problem in other browsers such as Chrome.
We discovered that the presence of matrix3d() in the style generated inside the ember-collection seems to be responsible. Forcing matrix3d() to be replaced with matrix() seems to solve the issue.

Everytime I run ember install ember-collection I get the following error message. I find it hard to believe this bug is caused by this addon. However, I have not been able to reproduce this issue with any other ember addons.

As you can see, npm install --save-dev ember-collection correctly installs the addon.

Again, I do not know if there is anything that can be fixed here as it's very isolated and very odd. However, I figured I'd let you know all the same.

Thanks for the great addon!

• layout that supports fixed num of columns and uses percentages to set widths with variable height rows
• layout that supports fixed num of columns and fixed height

Hi!

I'm in the process of updating what @cibernox did here https://github.com/cibernox/ember-power-select-collection

In its newest version ember-power-select relies on the index yielded property of the #each helper.

It appears that this is not playing super well with ember-collection and when power-select filters the list the indexes are not updated properly.

ember-collection exposes an index but maybe I'm simply misunderstanding its functionality?

I'll try to create a reproduction repository as soon as I can, in the meantime here's a video from this happening in my company's app

https://gsnaps.s3.amazonaws.com/screencast_2016-05-01_18-02-50.mp4

I'm rendering only the indexes in the list instead of the full content and you can see they're not contiguous

thanks!

Hi,

I'm trying to get the sample running with alpha 4 but always get the error:

fixed-grid.js:74 Uncaught TypeError: height depends on the first argument of visibleWidth(number)

It seems like the component action clientSizeChange(clientSize) always gets only a number (width) as parameter instead of the expected {width: xy; height: xy} object.

My code is this:

template.hbs

<div class="row" style="height: 500px;">
  <div class="col-md-12" style="height: 100%; position: relative;">
    {{#ember-collection height=500 width=800 items=model cell-layout=(fixed-grid-layout 800 50) as |item index|}}
      {{item.name}}
    {{/ember-collection}}
  </div>
</div>

route.js

import Ember from 'ember';

export default Ember.Route.extend({
  model: function() {
    var items = [];
    for (var i = 0; i < 10000; i++) {
      items.push({name: "Item " + i});
    }
    return items;
  }
});

DEBUG: Ember : 1.13.7
DEBUG: Ember Data : 1.13.8
DEBUG: jQuery : 1.11.3

Edit: Updated my application but still get the same error
DEBUG: Ember : 2.2.0
DEBUG: Ember Data : 2.2.1
DEBUG: jQuery : 1.11.3

Are you able to reproduce this or did I forget something?

I fetch a list of ingredients using this computed property:

results: Ember.computed('searchQuery', function() {
  return this.store.query('ingredient', { filter: searchQuery, limit: 150 });
}

Then I can iterate trough the results using:

{{#each results as |result|}}
  {{result.name}}
{{/each}}

Now I'd like to use {{ember-collection}} but when I try to use it as follow: (it's basically the example on the readme of the component)

{{#ember-collection
  items=results
  height=500
  width=800
  cell-layout=(fixed-grid-layout 800 50) as |item index|
}}
  {{name}}
{{/ember-collection}}

the ember-collection component displays just an empty list.

What am I doing wrong?

I'm attempting to use this addon with a list of items on a mobile oriented app. The items currently take up the full width of the window, and have an image within them, so the height will not always be the same as that image is going to grow to fit the item container and thus it's height will grow making the whole item (that the collection is rendering) taller. How would I handle this with the collection so that it works responsively?

// addon/components/ember-collection/template.hbs
...
{{~#each _cells as |cell|~}}
    <div style={{{cell.style}}}>{{yield cell.item cell.index }}</div>
{{~/each~}}
...

What's a good way to apply the style using js? I've done this successfully in ember-cli-csp-style but that only works on the root element. Can't use a helper as it doesn't know its target context.

Happy to write a PR for this if someone more familiar with Glimmer can hint at a good way to solve.

I've been trying to use the alpha-4 release of this component to replace ember-list in an Ember app I've been upgrading from Ember 1.11 (still). Unfortunately, I immediately ran into a problem with tabindex, which we were using to allow the user to navigate the list using focus. It seems that ember-collection is relying on translate to put items in the visually correct order, but tabindex=0 relies on the actual order of the elements in the document. I don't know if I'm observing a bug, or if it was implemented that way for performance reasons, but in my case, preserving the correct tab order is important.

A fun one! Thanks to this Chromium bug, in combination with these parseInts, you can end up in a situation where ember-collection slowly scrolls upwards with no user input.

To reproduce, take a look at the scroll position demo in Chrome, zoom in to 110%, and scroll down a bit.

If you land on anything other than a nice round number, you'll end up in a feedback loop between the parseInt truncation in the addon code and the rounding glitch in the browser that inexorably drags you back to the top of the collection.

Maybe I'm missing something, but it would be nice to be able to specify a CSS class to each of the actual DOM elements that are generated by the collection (since the DOM structure that is generated seems internal and I don't want to rely on the specific number of nested divs that are generated.
I can apply my class to an element inside the collection, but it makes it harder to do things like add a margin between each element.

@shaunc has fixed it in shaunc@5d2a910 so we need to cherry-pick / review the fix.

The issue, via @shaunc, is

The problem is that if you set scrollTop to an impossible value and then resize to make it possible or closer to possible, browsers react in different ways.

I am trying to listen to the scrolling as the collection scrolls, and first thought of passing in
my own scroll-change action to handle this, but that means the collection is actually delegating to
my scroll change action instead of doing its own scrolly things.

In the ember-collections component there is the action:

  actions: {
    scrollChange(scrollLeft, scrollTop) {
      if (this._scrollChange) {
          this.sendAction('scroll-change', scrollLeft, scrollTop);
      } else {
        if (scrollLeft !== this._scrollLeft ||
            scrollTop !== this._scrollTop) {
          set(this, '_scrollLeft', scrollLeft);
          set(this, '_scrollTop', scrollTop);
          needsRevalidate(this);
        }
      }
    },

which means that if I pass in an action handler to listen for the scroll events ( custom action ) I am essentially overriding the components behavior.

I am only interested in listening to scroll change events in a collection, so I am curious if there is a way to do that in a more elegant way, or a way that works, since my way not working? I know I can attach a 'scroll' listener to the collection's div and use jquery to listen that way, but its not as fun.

Seems like I should be able to pass in my action handler and not override the original. I don't mind submitting a PR for this if needed.

I use a position: fixed element for a pop-over effect in an application, and EmberCollection seems to use 3D transforms in a way that makes lower cells initially block pop-overs from higher cells:

After scrolling down and up again, there is a chance the pop-over is unobstructed.

I'm not very familiar with how these 3D transformations are applied within EmberCollection, any tips on making a pop-over visible originating from one?

Had a short hangout with @krisselden and @raytiley. Here's what we discussed.

High level concerns

• Remove test dependency on ember-list-item-view class.
• Rewrite sortElementsByPosition to use getBoundingClientRect.
  • Set the test template <div>'s styles to "fill" the cell.

Per-test file concerns

• acceptance/list-view-test.js
  • not discussed yet. probably needs to be broken up into multiple files.
• unit/content-test.js
  • not discussed yet
• unit/multi-height-list-view-test.js
  • refactor to use integration tests instead of ListView/ListItemView.
  • remove "_cachedHeights" test
  • remove "_numChildViewsForViewport + _startingIndex" test
• unit/multi-view-list-view-test.js
  • remove file
• unit/num-of-child-views-for-viewport-test.j
  • remove file
• unit/recycling-tests.js
  • These tests need to be completely rewritten, probably using the
    {{component ...}} helper. We can try to use these existing tests as a guide.
• unit/scroll-top-test.js
  • not discussed yet
• unit/starting-index-test.js
  • not discussed yet
• unit/total-height-test.js
  • not discussed yet

With every command I have tried, I can't install this component in my ember-cli app.

More info here:
http://stackoverflow.com/questions/32852223/how-to-install-ember-collection-using-ember-cli/32852796

I am looking for a listview that is incremental and this is only for Emberjs right?
is this list view stable to use? or abandoned?

Ember-Collection should allow for easier integration of custom scrollbar js.
Right now we have to override EmberNativeScrollable to change the contentElement in didInsertElement and the element in scrollCheck and to override the default template of EmberCollection.

import Ember from 'ember';
import EmberNativeScrollable from 'ember-collection/components/ember-native-scrollable';

export default EmberNativeScrollable.extend({
  didInsertElement() {
    this.contentElement = this.element.firstElementChild.firstElementChild;
    this.applyStyle();
    this.applyContentSize();
    this.syncScrollFromAttr();
    this.startScrollCheck();
  },

  scrollCheck() {
   let element = this.element.firstElementChild;
   let scrollLeft = element.scrollLeft;
   let scrollTop = element.scrollTop;
   let scrollChanged = false;
   if (scrollLeft !== this._appliedScrollLeft || scrollTop !== this._appliedScrollTop) {
     scrollChanged = true;
     this._appliedScrollLeft = scrollLeft;
     this._appliedScrollTop = scrollTop;
   }

   let clientWidth = element.clientWidth;
   let clientHeight = element.clientHeight;
   let clientSizeChanged = false;
   if (clientWidth !== this._clientWidth || clientHeight !== this._clientHeight) {
     clientSizeChanged = true;
     this._clientWidth = clientWidth;
     this._clientHeight = clientHeight;
   }

   if (scrollChanged || clientSizeChanged) {
     Ember.run.join(this, function sendActionsFromScrollCheck(){
       if (scrollChanged) {
         this.sendAction('scrollChange', scrollLeft, scrollTop);
       }
       if (clientSizeChanged) {
         this.sendAction('clientSizeChange', clientWidth, clientHeight);
       }
     });
   }
 }
});

import EmberCollection from 'ember-collection/components/ember-collection';
import layout from './template';

export default EmberCollection.extend({
  layout: layout
});

{{#custom-native-scrollable content-size=_contentSize scroll-left=_scrollLeft scroll-top=_scrollTop scrollChange=(action "scrollChange") clientSizeChange=(action "clientSizeChange")}}
  {{#custom-scroller}}
    <div>
      {{~#each _cells as |cell|~}}
        <div style={{{cell.style}}}>{{yield cell.item cell.index this }}</div>
      {{~/each~}}
    </div>
  {{/custom-scroller}}
{{/custom-native-scrollable}}

Give and receive size objects instead of widths and heights

I was able to build the addon on my machine, but how do I vendor it?

Using leading underscores implies private to component and we are using it to share with a component family

The fact that ember-collection doesn't run in phantomjs tripped me up for a time; at the least the documentation should mention that, as phantomjs is standard config for ember-cli apps.

Better would be to get it to work in phantomjs, though; we need a requestAnimationFrame polyfill. I tried https://github.com/cagosta/requestAnimationFrame but couldn't get it to work. Any ideas?

I would like an action sliceDidChange (or something like that) where a user could learn what is actually being displayed by the ember-collection. When the collection changes, the callback gets called with "startingIndex" and "visibleCount" giving offset and limit of slice from collection being displayed. The use cases to for this include:

1. take an action when content is actually displayed
2. get more content when content is almost displayed

@BryanCrotaz and I need this functionality in https://github.com/shaunc/ember-grid to get content ready for display so we can have smooth scrolling. It would also be useful for smooth infinite scroll (request from server when near), or to lazily update content when its not ready yet.

[PR coming shortly]

When showing scrolling through a collection on iOS, new items are not added during momentum/inertia scrolling. As soon as the finger leaves the screen/mouse/trackpad, no new items are added. I'm assuming this has to do with scroll events not being fired once the screen is not being touched.

Is there any known fix for this issue?

Screencast showing it here: http://quick.as/o5pfqjqq

This only started happening after implementing ember-collection.

Any ideas? I'm not a CSS guy :-/

ember-native-scrollable sets overflow: scroll for mobile devices.

what is the best way to override it with: overflow-y: scroll; overflow-x: hidden; ?

Thanks.

Running 'npm test' locally fails starting with ember-beta. After running many tests, the first failure is below, with many tests failing in the same way afterwards.

ok 33 Chrome 45.0 - JSHint - .: test-helper.js should pass jshint
not ok 34 Chrome 45.0 - manipulate content: replacing the list content
    ---
        actual: >
            null
        message: >
            Died on test #1     at Object.test (http://localhost:7357/assets/test-support.js:2014:11)
                at http://localhost:7357/assets/dummy.js:3688:15
                at mod.state (http://localhost:7357/assets/vendor.js:150:29)
                at tryFinally (http://localhost:7357/assets/vendor.js:30:14)
                at requireModule (http://localhost:7357/assets/vendor.js:148:5)
                at Object.TestLoader.require (http://localhost:7357/assets/test-loader.js:29:9)
                at Object.TestLoader.loadModules (http://localhost:7357/assets/test-loader.js:21:18): this.init is not a function
        Log: |
    ...

I'm trying to define a collection with the helper percentage-columns-layout, but I'm getting the following error:

A helper named 'percentage-columns-layout' could not be found

Here is a repo that reproduces the problem (Ember 1.13.12, Ember-collection 1.0.0-alpha.5).
https://github.com/diogomafra/collection-test

@jonnii and @shaunc we made a #dev-ember-collection channel on the Ember community Slack, please join us https://ember-community-slackin.herokuapp.com/

Inline styles need to be whitelisted by Ember.String.htmlSafe

when i run ember build, it just stay on building..., the tmp folder increased continuously from 1 to 1.2G,
can't get build result.

hello,
i want use it ,but my web don't work on ember-cli, i use requirejs ,
can't you help to build like this link , thanks
https://rawgit.com/rondale-sc/list-view-dist/canary/list-view.js

Just trying to add it to a project doesn't work, installing with

ember install ember-collection

and then trying to use any of the default layouts gives me a:

ember.debug.js:15332 Uncaught Error: Assertion Failed: A helper named 'mixed-grid-layout' could not be found

Ember CLI version: 1.13.15
Ember version : 2.1.0

Currently, the requestAnimationFrame cycle will never be broken. We should break the cycle (i.e. "cancel" the callback) in willDestroyElement.

See here: https://github.com/emberjs/ember-collection/blob/8bd9cc34304f26a7c2352e5e85db0731907555f5/addon/components/ember-collection.js#L125-L126.

I am trying to pass a DS.RecordArray into the items attribute without luck.

For example the following should work.

//models/post.js
export default DS.Model.extend({
  name: DS.attr('string')
});

//routes/posts.js
export default Ember.Route.extend({
  model() {
    return this.store.peekAll('post');
  }
})


//templates/posts.hbs
{{#ember-collection items=model height=400 width=800 cell-layout=(fixed-grid-layout 400 50) as |row index| }}
  {{row.name}}
{{/ember-collection}}

I can make it work buy calling toArray() on the model or running it through a computed macro. I am working on a test but setting up ember data is not simple. I believe the structure is something like:

DS.RecordArray ==> DS.InternalModel ==> ?