Skip to content

Commit d5d459e

Browse files
Merge branch 'master' of github.com:angular-ui/angular-ui.github.com
Conflicts: index.html
2 parents 414ef22 + b4a3397 commit d5d459e

File tree

12 files changed

+205
-55
lines changed

12 files changed

+205
-55
lines changed

.gitmodules

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,21 @@
11
[submodule "angular-ui"]
22
path = angular-ui
33
url = git://github.com/angular-ui/angular-ui.git
4+
[submodule "lib/select2"]
5+
path = lib/select2
6+
url = git://github.com/ivaynberg/select2.git
7+
[submodule "lib/qTip2"]
8+
path = lib/qTip2
9+
url = git://github.com/Craga89/qTip2.git
10+
[submodule "lib/maskedinput"]
11+
path = lib/maskedinput
12+
url = git://github.com/digitalBush/jquery.maskedinput.git
13+
[submodule "lib/bootstrap"]
14+
path = lib/bootstrap
15+
url = git://github.com/twitter/bootstrap.git
16+
[submodule "lib/tinymce"]
17+
path = lib/tinymce
18+
url = git://github.com/tinymce/tinymce.git
19+
[submodule "lib/CodeMirror2"]
20+
path = lib/CodeMirror2
21+
url = git://github.com/marijnh/CodeMirror2

README

Whitespace-only changes.

README.md

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
## Setup
2+
3+
To add/update required submodules at any time:
4+
```
5+
git submodule update --init
6+
```
7+
8+
To hack on a submodule from within this project:
9+
```
10+
cd angular-ui
11+
git remote set-url origin git@github.com:[YOUR-FORK]/angular-ui.github.com.git
12+
```

css/app.css

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -98,4 +98,18 @@ section {
9898
#directives-keypress textarea {
9999
width: 100%;
100100
height: 100px;
101+
}
102+
103+
span[ui-currency] {
104+
display:block;
105+
}
106+
/*** Currency ***/
107+
.ui-currency-pos {
108+
font-weight: bold;
109+
}
110+
.ui-currency-neg {
111+
font-size: 125%;
112+
}
113+
.ui-currency-zero {
114+
color: #000;
101115
}

index.html

Lines changed: 119 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,33 @@
11
<!DOCTYPE html>
22
<html lang="en" ng-app="demoApp">
33
<head>
4-
<title>Angular.JS-UI</title>
4+
<title>AngularUI for AngularJS</title>
55
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
66
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
7-
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap.min.js"></script>
7+
8+
<script src="lib/bootstrap/docs/assets/js/bootstrap.min.js"></script>
89
<script type="text/javascript" src="http://code.angularjs.org/1.0.1/angular-1.0.1.min.js"></script>
910
<script type="text/javascript" src="angular-ui/build/angular-ui.js"></script>
1011
<script type="text/javascript" src="js/prettify.js"></script>
11-
<script type="text/javascript" src="https://raw.github.com/petebacondarwin/angular-contrib/master/js/lib/jquery.maskedinput-1.3.js"></script>
12-
<script type="text/javascript" src="http://ivaynberg.github.com/select2/select2-master/select2.js"></script>
13-
<script type="text/javascript" src="http://craigsworks.com/projects/qtip_new/packages/nightly/jquery.qtip.js"></script>
12+
<script type="text/javascript" src="lib/maskedinput/src/jquery.maskedinput.js"></script>
13+
<script type="text/javascript" src="lib/select2/select2.js"></script>
14+
<script type="text/javascript" src="lib/qTip2/dist/jquery.qtip.min.js"></script>
15+
<script type="text/javascript" src="lib/CodeMirror2/lib/codemirror.js"></script>
16+
<script type="text/javascript" src="lib/CodeMirror2/mode/javascript/javascript.js"></script>
1417
<script type="text/javascript" src="http://fiddle.tinymce.com/tinymce/3.5.4.1/jquery.tinymce.js"></script>
1518
<script type="text/javascript" src="http://fiddle.tinymce.com/tinymce/3.5.4.1/tiny_mce_jquery_src.js"></script>
16-
<script type="text/javascript" src="http://twitter.github.com/bootstrap/assets/js/bootstrap-modal.js"></script>
1719
<script type="text/javascript" src="js/app.js"></script>
1820

