Home Explore Help
Sign In
fgm
/
meteor__coursera-meteor-1
1
0
Fork 0
Files Issues 0 Pull Requests 0
Browse Source

Adding iron:router.

Frederic G. MARAND 9 years ago
parent
d41bc4c2d2
commit
e96613dafa
5 changed files with 60 additions and 31 deletions
Unified View Show Diff Stats
  1. 8 2
      .eslintrc.js
  2. 1 0
      .meteor/packages
  3. 8 0
      .meteor/versions
  4. 30 29
      client/image_share.html
  5. 13 0
      client/main.js

+ 8 - 2
.eslintrc.js
View File 

@@ -7,14 +7,20 @@ module.exports = {
 
   },
 
   },
 
 
 
   "globals": {
 
   "globals": {
 
+    // From Meteor core.
 
     "$": true,
 
     "$": true,
 
     "jQuery": true,
 
     "jQuery": true,
 
     "Meteor": true,
 
     "Meteor": true,
 
     "Mongo": true,
 
     "Mongo": true,
 
     "Template": true,
 
     "Template": true,
 
-    "Images": true,
 
     "Accounts": true,
 
     "Accounts": true,
 
-    "Session": true
 
+    "Session": true,
 
+
 
+    // From iron:router.
 
+    "Router": true,
 
+
 
+    // from our app.
 
+    "Images": true
 
   },
 
   },
 
 
 
   "plugins": ["react"],
 
   "plugins": ["react"],

+ 1 - 0
.meteor/packages
View File 

@@ -24,3 +24,4 @@ ecmascript
 
 barbatus:stars-rating
 
 barbatus:stars-rating
 
 accounts-ui
 
 accounts-ui
 
 accounts-password
 
 accounts-password
 
+iron:router

+ 8 - 0
.meteor/versions
View File 

@@ -35,6 +35,14 @@ html-tools@1.0.5
 
 htmljs@1.0.5
 
 htmljs@1.0.5
 
 http@1.1.1
 
 http@1.1.1
 
 id-map@1.0.4
 
 id-map@1.0.4
 
+iron:controller@1.0.12
 
+iron:core@1.0.11
 
+iron:dynamic-template@1.0.12
 
+iron:layout@1.0.12
 
+iron:location@1.0.11
 
+iron:middleware-stack@1.0.11
 
+iron:router@1.0.12
 
+iron:url@1.0.11
 
 jquery@1.11.4
 
 jquery@1.11.4
 
 launch-screen@1.0.4
 
 launch-screen@1.0.4
 
 less@2.5.1
 
 less@2.5.1

+ 30 - 29
client/image_share.html
View File 

@@ -3,20 +3,19 @@
 
 </head>
 
 </head>
 
 
 
 <body>
 
 <body>
 
-  {{> image_add_form }}
 
+</body>
 
+
 
+<template name="welcome">
 
+  <h1>Welcome to image share {{ username }} !</h1>
 
+</template>
 
 
 
+<template name="navbar">
 
   <nav class="navbar navbar-default navbar-fixed-top">
 
   <nav class="navbar navbar-default navbar-fixed-top">
 
     <div class="container">
 
     <div class="container">
 
       {{> loginButtons }}
 
       {{> loginButtons }}
 
     </div>
 
     </div>
 
   </nav>
 
   </nav>
 
-
 
-  <div class="container">
 
-    <h1>Welcome to image share {{ username }} !</h1>
 
-
 
-    {{> images}}
 
-  </div>
 
-</body>
 
+</template>
 
 
 
 <template name="image_add_form">
 
 <template name="image_add_form">
 
   <div class="modal fade" id="image_add_form">
 
   <div class="modal fade" id="image_add_form">
 
@@ -41,30 +40,32 @@
 
 </template>
 
 </template>
 
 
 
 <template name="images">
 
 <template name="images">
 
