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}
))}
+ }
+ 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 (
-
-
-
-
-
+ <>
+
+
+
+
+
+
+
+
+ {this.state.suggestedWords.map((word, index) => (
+
+
+
+
+ {word}
+
+
+
+
+ ))}
+
+
+ }
+ on="click"
+ popper={{ id: 'popper-container', style: { zIndex: 2000 } }}
+ trigger={
+
+
+
+
+
+
+
+ }
+ />
+
+
+
+
+
+
+
+ {this.state.suggestedWords.length > 0 && (
+
+ )}
+
+
+ >
);
}
}
-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;
}