Skip to content

Commit e17bf02

Browse files
ruhleyruhley
committed
Fixing #18 - Alpha value not working on initialise value
1 parent 2dd0ba5 commit e17bf02

File tree

3 files changed

+112
-0
lines changed

3 files changed

+112
-0
lines changed

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

Lines changed: 98 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,98 @@
1+
<html>
2+
<head>
3+
<title>Example 3 - Testing Preset Value</title>
4+
5+
<link rel="stylesheet" href="../bower_components/bootstrap/dist/css/bootstrap.min.css" />
6+
7+
<link rel="stylesheet/less" href="../lib/styles/angularjs-color-picker.less" />
8+
<script src="https://cdnjs.cloudflare.com/ajax/libs/less.js/2.4.0/less.min.js"></script>
9+
10+
<script src="../bower_components/angular/angular.js"></script>
11+
<script src="../bower_components/tinycolor/tinycolor.js"></script>
12+
13+
<script src="../lib/scripts/module.js"></script>
14+
<script src="../lib/scripts/directive.js"></script>
15+
<script src="../lib/scripts/template.js"></script>
16+
17+
<script src="app-preset.js"></script>
18+
</head>
19+
<body ng-app="app" ng-controller="AppCtrl">
20+
<div class="col-sm-12">
21+
<h1>AngularJS Color Picker</h1>
22+
<p>An AngularJS directive for a color picker. No requirement on jQuery.</p>
23+
<form class="col-sm-12">
24+
<div class="row">
25+
<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>
27+
</div>
28+
29+
<div class="row">
30+
<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>
32+
</div>
33+
34+
<div class="row">
35+
<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>
37+
</div>
38+
39+
<div class="row">
40+
<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>
42+
</div>
43+
44+
<div class="row">
45+
<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>
47+
</div>
48+
49+
<div class="row">
50+
<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>
52+
</div>
53+
54+
<div class="row">
55+
<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>
57+
</div>
58+
59+
<div class="row">
60+
<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>
62+
</div>
63+
64+
<div class="row">
65+
<label class="control-label">Color</label>
66+
<color-picker
67+
ng-model="color"
68+
color-picker-format="format"
69+
color-picker-alpha="alpha"
70+
color-picker-swatch="swatch"
71+
color-picker-swatch-pos="swatchPos"
72+
color-picker-swatch-bootstrap="swatchBootstrap"
73+
color-picker-pos="pos"
74+
color-picker-case="case"
75+
color-picker-swatch-only="swatchOnly">
76+
</color-picker>
77+
</div>
78+
79+
<div class="row">
80+
Two Way Binding
81+
<!-- <color-picker ng-model="color"></color-picker> -->
82+
{{color}}
83+
</div>
84+
85+
<div class="row">
86+
<h2>No Options</h2>
87+
<label class="control-label">Color</label>
88+
<color-picker ng-model="color2"></color-picker>
89+
</div>
90+
91+
<div class="row">
92+
Two Way Binding
93+
{{color2}}
94+
</div>
95+
</form>
96+
</div>
97+
</body>
98+
</html>

‎examples/app-preset.js‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
angular
2+
.module('app', ['color.picker'])
3+
.controller('AppCtrl', function($scope) {
4+
$scope.formatOptions = [{label: 'HSL', value: 'hsl'}, {label: 'HSV', value: 'hsv'}, {label: 'RGB', value: 'rgb'}, {label: 'HEX', value: 'hex'}, {label: 'HEX8', value: 'hex8'}];
5+
$scope.boolOptions = [{label: 'Yes', value: true}, {label: 'No', value: false}];
6+
$scope.swatchPosOptions = [{label: 'Left', value: 'left'}, {label: 'Right', value: 'right'}];
7+
$scope.posOptions = [{label: 'Bottom Left', value: 'bottom left'}, {label: 'Top Left', value: 'top left'}, {label: 'Bottom Right', value: 'bottom right'}, {label: 'Top Right', value: 'top right'}];
8+
$scope.caseOptions = [{label: 'Upper Case', value: 'upper'}, {label: 'Lower Case', value: 'lower'}];
9+
$scope.color = 'rgba(50, 75, 150, 0.4)';
10+
$scope.$watch('color', function(newValue, oldValue) {
11+
console.log(newValue, oldValue);
12+
});
13+
});

‎lib/scripts/directive.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,7 @@
3131
$scope.hue = hsl.h;
3232
$scope.saturation = hsl.s * 100;
3333
$scope.lightness = hsl.v * 100;
34+
$scope.opacity = hsl.a * 100;
3435
}
3536
}
3637
$scope.initConfig();

0 commit comments

Comments
 (0)