ascribe
/
onion
mirror of https://github.com/ascribe/onion.git
1
0
Fork 0
Code Issues Releases Wiki Activity

add start_from parameter to slide container

This commit is contained in:
Tim Daubenschütz 2015-08-19 15:30:48 +02:00
parent 406cee5bd3
commit 8a88f978c6
9 changed files with 102 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
js/components/ascribe_accordion_list/accordion_list.js
View File

@ -28,7 +28,7 @@ let AccordionList = React.createClass({
);
} else {
return (
<div className={this.props.className + ' ascribe-accordion-list-loading'}>
<div className={this.props.className + ' ascribe-loading-position'}>
{this.props.loadingElement}
</div>
);

71
js/components/ascribe_slides_container/slides_container.js
View File

@ -21,15 +21,22 @@ let SlidesContainer = React.createClass({
// handle queryParameters
let queryParams = this.getQuery();
let slideNum = -1;
let startFrom = -1;
if(queryParams && 'slide_num' in queryParams) {
slideNum = parseInt(queryParams.slide_num, 10);
}
// if slide_num is not set, this will be done in componentDidMount
// the query param 'start_from' removes all slide children before the respective number
if(queryParams && 'start_from' in queryParams) {
startFrom = parseInt(queryParams.start_from, 10);
}
return {
slideNum,
startFrom,
containerWidth: 0,
slideNum: slideNum,
historyLength: window.history.length
};
},
@ -54,9 +61,23 @@ let SlidesContainer = React.createClass({
window.addEventListener('resize', this.handleContainerResize);
},
componentDidUpdate() {
// check if slide_num was defined, and if not then default to 0
componentWillReceiveProps() {
let queryParams = this.getQuery();
// also check if start_from was updated
// This applies for example when the user tries to submit a already existing piece
// (starting from slide 1 for example) and then clicking on + NEW WORK
if(queryParams && !('start_from' in queryParams)) {
this.setState({
startFrom: -1
});
}
},
componentDidUpdate() {
let queryParams = this.getQuery();
// check if slide_num was defined, and if not then default to 0
this.setSlideNum(queryParams.slide_num);
},
@ -137,20 +158,34 @@ let SlidesContainer = React.createClass({
extractBreadcrumbs() {
let breadcrumbs = [];
ReactAddons.Children.map(this.props.children, (child) => {
breadcrumbs.push(child.props['data-slide-title']);
ReactAddons.Children.map(this.props.children, (child, i) => {
if(i >= this.state.startFrom) {
breadcrumbs.push(child.props['data-slide-title']);
}
});
return breadcrumbs;
},
customChildrenCount() {
let count = 0;
React.Children.forEach(this.props.children, (child, i) => {
if(i >= this.state.startFrom) {
count++;
}
});
return count;
},
renderBreadcrumbs() {
let breadcrumbs = this.extractBreadcrumbs();
let numOfChildren = React.Children.count(this.props.children);
let numOfChildren = this.customChildrenCount();
// check if every child/slide has a title,
// otherwise do not display the breadcrumbs at all
if(breadcrumbs.length === numOfChildren) {
// Also, if there is only one child, do not display the breadcrumbs
if(breadcrumbs.length === numOfChildren && breadcrumbs.length > 1 && numOfChildren > 1) {
let numSlides = breadcrumbs.length;
let columnWidth = Math.floor(12 / numSlides);
@ -187,13 +222,21 @@ let SlidesContainer = React.createClass({
// Also, a key is nice to have!
renderChildren() {
return ReactAddons.Children.map(this.props.children, (child, i) => {
return ReactAddons.addons.cloneWithProps(child, {
className: 'ascribe-slide',
style: {
width: this.state.containerWidth
},
key: i
});
// since the default parameter of startFrom is -1, we do not need to check
// if its actually present in the url bar, as it will just not match
if(i >= this.state.startFrom) {
return ReactAddons.addons.cloneWithProps(child, {
className: 'ascribe-slide',
style: {
width: this.state.containerWidth
},
key: i
});
} else {
// Abortions are bad mkay
return null;
}
});
},

2
js/components/piece_list.js
View File

@ -138,7 +138,7 @@ let PieceList = React.createClass({
this.transitionTo(this.getPathname(), {page: 1});
},
applyOrderBy(orderBy, orderAsc) {
applyOrderBy(orderBy) {
PieceListActions.fetchPieceList(this.state.page, this.state.pageSize, this.state.search,
orderBy, this.state.orderAsc, this.state.filterBy);
},

6
js/components/whitelabel/wallet/components/cyland/ascribe_buttons/cyland_submit_button.js
View File

@ -39,7 +39,11 @@ let CylandSubmitButton = React.createClass({
return (
<ButtonLink
to="register_piece"
query={{'slide_num': 1}}
query={{
'slide_num': 0,
'start_from': 1,
'piece_id': this.props.piece.id
}}
className={classNames('btn', 'btn-default', 'btn-xs', this.props.className)}>
{getLangText('Submit to Cyland')}
</ButtonLink>

8
js/components/whitelabel/wallet/components/cyland/ascribe_detail/cyland_piece_container.js
View File

@ -20,11 +20,8 @@ import FurtherDetailsFileuploader from '../../../../../ascribe_detail/further_de
import DetailProperty from '../../../../../ascribe_detail/detail_property';
import { mergeOptions } from '../../../../../../utils/general_utils';
import { getLangText } from '../../../../../../utils/lang_utils';
/**
* This is the component that implements resource/data specific functionality
*/
let CylandPieceContainer = React.createClass({
getInitialState() {
return mergeOptions(
@ -106,10 +103,11 @@ let CylandPieceDetails = React.createClass({
show={true}
defaultExpanded={true}>
<Form ref='form'>
{Object.keys(this.props.piece.extra_data).map((data) => {
{Object.keys(this.props.piece.extra_data).map((data, i) => {
let label = data.replace('_', ' ');
return (
<Property
key={i}
name={data}
label={label}
editable={false}>

21
js/components/whitelabel/wallet/components/cyland/ascribe_forms/cyland_additional_data_form.js
View File

@ -24,7 +24,7 @@ let CylandAdditionalDataForm = React.createClass({
getInitialState() {
return {
isUploadReady: false
isUploadReady: true
};
},
@ -64,6 +64,17 @@ let CylandAdditionalDataForm = React.createClass({
},
render() {
let artistBio = '';
let conceptualOverview = '';
if (Object.keys(this.props.piece).length !== 0 && Object.keys(this.props.piece.extra_data).length !== 0) {
let extraData = this.props.piece.extra_data;
artistBio = extraData.artist_bio;
conceptualOverview = extraData.conceptual_overview;
}
if(this.props.piece && this.props.piece.id) {
return (
<Form
@ -96,6 +107,7 @@ let CylandAdditionalDataForm = React.createClass({
rows={1}
editable={true}
placeholder={getLangText('Enter the artist\'s biography...')}
defaultValue={artistBio}
required="required"/>
</Property>
<Property
@ -106,6 +118,7 @@ let CylandAdditionalDataForm = React.createClass({
rows={1}
editable={true}
placeholder={getLangText('Enter a conceptual overview...')}
defaultValue={conceptualOverview}
required="required"/>
</Property>
<FurtherDetailsFileuploader
@ -119,7 +132,11 @@ let CylandAdditionalDataForm = React.createClass({
</Form>
);
} else {
return <span>First register the piece.</span>;
return (
<div className="ascribe-loading-position">
<img src={AppConstants.baseUrl + 'static/img/ascribe_animated_medium.gif'} />
</div>
);
}
}
});

9
js/components/whitelabel/wallet/components/cyland/cyland_register_piece.js
View File

@ -40,9 +40,10 @@ import { getLangText } from '../../../../../utils/lang_utils';
import { mergeOptions } from '../../../../../utils/general_utils';
import { getAclFormMessage } from '../../../../../utils/form_utils';
let CylandRegisterPiece = React.createClass({
mixins: [Router.Navigation],
mixins: [Router.Navigation, Router.State],
getInitialState(){
return mergeOptions(
@ -63,6 +64,12 @@ let CylandRegisterPiece = React.createClass({
WhitelabelStore.listen(this.onChange);
UserActions.fetchCurrentUser();
WhitelabelActions.fetchWhitelabel();
let queryParams = this.getQuery();
if(queryParams && 'piece_id' in queryParams) {
PieceActions.fetchOne(queryParams.piece_id);
}
},
componentWillUnmount() {

7
sass/ascribe_accordion_list.scss
View File

@ -65,7 +65,7 @@ $ascribe-accordion-list-font: 'Source Sans Pro';
overflow: hidden;
text-overflow: ellipsis;
}
a {
a:not(.btn) {
color: #666;
}
}
@ -79,11 +79,6 @@ $ascribe-accordion-list-font: 'Source Sans Pro';
}
}
.ascribe-accordion-list-loading {
padding-top: 30%;
padding-bottom: 30%;
}
.ascribe-accordion-list-loading img {
display: block;
margin: auto;

8
sass/main.scss
View File

@ -427,4 +427,10 @@ hr {
&:hover {
color: #000;
}
}
}
.ascribe-loading-position {
padding-top: 30%;
padding-bottom: 30%;
text-align: center;
}