-  {{#if currentUser }}
 
-    <button class="btn btn-success js-show-image-form">add image</button>
 
-  {{/if}}
 
+  <div class="container">
 
+    {{#if currentUser }}
 
+      <button class="btn btn-success js-show-image-form">add image</button>
 
+    {{/if}}
 
 
 
-  {{#if filtering_images }}
 
-    <h2>Showing images by user {{ getFilterUser }}. <a href="#" class="js-unset-image-filter">Show all images</a></h2>
 
-  {{/if}}
 
+    {{#if filtering_images }}
 
+      <h2>Showing images by user {{ getFilterUser }}. <a href="#" class="js-unset-image-filter">Show all images</a></h2>
 
+    {{/if}}
 
 
 
-  <div class="row">
 
-    {{#each images}}
 
-      <div class="col-xs-12 col-md-3" id="{{_id}}">
 
-        <div class="thumbnail">
 
+    <div class="row">
 
+      {{#each images}}
 
+        <div class="col-xs-12 col-md-3" id="{{_id}}">
 
+          <div class="thumbnail">
 
 
 
-          <img class="thumbnail-img js-image" src="{{img_src}}" alt="{{img_alt}}" />
 
+            <img class="thumbnail-img js-image" src="{{img_src}}" alt="{{img_alt}}" />
 
 
 
-          <div class="caption">
 
-            <h3>Rating: {{ rating }}</h3>
 
-            <p>{{ img_alt }}</p>
 
-            <p>User: <a href="#" class="js-set-image-filter">{{ getUser createdBy }}</a></p>
 
-            <p>{{> starsRating mutable=true class="js-rate-image" id=image_id }}</p>
 
-            <button class="js-del-image btn btn-warning">delete</button>
 
+            <div class="caption">
 
+              <h3>Rating: {{ rating }}</h3>
 
+              <p>{{ img_alt }}</p>
 
+              <p>User: <a href="#" class="js-set-image-filter">{{ getUser createdBy }}</a></p>
 
+              <p>{{> starsRating mutable=true class="js-rate-image" id=image_id }}</p>
 
+              <button class="js-del-image btn btn-warning">delete</button>
 
+            </div>
 
           </div>
 
           </div>
 
-        </div>
 
-      </div> <!-- / col -->
 
-    {{/each}}
 
-  </div> <!-- / row -->
 
+        </div> <!-- / col -->
 
+      {{/each}}
 
+    </div> <!-- / row -->
 
+  </div><!-- / div.container -->
 
 </template>
 
 </template>

+ 13 - 0
client/main.js
View File 

@@ -1,3 +1,13 @@
 
+// Routing.
 
+Router.route("/", function () {
 
+  this.render("navbar");
 
+});
 
+
 
+Router.route("/images", function () {
 
+  this.render("images");
 
+});
 
+
 
+// Infiniscroll.
 
 Session.set("imageLimit", 8);
 
 Session.set("imageLimit", 8);
 
 
 
 let lastScrollTop = 0;
 
 let lastScrollTop = 0;
 
@@ -19,10 +29,12 @@ $(window).scroll(function (event) {
 
   }
 
   }
 
 });
 
 });
 
 
 
+// Accounts configuration.
 
 Accounts.ui.config({
 
 Accounts.ui.config({
 
   passwordSignupFields: "USERNAME_AND_EMAIL"
 
   passwordSignupFields: "USERNAME_AND_EMAIL"
 
 });
 
 });
 
 
 
+// Helpers.
 
 const getUser = (userId) => {
 
 const getUser = (userId) => {
 
   let user = Meteor.users.findOne({ _id: userId });
 
   let user = Meteor.users.findOne({ _id: userId });
 
   return user ? user.username : "anonymous";
 
   return user ? user.username : "anonymous";
 
@@ -58,6 +70,7 @@ Template.body.helpers({
 
   }
 
   }
 
 });
 
 });
 
 
 
+// Events.
 
 Template.images.events({
 
 Template.images.events({
 
   "click .js-image": function (event) {
 
   "click .js-image": function (event) {
 
     $(event.target).css("width", "50px");
 
     $(event.target).css("width", "50px");