1921
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/jquery-ui.css" rel="stylesheet">
20-
<link rel="stylesheet" type="text/css" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css" />
21-
<link rel="stylesheet" type="text/css" href="angular-ui/build/angular-ui.css" />
22-
<!-- <link rel="stylesheet" type="text/css" href="/angular-ui/build/angular-ui.css" /> -->
23-
<link rel="stylesheet" type="text/css" href="css/prettify.css" />
24-
<link rel="stylesheet" type="text/css" href="http://ivaynberg.github.com/select2/select2-master/select2.css" />
25-
<link rel="stylesheet" type="text/css" href="http://craigsworks.com/projects/qtip_new/packages/nightly/jquery.qtip.css" />
26-
<link rel="stylesheet" type="text/css" href="css/app.css" />
22+
<link rel="stylesheet" type="text/css" href="lib/bootstrap/docs/assets/css/bootstrap.css" >
23+
<link rel="stylesheet" type="text/css" href="angular-ui/build/angular-ui.css" >
24+
<link rel="stylesheet" type="text/css" href="css/prettify.css" >
25+
<link rel="stylesheet" type="text/css" href="lib/select2/select2.css" >
26+
<link rel="stylesheet" type="text/css" href="lib/qTip2/dist/jquery.qtip.css" >
27+
<link rel="stylesheet" type="text/css" href="lib/CodeMirror2/lib/codemirror.css" >
28+
<link rel="stylesheet" type="text/css" href="lib/CodeMirror2/theme/monokai.css" >
29+
30+
<link rel="stylesheet" type="text/css" href="css/app.css" >
2731
</head>
2832
<body data-spy="scroll">
2933
<header class="navbar navbar-fixed-top">
@@ -53,6 +57,7 @@
5357
<li><a href="#directives-select2">Select2</a></li>
5458
<li><a href="#directives-showhide">Show / Hide / Toggle</a></li>
5559
<li><a href="#directives-tinymce">TinyMCE</a></li>
60+
<li><a href="#directives-currency">Currency</a></li>
5661
</ul>
5762
</li>
5863
<li class="dropdown">
@@ -78,8 +83,8 @@
7883
<div role="main">
7984
<div class="container">
8085
<header class="hero-unit" id="overview">
81-
<h1>AngularJs - UI</h1>
82-
<p>The enhancement companion suite to AngularJs framework.</p>
86+
<h1>AngularUI</h1>
87+
<p>The enhancement companion suite to the <a href="http://angularjs.org">AngularJS</a> framework.</p>
8388
</header>
8489

8590
<section class="" id="defaults">
@@ -149,6 +154,25 @@ <h3>How?</h3>
149154
</pre>
150155
</section>
151156

