hexo-theme-amane/layout/search/google_cse.jsx

89 lines
3.6 KiB
JavaScript

const { Component, Fragment } = require('inferno');
const { cacheComponent } = require('../util/cache');
class Google extends Component {
render() {
const { cx, hint, url_for } = this.props;
const js1 = `(function() {
var cx = '${cx}';
var gcse = document.createElement('script');
gcse.type = 'text/javascript';
gcse.async = true;
gcse.src = 'https://cse.google.com/cse.js?cx=' + cx;
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(gcse, s);
})();`;
const js2 = `(function (document, $) {
function debounce(func, wait, immediate) {
var timeout;
return function() {
var context = this, args = arguments;
var later = function() {
timeout = null;
if (!immediate) func.apply(context, args);
};
var callNow = immediate && !timeout;
clearTimeout(timeout);
timeout = setTimeout(later, wait);
if (callNow) func.apply(context, args);
};
};
$(document).on('click', '.navbar-main .search', function () {
$('.searchbox').toggleClass('show');
}).on('click', '.searchbox .searchbox-mask', function () {
$('.searchbox').removeClass('show');
}).on('click', '.searchbox-close', function () {
$('.searchbox').removeClass('show');
}).on('keydown', '.searchbox-input', debounce(function () {
var value = $(this).val();
try {
var element = google.search.cse.element.getElement('searchresults-only0');
if (value.trim() === '') {
element.clearAllResults();
} else {
element.execute(value);
}
} catch (e) {}
}, 300));
})(document, jQuery);`;
return <Fragment>
<link rel="stylesheet" href={url_for('/css/search.css')} />
<div class="searchbox google-cse-search">
<div class="searchbox-container">
<div class="searchbox-input-wrapper">
<input type="text" class="searchbox-input" placeholder={hint} />
<span class="searchbox-close searchbox-selectable"><i class="fa fa-times-circle"></i></span>
</div>
{(() => {
if (cx) {
const innerHtml = '<gcse:searchresults-only></gcse:searchresults-only>';
return <div class="searchbox-result-wrapper" dangerouslySetInnerHTML={{ __html: innerHtml }}></div>;
}
return <div class="notification is-danger">
It seems that you forget to set the <code>cx</code> value for the Google CSE.
Please set it in <code>_config.yml</code>.
</div>;
})()}
</div>
{cx ? <script dangerouslySetInnerHTML={{ __html: js1 }}></script> : null}
</div>
<script dangerouslySetInnerHTML={{ __html: js2 }}></script>
</Fragment>;
}
}
module.exports = cacheComponent(Google, 'search.google', props => {
const { helper, search } = props;
return {
cx: search.cx,
hint: helper.__('search.hint'),
url_for: helper.url_for
};
});