Skip to content
This repository was archived by the owner on Oct 2, 2019. It is now read-only.

docs(*) update examples and automate build #1550

Merged
merged 1 commit into from
Apr 4, 2016
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 19 additions & 1 deletion .travis.yml
Original file line number Diff line number Diff line change
Expand Up @@ -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:
Expand All @@ -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:
Expand Down
47 changes: 19 additions & 28 deletions README.md
Original file line number Diff line number Diff line change
@@ -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
Expand All @@ -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.
31 changes: 31 additions & 0 deletions deploy-docs.sh
Original file line number Diff line number Diff line change
@@ -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
1 change: 1 addition & 0 deletions docs/assets/app.js
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
var module = angular.module('ui.select.pages', ['plunkr']);
110 changes: 56 additions & 54 deletions examples/demo.js → docs/assets/demo.js
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -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' },
Expand All @@ -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',
Expand All @@ -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' },
Expand All @@ -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' },
Expand All @@ -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);
Expand All @@ -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'},
Expand Down
Loading