Add nav to search page
diff --git a/org.apache.sling.graphql.samples.website/src/main/resources/SLING-INF/initial-content/apps/samples/servlet/GQLschema.jsp b/org.apache.sling.graphql.samples.website/src/main/resources/SLING-INF/initial-content/apps/samples/servlet/GQLschema.jsp
index 63514de..8c688da 100644
--- a/org.apache.sling.graphql.samples.website/src/main/resources/SLING-INF/initial-content/apps/samples/servlet/GQLschema.jsp
+++ b/org.apache.sling.graphql.samples.website/src/main/resources/SLING-INF/initial-content/apps/samples/servlet/GQLschema.jsp
@@ -20,6 +20,8 @@
<%@include file="../common/directives.jsp" %>
type Query {
+ <%@include file="../common/common-query-parts.jsp" %>
+
# List of Articles which contain the supplied text
article (withText : String) : [Article] @fetcher(name:"samples/articlesWithText")
}
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
index b97d7d3..d4a6062 100644
--- 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
@@ -41,10 +41,20 @@
<script src="./js/graphql.js"></script>
<script>
- var template;
+ var templates = {
+ navigation: {},
+ results: {}
+ }
function queryAndRender(searchText) {
var query = `{
+ navigation {
+ search
+ sections {
+ path
+ name
+ }
+ }
article(withText: "${searchText}") {
path
title
@@ -57,20 +67,28 @@
}`;
console.log(`Querying:\n${query}`);
graphQL.query(query, { searchText: searchText}, function(data) {
- $("#results").html(template({data:data}));
+ $("#navigation").html(templates.navigation({navigation:data.result.navigation}));
+ $("#results").html(templates.results({data:data}));
});
}
$(document).ready(function() {
- template = Handlebars.compile($("#template").html());
+ templates.results = Handlebars.compile($("#resultsTemplate").html());
+ templates.navigation = Handlebars.compile($("#navigationTemplate").html());
$("#search").submit(function() {
queryAndRender($("#searchText").val());
return false;
});
+ $("#searchText").focus();
+ queryAndRender($("#searchText").val());
});
</script>
</head>
<body>
+ <div>
+ <div id="navigation"/>
+ </div>
+
<h1>Search in articles</h1>
<hr/>
@@ -79,17 +97,35 @@
<input type="submit" value="Search"/>
</form>
- <div id="results"/>
+ <div>
+ <div id="results"/>
+ </div>
- <div id="template" style="display:none">
- <h2>Found {{data.result.article.length}} articles containing "{{data.info.searchText}}"</h2>
- <ul>
- {{#each data.result.article}}
- <li class="articleLink">
- <a href="{{this.path}}.html">{{this.title}}</a>
- </li>
- {{/each}}
- </ul>
+ <div id="templates" style="display:none">
+ <div id="navigationTemplate">
+ {{#each navigation.sections}}
+ <span class="section">
+ <a href="{{this.path}}.html">{{this.name}}</a>
+ </span>
+ {{/each}}
+ <br/>
+ <a href="{{navigation.search}}.html">Search</a>
+ <hr/>
+ </div>
+ <div id="resultsTemplate">
+ {{#if data.result.article}}
+ <h2>Found {{data.result.article.length}} articles containing "{{data.info.searchText}}"</h2>
+ <ul>
+ {{#each data.result.article}}
+ <li class="articleLink">
+ <a href="{{this.path}}.html">{{this.title}}</a>
+ </li>
+ {{/each}}
+ </ul>
+ {{else}}
+ <div class="message">No articles found.</div>
+ {{/if}}
+ </div>
</div>
</body>
</html>
\ No newline at end of file
