bootstrap-for-ember-rails 0.0.2

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

@@ -0,0 +1,70 @@
+# Growl like Notifications
+
+
+_Growl Notifications_ is not a Bootstrap component but is mandatory for almost every web application.
+
+_Growl Notifications_ are just like the _Notification_ component but messages that are rendered as small boxes on the right top of the screen, they fade in for a short period of time with a title, sub text and icon and then fade out.
+
+To use growl notifications, put somewhere in your _application_ template the _bs-growl-notifications_ component.
+
+``` html
+\{\{bs-growl-notifications\}\}
+```
+
+Then use the _GrowlNotificationManager_ / _GNM_ to push new notifications with a message and type.
+
+<div class="bs-example">
+    {{bs-button clicked="pushInfo" title="Push Info"}}
+    {{bs-button clicked="pushWarn" title="Push Warning"}}
+    {{bs-button clicked="pushSuccess" title="Push Success"}}
+    {{bs-button clicked="pushDanger" title="Push Danger"}}
+</div>
+
+Controller code:
+
+
+``` javascript
+Showcase.ShowComponentsGrowlNotifController = Ember.Controller.extend({
+  pushInfo: function() {
+    Bootstrap.GNM.push('INFO!', 'Hello, this is just an info message.', 'info');
+  },
+  pushSuccess: function() {
+    Bootstrap.GNM.push('SUCCESS!', 'Successfully performed operation!', 'success');
+  },
+  pushWarn: function() {
+    Bootstrap.GNM.push('WARN!', 'Could not perform operation!', 'warning');
+  },
+  pushDanger: function() {
+    Bootstrap.GNM.push('Danger!', 'System is halting!', 'danger');
+  }
+});
+```
+
+You can control the visibility duration of each message by specifying the _showTime_ property.
+
+
+## Component Files
+
+* _css/bs-growl-notifications.min.css_
+* _js/bs-growl-notifications.min.js_
+
+## Component Properties
+
+<div class="table-responsive">
+    <table class="table table-bordered table-striped">
+        <thead>
+            <tr>
+                <th style="width: 150px;">Property</th>
+                <th>Description</th>
+                <th>Default</th>
+            </tr>
+        </thead>
+        <tbody>
+            <tr>
+                <td>showTime</td>
+                <td>A number in _ms_ that defines how long the notification is displayed before it starts to fade out.</td>
+                <td>10 seconds</td>
+            </tr>
+        </tbody>
+    </table>
+</div>

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

@@ -0,0 +1,87 @@
+#Item action bar
+
+When listing items that support selection, it usually make sense to perform some actions on the selected item(s).
+
+The Items action bar component make it possible to build an bar of buttons where each button visibility may behave differently according to the selection,
+
+For example an 'Edit' button may be disabled unless 1 item is selected, or a 'Delete' button may be enabled only
+when there is 1 or more items selected.
+
+In the template, only 1 expression is needed, the `content` property is expected to be an array of array, where each array represents a section in the action bar and contains objects that represent a button defintion in the bar, the `selectedItems` property is expected to be an array of the currently selected items on a list.
+
+<div class="bs-example">
+    {{bs-items-action-bar contentBinding="actionsInBar" selectedItemsBinding="selection"}}
+    <br/>
+    {{bs-pills contentBinding="items" selectedBinding="selection"}}
+</div>
+
+For the sake of simplicity in this example we use the `bs-pills` component to list items with signle itemselection support,
+but this can be replaced with a table or any other visual form that supports selection.
+
+``` html
+\{\{bs-items-action-bar contentBinding="actionsInBar" selectedItemsBinding="selection"\}\}
+\{\{bs-pills contentBinding="items" selectedBinding="selection"\}\}
+```
+
+Per action defined in the controller (see below), it is possible to define whether the action should be disabled or not
+and what should happen when an enabled action is clicked,
+
+* Implement the `disabled` function per action and return `true` if the action should be disabled, the method recieve the current selection so logic may take the selection into consideration whether the action should be disabled or not.
+* Define `transitionTo` property with a route name if you want the action to transition to another route when pressed.
+* Define the `clickActionName` property with an action name to be invoked on the controller when action is clicked.
+
+
+Controller's code:
+
+``` javascript
+Showcase.ShowComponentsItemsActionBarController = Ember.Controller.extend({
+  actionsInBar: [
+    [
+      {
+        title: 'To Alerts',
+        disabled: function(selection) {
+          var _ref;
+          if (selection.size < 1 || (selection != null ? (_ref = selection[0]) != null ? _ref.title : void 0 : void 0) !== 'Alerts') {
+            return true;
+          }
+        },
+        transitionTo: 'show_components.alert'
+      }, {
+        title: 'To Panels',
+        transitionTo: 'show_components.panel',
+        disabled: function(selection) {
+          var _ref;
+          if (selection.size < 1 || (selection != null ? (_ref = selection[0]) != null ? _ref.title : void 0 : void 0) !== 'Panels') {
+            return true;
+          }
+        }
+      }
+    ], [
+      {
+        title: 'To Wizard',
+        disabled: function(selection) {
+          var _ref;
+          if (selection.size < 1 || (selection != null ? (_ref = selection[0]) != null ? _ref.title : void 0 : void 0) !== 'Wizards') {
+            return true;
+          }
+        },
+        clickActionName: 'wizard'
+      }
+    ]
+  ],
+  actions: {
+    wizard: function(selection) {
+      return alert("Wizard pressed!");
+    }
+  },
+  items: [
+    Ember.Object.create({
+      title: 'Alerts'
+    }), Ember.Object.create({
+      title: 'Panels'
+    }), Ember.Object.create({
+      title: 'Wizards'
+    })
+  ]
+});
+```

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

