Skip to content

Commit 569ea3e

Browse files
tobiutobiu
committed
#282 Covid.view.HelixContainer
1 parent 00eb2d3 commit 569ea3e

5 files changed

Lines changed: 376 additions & 8 deletions

File tree

‎apps/covid/view/GalleryContainer.mjs‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
import Gallery from './country/Gallery.mjs';
22
import {default as Panel} from '../../../src/container/Panel.mjs';
33
import {default as RangeField} from '../../../src/form/field/Range.mjs';
4-
import {default as Viewport} from '../../../src/container/Viewport.mjs';
4+
import {default as Container} from '../../../src/container/Viewport.mjs';
55

66
/**
77
* @class Covid.view.GalleryContainer
8-
* @extends Neo.tab.Container
8+
* @extends Neo.container.Base
99
*/
10-
class GalleryContainer extends Viewport {
10+
class GalleryContainer extends Container {
1111
static getConfig() {return {
1212
/**
1313
* @member {String} className='Covid.view.GalleryContainer'

‎apps/covid/view/HelixContainer.mjs‎

Lines changed: 367 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,367 @@
1+
import Helix from './country/Helix.mjs';
2+
import {default as Panel} from '../../../src/container/Panel.mjs';
3+
import {default as RangeField} from '../../../src/form/field/Range.mjs';
4+
import {default as Container} from '../../../src/container/Viewport.mjs';
5+
6+
/**
7+
* @class Covid.view.HelixContainer
8+
* @extends Neo.container.Base
9+
*/
10+
class HelixContainer extends Container {
11+
static getConfig() {return {
12+
/**
13+
* @member {String} className='Covid.view.HelixContainer'
14+
* @private
15+
*/
16+
className: 'Covid.view.HelixContainer',
17+
18+
autoMount: true,
19+
/**
20+
* @member {String[]} cls=['neo-helix-maincontainer', 'neo-viewport']
21+
*/
22+
cls: ['neo-helix-maincontainer', 'neo-viewport'],
23+
/**
24+
* @member {Neo.component.Helix|null} helix=null
25+
*/
26+
helix: null,
27+
/**
28+
* @member {Object|null} helixConfig=null
29+
*/
30+
helixConfig: null,
31+
layout: {ntype: 'hbox', align: 'stretch'},
32+
33+
items: [{
34+
ntype : 'container',
35+
flex : 1,
36+
layout: 'fit',
37+
items : []
38+
}, {
39+
module: Panel,
40+
cls : ['neo-controls-panel', 'neo-panel', 'neo-container'],
41+
layout: {ntype: 'vbox',align: 'stretch'},
42+
style : {backgroundColor: '#2b2b2b'},
43+
width : 250,
44+
45+
containerConfig: {
46+
flex : null,
47+
style: {overflowY: 'scroll'}
48+
},
49+
50+
itemDefaults: {
51+
ntype : 'rangefield',
52+
flex : '0 1 auto',
53+
labelWidth : '100px',
54+
style : {padding: '10px'},
55+
useInputEvent: true,
56+
57+
listeners: {
58+
change: function(data) {
59+
if (['deltaY', 'maxOpacity', 'minOpacity'].includes(this.name)) {
60+
data.value /= 100;
61+
}
62+
Neo.get('neo-helix-1')[this.name] = data.value;
63+
}
64+
}
65+
},
66+
67+
headers: [{
68+
dock: 'top',
69+
items: [{
70+
ntype: 'button',
71+
text : 'X',
72+
handler: function() {
73+
const panel = this.up('panel'),
74+
expand = panel.width === 40;
75+
76+
panel.width = expand ? 250 : 40;
77+
this.text = expand ? 'X' : '+';
78+
}
79+
}, {
80+
ntype: 'label',
81+
text : 'Helix Controls'
82+
}]
83+
}],
84+
85+
items: [{
86+
labelText: 'Translate X',
87+
maxValue : 2000,
88+
minValue : -2000,
89+
name : 'translateX',
90+
value : 400
91+
}, {
92+
labelText: 'Translate Y',
93+
maxValue : 2500,
94+
minValue : -2500,
95+
name : 'translateY',
96+
value : -350
97+
}, {
98+
labelText: 'Translate Z',
99+
maxValue : 4500,
100+
minValue : -4500,
101+
name : 'translateZ',
102+
value : -1500,
103+
listeners: {
104+
change: function(data) {
105+
Neo.get('neo-helix-1')[this.name] = data.value;
106+
},
107+
mounted: function(fieldId) {
108+
let field = Neo.get(fieldId);
109+
110+
Neo.get('neo-helix-1').on('changeTranslateZ', function(value) {
111+
value = Math.min(Math.max(value, this.minValue), this.maxValue);
112+
this.value = value;
113+
}, field);
114+
}
115+
}
116+
}, {
117+
labelText : 'Delta Y',
118+
labelAlign: 'top',
119+
maxValue : 600,
120+
minValue : -600,
121+
name : 'deltaY',
122+
value : 70
123+
}, {
124+
labelText: 'Rotate',
125+
minValue : -720,
126+
maxValue : 720,
127+
name : 'rotationAngle',
128+
value : 0,
129+
listeners: {
130+
change: function(data) {
131+
Neo.get('neo-helix-1')[this.name] = data.value;
132+
},
133+
mounted: function(fieldId) {
134+
let field = Neo.get(fieldId);
135+
136+
Neo.get('neo-helix-1').on('changeRotation', function(value) {
137+
value = Math.min(Math.max(value, this.minValue), this.maxValue);
138+
this.value = value;
139+
}, field);
140+
}
141+
}
142+
}, {
143+
labelText: 'Radius',
144+
maxValue : 3500,
145+
minValue : 900,
146+
name : 'radius',
147+
value : 1500
148+
}, {
149+
labelText: 'Perspective',
150+
minValue : 50,
151+
maxValue : 3000,
152+
name : 'perspective',
153+
value : 800
154+
}, {
155+
labelText: 'Item Angle',
156+
minValue : 1,
157+
maxValue : 36,
158+
name : 'itemAngle',
159+
value : 8
160+
}, {
161+
labelText: 'Max Opacity',
162+
name : 'maxOpacity',
163+
minValue : 0,
164+
maxValue : 100,
165+
value : 80 // todo [30, 80]
166+
}, {
167+
labelText: 'Min Opacity',
168+
name : 'minOpacity',
169+
minValue : 0,
170+
maxValue : 100,
171+
value : 30
172+
}, {
173+
ntype : 'button',
174+
text : 'Flip Items',
175+
listeners: {},
176+
style : {margin: '20px'},
177+
domListeners: {
178+
click: data => {
179+
const helix = Neo.get('neo-helix-1');
180+
helix.flipped = !helix.flipped;
181+
}
182+
}
183+
}, {
184+
ntype: 'label',
185+
text : 'Sort By:'
186+
}, {
187+
ntype : 'container',
188+
layout: {ntype: 'hbox', align: 'stretch'},
189+
style : {padding: '0'},
190+
items : [{
191+
ntype : 'container',
192+
layout: {ntype: 'vbox', align: 'stretch'},
193+
items : [{
194+
ntype : 'button',
195+
text : 'Cases',
196+
listeners: {},
197+
style : {margin: '10px', marginTop: '0'},
198+
199+
domListeners: {
200+
click: function() {
201+
Neo.get('neo-helix-1').store.sorters = [{
202+
property : 'cases',
203+
direction: 'DESC'
204+
}];
205+
}
206+
}
207+
}, {
208+
ntype : 'button',
209+
text : 'Deaths',
210+
listeners: {},
211+
style : {margin: '10px', marginBottom: '10px', marginTop: 0},
212+
213+
domListeners: {
214+
click: function() {
215+
Neo.get('neo-helix-1').store.sorters = [{
216+
property : 'deaths',
217+
direction: 'DESC'
218+
}];
219+
}
220+
}
221+
}, {
222+
ntype : 'button',
223+
text : 'Country',
224+
listeners: {},
225+
style : {margin: '10px', marginTop: 0},
226+
227+
domListeners: {
228+
click: function() {
229+
Neo.get('neo-helix-1').store.sorters = [{
230+
property : 'country',
231+
direction: 'ASC'
232+
}];
233+
}
234+
}
235+
}]
236+
}, {
237+
ntype : 'container',
238+
layout: {ntype: 'vbox', align: 'stretch'},
239+
items : [{
240+
ntype : 'button',
241+
text : 'Cases today',
242+
listeners: {},
243+
style : {margin: '10px', marginTop: '0'},
244+
245+
domListeners: {
246+
click: function() {
247+
Neo.get('neo-helix-1').store.sorters = [{
248+
property : 'todayCases',
249+
direction: 'DESC'
250+
}];
251+
}
252+
}
253+
}, {
254+
ntype : 'button',
255+
text : 'Deaths today',
256+
listeners: {},
257+
style : {margin: '10px', marginBottom: '10px', marginTop: 0},
258+
259+
domListeners: {
260+
click: function() {
261+
Neo.get('neo-helix-1').store.sorters = [{
262+
property : 'todayDeaths',
263+
direction: 'DESC'
264+
}];
265+
}
266+
}
267+
}, {
268+
ntype : 'button',
269+
text : 'Critical',
270+
listeners: {},
271+
style : {margin: '10px', marginTop: 0},
272+
273+
domListeners: {
274+
click: function() {
275+
Neo.get('neo-helix-1').store.sorters = [{
276+
property : 'critical',
277+
direction: 'DESC'
278+
}];
279+
}
280+
}
281+
}]
282+
}]
283+
}, {
284+
ntype : 'button',
285+
iconCls : 'fa fa-square',
286+
text : 'Follow Selection',
287+
listeners: {},
288+
domListeners: {
289+
click: function(data) {
290+
let me = this,
291+
helix = Neo.get('neo-helix-1');
292+
293+
if (me.iconCls === 'fa fa-square') {
294+
helix.followSelection = true;
295+
me.iconCls = 'fa fa-check-square';
296+
} else {
297+
helix.followSelection = false;
298+
me.iconCls = 'fa fa-square';
299+
}
300+
}
301+
},
302+
style: {
303+
margin : '20px',
304+
marginBottom: '10px'
305+
}
306+
}, {
307+
ntype: 'label',
308+
text : [
309+
'<b>Navigation Concept</b>',
310+
'<p>Click on an item to select it. Afterwards you can use the Arrow Keys to walk through the items.</p>',
311+
'<p>Hit the Space Key to rotate the currently selected item to the front.</p>',
312+
'<p>Hit the Enter Key to expand the currently selected item.</p>'
313+
].join(''),
314+
315+
style: {
316+
backgroundColor: '#323232',
317+
color : '#ddd',
318+
fontSize : '13px',
319+
margin : '10px',
320+
padding : '10px',
321+
whiteSpace : 'normal'
322+
}
323+
}, {
324+
ntype: 'label',
325+
cls : ['neo-link-color'],
326+
text : [
327+
'<b>Attribution</b>',
328+
'<p>App created with <a href="https://github.com/neomjs/neo">neo.mjs</a>.</p>',
329+
'<p>Data provided by <a href="https://github.com/NovelCOVID/API">NovelCOVID/API</a>.</p>',
330+
'<p>Icons made by <a href="https://www.flaticon.com/authors/freepik" title="Freepik">Freepik</a> from <a href="https://www.flaticon.com/" title="Flaticon"> www.flaticon.com</a>.</p>'
331+
].join(''),
332+
333+
style: {
334+
backgroundColor: '#323232',
335+
color : '#ddd',
336+
fontSize : '13px',
337+
margin : '10px',
338+
padding : '10px',
339+
whiteSpace : 'normal'
340+
}
341+
}]
342+
}]
343+
}}
344+
345+
/**
346+
*
347+
* @param {Object} config
348+
*/
349+
constructor(config) {
350+
super(config);
351+
352+
const me = this;
353+
354+
me.helix = Neo.create({
355+
module : Helix,
356+
id : 'neo-helix-1',
357+
reference: 'helix',
358+
...me.helixConfig || {}
359+
});
360+
361+
me.items[0].items.push(me.helix);
362+
}
363+
}
364+
365+
Neo.applyClassConfig(HelixContainer);
366+
367+
export {HelixContainer as default};

0 commit comments

Comments
 (0)