Skip to content

Commit

Permalink
JQuery starter kit
Browse files Browse the repository at this point in the history
  • Loading branch information
@guillaumebort
guillaumebort committed Sep 17, 2013
1 parent a30b69d commit dadaeae
Show file tree
Hide file tree
Showing 15 changed files with 531 additions and 100 deletions.
22 changes: 22 additions & 0 deletions README.md
View file
@@ -0,0 +1,22 @@
# Starter project for client side JavaScript using JQuery

This is a pure client side application that will connect to any [prismic.io](https://prismic.io) repository. It uses the prismic.io JavaScript developement kit, and provide a few helpers to integrate with JQuery and a templating engine.

> This project embed a very simple Micro templating engine (http://ejohn.org/blog/javascript-micro-templating/), but you can easily switch it by any other JavaScript templating engine you want.
It uses the browser `sessionStorage` to store the access token when you interactively login to preview the future of your repository. Meaning that to preview another release than **Master**, a modern browser supporting HTML5 is required.

## How to start?

Edit the `script/prismic-configuration.js` file to make the application point to the correct repository:

```
var Configuration = {
// -- API endpoint
apiEndpoint: 'https://lesbonneschoses.prismic.io/api'
}
```

Open the `index.html` in your browser. Alternatively you can also launch a local Web server using the `server.sh` script and open the home page at http://localhost:8000/.
3 changes: 3 additions & 0 deletions css/main.css
View file
@@ -0,0 +1,3 @@
body.loading {
display: none;
}
88 changes: 74 additions & 14 deletions detail.html
View file
Expand Up @@ -3,31 +3,91 @@
<html>
<head>
<title>JavaScript starter</title>
<script src="vendor/jquery-1.9.0.min.js"></script>
<link href="css/main.css" media="all" rel="stylesheet" type="text/css">
<script src="vendor/jquery-2.0.3.min.js"></script>
<script src="scripts/fragments.js"></script>
<script src="scripts/api.js"></script>
<script src="scripts/prismic-configuration.js"></script>
<script src="scripts/prismic-helpers.js"></script>
</head>
<body>
<body class="loading">

<header>
<!-- @toolbar() -->
<a href="@routes.Application.index(prismic.maybeRef())">
<h1>Your prismic.io project</h1>
</a>
<script type="text/template">
<a href="index.html?ref=<%= ref %>">
<h1>Your prismic.io project</h1>
</a>
</script>
</header>

<!-- @(document: io.prismic.Document) -->
<!-- @main(s"Document detail ${document.getSlug()}") { -->
<article id="@document.getId()">
<!-- @Html(document.asHtml(prismic.getLinkResolver())) -->
<article>
<script type="text/template">
<%= doc %>
</script>
</article>
<!-- } -->

<footer>
<!-- @if(!prismic.hasPrivilegedAccess()) { -->
<hr> <a href="@routes.Prismic.signin()">Sign in to preview changes</a>
<!-- } -->
<script type="text/template">
<% if(!$.prismic.oauth().hasPrivilegedAccess) { %>
<hr><a href="signin.html">Sign in to preview changes</a>
<% } %>
</script>
</footer>

<!-- Logic -->

<script type="text/javascript">
$(function() {

// Retrieve the prismic API
$.prismic.api().then(
function(api) {

// Retrieve the ref from the QueryString or use the Master ref
var ref = $.prismic.queryString['ref'] || api.data.master.ref;

// Links resolver
var linkResolver = $.prismic.linkResolver(api, ref);

// Retrieve the document
var id = $.prismic.queryString['id'],
slug = $.prismic.queryString['slug'];

return api.forms("everything").ref(ref).query('[[:d = at(document.id, "' + id + '")]]').submit().then(function(docs) {

var doc = docs[0];

// If there is no documents for this id
if(!doc) {
document.location = 'notfound.html';
}

// If the slug doesn't match
if(doc.slug != slug) {
// If this is an old valid slug, redirect
if(doc.slugs.indexOf(slug) > -1) {
document.location = 'detail.html?id=' + doc.id + '&slug=' + doc.slug + '&ref=' + ref;
} else {
document.location = 'notfound.html';
}
}

// Feed the templates
$('header, article, footer').render({
doc: doc,
ref: ref == api.data.master.ref ? '' : ref,
linkResolver: linkResolver
});

});

}
).then(function() {
$(document.body).removeClass('loading')
});

});
</script>

</body>
</html>
134 changes: 103 additions & 31 deletions index.html
View file
Expand Up @@ -3,54 +3,126 @@
<html>
<head>
<title>JavaScript starter</title>
<script src="vendor/jquery-1.9.0.min.js"></script>
<link href="css/main.css" media="all" rel="stylesheet" type="text/css">
<script src="vendor/jquery-2.0.3.min.js"></script>
<script src="scripts/fragments.js"></script>
<script src="scripts/api.js"></script>
<script src="scripts/main.js"></script>
<script src="scripts/prismic-configuration.js"></script>
<script src="scripts/prismic-helpers.js"></script>
</head>
<body>
<body class="loading">

<header>
<!-- @toolbar() -->
<a href="@routes.Application.index(prismic.maybeRef())">
<h1>Your prismic.io project</h1>
</a>
<script type="text/template">
<% if($.prismic.oauth().hasPrivilegedAccess) { %>
<div id="toolbar">

<form method="GET">
<label for="releaseSelector">See this website: </label>
<select id="releaseSelector" name="ref" onchange="this.form.submit()">
<option value="" <% if(ref == api.data.master.ref) { %> selected="selected" <% } %> >As currently seen by guest visitors</option>
<optgroup label="Or preview the website in a future release:">
<% for(var i=0; i<api.data.refs.length; i++) { %>
<% if(!api.data.refs[i].isMaster) { %>
<option value="<%= api.data.refs[i].ref %>" <% if(ref == api.data.refs[i].ref) { %> selected="selected" <% } %>>As <%= api.data.refs[i].label %></option>
<% } %>
<% } %>
</optgroup>
</select>
</form>

<form action="signout.html" method="GET">
<input type="submit" value="Disconnect">
</form>

<hr>

</div>
<% } %>

<a href="index.html?ref=<%= ref %>">
<h1>Your prismic.io project</h1>
</a>
</script>
</header>

<!-- @(someDocuments: java.util.List[io.prismic.Document]) -->
<form action="@routes.Application.search(null, prismic.maybeRef())" method="GET">
<input type="text" name="q" value="">
<input type="submit" value="Search">
<form action="search.html" method="GET">
<script type="text/template">
<input type="hidden" name="ref" value="<%= ref %>">
<input type="text" name="q" value="">
<input type="submit" value="Search">
</script>
</form>

<hr>

<h2>
No documents found
<!--
@someDocuments.size() match {
case 0 => { No documents found }
case 1 => { One document found }
case n => { @n documents found }
}
-->
<h2 id="title">
<script type="text/template">
<% if(docs.length > 0) { %>
<%= docs.length %> documents
<% } else { %>
No documents found
<% } %>
</script>
</h2>

<ul>
<!-- @for(document <- someDocuments) { -->
<li>
<a href="@routes.Application.detail(document.getId(), document.getSlug(), prismic.maybeRef())">
@document.getSlug()
</a>
</li>
<!-- } -->
<ul id="list">
<script type="text/template">
<% for(var i=0; i<docs.length; i++) { %>
<li>
<a href="detail.html?id=<%= docs[i].id %>&slug=<%= docs[i].slug %>&ref=<%= ref %>">
<%= docs[i].slug %>
</a>
</li>
<% } %>
</script>
</ul>

<footer>
<!-- @if(!prismic.hasPrivilegedAccess()) { -->
<hr><a href="@routes.Prismic.signin()">Sign in to preview changes</a>
<!-- } -->
<script type="text/template">
<% if(!$.prismic.oauth().hasPrivilegedAccess) { %>
<hr><a href="signin.html">Sign in to preview changes</a>
<% } %>
</script>
</footer>

<!-- Logic -->

<script type="text/javascript">
$(function() {

// Retrieve the prismic API
$.prismic.api().then(
function(api) {

console.log(api)

// Retrieve the ref from the QueryString or use the Master ref
var ref = $.prismic.queryString['ref'] || api.data.master.ref;

// Links resolver
var linkResolver = $.prismic.linkResolver(api, ref);

// Query All documents
return api.forms("everything").ref(ref).submit().then(function(docs) {

// Feed the templates
$('header, form, #title, #list, footer').render({
docs: docs,
ref: ref == api.data.master.ref ? '' : ref,
linkResolver: linkResolver,
api: api
});

});

}
).then(function() {
$(document.body).removeClass('loading')
});

});
</script>

</body>
</html>
22 changes: 22 additions & 0 deletions notfound.html
View file
@@ -0,0 +1,22 @@
<!DOCTYPE html>

<html>
<head>
<title>JavaScript starter</title>
<link href="css/main.css" media="all" rel="stylesheet" type="text/css">
<script src="vendor/jquery-1.9.0.min.js"></script>
<script src="vendor/handlebars-1.0.0.js"></script>
<script src="scripts/fragments.js"></script>
<script src="scripts/api.js"></script>
<script src="scripts/helpers.js"></script>
</head>
<body>

<h1>Page not found</h1>

<p>
<a href="index.html">Back to home</a>
</p>

</body>
</html>
16 changes: 9 additions & 7 deletions scripts/api.js
View file
Expand Up @@ -72,7 +72,9 @@
bookmarks: data.bookmarks || [],
refs: refs,
forms: forms,
master: master[0]
master: master[0],
oauthInitiate: data['oauth_initiate'],
oauthToken: data['oauth_token']
};

},
Expand Down Expand Up @@ -119,7 +121,7 @@
},

query: function (query) {
this.data.q = "[${" + (this.form.fields.q || "") + "}${" + query + "}]";
this.data.q = query;
return this;
},

Expand All @@ -128,7 +130,10 @@

$.getJSON(
this.form.action,
{ ref: self.data.ref.ref },
{
ref: self.data.ref ,
q: self.data.q
},
function (d) {
var docs = d.map(function (doc) {
return new Doc(
Expand Down Expand Up @@ -173,15 +178,12 @@
this.href = href;
this.tags = tags;
this.slugs = slugs;
this.slug = slugs ? slugs[0] : "-"
this.fragments = fragments;
}

Doc.prototype = {

slug: function () {
return this.slugs ? this.slugs[0] : "-";
},

get: function (field) {
var frags = getFragments.call(this, field);
return frags.length ? Fragments.initField(frags[0]) : null;
Expand Down

0 comments on commit dadaeae

Please sign in to comment.