Skip to content

Commit 004b66e

Browse files
ruhleyruhley
committed
Bug #82 Slider positioning if setting value in a timeout
1 parent 8ed8673 commit 004b66e

File tree

3 files changed

+25
-97
lines changed

3 files changed

+25
-97
lines changed

‎examples/07-testing-preset-value-hex-Bug-#81.html‎

Lines changed: 4 additions & 77 deletions
Original file line numberDiff line numberDiff line change
@@ -19,90 +19,17 @@
1919
<h1>AngularJS Color Picker</h1>
2020
<p>An AngularJS directive for a color picker. No requirement on jQuery.</p>
2121
<form class="col-sm-12">
22-
<div class="row">
23-
<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>
25-
</div>
26-
27-
<div class="row">
28-
<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>
30-
</div>
31-
32-
<div class="row">
33-
<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>
35-
</div>
36-
37-
<div class="row">
38-
<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>
40-
</div>
41-
42-
<div class="row">
43-
<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>
45-
</div>
46-
47-
<div class="row">
48-
<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>
50-
</div>
51-
52-
<div class="row">
53-
<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>
55-
</div>
56-
57-
<div class="row">
58-
<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>
60-
</div>
61-
62-
<div class="row">
63-
<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>
65-
</div>
66-
67-
<div class="row">
68-
<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>
70-
</div>
7122

7223
<div class="row">
7324
<label class="control-label">Color</label>
7425
<color-picker
7526
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)"
27+
color-picker-format="'hex'"
28+
color-picker-swatch-only="false"
29+
color-picker-alpha="false"
30+
color-picker-swatch-bootstrap="false"
8731
></color-picker>
8832
</div>
89-
90-
<div class="row">
91-
Two Way Binding
92-
<!-- <color-picker ng-model="color"></color-picker> -->
93-
{{color}}
94-
</div>
95-
96-
<div class="row">
97-
<h2>No Options</h2>
98-
<label class="control-label">Color</label>
99-
<color-picker ng-model="color2"></color-picker>
100-
</div>
101-
102-
<div class="row">
103-
Two Way Binding
104-
{{color2}}
105-
</div>
10633
</form>
10734
</div>
10835
</body>

‎examples/app-preset-hex.js‎

Lines changed: 4 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,9 @@
11
angular
22
.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-
10-
$scope.color = '#294EBC';
11-
$scope.format= 'hex';
3+
.controller('AppCtrl', function($scope, $timeout) {
4+
$timeout(function() {
5+
$scope.color = '#0000aa';
6+
});
127

138
$scope.$watch('color', function(newValue, oldValue) {
149
// console.log(newValue, oldValue);

‎lib/scripts/directive.js‎

Lines changed: 17 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -187,9 +187,11 @@
187187
$scope.opacityMouse = false;
188188
$scope.colorMouse = false;
189189

190-
// force the grid selection circle to redraw and fix its position
190+
// force the sliders to re-caculate their position
191+
$scope.hueUpdate();
191192
$scope.saturationUpdate();
192193
$scope.lightnessUpdate();
194+
$scope.opacityUpdate();
193195
};
194196

195197
$scope.hide = function () {
@@ -365,22 +367,26 @@
365367
});
366368

367369
$scope.huePosUpdate = function() {
368-
var container = element[0].querySelector('.color-picker-hue');
369-
var el = angular.element(element[0].querySelector('.color-picker-hue .color-picker-slider'));
370-
var bounding = container.getBoundingClientRect();
370+
$timeout(function() {
371+
var container = element[0].querySelector('.color-picker-hue');
372+
var el = angular.element(element[0].querySelector('.color-picker-hue .color-picker-slider'));
373+
var bounding = container.getBoundingClientRect();
371374

372-
el.css({
373-
'top': (bounding.height * $scope.huePos / 100) + 'px',
375+
el.css({
376+
'top': (bounding.height * $scope.huePos / 100) + 'px',
377+
});
374378
});
375379
};
376380

377381
$scope.opacityPosUpdate = function() {
378-
var container = element[0].querySelector('.color-picker-opacity');
379-
var el = angular.element(element[0].querySelector('.color-picker-opacity .color-picker-slider'));
380-
var bounding = container.getBoundingClientRect();
382+
$timeout(function() {
383+
var container = element[0].querySelector('.color-picker-opacity');
384+
var el = angular.element(element[0].querySelector('.color-picker-opacity .color-picker-slider'));
385+
var bounding = container.getBoundingClientRect();
381386

382-
el.css({
383-
'top': (bounding.height * $scope.opacityPos / 100) + 'px',
387+
el.css({
388+
'top': (bounding.height * $scope.opacityPos / 100) + 'px',
389+
});
384390
});
385391
};
386392

0 commit comments

Comments
 (0)