mediatheque

plugins/tntsearch/app/history.js

@@ -0,0 +1,3 @@
+import { createBrowserHistory } from 'history';
+const history = createBrowserHistory();
+export default history;

plugins/tntsearch/app/main.js

@@ -0,0 +1,61 @@
+// polyfills
+import 'babel-polyfill';
+
+import domready from 'domready';
+import search from './search';
+
+const GravTNTSearch = () => {
+    /* const uri = new URI(global.location.href, true);
+    history.replace({
+        search: global.location.search,
+        hash: global.location.hash,
+        state: {
+            historyValue: uri.query.q || '',
+            type: 'tntsearch',
+        },
+    });*/
+
+    const searchForms = document.querySelectorAll('form.tntsearch-form');
+    [...searchForms].forEach((form) => {
+        const input = form.querySelector('.tntsearch-field');
+        const clear = form.querySelector('.tntsearch-clear');
+        const results = form.querySelector('.tntsearch-results');
+        if (!input || !results) { return false; }
+
+        form.addEventListener('submit', (event) => event.preventDefault());
+        input.addEventListener('focus', () => search(input, results));
+        input.addEventListener('input', () => {
+            if (clear) {
+                clear.style.display = '';
+            }
+            search.cancel();
+            search({ input, results });
+        });
+
+        if (clear) {
+            clear.addEventListener('click', () => {
+                if (clear) {
+                    clear.style.display = 'none';
+                }
+                input.value = '';
+                search.cancel();
+                search({ input, results });
+            });
+        }
+
+        return this;
+    });
+
+    document.addEventListener('click', (event) => {
+        [...searchForms].forEach((form) => {
+            if (!form.querySelector('.tntsearch-dropdown')) { return; }
+            if (!form.contains(event.target)) {
+                form.querySelector('.tntsearch-results').style.display = 'none';
+            }
+        });
+    });
+};
+
+domready(GravTNTSearch);
+
+window.GravTNTSearch = GravTNTSearch;

plugins/tntsearch/app/search.js

@@ -0,0 +1,107 @@
+import throttle from 'lodash/throttle';
+import URI from 'url-parse';
+import qs from 'querystringify';
+import history from './history';
+
+export const DEFAULTS = {
+    uri: '',
+    limit: 20,
+    snippet: 300,
+    min: 3,
+    search_type: 'auto',
+    in_page: false,
+    live_update: true,
+};
+
+const historyPush = ({ value = false, params = false } = {}) => {
+    const uri = new URI(global.location.href, true);
+
+    if (params === false) {
+        delete uri.query.q;
+    } else {
+        uri.query.q = params;
+    }
+
+    const querystring = qs.stringify(uri.query, '?');
+
+    history.push(`${uri.pathname}${querystring}`, {
+        historyValue: value, type: 'tntsearch',
+    });
+};
+
+const throttling = throttle(async ({ input, results, historyValue = false } = {}) => {
+    if (!input || !results) { return false; }
+
+    const value = historyValue || input.value.trim();
+    const clear = input.nextElementSibling;
+    const data = Object.assign({}, DEFAULTS, JSON.parse(input.dataset.tntsearch || '{}'));
+
+    if (!value) {
+        results.style.display = 'none';
+
+        if (data.in_page) {
+            clear.style.display = 'none';
+
+            if (historyValue === false && data.live_update) {
+                historyPush({ value });
+            }
+        }
+
+        return false;
+    }
+
+    if (value.length < data.min) {
+        return false;
+    }
+
+    if (data.in_page) {
+        clear.style.display = '';
+    }
+
+    const params = {
+        q: encodeURIComponent(value),
+        l: data.limit,
+        sl: data.snippet,
+        search_type: data.search_type,
+        ajax: true,
+    };
+
+    const startEvent = new Event('tntsearch:start');
+    const query = Object.keys(params)
+        .map(k => `${k}=${params[k]}`)
+        .join('&');
+
+    input.dispatchEvent(startEvent);
+    fetch(`${data.uri}?${query}`, { credentials: 'same-origin' })
+        .then((response) => response.text())
+        .then((response) => {
+            if (data.in_page && data.live_update && !historyValue) {
+                historyPush({ value, params: params.q });
+            }
+            return response;
+        })
+        .then((response) => {
+            const doneEvent = new Event('tntsearch:done');
+            results.style.display = '';
+            results.innerHTML = response;
+            input.dispatchEvent(doneEvent);
+
+            return response;
+        });
+
+    return this;
+}, 350, { leading: false });
+
+history.listen((location) => {
+    if (location.state && location.state.type === 'tntsearch') {
+        location.state.input = document.querySelector('.tntsearch-field-inpage');
+        location.state.results = document.querySelector('.tntsearch-results-inpage');
+
+        if (location.state.input && location.state.results) {
+            location.state.input.value = location.state.historyValue;
+            throttling({ ...location.state });
+        }
+    }
+});
+
+export default throttling;