ascribe/onion
1
0
Fork 0
mirror of https://github.com/ascribe/onion.git synced 2024-12-23 01:39:36 +01:00
Code Issues Releases Wiki Activity

modal try 1

Browse Source
This commit is contained in:
ddejongh 2015-05-26 16:46:02 +02:00
parent e3c115897f
commit 230ecfb0e4
4 changed files with 74 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
index.html
View File

@ -12,6 +12,7 @@
</head> </head>
<body> <body>
<div id="main" class="container"></div> <div id="main" class="container"></div>
<div id="modal" 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>

74
js/components/edition.js
View File

@ -1,24 +1,29 @@
import React from 'react'; import React from 'react';
import ImageViewer from './ascribe_media/image_viewer'; import ImageViewer from './ascribe_media/image_viewer';
import OverlayTrigger from 'react-bootstrap/lib/OverlayTrigger';
import OverlayMixin from 'react-bootstrap/lib/OverlayMixin';
import Modal from 'react-bootstrap/lib/Modal';
import ModalTrigger from 'react-bootstrap/lib/ModalTrigger';
import Modal from 'react-modal';
/** /**
* This is the component that implements display-specific functionality * This is the component that implements display-specific functionality
*/ */
let Edition = React.createClass({ let Edition = React.createClass({
//propTypes: {
// title: React.PropTypes.string.isRequired
//},
render() { render() {
var modal = <ShareModal edition={this.props.edition} />;
return ( return (
<div> <div>
{modal}
<div className="col-md-7"> <div className="col-md-7">
<ImageViewer thumbnail={this.props.edition.thumbnail}/> <ImageViewer thumbnail={this.props.edition.thumbnail}/>
</div> </div>
<div className="col-md-5"> <div className="col-md-5">
<EditionHeader edition={this.props.edition}/> <EditionHeader edition={this.props.edition}/>
<EditionDetails edition={this.props.edition}/> <EditionDetails edition={this.props.edition}/>
</div> </div>
</div> </div>
); );
} }
@ -69,5 +74,66 @@ let EditionDetailProperty = React.createClass({
} }
}); });
let ShareModal = React.createClass({
mixins: [OverlayMixin],
getInitialState: function() {
return {
isModalOpen: true
};
},
renderOverlay: function() {
if (!this.state.isModalOpen) {
return <span/>;
}
},
render: function() {
return (
<Modal title="Share artwork">
</Modal>
);
}
});
//let ShareModal = React.createClass({
// mixins: [OverlayMixin],
//
// getInitialState: function() {
// return {
// isModalOpen: true
// };
// },
// renderOverlay: function() {
// if (!this.state.isModalOpen) {
// return <span/>;
// }
// },
// hide: function(){
// this.setState({isModalOpen: false});
// },
// render: function() {
// var content = "Hi,\n\nI am sharing \"" + this.props.edition.title +
// "\" with you.\n\nTruly yours,\n";
// return (
// <Modal title="Share artwork" onRequestHide={this.hide}>
// <div className="modal-body">
// <form id="share_modal_content" role="form">
// <div className="form-group">
// <input className="form-control input-text-ascribe" name="share_emails"
// placeholder="Comma separated emails" required="required" type="text" />
// </div>
// <div className="form-group">
// <textarea className="form-control input-text-ascribe" name="share_message"
// defaultValue={content}></textarea>
// </div>
// <div className="modal-footer">
// <button type="submit" className="btn btn-ascribe-inv">SHARE</button>
// <button className="btn btn-ascribe" onClick={this.hide}>CLOSE</button>
// </div>
// </form>
// </div>
// </Modal>
// );
// }
//});
export default Edition; export default Edition;

3
package.json
View File

@ -32,7 +32,8 @@
"object-assign": "^2.0.0", "object-assign": "^2.0.0",
"react": "^0.13.2", "react": "^0.13.2",
"react-router": "^0.13.3", "react-router": "^0.13.3",
"uglifyjs": "^2.4.10" "uglifyjs": "^2.4.10",
"react-bootstrap": "~0.22.6"
}, },
"jest": { "jest": {
"scriptPreprocessor": "node_modules/babel-jest", "scriptPreprocessor": "node_modules/babel-jest",