vmario/dubdiff
0
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

restructure and complete move to semantic-ui-react

Browse Source
This commit is contained in:
Adam Brown 2016-11-30 14:57:35 -05:00
parent dc96ac104c
commit 822a012129
12 changed files with 15292 additions and 402 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
bower.json
View File

@ -1,12 +0,0 @@
{
"name": "dubdiff",
"version": "2.0.1",
"dependencies": {
"jquery": "~1.11.0",
"bootstrap": "~3.1.1",
"bootstrap-sass-official": "~3.1.1",
"font-awesome": ">=4.1.0"
},
"devDependencies": {
}
}

15458
dist/browser-bundle.js vendored
View File

File diff suppressed because one or more lines are too long

18
dist/index.html vendored
View File

@ -3,20 +3,8 @@
<title>Dubdiff 2</title>
</head>
<body>
<div class="table-container">
<div class="table-block footer-push">
<div id="root">If you see this then something is wrong.</div>
</div>
<div class="table-block">
<div class="container">
<footer id="footer" class="twelve columns">
<p><a href="http://adamarthurryan.com">Adam Brown</a> | This website is <a href="https://github.com/adamarthurryan/dubdiff-2">open source</a>.</p>
</footer>
</div>
</div>
</div>
<div id="root">If you see this then something is wrong.</div>
<script src="browser-bundle.js"></script>
<link href="old-dubdiff.css" rel="stylesheet">
</body>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.2/semantic.min.css"></link>
<link href="main.css" rel="stylesheet"> </body>
</html>

3
package.json
View File

