15

neo/GalleryContainer.mjs at dev · neomjs/neo · GitHub

 4 years ago
source link: https://github.com/neomjs/neo/blob/dev/apps/covid/view/GalleryContainer.mjs
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

Permalink

Join GitHub today

GitHub is home to over 50 million developers working together to host and review code, manage projects, and build software together.

Sign up
dev

neo/apps/covid/view/GalleryContainer.mjs / Jump to

Go to file

221 lines (204 sloc) 7.01 KB

import {default as Container} from '../../../src/container/Base.mjs';
import BoxLabel from '../../../src/component/BoxLabel.mjs';
import Gallery from './country/Gallery.mjs';
import GalleryContainerController from './GalleryContainerController.mjs';
import Panel from '../../../src/container/Panel.mjs';
import {default as RangeField} from '../../../src/form/field/Range.mjs';
/**
* @class Covid.view.GalleryContainer
* @extends Neo.container.Base
*/
class GalleryContainer extends Container {
static getConfig() {return {
/**
* @member {String} className='Covid.view.GalleryContainer'
* @protected
*/
className: 'Covid.view.GalleryContainer',
/**
* @member {String[]} cls=['neo-gallery-maincontainer', 'neo-viewport']
*/
cls: ['neo-gallery-maincontainer', 'neo-viewport'],
/**
* @member {Neo.controller.Component|null} controller=GalleryContainerController
*/
controller: GalleryContainerController,
/**
* @member {Neo.component.Gallery|null} gallery=null
*/
gallery: null,
/**
* @member {Object|null} galleryConfig=null
*/
galleryConfig: null,
/**
* @member {Object|null} layout={ntype: 'hbox', align: 'stretch'}
*/
layout: {ntype: 'hbox', align: 'stretch'},
/**
* @member {Object[]|null} items
*/
items: [{
ntype : 'container',
flex : 1,
layout: 'fit',
items : []
}, {
module : Panel,
cls : ['neo-configuration-panel', 'neo-panel', 'neo-container'],
layout : {ntype: 'vbox', align: 'stretch'},
reference: 'controls-panel',
style : {backgroundColor: '#2b2b2b'},
width : 260,
containerConfig: {
style: {overflowY: 'scroll'}
},
headers: [{
dock: 'top',
items: [{
ntype : 'button',
handler: 'onCollapseButtonClick',
text : 'X'
}, {
ntype: 'label',
text : 'Gallery Controls'
}]
}],
itemDefaults: {
flex : '0 1 auto',
labelWidth : '110px',
style : {padding: '10px'},
useInputEvent: true
},
items: [{
module : RangeField,
labelText: 'Translate X',
maxValue : 5000,
minValue : 0,
name : 'translateX',
value : 0,
listeners: {
change : 'onRangefieldChange',
mounted: 'onRangefieldMounted'
}
}, {
module : RangeField,
labelText: 'Translate Y',
maxValue : 1500,
minValue : -1500,
name : 'translateY',
value : 0,
listeners: {
change: 'onRangefieldChange'
}
}, {
module : RangeField,
labelText: 'Translate Z',
maxValue : 550,
minValue : -4500,
name : 'translateZ',
value : 0,
listeners: {
change : 'onRangefieldChange',
mounted: 'onRangefieldMounted'
}
}, {
module : RangeField,
labelText: 'Amount Rows',
maxValue : 15,
minValue : 1,
name : 'amountRows',
value : 3,
listeners: {
change: 'onRangefieldChange'
}
}, {
ntype : 'button',
handler: 'onOrderButtonClick',
text : 'Order by Row',
style : {margin: '20px'}
}, {
ntype: 'label',
text : 'Sort By:'
}, {
ntype : 'container',
layout: {ntype: 'hbox', align: 'stretch'},
style : {minHeight: '134px', padding: '0'},
items : [{
ntype : 'container',
layout: {ntype: 'vbox', align: 'stretch'},
itemDefaults: {
ntype : 'button',
handler: 'onSortButtonClick'
},
items: [{
field: 'cases',
text : 'Cases',
style: {margin: '10px', marginTop: '0'}
}, {
field: 'deaths',
text : 'Deaths',
style: {margin: '10px', marginBottom: '10px', marginTop: 0}
}, {
field: 'country',
text : 'Country',
style: {margin: '10px', marginTop: 0}
}, {
field: 'recovered',
text : 'Recovered',
style: {margin: '10px', marginTop: 0}
}]
}, {
ntype : 'container',
layout: {ntype: 'vbox', align: 'stretch'},
itemDefaults: {
ntype : 'button',
handler: 'onSortButtonClick'
},
items: [{
field: 'todayCases',
text : 'Cases today',
style: {margin: '10px', marginTop: '0'}
}, {
field: 'todayDeaths',
text : 'Deaths today',
style: {margin: '10px', marginBottom: '10px', marginTop: 0}
}, {
field: 'critical',
text : 'Critical',
style: {margin: '10px', marginBottom: '43px', marginTop: 0}
}]
}]
}, {
module: BoxLabel,
text : [
'<b>Navigation Concept</b>',
'<p>You can use the Arrow Keys to walk through the items.</p>'
].join('')
}]
}]
}}
/**
*
* @param {Object} config
*/
constructor(config) {
super(config);
const me = this;
me.gallery = Neo.create({
module : Gallery,
reference: 'gallery',
...me.galleryConfig || {}
});
me.items[0].items.push(me.gallery);
}
/**
*
*/
destroy(...args) {
this.gallery = null;
super.destroy(...args);
}
}
Neo.applyClassConfig(GalleryContainer);
export {GalleryContainer as default};

report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK