ascribe/onion
1
0
Fork 0
mirror of https://github.com/ascribe/onion.git synced 2025-01-03 18:35:09 +01:00
Code Issues Releases Wiki Activity

Cleanup code

Browse Source
This commit is contained in:
Tim Daubenschütz 2015-10-15 11:17:16 +02:00
parent 2c8f262826
commit d77bdb25a5
13 changed files with 201 additions and 227 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

145
js/components/ascribe_buttons/acl_information.js Normal file
View File

@ -0,0 +1,145 @@
'use strict';
import React from 'react';
import classnames from 'classnames';
import Button from 'react-bootstrap/lib/Button';
import { InformationTexts } from '../../constants/information_text';
import { replaceSubstringAtIndex, sanitize } from '../../utils/general_utils';
import { intersectAcls } from '../../utils/acl_utils';
import { getLangText } from '../../utils/lang_utils';
let AclInformation = React.createClass({
propTypes: {
verbs: React.PropTypes.arrayOf(React.PropTypes.string),
aim: React.PropTypes.string.isRequired,
aclObject: React.PropTypes.object
},
getInitialState() {
return { isVisible: false };
},
componentDidMount() {
this.dropdownButtonStyle = {
background: 'none',
color: 'black',
padding: 0,
border: 'none'
};
this.dropdownListStyle = {
textAlign: 'justify',
width: '80.8%',
border: '1px solid #CCC',
backgroundColor: 'white',
padding: '0.5em'
};
},
onOff() {
if(!this.state.isVisible) {
this.setState({ isVisible: true });
}
else {
this.setState({ isVisible: false });
}
},
getInfoText(title, info, example){
let titleStyle = {
color: '#02B6A3',
fontSize: '11px',
lineHeight: '3px'
};
let infoStyle = {
color: '#333333',
fontSize: '11px',
lineHeight: '3px'
};
let exampleStyle = {
color: '#B2B2B2',
fontSize: '11px',
lineHeight: '3px'
};
let paragraphStyle = {
margin: '0.1em',
lineHeight: '15px',
align: 'justify'
};
let aim = this.props.aim;
if (aim) {
if (aim === 'form') {
return (
<p style={paragraphStyle}>
<span style={infoStyle}> {replaceSubstringAtIndex(info.slice(2), 's ', ' ')} <br/> </span>
<span style={exampleStyle}> {example} </span>
</p>
);
}
else if (aim === 'button') {
return (
<p style={paragraphStyle}><span style={titleStyle}> {title} </span>
<span style={infoStyle}> {info} <br/> </span>
<span style={exampleStyle}> {example} </span>
</p>
);
}
}
else {
console.log('Aim is required when you want to place information text');
}
},
produceInformationBlock() {
const { titles, informationSentences, exampleSentences } = InformationTexts;
const {verbs, aim } = this.props;
// sorting is not needed, as `this.props.verbs` takes care of sorting already
// So we assume a user of `AclInformationButton` puts an ordered version of
// `verbs` into `propTypes`
let verbsToDisplay = [];
if(aim === 'form') {
verbsToDisplay = verbsToDisplay.concat(verbs);
} else if(aim === 'button' && this.props.aclObject) {
const { aclObject } = this.props;
const sanitizedAclObject = sanitize(aclObject, (val) => !val);
verbsToDisplay = verbsToDisplay.concat(intersectAcls(verbs, Object.keys(sanitizedAclObject)));
} else {
console.warn('AclInformation can only be used with aim === "button" or aim === "form".' +
'For aim === "button", aclObject needs to be defined.');
}
return verbsToDisplay.map((verb) => {
return this.getInfoText(getLangText(titles[verb]), getLangText(informationSentences[verb]), getLangText(exampleSentences[verb]));
});
},
getButton() {
return this.props.aim === 'button' ?
<Button style = {this.dropdownButtonStyle} className="glyphicon glyphicon-question-sign" onClick={this.onOff} /> :
null;
},
render() {
return (
<span>
{this.getButton()}
<div
style={this.dropdownListStyle}
className={classnames({'hidden': this.props.aim === 'button' && !this.state.isVisible})}>
<span>{this.produceInformationBlock()}</span>
</div>
</span>
);
}
});
export default AclInformation;