@@ -0,0 +1,44 @@
+# Label
+
+## Basic
+
+<div class="bs-example">
+    <h4>Heading with label {{bs-label content="Label"}}</h3>
+</div>
+
+``` html
+    <h3>Heading with label \{\{bs-label content="Label"\}\}</h3>
+```
+
+## With Type
+
+<div class="bs-example">
+    <h3>Heading with <strong>danger</strong> {{bs-label content="Careful!" type="danger"}}</h3>
+</div>
+
+``` html
+    <h3>Heading with <strong>danger</strong> \{\{bs-label content="Careful!" type="danger"\}\}</h3>
+```
+
+## 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>content</td>
+                <td>string: the label content.</td>
+            </tr>
+            <tr>
+                <td>type</td>
+                <td>Label types: success | info | warning | danger</td>
+            </tr>
+        </tbody>
+    </table>
+</div>

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

@@ -0,0 +1,70 @@
+# List Group
+>List groups are a flexible and powerful component for displaying not only simple lists of elements, but complex ones with custom content.
+<small>By Bootstrap</small>
+
+All list items are linkable and selection can easily be observed
+
+
+## Simple
+The most basic list group is simply an unordered list with list items.
+
+<div class="bs-example">
+{{bs-list-group contentBinding="listSimple" selectedBinding="selected"}}
+
+Selected: {{selected}}
+</div>
+
+``` html
+\{\{bs-list-group contentBinding="listSimple"\}\}
+```
+Controller's code:
+
+``` javascript
+Showcase.ShowComponentsListGroupController = Ember.Controller.extend({
+    listSimple: Ember.A(['Cras justo odio', 'Dapibus ac facilisis in', 'Morbi leo risus'])
+})
+```
+
+## Badges
+
+Each item in the list can have badge component that will automatically be positioned on the right.
+
+<div class="bs-example">
+    {{bs-list-group contentBinding="listWithBadges"}}
+</div>
+
+``` html
+\{\{bs-list-group contentBinding="listWithBadges"\}\}
+```
+
+Controller's code:
+``` javascript
+Showcase.ShowComponentsListGroupController = Ember.Controller.extend({
+  listWithBadges: Ember.A([
+    Ember.Object.create({title: 'Inbox', badge: '45'}),
+    Ember.Object.create({ title: 'Sent', badge: '33'})
+  ])
+});
+```
+
+## List with Sub Text
+
+Items can have a sub text enabled if an item metadata has the 'sub' property.
+
+<div class="bs-example">
+    {{bs-list-group contentBinding="listWithSub"}}
+</div>
+
+``` html
+\{\{bs-list-group contentBinding="listWithSub"\}\}
+```
+
+Controller's code:
+``` javascript
+Showcase.ShowComponentsListGroupController = Ember.Controller.extend({
+  listWithSub: Ember.A([
+    Ember.Object.create({title: 'Inbox', badge: '45'}),
+    Ember.Object.create({ title: 'Sent', badge: '33'})
+  ])
+});
+```

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

