Skip to content
This repository was archived by the owner on Sep 8, 2020. It is now read-only.

Declarative formatting #161

Open
wants to merge 6 commits into
base: master
Choose a base branch
from
Open

Declarative formatting #161

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
4082e98
Stabilize specs, lock jquery and select2 versions
duncanbeevers Feb 22, 2014
cb9e472
Run tests with `npm test` and `grunt test`
duncanbeevers Feb 22, 2014
96353a9
Use `isSelect` computed local
duncanbeevers Feb 22, 2014
0d67c9f
Transclude content into select2
duncanbeevers Feb 22, 2014
5613ca5
Add support for declarative formatting blocks
duncanbeevers Feb 22, 2014
a4a5f94
Add demos of declarative formatting blocks
duncanbeevers Feb 22, 2014
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
1 change: 1 addition & 0 deletions Gruntfile.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,6 +54,7 @@ module.exports = function (grunt) {
// Register tasks
grunt.registerTask('default', ['jshint', 'karma:unit']);
grunt.registerTask('watch', ['jshint', 'karma:watch']);
grunt.registerTask('test', ['karma:unit']);

grunt.initConfig(initConfig);
};
7 changes: 4 additions & 3 deletions bower.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,10 +11,11 @@
"main": "./src/select2.js",
"dependencies": {
"angular": ">=1.2.0",
"select2": "~3.4",
"jquery": ">=1.6.4"
"select2": ">=3.4.0",
"jquery": ">=1.11.0"
},
"devDependencies": {
"angular-mocks": ">=1.0.2"
"angular-mocks": ">=1.2.0",
"bootstrap": ">=3.1.1"
}
}
38 changes: 38 additions & 0 deletions demo/app.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -76,6 +76,36 @@ app.controller('MainCtrl', function ($scope, $element) {
}
}

function forEachState (fn) {
for (var i=0; i<states.length; i++) {
for (var j=0; j<states[i].children.length; j++) {
fn(states[i].children[j]);
}
}
}

function fuzzyMatch (needle, hay) {
return (new RegExp('.*' + needle + '.*', 'gi')).test(hay);
};

function fuzzyMatchQuery (query) {
if (!query.term) {
query.callback({ results: states });
return;
}

var results = [];
forEachState(function (state) {
if (fuzzyMatch(query.term, state.text)) {
results.push(state);
}
});

setTimeout(function () {
query.callback({ results: results });
}, 500);
}

$scope.multi2Value = ['CO', 'WA'];

$scope.multi = {
Expand Down Expand Up @@ -111,4 +141,12 @@ app.controller('MainCtrl', function ($scope, $element) {
}
};

$scope.customElementConfig = {
multiple: true,
query: fuzzyMatchQuery,
minimumInputLength: 3,
maximumSelectionSize: 2
};
$scope.customElementValue = [{ id: 'OR', text: 'Oregon' }];

});
11 changes: 0 additions & 11 deletions demo/bower.json
View file
Open in desktop

This file was deleted.

