1 | (function() {
|
2 | 'use strict';
|
3 |
|
4 | window.Ractive.controller('pl-grouped-list', function(component, data, el, config, done) {
|
5 |
|
6 | data.lvl = 0;
|
7 | data.level = function(keypath) {
|
8 | return keypath.split('items').length - 2;
|
9 | };
|
10 |
|
11 | var GroupedList = component({
|
12 | plName: 'pl-grouped-list',
|
13 | data: data
|
14 | }),
|
15 | _$el = {
|
16 | window: $(window),
|
17 | list: $(GroupedList.el).find('.pl-grouped-list'),
|
18 | content: $(GroupedList.el).find('.pl-grouped-list-content')
|
19 | };
|
20 |
|
21 | function _refresh() {
|
22 | GroupedList.fire('refresh');
|
23 | }
|
24 |
|
25 | GroupedList.on('refresh', function() {
|
26 | var realScrollTop = _$el.list.get(0).scrollTop,
|
27 | $lastItemMoved = null;
|
28 |
|
29 | _$el.content.children().each(function() {
|
30 | var scrollTop = realScrollTop,
|
31 | $item = $(this),
|
32 | level = $item.data('level');
|
33 |
|
34 | $item
|
35 | .removeClass('grouped-list-fixed grouped-list-fixed-last')
|
36 | .css('top', '');
|
37 |
|
38 | var top = $item.position().top;
|
39 |
|
40 | if (level !== 0) {
|
41 | var $prev = $($item.prevAll('.level-' + (level - 1)).get(0));
|
42 | scrollTop = Math.max(top, $prev.position().top + $prev.outerHeight(true));
|
43 | }
|
44 |
|
45 | if (top < scrollTop) {
|
46 | var height = $item.outerHeight(true),
|
47 | $next = $item.find('~ .grouped-list-item').filter(function() {
|
48 | return $(this).data('level') <= level;
|
49 | });
|
50 | $next = $next.length ? $($next.get(0)) : null;
|
51 | var nextTop = $next ? $next.position().top - height : _$el.content.outerHeight() - height;
|
52 |
|
53 | $item.css({
|
54 | 'z-index': 9999 - level,
|
55 | top: Math.min(scrollTop, nextTop) - top
|
56 | });
|
57 |
|
58 | if (nextTop > scrollTop) {
|
59 | $item.addClass('grouped-list-fixed');
|
60 | $lastItemMoved = $item;
|
61 | GroupedList.fire('fixed', {
|
62 | item: $item
|
63 | });
|
64 | }
|
65 | }
|
66 | });
|
67 |
|
68 | if ($lastItemMoved) {
|
69 | $lastItemMoved.addClass('grouped-list-fixed-last');
|
70 | GroupedList.fire('lastFixed', {
|
71 | item: $lastItemMoved
|
72 | });
|
73 | }
|
74 | });
|
75 |
|
76 | _$el.list.scroll(_refresh);
|
77 |
|
78 | _$el.window.resize(_refresh);
|
79 |
|
80 | GroupedList.on('teardown', function() {
|
81 | _$el.window.off('resize', _refresh);
|
82 | });
|
83 |
|
84 | GroupedList.observe('items', _refresh);
|
85 |
|
86 | _refresh();
|
87 |
|
88 | done();
|
89 | });
|
90 |
|
91 | })();
|