merge pull request #8 and improve doc and examples

README.md

@@ -1,9 +1,13 @@
 meteor-breadcrumb-plugin
 ========================
 
-This package will provide a easy way to add a breadcrumb with enough flexibility to your project.
+This package will provide a easy way to add a breadcrumb with some flexibility to your project.
 
-# Try the [demo](http://meteor-breadcrumb-plugin-basic-example.meteor.com) which can be found on [github](https://github.com/monbro/meteor-breadcrumb-plugin/tree/master/examples/basic)
+# Demo and Examples
+
+## Simple [demo](http://meteor-breadcrumb-plugin-simple-example.meteor.com), on [github](https://github.com/monbro/meteor-breadcrumb-plugin/tree/master/examples/simple)
+
+## Advanced [demo](http://meteor-breadcrumb-plugin-advanced-example.meteor.com), on [github](https://github.com/monbro/meteor-breadcrumb-plugin/tree/master/examples/advanced)
 
 # Dependencies
 
@@ -13,7 +17,7 @@ This package will provide a easy way to add a breadcrumb with enough flexibility
 # Compatibility
 
 * works out of the box with bootstrap3
-* use the pre existing template or use your own
+* use the pre existing breadcrumb template or use your own easily
 
 # Installation
 
@@ -23,11 +27,16 @@ Use `meteor add monbro:iron-router-breadcrumb` to add the package to your meteor
 
 * You need to add two parameters to your iron routes which are `parent` and `title`
 
-## 1. Example Iron Route with multiple levels
+## 1. Example iron route with multiple levels
 
 ### In this example the Breadcrumb would look or the url `/dashboard/analytics/books` like: `Dashboard / Analytics / Category Books`
 
 ```
+// Configure a default title (optional)
+Router.configure({
+  defaultBreadcrumbTitle: 'My Site'
+});
+
 // Level 0
 Router.route('/', {
   name: 'dashboard',
@@ -52,7 +61,7 @@ Router.route('/dashboard/analytics/books', {
 });
 ```
 
-## 2. Example Dynamic Iron Route
+## 2. Example dynamic iron route
 
 ### In this example the Breadcrumb would look for the url `/post/hello-world` like: `Home / Blogpost Hello-World`
 
@@ -71,7 +80,49 @@ Router.route('/post/:_name', {
 });
 ```
 
-## Example custom template for navigation
+## 3. Example using a function for the title
+
+### In this example the Breadcrumb would look for the url `/post/hello-world` like: `Home / Blogpost Hello-World`
+
+```
+Router.route('/', {
+  name: 'home',
+  template: 'home',
+  title: 'Home'
+});
+
+Router.route('/post/:_name', {
+  name: 'post',
+  parent: 'home', // this should be the name variable of the parent route
+  template: 'singleBlogPost',
+  data: {
+    firstname: 'Gandalf',
+    lastname: 'the Grey'
+  },
+  title: function() {
+    // using a function to generate the title dynamically
+    var data = this.data();
+    console.log('Our data object for this route:');
+    console.log(data);
+    console.log('');
+    console.log('all given parameters for this route:');
+    console.log(this.params);
+    return 'Dynamic Title for '+data.firstname+' for post: '+this.params['_name'];
+  }
+});
+
+// a more simple example
+Router.route('/function-title', {
+  name: 'function.title',
+  parent: 'home',
+  template: 'functiontitle',
+  title: function() {
+    return 'By-Function-Retuned';
+  }
+});
+```
+
+## 4. Example using a custom template for the breadcrumb
 
 ### Please note, that you dont have to use a custom template with the name `breadcrumb`, you can use the existing one out of the box by simply using `{{> breadcrumb}}` to include the preexisting template (which looks exact like the following example) anywhere in your own templates.
 
@@ -85,12 +136,12 @@ Router.route('/post/:_name', {
 </template>
 ```
 
