progressbar.js
7.34 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
/**
* Created by gujunsheng on 15/6/8.
*/
"use strict";
angular.module("xn.directive.progressbar", [])
.directive("dragProgress", function() {
return {
restrict: "AE",
scope: {
data: "=ngModel",
isProportion: "@",
isDrag: "@",
method: "&"
},
link: function($scope, element, attrs, ngModel, fn) {
var time = new Date().getTime();
$scope.isInside = false;
$scope.isMouseDown = false;
$scope.rollerId = "roller_"+time;
$scope.itemId = "item_"+time;
$scope.rollerCoordinate = [];
$scope.itemOffsetLeft = 0;
$scope.pointerCoordinate = null;
$scope.rollerWidth = 0;
$scope.itemWidth = 0;
$scope.marginLeft = 0;
$scope.distant = 0;
$scope.proportion = "0%";
$scope.getCoordinate = function(e) {
$scope.isMouseDown = true;
$scope.rollerCoordinate[0] = document.getElementById($scope.rollerId).offsetLeft;
if(!$scope.rollerWidth) {
$scope.rollerWidth = document.getElementById($scope.rollerId).offsetWidth;
}
if(!$scope.itemWidth) {
$scope.itemWidth = document.getElementById($scope.itemId).offsetWidth;
}
$scope.rollerCoordinate[1] = $scope.rollerCoordinate[0] + $scope.rollerWidth;
$scope.itemOffsetLeft = document.getElementById($scope.itemId).offsetLeft;
$scope.pointerCoordinate = getMousePoint(e);
$scope.distant = $scope.pointerCoordinate.x-$scope.itemOffsetLeft;
};
$scope.$watch("data", function(val) {
if(val) {
if(!$scope.rollerWidth) {
$scope.rollerWidth = document.getElementById($scope.rollerId).offsetWidth;
}
if(!$scope.itemWidth) {
$scope.itemWidth = document.getElementById($scope.itemId).offsetWidth;
}
$scope.marginLeft = ($scope.rollerWidth-$scope.itemWidth)*val;
$scope.changeBarColor(val);
$scope.proportion = val.toPercent(0);
} else {
$scope.changeBarColor(0);
}
});
angular.element(document).on("mousemove", function(e) {
if($scope.isInside && $scope.isMouseDown) {
var pointerCoordinate = getMousePoint(e);
if(pointerCoordinate.x<$scope.pointerCoordinate.x) {
if(0<$scope.marginLeft) {
var len = 0;
len = pointerCoordinate.x-$scope.distant;
if(0>len) {
len = 0;
}
$scope.$apply(function() {
$scope.marginLeft = len;
$scope.data = $scope.marginLeft/($scope.rollerWidth-$scope.itemWidth);
$scope.changeBarColor($scope.data);
$scope.proportion = $scope.data.toPercent(0);
});
}
} else {
if(0<$scope.rollerWidth-$scope.itemWidth) {
var len = 0;
len = pointerCoordinate.x-$scope.distant;
if(len>$scope.rollerWidth-$scope.itemWidth) {
len = $scope.rollerWidth-$scope.itemWidth;
}
$scope.$apply(function() {
$scope.marginLeft = len;
$scope.data = $scope.marginLeft/($scope.rollerWidth-$scope.itemWidth);
$scope.changeBarColor($scope.data);
$scope.proportion = $scope.data.toPercent(0);
});
}
}
}
});
$scope.changeBarColor = function(d) {
if(0<=d && d<=0.1) {
$scope.backgroundColor = "water_1";
$scope.itemBackgroundColor = "item_1";
}
if(0.1<d && d<=0.2) {
$scope.backgroundColor = "water_2";
$scope.itemBackgroundColor = "item_2";
}
if(0.2<d && d<=0.3) {
$scope.backgroundColor = "water_3";
$scope.itemBackgroundColor = "item_3";
}
if(0.3<d && d<=0.4) {
$scope.backgroundColor = "water_4";
$scope.itemBackgroundColor = "item_4";
}
if(0.4<d && d<=0.5) {
$scope.backgroundColor = "water_5";
$scope.itemBackgroundColor = "item_5";
}
if(0.5<d && d<=0.6) {
$scope.backgroundColor = "water_6";
$scope.itemBackgroundColor = "item_6";
}
if(0.6<d && d<=0.7) {
$scope.backgroundColor = "water_7";
$scope.itemBackgroundColor = "item_7";
}
if(0.7<d && d<=0.8) {
$scope.backgroundColor = "water_8";
$scope.itemBackgroundColor = "item_8";
}
if(0.8<d && d<=0.9) {
$scope.backgroundColor = "water_9";
$scope.itemBackgroundColor = "item_9";
}
if(0.9<d && d<=1) {
$scope.backgroundColor = "water_10";
$scope.itemBackgroundColor = "item_10";
}
};
$scope.$watch("isMouseDown", function(val) {
if(false==val) {
$scope.method();
}
});
},
template: "<div class='dragProgress_wrap'>"
+" <div class='bar_wrap' ng-mouseover='isInside=true' ng-mouseout='isInside=false;isMouseDown=false'>"
+" <div class='roller' id='{{rollerId}}'>"
+" <div class='{{backgroundColor}}' style='width:{{proportion}}'></div>"
+" </div>"
+" <div class='item {{itemBackgroundColor}}' ng-show='isDrag' id='{{itemId}}' style='left:{{marginLeft+\"px\"}}' ng-mouseup='isMouseDown=false' ng-mousedown='getCoordinate($event)'></div>"
+" </div>"
+" <span class='proportion' ng-show='isProportion'>{{proportion}}</span>"
+"</div>"
};
});