Skip to content

Commit

Permalink
Fixed getBoundingClientRect
Browse files Browse the repository at this point in the history
  • Loading branch information
Arjan Kempes authored and Arjan Kempes committed Dec 31, 2015
1 parent 27df01e commit b6bafd2
Show file tree
Hide file tree
Showing 4 changed files with 41 additions and 41 deletions.
22 changes: 11 additions & 11 deletions dist/ng-rateit.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -87,21 +87,21 @@ module
});

$scope.removeRating = function () {
if($scope.resetable() && !$scope.readOnly()){
$scope.beforeReset().then(function() {
if ($scope.resetable() && !$scope.readOnly()) {
$scope.beforeReset().then(function () {
$scope.ngModel = $scope.min;
$scope.reset();
});
}
};

$scope.setValue = function () {
if($scope.isHovering && !$scope.readOnly()){
var tmpValue = angular.copy($scope.min+$scope.hoverValue);
$scope.beforeRated(tmpValue).then(function() {
if ($scope.isHovering && !$scope.readOnly()) {
var tmpValue = angular.copy($scope.min + $scope.hoverValue);
$scope.beforeRated(tmpValue).then(function () {
$scope.ngModel = tmpValue;
$scope.isHovering = false;
$timeout(function(){
$timeout(function () {
$scope.rated();
});
});
Expand All @@ -110,14 +110,14 @@ module

$scope.onEnter = function (event) {
$scope.isHovering = true;
$scope.offsetLeft = 0;
var el = event.originalTarget || event.srcElement;
$scope.offsetLeft = el.getBoundingClientRect().left;
$scope.offsetLeft = 0;

var el = event.originalTarget || event.srcElement || event.target;
$scope.offsetLeft = el.getBoundingClientRect().left;
};
$scope.onHover = function (event) {
$scope.isHovering = true;
$scope.hoverValue = Math.round((event.clientX-$scope.offsetLeft)/$scope.starWidth/$scope.step) * $scope.step;
$scope.hoverValue = Math.round((event.clientX - $scope.offsetLeft) / $scope.starWidth / $scope.step) * $scope.step;
$scope.over(event, $scope.hoverValue);
};
$scope.onLeave = function () {
Expand Down
2 changes: 1 addition & 1 deletion dist/ng-rateit.min.js
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

36 changes: 18 additions & 18 deletions example/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,9 @@
<html data-ng-app="exampleApp">
<head class="ng-cloak">

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.js"></script>

<script src="../dist/ng-rateit.js" type="text/javascript"></script>
<script src="../src/ng-rateit.js" type="text/javascript"></script>
<link href="https://rawgit.com/akempes/angular-rateit/master/dist/ng-rateit.css" type="text/css" rel="stylesheet">

<script src="example.js" type="text/javascript"></script>
Expand All @@ -23,40 +23,40 @@

<h3>Basic</h3>
<div>
<ng-rate-it ng-model="model.basic"></ng-rate-it>
<ng-rate-it ng-model="model.basic"></ng-rate-it>
<p>Value: {{model.basic}}</p>
<pre><ng-rate-it ng-model="model.basic"></ng-rate-it></pre>
<pre><ng-rate-it ng-model="model.basic"></ng-rate-it></pre>
</div>

<h3>Min, Max &amp; step</h3>
<div>
<ng-rate-it ng-model="model.minMaxStep" min="5" max="15" step="2"></ng-rate-it>
<ng-rate-it ng-model="model.minMaxStep" min="5" max="15" step="2"></ng-rate-it>
<p>Value: {{model.minMaxStep}}</p>
<pre><ng-rate-it ng-model="model.minMaxStep" min="5" max="15" step="2"></ng-rate-it></pre>
<pre><ng-rate-it ng-model="model.minMaxStep" min="5" max="15" step="2"></ng-rate-it></pre>
</div>

<h3>Read only</h3>
<div>
<ng-rate-it ng-model="model.readonly" read-only="model.readonly_enables"></ng-rate-it>
<ng-rate-it ng-model="model.readonly" read-only="model.readonly_enables"></ng-rate-it>
<div class="checkbox"><label><input type="checkbox" ng-model="model.readonly_enables"> Read only</label></div>
<p>Value: {{model.readonly}}</p>
<pre><ng-rate-it ng-model="model.readonly" read-only="model.readonly_enables"></ng-rate-it>
<pre><ng-rate-it ng-model="model.readonly" read-only="model.readonly_enables"></ng-rate-it>
<label><input type="checkbox" ng-model="model.readonly_enables"> Read only</label></pre>
</div>

<h3>Is pristine</h3>
<div>
<ng-rate-it ng-model="model.pristine" pristine="model.resetable_pristine"></ng-rate-it>
<ng-rate-it ng-model="model.pristine" pristine="model.resetable_pristine"></ng-rate-it>
<p>Value: {{model.pristine}}</p>
<p>Is pristine: {{model.resetable_pristine ? 'Yes' : 'No'}}</p>
<pre><ng-rate-it ng-model="model.pristine" pristine="model.resetable_pristine"></ng-rate-it></pre>
<pre><ng-rate-it ng-model="model.pristine" pristine="model.resetable_pristine"></ng-rate-it></pre>
</div>

<h3>No reset</h3>
<div>
<ng-rate-it ng-model="model.resetable" resetable="false"></ng-rate-it>
<ng-rate-it ng-model="model.resetable" resetable="false"></ng-rate-it>
<p>Value: {{model.resetable}}</p>
<pre><ng-rate-it ng-model="model.resetable" resetable="false"></ng-rate-it></pre>
<pre><ng-rate-it ng-model="model.resetable" resetable="false"></ng-rate-it></pre>
</div>

<h3>Start height/width</h3>
Expand All @@ -68,7 +68,7 @@ <h3>Start height/width</h3>
background-image: url('bigstar.gif');
}
</style>
<ng-rate-it ng-model="model.heightWidth" star-width="32" star-height="32" class="bigstar"></ng-rate-it>
<ng-rate-it ng-model="model.heightWidth" star-width="32" star-height="32" class="bigstar"></ng-rate-it>
<p>Value: {{model.heightWidth}}</p>
<pre>
<style>
Expand All @@ -78,16 +78,16 @@ <h3>Start height/width</h3>
background-image: url('bigstar.gif');
}
</style>
<ng-rate-it ng-model="model.heightWidth" star-width="32" star-height="32" class="bigstar"></ng-rate-it>
<ng-rate-it ng-model="model.heightWidth" star-width="32" star-height="32" class="bigstar"></ng-rate-it>
</pre>
</div>

<h3>Callbacks</h3>
<div>
<ng-rate-it ng-model="model.callbacks" rated="ratedCallback" reset="resetCallback" over="overCallback" before-rated="confirmRating" before-reset="confirmReset"></ng-rate-it>
<ng-rate-it ng-model="model.callbacks" rated="ratedCallback" reset="resetCallback" over="overCallback" before-rated="confirmRating" before-reset="confirmReset"></ng-rate-it>
<p>Note: The 'over' callback will be visible in the console log.</p>
<p>Value: {{model.resetable}}</p>
<pre><ng-rate-it ng-model="model.callbacks" rated="ratedCallback" reset="resetCallback" over="overCallback" before-rated="confirmRating" before-reset="confirmReset"></ng-rate-it></pre>
<pre><ng-rate-it ng-model="model.callbacks" rated="ratedCallback" reset="resetCallback" over="overCallback" before-rated="confirmRating" before-reset="confirmReset"></ng-rate-it></pre>
</div>

<h3>Custom image</h3>
Expand All @@ -99,7 +99,7 @@ <h3>Custom image</h3>
background-image: url('custom.png');
}
</style>
<ng-rate-it ng-model="model.custom" class="custom"></ng-rate-it>
<ng-rate-it ng-model="model.custom" class="custom"></ng-rate-it>
<p>Value: {{model.custom}}</p>
<pre>
<style>
Expand All @@ -109,7 +109,7 @@ <h3>Custom image</h3>
background-image: url('custom.png');
}
</style>
<ng-rate-it ng-model="model.custom" class="custom"></ng-rate-it>
<ng-rate-it ng-model="model.custom" class="custom"></ng-rate-it>
</pre>

</div>
Expand Down
22 changes: 11 additions & 11 deletions src/ng-rateit.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -87,21 +87,21 @@ module
});

$scope.removeRating = function () {
if($scope.resetable() && !$scope.readOnly()){
$scope.beforeReset().then(function() {
if ($scope.resetable() && !$scope.readOnly()) {
$scope.beforeReset().then(function () {
$scope.ngModel = $scope.min;
$scope.reset();
});
}
};

$scope.setValue = function () {
if($scope.isHovering && !$scope.readOnly()){
var tmpValue = angular.copy($scope.min+$scope.hoverValue);
$scope.beforeRated(tmpValue).then(function() {
if ($scope.isHovering && !$scope.readOnly()) {
var tmpValue = angular.copy($scope.min + $scope.hoverValue);
$scope.beforeRated(tmpValue).then(function () {
$scope.ngModel = tmpValue;
$scope.isHovering = false;
$timeout(function(){
$timeout(function () {
$scope.rated();
});
});
Expand All @@ -110,14 +110,14 @@ module

$scope.onEnter = function (event) {
$scope.isHovering = true;
$scope.offsetLeft = 0;
var el = event.originalTarget || event.srcElement;
$scope.offsetLeft = el.getBoundingClientRect().left;
$scope.offsetLeft = 0;

var el = event.originalTarget || event.srcElement || event.target;
$scope.offsetLeft = el.getBoundingClientRect().left;
};
$scope.onHover = function (event) {
$scope.isHovering = true;
$scope.hoverValue = Math.round((event.clientX-$scope.offsetLeft)/$scope.starWidth/$scope.step) * $scope.step;
$scope.hoverValue = Math.round((event.clientX - $scope.offsetLeft) / $scope.starWidth / $scope.step) * $scope.step;
$scope.over(event, $scope.hoverValue);
};
$scope.onLeave = function () {
Expand Down

0 comments on commit b6bafd2

Please sign in to comment.