Skip to content

Commit d2e3ee3

Browse files
scottgarnerscottgarner
committed
Cloud Code setup for view counting and initial work on gallery sorting per #64 
1 parent 99bc483 commit d2e3ee3

File tree

8 files changed

+153
-29
lines changed

8 files changed

+153
-29
lines changed

‎.gitignore

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,3 @@
11
_site
2+
_cloudcode/config/global.json
23
.DS_Store

‎_cloudcode/cloud/main.js

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
2+
// Use Parse.Cloud.define to define as many cloud functions as you want.
3+
// For example:
4+
Parse.Cloud.define("hello", function(request, response) {
5+
response.success("Hello world!");
6+
});
7+
8+
Parse.Cloud.define("incrementViewCount", function(request, response) {
9+
Parse.Cloud.useMasterKey();
10+
11+
var Gallery = Parse.Object.extend("Gallery");
12+
var gallery = new Gallery();
13+
14+
gallery.id = request.params.id;
15+
16+
gallery.increment("viewCount", 1);
17+
gallery.save(null, {
18+
success: function(item) {
19+
response.success(true);
20+
},
21+
error: function(item, error) {
22+
response.error("Could not increment view count.");
23+
}
24+
});
25+
});

‎_cloudcode/public/index.html

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
2+
<html>
3+
<head>
4+
<title>My ParseApp site</title>
5+
<style>
6+
body { font-family: Helvetica, Arial, sans-serif; }
7+
div { width: 800px; height: 400px; margin: 40px auto; padding: 20px; border: 2px solid #5298fc; }
8+
h1 { font-size: 30px; margin: 0; }
9+
p { margin: 40px 0; }
10+
em { font-family: monospace; }
11+
a { color: #5298fc; text-decoration: none; }
12+
</style>
13+
</head>
14+
<body>
15+
<div>
16+
<h1>Congratulations! You're already hosting with Parse.</h1>
17+
<p>To get started, edit this file at <em>public/index.html</em> and start adding static content.</p>
18+
<p>If you want something a bit more dynamic, delete this file and check out <a href="https://parse.com/docs/hosting_guide#webapp">our hosting docs</a>.</p>
19+
</div>
20+
</body>
21+
</html>

‎css/main.scss

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -624,6 +624,11 @@ div#displayEditor {
624624
width: 250px;
625625
height: 200px;
626626
margin-bottom: 12px;
627+
box-shadow: 4px 4px 1px rgba(0,0,0,.25);
628+
}
629+
630+
#galleryFilter {
631+
margin-top: 12px;
627632
}
628633

629634
#galleryControls {

‎display/index.html

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -12,9 +12,8 @@ <h1 id="displayTitle">Look What I Made!</h1>
1212
<hr/>
1313

1414
<p>
15-
This image was created with the Drawing with Code tutorial.
16-
To learn more and explore the tutorial, click the Visit Tutorial button.
17-
You can also use the buttons below to view or download the code used to create this image.</p>
15+
This image was created with the Hello Processing tutorial.
16+
To learn more and explore the tutorial, click the Visit Tutorial button. You can also view or download the code used to create this image.</p>
1817
<hr/>
1918

2019
<div id="displayCommands" class="btn-group-vertical btn-block">
@@ -30,6 +29,10 @@ <h1 id="displayTitle">Look What I Made!</h1>
3029
<a id="downloadCode" class="btn btn-default btn-primary" href="#">
3130
<span class="glyphicon glyphicon-download"></span> Download Code
3231
</a>
32+
33+
<a id="downloadCode" class="btn btn-default btn-primary" href="/gallery/">
34+
<span class="glyphicon glyphicon-th-large"></span> View Gallery
35+
</a>
3336
</div>
3437

3538

‎gallery/index.html

Lines changed: 17 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,10 +16,26 @@
1616

1717
{% include header.html %}
1818

19+
<div id="galleryFilter" class="text-center">
20+
<div class="btn-group">
21+
<button class="filter btn btn-default btn-sm active" data-mode="0">
22+
<span class="glyphicon glyphicon-star"></span> Featured
23+
</button>
24+
25+
<button class="filter btn btn-default btn-sm" data-mode="1">
26+
<span class="glyphicon glyphicon-heart"></span> Popular
27+
</a>
28+
29+
<button class="filter btn btn-default btn-sm" data-mode="2">
30+
<span class="glyphicon glyphicon-time"></span> Recent
31+
</button>
32+
</div>
33+
</div>
34+
1935
<div id="galleryView"></div>
2036

2137
<div id="galleryControls">
22-
<button id="loadMore" class="btn btn-default" data-loading-text="Loading...">
38+
<button id="loadMore" class="btn btn-default btn-sm" data-loading-text="Loading...">
2339
<span class="glyphicon glyphicon-plus"></span> Load More
2440
</button>
2541
</div>

