IAM21 instance, do not create collab nor modify a team, your changes will be lost


Changes for page CLB Search Component

Last modified by bougault on 2023/01/17 11:42
From version 7.35
edited by bougault
on 2023/01/17 09:50
Change comment: There is no comment for this version
To version 1.1
edited by bougault
on 2023/01/13 12:05
Change comment: There is no comment for this version

Summary

Details

Page properties
Content
... ... @@ -1,5 +3,3 @@
1 -{{html clean="false"}}
2 -<script>
3 3  class ClbComponent extends HTMLElement {
4 4   constructor() {
5 5   super();
... ... @@ -9,120 +9,55 @@
9 9   this.attachShadow({ mode: 'open'});
10 10   }
11 11  
12 - get template() {
10 + createTemplate(htmlString) {
13 13   const template = document.createElement('template');
14 - template.innerHTML = `
15 - <style>
16 - ${this.styles}
17 - </style>
18 - ${this.html}
19 - `;
12 + template.innerHTML = htmlString;
20 20   return template;
21 21   }
22 -
23 - get styles() {
24 - return '';
25 - }
26 -
27 - get html() {
28 - return '';
29 - }
30 - $(selector) {
31 - return this.shadowRoot.querySelector(selector);
32 - }
33 -
34 - $$(selector) {
35 - return this.shadowRoot.querySelectorAll(selector);
36 - }
37 37  }
38 38  
39 39  customElements.define('clb-simplified-search',
40 40   class extends ClbComponent {
41 - searchBaseUrl = '/bin/get/XWiki/SuggestSolrService?outputSyntax=plain&media=json&nb=10&query=q%3D%22__INPUT__%22~100%0Afq%3Dtype%3ADOCUMENT%0Afq%3Dspace%3ACollabs.*&input=';
19 + 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=';
42 42   constructor() {
43 43   super();
44 44   this.results = [];
45 - this.offset = 0;
46 46   }
47 47  
48 48   connectedCallback() {
26 + // this.attachShadow({ mode: 'open' });
49 49   super.connectedCallback();
50 50   this.render();
51 - const searchInput = this.$('input[type="text"]');
52 - this.$('#search').addEventListener('click', this.handleSearch);
53 - this.$('#prev').addEventListener('click', this.handlePrevPage);
54 - this.$('#next').addEventListener('click', this.handleNextPage);
55 - searchInput.addEventListener('keypress', this.handleKeyPress);
56 - searchInput.focus();
29 + this.searchButton.addEventListener('click', () => this.handleSearch());
57 57   }
58 58  
59 - disconnectedCallback() {
60 - this.$('#search').removeEventListener('click', this.handleSearch);
61 - this.$('#prev').removeEventListener('click', this.handlePrevPage);
62 - this.$('#next').removeEventListener('click', this.handleNextPage);
63 - this.$('input[type="text"]').addEventListener('keypress', this.handleKeyPress);
32 +
33 + handleSearch() {
34 + // fetch(`${this.searchBaseUrl}${encodeURIComponent(this.searchInput.value)}`)
35 + // .then(res => res.json())
36 + //.then(this.renderResults);
37 + 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}];
38 + this.renderResults(res);
64 64   }
65 65  
66 - get styles() {
67 - return `
68 - input[type="text"] {
69 - display: block;
70 - width: 100%;
71 -box-sizing: border-box;
72 - padding: 6px 12px;
73 - font-size: 16px;
74 - line-height: 1.428571429;
75 - color: #555555;
76 - background-color: #fff;
77 - background-image: none;
78 - border: 1px solid #ccc;
79 - border-radius: 4px;
80 - -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
81 - box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
82 - -webkit-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
83 - -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
84 - transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
85 - }
86 -
87 - `
41 + get searchInput() {
42 + return this.shadowRoot.querySelector('input[type="text"]');
88 88   }
89 - handlePrevPage = () => {
90 - if(this.offset > 0) {
91 - this.offset--;
92 - this.handleSearch();
93 - }
94 - }
95 - handleNextPage = () => {
96 - this.offset++;
97 - this.handleSearch();
98 - }
99 99  
100 - handleSearch = () => {
101 - const value = this.$('input[type="text"]').value;
102 - fetch(`${this.searchBaseUrl}${encodeURIComponent(value)}&offset=${this.offset}`)
103 - .then(res => res.json())
104 - .then(this.renderResults);
45 + get searchButton() {
46 + return this.shadowRoot.querySelector('button');
105 105   }
106 106  
107 - handleKeyPress = (e) => {
108 - if(e.code === 'Enter') {
109 - this.handleSearch();
110 - }
49 + get searchInputTemplate() {
50 + return this.createTemplate('<div><input type="text"><button>Search</button><div id="results"></div></div>');
111 111   }
112 112  
113 - get html() {
114 - return `
115 - <div>
116 - <input type="text"><button id="search">Search</button>
117 - <div id="results"></div>
118 - <button id="prev">prev</button>
119 - <button id="next">next</button>
120 - </div>
121 - `;
53 + resultsContainer = () => {
54 + return this.shadowRoot.querySelector('#results');
122 122   }
123 123  
124 - renderResults = (results) => {
125 - const resultsContainer = this.$('#results');
57 + renderResults(results) {
58 + const resultsContainer = this.shadowRoot.querySelector('#results');
126 126   resultsContainer.replaceChildren();
127 127   for(let i = 0, j = results.length; i < j; i++) {
128 128   const { title_, spaces, doccontent_en } = results[i];
... ... @@ -135,7 +135,7 @@
135 135   }
136 136  
137 137   render() {
138 - this.shadowRoot.appendChild(this.template.content.cloneNode(true));
71 + this.shadowRoot.appendChild(this.searchInputTemplate.content.cloneNode(true));
139 139   }
140 140   }
141 141  );
... ... @@ -154,30 +154,19 @@
154 154   return this.getAttribute('data-href');
155 155   }
156 156  
157 - get styles() {
158 - return `
159 - a {
160 - color: var(--color-brand-primary);
161 - }
162 - `;
163 - }
164 - get html() {
165 - return `
90 + get resultTemplate() {
91 + return this.createTemplate(`
166 166   <div>
167 - <a href="/bin/view/${this.hrefAttr}">${this.titleAttr}</a>
93 + <a href=${this.hrefAttr}>${this.titleAttr}</a>
168 168   <div>
169 169   <slot></slot>
170 170   </div>
171 - </div> `
97 + </div>
98 + `);
172 172   }
173 -
174 174   connectedCallback() {
175 175   this.attachShadow({ mode: 'open' });
176 - this.shadowRoot.appendChild(this.template.content.cloneNode(true));
102 + this.shadowRoot.appendChild(this.resultTemplate.content.cloneNode(true));
177 177   }
178 -
179 179   }
180 180  );
181 -</script>
182 -<clb-simplified-search></clb-simplified-search>
183 -{{/html}}