This is an automated email from the ASF dual-hosted git repository. bdelacretaz pushed a commit to branch master in repository https://gitbox.apache.org/repos/asf/sling-samples.git
The following commit(s) were added to refs/heads/master by this push: new 8d554b7 First client-side search page 8d554b7 is described below commit 8d554b77934ddad576ae4adb8b288dd76c395598 Author: Bertrand Delacretaz <bdelacre...@apache.org> AuthorDate: Wed Jun 3 15:37:31 2020 +0200 First client-side search page --- .../SLING-INF/initial-content/content/search.html | 61 +++++++++++++++++++++ .../SLING-INF/initial-content/content/search.js | 63 ++++++++++++++++++++++ 2 files changed, 124 insertions(+) diff --git a/org.apache.sling.graphql.samples.website/src/main/resources/SLING-INF/initial-content/content/search.html b/org.apache.sling.graphql.samples.website/src/main/resources/SLING-INF/initial-content/content/search.html new file mode 100644 index 0000000..215d025 --- /dev/null +++ b/org.apache.sling.graphql.samples.website/src/main/resources/SLING-INF/initial-content/content/search.html @@ -0,0 +1,61 @@ +<!doctype html> + <html lang="en"> + <head> + <meta charset="utf-8"/> + + <!--/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ + ~ Licensed to the Apache Software Foundation (ASF) under one + ~ or more contributor license agreements. See the NOTICE file + ~ distributed with this work for additional information + ~ regarding copyright ownership. The ASF licenses this file + ~ to you under the Apache License, Version 2.0 (the + ~ "License"); you may not use this file except in compliance + ~ with the License. You may obtain a copy of the License at + ~ + ~ http://www.apache.org/licenses/LICENSE-2.0 + ~ + ~ Unless required by applicable law or agreed to in writing, + ~ software distributed under the License is distributed on an + ~ "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + ~ KIND, either express or implied. See the License for the + ~ specific language governing permissions and limitations + ~ under the License. + ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/--> + + <title>Search Articles</title> + <link rel="stylesheet" href="https://fonts.xz.style/serve/inter.css"> + <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@exampledev/new.css@1.1.2/new.min.css"> + + <script + src="https://code.jquery.com/jquery-3.5.1.js" + integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" + crossorigin="anonymous"> + </script> + + <script + src="https://cdn.jsdelivr.net/npm/handlebars@latest/dist/handlebars.js"> + </script> + + <script src="./search.js"></script> + </head> + <body> + <h1>Search in articles</h1> + <hr/> + <form id="search"> + <input id="searchText" type="text" width="40"/> + <input type="submit" value="Search"/> + </form> + <div id="results"/> + + <div id="template" style="display:none"> + <h2>Articles containing "{{data.query}}"</h2> + <ul> + {{#each data.result.article}} + <li class="seeAlso"> + <a href="{{this.path}}.html">{{this.title}}</a> + </li> + {{/each}} + </ul> + </div> + </body> +</html> \ No newline at end of file diff --git a/org.apache.sling.graphql.samples.website/src/main/resources/SLING-INF/initial-content/content/search.js b/org.apache.sling.graphql.samples.website/src/main/resources/SLING-INF/initial-content/content/search.js new file mode 100644 index 0000000..b3dccaa --- /dev/null +++ b/org.apache.sling.graphql.samples.website/src/main/resources/SLING-INF/initial-content/content/search.js @@ -0,0 +1,63 @@ +/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ +~ Licensed to the Apache Software Foundation (ASF) under one +~ or more contributor license agreements. See the NOTICE file +~ distributed with this work for additional information +~ regarding copyright ownership. The ASF licenses this file +~ to you under the Apache License, Version 2.0 (the +~ "License"); you may not use this file except in compliance +~ with the License. You may obtain a copy of the License at +~ +~ http://www.apache.org/licenses/LICENSE-2.0 +~ +~ Unless required by applicable law or agreed to in writing, +~ software distributed under the License is distributed on an +~ "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY +~ KIND, either express or implied. See the License for the +~ specific language governing permissions and limitations +~ under the License. +~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/ + +var template; + +function render(resultElement, data) { + console.log(`Rendering ${data.result.article.length} articles`); + $(resultElement).html(template({ data : data })); +} + +function queryAndRender(queryText) { + var query = `{ + article(withText: "${queryText}") { + path + title + seeAlso { + path + title + tags + } + } + }`; + + console.log(`Querying:\n${query}`); + + fetch('/graphql.json', { + method: 'POST', + headers: { + 'Content-Type': 'application/json', + 'Accept': 'application/json', + }, + body: JSON.stringify({query: `${query} `}) + }) + .then(r => r.json()) + .then(json => render($("#results"), { result: json.data, query: queryText})) + ; +} + +$(document).ready(function() { + template = Handlebars.compile($("#template").html()); + $("#search").submit(function(e) { + var searchText = $("#searchText").val(); + queryAndRender(searchText); + return false; + }); +}); +