bootstrap-for-ember-rails 0.0.2

data/lib/bootstrap-for-ember-rails/bootstrap-for-ember/app/scripts/views/ItemPaneView.coffee

@@ -0,0 +1,29 @@
+Bootstrap.ItemPaneView = Ember.View.extend(
+    templateName: 'views/item-pane'
+
+    corrItem: (->
+        if @get('parentView').get('corrItemsView')?
+            for view in @get('parentView').get('corrItemsView')._childViews
+                return view if view.content is @get('content')
+    ).property('parentView.corrItemsView')
+
+    isVisible: (->
+        @get('corrItem')?.get('isActive')
+    ).property('corrItem.isActive')
+
+    controller: (->
+        controller = @get('parentView.controller')
+        if @get('content.controller')
+            itemController = @get('container').lookup("controller:#{@get('content.controller')}")
+            controller = itemController if itemController
+        return controller
+    ).property('content')
+)
+
+#TODO: Is there a simple way to do this without passing through a helper?
+Ember.Handlebars.helper("bsItemPanePartial", (templateName, options) ->
+    view = options.data.view
+    template = view.templateForName(templateName)
+    Ember.assert("Unable to find template with name '#{templateName}'", template)
+    template(@, { data: options.data })
+)

data/lib/bootstrap-for-ember-rails/bootstrap-for-ember/app/scripts/views/ItemView.coffee

@@ -0,0 +1,49 @@
+# helper to get the parent view and test its type
+getParentView = (view) ->
+    return unless view and (parentView = view.get 'parentView')
+    # Ember objects respects the JS inheritence so instanceof can be used here
+    ok = parentView instanceof Bootstrap.ItemsView
+    Ember.assert "The parent view must be an instance of Bootstrap.ItemsView or any inherited class", ok
+    if ok then parentView else undefined
+
+
+# test if the given object is an Ember object or has a get method and use it to return a property
+getProperty = (obj, prop, noGetReturns) ->
+    return noGetReturns unless Ember.typeOf(obj) is 'instance' or Ember.canInvoke(obj, 'get')
+    obj.get prop
+
+
+###
+Views that are rendered as an Item of the ItemsView should extends from this view.
+
+When a click event is received the current item will be stored in the parent view 'selected' property,
+An extra 'active' css class will be assigned to the Item (this) if this is a selected item.
+
+Views that extends this view can be enhanced with:
+ItemSelection: Makes the item selectable.
+###
+Bootstrap.ItemView = Ember.View.extend(
+    isItem: true
+    classNameBindings: ['disabled']
+
+    ###
+    A calculated property that defines the title of the item.
+    ###
+    title: (->
+        return unless (itemsView = getParentView @)
+        itemTitleKey = itemsView.get('itemTitleKey') || 'title'
+        content = @get 'content'
+        getProperty content, itemTitleKey, content
+    ).property('content').cacheable()
+
+    ###
+    Determine whether the item is disabled or not
+    ###
+    disabled: (->
+        return unless (itemsView = getParentView @)
+        content = @get 'content'
+        disabled = !!getProperty content, 'disabled', no
+        itemsView.set('selected', null) if disabled and @get 'isActive'
+        disabled
+    ).property('content', 'content.disabled').cacheable()
+)

data/lib/bootstrap-for-ember-rails/bootstrap-for-ember/app/scripts/views/ItemsPanesView.coffee

@@ -0,0 +1,12 @@
+Bootstrap.ItemsPanesView = Ember.CollectionView.extend(
+    viewsInserted: false
+
+    corrItemsView: (->
+        itemsView = Ember.View.views[@get('items-id')]
+        itemsView
+    ).property('viewsInserted')
+
+    didInsertElement: () ->
+        @._super()
+        @set('viewsInserted', true)
+)

data/lib/bootstrap-for-ember-rails/bootstrap-for-ember/app/scripts/views/ItemsView.coffee

@@ -0,0 +1,15 @@
+###
+A parent view of views that supports multiple items rendering such as Navigations (Tabs, Pills)
+
+Views that inherits from this view can be enhanced with:
+- ItemsSelection: Enhances with selection capability.
+###
+Bootstrap.ItemsView = Ember.CollectionView.extend(
+    didInsertElement: () ->
+        #activate default tab if defined in item's metadata
+        if @get('default')
+            defaultTab = @get('default')
+            for view in @._childViews
+                @set 'selected', view.get('content') if view.get('content')?.get('title') is defaultTab
+            Ember.assert("Could not activate default tab #{defaultTab} as it doesnt exist", defaultTab)
+)

data/lib/bootstrap-for-ember-rails/bootstrap-for-ember/app/styles/components/growl-notifications.css

