render: function render () {
return (
<div className="flexbox search-page-filters__panel-height">
<div className={cx("one-third flexbox__item v-middle search-page-filters__image-button search-page-filters__image-button--with-icon", {
'search-page-filters__image-button--active': this.state.location_store.isUserLocated()
}) }
onClick={this.locateUser}
style={ { backgroundImage: 'url("https://dqggv9zcmarb3.cloudfront.net/assets/search-page-app/filter-where-around-me.jpg")' } }>
<div className="search-page-filters__image-button-curtain"></div>
<i className="search-page-filters__image-icon fa fa-around-me"></i>
<div className="search-page-filters__image-text">Autour de moi</div>
</div>
<div className={cx("one-third flexbox__item v-middle search-page-filters__image-button search-page-filters__image-button--with-icon", {
'search-page-filters__image-button--active': this.state.location_store.isFilteredByAddress()
}) }
onClick={this.showAddressPanel}
style={ { backgroundImage: 'url("https://dqggv9zcmarb3.cloudfront.net/assets/search-page-app/filter-where-address.jpg")' } }>
<div className="search-page-filters__image-button-curtain"></div>
<i className="search-page-filters__image-icon fa fa-address"></i>
<div className="search-page-filters__image-text">{"Autour d'une adresse"}</div>
</div>
<div className={cx("one-third flexbox__item v-middle search-page-filters__image-button search-page-filters__image-button--with-icon", {
'search-page-filters__image-button--active': this.state.metro_store.getSelectedLines().length > 0,
'hidden': !this.shouldShowMetroPanel()
}) }
onClick={ this.showMetroPanel }
style={ { backgroundImage: 'url("https://dqggv9zcmarb3.cloudfront.net/assets/search-page-app/filter-where-metro.jpg")' } }>
<div className="search-page-filters__image-button-curtain"></div>
<i className="search-page-filters__image-icon fa fa-metro"></i>
<div className="search-page-filters__image-text">{"Près d'une station de métro"}</div>
</div>
</div>
);
}
render: function render () {
if (!this.props.cards) { return false; }
var width_class = 'grid__item v-middle one-quarter palm-one-whole';
var cards = this.props.cards.map(function (card, index) {
return (
<Card card={ card }
width_class={ width_class }
follow_links={ true }
lazyload={ true }
key={ index } />
);
});
var classes = cx('grid center-block relative', this.props.classes);
return (
<div className={ classes }>
<a className='link-not-outlined grid_item v-middle muted-link one-eighth visuallyhidden--palm inline-block text--center' onClick={ this.props.prevPage } href='javascript:void(0)'>
<i className={ cx('fa fa-3x gray-light fa-chevron-left', { visuallyhidden: this.props.current_page == 0 }) }></i>
</a>
{ cards }
<a className='link-not-outlined grid_item v-middle muted-link one-eighth visuallyhidden--palm inline-block text--center' onClick={ this.props.nextPage } href='javascript:void(0)'>
<i className={ cx('fa fa-3x gray-light fa-chevron-right', { visuallyhidden: (this.props.current_page + 1) == this.props.total_pages }) }></i>
</a>
</div>
);
},
render() {
const {
active,
activeTab,
className,
label,
labelClassName,
id,
showErrorBadge
} = this.props;
const classes = classNames(
"menu-tabbed-item",
{
active: active || activeTab === id
},
className
);
const labelClasses = classNames(
"menu-tabbed-item-label",
{ "menu-tabbed-item-label-with-badge": showErrorBadge },
labelClassName
);
return (
<div className={classes}>
<span className={labelClasses} onClick={this.handleClick}>
{label}
{this.getErrorBadge()}
</span>
{this.getChildren()}
</div>
);
}
render() {
let {
className,
majorLinkClassName,
minorLinkWrapperClassName
} = this.props;
let classes = classNames(
'container container-fluid container-pod',
'flush flush-top flush-bottom',
className
);
let majorLinkClasses = classNames(
'text-overflow',
majorLinkClassName
);
let minorLinkWrapperClasses = classNames(
'table-cell-details-secondary flex-box',
'flex-box-align-vertical-center table-cell-flex-box',
minorLinkWrapperClassName
);
return (
<div className={classes}>
<div className={majorLinkClasses}>
{this.getMajorLink()}
</div>
<div className={minorLinkWrapperClasses}>
{this.getMinorLinks()}
</div>
</div>
);
}
renderLabel: function renderLabel() {
if (this.props.layout === 'elementOnly') {
return '';
}
var labelClassNames = [];
labelClassNames.push('control-label');
if (this.props.layout === 'horizontal') {
labelClassNames.push('col-sm-3');
}
labelClassNames.push(this.props.labelClassName);
if (this.props.fakeLabel) {
return React.createElement(
'div',
{ className: classNames(labelClassNames) },
React.createElement(
'strong',
null,
this.props.label,
this.props.required ? ' *' : null
)
);
}
return React.createElement(
'label',
{ className: classNames(labelClassNames), htmlFor: this.props.htmlFor },
this.props.label,
this.props.required ? ' *' : null
);
},
renderLabel: function() {
if (this.props.layout === 'elementOnly') {
return '';
}
var labelClassNames = [];
labelClassNames.push('control-label');
if (this.props.layout === 'horizontal') {
labelClassNames.push('col-sm-3');
}
labelClassNames.push(this.props.labelClassName);
if (this.props.fakeLabel) {
return (
<div className={classNames(labelClassNames)}>
<strong>
{this.props.label}
{this.props.required ? ' *' : null}
</strong>
</div>
);
}
return (
<label className={classNames(labelClassNames)} htmlFor={this.props.htmlFor}>
{this.props.label}
{this.props.required ? ' *' : null}
</label>
);
},
getServicesLink(key) {
const minorLinkClasses = classNames(
"text-overflow service-link",
this.props.minorLinkClassName
);
const minorLinkAnchorClasses = classNames(
"table-cell-link-secondary",
this.props.minorLinkAnchorClassName
);
return (
<div key={key} className="table-cell-value">
<div className={minorLinkClasses}>
<Link
className={minorLinkAnchorClasses}
to="/services"
title="services"
>
Services
</Link>
</div>
</div>
);
}
render() {
const {
className,
majorLinkClassName,
minorLinkWrapperClassName
} = this.props;
const classes = classNames("nested-service-links", className);
const majorLinkClasses = classNames("text-overflow", majorLinkClassName);
const minorLinkWrapperClasses = classNames(
"table-cell-details-secondary flex",
"flex-align-items-center table-cell-flex-box",
minorLinkWrapperClassName
);
return (
<div className={classes}>
<div className={majorLinkClasses}>
{this.getMajorLink()}
</div>
<div className={minorLinkWrapperClasses}>
{this.getMinorLinks()}
</div>
</div>
);
}
const Row = props => {
const {
elementWrapperClassName,
errorMessages,
required,
rowClassName,
showErrors,
layout,
label,
children,
} = props;
let element = children;
if (layout === 'elementOnly') {
return <span>{element}</span>;
}
const cssClasses = {
row: ['form-group'],
elementWrapper: [],
};
if (showErrors && (errorMessages.length > 0 || required)) {
cssClasses.row.push('text-danger');
}
// We should render the label if there is label text defined, or if the
// component is required (so a required symbol is displayed in the label tag)
const shouldRenderLabel = label !== null || required;
if (layout === 'horizontal') {
cssClasses.row.push('form-row');
if (!shouldRenderLabel) {
cssClasses.elementWrapper.push('offset-sm-3');
}
cssClasses.elementWrapper.push('col-sm-9');
cssClasses.elementWrapper.push(elementWrapperClassName);
element = (
<div className={classNames(cssClasses.elementWrapper)}>{element}</div>
);
}
cssClasses.row.push(rowClassName);
return (
<div className={classNames(cssClasses.row)}>
{shouldRenderLabel ? <Label {...props} /> : null}
{element}
</div>
);
};
render: function render () {
var full_text_search;
var height_class = 'search-page-filters__panel-height';
var current_panel = this.state.filter_store.get('current_panel');
var classes = cx('west search-page-filters-wrapper search-page-filters__subject-search-panel', {
'search-page-filters-wrapper--active': (current_panel == FilterPanelConstants.FILTER_PANELS.SUBJECT_FULL_TEXT),
'search-page-filters-wrapper--full': this.state.location_store.get('fullscreen'),
'search-page-filters-wrapper--fullscreen height-100-percent': (this.props.fullscreen || window.is_mobile)
});
if ((this.props.fullscreen || window.is_mobile)) { height_class = 'height-100-percent'; }
full_text_search = "Tous les cours pour \"" + this.state.autocomplete_store.get('full_text_search') + "\"";
if (this.state.autocomplete_store.get('total_cards')) {
full_text_search += " (" + this.state.autocomplete_store.get('total_cards') + ")"
}
return (
<div className={classes}>
<div className="text--left main-container main-container--1000">
<div className={"v-middle input-with-button " + height_class}>
<div className={cx("flexbox search-page__input-suggestion search-page__input-suggestion--bordered", {
'search-page__input-suggestion--active': (!this.state.autocomplete_store.get('selected_list_name'))
})}
onMouseOver={this.hoverResult(null, 0)}
onClick={this.searchFullText}>
<div className="flexbox__item v-middle text--center">
<i className="fa fa-search white"></i>
</div>
<div className="flexbox__item v-middle white soft--sides">
{full_text_search}
</div>
<div className="flexbox__item v-middle blue-green text--right soft-half--right">
<i className="fa fa-chevron-right"></i>
</div>
</div>
<div className="grid">
<div className="grid grid__item two-thirds palm-one-whole">
<div className="blue-green f-weight-600 search-page__input-suggestion-label">
DISCIPLINES
</div>
{this.subjects()}
</div>
<div className="grid grid__item one-third palm-one-whole">
<div className="blue-green f-weight-600 search-page__input-suggestion-label">
PROFESSEURS, ÉCOLES, ASSOCIATIONS
</div>
{this.structures()}
</div>
</div>
</div>
</div>
</div>
);
},
render() {
let {
className,
dividerClassName,
mediaWrapperClassName,
navigationTabs
} = this.props;
let classes = classNames(
'container container-fluid container-pod container-pod-short',
'flush flush-top',
className
);
let dividerClasses = classNames(
'container-pod container-pod-short flush-top',
'container-pod-divider-bottom container-pod-divider-bottom-align-right',
'container-pod-divider-inverse',
{'flush-bottom': !!navigationTabs},
dividerClassName
);
let mediaWrapperClasses = classNames(
'media-object-spacing-wrapper media-object-spacing-narrow',
'media-object-offset',
mediaWrapperClassName
);
return (
<div className={classes}>
<div className={dividerClasses}>
<div className={mediaWrapperClasses}>
<div className="media-object flex-box flex-box-align-vertical-center page-header-container">
<div className="page-header-container-left">
{this.getIcon()}
<div className="media-object-item">
{this.getTitle()}
{this.getSubTitle()}
</div>
</div>
<div className="page-header-container-right">
{this.renderActionButtons()}
</div>
</div>
</div>
{navigationTabs}
</div>
</div>
);
}
let tabElements = tabs.map(function (tab, index) {
let {isActive} = tab;
let classes = classNames('tab-item', {active: isActive});
let linkClasses = classNames('tab-item-label', {active: isActive});
return (
<li className={classes} key={index}>
<Link className={linkClasses} to={tab.routePath}>
<span className="tab-item-label-text">
{tab.label}
</span>
</Link>
</li>
);
});
render() {
let {
children,
className,
detailViewHeaderContentWrapperClassNames,
detailViewHeaderContentHeadingClassNames,
navigationTabs
} = this.props;
let detailViewHeaderClasses = classNames(
'detail-view-header flex-item-shrink-0',
{'has-tabs': !!navigationTabs},
className
);
let detailViewHeaderContentWrapperClasses = classNames(
'detail-view-header-content-wrapper',
detailViewHeaderContentWrapperClassNames
);
let detailViewHeaderContentHeadingClasses = classNames(
'detail-view-header-content-heading',
detailViewHeaderContentHeadingClassNames
);
return (
<div className={detailViewHeaderClasses}>
<div className={detailViewHeaderContentWrapperClasses}>
<div className={detailViewHeaderContentHeadingClasses}>
<div className="detail-view-header-content-primary">
{this.getIcon()}
<div className="detail-view-header-title">
{this.getTitle()}
</div>
</div>
<div className="detail-view-header-content-secondary">
{this.renderActionButtons()}
</div>
</div>
<div className="detail-view-header-sub-heading">
{this.getSubTitle()}
</div>
</div>
{children}
{navigationTabs}
</div>
);
}
return this.props.buttonDefinition.map((buttonDefinition, i) => {
let buttonClassSet = {
disabled: this.props.disabled
};
buttonClassSet[buttonDefinition.className] = true;
buttonClassSet = classNames(buttonClassSet);
let handleOnClick = function() {};
if (buttonDefinition.isClose) {
handleOnClick = this.props.onClose;
}
if (buttonDefinition.isSubmit) {
handleOnClick = this.handleTriggerSubmit;
}
if (buttonDefinition.onClick) {
handleOnClick = buttonDefinition.onClick;
}
return (
<button
className={buttonClassSet}
disabled={this.props.disabled}
key={i}
onClick={handleOnClick}
>
{buttonDefinition.text}
</button>
);
});
return this.state.autocomplete_store.get('structures').map(function(structure, index) {
var avatar;
if (structure.get('avatar')) {
avatar = (<img className="block rounded--circle autocomplete-structure-logo" height="45" width="45" src={structure.get('avatar')} />);
} else {
avatar = (<div className={"inline-block autocomplete-structure-logo rounded--circle text--center white bg-" + structure.get('dominant_root_subject_slug')}>
<i className="fa fa-user-big delta"></i>
</div>);
}
return (<div className={cx("flexbox search-page__input-suggestion search-page__input-suggestion--structures flexbox search-page__input-suggestion--bordered", {
'search-page__input-suggestion--active': (this.state.autocomplete_store.get('selected_index') == index && this.state.autocomplete_store.get('selected_list_name') == 'structures')
})}
onMouseOver={this.hoverResult('structures', index)}
onClick={this.goToStructure(structure.get('slug'))}>
<div className="flexbox__item visuallyhidden--palm v-middle">
{avatar}
</div>
<div className="flexbox__item one-whole v-middle white soft--sides"
dangerouslySetInnerHTML={{__html: structure.get('_highlightResult').name.value }}>
</div>
<div className="flexbox__item v-middle blue-green text--right soft-half--right">
<i className="fa fa-chevron-right"></i>
</div>
</div>)
}, this);
render() {
const { className, selectedTab, ...otherProps } = this.props;
const baseClassName = classnames({
"rui": true,
"tab-list": true,
"nav": true,
"nav-pills": true
}, className);
const elements = Children.map(this.props.children, (child, index) => {
const newProps = {
index,
active: false
};
if (selectedTab === child.props.value || selectedTab === index) {
newProps.active = true;
}
return React.cloneElement(child, newProps);
});
return (
<ul {...otherProps} className={baseClassName} role="tabList">
{elements}
</ul>
);
}
getMinorLinks() {
let componentKey = 0;
let {minorLinkClassName, taskID} = this.props;
let minorLinkClasses = classNames(
'text-overflow service-link',
minorLinkClassName
);
let nestedGroups = this.getServicePathParts();
let popCount = 1;
if (taskID != null) {
popCount = 0;
}
nestedGroups = nestedGroups.slice(0, nestedGroups.length - popCount);
let links = nestedGroups.reduce((components, part, index) => {
let id = encodeURIComponent(nestedGroups.slice(0, index + 1).join('/'));
components.push(
this.getMinorLink(part, {id}, componentKey++, minorLinkClasses)
);
if (index !== nestedGroups.length - 1) {
components.push(this.getCrumbDivider(componentKey++));
}
return components;
}, []);
return [this.getServicesLink(componentKey++), ...links];
}
renderAddButton() {
const { addButton } = this.props;
if (Array.isArray(addButton) && addButton.length > 0) {
const dropdownElements = addButton.map(getDropdownAction);
return (
<PageHeaderActionsMenu iconID="plus">
{dropdownElements}
</PageHeaderActionsMenu>
);
}
if (addButton != null) {
const { label, onItemSelect, className } = addButton;
const buttonClasses = classNames(
"button button-link button-narrow",
className
);
const button = (
<button className={buttonClasses} onClick={onItemSelect}>
<Icon id="plus" size="mini" />
</button>
);
if (label != null) {
return <Tooltip content={label}>{button}</Tooltip>;
}
return button;
}
}
const FormGroup = props => {
const {
children,
className,
errorClassName,
hasNarrowMargins,
applyLabelOffset,
showError
} = props;
const clonedChildren = React.Children.map(children, child => {
if (child != null && !showError && child.type === FieldError) {
return null;
}
return child;
});
const classes = classNames(
{
[errorClassName]: showError,
"form-group-without-top-label": applyLabelOffset,
"column-auto flush-left flush-right": hasNarrowMargins
},
"form-group",
className
);
return (
<div className={classes} {...omit(props, Object.keys(FormGroup.propTypes))}>
{clonedChildren}
</div>
);
};
getMajorLink() {
let label;
const { majorLinkAnchorClassName, serviceID, taskID } = this.props;
let routePath;
const anchorClasses = classNames(
"table-cell-link-primary",
majorLinkAnchorClassName
);
if (taskID != null) {
label = taskID;
routePath = `/services/detail/${serviceID}/tasks/${taskID}`;
} else {
label = this.getServicePathParts().pop();
routePath = `/services/detail/${encodeURIComponent(serviceID)}`;
}
return (
<Link className={anchorClasses} to={routePath} title={label}>
<span className="text-overflow">
{label}
</span>
</Link>
);
}
const ReactionAvatar = (props) => {
const { className, email, name, size, src, style } = props;
const classes = classnames({
"rui": true,
"rui-avatar": true
}, className);
return (
<Avatar
className={classes}
email={email}
name={name}
size={size}
src={src}
style={style}
// Below props usually aren't passed, and will use defaults
color={props.color}
currentUser={props.currentUser}
facebookId={props.facebookId}
fgColor={props.fgColor}
googleId={props.googleId}
md5Email={props.md5Email}
round={props.round}
skypeId={props.skypeId}
textSizeRatio={props.textSizeRatio}
twitterHandle={props.twitterHandle}
value={props.value}
vkontakteId={props.vkontakteId}
/>
);
};
const Label = props => {
const {layout, label, htmlFor, labelClassName, fakeLabel, required} = props;
if (layout === 'elementOnly') {
return null;
}
const labelClassNames = classNames([
'col-form-label',
layout === 'horizontal' ? 'col-sm-3' : '',
labelClassName,
]);
if (fakeLabel) {
return (
<div className={labelClassNames} data-required={required}>
{label}
<RequiredSymbol required={required} />
</div>
);
}
return (
<label
className={labelClassNames}
data-required={required}
htmlFor={htmlFor}>
{label}
<RequiredSymbol required={required} />
</label>
);
};
const EmbedPreview = ( props ) => {
const { preview, url, type, caption, onCaptionChange, isSelected, className, icon, label } = props;
const { scripts } = preview;
const html = 'photo' === type ? getPhotoHtml( preview ) : preview.html;
const parsedUrl = parse( url );
const cannotPreview = includes( HOSTS_NO_PREVIEWS, parsedUrl.host.replace( /^www\./, '' ) );
// translators: %s: host providing embed content e.g: www.youtube.com
const iframeTitle = sprintf( __( 'Embedded content from %s' ), parsedUrl.host );
const sandboxClassnames = classnames( type, className, 'wp-block-embed__wrapper' );
const embedWrapper = 'wp-embed' === type ? (
<WpEmbedPreview
html={ html }
/>
) : (
<div className="wp-block-embed__wrapper">
<SandBox
html={ html }
scripts={ scripts }
title={ iframeTitle }
type={ sandboxClassnames }
/>
</div>
);
return (
<figure className={ classnames( className, 'wp-block-embed', { 'is-type-video': 'video' === type } ) }>
{ ( cannotPreview ) ? (
<Placeholder icon={ <BlockIcon icon={ icon } showColors /> } label={ label }>
<p className="components-placeholder__error"><a href={ url }>{ url }</a></p>
<p className="components-placeholder__error">{ __( 'Previews for this are unavailable in the editor, sorry!' ) }</p>
</Placeholder>
) : embedWrapper }
{ ( ! RichText.isEmpty( caption ) || isSelected ) && (
<RichText
tagName="figcaption"
placeholder={ __( 'Write caption…' ) }
value={ caption }
onChange={ onCaptionChange }
inlineToolbar
/>
) }
</figure>
);
};
render() {
let {props} = this;
let contentClasses = classNames('pod', props.contentClassName);
let scrollbarClasses = classNames(
'page-body gm-scrollbar-container-flex',
props.scrollbarClassName
);
return (
<GeminiScrollbar className={scrollbarClasses}>
<div className={contentClasses}>
{props.children}
</div>
</GeminiScrollbar>
);
}
const FieldTextarea = (props) => {
let {className} = props;
let classes = classNames('form-control', className);
return (
<textarea className={classes} {...omit(props, ['className'])} />
);
};
render: function() {
if (this.props.layout === 'elementOnly') {
return (
<span>
{this.props.children}
</span>
);
}
var cssClasses = {
row: ['form-group'],
elementWrapper: []
};
if (this.props.hasErrors) {
cssClasses.row.push('has-error');
cssClasses.row.push('has-feedback');
}
var element = this.props.children;
if (this.props.layout === 'horizontal') {
// Horizontal layout needs a 'row' class for Bootstrap 4
cssClasses.row.push('row');
cssClasses.elementWrapper.push('col-sm-9');
cssClasses.elementWrapper.push(this.props.elementWrapperClassName);
element = (
<div className={classNames(cssClasses.elementWrapper)}>
{this.props.children}
</div>
);
}
cssClasses.row.push(this.props.rowClassName);
return (
<div className={classNames(cssClasses.row)}>
{this.renderLabel()}
{element}
</div>
);
}
const ButtonContainer = mapProps(({ actionType, className, sheet, style, theme, ...rest }) => ({
className: cx(
sheet.classes.button, sheet.classes[actionType],
theme.classes.button, theme.classes[actionType],
className
),
style: merge(theme.styles.button, theme.styles[actionType], style),
...rest,
}))('button');
render() {
let classes = classNames('advanced-section', this.props.className);
return (
<div className={classes}>
{this.getChildren()}
</div>
);
}
render: function render() {
if (this.props.layout === 'elementOnly') {
return React.createElement(
'span',
null,
this.props.children
);
}
var cssClasses = {
row: ['form-group'],
elementWrapper: []
};
if (this.props.hasErrors) {
cssClasses.row.push('has-error');
cssClasses.row.push('has-feedback');
}
var element = this.props.children;
if (this.props.layout === 'horizontal') {
// Horizontal layout needs a 'row' class for Bootstrap 4
cssClasses.row.push('row');
cssClasses.elementWrapper.push('col-sm-9');
cssClasses.elementWrapper.push(this.props.elementWrapperClassName);
element = React.createElement(
'div',
{ className: classNames(cssClasses.elementWrapper) },
this.props.children
);
}
cssClasses.row.push(this.props.rowClassName);
return React.createElement(
'div',
{ className: classNames(cssClasses.row) },
this.renderLabel(),
element
);
}
const AdvancedSectionLabel = ({className, children, isExpanded, onClick}) => {
let classes = classNames('advanced-section-label clickable', className);
return (
<a className={classes} onClick={onClick}>
{getStateIndicator(isExpanded)}
{children}
</a>
);
};