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

Use select2.css styles as starting point #8

Merged
merged 2 commits into from
Nov 18, 2013
Merged

Use select2.css styles as starting point #8

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
f0b7d9a
Use select2.css styles as starting point
Nov 12, 2013
ac7248f
New child-directives
dimirc Nov 17, 2013
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
54 changes: 31 additions & 23 deletions demo/demo.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,28 +3,36 @@ angular.module('DemoApp', ['ui.select'])

$scope.data = {};
$scope.data.items = [
{title: "ActionScript" },
{title: "AppleScript" },
{title: "Asp" },
{title: "BASIC" },
{title: "C" },
{title: "C++" },
{title: "Clojure" },
{title: "COBOL" },
{title: "ColdFusion" },
{title: "Erlang" },
{title: "Fortran" },
{title: "Groovy" },
{title: "Haskell" },
{title: "Java" },
{title: "JavaScript" },
{title: "Lisp" },
{title: "Perl" },
{title: "PHP" },
{title: "Python" },
{title: "Ruby" },
{title: "Scala" },
{title: "Scheme" }
{
"id": 1,
"name": "Wladimir Coka",
"email": "wcoka@email.com",
},
{
"id": 2,
"name": "Samantha Smith",
"email": "sam@email.com",
},
{
"id": 3,
"name": "Estefanía Smith",
"email": "esmith@email.com",
},
{
"id": 4,
"name": "Natasha Jones",
"email": "ncoka@email.com",
},
{
"id": 5,
"name": "Nicole Smith",
"email": "nicky@email.com",
},
{
"id": 6,
"name": "Adrian Jones",
"email": "asmith@email.com",
},
];

}]);
}]);
31 changes: 19 additions & 12 deletions demo/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,25 +12,32 @@
<script src="../src/select.js"></script>
<script src="demo.js"></script>

<link rel="stylesheet" href="../src/select.css"/>
<!-- <link rel="stylesheet" href="../src/select.css"/> -->
<link rel="stylesheet" href="../src/select2.css"/>

<style>
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
line-height: 20px;
color: #333;
}
</style>

</head>
<body ng-controller="MainCtrl">

<p>
Selected: {{data.custom}}
Selected: {{data.custom.name}}
</p>

<ui-select ng-model="data.custom">
<li
ng-repeat="item in data.items | filter : $select.search"
ng-class="{highlight:$select.index==$index}"
ng-click="$select(item)"
ng-mouseover="$select.index=$index">
<h4>{{item.title}}</h4>
</li>
<ui-select ng-model="data.custom" style="width:300px">
<match placeholder="Pick one...">{{$select.selected.name}}</match>
<choices data="item in data.items | filter : $select.search">
<div ng-bind-html="trustAsHtml((item.name | highlight:$select.search))"/></div>
<div> {{item.email}} </div>
</choices>
</ui-select>