208 changes: 201 additions & 7 deletions demo/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
<!DOCTYPE html>
<html ng-app="angular-ui-select2-demo">
<head>
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="bower_components/select2/select2.css">
<link rel="stylesheet" href="../bower_components/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="../bower_components/select2/select2.css">
<style>
.container {
padding-bottom: 4em;
Expand All @@ -29,11 +29,11 @@
margin-top: 1em;
}
</style>
<script src="bower_components/jquery/jquery.js"></script>
<script src="bower_components/select2/select2.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-ui-select2/src/select2.js"></script>
<script src="app.js"></script>
<script src="../bower_components/jquery/dist/jquery.js"></script>
<script src="../bower_components/select2/select2.js"></script>
<script src="../bower_components/angular/angular.js"></script>
<script src="../src/select2.js"></script>
<script src="./app.js"></script>
<script>
$(function() {
var opts=$('#source').html(), opts2='<option></option>'+opts;
Expand Down Expand Up @@ -220,6 +220,200 @@ <h3>Value</h3>
</div>
</article>

<article class="row" id="custom-element">
<h2>Custom Element</h2>
<div class="example row">
<div class="col-md-4 left">
<p>
The <tt>ui-select2</tt> directive can also be used as an element to allow for declarative configuration of some of select2's behaviors.
</p>
<h3>Value</h3>
<pre>{{ customElementValue }}</pre>
</div>
<div class="col-md-8 right">
<pre><code>&lt;ui-select2 style="width:300px" options="customElementConfig" ng-model="customElementValue">
&lt;/ui-select2></code></pre>
<ui-select2 style="width:300px" options="customElementConfig" ng-model="customElementValue">
</ui-select2>
</div>
</div>

<div class="example row">
<div class="col-md-4 left">
<label><strong>formatResult</strong></label>
<p>
Results within the dropdown can be displayed with custom markup.
</p>
</div>
<div class="col-md-8 right">
<pre><code ng-non-bindable>&lt;ui-select2 style="width:300px" options="customElementConfig" ng-model="customElementValue">
&lt;format-result>
&lt;strong>{{ id }}&lt;/strong>
&lt;i>{{ text }}&lt;/i>
&lt;/format-result>
&lt;/ui-select2></code></pre>

<ui-select2 style="width:300px" options="customElementConfig" ng-model="customElementValue">
<format-result>
<strong>{{ id }}</strong>
<i>{{ text }}</i>
</format-result>
</ui-select2>

</div>
</div>

<div class="example row">
<div class="col-md-4 left">
<label><strong>formatSelection</strong></label>
<p>
Selected results within the control can be displayed with custom markup.
</p>
</div>
<div class="col-md-8 right">
<pre><code ng-non-bindable>&lt;ui-select2 style="width:300px" options="customElementConfig" ng-model="customElementValue">
&lt;format-selection>
&lt;strong>{{ id }}&lt;/strong>
&lt;i>{{ text }}&lt;/i>
&lt;/format-selection>
&lt;/ui-select2></code></pre>

<ui-select2 style="width:300px" options="customElementConfig" ng-model="customElementValue">
<format-selection>
<strong>{{ id }}</strong>
<i>{{ text }}</i>
</format-selection>
</ui-select2>

</div>
</div>

<div class="example row">
<div class="col-md-4 left">
<label><strong>formatNoMatches</strong></label>
<p>
The message shown when no results match the query can be displayed with custom markup. The template will be rendered with one local.
<ul>
<li><tt>input</tt> (<i>String</i>) the current search term</li>
</ul>
</p>
</div>
<div class="col-md-8 right">
<pre><code ng-non-bindable>&lt;ui-select2 style="width:300px" options="customElementConfig" ng-model="customElementValue">
&lt;format-no-matches>
&lt;svg style="width: 16px; height: 16px">
&lt;circle fill="red" stroke-width="10" cx="8" cy="10" r="6" />
&lt;/svg>
No matches found for term
&lt;i>{{ input }}&lt;/i>
&lt;/format-no-matches>
&lt;/ui-select2></code></pre>
<ui-select2 style="width:300px" options="customElementConfig" ng-model="customElementValue">
<format-no-matches>
<svg style="width: 16px; height: 16px">
<circle fill="red" stroke-width="10" cx="8" cy="10" r="6" />
</svg>
No matches found for input
<i>{{ input }}</i>
</format-no-matches>
</ui-select2>
</div>
</div>

<div class="example row">
<div class="col-md-4 left">
<label><strong>formatSearching</strong></label>
<p>
The message shown when retrieving query results asynchronously can be displayed with custom markup.
</p>
</div>
<div class="col-md-8 right">
<pre><code ng-non-bindable>&lt;ui-select2 style="width:300px" options="customElementConfig" ng-model="customElementValue">
&lt;format-searching>
The
&lt;strong>SEARCH&lt;/strong>
continues.
&lt;/format-searching>
&lt;/ui-select2></code></pre>

<ui-select2 style="width:300px" options="customElementConfig" ng-model="customElementValue">
<format-searching>
The
<strong>SEARCH</strong>
continues.
</format-searching>
</ui-select2>

</div>
</div>


<div class="example row">
<div class="col-md-4 left">
<label><strong>formatInputTooShort</strong></label>
<p>
The message shown when the search term entered is too short can be displayed with custom markup. The template will be rendered with two locals.
<ul>
<li><tt>input</tt> (<i>String</i>) the current search term</li>
<li><tt>minimumInputLength</tt> (<i>Number</i>) the configured minimum input length</li>
</ul>
</p>
</div>
<div class="col-md-8 right">
<pre><code ng-non-bindable>&lt;ui-select2 style="width:300px" options="customElementConfig" ng-model="customElementValue">
&lt;format-input-too-short>
Thy Input
&lt;strong>{{ input }}&lt;/strong>
Be Too Short By
&lt;i>{{ minimumInputLength - input.length }}&lt;/i>
&lt;/format-input-too-short>
&lt;/ui-select2></code></pre>

<ui-select2 style="width:300px" options="customElementConfig" ng-model="customElementValue">
<format-input-too-short>
Thy Input
<strong>{{ input }}</strong>
Be Too Short By
<i>{{ minimumInputLength - input.length }}</i>
</format-input-too-short>
</ui-select2>

</div>
</div>


<div class="example row">
<div class="col-md-4 left">
<label><strong>formatSelectionTooBig</strong></label>
<p>
The messaging shown when attempting to add another selection to an already-full multi-select can be displayed with custom markup. The template will be rendered with one local.
<ul>
<li><tt>maximumSelectionSize</tt> (<i>Number</i>) the configured maximum number of selected values</li>
</ul>
</p>
</div>
<div class="col-md-8 right">
<pre><code ng-non-bindable>&lt;ui-select2 style="width:300px" options="customElementConfig" ng-model="customElementValue">
&lt;format-selection-too-big>
Surely,
&lt;strong>{{ maximumSelectionSize }}&lt;/strong>
is sufficient.
&lt;/format-selection-too-big>
&lt;/ui-select2></code></pre>

<ui-select2 style="width:300px" options="customElementConfig" ng-model="customElementValue">
<format-selection-too-big>
Surely,
<strong>{{ maximumSelectionSize }}</strong>
is sufficient.
</format-selection-too-big>
</ui-select2>

</div>
</div>

</article>

</div>
</body>
</html>
3 changes: 3 additions & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,5 +26,8 @@
"karma": "~0.10.2",
"grunt-conventional-changelog": "~1.0.0",
"load-grunt-tasks": "~0.2.0"
},
"scripts": {
"test": "grunt test"
}
}
Loading