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

introduced react router

Browse Source
This commit is contained in:
Edin Dazdarevic
2015-01-25 10:36:13 +01:00
parent abb30414e2
commit 8a2dccd116
7 changed files with 235 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

113
front-ui/app/components/sectionsListComponent.js
View File

@@ -1,7 +1,117 @@
var React = require('react'),
SectionCollection = require('../models/sectionCollection'),
Section = require('../models/section');
Section = require('../models/section'),
Backbone = require('backbone');
var Navigation = require('react-router').Navigation;
Backbone.$ = $;
var SectionsListComponent = React.createClass({
mixins : [Navigation],
getInitialState: function() {
return {
sections : [],
hoveredSection : ''
};
},
componentDidMount: function() {
var sections = new SectionCollection();
sections.fetch({success: function() {
console.log('Loaded sections:' , sections);
if(this.isMounted()) {
this.setState({
sections: sections.models
});
}
}.bind(this)});
},
onMouseOver: function(section) {
console.log('mouse over!', section);
this.setState({
hoveredSection: section.get('id')
});
},
onMouseOut: function() {
this.setState({
hoveredSection : ''
});
},
onSectionClick: function(section) {
//alert('clicked on section:'+ section.get('name'));
this.transitionTo('/sekcija/'+ section.get('id') + '/' + section.get('name'));
this.setState({
hoveredSection : ''
});
return false;
},
onCategoryClick: function(category, section) {
this.transitionTo('/sekcija/' + section.get('name') +'/kategorija/'+ category.id + '/' + category.name);
this.setState({
hoveredSection: ''
});
console.log('category', category.id);
return false;
},
onSubcategoryClick: function(subcategory) {
return false;
},
render: function() {
var self = this;
var style = {
position: 'relative'
};
var abStyle = {
position: 'absolute'
};
return (
<div>
<ul className='nav nav-pills'>
{this.state.sections.map(function(section) {
return (
<li key={section.get('id')} role='presentation' style={style}>
<a href="#" onClick={self.onSectionClick.bind(self, section)} onMouseOver={self.onMouseOver.bind(self, section)}>
{ section.get('name') }
</a>
<div style={abStyle} className={section.get('id') !== self.state.hoveredSection ? "hide section-cat-list": "section-cat-list"} >
<ul onMouseLeave={self.onMouseOut.bind(self)} >
{section.get('categories').map(function(category) {
return (
<li key={category.id}>
<span onClick={self.onCategoryClick.bind(self, category, section)}>{category.name}</span>
<ul>
{category.sub_categories.map(function(subCategory) {
return (
<li key={subCategory.id}>
{subCategory.name}</li>
)
})}
</ul>
</li>
)
})}
</ul>
</div>
</li>
)
})}
</ul>
</div>
);
}
});
/*
var SectionItem = React.createClass({
subCatClicked: function() {
alert('you clicked on subcategory');
@@ -57,5 +167,6 @@ var SectionsListComponent = React.createClass({
);
}
});
*/
module.exports = SectionsListComponent;

15
front-ui/app/css/main.css
View File

@@ -1,3 +1,18 @@
body {
background-image: url(http://diapers.q-assets.com/images/body_bg.gif?ReleaseVersion=201512217123);
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}
.container {
background-color: #fff;
border: 1px solid black;
}
.section-cat-list {
background-color: white;
padding: 10px;
font-size: 15px;
width: 200px;
z-index: 10000;
border: 1px solid silver;
}

96
front-ui/app/rapp.js Normal file
View File

@@ -0,0 +1,96 @@
var React = require('react');
var ItemList = require('./components/itemList');
var Router = require('react-router'),
Route = Router.Route, DefaultRoute = Router.DefaultRoute;
var RouteHandler = Router.RouteHandler;
var Navigation = Router.Navigation;
var SectionsListComponent = require('./components/sectionsListComponent');
var RApp = React.createClass({
render: function() {
return (
<div className="container">
<div className='page-header'>
<h1>Ribica.ba</h1>
</div>
<div className='row'>
<div className='col-md-12' id='header'>
<SectionsListComponent />
</div>
</div>
<div className='row'>
<RouteHandler />
</div>
</div>
);
}
});
var StartPage = React.createClass({
render : function() {
return (
<div>
<div className='col-md-2'>
left content
</div>
<div className='col-md-10'>
<h2>Ribica Start Page</h2>
<RouteHandler />
</div>
</div>
)
}
});
var ByCat = React.createClass({
render: function() {
return (
<div>By CAtegoriy stuff</div>
);
}
});
var BySection = React.createClass({
mixins: [Router.State],
render : function() {
return ( <div>
<div className='col-md-2'>
left content
</div>
<div className='col-md-10'>
<h2> Welcome to section {this.getParams().id} </h2>
</div>
</div> )
}
});
var routes = (
<Route name='app' path='/' handler={RApp}>
<Route name='artikal' handler={ItemList} />
<Route name='sekcija' path='sekcija/:id/:name' handler={BySection}>
</Route>
<Route name='byCat' path="sekcija/:sekcijaName/kategorija/:id/*" handler={ByCat} />
<DefaultRoute handler={StartPage}/>
</Route>
);
Router.run(routes, function(Handler) {
React.render(<Handler />, document.body);
});

4
front-ui/app/ribica.js
View File

@@ -1,7 +1,9 @@
var Backbone = require('backbone');
var app = require('./app');
var rapp = require('./rapp');
Backbone.$ = $;
module.exports = {
App : app
App : app,
RApp: rapp
}

10
front-ui/app/router.js
View File

@@ -3,11 +3,11 @@ var Backbone = require('backbone'),
ItemDetailsController = require('./controllers/itemDetailsController');
var Router = Backbone.Router.extend({
routes : {
"home" : HomeController,
"artikal/:id/:slug": ItemDetailsController,
"*default": HomeController
}
/* routes : {*/
//"home" : HomeController,
//"artikal/:id/:slug": ItemDetailsController,
//"*default": HomeController
/*}*/
});

2
front-ui/build/index.html
View File

@@ -5,6 +5,7 @@
<meta name="fragment" content="!">
</head>
<body>
<!--
<div class="container">
<div class='page-header'>
@@ -27,6 +28,7 @@
</div>
</div>
-->
<script src='ribica.js' type='text/javascript'></script>
<script>
RIBICA.App.bootstrap();

3
front-ui/package.json
View File

@@ -23,6 +23,7 @@
"react": "~0.12.2",
"backbone": "~1.1.2",
"bootstrap": "~3.3.1",
"jquery": "~2.1.3"
"jquery": "~2.1.3",
"react-router": "~0.11.6"
}
}