64
js/components/ascribe_buttons/acl_information_button.js
View File

@ -1,64 +0,0 @@
'use strict';
import React from 'react';
import classnames from 'classnames';
import AclInformation from '../ascribe_information/acl_information';
import Button from 'react-bootstrap/lib/Button';
let AclInformationButton = React.createClass({
propTypes: {
verbs: React.PropTypes.oneOfType([
React.PropTypes.string,
React.PropTypes.arrayOf(React.PropTypes.string)
])
},
getInitialState() {
return {isVisible: false};
},
componentDidMount() {
console.log('Information button being launched');
this.dropdownButtonStyle = {
background: 'none',
color: 'black',
padding: 0,
border: 'none'
};
this.dropdownListStyle = {
textAlign: 'justify',
width: '80.8%',
border: '1px solid #CCC',
backgroundColor: 'white',
padding: '0.5em'
};
},
onOff() {
if (!this.state.isVisible) {
this.setState({isVisible: true});
}
else {
this.setState({isVisible: false});
}
},
showInformation() {
if (this.state.isVisible) {
return (<AclInformation aim={'button'} verbs={this.props.verbs}/>);
}
},
render() {
return (
<span>
<Button style = {this.dropdownButtonStyle} className="glyphicon glyphicon-question-sign" onClick={this.onOff} />
<div
style={this.dropdownListStyle}
className={classnames({'hidden': !this.state.isVisible})}>
{this.showInformation()}
</div>
</span>
);
}
});
export default AclInformationButton;

20
js/components/ascribe_detail/edition_action_panel.js
View File

