Clip-Two | Documentation - 20script

# CLIP TWO DOCUMENTATION

Getting started with Clip-Two is easy. Whether you are a master of Sass, building a new app, or making your existing site responsive, we've got you covered.

##### Getting Started

## What is Clip-Two?

Clip-Two is an advanced, responsive dashboard template built with AngularJS, the Superheroic JavaScript MVW Framework. This template is mobile friendly and ready for you to customize it any way you want to use it.

AngularJS lets you extend HTML vocabulary for your application. The resulting environment is extraordinarily expressive, readable, and quick to develop.

Need more information? https://angularjs.org

## Template Structure

This template has a fixed structure, including the following elements:

- TopBar (Header)
- Sidebar (with Main Navigation Menu)
- Sliding Right Sidebar
- Content
- Footer

The Sidebar becomes a hidden Sliding Sidebar with a screen resolution of at least 992 pixels

## Configurations

You need to have a basic knowledge of AngularJS and AngularUI Router to begin your project.

AngularUI Router is a routing framework for AngularJS, which allows you to organize the parts of your interface into a state machine. Unlike the `$route` service in the Angular ngRoute module, which is organized around URL routes, UI-Router is organized around states, which may optionally have routes, as well as other behavior, attached.

Check the official documentation .

Also, if you need to build a multi-language project, you need a basic knowledge of angular-translate.

angular-translate is an AngularJS module that makes your life much easier when it comes to i18n and l10n including lazy loading and pluralization.

Check the official documentation .

Now back to us.

#### Global App Scope

The first thing you need to do to customize this template is to define the information concerning your project.

Open `main.js` file (assets/js/main.js)

Change the Global App Scope according to your needs. More specifically you can set:

