diff --git a/src/customizations/components/theme/Navigation/Navigation.jsx b/src/customizations/components/theme/Navigation/Navigation.jsx index e1cf771..00fd542 100644 --- a/src/customizations/components/theme/Navigation/Navigation.jsx +++ b/src/customizations/components/theme/Navigation/Navigation.jsx @@ -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({ @@ -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 @@ -165,7 +196,6 @@ class Navigation extends Component { ? 'open' : 'large screen widescreen only' } - onClick={this.closeMobileMenu} >
{this.props.items.map((item) => ( @@ -179,16 +209,41 @@ class Navigation extends Component { ? item.url === `/${lang}` : item.url === '' } + onClick={this.closeMobileMenu} > {item.title} ))}
-
- - EN -
+ + + EN +
+ } + content={ + + {languagesList.map((language) => ( + + + + + {`${language.name} (${language.code})`} + + + + + ))} + + } + position="top left" + /> +
{!this.props.token && (
diff --git a/src/customizations/components/theme/SearchWidget/SearchWidget.jsx b/src/customizations/components/theme/SearchWidget/SearchWidget.jsx index aa61a97..50c1553 100644 --- a/src/customizations/components/theme/SearchWidget/SearchWidget.jsx +++ b/src/customizations/components/theme/SearchWidget/SearchWidget.jsx @@ -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: { @@ -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: [], }; } @@ -64,6 +76,7 @@ class SearchWidget extends Component { this.setState({ text: value, }); + this.searchSuggestions(value); } /** @@ -80,19 +93,29 @@ 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 @@ -100,25 +123,135 @@ class SearchWidget extends Component { */ render() { return ( -
- - - - -
+ <> + + + + + + +
+ + Advanced search + + + A-Z Glossary + +
+ + {this.state.suggestedWords.map((word, index) => ( + + + + + {word} + + + + + ))} + +
+ } + on="click" + popper={{ id: 'popper-container', style: { zIndex: 2000 } }} + trigger={ +
+
+ + + + +
+
+ } + /> + +
+
+ + + + + + {this.state.suggestedWords.length > 0 && ( + + {this.state.suggestedWords.map((word, index) => ( + + {word} + + ))} + + )} +
+
+ ); } } -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); diff --git a/src/index.js b/src/index.js index cb042f0..f5fc597 100644 --- a/src/index.js +++ b/src/index.js @@ -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; }; diff --git a/theme/site/elements/input.overrides b/theme/site/elements/input.overrides index 9e46611..5546161 100644 --- a/theme/site/elements/input.overrides +++ b/theme/site/elements/input.overrides @@ -45,6 +45,43 @@ } } +.ui.search-custom-eea { + justify-content: center; + width: 70px; + &, + &:hover { + background: @darkBlue; + color: white; + } +} + +.eea-search-links { + a { + color: #004B87; + font-weight: normal; + font-size: 12px; + } + .pull-right { + float: right; + } + .pull-left { + float: left; + } +} + +.clearfix:after { + display: table; + clear: both; + content: ""; +} + +.custom-search-pop { + .ui.mini.input > input{ + font-size: 16px; + padding: 0 5px; + } +} + .ui.form .searchbox.field { padding-left: 0.5em !important; }