@ -22,7 +22,7 @@ import DeleteButton from '../ascribe_buttons/delete_button';
import GlobalNotificationModel from '../../models/global_notification_model';
import GlobalNotificationActions from '../../actions/global_notification_actions';
import AclInformationButton from '../ascribe_buttons/acl_information_button';
import AclInformation from '../ascribe_buttons/acl_information';
import AclProxy from '../acl_proxy';
@ -86,19 +86,6 @@ let EditionActionPanel = React.createClass({
}
},
getVerbList(){
let verbsToCheck = ['acl_transfer', 'acl_consign', 'acl_loan', 'acl_share', 'acl_delete'];
let verbListIndices = [];
let acl = this.props.edition.acl;
Object.keys(acl).forEach((key) => {
let index = verbsToCheck.indexOf(key);
if (acl[key] && index !== -1) {
verbListIndices.push(verbsToCheck[index].slice(4));
}
});
return verbListIndices;
},
render(){
let {edition, currentUser} = this.props;
@ -173,7 +160,10 @@ let EditionActionPanel = React.createClass({
<DeleteButton
handleSuccess={this.handleDeleteSuccess}
editions={[edition]}/>
<AclInformationButton aim="button" verbs = {this.getVerbList()}/>
<AclInformation
aim="button"
verbs={['acl_share', 'acl_transfer', 'acl_consign', 'acl_loan', 'acl_delete']}
aclObject={edition.acl}/>
</AclButtonList>
</Col>
</Row>

6
js/components/ascribe_detail/piece_container.js
View File

@ -27,6 +27,8 @@ import CreateEditionsForm from '../ascribe_forms/create_editions_form';
import CreateEditionsButton from '../ascribe_buttons/create_editions_button';
import DeleteButton from '../ascribe_buttons/delete_button';
import AclInformation from '../ascribe_buttons/acl_information';
import ListRequestActions from '../ascribe_forms/list_form_request_actions';
import GlobalNotificationModel from '../../models/global_notification_model';
@ -200,6 +202,10 @@ let PieceContainer = React.createClass({
<DeleteButton
handleSuccess={this.handleDeleteSuccess}
piece={this.state.piece}/>
<AclInformation
aim="button"
verbs={['acl_share', 'acl_create_editions', 'acl_loan', 'acl_delete']}
aclObject={this.state.piece.acl}/>
</AclButtonList>
);
}

4
js/components/ascribe_forms/form_consign.js
View File

@ -10,7 +10,7 @@ import InputTextAreaToggable from './input_textarea_toggable';
import AppConstants from '../../constants/application_constants';
import { getLangText } from '../../utils/lang_utils.js';
import AclInformation from '../ascribe_information/acl_information';
import AclInformation from '../ascribe_buttons/acl_information';
let ConsignForm = React.createClass({
propTypes: {
@ -45,7 +45,7 @@ let ConsignForm = React.createClass({
<div className="modal-footer">
<img src={AppConstants.baseUrl + 'static/img/ascribe_animated_small.gif'} />
</div>}>
<AclInformation aim={'form'} verbs={'consign'}/>
<AclInformation aim={'form'} verbs={['acl_consign']}/>
<Property
name='consignee'
label={getLangText('Email')}>

4
js/components/ascribe_forms/form_delete_edition.js
View File

@ -8,7 +8,7 @@ import ApiUrls from '../../constants/api_urls';
import AppConstants from '../../constants/application_constants';
import { getLangText } from '../../utils/lang_utils';
import AclInformation from '../ascribe_information/acl_information';
import AclInformation from '../ascribe_buttons/acl_information';
let EditionDeleteForm = React.createClass({
@ -58,7 +58,7 @@ let EditionDeleteForm = React.createClass({
<img src={AppConstants.baseUrl + 'static/img/ascribe_animated_small.gif'} />
</div>
}>
<AclInformation aim={'form'} verbs={'delete'}/>
<AclInformation aim={'form'} verbs={['acl_delete']}/>
<p>{getLangText('Are you sure you would like to permanently delete this edition')}&#63;</p>
<p>{getLangText('This is an irrevocable action%s', '.')}</p>
</Form>

4
js/components/ascribe_forms/form_loan.js
View File

@ -19,7 +19,7 @@ import AppConstants from '../../constants/application_constants';
import { mergeOptions } from '../../utils/general_utils';
import { getLangText } from '../../utils/lang_utils';
import AclInformation from '../ascribe_information/acl_information';
import AclInformation from '../ascribe_buttons/acl_information';
let LoanForm = React.createClass({
propTypes: {
@ -227,7 +227,7 @@ let LoanForm = React.createClass({
<div className={classnames({'ascribe-form-header': true, 'hidden': !this.props.loanHeading})}>
<h3>{this.props.loanHeading}</h3>
</div>
<AclInformation aim={'form'} verbs={'loan'}/>
<AclInformation aim={'form'} verbs={['acl_loan']}/>
<br></br>
<Property
name='loanee'

5
js/components/ascribe_forms/form_share_email.js
View File

@ -9,7 +9,7 @@ import InputTextAreaToggable from './input_textarea_toggable';
import Button from 'react-bootstrap/lib/Button';
import AppConstants from '../../constants/application_constants';
import AclInformation from '../ascribe_information/acl_information';
import AclInformation from '../ascribe_buttons/acl_information';
import { getLangText } from '../../utils/lang_utils.js';
@ -49,8 +49,7 @@ let ShareForm = React.createClass({
<div className="modal-footer">
<img src={AppConstants.baseUrl + 'static/img/ascribe_animated_small.gif'} />
</div>}>
{console.log('hoho')}
<AclInformation aim={'form'} verbs={'share'}/>
<AclInformation aim={'form'} verbs={['acl_share']}/>
<Property
name='share_emails'
label={getLangText('Emails')}>

4
js/components/ascribe_forms/form_transfer.js
View File

@ -9,7 +9,7 @@ import Form from './form';
import Property from './property';
import InputTextAreaToggable from './input_textarea_toggable';
import AclInformation from '../ascribe_information/acl_information';
import AclInformation from '../ascribe_buttons/acl_information';
import AppConstants from '../../constants/application_constants';
import { getLangText } from '../../utils/lang_utils.js';
@ -50,7 +50,7 @@ let TransferForm = React.createClass({
<div className="modal-footer">
<img src={AppConstants.baseUrl + 'static/img/ascribe_animated_small.gif'} />
</div>}>
<AclInformation aim={'form'} verbs={'transfer'}/>
<AclInformation aim={'form'} verbs={['acl_transfer']}/>
<Property
name='transferee'
label={getLangText('Email')}>

97
js/components/ascribe_information/acl_information.js
View File

@ -1,97 +0,0 @@
'use strict';
import React from 'react';
import informationTexts from '../../constants/information_text';
import { getLangText } from '../../utils/lang_utils';
import { replaceSubstringAtIndex } from '../../utils/general_utils';
let AclInformation = React.createClass({
propTypes: {
verbs: React.PropTypes.oneOfType([
React.PropTypes.string,
React.PropTypes.arrayOf(React.PropTypes.string)
]),
aim: React.PropTypes.string.isRequired
},
getInfoText(title, info, example){
let titleStyle = {
color: '#02B6A3',
fontSize: '11px',
lineHeight: '3px'
};
let infoStyle = {
color: '#333333',
fontSize: '11px',
lineHeight: '3px'
};
let exampleStyle = {
color: '#B2B2B2',
fontSize: '11px',
lineHeight: '3px'
};
let paragraphStyle = {
margin: '0.1em',
lineHeight: '15px',
align: 'justify'
};
let aim = this.props.aim;
if (aim) {
if (aim === 'form') {
return (<p style={paragraphStyle}>
<span style={infoStyle}> {replaceSubstringAtIndex(info.slice(2), 's ', ' ')} <br/> </span>
<span style={exampleStyle}> {example} </span></p>);
}
else if (aim === 'button') {
return (<p style={paragraphStyle}><span style={titleStyle}> {title} </span>
<span style={infoStyle}> {info} <br/> </span>
<span style={exampleStyle}> {example} </span></p>);
}
}
else {
console.log('Aim is required when you want to place information text');
}
},
produceInformationBlock() {
let enabledIndices = this.props.verbs;
let titleList = informationTexts.title;
let infoSentenceList = informationTexts.informationSentence;
let exampleSentenceList = informationTexts.exampleSentence;
let sortedIndices = ['share', 'transfer', 'consign', 'loan', 'delete'];
let tempIndices = [];
for (let i = 0; i < sortedIndices.length; i++){
if (enabledIndices.indexOf(sortedIndices[i]) === -1){
continue;
}
else{
tempIndices.push(sortedIndices[i]);
}
}
enabledIndices = tempIndices;
if(Array.isArray(enabledIndices)) {
return enabledIndices.map((i)=> {
return (this.getInfoText(getLangText(titleList[i]), getLangText(infoSentenceList[i]),
getLangText(exampleSentenceList[i])));
});
}
else if (typeof enabledIndices === 'string'){
return (this.getInfoText(getLangText(titleList[enabledIndices]), getLangText(infoSentenceList[enabledIndices])));
}
else if (typeof enabledIndices === 'undefined'){
console.log('Verbs come undefined maybe you wrote verb instead of verbs?');
}
else {
console.log('You need to supply an array of strings or string as verbs to AclInformation');
}
},
render() {
console.log('Creation of information block');
return (<span>{this.produceInformationBlock()}</span>);
}
});
export default AclInformation;

69
js/constants/information_text.js
View File

@ -1,42 +1,37 @@
'use strict';
const informationTexts = {
'title': {
'transfer': 'TRANSFER',
'consign': 'CONSIGN',
'loan': 'LOAN',
'share': 'SHARE',
'delete': 'DELETE'},
'informationSentence': {
'transfer': ' - Changes ownership of an Edition. As with a physical piece of work, ' +
export const InformationTexts = {
'titles': {
'acl_transfer': 'TRANSFER',
'acl_consign': 'CONSIGN',
'acl_loan': 'LOAN',
'acl_share': 'SHARE',
'acl_delete': 'DELETE',
'acl_create_editions': 'CREATE EDITIONS',
'acl_unconsign': 'UNCONSIGN',
'acl_request_unconsign': 'REQUEST UNCONSIGN'
},
'informationSentences': {
'acl_transfer': ' - Changes ownership of an Edition. As with a physical piece of work, ' +
'transferring ownership of an Edition does not transfer copyright in the Work.',
'consign': ' - Lets someone represent you in dealing with the work, under the terms you agree to.',
'loan': ' - Lets someone use or put the Work on display for a limited amount of time.',
'share': ' - Lets someone view the Work or Edition, but does not give rights to publish or display it.',
'delete': ' - Removes the Work from your Wallet. Note that the previous registration and transfer ' +
'history will still exist on the blockchain and cannot be deleted.'
}
,
'exampleSentence': {
'transfer': '(e.g. a musician Transfers limited edition 1 of 10 of her new album to a very happy fan)',
'consign': '(e.g. an artist Consigns 10 Editions of her new Work to a gallery ' +
'acl_consign': ' - Lets someone represent you in dealing with the work, under the terms you agree to.',
'acl_loan': ' - Lets someone use or put the Work on display for a limited amount of time.',
'acl_share': ' - Lets someone view the Work or Edition, but does not give rights to publish or display it.',
'acl_delete': ' - Removes the Work from your Wallet. Note that the previous registration and transfer ' +
'history will still exist on the blockchain and cannot be deleted.',
'acl_create_editions': '<Insert text here>',
'acl_unconsign': '<Insert text here>',
'acl_request_unconsign': '<Insert text here>'
},
'exampleSentences': {
'acl_transfer': '(e.g. a musician Transfers limited edition 1 of 10 of her new album to a very happy fan)',
'acl_consign': '(e.g. an artist Consigns 10 Editions of her new Work to a gallery ' +
'so the gallery can sell them on her behalf, under the terms the artist and the gallery have agreed to)',
'loan': '(e.g. a collector Loans a Work to a gallery for one month for display in the gallery\'s show)',
'share': '(e.g. a photographer Shares proofs of a graduation photo with the graduate\'s grandparents)',
'delete': '(e.g. an artist uploaded the wrong file and doesn\'t want it cluttering his Wallet, so he Deletes it)'
'acl_loan': '(e.g. a collector Loans a Work to a gallery for one month for display in the gallery\'s show)',
'acl_share': '(e.g. a photographer Shares proofs of a graduation photo with the graduate\'s grandparents)',
'acl_delete': '(e.g. an artist uploaded the wrong file and doesn\'t want it cluttering his Wallet, so he Deletes it)',
'acl_create_editions': '<Insert text here>',
'acl_unconsign': '<Insert text here>',
'acl_request_unconsign': '<Insert text here>'
}
};
export default informationTexts;
};

2
js/utils/acl_utils.js
View File

@ -2,7 +2,7 @@
import { sanitize } from './general_utils';
function intersectAcls(a, b) {
export function intersectAcls(a, b) {
return a.filter((val) => b.indexOf(val) > -1);
}

2
package.json
View File

@ -73,7 +73,7 @@
"q": "^1.4.1",
"raven-js": "^1.1.19",
"react": "^0.13.2",
"react-bootstrap": "^0.25.1",
"react-bootstrap": "0.25.1",
"react-datepicker": "^0.12.0",
"react-router": "^0.13.3",
"react-router-bootstrap": "~0.16.0",