docs(*) update examples and automate build

- Converts previous example pages to invidual html partials which are
  wrapped in standard header and footer as part of a docs build process

- Updates all examples to angular v1.5 making use of controllerAs
  syntax

- Standardises the look and feel across examples

- Creates dedicated github pages page (docs/index.html) which has links
  to all examples

- Adds an "edit in plunkr" button to launch the example in a plunkr
  session

- Automates the deployment to github pages using travis ci whenever the
  master branch is built.

- General tidy up of README and index docs

Closes angular-ui#112

Author: user378230

.travis.yml

@@ -2,7 +2,12 @@ language: node_js
 node_js:
   - "5.9"
 env:
-  - CXX=g++-4.8
+  global:
+    - CXX=g++-4.8
+    - GH_REF: github.com/angular-ui/ui-select.git
+    - GH_PAGES_BRANCH: gh-pages
+    - secure: "PkIhXXwrR5fHh7fH+2WizaY0MmK1l1Dr7PCqs112PkEimVPcntRJeA5pjTwGRwHm+RSkFVtfo38EY/GUwzhLSRTO7WZ+id+vIMGQLgiofqrOwi0nq93esG6qI8Jg5K0GUt8mzg5m9B2tgm2I91RAojEhIukKcbsDsq3hNAUy71Y="
+
 addons:
   apt:
     sources:
@@ -16,6 +21,19 @@ before_script:
   - npm install --quiet -g gulp  
 
 script: "gulp test"
+
+after_success:
+  - "gulp docs"  
+
+deploy:
+  skip_cleanup: true
+  provider: "script"
+  script: "bash ./deploy-docs.sh"
+  on:
+    all_branches: true
+#  on:
+#    tags: true
+
 sudo: false
 
 git:

README.md

@@ -1,53 +1,43 @@
-# AngularJS ui-select [![Build Status](https://travis-ci.org/angular-ui/ui-select.svg?branch=master)](https://travis-ci.org/angular-ui/ui-select)
+# AngularJS ui-select [![Build Status](https://travis-ci.org/angular-ui/ui-select.svg?branch=master)](https://travis-ci.org/angular-ui/ui-select) [![Gitter](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/angular-ui/ui-select?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
 
