11import React from 'react' ;
2+ import config from '../../../utils/config.js' ;
3+ import { analytics } from '../../../services/requests' ;
24
35const STYLE_HEADER = {
46 display : 'flex' ,
7+ backgroundColor : '#fff' ,
8+ }
9+
10+ const STYLE_CONTAINER = {
11+ padding : '10px' ,
12+ }
13+
14+ const STYLE_BACK = {
15+ display : 'flex' ,
16+ alignItems : 'center' ,
17+ justifyContent : 'center' ,
18+ backgroundColor : '#fff' ,
19+ padding : '10px' ,
20+ cursor : 'pointer' ,
21+ }
22+
23+ const STYLE_IMAGE = {
24+ marginTop : '10px' ,
25+ height : '240px' ,
26+ backgroundRepeat : 'no-repeat' ,
27+ backgroundPosition : '50% 50%' ,
28+ backgroundSize : 'cover' ,
29+ } ;
30+
31+
32+ const STYLE_IMAGE_DEFAULT = {
33+
34+ }
35+
36+ const STYLE_CONTENT = {
37+ backgroundColor : '#fff' ,
38+ }
39+
40+ const processRS = ( rs ) => {
41+ const configData = config ( ) ;
42+ rs = rs . replace ( "<br>" , " <br>" ) ;
43+ rs = rs . replace ( "<br/>" , " <br/>" ) ;
44+ const regex = / ( \S + .* : \s * ) ? ( h t t p | h t t p s ) : \/ \/ ( \S + ) / g;
45+ const matches = [ ] ;
46+ let match = [ ] ;
47+ while ( ( match = regex . exec ( rs ) ) !== null ) {
48+ matches . push ( match ) ;
49+ }
50+ let links = [ ] ;
51+ if ( matches ) {
52+ links = matches . filter ( m => m ) . map ( ( m , i ) => {
53+ let img = < img src = { configData . baseURI + 'img/misc/web-48.png' } /> ;
54+ if ( ( m [ 3 ] && m [ 3 ] . search ( / ( F | f ) a c e b o o k / ) !== - 1 ) || ( m [ 1 ] && m [ 1 ] . search ( / ( F | f ) a c e b o o k / ) !== - 1 ) ) {
55+ img = < img src = { configData . baseURI + 'img/misc/facebook-48.png' } /> ;
56+ }
57+ if ( ( m [ 3 ] && m [ 3 ] . search ( / ( T | t ) w i t t e r / ) !== - 1 ) || ( m [ 1 ] && m [ 1 ] . search ( / ( T | t ) w i t t e r / ) !== - 1 ) ) {
58+ img = < img src = { configData . baseURI + 'img/misc/twitter-48.png' } /> ;
59+ }
60+ if ( ( m [ 3 ] && m [ 3 ] . search ( / ( i | I ) n s t a g r a m / ) !== - 1 ) || ( m [ 1 ] && m [ 1 ] . search ( / ( i | I ) n s t a g r a m / ) !== - 1 ) ) {
61+ img = < img src = { configData . baseURI + 'img/misc/Instagram-Color.png' } /> ;
62+ }
63+ if ( ( m [ 3 ] && m [ 3 ] . search ( / ( Y | y ) o u t u b e / ) !== - 1 ) || ( m [ 1 ] && m [ 1 ] . search ( / ( Y | y ) o u t u b e / ) !== - 1 ) ) {
64+ img = < img src = { configData . baseURI + 'img/misc/YouTubeButton.png' } /> ;
65+ }
66+ return < a key = { i } style = { { marginRight : '20px' } } href = { `${ m [ 2 ] } ${ m [ 3 ] } } target = "_blank" > { img } </ a > ;
67+ } )
68+ }
69+ return < div > { links } </ div > ;
70+ }
71+
72+ const processWebsite = ( website ) => {
73+ const regex = / \s * ( l i e n \s * : | ( .* ) \s + : ) ? \s * ( \S + ) / ;
74+ const match = regex . exec ( website ) ;
75+ if ( match ) {
76+ const re2 = / ( [ \S ] * ) ( \s + ( ; | \/ ) ( .* ) ) ? / ;
77+ const url = re2 . exec ( match [ 3 ] ) ;
78+ if ( ! url [ 1 ] . startsWith ( "http://" ) && ! url [ 1 ] . startsWith ( "http://" ) ) {
79+ url [ 1 ] = "http://" + url [ 1 ] ;
80+ }
81+ if ( url [ 4 ] ) {
82+ url [ 4 ] == url [ 4 ] . trim ( ) ;
83+ if ( ! url [ 4 ] . startsWith ( "http://" ) && ! url [ 4 ] . startsWith ( "http://" ) ) {
84+ url [ 4 ] = "http://" + url [ 4 ] ;
85+ }
86+ return (
87+ < div >
88+ < a href = { url [ 1 ] } target = "_blank" > { url [ 1 ] } </ a > < br />
89+ < a href = { url [ 4 ] } target = "_blank" > { url [ 4 ] } </ a > < br />
90+ </ div >
91+ ) ;
92+ }
93+ return (
94+ < div >
95+ < a href = { url [ 1 ] } target = "_blank" > { url [ 1 ] } </ a > < br />
96+ </ div >
97+ ) ;
98+ }
99+ return website ;
5100}
6101
7102class FullView extends React . Component {
@@ -11,16 +106,78 @@ class FullView extends React.Component {
11106 close : React . PropTypes . func
12107 }
13108
109+ state = {
110+ showMail : false ,
111+ }
112+
113+ componentWillReceiveProps ( newProps , oldProps ) {
114+ this . setState ( {
115+ showMail : false
116+ } ) ;
117+ }
118+
119+ showMail = ( ) => {
120+ const { showMail} = this . state ;
121+ const { actor} = this . props ;
122+ if ( ! showMail ) {
123+ analytics ( { alt : actor . id , mail : true } ) ;
124+ this . setState ( {
125+ showMail : true
126+ } ) ;
127+ }
128+ }
129+
130+
14131 render ( ) {
15132 const { actor, map} = this . props ;
133+ const { showMail} = this . state ;
134+ const configData = config ( ) ;
135+ const typology = configData [ "typology" ] ;
136+ const typoInfo = typology . find ( t => t . id === actor . id_typologie ) ;
137+ const typoColor = typoInfo ? typoInfo [ "color" ] : '#fff' ;
16138 return (
17139 < div >
18- < div style = { STYLE_HEADER } >
19- < div style = { { width : '50%' } } > { actor . name } </ div >
20- < div style = { { width : '50%' } } > { map } </ div >
140+ < div style = { { ...STYLE_BACK , backgroundColor : typoInfo [ "color" ] } } onClick = { this . props . close } >
141+ Retour à la carte
142+ </ div >
143+ < div style = { { ...STYLE_CONTAINER , backgroundColor : '#fff' } } >
144+ < div style = { { ...STYLE_HEADER } } >
145+ < div style = { { width : '60%' } } >
146+ < div style = { { fontFamily : 'Bebas Neue' , fontSize : '36px' , display : 'flex' , justifyContent : 'center' } } > < div > { actor . name } </ div > </ div >
147+ < div style = { { fontSize : '24px' , fontStyle : 'italic' , display : 'flex' , justifyContent : 'center' } } > < div > { actor . orga_initiative } </ div > </ div >
148+ < div className = "alt-list-view-image" style = { { ...STYLE_IMAGE , backgroundImage : `url(${ configData . baseURI + actor . presa_image } } } />
149+ < div style = { { fontSize : '14px' } } > { `Crédit photo : ${ actor . credit_picto } } </ div >
150+ < div style = { { fontSize : '20px' } } > { actor . lieu_initiative } </ div >
151+ < div style = { { fontSize : '20px' } } > { actor . contact_initiative } </ div >
152+ </ div >
153+ < div style = { { width : '40%' , paddingLeft : '10px' } } >
154+ { map }
155+ < div style = { { fontSize : '20px' , marginTop : '10px' , } } >
156+ < i className = "fa fa-map-marker" aria-hidden = "true" style = { { marginRight : '10px' } } > </ i >
157+ < a target = "_blank" href = { `https://maps.google.com/?q=${ actor . lat_initiative } ${ actor . long_initiative } } > { actor . adress } </ a >
158+ </ div >
159+ < div style = { { fontSize : '20px' , marginTop : '10px' } } > { processWebsite ( actor . website_initiative ) } </ div >
160+ < div style = { { fontSize : '20px' , marginTop : '10px' } } > { processRS ( actor . rs_initiative ) } </ div >
161+ < div style = { { fontSize : '20px' , marginTop : '10px' } } onClick = { this . showMail } >
162+ { showMail ?
163+ ( < div >
164+ < div style = { { fontSize : '20px' , marginTop : '10px' } } > < a href = { `mailto:${ actor . email_initiative } } > { actor . email_initiative } </ a > </ div >
165+ < div style = { { fontSize : '20px' , marginTop : '10px' } } > { actor . tel_initiative } </ div >
166+ </ div > ) :
167+ ( < div >
168+ < i className = "fa fa-address-card" aria-hidden = "true" style = { { marginRight : '10px' } } > </ i >
169+ < span style = { { cursor : 'pointer' } } > Afficher les informations de contact</ span >
170+ </ div > )
171+ }
172+ </ div >
173+ { actor . horaires_initiative && < div style = { { fontSize : '20px' , marginTop : '10px' } } > < b > Horaires :</ b > { ` ${ actor . horaires_initiative } } </ div > }
174+ </ div >
175+ </ div >
176+ < div style = { STYLE_CONTENT } >
177+ < div style = { { fontSize : '20px' } } dangerouslySetInnerHTML = { { __html : actor . objet_initiative } } />
178+ < div style = { { fontSize : '20px' } } dangerouslySetInnerHTML = { { __html : actor . info_initiative } } />
179+ </ div >
21180 </ div >
22- < div > { actor . adress } </ div >
23- < div className = "tmp-hightlight" onClick = { this . props . close } > TODO ajouter un Control a la map pour la re expand</ div >
24181 </ div >
25182 ) ;
26183 }
0 commit comments