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

WIP

This commit is contained in:
vrde 2015-05-27 17:34:15 +02:00
parent fd72c1859c
commit df95e75025
5 changed files with 106 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
js/components/ascribe_media/image_viewer.js
View File

@ -1,25 +0,0 @@
import React from 'react';
/**
* This is the component that implements display-specific functionality
*/
let ImageViewer = React.createClass({
propTypes: {
thumbnail: React.PropTypes.string.isRequired
},
render() {
let thumbnail = <img className="img-responsive" src={this.props.thumbnail}/>;
let aligner = <span className="vcenter"></span>;
return (
<div>
<div>
{aligner}
{thumbnail}
</div>
</div>
);
}
});
export default ImageViewer;

40
js/components/ascribe_media/resource_viewer.js Normal file
View File

@ -0,0 +1,40 @@
import React from 'react';
import InjectInHeadMixin from '../../mixins/inject_in_head_mixin';
/**
* This is the component that implements display-specific functionality.
*
* ResourceViewer handles the following mimetypes:
* - image
* - video
* - audio
* - pdf
* - other
*/
let resourceMap = {
'image': 1
}
let ResourceViewer = React.createClass({
propTypes: {
thumbnail: React.PropTypes.string.isRequired,
mimetype: React.PropTypes.oneOf(['image', 'video', 'audio', 'pdf', 'other']).isRequired
},
mixins: [InjectInHeadMixin],
componentDidMount() {
this.inject('http://antani.com');
},
render() {
return (
<div>
resourceviewer {this.props.thumbnail} {this.props.mimetype}
</div>
);
}
});
export default ResourceViewer;

2
js/components/ascribe_table/table_item_subtable.js
View File

@ -55,7 +55,7 @@ let TableItemSubtable = React.createClass({
let numOfColumns = GeneralUtils.sumNumList(listOfRowValues);
if(numOfColumns > 10) {
throw new Error('Bootstrap has only 12 columns to assign. You defined ' + numOfColumns + '. Change this in the columnMap you\'re passing to the table.')
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];
}

11
js/components/edition.js
View File

@ -1,5 +1,5 @@
import React from 'react';
import ImageViewer from './ascribe_media/image_viewer';
import ResourceViewer from './ascribe_media/resource_viewer';
/**
* This is the component that implements display-specific functionality
@ -10,10 +10,15 @@ let Edition = React.createClass({
//},
render() {
let thumbnail = this.props.edition.thumbnail;
let mimetype = this.props.edition.digital_work.mime;
return (
<div>
<div className="col-md-7">
<ImageViewer thumbnail={this.props.edition.thumbnail}/>
<ResourceViewer thumbnail={thumbnail}
mimetype={mimetype}
/>
</div>
<div className="col-md-5">
<EditionHeader edition={this.props.edition}/>
@ -103,4 +108,4 @@ let EditionDetails = React.createClass({
});
export default Edition;
export default Edition;

57
js/mixins/inject_in_head_mixin.js Normal file
View File

@ -0,0 +1,57 @@
let mapAttr = {
link: 'href',
source: 'src'
}
let mapExt = {
js: 'source',
css: 'link'
}
let InjectInHeadMixin = {
/**
* Provide functions to inject `<script>` and `<link>` in `<head>`.
* Useful when you have to load a huge external library and
* you don't want to embed everything inside the build file.
*/
isPresent(tag, src) {
let attr = mapAttr[tag];
let query = `head > ${tag}[${attr}="${src}"]`;
return document.querySelector(query);
},
injectTag(tag, src){
console.log(this.foobar);
if (InjectInHeadMixin.isPresent(tag, src))
return;
let attr = mapAttr[tag];
let element = document.createElement(tag);
document.head.appendChild(element);
element[attr] = src;
},
injectStylesheet(src) {
this.injectTag('link', src);
},
injectScript(src) {
this.injectTag('source', src);
},
inject(src) {
debugger;
let ext = src.split('.').pop();
try {
let tag = mapAttr(src);
} catch (e) {
throw new Error(`Cannot inject ${src} in the DOM, cannot guess the tag name from extension ${ext}. Valid extensions are "js" and "css".`);
}
InjectInHeadMixin.injectTag(tag, src);
}
};
export default InjectInHeadMixin;