Merge pull request #43 from sgmap/references-complementaires

🎨 Les sources non officielles sont affichées au clic seulement

règles/ressources/références/références.yaml

@@ -1,4 +1,4 @@
-# Associtions d'URL de références avec leur logo
+# Association d'URL de référence avec leur logo
 
 service-public.fr:
   image: marianne.png

source/components/rule/References.css

@@ -33,3 +33,8 @@
         border-radius: .3em;
         margin-left: .6em;
 }
+
+li#complementary a {
+  font-style: italic;
+  border-bottom: 1px solid #ddd;
+}

source/components/rule/References.js

@@ -3,28 +3,60 @@ import R from 'ramda'
 import './References.css'
 import references from 'Règles/ressources/références/références.yaml'
 
-export default ({refs}) => (
-	<ul className="references">
-		{R.toPairs(refs).map(
-			([name, link]) => {
-				let refkey = Object.keys(references).find(r => link.indexOf(r) > -1),
-					refData = refkey && references[refkey] || {},
-					domain = (link.indexOf("://") > -1
-						? link.split('/')[2]
-						: link.split('/')[0]).replace('www.', '')
+export default class References extends React.Component {
+	state = {
+		showComplementary: false
+	}
+	render(){
+		let
+			{refs} = this.props,
+			{complementary, official} =
+			R.groupBy( ([name, link]) =>
+				this.findRefKey(link) ? 'official' : 'complementary'
+			)(R.toPairs(refs)),
+			showComplementary = this.state.showComplementary,
+			showComplementaryButton = !this.state.showComplementary && complementary
 
-				return <li key={name}>
-					<span className="meta">
-						<span className="url">
-							{domain}
-							{refData.image &&
-								<img src={require('Règles/ressources/références/' + refData.image)}/> }
-						</span>
-					</span>
-					<a href={link} target="_blank">
-						{R.head(name).toUpperCase() + R.tail(name)}
-					</a>
-				</li>
-		})}
-	</ul>
-)
+		return <ul className="references">{[
+				... official.map(this.renderRef),
+				... (showComplementaryButton ?
+					[<li id="complementary" key="compl">
+							<span className="meta"></span>
+							<a href="#" onClick={()=>this.setState({showComplementary: true})}>
+								sources complémentaires
+							</a>
+						</li>
+					] : []
+				),
+				... (showComplementary ?
+					complementary.map(this.renderRef) : []
+				)
+			]}</ul>
+	}
+	renderRef = ([name, link]) => {
+		let refKey = this.findRefKey(link),
+		refData = refKey && references[refKey] || {},
+		domain = this.cleanDomain(link)
+
+		return <li key={name}>
+			<span className="meta">
+				<span className="url">
+					{domain}
+					{refData.image &&
+						<img src={require('Règles/ressources/références/' + refData.image)}/> }
+				</span>
+			</span>
+			<a href={link} target="_blank">
+				{R.head(name).toUpperCase() + R.tail(name)}
+			</a>
+		</li>
+	}
+	findRefKey(link) {
+		return Object.keys(references).find(r => link.indexOf(r) > -1)
+	}
+	cleanDomain(link) {
+		return (link.indexOf("://") > -1
+			? link.split('/')[2]
+			: link.split('/')[0]).replace('www.', '')
+	}
+}