rowCollection.js
3.74 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
/**
* Row collection (sortable) view.
*/
define( ['views/rowItem'], function( RowItemView ) {
var view = Marionette.CollectionView.extend( {
tagname: 'div',
className: 'layouts-row-collection layouts-droppable nf-field-type-droppable nf-fields-sortable',
childView: RowItemView,
reorderOnSort: true,
getEmptyView: function() {
return nfRadio.channel( 'views' ).request( 'get:mainContentEmpty' );
},
initialize: function() {
this.collection.on( 'add', this.maybeInitSortable, this );
},
onBeforeDestroy: function() {
this.collection.off( 'add', this.maybeInitSortable );
},
/**
* Remove any rows that are completely empty.
*
* @since 3.0
* @param {Backbone.Model} rowModel
* @param {int} index
* @param {Backbone.Collection} rowCollection [description]
* @return {bool} Should this row be output in the collection view?
*/
filter: function( rowModel, index, rowCollection ) {
var show = false;
_.each( rowModel.get( 'cells' ).models, function( cell ) {
if ( 0 != cell.get( 'fields' ).length ) {
show = true;
}
} );
return show;
},
/**
* When we render this view, init our rows collection sortable.
*
* @since 3.0
* @return void
*/
onRender: function() {
this.maybeInitSortable();
},
maybeInitSortable: function() {
if ( 0 < this.collection.models.length ) {
this.initSortable();
}
},
initSortable: function() {
var that = this;
// Init our sortable.
jQuery( this.el ).sortable( {
helper: 'clone',
handle: '.gutter:first',
items: '.layouts-row',
cancel: '.layouts-cell',
tolerance: 'pointer',
placeholder: 'nf-fields-sortable-placeholder',
appendTo: '#nf-main',
grid: [ 5, 5 ],
/**
* When we start dragging an item, trigger an event.
*
* @since 3.0
* @param object e event
* @param object ui jQuery UI element
* @return void
*/
start: function( e, ui ) {
nfRadio.channel( 'layouts' ).trigger( 'start:rowsSortable', e, ui, that, this );
},
/**
* When we stop dragging an item, trigger an event.
*
* @since 3.0
* @param object e event
* @param object ui jQuery UI element
* @return void
*/
stop: function( e, ui ) {
nfRadio.channel( 'layouts' ).trigger( 'stop:rowsSortable', e, ui, that, this );
},
/**
* When we drag an item over our sortable, trigger an event.
*
* @since 3.0
* @param object e event
* @param object ui jQuery UI element
* @return void
*/
over: function( e, ui ) {
nfRadio.channel( 'layouts' ).trigger( 'over:rowsSortable', e, ui, that, this );
},
/**
* When we move an item off of our sortable, trigger an event.
*
* @since 3.0
* @param object e event
* @param object ui jQuery UI element
* @return void
*/
out: function( e, ui ) {
nfRadio.channel( 'layouts' ).trigger( 'out:rowsSortable', e, ui, that, this );
},
/**
* When we drop an item on the sortable, trigger an event.
*
* @since 3.0
* @param object e event
* @param object ui jQuery UI element
* @return void
*/
receive: function( e, ui ) {
if ( ui.item.dropping ) return;
nfRadio.channel( 'layouts' ).trigger( 'receive:rowsSortable', e, ui, that, this );
},
/**
* When we drop an item onto our sortable that changes our item order, trigger an event.
*
* @since 3.0
* @param object e event
* @param object ui jQuery UI element
* @return void
*/
update: function( e, ui ) {
nfRadio.channel( 'layouts' ).trigger( 'update:rowsSortable', e, ui, that, this );
}
} );
}
} );
return view;
} );