</body>
</html>
118 changes: 103 additions & 15 deletions src/select.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,11 +3,13 @@ angular.module('ui.select', ['ui.keypress']).directive('uiSelect', function($doc
restrict: 'E',
/* jshint multistr: true */
template:
'<div class="select" ng-class="{open:open}"> \
<button type="button" ng-click="activate()">{{$select.selected.title || \'Select Me \' }}</button> \
<div class="ui-select-drop"> \
<input class="ui-select-search" type="text" ui-keydown="{up: \'up()\', down: \'down()\', esc: \'close()\', enter: \'$select((data.items|filter: $select.search)[$select.index])\'}" ng-model="$select.search"> \
<ul class="ui-select-choices" /> \
'<div class="ui-select-container" ng-class="{\'ui-select-container-active ui-select-dropdown-open\':open}"> \
<a class="ui-select-choice"></a> \
<div ng-class="{\'ui-select-display-none\':!open}" class="ui-select-drop ui-select-with-searchbox ui-select-drop-active"> \
<div class="ui-select-search"> \
<input class="ui-select-input" type="text" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" ui-keydown="{up: \'up()\', down: \'down()\', esc: \'close()\', enter: \'$select((data.items|filter: $select.search)[$select.index])\'}" ng-model="$select.search"> \
</div> \
<ul class="ui-select-results" /> \
</div> \
</div>',
replace: true,
Expand All @@ -17,7 +19,12 @@ angular.module('ui.select', ['ui.keypress']).directive('uiSelect', function($doc
compile: function(tElement, tAttrs, transcludeFn) {
return function($scope, $elm, $attrs, ngModel){
transcludeFn($scope, function(clone) {

$scope.open = false;
//Helper functions (no jQuery)
var hasClass = function (elem, klass) {
if (!elem) return;
return (" " + elem.className + " " ).indexOf( " "+klass+" " ) > -1;
};
var getElementsByClassName = (function() {
//To support IE8
return document.getElementsByClassdName ?
Expand All @@ -29,9 +36,12 @@ angular.module('ui.select', ['ui.keypress']).directive('uiSelect', function($doc
};
})();

var dropDiv = getElementsByClassName(tElement[0],'ui-select-drop');
var choices = getElementsByClassName(tElement[0],'ui-select-choices').append(clone);
dropDiv.append(choices);
//Set transcluded elements to their correct position on template
var transcluded = angular.element('<div/>').append(clone);
var transChoices = getElementsByClassName(transcluded[0],'ui-select-results');
var transMatch = getElementsByClassName(transcluded[0],'ui-select-choice');
getElementsByClassName($elm[0],'ui-select-results').replaceWith(transChoices[0]);
getElementsByClassName($elm[0],'ui-select-choice').replaceWith(transMatch[0]);

var input = $elm.find('input');
$scope.activate = function(){
Expand All @@ -45,13 +55,16 @@ angular.module('ui.select', ['ui.keypress']).directive('uiSelect', function($doc
$scope.$select.index = 0;
});
$scope.up = function(){
if ($scope.$select.index > 0)
if ($scope.$select.index > 0){
$scope.$select.index--;
$scope.ensureHighlightVisible();
}
};
$scope.down = function(){
items = $elm.find('ul').children().length;
items = $elm.find('ul').children().length -1;
if ($scope.$select.index < items) {
$scope.$select.index++;
$scope.ensureHighlightVisible();
} else {
$scope.$select.index = items;
}
Expand All @@ -66,12 +79,18 @@ angular.module('ui.select', ['ui.keypress']).directive('uiSelect', function($doc
$scope.open = false;
$scope.$select.search = "";
};
var choiceArrow = getElementsByClassName(tElement[0],'ui-select-arrow');
var searchDiv = getElementsByClassName(tElement[0],'ui-select-search');
var dismissClickHandler = function (evt) {
//FIXME
if ($elm[0] !== evt.target.parentElement) {
$scope.close();
$scope.$digest();
if (
hasClass(evt.target,'ui-select-choice') || //Chosen label for selection
hasClass(evt.target.parentElement,'ui-select-choice') || //No selection (Placeholder)
choiceArrow[0] === evt.target.parentElement ||
searchDiv[0] === evt.target.parentElement) {
return;
}
$scope.close();
$scope.$digest();
};
$document.bind('click', dismissClickHandler);
ngModel.$render = function(){
Expand All @@ -81,4 +100,73 @@ angular.module('ui.select', ['ui.keypress']).directive('uiSelect', function($doc
};
}
};
})

.directive('choices', function($sce) {
return {
// require: '^uiSelect',
restrict: 'E',
transclude: true,
replace: true,
template:
'<ul class="ui-select-results">' +
'<li ng-class="{\'ui-select-highlighted\':$select.index==$index}"' +
' ng-click="$select(item)"' +
' ng-mousemove="$select.index=$index"' +
' ng-repeat="empty">' +
' <div class="ui-select-result-label" ng-transclude></div>' +
'</li></ul>',
compile: function(tElement, tAttrs, transcludeFn) {
tElement[0].children[0].setAttribute("ng-repeat", tAttrs.data);
return function(scope, element, attrs){
scope.trustAsHtml = function(value) {
return $sce.trustAsHtml(value);
};
scope.ensureHighlightVisible = function(){
var highlighted = element[0].children[scope.$select.index],
ul = element[0],
posY = highlighted.offsetTop + highlighted.clientHeight - ul.scrollTop,
maxHeight = 200; //Same as css
if (posY>maxHeight){
ul.scrollTop += posY-maxHeight;
}else if (posY<highlighted.clientHeight){
ul.scrollTop -= highlighted.clientHeight-posY;
}
};
};
}
};
})

.directive('match', function($compile) {
return {
restrict: 'E',
transclude: true,
replace: true,
/* jshint multistr: true */
template:
'<a href="javascript:void(0)" class="ui-select-choice" ng-click="activate()"> \
<span class="ui-select-arrow"><b></b></span> \
<span class="select2-chosen">{{selectedLabel}}</span> \
</a>',
compile: function(tElement, tAttrs, transcludeFn) {
return function($scope, $elm, $attrs, ngModel){
transcludeFn($scope, function(clone) {
var labelWrap = angular.element("<div ng-hide='$select.selected'>" + tAttrs.placeholder + "</div>");
var labelWrapCompiled = $compile(labelWrap)($scope);
$elm.append(labelWrapCompiled);
$elm.append(clone);
});
};
}
};
})

.filter('highlight', function() {
function escapeRegexp(queryToEscape) {
return queryToEscape.replace(/([.?*+^$[\]\\(){}|-])/g, "\\$1");
}
return function(matchItem, query) {
return query ? matchItem.replace(new RegExp(escapeRegexp(query), 'gi'), '<strong>$&</strong>') : matchItem;
};
});
Loading