From 8a2dccd11672eb50c32b8551ec25d84383176914 Mon Sep 17 00:00:00 2001 From: Edin Dazdarevic Date: Sun, 25 Jan 2015 10:36:13 +0100 Subject: [PATCH] introduced react router --- .../app/components/sectionsListComponent.js | 113 +++++++++++++++++- front-ui/app/css/main.css | 15 +++ front-ui/app/rapp.js | 96 +++++++++++++++ front-ui/app/ribica.js | 4 +- front-ui/app/router.js | 10 +- front-ui/build/index.html | 2 + front-ui/package.json | 3 +- 7 files changed, 235 insertions(+), 8 deletions(-) create mode 100644 front-ui/app/rapp.js diff --git a/front-ui/app/components/sectionsListComponent.js b/front-ui/app/components/sectionsListComponent.js index 7421f4a..3757a0a 100644 --- a/front-ui/app/components/sectionsListComponent.js +++ b/front-ui/app/components/sectionsListComponent.js @@ -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 ( +
+ +
+ ); + } +}); +/* var SectionItem = React.createClass({ subCatClicked: function() { alert('you clicked on subcategory'); @@ -57,5 +167,6 @@ var SectionsListComponent = React.createClass({ ); } }); +*/ module.exports = SectionsListComponent; diff --git a/front-ui/app/css/main.css b/front-ui/app/css/main.css index 8d3973a..cffc6a7 100644 --- a/front-ui/app/css/main.css +++ b/front-ui/app/css/main.css @@ -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; +} diff --git a/front-ui/app/rapp.js b/front-ui/app/rapp.js new file mode 100644 index 0000000..0fe471c --- /dev/null +++ b/front-ui/app/rapp.js @@ -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 ( + +
+ +
+

Ribica.ba

+
+
+ +
+
+ + + +
+ +
+ + ); + } +}); + +var StartPage = React.createClass({ + render : function() { + return ( +
+ +
+ left content +
+
+

Ribica Start Page

+ +
+
+ ) + } +}); + +var ByCat = React.createClass({ + render: function() { + return ( +
By CAtegoriy stuff
+ ); + } + +}); + +var BySection = React.createClass({ + mixins: [Router.State], + render : function() { + return (
+ +
+ left content +
+
+

Welcome to section {this.getParams().id}

+
+
) + } +}); + +var routes = ( + + + + + + + + + + + ); + +Router.run(routes, function(Handler) { + React.render(, document.body); +}); diff --git a/front-ui/app/ribica.js b/front-ui/app/ribica.js index 84ac24c..e2a380f 100644 --- a/front-ui/app/ribica.js +++ b/front-ui/app/ribica.js @@ -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 } diff --git a/front-ui/app/router.js b/front-ui/app/router.js index 8ad074c..12234a1 100644 --- a/front-ui/app/router.js +++ b/front-ui/app/router.js @@ -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 + /*}*/ }); diff --git a/front-ui/build/index.html b/front-ui/build/index.html index 9aa49cc..39f3795 100644 --- a/front-ui/build/index.html +++ b/front-ui/build/index.html @@ -5,6 +5,7 @@ +