senaduka/old-ribica
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

finnaly created a carousel

Browse Source
This commit is contained in:
Senad Uka
2015-01-28 07:16:48 +01:00
parent 1445e8f702
commit 906c29b22f
8 changed files with 352 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
front-ui/app/components/items/itemMultiMediaDescriptions.js
View File

@@ -15,9 +15,6 @@ var ItemMultimediaDescriptions = React.createClass({
);
}
//getInitialState: function () {
//return { descriptions: [] };
//}
});

60
front-ui/app/components/items/itemWithDetailsPage.js
View File

@@ -1,8 +1,8 @@
var React = require('react'),
ItemMultiMediaDescriptions = require('./itemMultiMediaDescriptions'),
ItemActions = require('../../actions/itemActions'),
NavigationStore = require('../../stores/NavigationStore'),
ItemStore = require('../../stores/itemStore');
Carousel = require('../shared/carousel'),
ItemDetailsActions = require('../../actions/itemDetailsActions'),
NavigationStore = require('../../stores/navigationStore'),
ItemDetailsStore = require('../../stores/itemDetailsStore');
var Router = require('react-router');
@@ -13,47 +13,59 @@ var ItemWithDetailsPage = React.createClass({
return (
<div className="item-with-details row-fluid center">
<div className="span3">
<div className="item-with-details row-fluid center">
<div className="span3">
<h3> {this.state.item.get('name')} </h3>
<div>
<div className='h4'> {this.state.item.get('list_price')} KM</div>
<div> {this.state.item.get('description')}</div>
<div className='h4'> {this.state.item.get('list_price')} KM</div>
<div> {this.state.item.get('description')}</div>
</div>
<ItemMultiMediaDescriptions descriptions={this.state.item.get('multi_media_descriptions')} />
</div>
<div className="span4">
<Carousel images={this.state.images}
selected={this.state.currentImage}
onClickLeft={this.onClickLeft}
onClickRight={this.onClickRight}
onSelectImage={this.onSelectImage} />
</div>
<div className="span4">
quantitative descriptions
</div>
</div>
) ;
</div>
);
},
// Add change listeners to stores
componentDidMount: function() {
ItemStore.addChangeListener(this._onChange);
ItemDetailsStore.addChangeListener(this._onChange);
NavigationStore.addChangeListener(this._onChange);
ItemActions.loadItemWithDetails();
ItemDetailsActions.loadItemWithDetails();
},
onClickLeft: function() {
ItemDetailsActions.previousCarouselImage();
},
onClickRight: function() {
ItemDetailsActions.nextCarouselImage();
},
onSelectImage: function(i) {
ItemDetailsActions.selectCarouselImage(i);
},
_onChange: function () {
if (this.isMounted()) {
this.setState({
item: ItemStore.getLoadedItemWithDetails()
});
this.setState(ItemDetailsStore.getState());
}
},
getInitialState: function () {
return {
item : ItemStore.getLoadedItemWithDetails()
};
return ItemDetailsStore.getState();
}
});