ascribe/onion
1
0
Fork 0
mirror of https://github.com/ascribe/onion.git synced 2025-02-14 21:10:27 +01:00
Code Issues Releases Wiki Activity

Merge branch 'master' of bitbucket.org:ascribe/onion

Browse Source
This commit is contained in:
vrde 2015-05-20 16:19:44 +02:00
commit d14e56f223
11 changed files with 215 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
css/main.css Normal file
View File

@ -0,0 +1,3 @@
.ascribe-table-header-column {
font-weight: bold;
}

5
index.html
View File

@ -5,10 +5,11 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>ascribe</title> <title>ascribe</title>
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<link ref="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"></link> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"></link>
<link rel="stylesheet" href="css/main.css"></link>
</head> </head>
<body> <body>
<div id="main" class="container-fluid"></div> <div id="main" class="container"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

25
js/components/piece_list.js
View File

@ -4,7 +4,10 @@ import AltContainer from 'alt/AltContainer';
import PieceListStore from '../stores/piece_list_store'; import PieceListStore from '../stores/piece_list_store';
import PieceListActions from '../actions/piece_list_actions'; import PieceListActions from '../actions/piece_list_actions';
import Table from './table'; import Table from './table';
import TableItemImg from './table_item_img';
import TableItemText from './table_item_text';
let Link = Router.Link; let Link = Router.Link;
@ -15,9 +18,29 @@ let PieceList = React.createClass({
}, },
render() { render() {
// TODO:
// Specifiy how a TableItemX should look like
let columnMap = {
'thumbnail': {
'displayName': 'Thumbnail',
'displayType': TableItemImg,
'rowWidth': 2
},
'artist_name': {
'displayName': 'Artist',
'displayType': TableItemText,
'rowWidth': 3
},
'title': {
'displayName': 'Title',
'displayType': TableItemText,
'rowWidth': 6
}
};
return ( return (
<AltContainer store={PieceListStore}> <AltContainer store={PieceListStore}>
<Table /> <Table class="piecesTable" columnMap={columnMap} />
</AltContainer> </AltContainer>
); );
} }

34
js/components/table.js
View File

@ -1,20 +1,32 @@
import React from 'react'; import React from 'react';
import TableItem from './table_item'; import TableItem from './table_item';
import TableHeader from './table_header';
let Table = React.createClass({ let Table = React.createClass({
propTypes: {
columnMap: React.PropTypes.object.isRequired
},
render() { render() {
return (
<ul> if(this.props.itemList && this.props.itemList.length > 0) {
{this.props.pieceList.map((piece, i) => {
return ( return (
<li key={i}> <div>
<TableItem piece={piece} /> <TableHeader columnMap={this.props.columnMap}/>
</li> {this.props.itemList.map((item, i) => {
); return (
})} <TableItem columnMap={this.props.columnMap} columnContent={item} key={i} />
</ul> );
); })}
</div>
);
} else {
return (
<p>Loading</p>
);
}
} }
}); });

36
js/components/table_header.js Normal file
View File

@ -0,0 +1,36 @@
import React from 'react';
import TableColumnMixin from '../mixins/table_column_mixin';
import GeneralUtils from '../utils/general_utils';
let TableHeader = React.createClass({
mixins: [TableColumnMixin],
propTypes: {
columnMap: React.PropTypes.object.isRequired
},
render() {
let columnMapValuesList = GeneralUtils.valuesOfObject(this.props.columnMap);
return (
<div className="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<div className="row">
{columnMapValuesList.map((val, i) => {
let columnClass = this.calcColumnClasses(this.props.columnMap, i);
return (
<div className={columnClass + ' ascribe-table-header-column'} key={i}>
{val.displayName}
</div>
);
})}
</div>
</div>
);
}
});
export default TableHeader;

53
js/components/table_item.js
View File

