Skip to content

Commit

Permalink
add controlled Keywords
Browse files Browse the repository at this point in the history
  • Loading branch information
PookMook committed Jul 10, 2017
1 parent 77c6b2a commit 66537f2
Show file tree
Hide file tree
Showing 8 changed files with 96 additions and 15 deletions.
2 changes: 1 addition & 1 deletion yamlEditor/dist/css/main.css

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

8 changes: 4 additions & 4 deletions yamlEditor/dist/js/bundle.js

Large diffs are not rendered by default.

16 changes: 14 additions & 2 deletions yamlEditor/src/css/demo.css
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,7 @@ body {
box-shadow: 0 0 3px #ccc inset;
}

.reactForm{
.reactForm, .keywords{
display:flex;
align-items: baseline;
}
Expand All @@ -62,7 +62,7 @@ body {
background-color:white;
text-align: right;
}
.reactForm > input, .reactForm textarea,.reactForm > select {
.reactForm > input, .reactForm textarea,.reactForm > select, .keywords > input {
padding:0.5em 1em;
display:block;
flex:1 1 auto;
Expand All @@ -72,6 +72,18 @@ body {
text-align: left;
border:none;
}
.keywords > input.controlled{
background-color: #f0fff0;
}
.keywords > i {
padding:0.5em 1em;
background-color:red;
color:white;
cursor: pointer;
}
.keywords > i.validate{
background-color:green;
}
.reactForm > label.lcheckbox{
flex:1 1 150px;
text-align: left;
Expand Down
4 changes: 2 additions & 2 deletions yamlEditor/src/js/DOMselector.js
Original file line number Diff line number Diff line change
Expand Up @@ -124,11 +124,11 @@ function saveTextAsFile()
let downloadLink = document.createElement("a");
downloadLink.download = fileNameToSaveAs;
downloadLink.innerHTML = "Download File";
if (window.webkitURL != null)
if (window.URL != null)
{
// Chrome allows the link to be clicked
// without actually adding it to the DOM.
downloadLink.href = window.webkitURL.createObjectURL(textFileAsBlob);
downloadLink.href = window.URL.createObjectURL(textFileAsBlob);
}
else
{
Expand Down
3 changes: 2 additions & 1 deletion yamlEditor/src/js/components/App.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import { Collaborateurs} from './Collaborateurs.jsx';
import { MotsClefs} from './MotsClefs.jsx';
import { Date} from './Date.jsx';
import { Rubriques} from './Rubriques.jsx';
import { Keywords} from './Keywords.jsx';
import { Types} from './Types.jsx';

export function App(){
Expand All @@ -20,8 +21,8 @@ export function App(){
<Resumes/>
<Authors />
<Reviewers />
<Keywords/>
<Rubriques/>
<Types/>
</section>
)
}
67 changes: 67 additions & 0 deletions yamlEditor/src/js/components/Keywords.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,67 @@
import { CheckBoxInput } from './CheckBoxInput.jsx'
import { store } from '../redux/store.js'
import React from 'react'
import _ from 'lodash'

export function Keywords(){
let selected = _.get(store.getState().misc,"selectedCategories",[]);
let uncontrolledKeywords = _.get(store.getState().misc,"uncontrolledKeywords",[]);
let categories = _.get(store.getState().misc,"categories",[]);
return(
<section className="group">
<h1><i className="fa fa-tag" aria-hidden="true"></i> Mots clés</h1>
<datalist id="keywordsFR">
{categories.map((o,i)=>(<option key={"keywordsFR"+i} value={o.fr}/>))}
</datalist>
<datalist id="keywordsEN">
{categories.map((o,i)=>(<option key={"keywordsEN"+i} value={o.en}/>))}
</datalist>
{selected.map((o,i)=>(<Keyword key={"keywords"+i} index={i} object={o} controlled={true} />))}
{uncontrolledKeywords.map((o,i)=>(<Keyword key={"keywords"+i} index={i} object={o} controlled={false} />))}
<InputKeyword />
</section>
)
}

function Keyword(props){
return(
<div className="keywords">
<input className={props.controlled ? "controlled":"free"} type="text" placeholder="FR" value={props.object.fr} readOnly="true"/>
<input className={props.controlled ? "controlled":"free"} type="text" placeholder="EN" value={props.object.en} readOnly="true"/>
<i className="fa fa-minus-circle" aria-hidden="true" data-id={props.index}></i>
</div>
)
}

class InputKeyword extends React.Component{
constructor(props) {
super(props);
}

componentDidMount(){
}

componentWillUnmount(){
}

checkValue(event) {
let Categories = store.getState().misc.categories;
for(let i=0;i<Categories.length;i++){
if(Categories[i].fr===event.target.value){
store.dispatch({type:"MISC_UPDATE",target:"categories["+i+"].selected", value:true});
event.target.value="";
}
}
//let answer = event.target.checked;
}

render() {
return(
<div className="keywords">
<input type="text" placeholder="mot clé" list="keywordsFR" onBlur={this.checkValue.bind(this)}/>
<input type="text" placeholder="keyword" list="keywordsEN"/>
<i className="fa fa-check validate" aria-hidden="true" data-id={this.props.index}></i>
</div>
)
}
}
5 changes: 3 additions & 2 deletions yamlEditor/src/js/redux/init.js
Original file line number Diff line number Diff line change
Expand Up @@ -115,7 +115,7 @@ export let init = {
misc:{
"rubriques":[
{"it":"TODO Revue en ligne","en":"TODO Revue en ligne","fr":"Revue en ligne","selected":false},
{"it":"TODO Essai","en":"TODO Essai","fr":"Essai","selected":true},
{"it":"TODO Essai","en":"TODO Essai","fr":"Essai","selected":false},
{"it":"TODO Création","en":"TODO Création","fr":"Création","selected":false},
{"it":"TODO L'édition papier de Sens-Public","en":"TODO L'édition papier de Sens-Public","fr":"L'édition papier de Sens-Public","selected":false},
{"it":"TODO Archive","en":"TODO Archive","fr":"Archive","selected":false},
Expand All @@ -130,6 +130,7 @@ export let init = {
{"it":"TODO Lu sur le web","en":"TODO Lu sur le web","fr":"Lu sur le web","selected":false},
{"it":"TODO Autres informations","en":"TODO Autres informations","fr":"Autres informations","selected":false}
],
categories
categories,
uncontrolledKeywords:[]
}
};
6 changes: 3 additions & 3 deletions yamlEditor/src/js/redux/reducer.js
Original file line number Diff line number Diff line change
Expand Up @@ -24,17 +24,17 @@ export const reducer = function(state,action){
let categories = state.misc.categories.filter(function(category){
return category.selected === true;
});
state.misc.selectedCategories = categories;

//Generate new keywords in state.obj
let keywords = [...rubriques, ...categories];
let keywords = [...rubriques, ...categories,...state.misc.uncontrolledKeywords];
state.obj.keyword_fr = [];
state.obj.keyword_en = [];
for(let i=0;i<keywords.length;i++){
state.obj.keyword_fr.push(keywords[i].fr);
state.obj.keyword_en.push(keywords[i].en);
}

//console.log(keywords,state.misc);
console.log(state.misc);
return state;
}
return state;
Expand Down

0 comments on commit 66537f2

Please sign in to comment.