@ -22,7 +22,8 @@
"react-router": "^1.0.0",
"redux": "^3.5.1",
"redux-router": "^1.0.0-beta5",
"reselect": "^2.5.1"
"reselect": "^2.5.1",
"semantic-ui-react": "^0.61.6"
},
"devDependencies": {
"babel-core": "^6.3.26",

32
src/components/Compare.js
View File

@ -1,10 +1,13 @@
import React from 'react'
import {connect} from 'react-redux'
import {Segment, Grid, Form} from 'semantic-ui-react'
import * as Actions from '../actions'
import * as Selectors from '../selectors'
import Header from './Header'
import Footer from './Footer'
import CompareControls from './CompareControls'
import Show from './Show'
@ -26,29 +29,32 @@ const mapDispatchToProps = dispatch => ({
class Compare extends React.Component {
render() {
console.log(this.props.safeInput)
return (
<div>
<Header/>
<div className="container">
<form className="row">
<div className="col-md-2 col-sm-12">
<Segment basic padded>
<Grid stackable columns={2}>
<Grid.Column width="3">
<CompareControls/>
</div>
<div className="col-md-10 col-sm-12 content-well">
{ this.props.isShowDifference ?
</Grid.Column>
<Grid.Column width="13">
<Segment>
{ this.props.isShowDifference ?
<div>{this.props.diff}</div>:
<Show diff={this.props.diff} isMarkdownFormat={this.props.isMarkdownFormat}>{this.props.diff}</Show>:
<Show
text={this.props.isShowOriginal? this.props.safeInput.original: this.props.safeInput.final}
isMarkdownFormat={this.props.isMarkdownFormat}
/>
}
</div>
</form>
</div>
}
</Segment>
</Grid.Column>
</Grid>
</Segment>
<Footer/>
</div>
)
}

29
src/components/CompareControls.js
View File

@ -2,6 +2,8 @@ import React from 'react'
import {connect} from 'react-redux'
import {Link} from 'react-router'
import {Button, Icon, Segment} from 'semantic-ui-react'
import * as Actions from '../actions'
import * as Selectors from '../selectors'
@ -38,19 +40,20 @@ class CompareControls extends React.Component {
render() {
return (
<div className="form-group">
<div className="controls well btn-group col-lg-12">
<a type="submit" onClick={this.props.onShowOriginal} className={(this.props.isShowOriginal?'active ':'')+'btn btn-block btn-primary'}>Original</a>
<a type="submit" onClick={this.props.onShowFinal} className={(this.props.isShowFinal?'active ':'')+'btn btn-block btn-primary'}>Final</a>
<a type="submit" onClick={this.props.onShowDifference} className={(this.props.isShowDifference?'active ':'')+'btn btn-block btn-primary'}>Difference</a>
</div>
<div className="controls well btn-group col-lg-12">
<a className={(this.props.isMarkdownFormat ? "active " : "")+"btn btn-block btn-primary"} type="submit" onClick={this.onClickMarkdownFormat.bind(this)}>
<span className={(this.props.isMarkdownFormat ? "glyphicon-ok " : "") + "glyphicon"}></span>
&nbsp; As Markdown
</a>
</div>
</div>
<Segment.Group>
<Segment >
<Button fluid onClick={this.props.onShowOriginal} active={this.props.isShowOriginal}>Original</Button>
<Button fluid onClick={this.props.onShowFinal} active={this.props.isShowFinal}>Final</Button>
<Button fluid onClick={this.props.onShowDifference} active={this.props.isShowDifference}>Difference</Button>
</Segment>
<Segment >
<Button fluid active={this.props.isMarkdownFormat} type="submit" onClick={this.onClickMarkdownFormat.bind(this)}>
{this.props.isMarkdownFormat ? <Icon name="checkmark"/> : <span/>}
&nbsp;As Markdown
</Button>
</Segment>
</Segment.Group>
)
}
}

17
src/components/Header.js
View File

@ -1,16 +1,13 @@
import React from 'react'
import {Segment, Header} from 'semantic-ui-react'
import {Link} from 'react-router'
const Header = (props) => (
<nav>
<header id="banner" className="hero-unit">
<div className="container">
<h1><Link to="/">dubdiff</Link></h1>
<h3></h3>
</div>
</header>
</nav>
const SiteHeader = (props) => (
<Segment basic padded textAlign="center" as="header" id='masthead'>
<Header><Link to="/">dubdiff</Link></Header>
</Segment>
)
export default Header
export default SiteHeader

48
src/components/Main.js
View File

@ -2,10 +2,13 @@
import React from 'react'
import {connect} from 'react-redux'
import {Segment, Grid, Form} from 'semantic-ui-react'
import * as Actions from '../actions'
import * as Selectors from '../selectors'
import Header from './Header'
import Footer from './Footer'
import MainControls from './MainControls'
const mapStateToProps = (state) => ({
@ -30,22 +33,37 @@ class Main extends React.Component {
return (
<div>
<Header/>
<div className="container">
<form className="row">
<div className="col-md-2 col-sm-12">
<MainControls/>
</div>
<div className="col-lg-5 col-sm-12 form-group">
<label htmlFor="docA">Original</label>
<textarea id="docA" value={this.props.input.original} onChange={event => this.props.onChangeOriginal(event.target.value)} className="form-control"></textarea>
</div>
<div className="col-lg-5 col-sm-12 form-group">
<label htmlFor="docB">Final</label>
<textarea id="docB" value={this.props.input.final} onChange={event => this.props.onChangeFinal(event.target.value)} className="form-control"></textarea>
</div>
</form>
</div>
<Segment basic padded>
<Grid stackable columns={3}>
<Grid.Column width="3">
<MainControls/>
</Grid.Column>
<Grid.Column width="6">
<Form>
<Form.Field>
<label>Original</label>
<textarea value={this.props.input.original} onChange={event => this.props.onChangeOriginal(event.target.value)}></textarea>
</Form.Field>
</Form>
</Grid.Column>
<Grid.Column width="6">
<Form>
<Form.Field>
<label>Final</label>
<textarea value={this.props.input.final} onChange={event => this.props.onChangeFinal(event.target.value)}></textarea>
</Form.Field>
</Form>
</Grid.Column>
</Grid>
</Segment>
<Footer/>
</div>
)
}
}

25
src/components/MainControls.js
View File

@ -2,6 +2,8 @@ import React from 'react'
import {connect} from 'react-redux'
import {Link} from 'react-router'
import {Button, Icon, Segment} from 'semantic-ui-react'
import * as Actions from '../actions'
import * as Selectors from '../selectors'
@ -32,17 +34,18 @@ class MainControls extends React.Component {
render() {
return (
<div className="form-group">
<div className="controls well col-lg-12">
<Link to="compare" className="btn btn-block btn-primary">Compare</Link>
</div>
<div className="controls well btn-group col-lg-12">
<a className={(this.props.isMarkdownFormat ? "active " : "")+"btn btn-block btn-primary"} type="submit" onClick={this.onClickMarkdownFormat.bind(this)}>
<span className={(this.props.isMarkdownFormat ? "glyphicon-ok " : "") + "glyphicon"}></span>
&nbsp; As Markdown
</a>
</div>
</div>
<Segment.Group>
<Segment >
<Link to="compare"><Button fluid>Compare</Button></Link>
</Segment>
<Segment >
<Button fluid active={this.props.isMarkdownFormat} type="submit" onClick={this.onClickMarkdownFormat.bind(this)}>
{this.props.isMarkdownFormat ? <Icon name="checkmark"/> : <span/>}
&nbsp;As Markdown
</Button>
</Segment>
</Segment.Group>
)
}
}

33
src/components/Show.js
View File

@ -1,11 +1,32 @@
import React from 'react'
const Show = (props) => (
<div>
<pre>
{props.text}
const Show = (props) => {
return <div>
<pre style={{whiteSpace:'pre-wrap'}}>
{props.text ?
props.text:
props.diff ?
diffToPre(props.diff) :
null
}
</pre>
</div>
)
}
export default Show
export default Show
function diffToPre(diff) {
return diff.map(part => (
part.added ? <span><ins>{part.value}</ins>{ifNotNewlineSpace(part.value)}</span> :
part.removed ? <span><del>{part.value}</del>{ifNotNewlineSpace(part.value)}</span> :
<span>{part.value}{ifNotNewlineSpace(part.value)}</span>
))
}
const ifNotNewlineSpace = str => {
console.log(str)
return !str.endsWith('\n') ? ' ' : ''
}

14
src/selectors.js
View File

@ -4,10 +4,11 @@ import { createSelector } from 'reselect'
import React from 'react'
import * as JsDiff from 'diff'
import {Format, Show} from './reducers'
import * as Dubdiff from './util/dubdiff'
const input = (state) => state.input
const format = (state) => state.format
@ -44,14 +45,7 @@ export const isShowDifference= isShow(Show.DIFFERENCE)
export const diff = createSelector(
[format, input],
(format, input) => {
let diff = JsDiff.diffLines(input.original.replace(/ /g, '###\n'), input.final.replace(/ /g, '###\n'))
console.log(diff, diff.map(({added, removed, value})=>({added, removed, value:value.replace(/###\n/g, ' ')})))
return diff.map(({added, removed, value})=>({added, removed, value:value.replace(/###\n/g, ' ')})).map(part => (
part.added ? <ins>{part.value}</ins> :
part.removed ? <del>{part.value}</del> :
<span>{part.value}</span>
))
return Dubdiff.plaintextDiff(input.original, input.final)
/*
let diff = JsDiff.diffWords (input.original.replace(/ /g, ' '), input.final.replace(/ /g, ' '))
return diff.map(({added, removed, value})=>({added, removed, value:value.replace(/ /g, ' ')})).map(part => (
@ -63,6 +57,8 @@ export const diff = createSelector(
}
)
/*
html diff
---

5
webpack.config.js
View File

@ -5,7 +5,8 @@ module.exports = {
filename: './dist/browser-bundle.js'
},
target: 'web',
devtool: 'eval-module-source-map',
// devtool: 'eval-module-source-map',
module: {
loaders: [
{
@ -13,7 +14,7 @@ module.exports = {
loader: 'babel-loader',
query: {
presets: ['es2015', 'react'],
compact: "false"
compact: "true"
}
},
]