Skip to content

Commit 56c0f1d

Browse files
DimircDimirc
Dimirc
authored and
Dimirc
committed
Setup demo
1 parent 263eadb commit 56c0f1d

File tree

3 files changed

+176
-0
lines changed

3 files changed

+176
-0
lines changed

‎demo/demo.js

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
angular.module('DemoApp', ['ui.select'])
2+
.controller('MainCtrl', ['$scope', function ($scope) {
3+
4+
$scope.data = {};
5+
$scope.data.items = [
6+
{title: "ActionScript" },
7+
{title: "AppleScript" },
8+
{title: "Asp" },
9+
{title: "BASIC" },
10+
{title: "C" },
11+
{title: "C++" },
12+
{title: "Clojure" },
13+
{title: "COBOL" },
14+
{title: "ColdFusion" },
15+
{title: "Erlang" },
16+
{title: "Fortran" },
17+
{title: "Groovy" },
18+
{title: "Haskell" },
19+
{title: "Java" },
20+
{title: "JavaScript" },
21+
{title: "Lisp" },
22+
{title: "Perl" },
23+
{title: "PHP" },
24+
{title: "Python" },
25+
{title: "Ruby" },
26+
{title: "Scala" },
27+
{title: "Scheme" }
28+
];
29+
30+
}]);

‎demo/index.html

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
<!DOCTYPE html>
2+
<html lang="en" ng-app="DemoApp">
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Angular ui-select</title>
6+
7+
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
8+
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
9+
10+
<!-- https://github.com/angular-ui/ui-utils/blob/master/modules/keypress/keypress.js -->
11+
<script src="keypress.js"></script>
12+
13+
<script src="../select.js"></script>
14+
<script src="demo.js"></script>
15+
16+
<link rel="stylesheet" href="../select.css"/>
17+
18+
</head>
19+
<body ng-controller="MainCtrl">
20+
21+
<ui-select ng-model="data.custom">
22+
<li
23+
ng-repeat="item in data.items | filter : $search"
24+
ng-class="{highlight:highlight==$index}"
25+
ng-click="$select(item)"
26+
ng-mouseover="$parent.highlight=$index">
27+
<h4>{{item.title}}</h4>
28+
</li>
29+
</ui-select>
30+
31+
</body>
32+
</html>

‎demo/keypress.js

Lines changed: 114 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,114 @@
1+
angular.module('ui.keypress',[]).
2+
factory('keypressHelper', ['$parse', function keypress($parse){
3+
var keysByCode = {
4+
8: 'backspace',
5+
9: 'tab',
6+
13: 'enter',
7+
27: 'esc',
8+
32: 'space',
9+
33: 'pageup',
10+
34: 'pagedown',
11+
35: 'end',
12+
36: 'home',
13+
37: 'left',
14+
38: 'up',
15+
39: 'right',
16+
40: 'down',
17+
45: 'insert',
18+
46: 'delete'
19+
};
20+
21+
var capitaliseFirstLetter = function (string) {
22+
return string.charAt(0).toUpperCase() + string.slice(1);
23+
};
24+
25+
return function(mode, scope, elm, attrs) {
26+
var params, combinations = [];
27+
params = scope.$eval(attrs['ui'+capitaliseFirstLetter(mode)]);
28+
29+
// Prepare combinations for simple checking
30+
angular.forEach(params, function (v, k) {
31+
var combination, expression;
32+
expression = $parse(v);
33+
34+
angular.forEach(k.split(' '), function(variation) {
35+
combination = {
36+
expression: expression,
37+
keys: {}
38+
};
39+
angular.forEach(variation.split('-'), function (value) {
40+
combination.keys[value] = true;
41+
});
42+
combinations.push(combination);
43+
});
44+
});
45+
46+
// Check only matching of pressed keys one of the conditions
47+
elm.bind(mode, function (event) {
48+
// No need to do that inside the cycle
49+
var metaPressed = !!(event.metaKey && !event.ctrlKey);
50+
var altPressed = !!event.altKey;
51+
var ctrlPressed = !!event.ctrlKey;
52+
var shiftPressed = !!event.shiftKey;
53+
var keyCode = event.keyCode;
54+
55+
// normalize keycodes
56+
if (mode === 'keypress' && !shiftPressed && keyCode >= 97 && keyCode <= 122) {
57+
keyCode = keyCode - 32;
58+
}
59+
60+
// Iterate over prepared combinations
61+
angular.forEach(combinations, function (combination) {
62+
63+
var mainKeyPressed = combination.keys[keysByCode[keyCode]] || combination.keys[keyCode.toString()];
64+
65+
var metaRequired = !!combination.keys.meta;
66+
var altRequired = !!combination.keys.alt;
67+
var ctrlRequired = !!combination.keys.ctrl;
68+
var shiftRequired = !!combination.keys.shift;
69+
70+
if (
71+
mainKeyPressed &&
72+
( metaRequired === metaPressed ) &&
73+
( altRequired === altPressed ) &&
74+
( ctrlRequired === ctrlPressed ) &&
75+
( shiftRequired === shiftPressed )
76+
) {
77+
// Run the function
78+
scope.$apply(function () {
79+
combination.expression(scope, { '$event': event });
80+
});
81+
}
82+
});
83+
});
84+
};
85+
}]);
86+
87+
/**
88+
* Bind one or more handlers to particular keys or their combination
89+
* @param hash {mixed} keyBindings Can be an object or string where keybinding expression of keys or keys combinations and AngularJS Exspressions are set. Object syntax: "{ keys1: expression1 [, keys2: expression2 [ , ... ]]}". String syntax: ""expression1 on keys1 [ and expression2 on keys2 [ and ... ]]"". Expression is an AngularJS Expression, and key(s) are dash-separated combinations of keys and modifiers (one or many, if any. Order does not matter). Supported modifiers are 'ctrl', 'shift', 'alt' and key can be used either via its keyCode (13 for Return) or name. Named keys are 'backspace', 'tab', 'enter', 'esc', 'space', 'pageup', 'pagedown', 'end', 'home', 'left', 'up', 'right', 'down', 'insert', 'delete'.
90+
* @example <input ui-keypress="{enter:'x = 1', 'ctrl-shift-space':'foo()', 'shift-13':'bar()'}" /> <input ui-keypress="foo = 2 on ctrl-13 and bar('hello') on shift-esc" />
91+
**/
92+
angular.module('ui.keypress').directive('uiKeydown', ['keypressHelper', function(keypressHelper){
93+
return {
94+
link: function (scope, elm, attrs) {
95+
keypressHelper('keydown', scope, elm, attrs);
96+
}
97+
};
98+
}]);
99+
100+
angular.module('ui.keypress').directive('uiKeypress', ['keypressHelper', function(keypressHelper){
101+
return {
102+
link: function (scope, elm, attrs) {
103+
keypressHelper('keypress', scope, elm, attrs);
104+
}
105+
};
106+
}]);
107+
108+
angular.module('ui.keypress').directive('uiKeyup', ['keypressHelper', function(keypressHelper){
109+
return {
110+
link: function (scope, elm, attrs) {
111+
keypressHelper('keyup', scope, elm, attrs);
112+
}
113+
};
114+
}]);

0 commit comments

Comments
 (0)