ascribe/onion
1
0
Fork 0
mirror of https://github.com/ascribe/onion.git synced 2024-12-22 17:33:14 +01:00
Code Issues Releases Wiki Activity

Merge remote-tracking branch 'remotes/origin/master' into AD-504-revive-coa-for-new-frontend

Browse Source
This commit is contained in:
diminator 2015-06-26 00:04:25 +02:00
commit 930982873a
8 changed files with 109 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
gulpfile.js
View File

@ -53,10 +53,12 @@ var config = {
]
};
var SERVER_URL = process.env.ONION_SERVER_URL || 'http://staging.ascribe.io/';
var constants = {
BASE_URL: (function () { var baseUrl = process.env.ONION_BASE_URL || '/'; return baseUrl + (baseUrl.match(/\/$/) ? '' : '/'); })(),
SERVER_URL: process.env.ONION_SERVER_URL || 'http://staging.ascribe.io/',
API_ENDPOINT: process.env.ONION_SERVER_URL + 'api/' || 'http://staging.ascribe.io/api/',
SERVER_URL: SERVER_URL,
API_ENDPOINT: SERVER_URL + 'api/' || 'http://staging.ascribe.io/api/',
DEBUG: !argv.production,
CREDENTIALS: 'ZGltaUBtYWlsaW5hdG9yLmNvbTowMDAwMDAwMDAw' // dimi@mailinator:0000000000
};

2
index.html
View File

@ -11,8 +11,8 @@
<link rel="stylesheet" href="<%= BASE_URL %>static/css/maps/main.css.map">
<script>
window.BASE_URL = '<%= BASE_URL %>';
window.API_ENDPOINT = '<%= API_ENDPOINT %>';
window.SERVER_URL = '<%= SERVER_URL %>';
window.API_ENDPOINT = '<%= API_ENDPOINT %>';
<% DEBUG && print('window.DEBUG = true'); %>
<% DEBUG && print('window.CREDENTIALS = \'' + CREDENTIALS + '\''); %>
</script>

25
js/components/ascribe_uploader/file_drag_and_drop.js
View File

