bootstrap-for-ember-rails 0.0.2

data/lib/bootstrap-for-ember-rails/bootstrap-for-ember/app/templates/showcase/show_components/page-header.md

@@ -0,0 +1,15 @@
+# Page Header
+
+<br/>
+
+> A simple shell for an h1 to appropriately space out and segment sections of content on a page. It can utilize the h1's default small element, as well as most other components (with additional styles).
+<small>By Bootstrap</small>
+
+
+<div class="bs-example">
+    {{bs-page-header title="Example page header" sub="Subtext for header"}}
+</div>
+
+```html
+    \{\{bs-page-header title="Example page header" sub="Subtext for header"\}\}
+```

data/lib/bootstrap-for-ember-rails/bootstrap-for-ember/app/templates/showcase/show_components/panel.md

@@ -0,0 +1,123 @@
+# Panel
+
+> While not always necessary, sometimes you need to put your DOM in a box. For those situations, try the panel component.
+<small>By Bootstrap</small>
+
+## Basic
+
+<div class="bs-example">
+    {{#bs-panel heading="Simple Panel" footer="Panel Footer"}}
+        <p>Panel content goes here...!</p>
+    {{/bs-panel}}
+</div>
+
+``` html
+\{\{#bs-panel heading="Simple Panel" footer="Panel Footer"\}\}
+    <p>Panel content goes here...!</p>
+\{\{/bs-panel\}\}
+```
+
+## Contextual alternatives
+
+> Like other components, easily make a panel more meaningful to a particular context by adding any of the contextual state classes.
+<small>By Bootstrap</small>
+
+<div class="bs-example">
+    {{#bs-panel heading="Primary Panel" type="primary"}}
+        <p>Panel content.</p>
+    {{/bs-panel}}
+    {{#bs-panel heading="Success Panel" type="success"}}
+        <p>Panel content.</p>
+    {{/bs-panel}}
+    {{#bs-panel heading="Info Panel" type="info"}}
+        <p>Panel content.</p>
+    {{/bs-panel}}
+    {{#bs-panel heading="Warning Panel" type="warning"}}
+        <p>Panel content.</p>
+    {{/bs-panel}}
+    {{#bs-panel heading="Danger Panel" type="danger"}}
+        <p>Panel content.</p>
+    {{/bs-panel}}
+</div>
+
+``` html
+    \{\{#bs-panel heading="Primary Panel" type="primary"\}\}
+        <p>Panel content.</p>
+    \{\{/bs-panel\}\}
+    \{\{#bs-panel heading="Success Panel" type="success"\}\}
+        <p>Panel content.</p>
+    \{\{/bs-panel\}\}
+    \{\{#bs-panel heading="Info Panel" type="info"\}\}
+        <p>Panel content.</p>
+    \{\{/bs-panel\}\}
+    \{\{#bs-panel heading="Warning Panel" type="warning"\}\}
+        <p>Panel content.</p>
+    \{\{/bs-panel}}
+    \{\{#bs-panel heading="Danger Panel" type="danger"\}\}
+        <p>Panel content.</p>
+    \{\{/bs-panel\}\}
+```
+
+## Dismissable Panels
+
+This goes beyond what Bootstrap offers and let you create a closable panels by adding the `dismiss=true` property
+
+<div class="bs-example">
+    {{#bs-panel heading="Primary Panel" type="primary" dismiss=true onClose="panelClosed"}}
+        <p>Panel content.</p>
+    {{/bs-panel}}
+</div>
+
+
+``` html
+\{\{#bs-panel heading="Primary Panel" type="primary" dismiss=true onClose="panelClosed"\}\}
+    <p>Panel content.</p>
+\{\{/bs-panel\}\}
+```
+
+## Clickable Panels
+
+Panels can also be clickable, the click is propagated to the _current controller_ via the _clicked_ property
+
+
+<div class="bs-example">
+    {{#bs-panel heading="Primary Panel" type="primary" clicked="panelClicked"}}
+        <p>Panel content.</p>
+    {{/bs-panel}}
+</div>
+
+``` html
+\{\{#bs-panel heading="Primary Panel" type="primary" clicked="panelClicked"\}\}
+    <p>Panel content.</p>
+\{\{/bs-panel\}\}
+```
+
+## Collapsible Panels
+
+Panels can be collapsible, to enable collapsible support set `collapsible=true` on the component tag:
+
+<div class="bs-example">
+{{#bs-panel heading="Simple Panel" collapsible=true dismiss=true footer="Panel Footer"}}
+    <p>Panel content goes here...!</p>
+{{/bs-panel}}
+</div>
+
+``` html
+\{\{#bs-panel heading="Simple Panel" collapsible=true dismiss=true footer="Panel Footer"\}\}
+    <p>Panel content goes here...!</p>
+\{\{/bs-panel\}\}
+```
+
+Collapsible panels can also be closed by default by setting `open=false`.
+
+<div class="bs-example">
+{{#bs-panel heading="Open me!" collapsible=true dismiss=true open=false}}
+    <p>IM OPEN NOW!</p>
+{{/bs-panel}}
+</div>
+
+``` html
+\{\{#bs-panel heading="Simple Panel" collapsible=true dismiss=true footer="Panel Footer"\}\}
+    <p>Panel content goes here...!</p>
+\{\{/bs-panel\}\}
+```

data/lib/bootstrap-for-ember-rails/bootstrap-for-ember/app/templates/showcase/show_components/pills.md

@@ -0,0 +1,104 @@
+# Pills
+
+[Pills](http://getbootstrap.com/components/#nav-pills) are a button-like navigation style,
+
+Bootstrap doesn't dictate nor assist with how you respond when an item is selected in the Pills navigation,
+But using _bs-pills_ helps by making the navigation more interactive by providing selection bindings and styling the
+active element, see examples below.
+
+<div class="bs-example">
+    {{bs-pills contentBinding="content" selectedBinding="selected"}}
+    Selected: {{selected}}
+</div>
+
+``` html
+
+\{\{bs-pills contentBinding="content" selectedBinding="selected"\}\}
+
+Selected: \{\{selected\}\}
+```
+
+_content_ and _selected_ are properties in the current _controller_
+
+
+* The _content_ controller property is an array of strings where each string is rendered as a possible item selection.
+* When an item selection is changed, the _selected_ property in the current _controller_ will be set with the value of the selected item.
+
+Here's the controller sample code:
+
+``` javascript
+Showcase.ShowComponentsPillsController = Ember.Controller.extend({
+  content: ['Home', 'Profile', 'Messages'],
+  contentChanged: (function() {
+    return console.log("Selection has changed to: " + (this.get('selected')));
+  }).observes('selected')
+});
+```
+
+# Stacked
+
+> Pills are also vertically stackable. Just add `stacked=true``
+
+<div class="bs-example">
+    {{bs-pills contentBinding="content" selectedBinding="selected" stacked=true style="max-width: 300px;"}}
+</div>
+
+``` html
+    \{\{bs-pills contentBinding="content" selectedBinding="selected" stacked=true style="max-width: 300px;"\}\}
+```
+
+
+# Justified
+
+> Easily make tabs or pills equal widths of their parent with setting `justified=true`
+
+<div class="bs-example">
+    {{bs-pills contentBinding="content" selectedBinding="selected" justified=true}}
+</div>
+
+``` html
+    \{\{bs-pills contentBinding="content" selectedBinding="selected" justified=true\}\}
+```
+
+# Disabled links
+
+Bootstrap doesn't stop the propagation of the redirection of disabled links for you:
+
+>  This class will only change the _anchor_'s appearance, not its functionality. Use custom JavaScript to disable links here.
+<small>[By Bootstrap](http://getbootstrap.com/components/#nav-disabled-links)</small>
+
+
+But using _bs-pills_ ease your pain by giving you the opportunity to bind the disable state of each item by providing extra metadata per item, clicking a disabled item disables the links too.
+
+To define links (items) as disabed, you need to provide extra metadata per defined item in the _contentBinding_ property.
+
+<div class="bs-example">
+    {{bs-pills contentBinding="content1" selectedBinding="selected1"}}
+    {{bs-button clicked="disableHome" title="Disable Home"}}
+</div>
+
+``` html
+\{\{bs-pills contentBinding="content" selectedBinding="selected"\}\}
+\{\{bs-button clicked="disableHome" content="Disable Home"\}\}
+```
+
+Controller sample code:
+
+``` javascript
+
+Showcase.ShowComponentsPillsController = Ember.Controller.extend({
+  init: function() {
+    this._super();
+    this.set('content', Ember.A([
+      Ember.Object.create({title: 'Home',disabled: false}),
+      Ember.Object.create({title: 'Admin',disabled: true})
+    ]));
+    this.set('selected', this.get('content').objectAt(0));
+  },
+
+  disableHome: function() {
+    this.get('content').objectAt(0).set('disabled', true);
+  }
+});
+```
+

data/lib/bootstrap-for-ember-rails/bootstrap-for-ember/app/templates/showcase/show_components/popover.md

@@ -0,0 +1,213 @@
+#Popover & Tooltips
+
+## Setup
+
+For Popover support, it is required to adapt the _application route_ and add a named outlet to your main template and reference a controller that extends from `Bootstrap.TooltipBoxController`
+
+``` javascript
+//Create some controller in your app that references _Bootstrap.TooltipBoxController_
+App.TooltipBoxController = Bootstrap.TooltipBoxController
+
+//Application route
+App.ApplicationRoute = Ember.Route.extend({
+    renderTemplate: function() {
+        // Render default outlet
+        this.render();
+        // render extra outlets
+        var controller = this.controllerFor('tooltip-box');
+        this.render("bs-tooltip-box", {
+            outlet: "bs-tooltip-box",
+            controller: controller,
+            into: "application" // important when using at root level
+        });
+    }
+});
+
+```
+
+## Tooltips
+
+### Simple content
+
+<div class="bs-example">
+<p class="muted" style="margin-bottom: 0;">Here is <a href="#" {{bs-bind-tooltip content="A tooltip!"}}>a very</a> link with a tooltip,.
+    You can mix as many <a href="#" {{bs-bind-tooltip title="Another tooltip!"}}>tooltips</a> as you wish.
+</p>
+</div>
+
+``` html
+<p class="muted" style="margin-bottom: 0;">
+    Here is <a href="#" \{\{bs-bind-tooltip content="A tooltip!"\}\}>a very</a> link with a tooltip,.
+    You can mix as many <a href="#" \{\{bs-bind-tooltip title="Another tooltip!"\}\}>tooltips</a> as you wish.
+</p>
+```
+
+### Bindings & Sticky
+
+You can bind the value of the tooltip to an object and make the tooltip sticky by:
+
+<div class="bs-example">
+    <a href="#" {{bs-bind-tooltip testObject.sticky}}>Hover me for a sticky tooltip!</a>
+</div>
+
+In template:
+
+``` html
+<a href="#" \{\{bs-bind-tooltip testObject.sticky\}\}>Hover me for a sticky tooltip!</a>
+```
+
+In controller:
+
+``` javascript
+    stickyTooltip: Ember.Object.createWithMixins({
+        popover: (function() {
+          return Ember.Object.create({
+            user: this,
+            content: 'know this is a sticky tooltip! You can hover over it.',
+            trigger: 'hover',
+            sticky: true
+          });
+        }).property()
+      })
+```
+
+## Popovers
+
+### Examples
+
+Here are some examples for popovers:
+
+<div class="bs-example">
+    <ul class="list-group" style="width:250px">
+        <li class="list-group-item" {{bs-bind-popover hoverPop}}>
+                 Hover for a sticky popup
+        </li>
+        <li class="list-group-item" {{bs-bind-popover clickPop}}>
+                 Click for a popup
+        </li>
+        <li class="list-group-item" {{bs-bind-popover templPop}}>
+                 Click for a popup with template
+        </li>
+    </ul>
+</div>
+
+In template:
+``` html
+<ul class="list-group" style="width:250px">
+    <li class="list-group-item" \{\{bs-bind-popover hoverPop\}\}>
+             Hover for a sticky popup
+    </li>
+    <li class="list-group-item" \{\{bs-bind-popover clickPop\}\}>
+             Click for a popup
+    </li>
+    <li class="list-group-item" \{\{bs-bind-popover templPop\}\}>
+             Click for a popup with template
+    </li>
+</ul>
+```
+
+In controller:
+
+``` javascript
+  hoverPop: Ember.Object.create({
+    title: "I'm a title!",
+    content: "And i'm a content!",
+    trigger: "hover",
+    placement: "right",
+    sticky: true
+  }),
+
+  clickPop: Ember.Object.create({
+    title: "Clickable!",
+    content: "This is a clickable popover",
+    placement: "left"
+  }),
+
+  templPop: Ember.Object.create({
+      firstName: 'numbers',
+      title: 'Popover with Template',
+      template: 'numbers:<ul>' +
+              '\{\{#each val in content.numbers\}\}' +
+              '   <li>\{\{val\}\}</li>' + '\{\{/each\}\}' +
+              '</ul>',
+      content: {
+        numbers: [1, 2, 3]
+      }
+  })
+
+```
+
+
+## Object Options
+
+Following are the options that back a tooltip/popover entry:
+
+<div class="table-responsive">
+    <table class="table table-bordered table-striped">
+        <thead>
+            <tr>
+                <th style="width: 100px;">Property Name</th>
+                <th style="width: 100px;">Type</th>
+                <th style="width: 50px;">Default</th>
+                <th>Description</th>
+            </tr>
+        </thead>
+        <tbody>
+            <tr>
+                <td>html</td>
+                <td>boolean</td>
+                <td>false</td>
+                <td>Insert HTML into the popover.</td>
+            </tr>
+            <tr>
+                <td>placement</td>
+                <td>string | function</td>
+                <td>'right'</td>
+                <td>how to position the popover - top | bottom | left | right | auto.<br> When "auto" is specified, it will dynamically reorient the popover. For example, if placement is "auto left", the popover will display to the left when possible, otherwise it will display right.</td>
+            </tr>
+            <tr>
+                <td>trigger</td>
+                <td>string</td>
+                <td>'click' for popover| 'hover' for tooltip</td>
+                <td>how popover is triggered - click | hover | focus | manual</td>
+            </tr>
+            <tr>
+                <td>sticky</td>
+                <td>boolean</td>
+                <td>false</td>
+                <td>To be used when trigger is 'hover'.
+                    When the tooltip appears you have 100ms to hover over it and only after you leave the popover/tooltip it will disappear</td>
+            </tr>
+            <tr>
+                <td>show</td>
+                <td>boolean</td>
+                <td>false</td>
+                <td>To be used when trigger is 'manual'.
+                    Will show the tip when true, hide when false.
+                    The property will be observed for changes with "addObserver"
+                </td>
+            </tr>
+            <tr>
+                <td>title</td>
+                <td>string</td>
+                <td>''</td>
+                <td></td>
+            </tr>
+            <tr>
+                <td>content</td>
+                <td>string | function</td>
+                <td>''</td>
+                <td></td>
+            </tr>
+            <tr>
+                <td>template</td>
+                <td>string</td>
+                <td>null</td>
+                <td>Use this template to display. The context will be the popover/tooltip. The data is available in content.*</td>
+            </tr>
+        </tbody>
+    </table>
+</div>
+
+
+