-[![Gitter](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/angular-ui/ui-select?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
+AngularJS-native version of [Select2](http://ivaynberg.github.io/select2/) and [Selectize](http://brianreavis.github.io/selectize.js/). [http://angular-ui.github.io/ui-select/](http://angular-ui.github.io/ui-select/)
 
-AngularJS-native version of [Select2](http://ivaynberg.github.io/select2/) and [Selectize](http://brianreavis.github.io/selectize.js/).
+[Getting Started](https://github.com/angular-ui/ui-select/wiki/Getting-Started) 
 
-[Getting Started](https://github.com/angular-ui/ui-select/wiki/Getting-Started)  `bower install angular-ui-select`
-
-- [Demo](http://plnkr.co/edit/a3KlK8dKH3wwiiksDSn2?p=preview)
-- [Demo Multiselect](http://plnkr.co/edit/juqoNOt1z1Gb349XabQ2?p=preview)
-- [Examples](https://github.com/angular-ui/ui-select/blob/master/examples)
+- [Examples](http://angular-ui.github.io/ui-select/#examples)
+- [Examples Source](./docs/examples)
 - [Documentation](https://github.com/angular-ui/ui-select/wiki)
 
-## Last Changes
+## Latest Changes
 
 - Check [CHANGELOG.md](/CHANGELOG.md)
 
 ## Features
 
-- Search, Select, and Multi-select
-- Themes: Bootstrap, Select2 and Selectize
+- Search, Select, Multi-select and Tagging
+- Multiple Themes: Bootstrap, Select2 and Selectize
 - Keyboard support
-- jQuery not required (except for old browsers)
+- No jQuery required (except for old browsers)
 - Small code base: 4.57KB min/gzipped vs 20KB for select2
 
 For the roadmap, check [issue #3](https://github.com/angular-ui/ui-select/issues/3) and the [Wiki page](https://github.com/angular-ui/ui-select/wiki/Roadmap).
 
-## Installation using [Composer](http://getcomposer.org/)
-
-Make sure composer is install globally before we proceed. After that we need to add below piece of code in `composer.json` file located inside your project root folder.
+## Installation Methods
 
+### npm
 ```
-{
-    "require": {
-        "components/ui-select": "dev-master"
-    }
-}
+$ npm install angular-ui-select
+```
+### bower
+```
+$ bower install angular-ui-select
 ```
-
-- Run `composer update` and composer will install the component.
-- Inside your HTML add below script and link tags.
-  - select.js: `<script src="components/ui-select/dist/select.min.js"></script>`
-  - select.css: `<link rel="stylesheet" href="components/ui-select/dist/select.min.css">`
-
 
 ## Development
 
 ### Prepare your environment
 * Install [Node.js](http://nodejs.org/) and NPM (should come with)
-* Install global dev dependencies: `npm install -g bower gulp`
+* Install global dev dependencies: `npm install -g gulp`
 * Install local dev dependencies: `npm install` in repository directory
 
 ### Development Commands
@@ -56,11 +46,12 @@ Make sure composer is install globally before we proceed. After that we need to
 * `gulp build` to jshint and build
 * `gulp test` for one-time test with karma (also build and jshint)
 * `gulp watch` to watch src files to jshint, build and test when changed
+* `gulp docs` build docs and examples
 
 ## Contributing
 
 - Check [CONTRIBUTING.md](/CONTRIBUTING.md)
 - Run the tests
-- Try the [examples](https://github.com/angular-ui/ui-select/blob/master/examples)
+- Try the [examples](./docs/examples)
 
 When issuing a pull request, please exclude changes from the "dist" folder to avoid merge conflicts.

deploy-docs.sh

@@ -0,0 +1,31 @@
+#!/bin/bash
+set -e 
+
+[[ $TRAVIS_SECURE_ENV_VARS == "true" ]] || { echo "No github key avaliable, aborting publishing"; exit 0; }
+
+ID_REF="$(git rev-parse --short HEAD)"
+
+git clone "https://${GH_KEY}@${GH_REF}" ./docs-out -b ${GH_PAGES_BRANCH} --single-branch --depth=1
+
+cd docs-out
+
+# clear out everything
+git rm -rf .
+git clean -fxd
+
+# get new content
+cp ../docs-built/* . -R
+
+git add .
+
+# inside this git repo we'll pretend to be a new user
+git config user.name "Travis CI"
+git config user.email "[email protected]"
+
+# The first and only commit to this new Git repo contains all the
+# files present with the commit message "Deploy to GitHub Pages".
+git commit -m "docs(*): new deploy (angular-ui/ui-select@${ID_REF})"
+
+
+git push origin --quiet 
+#> /dev/null 2>&1

docs/assets/app.js

@@ -0,0 +1 @@
+var module = angular.module('ui.select.pages', ['plunkr']);

examples/demo.js docs/assets/demo.js

@@ -40,37 +40,39 @@ app.filter('propsFilter', function() {
   };
 });
 
-app.controller('DemoCtrl', function($scope, $http, $timeout, $interval) {
-  $scope.disabled = undefined;
-  $scope.searchEnabled = undefined;
+app.controller('DemoCtrl', function ($scope, $http, $timeout, $interval) {
+  var vm = this;
 
-  $scope.setInputFocus = function (){
+  vm.disabled = undefined;
+  vm.searchEnabled = undefined;
+
+  vm.setInputFocus = function (){
     $scope.$broadcast('UiSelectDemo1');
   };
 
-  $scope.enable = function() {
-    $scope.disabled = false;
+  vm.enable = function() {
+    vm.disabled = false;
   };
 
-  $scope.disable = function() {
-    $scope.disabled = true;
+  vm.disable = function() {
+    vm.disabled = true;
   };
 
-  $scope.enableSearch = function() {
-    $scope.searchEnabled = true;
+  vm.enableSearch = function() {
+    vm.searchEnabled = true;
   };
 
-  $scope.disableSearch = function() {
-    $scope.searchEnabled = false;
+  vm.disableSearch = function() {
+    vm.searchEnabled = false;
   };
 
-  $scope.clear = function() {
-    $scope.person.selected = undefined;
-    $scope.address.selected = undefined;
-    $scope.country.selected = undefined;
+  vm.clear = function() {
+    vm.person.selected = undefined;
+    vm.address.selected = undefined;
+    vm.country.selected = undefined;
   };
 
-  $scope.someGroupFn = function (item){
+  vm.someGroupFn = function (item){
 
     if (item.name[0] >= 'A' && item.name[0] <= 'M')
         return 'From A - M';
@@ -80,19 +82,19 @@ app.controller('DemoCtrl', function($scope, $http, $timeout, $interval) {
 
   };
 
-  $scope.firstLetterGroupFn = function (item){
+  vm.firstLetterGroupFn = function (item){
       return item.name[0];
   };
 
-  $scope.reverseOrderFilterFn = function(groups) {
+  vm.reverseOrderFilterFn = function(groups) {
     return groups.reverse();
   };
 
-  $scope.personAsync = {selected : "[email protected]"};
-  $scope.peopleAsync = [];
+  vm.personAsync = {selected : "[email protected]"};
+  vm.peopleAsync = [];
 
   $timeout(function(){
-   $scope.peopleAsync = [
+   vm.peopleAsync = [
         { name: 'Adam',      email: '[email protected]',      age: 12, country: 'United States' },
         { name: 'Amalie',    email: '[email protected]',    age: 12, country: 'Argentina' },
         { name: 'Estefanía', email: '[email protected]', age: 21, country: 'Argentina' },
@@ -106,20 +108,20 @@ app.controller('DemoCtrl', function($scope, $http, $timeout, $interval) {
       ];
   },3000);
 
-  $scope.counter = 0;
-  $scope.onSelectCallback = function (item, model){
-    $scope.counter++;
-    $scope.eventResult = {item: item, model: model};
+  vm.counter = 0;
+  vm.onSelectCallback = function (item, model){
+    vm.counter++;
+    vm.eventResult = {item: item, model: model};
   };
 
-  $scope.removed = function (item, model) {
-    $scope.lastRemoved = {
+  vm.removed = function (item, model) {
+    vm.lastRemoved = {
         item: item,
         model: model
     };
   };
 
-  $scope.tagTransform = function (newTag) {
+  vm.tagTransform = function (newTag) {
     var item = {
         name: newTag,
         email: newTag.toLowerCase()+'@email.com',
@@ -130,7 +132,7 @@ app.controller('DemoCtrl', function($scope, $http, $timeout, $interval) {
     return item;
   };
 
-  $scope.peopleObj = {
+  vm.peopleObj = {
     '1' : { name: 'Adam',      email: '[email protected]',      age: 12, country: 'United States' },
     '2' : { name: 'Amalie',    email: '[email protected]',    age: 12, country: 'Argentina' },
     '3' : { name: 'Estefanía', email: '[email protected]', age: 21, country: 'Argentina' },
@@ -143,13 +145,13 @@ app.controller('DemoCtrl', function($scope, $http, $timeout, $interval) {
     '10' : { name: 'Nicolás',   email: '[email protected]',    age: 43, country: 'Colombia' }
   };
 
-  $scope.person = {};
+  vm.person = {};
 
-  $scope.person.selectedValue = $scope.peopleObj[3];
-  $scope.person.selectedSingle = 'Samantha';
-  $scope.person.selectedSingleKey = '5';
+  vm.person.selectedValue = vm.peopleObj[3];
+  vm.person.selectedSingle = 'Samantha';
+  vm.person.selectedSingleKey = '5';
 
-  $scope.people = [
+  vm.people = [
     { name: 'Adam',      email: '[email protected]',      age: 12, country: 'United States' },
     { name: 'Amalie',    email: '[email protected]',    age: 12, country: 'Argentina' },
     { name: 'Estefanía', email: '[email protected]', age: 21, country: 'Argentina' },
@@ -162,23 +164,23 @@ app.controller('DemoCtrl', function($scope, $http, $timeout, $interval) {
     { name: 'Nicolás',   email: '[email protected]',    age: 43, country: 'Colombia' }
   ];
 
-  $scope.availableColors = ['Red','Green','Blue','Yellow','Magenta','Maroon','Umbra','Turquoise'];
+  vm.availableColors = ['Red','Green','Blue','Yellow','Magenta','Maroon','Umbra','Turquoise'];
 
-  $scope.singleDemo = {};
-  $scope.singleDemo.color = '';
-  $scope.multipleDemo = {};
-  $scope.multipleDemo.colors = ['Blue','Red'];
-  $scope.multipleDemo.colors2 = ['Blue','Red'];
-  $scope.multipleDemo.selectedPeople = [$scope.people[5], $scope.people[4]];
-  $scope.multipleDemo.selectedPeople2 = $scope.multipleDemo.selectedPeople;
-  $scope.multipleDemo.selectedPeopleWithGroupBy = [$scope.people[8], $scope.people[6]];
-  $scope.multipleDemo.selectedPeopleSimple = ['[email protected]','[email protected]'];
+  vm.singleDemo = {};
+  vm.singleDemo.color = '';
+  vm.multipleDemo = {};
+  vm.multipleDemo.colors = ['Blue','Red'];
+  vm.multipleDemo.colors2 = ['Blue','Red'];
+  vm.multipleDemo.selectedPeople = [vm.people[5], vm.people[4]];
+  vm.multipleDemo.selectedPeople2 = vm.multipleDemo.selectedPeople;
+  vm.multipleDemo.selectedPeopleWithGroupBy = [vm.people[8], vm.people[6]];
+  vm.multipleDemo.selectedPeopleSimple = ['[email protected]','[email protected]'];
 
-  $scope.appendToBodyDemo = {
+  vm.appendToBodyDemo = {
     remainingToggleTime: 0,
     present: true,
     startToggleTimer: function() {
-      var scope = $scope.appendToBodyDemo;
+      var scope = vm.appendToBodyDemo;
       var promise = $interval(function() {
         if (scope.remainingTime < 1000) {
           $interval.cancel(promise);
@@ -192,26 +194,26 @@ app.controller('DemoCtrl', function($scope, $http, $timeout, $interval) {
     }
   };
 
-  $scope.address = {};
-  $scope.refreshAddresses = function(address) {
+  vm.address = {};
+  vm.refreshAddresses = function(address) {
     var params = {address: address, sensor: false};
     return $http.get(
       'http://maps.googleapis.com/maps/api/geocode/json',
       {params: params}
     ).then(function(response) {
-      $scope.addresses = response.data.results;
+      vm.addresses = response.data.results;
     });
   };
 
-  $scope.addPerson = function(item, model){
+  vm.addPerson = function(item, model){
     if(item.hasOwnProperty('isTag')) {
       delete item.isTag;
-      $scope.people.push(item);
+      vm.people.push(item);
     }
   }
 
-  $scope.country = {};
-  $scope.countries = [ // Taken from https://gist.github.com/unceus/6501985
+  vm.country = {};
+  vm.countries = [ // Taken from https://gist.github.com/unceus/6501985
     {name: 'Afghanistan', code: 'AF'},
     {name: 'Åland Islands', code: 'AX'},
     {name: 'Albania', code: 'AL'},