157+
<section id="directives-codemirror" ng-controller="CodeMirrorCtrl">
158+
<div class="page-header">
159+
<h1>CodeMirror</h1>
160+
</div>
161+
<div class="row">
162+
<div class="span6">
163+
<h3>What?</h3>
164+
<p>IDE? In <em>my</em> textareas? Surely you're joking.</p>
165+
<p><textarea ui-codemirror="{theme:'monokai'}" ng-model="codeMirrorModel"></textarea></p>
166+
</div>
167+
<div class="span6">
168+
<h3>How?</h3>
169+
<pre class="prettyprint" ng-non-bindable>
170+
&lt;textarea ui-codemirror=&quot;{theme:&#x27;monokai&#x27;}&quot; ng-model=&quot;codeMirrorModel&quot;&gt;&lt;/textarea&gt;
171+
</pre>
172+
</div>
173+
</div>
174+
</section>
175+
152176
<section id="directives-event" ng-controller="EventCtrl">
153177
<div class="page-header">
154178
<h1>Event Binder</h1>
@@ -189,9 +213,9 @@ <h3>What?</h3>
189213
<ng-form name="dateForm">
190214
<p><input name="dateField" value="Click Here for Datepicker" ng-model="date" ui-date></p>
191215
</ng-form>
192-
<p>Selected Date: {{date}}</p>
216+
<p>Selected Date: {{ date }}</p>
193217
<p>Formatted Date: {{ date | date: 'mediumDate'}}</p>
194-
<p>Selected Month: {{date.getMonth()}}</p>
218+
<p>Selected Month: {{ date.getMonth() }}</p>
195219
<div ng-model="date" ui-date></div>
196220
</div>
197221
</div>
@@ -202,9 +226,9 @@ <h3>Why?</h3>
202226
<h3>How?</h3>
203227
<pre class="prettyprint linenums" ng-non-bindable>
204228
&lt;input ng-model="date" ui-date&gt;
205-
Selected Date: {{date}}
229+
Selected Date: {{ date }}
206230
Formatted Date: {{ date | date: 'mediumDate'}}
207-
Selected Month: {{date.getMonth()}}
231+
Selected Month: {{ date.getMonth() }}
208232
&lt;div ng-model="date" ui-date&gt;&lt;/div&gt;
209233
</pre>
210234
</div>
@@ -219,7 +243,7 @@ <h1>Keypress</h1>
219243
<div class="span6">
220244
<h3>What?</h3>
221245
<p>Bind an event to a particular keypress</p>
222-
<p><textarea ui-keypress="{13:keypressCallback}">Type something in and hit [Enter]. Remember that this normally adds a new line in textareas</textarea></p>
246+
<p><textarea ui-keypress="{13:'keypressCallback($event)'}">Type something in and hit [Enter]. Remember that this normally adds a new line in textareas</textarea></p>
223247
<h3>Why?</h3>
224248
<p>Cuz you feel like it? Maybe I should stop doing the 'Why' sections, running out of explanations...</p>
225249
</div>
@@ -228,11 +252,10 @@ <h3>How?</h3>
228252
<p>The directive takes a hash (object) with the key code as the key and the callback function to fire as the value. The callback function takes an 'event' param</p>
229253
<p class="alert alert-info">Note that <strong>13</strong> represents the <code>RETURN</code> key code.</p>
230254
<pre class="prettyprint" ng-non-bindable>
231-
&lt;textarea ui-keypress=&quot;{ 13 : keypressCallback }&quot;&gt;&lt;/textarea&gt;
255+
&lt;textarea ui-keypress=&quot;{ 13 : 'keypressCallback()' }&quot;&gt;&lt;/textarea&gt;
232256

233257
&lt;script&gt;
234-
$scope.keypressCallback = function(e) {
235-
e.preventDefault();
258+
$scope.keypressCallback = function() {
236259
alert('Voila!');
237260
};
238261
&lt;/script&gt;
@@ -247,7 +270,7 @@ <h1>Mask</h1>
247270
</div>
248271
<h3>What?</h3>
249272
<p></p>
250-
<p><input ng-model="maskDemo" ui-mask="'99-99-9999'"></p>
273+
<p><input ng-model="maskDemo" ui-mask="'99-99-9999'" placeholder="__-__-____"></p>
251274

252275
<h3>Why?</h3>
253276
<p></p>
@@ -312,22 +335,28 @@ <h3>How?</h3>
312335
</div>
313336
</section>
314337

315-
<section id="directives-reset">
338+
<section id="directives-reset" ng-controller="ResetCtrl">
316339
<div class="page-header">
317340
<h1>Reset</h1>
318341
</div>
319342
<div class="row">
320343
<div class="span6">
321344
<h3>What?</h3>
322345
<p>Adds an icon or link that empties the input element</p>
323-
<p><input value="Hover over me" ui-reset></p>
346+
<p><input ng-model="resetModel" ui-reset></p>
324347
</div>
325348
<div class="span6">
326349
<h3>Why?</h3>
327350
<p>Convenience?</p>
328351

329352
<h3>How?</h3>
330-
<pre class="prettyprint" ng-non-bindable>&lt;input value=&quot;Hover over me&quot; ui-reset&gt;</pre>
353+
<pre class="prettyprint" ng-non-bindable>
354+
&lt;input ng-model="resetModel" ui-reset&gt;
355+
356+
&lt;script&gt;
357+
$scope.resetModal = &#x27;Hover over me&#x27;;
358+
&lt;/script&gt;
359+
</pre>
331360
</div>
332361
</div>
333362
</section>
@@ -341,7 +370,7 @@ <h1>Modal</h1>
341370
<h3>What?</h3>
342371
<p>Takes the twitter bootstrap modal and lets you assign an ng-model to it. You can open/close the modal any way you want: data-* attributes, or use elm.modal('show'), or whatever. The ng-model you give will always correspond to whether the modal is opened or not, and if you set it it will also change the modal.
343372
<p>
344-
<div id="myModal" class="modal hide fade" ui-modal ng-model="modalShown">
373+
<div id="modalGuy" class="modal hide" ui-modal ng-model="modalShown">
345374
<div class="modal-header"><h1>Modalin'!</h1></div>
346375
<div class="modal-body">
347376
<p>Cool beans, dude.</p>
@@ -351,8 +380,8 @@ <h3>What?</h3>
351380
<a class="btn" ng-click="modalShown=false">Close ng-model way</a>
352381
</div>
353382
</div>
354-
<a class="btn" ng-click="modalShown=true">Open Modal with ng-model</a><br />
355-
<a class="btn" data-toggle="modal" data-target="#myModal">Open Modal with data-toggle="modal"</a>
383+
<a class="btn" ng-click="modalShown=true">Open Modal with ng-model</a><br>
384+
<a class="btn" data-toggle="modal" href="#modalGuy">Open Modal with data-toggle="modal"</a>
356385
</p>
357386
<h3>Why?</h3>
358387
<p>We wanted to be able to open/close a modal programatically, so we stuck an ng-model onto the bootstrap modal and called it a day.</p>
@@ -361,7 +390,7 @@ <h3>Why?</h3>
361390
<h3>How?</h3>
362391
<pre class="prettyprint linenums" ng-non-bindable>
363392
&lt;script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-modal.js"&gt;&lt;/script&gt;
364-
&lt;div ui-modal ng-model="modalShown" id="myModal" class="modal hide"&gt;
393+
&lt;div ui-modal ng-model="modalShown" id="myModal"&gt;
365394
Cool, a modal dialog!
366395
&lt;a data-dismiss="modal"&gt;Close 1&lt;/a&gt;
367396
&lt;a ng-click="modalShown=false"&gt;Close 2&lt;/a&gt;
@@ -519,6 +548,64 @@ <h3>How?</h3>
519548
</div>
520549

521550

551+
</section>
552+
553+
<section id="directives-currency" ng-controller="CurrencyCtrl">
554+
<div class="page-header">
555+
<h1>Currency</h1>
556+
</div>
557+
<div class="row">
558+
<div class="span6">
559+
<h3>What?</h3>
560+
<p>Angular currencyFilter wrapper</p>
561+
<div class="well">
562+
<span ui-currency ng-model="nums.pos"></span>
563+
<span ui-currency="{ symbol: '$', zero: 'my-zero-class'}" ng-model="nums.zero"></span>
564+
<span ui-currency ng-model="nums.neg"></span>
565+
</div>
566+
</div>
567+
<div class="span6">
568+
<h3>Why?</h3>
569+
<p>In angular, you are able to specify what the currency symbol is (however, you might not want to change it for localization).
570+
This directive gives greater control over your currency elements by allowing you to set CSS styles based on the number's sign.
571+
</p>
572+
</div>
573+
</div>
574+
<div class="row">
575+
<div class="span12">
576+
<h3>How?</h3>
577+
<p>This example shows how you can use <code>ui.config</code> for greater convenience. You can still pass the configuration as the expression (even in addition to <code>ui.config</code>).</p>
578+
<pre class="prettyprint linenums" ng-non-bindable>
579+
&lt;span ui-currency ng-model=&quot;nums.pos&quot;&gt;&lt;/span&gt;
580+
&lt;span ui-currency=&quot;{ symbol: '$', zero: 'my-zero-class'}&quot; ng-model=&quot;nums.zero&quot;&gt;&lt;/span&gt;
581+
&lt;span ui-currency ng-model=&quot;nums.neg&quot;&gt;&lt;/span&gt;
582+
583+
&lt;script&gt;
584+
myModule.value(&#x27;ui.config&#x27;, {
585+
currency: {
586+
symbol: &#x27;USD$&#x27;,
587+
}
588+
});
589+
&lt;/script&gt;
590+
&lt;style&gt;
591+
span[ui-currency] {
592+
display:block;
593+
}
594+
.ui-currency-pos {
595+
font-weight: bold;
596+
}
597+
.ui-currency-neg {
598+
font-size: 125%;
599+
}
600+
.my-zero-class {
601+
color: #000;
602+
}
603+
&lt;/style&gt;
604+
</pre>
605+
</div>
606+
</div>
607+
608+
522609
</section>
523610

524611
<section id="filters-length" ng-controller="LengthCtrl">
@@ -528,7 +615,7 @@ <h1>Length</h1>
528615
<div class="row">
529616
<div class="span6">
530617
<h3>What?</h3>
531-
<p>Get the length attribute of an array or string</p>
618+
<p>Get the length attribute of an array, string, or object</p>
532619
<div class="well">
533620
<p><input ng-model="lengthFilter" placeholder="Filter the list"></p>
534621
<p>There are {{items | filter:lengthFilter | length}} items.</p>

0 commit comments

Comments
 (0)