Skip to content

Commit

Permalink
fix after merge with develop
Browse files Browse the repository at this point in the history
  • Loading branch information
Alex Medesan committed Jan 21, 2021
1 parent ca37c7f commit 4672d9a
Show file tree
Hide file tree
Showing 4 changed files with 277 additions and 46 deletions.
83 changes: 69 additions & 14 deletions src/customizations/components/theme/Navigation/Navigation.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,19 +3,18 @@
* @module components/theme/Navigation/Navigation
*/

import React, { Component } from 'react';
import { getNavigation } from '@plone/volto/actions';
import { Anontools, SearchWidget } from '@plone/volto/components';
import { getBaseUrl } from '@plone/volto/helpers';
import cx from 'classnames';
import PropTypes from 'prop-types';
import React, { Component } from 'react';
import { defineMessages, injectIntl } from 'react-intl';
import { connect } from 'react-redux';
import { compose } from 'redux';
import { NavLink } from 'react-router-dom';
import { defineMessages, injectIntl } from 'react-intl';
import { Menu, Icon, Image } from 'semantic-ui-react';
import cx from 'classnames';
import { getBaseUrl } from '@plone/volto/helpers';
import { compose } from 'redux';
import { Icon, Image, List, Menu, Popup } from 'semantic-ui-react';
import { settings } from '~/config';
import { getNavigation } from '@plone/volto/actions';
import { Anontools, SearchWidget } from '@plone/volto/components';

import EUflag from '../../../../../theme/site/assets/images/europe-flag.svg';

