Wiki source code of CLB Search Component
Hide last authors
| author | version | line-number | content |
|---|---|---|---|
| |
5.1 | 1 | {{velocity}} |
| |
4.1 | 2 | {{html clean="false"}} |
| |
3.1 | 3 | <script> |
| |
1.1 | 4 | class ClbComponent extends HTMLElement { |
| 5 | constructor() { | ||
| 6 | super(); | ||
| 7 | } | ||
| 8 | |||
| 9 | connectedCallback() { | ||
| 10 | this.attachShadow({ mode: 'open'}); | ||
| 11 | } | ||
| 12 | |||
| 13 | createTemplate(htmlString) { | ||
| 14 | const template = document.createElement('template'); | ||
| 15 | template.innerHTML = htmlString; | ||
| 16 | return template; | ||
| 17 | } | ||
| 18 | } | ||
| 19 | |||
| 20 | customElements.define('clb-simplified-search', | ||
| 21 | class extends ClbComponent { | ||
| 22 | searchBaseUrl = 'https://wiki-dev.ebrains.eu/bin/get/XWiki/SuggestSolrService?outputSyntax=plain&media=json&nb=10&offset=0&query=q%3D%22__INPUT__%22~100%0Afq%3Dtype%3ADOCUMENT%0Afq%3Dspace%3ACollabs.*&input='; | ||
| 23 | constructor() { | ||
| 24 | super(); | ||
| 25 | this.results = []; | ||
| 26 | } | ||
| 27 | |||
| 28 | connectedCallback() { | ||
| 29 | // this.attachShadow({ mode: 'open' }); | ||
| 30 | super.connectedCallback(); | ||
| 31 | this.render(); | ||
| 32 | this.searchButton.addEventListener('click', () => this.handleSearch()); | ||
| 33 | } | ||
| 34 | |||
| 35 | |||
| 36 | handleSearch() { | ||
| 37 | // fetch(`${this.searchBaseUrl}${encodeURIComponent(this.searchInput.value)}`) | ||
| 38 | // .then(res => res.json()) | ||
| 39 | //.then(this.renderResults); | ||
| 40 | const res = [{"id":"xwiki:Collabs.bougault.Collabs Search.WebHome_en","hidden":false,"wiki":"xwiki","name":"WebHome","space":"Collabs.bougault.Collabs Search","spaces":["Collabs","bougault","Collabs Search"],"locale":"en","language":"en","type":"DOCUMENT","fullname":"Collabs.bougault.Collabs Search.WebHome","title_en":["Collabs Search"],"title_":"Collabs Search","doccontentraw_en":["{{velocity output=\"false\"}}\r\n #set($displayContentFooter=false)\r\n #set($displayDocExtra=false)\r\n #set($displayContentMenu=false)\r\n $xwiki.ssx.use('Collaboratory.UX.SSX.noheader')\r\n\r\n #set ($clbaction = $request.getParameter(\"clbaction\"))\r\n #set ($isCreationForm = $clbaction.equals('create'))\r\n #set ($isAuthenticated = ($xcontext.user != 'XWiki.XWikiGuest'))\r\n #if($isCreationForm)\r\n #set ($moduleCSS = 'collab-settings.css')\r\n #set ($moduleJS = 'collab-settings.js')\r\n #else\r\n #set ($moduleCSS = 'collab-search.css')\r\n #set ($moduleJS = 'collab-search.js')\r\n #end\r\n{{/velocity}}\r\n\r\n{{velocity}}\r\n\r\n{{html wiki=\"true\"}}\r\n\r\n #if($isCreationForm)\r\n (% id=\"root\" %)((()))\r\n #else\r\n (% class=\"container\" %)\r\n (((\r\n #if($isAuthenticated)\r\n (% class=\"row\" %)\r\n (((\r\n (% class=\"col-md-6 pull-right\" %)\r\n (((\r\n {{html}}\r\n <a href=\"/bin/view/Collabs?clbaction=create\" class=\"btn btn-primary pull-right\">Create a collab</a>\r\n {{/html}}\r\n )))\r\n )))\r\n #end\r\n )))\r\n (% id=\"root\" %)((()))\r\n #end\r\n{{/html}}\r\n\r\n{{html clean=\"false\"}}\r\n <link rel=\"stylesheet\" type=\"text/css\" href=\"$services.webjars.url('eu.hbp.wiki:xwiki-webapp-collaboratory', $moduleCSS)\" />\r\n <script type=\"module\" src=\"$services.webjars.url('eu.hbp.wiki:xwiki-webapp-collaboratory', $moduleJS)\"></script>\r\n{{/html}}\r\n\r\n{{/velocity}}\r\n\r\n\r\n"],"doccontentraw_":"{{velocity output=\"false\"}}\r\n #set($displayContentFooter=false)\r\n #set($displayDocExtra=false)\r\n #set($displayContentMenu=false)\r\n $xwiki.ssx.use('Collaboratory.UX.SSX.noheader')\r\n\r\n #set ($clbaction = $request.getParameter(\"clbaction\"))\r\n #set ($isCreationForm = $clbaction.equals('create'))\r\n #set ($isAuthenticated = ($xcontext.user != 'XWiki.XWikiGuest'))\r\n #if($isCreationForm)\r\n #set ($moduleCSS = 'collab-settings.css')\r\n #set ($moduleJS = 'collab-settings.js')\r\n #else\r\n #set ($moduleCSS = 'collab-search.css')\r\n #set ($moduleJS = 'collab-search.js')\r\n #end\r\n{{/velocity}}\r\n\r\n{{velocity}}\r\n\r\n{{html wiki=\"true\"}}\r\n\r\n #if($isCreationForm)\r\n (% id=\"root\" %)((()))\r\n #else\r\n (% class=\"container\" %)\r\n (((\r\n #if($isAuthenticated)\r\n (% class=\"row\" %)\r\n (((\r\n (% class=\"col-md-6 pull-right\" %)\r\n (((\r\n {{html}}\r\n <a href=\"/bin/view/Collabs?clbaction=create\" class=\"btn btn-primary pull-right\">Create a collab</a>\r\n {{/html}}\r\n )))\r\n )))\r\n #end\r\n )))\r\n (% id=\"root\" %)((()))\r\n #end\r\n{{/html}}\r\n\r\n{{html clean=\"false\"}}\r\n <link rel=\"stylesheet\" type=\"text/css\" href=\"$services.webjars.url('eu.hbp.wiki:xwiki-webapp-collaboratory', $moduleCSS)\" />\r\n <script type=\"module\" src=\"$services.webjars.url('eu.hbp.wiki:xwiki-webapp-collaboratory', $moduleJS)\"></script>\r\n{{/html}}\r\n\r\n{{/velocity}}\r\n\r\n\r\n","doccontent_en":["\n\n"],"doccontent_":"\n\n","version":"28.1","doclocale":"","locales":["","en"],"lang":["","en"],"author":"xwiki:XWiki.bougault","author_display":"François B.","creator":"xwiki:XWiki.bougault","creator_display":"François B.","creationdate":1617976623000,"date":1618401384000,"_version_":1752657755570700288,"score":7.453887},{"id":"xwiki:Collabs.collab-dev.WebHome_en","hidden":false,"wiki":"xwiki","name":"WebHome","space":"Collabs.collab-dev","spaces":["Collabs","collab-dev"],"locale":"en","language":"en","type":"DOCUMENT","fullname":"Collabs.collab-dev.WebHome","title_en":["Collab dev"],"title_":"Collab dev","doccontentraw_en":["(% class=\"jumbotron\" %)\n(((\n(% class=\"container\" %)\n(((\n= My Collab's Extended Title =\n\nMy collab's subtitle\n)))\n)))\n\n(% class=\"row\" %)\n(((\n(% class=\"col-xs-12 col-sm-8\" %)\n(((\n= What can I find here? =\n\n* Notice how the table of contents on the right\n* is automatically updated\n* to hold this page's headers\n\n= Who has access? =\n\nDescribe the audience of this collab.\n)))\n\n\n(% class=\"col-xs-12 col-sm-4\" %)\n(((\n{{box title=\"**Contents**\"}}\n{{toc/}}\n{{/box}}\n\n \n)))\n)))"],"doccontentraw_":"(% class=\"jumbotron\" %)\n(((\n(% class=\"container\" %)\n(((\n= My Collab's Extended Title =\n\nMy collab's subtitle\n)))\n)))\n\n(% class=\"row\" %)\n(((\n(% class=\"col-xs-12 col-sm-8\" %)\n(((\n= What can I find here? =\n\n* Notice how the table of contents on the right\n* is automatically updated\n* to hold this page's headers\n\n= Who has access? =\n\nDescribe the audience of this collab.\n)))\n\n\n(% class=\"col-xs-12 col-sm-4\" %)\n(((\n{{box title=\"**Contents**\"}}\n{{toc/}}\n{{/box}}\n\n \n)))\n)))","doccontent_en":["My Collab's Extended Title\n\nMy collab's subtitle\n\nWhat can I find here?\n\nNotice how the table of contents on the right\nis automatically updated\nto hold this page's headers\n\nWho has access?\n\nDescribe the audience of this collab.\n\n\n "],"doccontent_":"My Collab's Extended Title\n\nMy collab's subtitle\n\nWhat can I find here?\n\nNotice how the table of contents on the right\nis automatically updated\nto hold this page's headers\n\nWho has access?\n\nDescribe the audience of this collab.\n\n\n ","version":"10.1","doclocale":"","locales":["","en"],"lang":["","en"],"author":"xwiki:XWiki.messines","author_display":"Axel M.","creator":"xwiki:XWiki.collaboratory","creator_display":"collaboratory","creationdate":1558605692000,"date":1663716732000,"property.Collaboratory.Apps.Collab.Code.CollabClass.chat_boolean":[false],"object.Collaboratory.Apps.Collab.Code.CollabClass_en":["false","","All usefull contents for collaboratory developers.","true","messines"],"objcontent_en":["chat : false","content : ","description : All usefull contents for collaboratory developers.","drive : true","menu : ","owner : messines","public : false","title : ","allow : true","groups : Collabs.collab-dev._.groups.collab-collab-dev-viewer","levels : view,comment","users : ","groups : Collabs.collab-dev._.groups.collab-collab-dev-editor","levels : view,comment,edit","groups : Collabs.collab-dev._.groups.collab-collab-dev-administrator","levels : view,comment,edit,delete"],"property.Collaboratory.Apps.Collab.Code.CollabClass.content_string":[""],"property.Collaboratory.Apps.Collab.Code.CollabClass.description_en":["All usefull contents for collaboratory developers."],"property.Collaboratory.Apps.Collab.Code.CollabClass.drive_boolean":[true],"property.Collaboratory.Apps.Collab.Code.CollabClass.menu_string":[""],"property.Collaboratory.Apps.Collab.Code.CollabClass.owner_en":["messines"],"property.Collaboratory.Apps.Collab.Code.CollabClass.owner_string":["messines"],"property.Collaboratory.Apps.Collab.Code.CollabClass.public_boolean":[false],"property.Collaboratory.Apps.Collab.Code.CollabClass.title_string":[""],"class":["Collaboratory.Apps.Collab.Code.CollabClass","XWiki.XWikiRights"],"property.XWiki.XWikiRights.allow_boolean":[true,true,true],"object.XWiki.XWikiRights_en":["true","Collabs.collab-dev._.groups.collab-collab-dev-viewer","view,comment","","Collabs.collab-dev._.groups.collab-collab-dev-editor","view,comment,edit","Collabs.collab-dev._.groups.collab-collab-dev-administrator","view,comment,edit,delete"],"property.XWiki.XWikiRights.groups_string":["Collabs.collab-dev._.groups.collab-collab-dev-viewer","Collabs.collab-dev._.groups.collab-collab-dev-editor","Collabs.collab-dev._.groups.collab-collab-dev-administrator"],"property.XWiki.XWikiRights.levels_string":["view,comment","view,comment,edit","view,comment,edit,delete"],"property.XWiki.XWikiRights.users_string":["","",""],"_version_":1752657767917682688,"score":7.453887}]; | ||
| 41 | this.renderResults(res); | ||
| 42 | } | ||
| 43 | |||
| 44 | get searchInput() { | ||
| 45 | return this.shadowRoot.querySelector('input[type="text"]'); | ||
| 46 | } | ||
| 47 | |||
| 48 | get searchButton() { | ||
| 49 | return this.shadowRoot.querySelector('button'); | ||
| 50 | } | ||
| 51 | |||
| 52 | get searchInputTemplate() { | ||
| 53 | return this.createTemplate('<div><input type="text"><button>Search</button><div id="results"></div></div>'); | ||
| 54 | } | ||
| 55 | |||
| 56 | resultsContainer = () => { | ||
| 57 | return this.shadowRoot.querySelector('#results'); | ||
| 58 | } | ||
| 59 | |||
| 60 | renderResults(results) { | ||
| 61 | const resultsContainer = this.shadowRoot.querySelector('#results'); | ||
| 62 | resultsContainer.replaceChildren(); | ||
| 63 | for(let i = 0, j = results.length; i < j; i++) { | ||
| 64 | const { title_, spaces, doccontent_en } = results[i]; | ||
| 65 | const elt = document.createElement('clb-search-result'); | ||
| 66 | elt.setAttribute('data-title', title_); | ||
| 67 | elt.setAttribute('data-href', spaces.join('/')); | ||
| 68 | elt.innerHTML = doccontent_en; | ||
| 69 | resultsContainer.appendChild(elt); | ||
| 70 | } | ||
| 71 | } | ||
| 72 | |||
| 73 | render() { | ||
| 74 | this.shadowRoot.appendChild(this.searchInputTemplate.content.cloneNode(true)); | ||
| 75 | } | ||
| 76 | } | ||
| 77 | ); | ||
| 78 | |||
| 79 | customElements.define('clb-search-result', | ||
| 80 | class extends ClbComponent { | ||
| 81 | constructor() { | ||
| 82 | super(); | ||
| 83 | } | ||
| 84 | |||
| 85 | get titleAttr() { | ||
| 86 | return this.getAttribute('data-title'); | ||
| 87 | } | ||
| 88 | |||
| 89 | get hrefAttr() { | ||
| 90 | return this.getAttribute('data-href'); | ||
| 91 | } | ||
| 92 | |||
| 93 | get resultTemplate() { | ||
| 94 | return this.createTemplate(` | ||
| 95 | <div> | ||
| 96 | <a href=${this.hrefAttr}>${this.titleAttr}</a> | ||
| 97 | <div> | ||
| 98 | <slot></slot> | ||
| 99 | </div> | ||
| 100 | </div> | ||
| 101 | `); | ||
| 102 | } | ||
| 103 | connectedCallback() { | ||
| 104 | this.attachShadow({ mode: 'open' }); | ||
| 105 | this.shadowRoot.appendChild(this.resultTemplate.content.cloneNode(true)); | ||
| 106 | } | ||
| 107 | } | ||
| 108 | ); | ||
| |
3.1 | 109 | </script> |
| 110 | {{/html}} | ||
| |
5.1 | 111 | {{/velocity}} |