@ -1,14 +1,55 @@
import React from 'react'; import React from 'react';
import TableColumnMixin from '../mixins/table_column_mixin';
import TableItemImg from './table_item_img';
import TableItemText from './table_item_text';
let TableItem = React.createClass({ let TableItem = React.createClass({
mixins: [TableColumnMixin],
// ToDo: Specify that every columnMap should look like this:
// {
// 'name-of-the-data-point': {
// 'displayName': String,
// 'displayType': ReactComponent,
// 'rowWidth': number
// }
//
// }
propTypes: {
columnMap: React.PropTypes.object.isRequired,
columnContent: React.PropTypes.object.isRequired
},
render() { render() {
let columnContent = this.props.columnContent;
let columnMapKeysList = Object.keys(this.props.columnMap);
/**
* An element in the Table can have a certain display_type.
* A display_type is just
*/
let calcColumnElementContent = () => {
return columnMapKeysList.map((key, i) => {
let TypeElement = this.props.columnMap[key].displayType;
let columnClass = this.calcColumnClasses(this.props.columnMap, i);
return (
<div className={columnClass} key={i}>
<TypeElement content={this.props.columnContent[key]} width="50" />
</div>
);
});
};
return ( return (
<ul> <div className="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<li>something</li> <div className="row">
<li></li> {calcColumnElementContent()}
<li></li> </div>
<li></li> </div>
</ul>
); );
} }
}); });

18
js/components/table_item_img.js Normal file
View File

@ -0,0 +1,18 @@
import React from 'react';
/**
* This could be enhanced further by specifying an optional description for example
*/
let TableItemImg = React.createClass({
propTypes: {
content: React.PropTypes.string.isRequired,
},
render() {
return (
<img src={this.props.content} width="50" />
);
}
});
export default TableItemImg;

17
js/components/table_item_text.js Normal file
View File

@ -0,0 +1,17 @@
import React from 'react';
let TableItemText = React.createClass({
propTypes: {
content: React.PropTypes.string.isRequired
},
render() {
return (
<span>
{this.props.content}
</span>
);
}
});
export default TableItemText;

23
js/mixins/table_column_mixin.js Normal file
View File

@ -0,0 +1,23 @@
import GeneralUtils from '../utils/general_utils';
let TableColumnMixin = {
/**
* Generates the bootstrap grid column declarations automatically using
* the columnMap.
*/
calcColumnClasses(obj, i) {
let bootstrapClasses = ['col-xs-', 'col-sm-', 'col-md-', 'col-lg-'];
let rowData = GeneralUtils.valuesOfObject(obj);
let listOfRowValues = rowData.map((val) => val.rowWidth );
let numOfColumns = GeneralUtils.sumNumList(listOfRowValues);
if(numOfColumns > 12) {
throw new Error('Bootstrap has only 12 columns to assign. You defined ' + numOfColumns + '. Change this in the columnMap you\'re passing to the table.')
} else {
return bootstrapClasses.join( listOfRowValues[i] + ' ') + listOfRowValues[i];
}
}
};
export default TableColumnMixin;

6
js/stores/piece_list_store.js
View File

@ -3,12 +3,12 @@ import PieceListActions from '../actions/piece_list_actions';
class PieceListStore { class PieceListStore {
constructor() { constructor() {
this.pieceList = []; this.itemList = []; // rename this to pieceList after figuring out AltContainer transform
this.bindActions(PieceListActions); this.bindActions(PieceListActions);
} }
onUpdatePieceList(pieceList) { onUpdatePieceList(itemList) {
this.pieceList = pieceList; this.itemList = itemList;
} }
}; };

18
js/utils/general_utils.js
View File

@ -16,6 +16,24 @@ let GeneralUtils = {
}); });
return obj; return obj;
},
/**
* Returns the values of an object.
*/
valuesOfObject(obj) {
return Object
.keys(obj)
.map(key => obj[key]);
},
/**
* Sums up a list of numbers. Like a Epsilon-math-kinda-sum...
*/
sumNumList(l) {
let sum = 0;
l.forEach((num) => sum += parseFloat(num) || 0);
return sum;
} }
}; };