@@ -0,0 +1,167 @@
+# Modal
+
+> Modals are streamlined, but flexible, dialog prompts with the minimum required functionality and smart defaults.
+<small>by Bootstrap</small>
+
+## Blocked Modal
+
+A rendered modal with header, body, and set of actions in the footer.
+
+<div class="bs-example">
+    {{bs-button title="Show Modal" clicked="show"}}
+    {{#bs-modal name="myModal" fade=true footerButtonsBinding="myModalButtons" title="My Modal"}}
+        <p>Modal content!</p>
+    {{/bs-modal}}
+</div>
+
+``` html
+    \{\{bs-button title="Show Modal" clicked="show"\}\}
+    \{\{#bs-modal name="myModal" fade=true footerButtonsBinding="myModalButtons" title="My Modal"\}\}
+        <p>Modal content!</p>
+    \{\{/bs-modal\}\}
+```
+
+_Controller's code_:
+
+``` javascript
+Showcase.ShowComponentsModalController = Ember.Controller.extend({
+  myModalButtons: [
+      Ember.Object.create({title: 'Submit', clicked:"submit"})
+      Ember.Object.create({title: 'Cancel', clicked:"cancel", dismiss: 'modal'})
+  ],
+
+  actions: {
+    //Submit the modal
+    submit: function() {
+      Bootstrap.NM.push('Successfully submitted modal', 'success');
+      return Bootstrap.ModalManager.hide('myModal');
+    },
+
+    //Cancel the modal, we don't need to hide the model manually because we set {..., dismiss: 'modal'} on the button meta data
+    cancel: function() {
+      return Bootstrap.NM.push('Modal was cancelled', 'info');
+    },
+
+    //Show the modal
+    show: function() {
+      return Bootstrap.ModalManager.show('myModal');
+    }
+  }
+});
+```
+NOTE: The buttons defined in the array object can contain the same attributes as the button component. For example: for a 'danger' button, add "type='danger'" to the object defining the button.
+
+
+## Confirmation Modal
+For a simple confirmation modal, you can simply invoke `Bootstrap.ModalManager.confirm(this);`
+
+<div class="bs-example">
+    {{bs-button title="Delete" clicked="confirm"}}
+</div>
+
+``` html
+\{\{bs-button title="Delete" clicked="confirm"\}\}
+```
+
+_Controller's code_:
+
+``` javascript
+Showcase.ShowComponentsModalController = Ember.Controller.extend({
+    confirm: {
+        confirm: {
+            Bootstrap.ModalManager.confirm(@);
+        },
+        //invoked when user press "confirm"
+        modalConfirmed: {
+            Bootstrap.NM.push('Confirmed!', 'success')
+        },
+        //invoked when user press "cancel"
+        modalCanceled: {
+            Bootstrap.NM.push('Cancelled!', 'info')
+        }
+    }
+})
+```
+
+
+The `Bootstrap.ModalManager.confirm` method accept the following parameters:
+
+<div class="table-responsive">
+    <table class="table table-bordered table-striped">
+        <thead>
+            <tr>
+                <th style="width: 150px;">Property</th>
+                <th>Description</th>
+                <th>Optional?</th>
+            </tr>
+        </thead>
+        <tbody>
+            <tr>
+                <td>controller</td>
+                <td>A reference to the controller that the confirm/cancel actions will be triggered on</td>
+                <td>no</td>
+            </tr>
+            <tr>
+                <td>title</td>
+                <td>The title of the modal that.</td>
+                <td>yes</td>
+            </tr>
+            <tr>
+                <td>message</td>
+                <td>The body text of the modal.</td>
+                <td>yes</td>
+            </tr>
+            <tr>
+                <td>confirmButtonTitle</td>
+                <td>The title of the confirm button</td>
+                <td>yes</td>
+            </tr>
+            <tr>
+                <td>cancelButtonTitle</td>
+                <td>The title of the cancel button</td>
+                <td>yes</td>
+            </tr>
+        </tbody>
+    </table>
+</div>
+
+
+## Programatically Modal Creation
+
+It is also possible to programatically create a modal, this approach is useful if the modal contains a lot of elements and it makes sense to push the modal elements into the DOM programatically and totally destroy the modal when it is closed.
+
+
+<div class="bs-example">
+    {{bs-button title="Create Modal" clicked="createModalProgramatically"}}
+</div>
+
+``` html
+//we only render a button which will programatically create the modal
+\{\{bs-button title="Create Modal" clicked="createModalProgramatically"\}\}
+```
+
+_Controller's code_:
+
+``` javascript
+Showcase.ShowComponentsModalController = Ember.Controller.extend({
+  manualButtons: [
+      Ember.Object.create({title: 'Submit', clicked:"submitManual"})
+      Ember.Object.create({title: 'Cancel', dismiss: 'modal'})
+  ],
+
+  actions: {
+    submitManual: function() {
+      Bootstrap.NM.push('Modal destroyed!', 'success');
+      return Bootstrap.ModalManager.close('manualModal');
+    },
+    createModalProgramatically: function() {
+      //@property {string} The name of the modal, required later to close the modal (see submitManual function above)
+      //@property {string} The title of the modal.
+      //@property {string} The template name to render within the modal body, a View class may also be specified.
+      //@property {array} Array of Button meta data
+      //@property {object} The controller instance that instantiate the modal.
+      Bootstrap.ModalManager.open('manualModal', 'Hello', 'demo-template', this.manualButtons, this);
+    }
+  }
+});
+```

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

@@ -0,0 +1,76 @@
+# Notifications
+
+_Notifications_ is not a Bootstrap component but is mandatory for almost every web application.
+
+_Notifications_ are messages that are rendered as _Alerts_, they fade in for a short period of time with some message and type and then they fade out.
+
+Notifications are pushed into an array, so different parts of the application may push notifications to the user
+and each will be displayed one after another.
+
+To use notifications, put somewhere in your _application_ template the _bs-notifications_ component.
+
+``` html
+\{\{bs-notifications style="z-index: 1000; position: fixed; width: 50%; left: 0; right: 0; margin-left: auto; margin-right: auto; margin-top: 50px;"\}\}
+```
+
+How you style the component is up to you, this is just an example for centralizing the notifications on the screen.
+
+Then use the _NotificationManager_ / _NM_ to push new notifications with a message and type.
+
+<div class="bs-example" >
+    {{bs-button type="info" clicked="pushInfo" title="Push Info"}}
+    {{bs-button type="warning" clicked="pushWarn" title="Push Warning"}}
+    {{bs-button type="success" clicked="pushSuccess" title="Push Success"}}
+    {{bs-button type="danger" clicked="pushDanger" title="Push Danger"}}
+</div>
+
+Controller code:
+
+``` javascript
+Showcase.ShowComponentsNotificationsController = Ember.Controller.extend({
+  pushInfo: function() {
+    return Bootstrap.NM.push('Hello, this is just an info message.', 'info');
+  },
+  pushWarn: function() {
+    return Bootstrap.NM.push('Could not perform operation!', 'warning');
+  },
+  pushSuccess: function() {
+    return Bootstrap.NM.push('Successfully performed operation!', 'success');
+  },
+  pushDanger: function() {
+    return Bootstrap.NM.push('Danger! system is halting!', 'danger');
+  }
+});
+```
+
+During fade out, If user hover with the mouse in the notification area, it will cancel the fade in animation so the user can have more time to read the message, moving the mouse out will retrigger the fade out.
+
+You can control the duration messages are displayed, the fade out and fade in time by providing properties for each, for more info see the properties options below.
+
+
+## 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>showTime</td>
+                <td>A number in _ms_ that defines how long the notification is displayed before it starts to fade out.</td>
+            </tr>
+            <tr>
+                <td>fadeInTime</td>
+                <td>A number in _ms_ that defines how long it takes a notification to fades in.</td>
+            </tr>
+            <tr>
+                <td>fadeOutTime</td>
+                <td>A number in _ms_ that defines how long it takes a notification to fade out.</td>
+            </tr>
+        </tbody>
+    </table>
+</div>