@@ -0,0 +1,58 @@
+.growl-notifications {
+  position: fixed;
+  right: 10px;
+  top: 10px;
+  z-index: 9999; /*must be highest element on page*/
+}
+
+.growl-notification {
+  opacity: 0;
+  position: absolute;
+  right: 10px;
+  width: 300px;
+  height: 65px;
+  padding: 5px 10px 5px 45px;
+  border: 2px solid transparent;
+  border-radius: 10px;
+  background-color: rgba(50, 50, 50, 0.5);
+  color: rgb(255, 255, 255);
+  font-size: 12px;
+  font-family: 'Open Sans', sans-serif;
+  text-shadow: 1px 1px 3px rgb(0, 0, 0);
+  box-shadow: 0px 0px 15px -5px rgb(0, 0, 0);
+  transition: opacity 0.3s ease-out, top 0.3s ease-out, right 0.3s ease-out;
+}
+
+.growl-notification.is-opaque {
+  opacity: 1;
+}
+
+.growl-notification:hover {
+  border-color: rgb(255, 255, 255);
+}
+
+.growl-notification.closed {
+  display: none;
+}
+
+.growl-notification .icon {
+  position: absolute;
+  top: 9px;
+  left: 9px;
+  font-size: 26px;
+}
+
+.growl-notification .close-notification {
+  display: none;
+  position: absolute;
+  top: -6px;
+  right: 6px;
+  font-size: 22px;
+  cursor: pointer;
+  text-decoration: none;
+  color: rgb(255, 255, 255);
+}
+
+.growl-notification:hover .close-notification {
+  display: block;
+}

data/lib/bootstrap-for-ember-rails/bootstrap-for-ember/app/styles/main.scss

@@ -0,0 +1,7 @@
+body {
+  padding-top: 70px;
+}
+footer {
+  padding-left: 15px;
+  padding-right: 15px;
+}

data/lib/bootstrap-for-ember-rails/bootstrap-for-ember/app/templates/components/bs-alert.hbs