-## Example access of the breadcrumb in Javascript
+## 5. Example on how to access the breadcrumb object on the client
 
 ```
 if (Meteor.is_client) {
   Template.analytics.rendered = function(){
     console.log(Breadcrumb.getAll()); // you can access the breadcrumb objects in a template helper as well
   }
 }
-```
+```

examples/basic/.meteor/packages → examples/advanced/.meteor/packages

@@ -4,6 +4,6 @@
 # but you can also edit it by hand.
 
 meteor-platform
+twbs:bootstrap
 iron:router
 monbro:iron-router-breadcrumb
-mizzao:bootstrap-3

examples/advanced/.meteor/versions

@@ -0,0 +1,56 @@
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+iron:[email protected]
+iron:[email protected]
+iron:[email protected]
+iron:[email protected]
+iron:[email protected]
+iron:[email protected]
+iron:[email protected]
+iron:[email protected]
+[email protected]_2
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+monbro:[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+twbs:[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]

examples/advanced/meteor.css

@@ -0,0 +1,4 @@
+/* CSS declarations go here */
+body {
+    margin: 40px auto;
+}

examples/advanced/meteor.js

@@ -0,0 +1,92 @@
+/**
+ * example configuration for the beadcrumb package
+ */
+
+// default values for the breadcrumb package are stored in the router configuration object as well
+Router.configure({
+  layoutTemplate: 'layout',
+  defaultBreadcrumbTitle: 'My Default Title'
+});
+
+// Level 0
+Router.route('/', {
+  name: 'dashboard',
+  template: 'dashboard',
+  title: 'Dashboard',
+  data: {name: 'Gandalf'}
+});
+
+Router.route('/analytics', {
+  name: 'analytics',
+  parent: 'dashboard',
+  template: 'analytics',
+  title: 'Analytics'
+});
+
+Router.route('/analytics/books', {
+  name: 'analytics.books',
+  parent: 'analytics',
+  template: 'analyticsBooks',
+  title: 'Category Books'
+});
+
+Router.route('/tags', {
+  name: 'tags',
+  parent: 'dashboard',
+  template: 'tags',
+  title: 'Taglist'
+});
+
+Router.route('/tag/:_name', {
+  name: 'tag',
+  parent: 'tags',
+  template: 'tagDetail',
+  title: 'Detailpage for :_name',
+  data: function () {
+    return this.params;
+  },
+});
+
+Router.route('/default-title', {
+  name: 'default.title',
+  parent: 'dashboard',
+  template: 'defaulttitle'
+});
+
+Router.route('/function-title/:_someparam', {
+  name: 'function.title',
+  parent: 'dashboard',
+  template: 'functiontitle',
+  data: {
+    firstname: 'Gandalf',
+    lastname: 'the Grey'
+  },
+  title: function() {
+    var data = this.data();
+    console.log('Our data object for this route:');
+    console.log(data);
+    console.log('');
+    console.log('all given parameters for this route:');
+    console.log(this.params);
+    return 'Dynamic Title for '+data.firstname+' for route details: '+this.params['_someparam'];
+  }
+});
+
+/**
+ * example page specific stuff below here, just for demonstration purpose
+ * you do not need this to make the breadcrumb package work
+ */
+
+// register a iron router template helper to check if the route is active
+UI.registerHelper('isActiveRoute', function(routeName) {
+    var currentRoute = Router.current();
+    return currentRoute && routeName === currentRoute.route.getName() ? 'active' : '';
+});
+
+  // init tooltips for the example page
+if (Meteor.isClient) {
+  Template.layout.rendered = function() {
+    $('[data-toggle="tooltip"]').tooltip({'trigger':'manual'});
+    $('[data-toggle="tooltip"]').tooltip('show');
+  };
+}

examples/simple/.meteor/.finished-upgraders

@@ -0,0 +1,8 @@
+# This file contains information which helps Meteor properly upgrade your
+# app when you run 'meteor update'. You should check it into version control
+# with your project.
+
+notices-for-0.9.0
+notices-for-0.9.1
+0.9.4-platform-file
+notices-for-facebook-graph-api-2

examples/simple/.meteor/.gitignore

@@ -0,0 +1 @@
+local

examples/simple/.meteor/.id

@@ -0,0 +1,7 @@
+# This file contains a token that is unique to your project.
+# Check it into your repository along with the rest of this directory.
+# It can be used for purposes such as:
+#   - ensuring you don't accidentally deploy one app on top of another
+#   - providing package authors with aggregated statistics
+
+16e61x41u2eo8xds80ox

examples/simple/.meteor/cordova-plugins

@@ -0,0 +1 @@
+

examples/simple/.meteor/packages

@@ -0,0 +1,10 @@
+# Meteor packages used by this project, one per line.
+#
+# 'meteor add' and 'meteor remove' will edit this file for you,
+# but you can also edit it by hand.
+
+meteor-platform
+iron:router
+monbro:iron-router-breadcrumb
+mizzao:bootstrap-3
+

examples/simple/.meteor/platforms

@@ -0,0 +1,2 @@
+server
+browser

examples/simple/.meteor/release

@@ -0,0 +1 @@
+[email protected]