Skip to content
This repository has been archived by the owner on Nov 14, 2018. It is now read-only.

Commit

Permalink
Add documentation to dummy app
Browse files Browse the repository at this point in the history
  • Loading branch information
samselikoff committed Jan 28, 2016
1 parent 7634965 commit b450466
Show file tree
Hide file tree
Showing 20 changed files with 303 additions and 33 deletions.
41 changes: 26 additions & 15 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,26 +1,37 @@
# Ember-cli-ted-navs
# Ember CLI TED Navs

This README outlines the details of collaborating on this Ember addon.
> This addon is prepared for internal use by TED and is open-sourced for educational purposes but will not be supported for shared community use.
This addon adds several TED-themed navigation components to your app.

## Installation

* `git clone` this repository
* `npm install`
* `bower install`
This addon relies on TED Bootstrap, so first ensure that [Ember CLI TED Bootstrap](https://github.com/tedconf/ember-cli-ted-bootstrap) is installed.

Then, install using

```sh
ember install ember-ted-navs
```

## Components

## Running
### ted-navbar

* `ember server`
* Visit your app at http://localhost:4200.
Blockless form:

## Running Tests
```hbs
{{ted-navbar name='My App'}}
```

* `npm test` (Runs `ember try:testall` to test your addon against multiple Ember versions)
* `ember test`
* `ember test --server`
`<ted-navbar>` accepts an optional block, so you can add additional Bootstrap elements to the navbar:

## Building
```hbs
{{#ted-navbar name='My App'}}
{{/ted-navbar}}
```

* `ember build`
### ted-nav

For more information on using ember-cli, visit [http://www.ember-cli.com/](http://www.ember-cli.com/).
### ted-subnav
2 changes: 1 addition & 1 deletion app/components/ted-nav-item.js
Original file line number Diff line number Diff line change
@@ -1 +1 @@
export { default } from 'ember-cli-ted-navs/components/ted-nav-item';
export { default } from 'ember-ted-navs/components/ted-nav-item';
2 changes: 1 addition & 1 deletion app/components/ted-nav.js
Original file line number Diff line number Diff line change
@@ -1 +1 @@
export { default } from 'ember-cli-ted-navs/components/ted-nav';
export { default } from 'ember-ted-navs/components/ted-nav';
2 changes: 1 addition & 1 deletion app/components/ted-navbar.js
Original file line number Diff line number Diff line change
@@ -1 +1 @@
export { default } from 'ember-cli-ted-navs/components/ted-navbar';
export { default } from 'ember-ted-navs/components/ted-navbar';
2 changes: 1 addition & 1 deletion app/components/ted-subnav-item.js
Original file line number Diff line number Diff line change
@@ -1 +1 @@
export { default } from 'ember-cli-ted-navs/components/ted-subnav-item';
export { default } from 'ember-ted-navs/components/ted-subnav-item';
2 changes: 1 addition & 1 deletion app/components/ted-subnav.js
Original file line number Diff line number Diff line change
@@ -1 +1 @@
export { default } from 'ember-cli-ted-navs/components/ted-subnav';
export { default } from 'ember-ted-navs/components/ted-subnav';
2 changes: 1 addition & 1 deletion app/services/ted-subnav-state.js
Original file line number Diff line number Diff line change
@@ -1 +1 @@
export { default } from 'ember-cli-ted-navs/services/ted-subnav-state';
export { default } from 'ember-ted-navs/services/ted-subnav-state';
2 changes: 1 addition & 1 deletion bower.json
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
{
"name": "ember-cli-ted-navs",
"name": "ember-ted-navs",
"dependencies": {
"ember": "1.13.11",
"ember-cli-shims": "0.0.6",
Expand Down
2 changes: 1 addition & 1 deletion ember-cli-build.js
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ var EmberAddon = require('ember-cli/lib/broccoli/ember-addon');

module.exports = function(defaults) {
var app = new EmberAddon(defaults, {
// Add options here
snippetSearchPaths: ['app', 'tests/dummy'],
});

/*
Expand Down
2 changes: 1 addition & 1 deletion index.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,5 +2,5 @@
'use strict';

module.exports = {
name: 'ember-cli-ted-navs'
name: 'ember-ted-navs'
};
5 changes: 4 additions & 1 deletion package.json
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
{
"name": "ember-cli-ted-navs",
"name": "ember-ted-navs",
"version": "0.0.0",
"description": "The default blueprint for ember-cli addons.",
"directories": {
Expand All @@ -23,6 +23,7 @@
"ember-cli-app-version": "^1.0.0",
"ember-cli-content-security-policy": "0.4.0",
"ember-cli-dependency-checker": "^1.1.0",
"ember-cli-github-pages": "0.0.6",
"ember-cli-htmlbars-inline-precompile": "^0.3.1",
"ember-cli-ic-ajax": "0.2.4",
"ember-cli-inject-live-reload": "^1.3.1",
Expand All @@ -32,10 +33,12 @@
"ember-cli-sri": "^1.2.0",
"ember-cli-ted-bootstrap": "1.0.0",
"ember-cli-uglify": "^1.2.0",
"ember-code-snippet": "1.1.3",
"ember-data": "1.13.15",
"ember-disable-prototype-extensions": "^1.0.0",
"ember-disable-proxy-controllers": "^1.0.1",
"ember-export-application-global": "^1.0.4",
"ember-ted-docs": "1.2.1",
"ember-try": "~0.0.8"
},
"keywords": [
Expand Down
9 changes: 9 additions & 0 deletions tests/dummy/app/controllers/conferences.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
import Ember from 'ember';

export default Ember.Controller.extend({
actions: {
conferencesAction() {
alert('Action from conferences controller');
}
}
});
74 changes: 73 additions & 1 deletion tests/dummy/app/styles/app.scss
Original file line number Diff line number Diff line change
@@ -1 +1,73 @@
@import 'ember-cli-ted-navs/styles';
@import 'ember-ted-docs/styles';
@import 'ember-ted-navs/styles';

h2 {
margin-top: 50px;
}

section {
margin-bottom: 50px;
}

.wider-container {
@media (min-width: 768px) {
width: 780px;
}
@media (min-width: 992px) {
width: 1000px;
}
@media (min-width: 1200px) {
width: 1200px;
}
}

.Demo {
box-shadow: 0 27px 24px 0 rgba(0,0,0,0.2),0 40px 77px 0 rgba(0,0,0,0.22);
overflow: hidden;
height: 600px;
margin-left: -15px;
margin-right: -15px;
margin-top: 30px;
margin-bottom: 70px;
}

.UI-Element {
margin-bottom: 30px;

&__example-view {
padding: 50px 10px 30px;
position: relative;
border: 1px solid #ddd;
border-top-right-radius: 3px;
border-top-left-radius: 3px;
}

&__example-label {
font-size: 10px;
font-weight: bold;
color: #666;
text-transform: uppercase;
position: absolute;
top: 0px;
left: 0px;
padding: 5px;
background: #eee;
border-bottom-right-radius: 4px;
}

&__example-use {
background-color: rgb(250,250,250);
border: 1px solid #ddd;
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;

& .hljs {
background: transparent;
border: none;
}
}
}

.u-margin-top {
margin-top: 15px;
}
175 changes: 174 additions & 1 deletion tests/dummy/app/templates/application.hbs
Original file line number Diff line number Diff line change
@@ -1,4 +1,23 @@
{{ted-navbar name='Hoover'}}
{{ted-page-header
subheading='Ember'
slim-heading='TED'
strong-heading='Navs'
byline='Navigational components for your Ember app'
github='http://github.com/tedconf/ember-ted-navs'}}

<div class="container wider-container">
<h2>Installation</h2>
<p>This addon requires on <a href="https://github.com/tedconf/ember-cli-ted-bootstrap">Ember CLI TED Bootstrap</a>, so make sure to install that first.</p>
<p>Then, install this addon using</p>
<p><pre>ember install ember-ted-navs</pre></p>

<h2>Quickstart</h2>
<p>Here's a demo of the navigation elements working together:</p>
<div class="Demo">
{{!-- BEGIN-SNIPPET demo-app --}}
{{!-- application.hbs --}}

{{ted-navbar name='My App'}}

<div class="container">
{{#ted-nav}}
Expand All @@ -16,4 +35,158 @@

{{outlet}}
</div>
{{!-- END-SNIPPET --}}
</div>

<div>
<p>And the associated code:</p>
{{code-snippet name='demo-app.hbs'}}
{{code-snippet name='demo-app-talks.hbs'}}
</div>

<h2>Components</h2>
<section>
<h3>&lt;ted-navbar&gt;</h3>
<p>An application-wide header:</p>
<div class="UI-Element">
<div class="UI-Element__example-view">
<p class="UI-Element__example-label">Example</p>
{{!-- BEGIN-SNIPPET ted-navbar --}}
{{ted-navbar name='My App'}}
{{!-- END-SNIPPET --}}
<div class="UI-Element__example-use">
{{code-snippet name='ted-navbar.hbs'}}
</div>
</div>
</div>

<p>Accepts a block for further customization, for example additional <a href="http://getbootstrap.com/components/#navbar">Bootstrap navbar components</a>:</p>

<div class="UI-Element">
<div class="UI-Element__example-view">
<p class="UI-Element__example-label">Example</p>
{{!-- BEGIN-SNIPPET ted-navbar-block --}}
{{#ted-navbar name='My App'}}
<ul class="nav navbar-nav">
<li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
{{/ted-navbar}}
{{!-- END-SNIPPET --}}
<div class="UI-Element__example-use">
{{code-snippet name='ted-navbar-block.hbs'}}
</div>
</div>
</div>
</section>

<section>
<h3>&lt;ted-nav&gt; and &lt;ted-nav-item&gt;</h3>
<p>Primary navigation element, typically used for an application's main routes:</p>
<div class="UI-Element">
<div class="UI-Element__example-view">
<p class="UI-Element__example-label">Example</p>
{{!-- BEGIN-SNIPPET ted-nav --}}
{{#ted-nav}}
{{ted-nav-item 'Home' 'home'}}
{{ted-nav-item 'TED Talks' 'talks'}}
{{ted-nav-item 'Users' 'users'}}
{{ted-nav-item 'Conferences' 'conferences'}}
{{/ted-nav}}
{{!-- END-SNIPPET --}}
<div class="UI-Element__example-use u-margin-top">
{{code-snippet name='ted-nav.hbs'}}
</div>
</div>
</div>
<p>Each &lt;ted-nav-item&gt; has the same api as Ember's <code>&lbrace;&lbrace;link-to&rbrace;&rbrace;</code>. The blockless form takes two positional parameters, <code>label</code> followed by <code>route</code>. It also accepts a block with a single positional param for <code>route</code>, yielding to the block for the label:</p>
<div class="UI-Element">
<div class="UI-Element__example-view">
<p class="UI-Element__example-label">Example</p>
{{!-- BEGIN-SNIPPET ted-nav-block --}}
{{#ted-nav}}
{{#ted-nav-item 'home'}}
<i class='fa fa-home'></i> Welcome home!
{{/ted-nav-item}}
{{ted-nav-item 'TED Talks' 'talks'}}
{{ted-nav-item 'Users' 'users'}}
{{ted-nav-item 'Conferences' 'conferences'}}
{{/ted-nav}}
{{!-- END-SNIPPET --}}
<div class="UI-Element__example-use u-margin-top">
{{code-snippet name='ted-nav-block.hbs'}}
</div>
</div>
</div>
<p>Additionally you can use a ted-nav-item to initiate an action, instead of link to a route, by passing an <code>onClick</code> handler to it. In this case, you can pass a single positional param as the label, or pass a block:</p>
<div class="UI-Element">
<div class="UI-Element__example-view">
<p class="UI-Element__example-label">Example</p>
{{!-- BEGIN-SNIPPET ted-nav-action --}}
{{#ted-nav}}
{{ted-nav-item 'Do it to it' onClick=(action (mut someVar))}}
{{#ted-nav-item right=true onClick=(action (mut someVar))}}
<i class='fa fa-plus'></i> Add transfer
{{/ted-nav-item}}
{{/ted-nav}}
{{!-- END-SNIPPET --}}
<div class="UI-Element__example-use u-margin-top">
{{code-snippet name='ted-nav-action.hbs'}}
</div>
</div>
</div>
</section>

<section>
<h3>&lt;ted-subnav&gt; and &lt;ted-subnav-item&gt;</h3>
<p>Secondary navigation element, used for child routes or route-specific actions.</p>
<div class="UI-Element">
<div class="UI-Element__example-view">
<p class="UI-Element__example-label">Example</p>
{{!-- BEGIN-SNIPPET ted-subnav --}}
{{#ted-subnav}}
{{ted-subnav-item 'All talks' 'talks.index'}}
{{ted-subnav-item 'New talk' 'talks.new'}}
{{/ted-subnav}}
{{!-- END-SNIPPET --}}
<div class="UI-Element__example-use u-margin-top">
{{code-snippet name='ted-subnav.hbs'}}
</div>
</div>
</div>
<p>&lt;ted-subnav-item&gt; has exactly the same api as ted-nav-item, so you can use it for navigation or actions, and it accepts a block:</p>
<div class="UI-Element">
<div class="UI-Element__example-view">
<p class="UI-Element__example-label">Example</p>
{{!-- BEGIN-SNIPPET ted-subnav-custom --}}
{{#ted-subnav}}
{{ted-subnav-item 'All talks' 'talks.index'}}
{{#ted-subnav-item 'talks.new'}}
<i class='fa fa-star'></i> New talk
{{/ted-subnav-item}}
{{#ted-subnav-item right=true onClick=(action (mut somethingElse))}}
<i class='fa fa-thumbs-up'></i> Hack the planet
{{/ted-subnav-item}}
{{/ted-subnav}}
{{!-- END-SNIPPET --}}
<div class="UI-Element__example-use u-margin-top">
{{code-snippet name='ted-subnav-custom.hbs'}}
</div>
</div>
</div>
<p>Finally, when used in combination with &lt;ted-nav&gt;, &lt;ted-subnav&lt; will animate open and closed, when navigating between routes that do and don't have a subnav. Note that going from one route with a subnav to another will not trigger animation.</p>
<p>See the demo at the top for an example of this.</p>
</section>
</div>
Loading

0 comments on commit b450466

Please sign in to comment.