- name (name of your project)
- author (author's name or company name)
- description (brief description of your project)
- version (current version of your project)

Magically you will see significant changes in the template such as the title of the document, the logo, and copyright information in the footer.

Again in Global App Scope, ignoring the values of "year" and "isMobile" that are automatically setup, you can change the default layout as follows:

- isNavbarFixed: `true` if you want to initialize the template with fixed header.
- isSidebarFixed: `true` if you want to initialize the template with fixed sidebar.
- isSidebarClosed: `true` if you want to initialize the template with closed sidebar.
- isFooterFixed: `true` if you want to initialize the template with fixed footer.
- theme: indicate the theme chosen for your project
- logo (relative path of the project logo)

6 different color schemes are available on Clip-Two. If you would like to set your favorite scheme, change the value of `theme` as follow:

- theme-1
- theme-2
- theme-3
- theme-4
- theme-5
- theme-6

Here is the code to setup

    // GLOBAL APP SCOPE
    // set below basic information
    $rootScope.app = {
    	name: 'Clip-Two', // name of your project
    	author: 'ClipTheme', // author's name or company name
    	logo: 'assets/images/logo.png', // relative path of the project logo
    	description: 'Angular Bootstrap Admin Template', // brief description
    	version: '1.0', // current version
    	year: ((new Date()).getFullYear()), // automatic current year (for copyright information)
    	isMobile: (function() { // true if the browser is a mobile device
    		var check = false;
    		if(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
    			check = true;
    		};
    		return check;
    	})(),
    	layout: {
    		isNavbarFixed: true, //true if you want to initialize the template with fixed header
    		isSidebarFixed: true, // true if you want to initialize the template with fixed sidebar
    		isSidebarClosed: false, // true if you want to initialize the template with closed sidebar
    		isFooterFixed: false, // true if you want to initialize the template with fixed footer
    		theme: 'theme-1' // indicate the theme chosen for your project
    	},
    	viewAnimation: 'ng-fadeInUp'
    };

#### Configuring Main Navigation Menu

We now begin to customize the main navigation

(1) First, Open `nav.html` file (assets/views/partials/nav.html)

(2) Find `ul` with class `.main-navigation-menu` and change or add a menu item in the list as follows:

    <li ui-sref-active="active">
    	<a ui-sref="app.dashboard">
    		<div class="item-content">
    			<div class="item-media">
    				<i class="ti-home"></i>
    			</div>
    			<div class="item-inner">
    				<span class="title"> Dashboard </span>
    			</div>
    		</div>
    	</a>
    </li>

(3) You'll notice we also added some links with `ui-sref` directives. In addition to managing state transitions, this directive auto-generates the `href` attribute of the `<a />` element it's attached to, if the corresponding state has a URL.

You can also associate an icon to the link. Choose your favorite icon ( fontaweome or themify ) and place it inside the div with class `.item-media`

(4) Now Open `config.router.js` file (assets/js/config.router.js) for set up the states.

We'll wire it all up with $stateProvider. Set up your states in the module config, as in the following:

    $stateProvider.state('app', {
    	url: "/app",
    	templateUrl: "assets/views/app.html",
    	abstract: true
    }).state('app.dashboard', {
    	url: "/dashboard",
    	templateUrl: "assets/views/dashboard.html",
    	title: 'Dashboard'
    })

Go to Quick Start Plunker for Nested States & Views

#### Map of dependencies (Modules, Css, jQuery Plugins ecc.)

You can use `resolve` to provide your controller with content or data that is custom to the state. `resolve` is an optional map of dependencies which should be injected into the controller.

If any of these dependencies are promises, they will be resolved and converted to a value before the controller is instantiated and the $stateChangeSuccess event is fired.

Moreover, Clip-Two uses the module `oc.lazyLoad` for load modules on demand (lazy load) in AngularJS.

But small steps.

First of all Open `config.constant.js` file (assets/js/config.constant.js)

Here we can register a constant service, ie the list of files (css, javascript, etc.) that will serve us as we go forward in the project.

Inside the constant `JS_REQUIRES`, is the object `scripts` that contains the name of the file or files (eg jQuery plugins) that we want to use in the project.

For example, if we want to use the plugin "Modernizr" add the following line of code, specifying the name of the plugin, and an array of associated files:

    scripts: {
    	'modernizr': ['vendor/modernizr/modernizr.js']
    }

Similarly, if we want to use an angularJS module, we will indicate in the array `modules` the name of the module (usually assigned by the author of the library) and its associated files:

    modules: [{
    	name: 'toaster',
    	files: ['vendor/toaster/toaster.js', 'vendor/toaster/toaster.css']
    }]

Now we want to dynamically load them on-the-fly at runtime when we change states.

To do this, we use the function `loadSequence()` that generates a resolve object by passing script names previously configured in constant.JS_REQUIRES.

In file `config.router.js` we will match our `resolve`

    $stateProvider.state('app', {
    	url: "/app",
    	templateUrl: "assets/views/app.html",
    	abstract: true
    }).state('app.dashboard', {
    	url: "/dashboard",
    	templateUrl: "assets/views/dashboard.html",
    	resolve: loadSequence('modernizr', 'toaster'),
    	title: 'Dashboard'
    })

#### Breadcrumbs

Clip-Two uses Angular-breadcrumb , a module for AngularJS, which generates a breadcrumb for any page of your application. It is strongly based on the ui-router framework and its hierarchical tree of states.

Define a `ncyBreadcrumb.label` property to each states:

    $stateProvider.state('app', {
    	url: "/app",
    	templateUrl: "assets/views/app.html",
    	resolve: loadSequence('modernizr', 'toaster'),
    	abstract: true
    }).state('app.dashboard', {
    	url: "/dashboard",
    	templateUrl: "assets/views/dashboard.html",
    	resolve: loadSequence('chartjs', 'tc.chartjs'),
    	title: 'Dashboard',
    	ncyBreadcrumb: {
    		label: 'My Dashboard'
    	}
    })

#### Translate content

Clip-Two uses angular-translate , an AngularJS module that makes your life much easier when it comes to i18n and l10n including lazy loading and pluralization.

The `translate` directive was used in this project in the following files:

- `top-navbar.html` (assets/views/partials/top-navbar.html)
- `nav.html` (assets/views/partials/nav.html)
- `footer.html` (assets/views/partials/footer.html)
- `off-sidebar.html` (assets/views/partials/off-sidebar.html)
- in the main title (`.mainTitle`) of each page

You can find the main configuration in the file `main.js` (assets/js/main.js) in the `$translateProvider` method

In our case, we have translated part of the contents of Clip-Two in three languages (English, German and Italian) creating json files in the folder `i18n` (assets/i18n).

You can edit these files to your liking, respecting the structure of your project.

If you need to add a new language, do the following:

(1) First, Create your json file (eg. es_Es.json) and put it in the folder `i18n` (assets/i18n)

(2) Open `mainCtrl.js` file (assets/js/controllers/mainCtrl.js)

(3) Find the scope `language` and edit the object `available` in this way:

    available: {
    	'en': 'English',
    	'it_IT': 'Italiano',
    	'de_DE': 'Deutsch',
    	'es_ES': 'Español'
    },

##### Clip-Two CSS

## Getting Started With Clip-Two CSS

Clip-Two uses Bootstrap CSS that provides global CSS settings, fundamental HTML elements styled and enhanced with extensible classes, and an advanced grid system.

#### The Grid

See how aspects of the Bootstrap grid system work across multiple devices with a handy table.

| Extra small devices Phones (<768px) | Small devices Tablets (≥768px) | Medium devices Desktops (≥992px) | Large devices Desktops (≥1200px)
--- | --- | --- | --- | ---
Grid behavior | Horizontal at all times | Collapsed to start, horizontal above breakpoints
Container width | None (auto) | 750px | 970px | 1170px
Class prefix | `.col-xs-` | `.col-sm-` | `.col-md-` | `.col-lg-`
# of columns | 12
Column width | Auto | ~62px | ~81px | ~97px
Gutter width | 30px (15px on each side of a column)
Nestable | Yes
Offsets | Yes
Column ordering | Yes

##### Example: Stacked-to-horizontal

Using a single set of `.col-md-*` grid classes, you can create a basic grid system that starts out stacked on mobile devices and tablet devices (the extra small to small range) before becoming horizontal on desktop (medium) devices. Place grid columns in any `.row`.

.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-8
.col-md-4
.col-md-4
.col-md-4
.col-md-4
.col-md-6
.col-md-6

##### Example: Mobile and desktop

Don't want your columns to simply stack in smaller devices? Use the extra small and medium device grid classes by adding `.col-xs-*``.col-md-*` to your columns. See the example below for a better idea of how it all works.

.col-xs-12 .col-md-8
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6
.col-xs-6

##### Example: Mobile, tablet, desktop

Build on the previous example by creating even more dynamic and powerful layouts with tablet `.col-sm-*` classes.

.col-xs-12 .col-sm-6 .col-md-8
.col-xs-6 .col-md-4
.col-xs-6 .col-sm-4
.col-xs-6 .col-sm-4
.col-xs-6 .col-sm-4

##### Offsetting columns

Move columns to the right using `.col-md-offset-*` classes. These classes increase the left margin of a column by `*` columns. For example, `.col-md-offset-4` moves `.col-md-4` over four columns.

.col-md-4
.col-md-4 .col-md-offset-4
.col-md-3 .col-md-offset-3
.col-md-3 .col-md-offset-3
.col-md-6 .col-md-offset-3

##### Nesting columns

To nest your content with the default grid, add a new `.row` and set of `.col-sm-*` columns within an existing `.col-sm-*` column. Nested rows should include a set of columns that add up to 12 or fewer (it is not required that you use all 12 available columns).

Level 1: .col-sm-9
Level 2: .col-xs-8 .col-sm-6
Level 2: .col-xs-4 .col-sm-6

#### CSS Utilities

In addition to the default bootstrap css, Clip-Two includes classes that can help you speed up your development work

Margin
`.no-margin` | margin: 0
`.margin-bottom-0` | margin-bottom: 0
`.margin-bottom-5` | margin-bottom: 5px
`.margin-bottom-10` | margin-bottom: 10px
`.margin-bottom-15` | margin-bottom: 15px
`.margin-bottom-20` | margin-bottom: 20px
`.margin-bottom-25` | margin-bottom: 25px
`.margin-bottom-30` | margin-bottom: 30px
`.margin-top-0` | margin-top: 0
`.margin-top-5` | margin-top: 5px
`.margin-top-10` | margin-top: 10px
`.margin-top-15` | margin-top: 15px
`.margin-top-20` | margin-top: 20px
`.margin-top-25` | margin-top: 25px
`.margin-top-30` | margin-top: 30px
`.margin-right-0` | margin-right: 0
`.margin-right-5` | margin-right: 5px
`.margin-right-10` | margin-right: 10px
`.margin-right-15` | margin-right: 15px
`.margin-right-20` | margin-right: 20px
`.margin-right-25` | margin-right: 25px
`.margin-right-30` | margin-right: 30px
`.margin-left-0` | margin-left: 0
`.margin-left-5` | margin-left: 5px
`.margin-left-10` | margin-left: 10px
`.margin-left-15` | margin-left: 15px
`.margin-left-20` | margin-left: 20px
`.margin-left-25` | margin-left: 25px
`.margin-left-30` | margin-left: 30px

Padding
`.no-padding` | padding: 0
`.padding-bottom-0` | padding-bottom: 0
`.padding-bottom-5` | padding-bottom: 5px
`.padding-bottom-10` | padding-bottom: 10px
`.padding-bottom-15` | padding-bottom: 15px
`.padding-bottom-20` | padding-bottom: 20px
`.padding-bottom-25` | padding-bottom: 25px
`.padding-bottom-30` | padding-bottom: 30px
`.padding-top-0` | padding-top: 0
`.padding-top-5` | padding-top: 5px
`.padding-top-10` | padding-top: 10px
`.padding-top-15` | padding-top: 15px
`.padding-top-20` | padding-top: 20px
`.padding-top-25` | padding-top: 25px
`.padding-top-30` | padding-top: 30px
`.padding-right-0` | padding-right: 0
`.padding-right-5` | padding-right: 5px
`.padding-right-10` | padding-right: 10px
`.padding-right-15` | padding-right: 15px
`.padding-right-20` | padding-right: 20px
`.padding-right-25` | padding-right: 25px
`.padding-right-30` | padding-right: 30px
`.padding-left-0` | padding-left: 0
`.padding-left-5` | padding-left: 5px
`.padding-left-10` | padding-left: 10px
`.padding-left-15` | padding-left: 15px
`.padding-left-20` | padding-left: 20px
`.padding-left-25` | padding-left: 25px
`.padding-left-30` | padding-left: 30px

Border
`.no-border` | border: none
`.border-right` | border-right-style: solid; border-right-width: 1px; border-color: inherit;
`.border-left` | border-left-style: solid; border-left-width: 1px; border-color: inherit;
`.border-top` | border-top-style: solid; border-top-width: 1px; border-color: inherit;
`.border-bottom` | border-bottom-style: solid; border-bottom-width: 1px; border-color: inherit;
`.border-light` | border-color: rgba(255, 255, 255, 0.2) (border with light color)
`.border-dark` | border-color: rgba(0, 0, 0, 0.2); (border with dark color)

Radius
`.no-radius` | border-radius: 0
`.radius-3` | border-radius: 3px;
`.radius-5` | border-radius: 5px;
`.radius-10` | border-radius: 10px;

Text
`.text-bold` | font-weight: bold;
`.text-extra-small` | font-size: 11px
`.text-small` | font-size: 12px
`.text-extra-small` | font-size: 11px
`.text-large` | font-size: 16px
`.text-extra-large` | font-size: 18px
`.text-orange` | color: #f58a5c;
`.text-green` | color: #1fbba6;
`.text-blue` | color: #5f8295;
`.text-pink` | color: #dd5a82;
`.text-purple` | color: #dd5a82;
`.text-bricky` | color: #894550;
`.text-yellow` | color: #ffb848;
`.text-red` | color: #e66b6b;
`.text-white` | color: white;
`.text-dark` | color: rgba(44, 47, 59, 0.4);
`.text-light` | color: rgba(255, 255, 255, 0.6);
`.text-left` | text-align: left;
`.text-right` | text-align: right;
`.text-light` | color: rgba(255, 255, 255, 0.6);
`.text-left` | text-align: left;

Height
`.height-155` | height: 155px
`.height-180` | height: 180px
`.height-200` | height: 200px
`.height-230` | height: 230px
`.height-250` | height: 250px
`.height-270` | height: 270px
`.height-300` | height: 300px
`.height-350` | height: 350px
`.min-height-155` | min-height: 155px
`.min-height-180` | min-height: 180px
`.min-height-200` | min-height: 200px
`.min-height-230` | min-height: 230px
`.min-height-250` | min-height: 250px
`.min-height-270` | min-height: 270px
`.min-height-300` | min-height: 300px
`.min-height-350` | min-height: 350px

Generic Classes
`.inline` | display: inline;
`.block` | display: block;
`.inline-block` | display: inline-block;
`.no-display` | display: none;
`.vertical-align-top` | vertical-align: top
`.vertical-align-middle` | vertical-align: middle;
`.vertical-align-bottom` | vertical-align: bottom;
`.float-none` | float: none;
`.noTransform` | -o-transform: none -moz-transform: none -ms-transform: none -webkit-transform: none transform: none

#### Colors

You can use these colors to customize buttons, text, backgrounds and more.

Dark Primary
Primary
Light Primary
Dark Azure
Azure
Light Azure
Dark Blue
Blue
Light Blue
Dark Purple
Purple
Light Purple
Dark Red
Red
Light Red
Dark Bricky
Bricky
Light Bricky
Dark Orange
Orange
Light Orange
Dark Yellow
Yellow
Light Yellow
Dark Beige
Beige
Light Beige
Dark Green
Green
Light Green
Dark Grey
Grey
Light Grey
Info
Success
Warning
Danger

##### Components and Modules

## Core Components

Some component is needed to provide services and directives that implement UI interactions with angular.

#### AngularUI Router

AngularUI Router is a routing framework for AngularJS, which allows you to organize the parts of your interface into a state machine. Unlike the `$route` service in the Angular ngRoute module, which is organized around URL routes, UI-Router is organized around states, which may optionally have routes, as well as other behavior, attached.

Official Documentation

#### ngStorage

An AngularJS module that makes Web Storage working in the Angular Way. Contains two services: `$localStorage` and `$sessionStorage`.

Official Documentation

#### UI Bootstrap

Bootstrap components written in pure AngularJS by the AngularUI Team

This repository contains a set of native AngularJS directives based on Bootstrap's markup and CSS. As a result no dependency on jQuery or Bootstrap's JavaScript is required.

Official Documentation

#### angular-translate

angular-translate is an AngularJS module that makes your life much easier when it comes to i18n and l10n including lazy loading and pluralization.

Official Documentation

#### ocLazyLoad

Load modules on demand (lazy load) in AngularJS

Official Documentation

#### ocLazyLoad

Load modules on demand (lazy load) in AngularJS

Official Documentation

#### angular-perfect-scrollbar

This is a small directive to allow the use of perfect-scrollbar in angular.

Official Documentation

#### Angular Loading Bar

An automatic loading bar using angular interceptors. It works automatically, so simply include it as a dependency and it will automatically display the progress of your `$http` requests.

Official Documentation

#### angular-scroll

Scrollspy, animated scrollTo and scroll events for angular.js

Official Documentation

#### angular-moment

AngularJS directive and filters for Moment.JS.

Official Documentation

## Featured Components

#### AngularJS-Toaster

AngularJS Toaster is an AngularJS port of the toastr non-blocking notification jQuery library.

Official Documentation

#### ngSweetAlert

AngularJS wrapper for SweetAlert jQuery Plugin. Sweet Alert is a beautiful replacement for Javascript's "Alert".

Official Documentation

#### angular-ladda

An angular directive wrapper for Ladda jQuery Plugin.

Official Documentation

#### ng-table

Simple table with sorting and filtering on AngularJS.

Official Documentation

#### ui-select

AngularJS-native version of Select2 and Selectize.

Official Documentation

#### ui-calendar

A complete AngularJS directive for the Arshaw FullCalendar.

Official Documentation

#### v-accordion

AngularJS multi-level accordion.

Official Documentation

#### uiMask

A module from UI.Utils, Swiss-Army-Knife of AngularJS tools (with no external dependencies!).

Official Documentation

#### ngImgCrop

Simple Image Crop directive for AngularJS. Enables to crop a circle or a square out of an image.

Official Documentation

#### Angular File Upload

Angular File Upload is a module for the AngularJS framework. Supports drag-n-drop upload, upload progress, validation filters and a file upload queue. It supports native HTML5 uploads, but degrades to a legacy iframe upload method for older browsers. Works with any server side platform which supports standard HTML form uploads.

Official Documentation

#### ng-flow

Flow.js html5 file upload extension on angular.js framework

Official Documentation

#### angular-ui-switch

This is a simple iOS 7 style switch directive for AngularJS. You can use this module as you would use the default HTML checkbox input element. This is a super lightweight module and you can completely change the design using just CSS.

Official Documentation

#### angularjs-google-maps

The Simplest AngularJS Google Maps V3 Directive

Official Documentation

#### tc-angular-chartjs

Angular Directives for Chart.js jQuery plugin

Official Documentation

#### Angular Elastic

Elastic (autosize) textareas for AngularJS, without jQuery dependency.

Official Documentation

#### Angular Truncate

This project is a filter for Angularjs to truncate text strings to a set number of characters or words and add ellipses when needed.

Official Documentation

#### angular-aside

Off canvas side menu to use with ui-bootstrap. Extends ui-bootstrap's $modal provider.

Official Documentation

#### angular-bootstrap-slider

an angular directive for seiyria-bootstrap-slider.

Official Documentation

#### angular-bootstrap-nav-tree

This is a Tree directive for Angular JS apps that use Bootstrap CSS.

Official Documentation

#### angular-perfect-scrollbar

This is a small directive to allow the use of perfect-scrollbar in angular.

Use it wherever you want:

    <perfect-scrollbar class="scroller" wheel-propagation="true" wheel-speed="10" min-scrollbar-length="20">
    // your content
    </perfect-scrollbar>

Official Documentation

#### Angular-xeditable

Angular-xeditable is a bundle of AngularJS directives that allows you to create editable elements in your projects.

Official Documentation

#### Checklist-model

AngularJS directive for list of checkboxes

Official Documentation

## Plugins

#### Modernizr

Modernizr is a JavaScript library that detects HTML5 and CSS3 features in the user’s browser.

Official Documentation

#### Moment.js

Parse, validate, manipulate, and display dates in JavaScript.

Official Documentation

#### perfect-scrollbar

Tiny but perfect jQuery scrollbar plugin.

Official Documentation

#### Ladda

Buttons with built-in loading indicators.

Official Documentation

#### FullCalendar

FullCalendar is a jQuery plugin that provides a full-sized, drag & drop event calendar like the one below. It uses AJAX to fetch events on-the-fly and is easily configured to use your own feed format. It is visually customizable with a rich API.

Official Documentation

#### Sweet Alert

A beautiful replacement for Javascript's "Alert"

Official Documentation

#### Chart.js

Simple, clean and engaging charts for designers and developers

Official Documentation

#### jQuery Sparklines

This jQuery plugin generates sparklines (small inline charts) directly in the browser using data supplied either inline in the HTML, or via javascript. .

Official Documentation

##### AngularJS Directives

## Directives

AngularJS lets you extend HTML with new attributes called Directives.

#### ctToggle

A simple but useful and efficient directive to toggle a class to an element.

See demo here

#### csSelect

Create a custom CSS3 Select Elements.

You must use it as a class.

Combined with the class `.cs-skin-slide` it creates a slide `<select>`

Combined with the class `.cs-skin-elastic` it creates an elastic `<select>`

#### ctDismiss

A directive used for "close buttons" (eg: alert box). It hides its parent node that has the class with the name of its value.

#### ctPaneltool

Add several features to panels.

See demo here

#### offClick

It's like click, but when you don't click on your element.

The `off-click` attribute is the expression or function that will execute each time the user doesn't click on your element (or filter)
The optional `off-click-filter` attribute is a comma separated list of selectors that will not trigger `off-click` when they are clicked.
The optional `off-click-if` attribute is an expression that will determine if the `off-click` should trigger or not.

#### compareTo

Password-check directive.

You can use the directive inside of markup like so:

    <input type="password" name="confirmPassword"
    ng-model="registration.user.confirmPassword"
    required
    compare-to="registration.user.password" />

#### ctFullheight

Make div 100% height of browser window.

If you set the `ct-fullheight` directive with the value "window" you will force the element to be the same height of the page, otherwise, if you do not assign any valuethe element will adapt to the document.

The optional `ct-fullheight-if` attribute is an expression that will determine if the `ct-fullheight` should trigger or not.

The optional `ct-fullheight-exclusion` attribute is a comma separated list of selectors whose height must be excluded from the height of the page.

#### Chat

An AngularJS Chat Directive exclusively for Clip-Two

Put the following markup in your template:

    <clip-chat messages="chat" id-self="selfIdUser" id-other="otherIdUser"></clip-chat>

Insert wherever you want in your html a second directive for the entry messages bar:

    <chat-submit submit-function="sendMessage" ng-model="chatMessage" scroll-element="#chatBox"></chat-submit>

The `scroll-element` optional attribute is used to indicate the html element (eg. with `overflow:auto`) that encloses the messages and you want to slide down after insertion.

Enclose the two directives in a controller:

    <div class="col-md-6">
    	<div ng-controller="ChatCtrl">
    		<div id="scroller" style="height: 200px; overflow: auto">
    			<clip-chat messages="chat" id-self="selfIdUser" id-other="otherIdUser"></clip-chat>
    		</div>
    		<chat-submit submit-function="sendMessage" ng-model="chatMessage" scroll-element="#scroller"></chat-submit>
    	<div>
    </div>

and this is an example of a controller:

    'use strict';
    /**
     * controller for Messages
     */
    app.controller('ChatCtrl', function($scope) {

    	$scope.selfIdUser = 50223456;
    	$scope.otherIdUser = 50223457;
    	$scope.setOtherId = function(value) {

        	$scope.otherIdUser = value;
    	};
    	var exampleDate = new Date().setTime(new Date().getTime() - 240000 * 60);

    	$scope.chat = [{
    		"user": "Peter Clark",
    		"avatar": "assets/images/avatar-1.jpg",
    		"to": "Nicole Bell",
    		"date": exampleDate,
    		"content": "Hi, Nicole",
    		"idUser": 50223456,
    		"idOther": 50223457
    	}, {
    		"user": "Peter Clark",
    		"avatar": "assets/images/avatar-1.jpg",
    		"to": "Nicole Bell",
    		"date": new Date(exampleDate).setTime(new Date(exampleDate).getTime() + 1000 * 60),
    		"content": "How are you?",
    		"idUser": 50223456,
    		"idOther": 50223457
    	}];

    	$scope.sendMessage = function() {
    		var newMessage = {
    			"user": "Peter Clark",
    			"avatar": "assets/images/avatar-1.jpg",
    			"date": new Date(),
    			"content": $scope.chatMessage,
    			"idUser": $scope.selfIdUser,
    			"idOther": $scope.otherIdUser
    		};
    		 $scope.chat.push(newMessage);
    		 $scope.chatMessage = '';

    	};
    });

##### Changelog Entries

version 1.1.0 - Feb 26, 2015

NEW

#### Chat Directive

An AngularJS Chat Directive exclusively for Clip-Two
N.b. for best performance from version 1.0 you must replace style.css (assets/css/style.css) and _chat.scsss (master/sass/partials/_chat.scsss)

NEW

#### RTL version of Clip-Two

RTL is the writing system known as right-to-left (RTL) in which script runs from the right-hand side of a page and concludes on the left-hand side, such as in Arabic, Hebrew and Urdu.

NEW

#### X-Editable Elements

Angular-xeditable is a bundle of AngularJS directives that allows you to create editable elements. Such technique is also known as click-to-edit or edit-in-place.

UPGRADE

#### AngularJS and Related Extras

Version 1.3.13

UPGRADE

#### UI Bootstrap

Version 0.12.1

FIXED

#### Mouse wheel scroll problem in IE

From version 1.0 you must replace style.css (assets/css/style.css) and _top-navbar.scsss (master/sass/partials/layout-elements/_top-navbar.scsss)

FIXED

#### Improvements & Minor Bug Fixes