@@ -0,0 +1,4 @@
+{{#if dismiss}}
+    <a class="close" data-dismiss="alert" href="#">&times;</a>
+{{/if}}
+{{message}}{{yield}}

data/lib/bootstrap-for-ember-rails/bootstrap-for-ember/app/templates/components/bs-badge.hbs

@@ -0,0 +1 @@
+{{content}}

data/lib/bootstrap-for-ember-rails/bootstrap-for-ember/app/templates/components/bs-btn-toolbar.hbs

@@ -0,0 +1 @@
+{{yield}}

data/lib/bootstrap-for-ember-rails/bootstrap-for-ember/app/templates/components/bs-button.hbs

@@ -0,0 +1,4 @@
+{{#if icon}}
+    <i {{bind-attr class="icon"}}></i>
+{{/if}}
+{{title}}{{yield}}

data/lib/bootstrap-for-ember-rails/bootstrap-for-ember/app/templates/components/bs-label.hbs

@@ -0,0 +1 @@
+{{content}}

data/lib/bootstrap-for-ember-rails/bootstrap-for-ember/app/templates/components/bs-modal.hbs

@@ -0,0 +1,28 @@
+<div class="modal-dialog">
+    <div class="modal-content">
+        <div class="modal-header">
+            <button type="button" {{bind-attr class=":close allowClose::hide"}} data-dismiss="modal" aria-hidden="true">&times;</button>
+            <h4 class="modal-title">
+                {{#if titleIconClasses}}
+                    <i {{bind-attr class="titleIconClasses"}}></i>
+                {{/if}}
+                {{{title}}}
+            </h4>
+        </div>
+        <div class="modal-body">
+            {{#if body}}
+                {{view view.body}}
+            {{else}}
+                {{yield}}
+            {{/if}}
+        </div>
+        <div {{bind-attr class=":modal-footer fullSizeButtons:modal-footer-full"}}>
+            {{#each footerButtons}}
+                {{bs-button content=this targetObjectBinding="view.targetObject"}}
+            {{/each}}
+            {{#each footerViews}}
+                {{view this}}
+            {{/each}}
+        </div>
+    </div>
+</div>

data/lib/bootstrap-for-ember-rails/bootstrap-for-ember/app/templates/components/bs-page-header.hbs

@@ -0,0 +1,6 @@
+<h1>
+    {{title}}
+    {{#if sub}}
+        <small>{{sub}}</small>
+    {{/if}}
+</h1>

data/lib/bootstrap-for-ember-rails/bootstrap-for-ember/app/templates/components/bs-panel.hbs

@@ -0,0 +1,26 @@
+{{#if heading}}
+    <div class="panel-heading">
+        {{#if collapsible}}
+            <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" {{bind-attr href=collapsibleBodyLink}}>
+                {{heading}}
+            </a>
+        {{else}}
+            {{heading}}
+        {{/if}}
+        {{#if dismiss}}
+            <a class="close" data-dismiss="panel" {{action "close"}}>&times;</a>
+        {{/if}}
+    </div>
+{{/if}}
+
+{{#if collapsible}}
+    <div {{bind-attr id=collapsibleBodyId}} {{bind-attr class=":panel-collapse :collapse open:in"}}>
+        <div class="panel-body">{{yield}}</div>
+    </div>
+{{else}}
+    <div id="collapseOne" class="panel-body">{{yield}}</div>
+{{/if}}
+
+{{#if footer}}
+    <div class="panel-footer">{{footer}}</div>
+{{/if}}

data/lib/bootstrap-for-ember-rails/bootstrap-for-ember/app/templates/components/bs-progress.hbs

@@ -0,0 +1,5 @@
+{{#if default}}
+    {{bs-progressbar progress=progress type=type}}
+{{else}}
+    {{yield}}
+{{/if}}

data/lib/bootstrap-for-ember-rails/bootstrap-for-ember/app/templates/components/bs-progressbar.hbs

@@ -0,0 +1 @@
+<span class="sr-only">{{progress}}% Complete</span>

data/lib/bootstrap-for-ember-rails/bootstrap-for-ember/app/templates/components/bs-well.hbs

@@ -0,0 +1 @@
+{{yield}}

data/lib/bootstrap-for-ember-rails/bootstrap-for-ember/app/templates/showcase/ads.hbs

@@ -0,0 +1 @@
+<h1>Bootstrap for Ember</h1>

data/lib/bootstrap-for-ember-rails/bootstrap-for-ember/app/templates/showcase/application.hbs

@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    {{outlet bs-tooltip-box}}
+    <!-- Meta, title, CSS, favicons, etc. -->
+    {{partial "header"}}
+    <!-- Place anything custom after this. -->
+  </head>
+  <body>
+    <a class="sr-only" href="#content">Skip navigation</a>
+    <!-- Docs master nav -->
+    {{partial "nav-main"}}
+    {{bs-notifications style="z-index: 9999; position: fixed; width: 50%; left: 0; right: 0; margin-left: auto; margin-right: auto; margin-top: 50px;"}}
+    {{bs-growl-notifications}}
+    <!-- Docs page layout -->
+    <div class="bs-header" id="content">
+      <div class="container">
+        <p>{{ page.lead }}</p>
+        {{partial "ads"}}
+      </div>
+    </div>
+
+    <div class="container bs-docs-container">
+      <div class="row">
+        <div class="col-md-3">
+          <div class="bs-sidebar hidden-print" role="complementary">
+              <ul class="nav bs-sidenav">
+                {{partial "leftnav"}}
+            </ul>
+          </div>
+        </div>
+        <div class="col-md-9" role="main">
+          {{bs-breadcrumbs}}
+          {{ outlet }}
+        </div>
+      </div>
+
+    </div>
+
+    <!-- Footer
+    ================================================== -->
+    <footer class="bs-footer" role="contentinfo">
+      <div class="container">
+        {{partial social-buttons}}
+      </div>
+    </footer>
+
+    <!-- JS and analytics only. -->
+    {{partial footer}}
+  </body>
+</html>

data/lib/bootstrap-for-ember-rails/bootstrap-for-ember/app/templates/showcase/demo-template.hbs

@@ -0,0 +1,4 @@
+{{bs-page-header title="Hello" sub="Hello world."}}
+{{#bs-well}}
+{{message}}
+{{/bs-well}}

data/lib/bootstrap-for-ember-rails/bootstrap-for-ember/app/templates/showcase/index.hbs

@@ -0,0 +1,7 @@
+<div class="bs-docs-section">
+  <div class="page-header">
+    <h1 id="js-overview">Showcase</h1>
+
+    <h3 id="js-individual-compiled">Project Created!</h3>
+    <p>Please choose components from the left pane.</p>
+  </div>

data/lib/bootstrap-for-ember-rails/bootstrap-for-ember/app/templates/showcase/leftnav.hbs

@@ -0,0 +1,13 @@
+{{#each item in controller}}
+    <li>
+        {{#link-to item.route}}
+            {{item.title}}
+            {{#if item.special}}
+                {{bs-label content="Special" type="danger"}}
+            {{/if}}
+            {{#if item.new}}
+              {{bs-label content="New" type="info"}}
+            {{/if}}
+        {{/link-to}}
+    </li>
+{{/each}}

data/lib/bootstrap-for-ember-rails/bootstrap-for-ember/app/templates/showcase/nav-main.hbs

@@ -0,0 +1,24 @@
+<header class="navbar navbar-inverse navbar-fixed-top bs-docs-nav" role="banner">
+  <div class="container">
+    <div class="navbar-header">
+      <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".bs-navbar-collapse">
+        <span class="sr-only">Toggle navigation</span>
+        <span class="icon-bar"></span>
+        <span class="icon-bar"></span>
+        <span class="icon-bar"></span>
+      </button>
+      {{#link-to "index" class="navbar-brand"}}Bootstrap for Ember{{/link-to}}
+    </div>
+    <nav class="collapse navbar-collapse bs-navbar-collapse" role="navigation">
+      <ul class="nav navbar-nav">
+        <li>
+            {{#link-to "index"}}Home{{/link-to}}
+        </li>
+
+        <li>
+            {{#link-to "show_components"}}Components{{/link-to}}
+        </li>
+      </ul>
+    </nav>
+  </div>
+</header>

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

@@ -0,0 +1,115 @@
+# Alert
+
+## Usage Examples
+
+<div class="bs-example">
+    {{bs-alert message="A warning alert with simple message." type="warning"}}
+</div>
+
+```html
+\{\{bs-alert message="A warning alert with simple message." type="warning"\}\}
+```
+
+<div class="bs-example">
+    {{bs-alert message="With close button" type="warning" dismiss=true}}
+</div>
+
+```html
+\{\{bs-alert message="With close button" type="warning" dismiss=true\}\}
+```
+
+<div class="bs-example">
+    {{bs-alert message="Close button will fade" type="warning" dismiss=true fade=true}}
+</div>
+
+```html
+    \{\{bs-alert message="Close button will fade" type="warning" dismiss=true fade=true\}\}
+```
+
+<div class="bs-example">
+    {{bs-alert message="Dismissed after 5 seconds!!" type="info" fade=true dismissAfter=5}}
+</div>
+
+```html
+    \{\{bs-alert message="Dismissed after 5 seconds" type="info" dismissAfter=5\}\}
+```
+
+<div class="bs-example">
+    {{bs-alert message="Other types such as Sucess" type="success"}}
+</div>
+
+```html
+    \{\{bs-alert message="Other types such as Sucess" type="success"\}\}
+```
+
+<div class="bs-example">
+    {{#bs-alert type="danger"}}
+    <h4 class="alert-heading">Oh snap! You got an error!</h4>
+    <p>Alert can also be used in a <strong>block form</strong>.</p>
+    <p>
+        <button class="btn btn-danger" {{action "submit"}}>Take this action</button> <a class="btn btn-default">Or do this</a>
+    </p>
+    {{/bs-alert}}
+</div>
+
+```html
+\{\{#bs-alert type="danger"\}\}
+<h4 class="alert-heading">Oh snap! You got an error!</h4>
+<p>Alert can also be used in a <strong>block form</strong>.</p>
+<p>
+<button class="btn btn-danger" \{\{action "submit"\}\}>Take this action</button> <a class="btn btn-default">Or do this</a>
+</p>
+\{\{/bs-alert\}\}
+```
+
+<div class="bs-example">
+    {{bs-alert message="Close will trigger a function in controller" type="warning" dismiss=true closed="didAlertClosed" close="didAlertClose"}}
+</div>
+
+``` html
+    \{\{bs-alert message="Close will trigger a function in controller" type="warning" dismiss=true closed="didAlertClosed" close="didAlertClose"\}\}
+```
+
+## Component Properties
+
+<div class="table-responsive">
+    <table class="table table-bordered table-striped">
+        <thead>
+            <tr>
+                <th style="width: 150px;">Property</th>
+                <th>Description</th>
+            </tr>
+        </thead>
+        <tbody>
+            <tr>
+                <td>message</td>
+                <td>The string to display in the alert.</td>
+            </tr>
+            <tr>
+                <td>type</td>
+                <td>Alert types: success | info | warning | danger</td>
+            </tr>
+            <tr>
+                <td>dismiss</td>
+                <td>if true an <code>X</code> link is set to dismiss the alert.</td>
+            </tr>
+            <tr>
+                <td>dismissAfter</td>
+                <td>If set the alert will be automatically dismissed after the specified amount of <code>seconds</code></td>
+            </tr>
+            <tr>
+                <td>fade</td>
+                <td>If true, the dialog will be faded out when closed.</td>
+            </tr>
+            <tr>
+                <td>close</td>
+                <td>Triggers the specified function name on the <strong>controller</strong> immediately when the close instance method is called.</td>
+            </tr>
+            <tr>
+                <td>closed</td>
+                <td>Triggers the specified function name on the <strong>controller</strong> when the alert has been closed (will wait for CSS transitions to complete).</td>
+            </tr>
+        </tbody>
+    </table>
+</div>
+