@ -1,3 +1,5 @@
'use strict';
import React from 'react';
import FileDragAndDropPreviewIterator from './file_drag_and_drop_preview_iterator';
@ -7,12 +9,16 @@ var FileDragAndDrop = React.createClass({
propTypes: {
onDragStart: React.PropTypes.func,
onDrop: React.PropTypes.func.isRequired,
onDrag: React.PropTypes.func,
onDragEnter: React.PropTypes.func,
onLeave: React.PropTypes.func,
onDragLeave: React.PropTypes.func,
onDragOver: React.PropTypes.func,
onDragEnd: React.PropTypes.func,
filesToUpload: React.PropTypes.array,
handleDeleteFile: React.PropTypes.func
handleDeleteFile: React.PropTypes.func,
multiple: React.PropTypes.bool,
dropzoneInactive: React.PropTypes.bool
},
handleDragStart(event) {
@ -80,6 +86,12 @@ var FileDragAndDrop = React.createClass({
},
handleOnClick() {
// when multiple is set to false and the user already uploaded a piece,
// do not propagate event
if(this.props.dropzoneInactive) {
return;
}
// Simulate click on hidden file input
var event = document.createEvent('HTMLEvents');
event.initEvent('click', false, true);
@ -87,11 +99,14 @@ var FileDragAndDrop = React.createClass({
},
render: function () {
console.log(this.props.dropzoneInactive);
let hasFiles = this.props.filesToUpload.length > 0;
let className = hasFiles ? 'file-drag-and-drop has-files ' : 'file-drag-and-drop ';
className += this.props.dropzoneInactive ? 'inactive-dropzone' : 'active-dropzone';
return (
<div
className={hasFiles ? 'file-drag-and-drop has-files' : 'file-drag-and-drop' }
className={className}
onClick={this.handleOnClick}
onDragStart={this.handleDragStart}
onDrag={this.handleDrop}
@ -100,12 +115,12 @@ var FileDragAndDrop = React.createClass({
onDragOver={this.handleDragOver}
onDrop={this.handleDrop}
onDragEnd={this.handleDragEnd}>
{hasFiles ? null : <span>Click or drag to add files</span>}
{hasFiles ? null : this.props.multiple ? <span>Click or drag to add files</span> : <span>Click or drag to add a file</span>}
<FileDragAndDropPreviewIterator
files={this.props.filesToUpload}
handleDeleteFile={this.handleDeleteFile}/>
<input
multiple
multiple={this.props.multiple}
ref="fileinput"
type="file"
style={{
@ -119,4 +134,4 @@ var FileDragAndDrop = React.createClass({
}
});
module.exports = FileDragAndDrop;
export default FileDragAndDrop;

29
js/components/ascribe_uploader/react_s3_fine_uploader.js
View File

@ -10,6 +10,9 @@ import fetch from 'isomorphic-fetch';
import fineUploader from 'fineUploader';
import FileDragAndDrop from './file_drag_and_drop';
import GlobalNotificationModel from '../../models/global_notification_model';
import GlobalNotificationActions from '../../actions/global_notification_actions';
var ReactS3FineUploader = React.createClass({
propTypes: {
@ -118,7 +121,6 @@ var ReactS3FineUploader = React.createClass({
},
getCookie(name) {
//console.log(document);
let value = '; ' + document.cookie;
let parts = value.split('; ' + name + '=');
if (parts.length === 2) {
@ -126,7 +128,6 @@ var ReactS3FineUploader = React.createClass({
}
},
requestKey(fileId) {
//console.log(this.getCookie('csrftoken'));
let filename = this.state.uploader.getName(fileId);
return new Promise((resolve, reject) => {
fetch(this.props.keyRoutine.url, {
@ -261,6 +262,26 @@ var ReactS3FineUploader = React.createClass({
},
handleUploadFile(files) {
// If multiple set and user already uploaded its work,
// cancel upload
if(!this.props.multiple && this.state.filesToUpload.length > 0) {
return;
}
// if multiple is set to false and user drops multiple files into the dropzone,
// take the first one and notify user that only one file can be submitted
if(!this.props.multiple && files.length > 1) {
let tempFilesList = [];
tempFilesList.push(files[0]);
// replace filelist with first-element file list
files = tempFilesList;
let notification = new GlobalNotificationModel('Only one file allowed (took first one)', 'danger', 10000);
GlobalNotificationActions.appendGlobalNotification(notification);
}
this.state.uploader.addFiles(files);
let oldFiles = this.state.filesToUpload;
let oldAndNewFiles = this.state.uploader.getUploads();
@ -298,7 +319,9 @@ var ReactS3FineUploader = React.createClass({
<FileDragAndDrop
onDrop={this.handleUploadFile}
filesToUpload={this.state.filesToUpload}
handleDeleteFile={this.handleDeleteFile}/>
handleDeleteFile={this.handleDeleteFile}
multiple={this.props.multiple}
dropzoneInactive={!this.props.multiple && this.state.filesToUpload.length > 0} />
);
}

26
js/components/login_container.js
View File

@ -6,6 +6,8 @@ import Router from 'react-router';
import GlobalNotificationModel from '../models/global_notification_model';
import GlobalNotificationActions from '../actions/global_notification_actions';
import UserStore from '../stores/user_store';
import Form from './ascribe_forms/form';
import Property from './ascribe_forms/property';
@ -16,6 +18,27 @@ import AppConstants from '../constants/application_constants';
let LoginContainer = React.createClass({
mixins: [Router.Navigation],
getInitialState() {
return UserStore.getState();
},
componentDidMount() {
UserStore.listen(this.onChange);
},
componentWillUnmount() {
UserStore.unlisten(this.onChange);
},
onChange(state) {
this.setState(state);
// if user is already logged in, redirect him to piece list
if(this.state.currentUser && this.state.currentUser.email) {
this.transitionTo('pieces');
}
},
render() {
return (
<div className="ascribe-login-wrapper">
@ -32,9 +55,6 @@ let LoginContainer = React.createClass({
let LoginForm = React.createClass({
mixins: [Router.Navigation],
handleSuccess(){
let notification = new GlobalNotificationModel('Login successsful', 'success', 10000);
GlobalNotificationActions.appendGlobalNotification(notification);

3
js/components/register_piece.js
View File

@ -187,7 +187,8 @@ let FileUploader = React.createClass( {
let InputDate = React.createClass({
propTypes: {
placeholderText: React.PropTypes.string
placeholderText: React.PropTypes.string,
onChange: React.PropTypes.func
},
getInitialState() {

26
js/components/signup_container.js
View File

@ -3,6 +3,9 @@
import React from 'react';
import Router from 'react-router';
import { mergeOptions } from '../utils/general_utils';
import UserStore from '../stores/user_store';
import GlobalNotificationModel from '../models/global_notification_model';
import GlobalNotificationActions from '../actions/global_notification_actions';
@ -18,17 +21,36 @@ let SignupContainer = React.createClass({
mixins: [Router.Navigation],
getInitialState() {
return ({
return mergeOptions({
submitted: false,
message: null
});
}, UserStore.getState());
},
componentDidMount() {
UserStore.listen(this.onChange);
},
componentWillUnmount() {
UserStore.unlisten(this.onChange);
},
onChange(state) {
this.setState(state);
// if user is already logged in, redirect him to piece list
if(this.state.currentUser && this.state.currentUser.email) {
this.transitionTo('pieces');
}
},
handleSuccess(message){
this.setState({
submitted: true,
message: message
});
},
render() {
if (this.state.submitted){
return (

8
sass/ascribe_uploader.scss
View File

@ -10,6 +10,14 @@
transition: .1s linear background-color;
}
.inactive-dropzone {
cursor: default !important;
}
.inactive-dropzone:hover {
background-color: #FAFAFA !important;
}
.file-drag-and-drop:hover {
background-color: rgba(72, 218, 203, 0.2);
}