Skip to content

Commit f47e4de

Browse files
ruhleyruhley
committed
Converting to ES6, moving towards Angular 2, exposing an api, changing bindings
1 parent f89ca31 commit f47e4de

33 files changed

+1047
-1022
lines changed

‎Gruntfile.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
// config variables, these are accessible like '<%= config.dev %>'
1212
var gruntConfig = {config: {
1313
// folders
14-
lib: 'lib',
14+
src: 'src',
1515
dist: 'dist',
1616
tests: 'tests',
1717
grunt: 'grunt',

‎examples/01-simple.html‎

Lines changed: 13 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -18,70 +18,59 @@ <h1>AngularJS Color Picker</h1>
1818
<form class="col-sm-12">
1919
<div class="row">
2020
<label class="control-label">Disabled (disabled)</label>
21-
<select ng-model="disabled" class="form-control" ng-options="option.value as option.label for option in boolOptions"></select>
21+
<select ng-model="options.disabled" class="form-control" ng-options="option.value as option.label for option in boolOptions"></select>
2222
</div>
2323

2424
<div class="row">
2525
<label class="control-label">Format (format)</label>
26-
<select ng-model="format" class="form-control" ng-options="option.value as option.label for option in formatOptions"></select>
26+
<select ng-model="options.format" class="form-control" ng-options="option.value as option.label for option in formatOptions"></select>
2727
</div>
2828

2929
<div class="row">
3030
<label class="control-label">Alpha (alpha) - whether or not to display the alpha control</label>
31-
<select ng-model="alpha" class="form-control" ng-options="option.value as option.label for option in boolOptions"></select>
31+
<select ng-model="options.alpha" class="form-control" ng-options="option.value as option.label for option in boolOptions"></select>
3232
</div>
3333

3434
<div class="row">
3535
<label class="control-label">Swatch (swatch) - whether or not to display the swatch inside the input field</label>
36-
<select ng-model="swatch" class="form-control" ng-options="option.value as option.label for option in boolOptions"></select>
36+
<select ng-model="options.swatch" class="form-control" ng-options="option.value as option.label for option in boolOptions"></select>
3737
</div>
3838

3939
<div class="row">
4040
<label class="control-label">Swatch Only (swatch-only) - whether or not to display the input field</label>
41-
<select ng-model="swatchOnly" class="form-control" ng-options="option.value as option.label for option in boolOptions"></select>
41+
<select ng-model="options.swatchOnly" class="form-control" ng-options="option.value as option.label for option in boolOptions"></select>
4242
</div>
4343

4444
<div class="row">
4545
<label class="control-label">Swatch Position (swatch-pos) - the position of the swatch in the input field - 'left' or 'right'</label>
46-
<select ng-model="swatchPos" class="form-control" ng-options="option.value as option.label for option in swatchPosOptions"></select>
46+
<select ng-model="options.swatchPos" class="form-control" ng-options="option.value as option.label for option in swatchPosOptions"></select>
4747
</div>
4848

4949
<div class="row">
5050
<label class="control-label">Swatch Bootstrap Add On (swatch-bootstrap) - whether or not the swatch should appear as a bootstrap add on</label>
51-
<select ng-model="swatchBootstrap" class="form-control" ng-options="option.value as option.label for option in boolOptions"></select>
51+
<select ng-model="options.swatchBootstrap" class="form-control" ng-options="option.value as option.label for option in boolOptions"></select>
5252
</div>
5353

5454
<div class="row">
5555
<label class="control-label">Position (pos) - the position of the picker control in relation to the input field - 'bottom left', 'bottom right', 'top left', 'top right'</label>
56-
<select ng-model="pos" class="form-control" ng-options="option.value as option.label for option in posOptions"></select>
56+
<select ng-model="options.pos" class="form-control" ng-options="option.value as option.label for option in posOptions"></select>
5757
</div>
5858

5959
<div class="row">
6060
<label class="control-label">Case (case) - The case of hex colors - 'upper', 'lower'</label>
61-
<select ng-model="case" class="form-control" ng-options="option.value as option.label for option in caseOptions"></select>
61+
<select ng-model="options.case" class="form-control" ng-options="option.value as option.label for option in caseOptions"></select>
6262
</div>
6363

6464
<div class="row">
6565
<label class="control-label">Inline (inline) - whether or not to display inline or in a popup - false, true</label>
66-
<select ng-model="inline" class="form-control" ng-options="option.value as option.label for option in boolOptions"></select>
66+
<select ng-model="options.inline" class="form-control" ng-options="option.value as option.label for option in boolOptions"></select>
6767
</div>
6868

6969
<div class="row">
7070
<label class="control-label">Color</label>
71-
<color-picker
72-
ng-model="color"
73-
color-picker-disabled="disabled"
74-
color-picker-format="format"
75-
color-picker-alpha="alpha"
76-
color-picker-swatch="swatch"
77-
color-picker-swatch-pos="swatchPos"
78-
color-picker-swatch-bootstrap="swatchBootstrap"
79-
color-picker-pos="pos"
80-
color-picker-case="case"
81-
color-picker-swatch-only="swatchOnly"
82-
color-picker-inline="inline"
83-
color-picker-on-change="onColorChange($event, color)"
84-
></color-picker>
71+
<button ng-click="open()">Show</button>
72+
<button ng-click="close()">Hide</button>
73+
<color-picker ng-model="color" options="options" api="api"></color-picker>
8574
</div>
8675

8776
<div class="row">

‎examples/02-testing-lib.html‎

Lines changed: 16 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -2,15 +2,15 @@
22
<head>
33
<title>Example 2 - Testing Lib</title>
44

5-
<link rel="stylesheet/less" href="../lib/styles/angularjs-color-picker.less" />
5+
<link rel="stylesheet/less" href="../src/styles/angularjs-color-picker.less" />
66
<script src="https://cdnjs.cloudflare.com/ajax/libs/less.js/2.4.0/less.min.js"></script>
77

88
<script src="../bower_components/angular/angular.js"></script>
99
<script src="../bower_components/tinycolor/tinycolor.js"></script>
1010

11-
<script src="../lib/scripts/module.js"></script>
12-
<script src="../lib/scripts/directive.js"></script>
13-
<script src="../lib/scripts/template.js"></script>
11+
<script src="../src/scripts/module.js"></script>
12+
<script src="../src/scripts/directive.js"></script>
13+
<script src="../src/scripts/template.js"></script>
1414

1515
<script src="app.js"></script>
1616
</head>
@@ -21,69 +21,60 @@ <h1>AngularJS Color Picker</h1>
2121
<form class="col-sm-12">
2222
<div class="row">
2323
<label class="control-label">Disabled (disabled)</label>
24-
<select ng-model="disabled" class="form-control" ng-options="option.value as option.label for option in boolOptions"></select>
24+
<select ng-model="options.disabled" class="form-control" ng-options="option.value as option.label for option in boolOptions"></select>
2525
</div>
2626

2727
<div class="row">
2828
<label class="control-label">Format (format)</label>
29-
<select ng-model="format" class="form-control" ng-options="option.value as option.label for option in formatOptions"></select>
29+
<select ng-model="options.format" class="form-control" ng-options="option.value as option.label for option in formatOptions"></select>
3030
</div>
3131

3232
<div class="row">
3333
<label class="control-label">Alpha (alpha) - whether or not to display the alpha control</label>
34-
<select ng-model="alpha" class="form-control" ng-options="option.value as option.label for option in boolOptions"></select>
34+
<select ng-model="options.alpha" class="form-control" ng-options="option.value as option.label for option in boolOptions"></select>
3535
</div>
3636

3737
<div class="row">
3838
<label class="control-label">Swatch (swatch) - whether or not to display the swatch inside the input field</label>
39-
<select ng-model="swatch" class="form-control" ng-options="option.value as option.label for option in boolOptions"></select>
39+
<select ng-model="options.swatch" class="form-control" ng-options="option.value as option.label for option in boolOptions"></select>
4040
</div>
4141

4242
<div class="row">
4343
<label class="control-label">Swatch Only (swatch-only) - whether or not to display the input field</label>
44-
<select ng-model="swatchOnly" class="form-control" ng-options="option.value as option.label for option in boolOptions"></select>
44+
<select ng-model="options.swatchOnly" class="form-control" ng-options="option.value as option.label for option in boolOptions"></select>
4545
</div>
4646

4747
<div class="row">
4848
<label class="control-label">Swatch Position (swatch-pos) - the position of the swatch in the input field - 'left' or 'right'</label>
49-
<select ng-model="swatchPos" class="form-control" ng-options="option.value as option.label for option in swatchPosOptions"></select>
49+
<select ng-model="options.swatchPos" class="form-control" ng-options="option.value as option.label for option in swatchPosOptions"></select>
5050
</div>
5151

5252
<div class="row">
5353
<label class="control-label">Swatch Bootstrap Add On (swatch-bootstrap) - whether or not the swatch should appear as a bootstrap add on</label>
54-
<select ng-model="swatchBootstrap" class="form-control" ng-options="option.value as option.label for option in boolOptions"></select>
54+
<select ng-model="options.swatchBootstrap" class="form-control" ng-options="option.value as option.label for option in boolOptions"></select>
5555
</div>
5656

5757
<div class="row">
5858
<label class="control-label">Position (pos) - the position of the picker control in relation to the input field - 'bottom left', 'bottom right', 'top left', 'top right'</label>
59-
<select ng-model="pos" class="form-control" ng-options="option.value as option.label for option in posOptions"></select>
59+
<select ng-model="options.pos" class="form-control" ng-options="option.value as option.label for option in posOptions"></select>
6060
</div>
6161

6262
<div class="row">
6363
<label class="control-label">Case (case) - The case of hex colors - 'upper', 'lower'</label>
64-
<select ng-model="case" class="form-control" ng-options="option.value as option.label for option in caseOptions"></select>
64+
<select ng-model="options.case" class="form-control" ng-options="option.value as option.label for option in caseOptions"></select>
6565
</div>
6666

6767
<div class="row">
6868
<label class="control-label">Inline (inline) - whether or not to display inline or in a popup - false, true</label>
69-
<select ng-model="inline" class="form-control" ng-options="option.value as option.label for option in boolOptions"></select>
69+
<select ng-model="options.inline" class="form-control" ng-options="option.value as option.label for option in boolOptions"></select>
7070
</div>
7171

7272
<div class="row">
7373
<label class="control-label">Color</label>
7474
<color-picker
7575
ng-model="color"
76-
color-picker-disabled="disabled"
77-
color-picker-format="format"
78-
color-picker-alpha="alpha"
79-
color-picker-swatch="swatch"
80-
color-picker-swatch-pos="swatchPos"
81-
color-picker-swatch-bootstrap="swatchBootstrap"
82-
color-picker-pos="pos"
83-
color-picker-case="case"
84-
color-picker-swatch-only="swatchOnly"
85-
color-picker-inline="inline"
86-
color-picker-on-change="onColorChange($event, color)"
76+
options="options"
77+
api="api"
8778
></color-picker>
8879

8980
<button class="btn btn-primary" ng-click="color = null;">Clear</button>

‎examples/03-testing-preset-value.html‎

Lines changed: 16 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -2,15 +2,12 @@
22
<head>
33
<title>Example 3 - Testing Preset Value</title>
44

5-
<link rel="stylesheet/less" href="../lib/styles/angularjs-color-picker.less" />
6-
<script src="https://cdnjs.cloudflare.com/ajax/libs/less.js/2.4.0/less.min.js"></script>
5+
<link rel="stylesheet" href="../dist/angularjs-color-picker.min.css" />
76

8-
<script src="../bower_components/angular/angular.js"></script>
9-
<script src="../bower_components/tinycolor/tinycolor.js"></script>
7+
<script src="../bower_components/angular/angular.min.js"></script>
8+
<script src="../bower_components/tinycolor/dist/tinycolor-min.js"></script>
109

11-
<script src="../lib/scripts/module.js"></script>
12-
<script src="../lib/scripts/directive.js"></script>
13-
<script src="../lib/scripts/template.js"></script>
10+
<script src="../dist/angularjs-color-picker.js"></script>
1411

1512
<script src="app-preset.js"></script>
1613
</head>
@@ -21,69 +18,60 @@ <h1>AngularJS Color Picker</h1>
2118
<form class="col-sm-12">
2219
<div class="row">
2320
<label class="control-label">Disabled (disabled)</label>
24-
<select ng-model="disabled" class="form-control" ng-options="option.value as option.label for option in boolOptions"></select>
21+
<select ng-model="options.disabled" class="form-control" ng-options="option.value as option.label for option in boolOptions"></select>
2522
</div>
2623

2724
<div class="row">
2825
<label class="control-label">Format (format)</label>
29-
<select ng-model="format" class="form-control" ng-options="option.value as option.label for option in formatOptions"></select>
26+
<select ng-model="options.format" class="form-control" ng-options="option.value as option.label for option in formatOptions"></select>
3027
</div>
3128

3229
<div class="row">
3330
<label class="control-label">Alpha (alpha) - whether or not to display the alpha control</label>
34-
<select ng-model="alpha" class="form-control" ng-options="option.value as option.label for option in boolOptions"></select>
31+
<select ng-model="options.alpha" class="form-control" ng-options="option.value as option.label for option in boolOptions"></select>
3532
</div>
3633

3734
<div class="row">
3835
<label class="control-label">Swatch (swatch) - whether or not to display the swatch inside the input field</label>
39-
<select ng-model="swatch" class="form-control" ng-options="option.value as option.label for option in boolOptions"></select>
36+
<select ng-model="options.swatch" class="form-control" ng-options="option.value as option.label for option in boolOptions"></select>
4037
</div>
4138

4239
<div class="row">
4340
<label class="control-label">Swatch Only (swatch-only) - whether or not to display the input field</label>
44-
<select ng-model="swatchOnly" class="form-control" ng-options="option.value as option.label for option in boolOptions"></select>
41+
<select ng-model="options.swatchOnly" class="form-control" ng-options="option.value as option.label for option in boolOptions"></select>
4542
</div>
4643

4744
<div class="row">
4845
<label class="control-label">Swatch Position (swatch-pos) - the position of the swatch in the input field - 'left' or 'right'</label>
49-
<select ng-model="swatchPos" class="form-control" ng-options="option.value as option.label for option in swatchPosOptions"></select>
46+
<select ng-model="options.swatchPos" class="form-control" ng-options="option.value as option.label for option in swatchPosOptions"></select>
5047
</div>
5148

5249
<div class="row">
5350
<label class="control-label">Swatch Bootstrap Add On (swatch-bootstrap) - whether or not the swatch should appear as a bootstrap add on</label>
54-
<select ng-model="swatchBootstrap" class="form-control" ng-options="option.value as option.label for option in boolOptions"></select>
51+
<select ng-model="options.swatchBootstrap" class="form-control" ng-options="option.value as option.label for option in boolOptions"></select>
5552
</div>
5653

5754
<div class="row">
5855
<label class="control-label">Position (pos) - the position of the picker control in relation to the input field - 'bottom left', 'bottom right', 'top left', 'top right'</label>
59-
<select ng-model="pos" class="form-control" ng-options="option.value as option.label for option in posOptions"></select>
56+
<select ng-model="options.pos" class="form-control" ng-options="option.value as option.label for option in posOptions"></select>
6057
</div>
6158

6259
<div class="row">
6360
<label class="control-label">Case (case) - The case of hex colors - 'upper', 'lower'</label>
64-
<select ng-model="case" class="form-control" ng-options="option.value as option.label for option in caseOptions"></select>
61+
<select ng-model="options.case" class="form-control" ng-options="option.value as option.label for option in caseOptions"></select>
6562
</div>
6663

6764
<div class="row">
6865
<label class="control-label">Inline (inline) - whether or not to display inline or in a popup - false, true</label>
69-
<select ng-model="inline" class="form-control" ng-options="option.value as option.label for option in boolOptions"></select>
66+
<select ng-model="options.inline" class="form-control" ng-options="option.value as option.label for option in boolOptions"></select>
7067
</div>
7168

7269
<div class="row">
7370
<label class="control-label">Color</label>
7471
<color-picker
7572
ng-model="color"
76-
color-picker-disabled="disabled"
77-
color-picker-format="format"
78-
color-picker-alpha="alpha"
79-
color-picker-swatch="swatch"
80-
color-picker-swatch-pos="swatchPos"
81-
color-picker-swatch-bootstrap="swatchBootstrap"
82-
color-picker-pos="pos"
83-
color-picker-case="case"
84-
color-picker-swatch-only="swatchOnly"
85-
color-picker-inline="inline"
86-
color-picker-on-change="onColorChange($event, color)"
73+
options="options"
74+
api="api"
8775
></color-picker>
8876
</div>
8977

0 commit comments

Comments
 (0)