const messages = defineMessages({
Expand All @@ -29,6 +28,38 @@ const messages = defineMessages({
},
});

const languagesList = [
{ name: 'Albanian', code: 'sq' },
{ name: 'Български', code: 'bg' },
{ name: 'Bosnian', code: 'bs' },
{ name: 'čeština', code: 'cs' },
{ name: 'Hrvatski', code: 'hr' },
{ name: 'dansk', code: 'da' },
{ name: 'Nederlands', code: 'nl' },
{ name: 'ελληνικά', code: 'el' },
{ name: 'English', code: 'en' },
{ name: 'eesti', code: 'et' },
{ name: 'Suomi', code: 'fi' },
{ name: 'Français', code: 'fr' },
{ name: 'Deutsch', code: 'de' },
{ name: 'magyar', code: 'hu' },
{ name: 'Íslenska', code: 'is' },
{ name: 'italiano', code: 'it' },
{ name: 'Latviešu', code: 'lv' },
{ name: 'lietuvių', code: 'lt' },
{ name: 'Macedonian', code: 'mk' },
{ name: 'Malti', code: 'mt' },
{ name: 'Norsk', code: 'no' },
{ name: 'polski', code: 'pl' },
{ name: 'Português', code: 'pt' },
{ name: 'Română', code: 'ro' },
{ name: 'slovenčina', code: 'sk' },
{ name: 'Slovenščina', code: 'sl' },
{ name: 'Español', code: 'es' },
{ name: 'Svenska', code: 'sv' },
{ name: 'Türkçe', code: 'tr' },
];

/**
* Navigation container class.
* @class Navigation
Expand Down Expand Up @@ -165,7 +196,6 @@ class Navigation extends Component {
? 'open'
: 'large screen widescreen only'
}
onClick={this.closeMobileMenu}
>
<div className="navigation-links">
{this.props.items.map((item) => (
Expand All @@ -179,16 +209,41 @@ class Navigation extends Component {
? item.url === `/${lang}`
: item.url === ''
}
onClick={this.closeMobileMenu}
>
{item.title}
</NavLink>
))}
</div>
<div className="tools-wrapper">
<div className="tools-change-language">
<Icon name="globe" size="big" />
<span>EN</span>
</div>
<Popup
on="click"
trigger={
<div className="tools-change-language">
<Icon name="globe" size="big" />
<span>EN</span>
</div>
}
content={
<List divided relaxed>
{languagesList.map((language) => (
<List.Item>
<List.Content>
<List.Description as="a">
<a
href={`https://www.eea.europa.eu/${language.code}`}
>
{`${language.name} (${language.code})`}
</a>
</List.Description>
</List.Content>
</List.Item>
))}
</List>
}
position="top left"
/>

<div className="tools-search-wrapper">
{!this.props.token && (
<div className="tools">
Expand Down
197 changes: 165 additions & 32 deletions src/customizations/components/theme/SearchWidget/SearchWidget.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,12 +3,23 @@
* @module components/theme/SearchWidget/SearchWidget
*/

import { getProxiedExternalContent } from '@eeacms/volto-corsproxy/actions';
import { createContent } from '@plone/volto/actions';
import { PropTypes } from 'prop-types';
import React, { Component } from 'react';
import { defineMessages, injectIntl } from 'react-intl';
import { connect } from 'react-redux';
import { withRouter } from 'react-router-dom';
import { Form, Input, Icon } from 'semantic-ui-react';
import { compose } from 'redux';
import { PropTypes } from 'prop-types';
import { defineMessages, injectIntl } from 'react-intl';
import {
Button,
Form,
Icon,
Input,
List,
Menu,
Popup
} from 'semantic-ui-react';

const messages = defineMessages({
search: {
Expand Down Expand Up @@ -46,10 +57,11 @@ class SearchWidget extends Component {
super(props);
this.onChangeText = this.onChangeText.bind(this);
this.onChangeSection = this.onChangeSection.bind(this);
this.onSubmit = this.onSubmit.bind(this);
this.onGoToSearchPage = this.onGoToSearchPage.bind(this);
this.state = {
text: '',
section: false,
suggestedWords: [],
};
}

Expand All @@ -64,6 +76,7 @@ class SearchWidget extends Component {
this.setState({
text: value,
});
this.searchSuggestions(value);
}

/**
Expand All @@ -80,45 +93,165 @@ class SearchWidget extends Component {
}

/**
* Submit handler
* @method onSubmit
* @param {event} event Event object.
* @returns {undefined}
* On go to the
* @method onGoToSearchPage
*/
onSubmit(event) {
const section = this.state.section ? `&path=${this.props.pathname}` : '';
this.props.history.push(
`/search?SearchableText=${this.state.text}${section}`,
);
event.preventDefault();
onGoToSearchPage() {
window.location = `http://search.apps.eea.europa.eu?q=${this.state.text}`;
}

/**
* will search for suggestions based on partial match
* @param {string} data
*/
searchSuggestions = async (data) => {
const searchTernUrl = `https://www.eea.europa.eu/eea-custom-search.tags?q=${data}`;
const result = await this.props.getProxiedExternalContent(searchTernUrl);
const resultFinal = Array.isArray(result) ? result : JSON.parse(result);

if (Array.isArray(resultFinal)) {
this.setState({ suggestedWords: resultFinal });
} else {
this.setState({ suggestedWords: [] });
}
};

/**
* Render method.
* @method render
* @returns {string} Markup for the component.
*/
render() {
return (
<Form action="/search" onSubmit={this.onSubmit}>
<Form.Field className="searchbox">
<Input
aria-label={this.props.intl.formatMessage(messages.search)}
onChange={this.onChangeText}
name="SearchableText"
value={this.state.text}
transparent
autoComplete="off"
placeholder={this.props.intl.formatMessage(messages.searchSite)}
title={this.props.intl.formatMessage(messages.search)}
/>
<button aria-label={this.props.intl.formatMessage(messages.search)}>
<Icon name="search" size="large" />
</button>
</Form.Field>
</Form>
<>
<Popup
position="bottom center"
style={{ width: '446px', maxWidth: '500px' }}
className="lol large screen only custom-search-pop"
content={
<div>
<Input
type="text"
onChange={this.onChangeText}
placeholder="Search..."
action
fluid
size="mini"
value={this.state.text}
>
<input />
<Button
className="search-custom-eea"
onClick={this.onGoToSearchPage}
icon="search"
></Button>
</Input>

<div className="eea-search-links clearfix">
<a
href="http://search.apps.eea.europa.eu"
className="pull-left"
>
<span>Advanced search</span>
</a>
<a
className="pull-right"
href="https://www.eea.europa.eu/help/glossary"
>
A-Z Glossary
</a>
</div>
<List divided relaxed>
{this.state.suggestedWords.map((word, index) => (
<List.Item key={index}>
<List.Content>
<List.Description as="a">
<a href={`http://search.apps.eea.europa.eu?q=${word}`}>
{word}
</a>
</List.Description>
</List.Content>
</List.Item>
))}
</List>
</div>
}
on="click"
popper={{ id: 'popper-container', style: { zIndex: 2000 } }}
trigger={
<div className="large screen only">
<Form>
<Form.Field className="searchbox ">
<Input
aria-label={this.props.intl.formatMessage(messages.search)}
transparent
disabled
autoComplete="off"
placeholder={this.props.intl.formatMessage(
messages.searchSite,
)}
title={this.props.intl.formatMessage(messages.search)}
/>
<button
aria-label={this.props.intl.formatMessage(messages.search)}
>
<Icon name="search" size="large" />
</button>
</Form.Field>
</Form>
</div>
}
/>

<div className="mobile tablet computer only">
<Form>
<Form.Field className="searchbox">
<Input
aria-label={this.props.intl.formatMessage(messages.search)}
name="SearchableText"
transparent
autoComplete="off"
placeholder={this.props.intl.formatMessage(messages.searchSite)}
title={this.props.intl.formatMessage(messages.search)}
onChange={this.onChangeText}
value={this.state.text}
/>

<button
aria-label={this.props.intl.formatMessage(messages.search)}
>
<Icon name="search" size="large" />
</button>
</Form.Field>
{this.state.suggestedWords.length > 0 && (
<Menu vertical fluid>
{this.state.suggestedWords.map((word, index) => (
<Menu.Item
key={`menu-${index}`}
href={`http://search.apps.eea.europa.eu?q=${word}`}
>
{word}
</Menu.Item>
))}
</Menu>
)}
</Form>
</div>
</>
);
}
}

export default compose(withRouter, injectIntl)(SearchWidget);
export default compose(
withRouter,
injectIntl,
connect(
(state, ownProps) => ({
request: state.content.subrequests[ownProps.block] || {},
content: state.content.subrequests[ownProps.block]?.data,
subrequests: state.content.subrequests,
thestate: state,
}),
{ createContent, getProxiedExternalContent },
),
)(SearchWidget);
6 changes: 6 additions & 0 deletions src/index.js
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,10 @@
const applyConfig = (config) => {
// Default CORS: www.eea.europa.eu
config.settings.allowed_cors_destinations = [
...(config.settings.allowed_cors_destinations || []),
'www.eea.europa.eu/eea-custom-search.tags?q=',
];

return config;
};

Expand Down
Loading

0 comments on commit 4672d9a

Please sign in to comment.