Basic widget handling

Adds handling for parameters:
disablefilter - disable search filters
disableclick - disable book click action
disabledownload - disable download button
disabledesc - disable description

static/skin/index.js

@@ -17,6 +17,7 @@ const kiwixServe = (function() {
     let params = new URLSearchParams(window.location.search || filters || '');
     let timer;
     let languages = {};
+    let allowBookClick = true;
 
     function queryUrlBuilder() {
         let url = `${root}/catalog/search?`;
@@ -85,7 +86,7 @@ const kiwixServe = (function() {
     }
 
     function generateBookHtml(book, sort = false) {
-        const link = book.querySelector('link[type="text/html"]').getAttribute('href');
+        let link = book.querySelector('link[type="text/html"]').getAttribute('href');
         let iconUrl;
         book.querySelectorAll('link[rel="http://opds-spec.org/image/thumbnail"]').forEach(link => {
             if (link.getAttribute('type').split(';')[1] == 'width=48' && !iconUrl) {
@@ -120,6 +121,9 @@ const kiwixServe = (function() {
         }
         const faviconAttr = iconUrl != undefined ? `style="background-image: url('${iconUrl}')"` : '';
         const languageAttr = langCode != '' ? `title="${language}" aria-label="${language}"` : 'style="background-color: transparent"';
+        if (!allowBookClick) {
+            link = "javascript:void(0)";
+        }
         divTag.innerHTML = `
             <div class="book__wrapper">
             <a class="book__link" href="${link}" data-hover="Preview">
@@ -247,14 +251,16 @@ const kiwixServe = (function() {
                 toggleFooter();
             }
             const kiwixResultText = document.querySelector('.kiwixHomeBody__results')
-            if (results) {
-                let resultText = `${results} books`;
-                if (results === 1) {
-                    resultText = `${results} book`;
+            if (kiwixResultText) {
+                if (results) {
+                    let resultText = `${results} books`;
+                    if (results === 1) {
+                        resultText = `${results} book`;
+                    }
+                    kiwixResultText.innerHTML = resultText;
+                } else {
+                    kiwixResultText.innerHTML = ``;
                 }
-                kiwixResultText.innerHTML = resultText;
-            } else {
-                kiwixResultText.innerHTML = ``;
             }
             loader.style.display = 'none';
             return books;
@@ -265,16 +271,20 @@ const kiwixServe = (function() {
         await fetch(query).then(async (resp) => {
             const data = new window.DOMParser().parseFromString(await resp.text(), 'application/xml');
             let optionStr = '';
-            data.querySelectorAll('entry').forEach(entry => {
-                const title = getInnerHtml(entry, 'title');
-                const value = getInnerHtml(entry, valueEntryNode);
-                const hfTitle = humanFriendlyTitle(title);
-                if (valueEntryNode == 'language') {
-                    languages[value] = hfTitle;
-                }
-                optionStr += (hfTitle != '') ? `<option value="${value}">${hfTitle}</option>` : '';
-            });
-            document.querySelector(nodeQuery).innerHTML += optionStr;
+            const entryList = data.querySelectorAll('entry');
+            const nodeQueryElem = document.querySelector(nodeQuery);
+            if (entryList && nodeQueryElem) {
+                entryList.forEach(entry => {
+                    const title = getInnerHtml(entry, 'title');
+                    const value = getInnerHtml(entry, valueEntryNode);
+                    const hfTitle = humanFriendlyTitle(title);
+                    if (valueEntryNode == 'language') {
+                        languages[value] = hfTitle;
+                    }
+                    optionStr += (hfTitle != '') ? `<option value="${value}">${hfTitle}</option>` : '';
+                });
+                nodeQueryElem.innerHTML += optionStr;
+            }
         });
     }
 
@@ -388,6 +398,10 @@ const kiwixServe = (function() {
             }
         });
     }
+
+    function disableBookClick() {
+        allowBookClick = false;
+    }
     
     function addTagElement(tagValue, resetFilter) {
         const tagElement = document.getElementsByClassName('tagFilterLabel')[0];
@@ -481,6 +495,7 @@ const kiwixServe = (function() {
             }
         }
         updateVisibleParams();
+        updateBookCount();
         document.getElementById('kiwixSearchForm').onsubmit = (event) => {event.preventDefault()};
         if (!window.location.search) {
             const browserLang = navigator.language.split('-')[0];
@@ -493,8 +508,10 @@ const kiwixServe = (function() {
         }
         setCookie(filterCookieName, params.toString());
     }
+    
     return {
-        updateBookCount
-    }
+        updateBookCount,
+        disableBookClick
+    };
 })();
 

static/skin/widget.js

@@ -1 +1,87 @@
-// To be updated
+function disableSearchFilters(widgetStyles) {
+    const hideNavRule = `
+    .kiwixNav {
+        display: none;
+    }`;
+    const hideResultsLabelRule = `
+    .kiwixHomeBody__results {
+        display: none;
+    }`;
+    const hideTagFilterRule = `
+    .book__tags {
+        pointer-events: none;
+    }`;
+    insertNewCssRules(widgetStyles, [hideNavRule, hideResultsLabelRule, hideTagFilterRule]);
+}
+
+function disableBookClick() {
+    kiwixServe.disableBookClick();
+}
+
+function disableDownload(widgetStyles) {
+    const hideBookDownloadRule = `
+    .book__download {
+        display: none;
+    }`;
+    insertNewCssRules(widgetStyles, [hideBookDownloadRule]);
+}
+
+function disableDescription(widgetStyles) {
+    const decreaseHeightRule = `
+    .book__wrapper {
+        height:128px;
+        grid-template-rows: 70px 0 1fr 1fr;
+    }`;
+    const hideDescRule = `
+    .book__description {
+        display: none;
+    }`;
+    insertNewCssRules(widgetStyles, [decreaseHeightRule, hideDescRule]);
+}
+
+function hideFooter(widgetStyles) {
+    const hideFooterRule = `
+    .kiwixfooter {
+        display: none !important;
+    }`;
+    insertNewCssRules(widgetStyles, [hideFooterRule]);
+}
+
+function insertNewCssRules(stylesheet, ruleList) {
+    if (stylesheet) {
+        for (rule of ruleList) {
+            stylesheet.insertRule(rule, 0);
+        }
+    }
+}
+
+function handleWidget() {
+    const params = new URLSearchParams(window.location.search || filters || '');
+    const widgetStyleElem = document.createElement('style');
+    document.head.appendChild(widgetStyleElem);
+
+    const widgetStyles = widgetStyleElem.sheet;
+
+    const disableFilters = params.has('disablefilter');
+    const disableClick = params.has('disableclick');
+    const disableDwld = params.has('disabledownload');
+    const disableDesc = params.has('disabledesc');
+
+    const blankBase = document.createElement('base');
+    blankBase.target = '_blank';
+    document.head.appendChild(blankBase); // open all links in new tab
+
+    if (disableFilters) 
+        disableSearchFilters(widgetStyles);
+    if (disableClick)
+        disableBookClick();
+    if (disableDwld)
+        disableDownload(widgetStyles);
+    if (disableDesc)
+        disableDescription(widgetStyles);
+
+    hideFooter(widgetStyles);
+    kiwixServe.updateBookCount();
+}
+
+handleWidget();

test/server.cpp

@@ -184,7 +184,7 @@ R"EXPECTEDRESULT(      href="/ROOT/skin/index.css?cacheid=56e818cd"
           src: url("/ROOT/skin/fonts/Roboto.ttf?cacheid=84d10248") format("truetype");
     <script src="/ROOT/skin/isotope.pkgd.min.js?cacheid=2e48d392" defer></script>
     <script src="/ROOT/skin/iso6391To3.js?cacheid=ecde2bb3"></script>
-    <script type="text/javascript" src="/ROOT/skin/index.js?cacheid=76440e7a" defer></script>
+    <script type="text/javascript" src="/ROOT/skin/index.js?cacheid=2fcc4ac4" defer></script>
 )EXPECTEDRESULT"
     },
     {