‎js/display.js

Lines changed: 13 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -86,13 +86,24 @@ var helloDisplay = {
8686

8787
var GalleryObject = Parse.Object.extend("Gallery");
8888
var query = new Parse.Query(GalleryObject);
89+
console.log("Query start.");
8990
query.get(parseID, {
9091
success: function(gallery) {
92+
console.log("Query complete.");
9193
helloDisplay.showSketch(gallery.get("source"));
94+
95+
Parse.Cloud.run('incrementViewCount', {id: gallery.id}, {
96+
success: function(result) {
97+
// Success
98+
},
99+
error: function(error) {
100+
console.log("View increment failed.")
101+
}
102+
});
103+
92104
},
93105
error: function(object, error) {
94-
// The object was not retrieved successfully.
95-
// error is a Parse.Error with an error code and message.
106+
console.log("Object retrieval failed.")
96107
}
97108
});
98109

‎js/gallery.js

Lines changed: 65 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -5,43 +5,49 @@
55
*/
66
var helloGallery = {
77
pageNumber: 0,
8-
itemsPerPage: 10,
8+
sortMode: 0,
9+
itemsPerPage: 12,
910
totalItems: null,
1011
/**
1112
* Initialize gallery page
1213
*/
1314
init: function () {
1415

16+
$(".filter").click(function(e) {
17+
var newMode = $(e.target).attr('data-mode');
1518

16-
$("#loadMore").click(function() {
19+
if (newMode != helloGallery.sortMode) {
1720

18-
helloGallery.loadElements(function(elements){
21+
helloGallery.sortMode = parseInt(newMode);
1922

20-
for (var element in elements) {
21-
var item = $(elements[element]);
22-
23-
$('#galleryView').append(item);
24-
$('#galleryView').isotope('appended', item);
25-
}
26-
});
23+
$(".filter").removeClass("active");
24+
$(e.target).addClass("active");
25+
26+
helloGallery.pageNumber = 0;
27+
$('#galleryView').isotope('destroy');
28+
$('#galleryView').html("");
29+
$("#loadMore").show();
30+
31+
helloGallery.loadInitial();
32+
}
2733

2834
});
2935

30-
// Get the gistID from the URL and display it
36+
$("#loadMore").click(function() {
3137

32-
Parse.initialize("x8FmMInL8BbVeBqonPzgvS8WNKbPro65Li5DzTI0", "Y7PPNnhLPhCdFMAKgw7amBxGerz67gAnG3UKb53s");
38+
helloGallery.loadMore();
3339

34-
var GalleryObject = Parse.Object.extend("Gallery");
35-
var query = new Parse.Query(GalleryObject);
36-
query.count({
37-
success: function(number) {
38-
helloGallery.totalItems = number;
39-
},
40-
error: function(error) {
41-
// error is an instance of Parse.Error.
42-
}
4340
});
4441

42+
// Get the ID from the URL and display it
43+
44+
Parse.initialize("x8FmMInL8BbVeBqonPzgvS8WNKbPro65Li5DzTI0", "Y7PPNnhLPhCdFMAKgw7amBxGerz67gAnG3UKb53s");
45+
46+
helloGallery.loadInitial();
47+
},
48+
49+
loadInitial: function() {
50+
4551
helloGallery.loadElements( function(elements){
4652

4753
var container = $('#galleryView');
@@ -54,9 +60,20 @@ var helloGallery = {
5460
isFitWidth: true
5561
}
5662
});
57-
5863
});
64+
},
65+
66+
loadMore: function() {
67+
68+
helloGallery.loadElements(function(elements){
5969

70+
for (var element in elements) {
71+
var item = $(elements[element]);
72+
73+
$('#galleryView').append(item);
74+
$('#galleryView').isotope('appended', item);
75+
}
76+
});
6077

6178
},
6279

@@ -68,7 +85,32 @@ var helloGallery = {
6885
var query = new Parse.Query(GalleryObject);
6986
query.limit(helloGallery.itemsPerPage);
7087
query.skip(helloGallery.pageNumber * helloGallery.itemsPerPage);
71-
query.descending("createdAt");
88+
89+
switch (helloGallery.sortMode) {
90+
case 0:
91+
console.log("Featured");
92+
query.descending("featureScore");
93+
query.addDescending("createdAt");
94+
break;
95+
case 1:
96+
console.log("Popular");
97+
query.descending("viewCount");
98+
query.addDescending("createdAt");
99+
break;
100+
case 2:
101+
console.log("Recent");
102+
query.descending("createdAt");
103+
break;
104+
}
105+
106+
query.count({
107+
success: function(number) {
108+
helloGallery.totalItems = number;
109+
},
110+
error: function(error) {
111+
// error is an instance of Parse.Error.
112+
}
113+
});
72114

73115
query.find({
74116
success: function(results) {

0 commit comments

Comments
 (0)