Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Rating refactoring #47

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open

Rating refactoring #47

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
db00b02
checkbox refactoring
dszczyt Aug 1, 2015
80abe93
add tests on rating
dszczyt Aug 1, 2015
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion bower.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,7 @@
"semantic": "latest"
},
"devDependencies": {
"angular-mocks" : "latest"
"angular-mocks": "latest",
"ng-describe": "~1.1.0"
}
}
154 changes: 53 additions & 101 deletions dist/angular-semantic-ui.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -586,111 +586,63 @@ function sidebarLink() {
'use strict';

angular.module('angularify.semantic.rating', [])

.directive('rating', function(){
return {
restrict: "E",
replace: true,
transclude: true,
scope: {
id: "@",
size: "@",
type: "@",
model : '=ngModel'
},
template: '<div class={{div_class}}>' +
'<i id="{{id + 1}}" class="{{icon_class}}" ng-click="click(1)" ng-mouseenter="mouse_enter(1)" ng-mouseleave="mouse_leave(1)"></i>' +
'<i id="{{id + 2}}" class="{{icon_class}}" ng-click="click(2)" ng-mouseenter="mouse_enter(2)" ng-mouseleave="mouse_leave(2)"></i>' +
'<i id="{{id + 3}}" class="{{icon_class}}" ng-click="click(3)" ng-mouseenter="mouse_enter(3)" ng-mouseleave="mouse_leave(3)"></i>' +
'<i id="{{id + 4}}" class="{{icon_class}}" ng-click="click(4)" ng-mouseenter="mouse_enter(4)" ng-mouseleave="mouse_leave(4)"></i>' +
'<i id="{{id + 5}}" class="{{icon_class}}" ng-click="click(5)" ng-mouseenter="mouse_enter(5)" ng-mouseleave="mouse_leave(5)"></i>' +
'</div>',
link: function(scope, element, attrs){
if (scope.model == undefined)
scope.model = 0;

if (scope.model < 1 && scope.model > 5)
scope.model = 0;

// is rating already checked
var checked = false;

//
// Set up icon type
//
if (scope.type == undefined)
scope.type = 'star';

//
// Set up size
//
if (scope.size == undefined)
scope.div_class = 'ui rating ' + scope.type;
else if (scope.size == 'small')
scope.div_class = 'ui small ' + scope.type + ' rating';
else if (scope.size == 'large')
scope.div_class = 'ui large ' + scope.type + ' rating';
else if (scope.size == 'huge')
scope.div_class = 'ui huge ' + scope.type + ' rating';

//
// set up icon class
//
scope.icon_class = 'icon';

//
// Handle mouse enter
//
scope.mouse_enter = function(icon_index){
if (checked == true)
return;

var i = 1;
for (i; i <= icon_index; i++){
document.getElementById(scope.id + i).className = 'icon active';
}

return;
};

//
// Handle mouse leave
//
scope.mouse_leave = function(icon_index){
if (checked == true)
return;

var i = 1;
for (i; i <= 5; i++){
document.getElementById(scope.id + i).className = 'icon';
}

return;
};

//
// Handle click
//
scope.click = function(icon_index, mode){
var i = 1;
for (i; i <= icon_index; i++){
document.getElementById(scope.id + i).className = 'icon active';
}

if (icon_index !== 0)
checked = true;
return {
restrict: "E",
replace: true,
scope: {
ngModel : '=',
max: '=',
onRate: '&?',
interactive: '=',
clearable: '='
},
controller: function() {
var vm = this;

return;
};
if(!vm.max) vm.max = 5;
if(!+vm.ngModel) vm.ngModel = 0;
if(+vm.ngModel > vm.max ) vm.ngModel = +vm.max;
if(vm.interactive == undefined) vm.interactive = true;
if(vm.max == 1 && vm.clearable == undefined) vm.clearable = true;

//
// Watch for model
//
scope.$watch('model', function(val){
scope.click(val);
});
vm.setRate = function(rate) {
if (vm.clearable && rate == +vm.ngModel) {
vm.ngModel = 0;
} else {
vm.ngModel = rate;
if (angular.isFunction(vm.onRate)) vm.onRate({ rate: rate });
}
};
};
},
controllerAs: 'vm',
bindToController: true,
require: 'ngModel',
template: '<div class="ui rating" ng-switch="vm.interactive">' +
'<i ng-switch-when="true" ' +
'class="icon" ' +
'ng-class="{ active: vm.current >= rate }" ' +
'ng-click="vm.setRate(rate)" ' +
'ng-mouseenter="vm.current = rate" ' +
'ng-mouseleave="vm.current = +vm.ngModel" ' +
'ng-repeat="rate in vm.range track by $index"' +
'></i>' +
'<i ng-switch-when="false" ' +
'class="icon" ' +
'ng-class="{ active: vm.current >= rate }" ' +
'ng-repeat="rate in vm.range track by $index"' +
'></i>' +
'</div>',
link: function($scope, iElement, iAttrs) {
$scope.$watch('vm.max', function (value) {
$scope.vm.range = Array.apply(null, Array(+value)).map(function (_, i) {return i+1;});
});

$scope.$watch('vm.ngModel', function(value) {
$scope.vm.current = value;
});
}
};
});

/* globals _:false */
Expand Down
2 changes: 1 addition & 1 deletion dist/angular-semantic-ui.min.js
View file
Open in desktop

Large diffs are not rendered by default.

1 change: 1 addition & 0 deletions karma.conf.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ files = [
'bower_components/jquery/dist/jquery.min.js',
'bower_components/angular/angular.min.js',
'bower_components/angular-mocks/angular-mocks.js',
'bower_components/ng-describe/dist/ng-describe.js',
'src/**/*.js',
];

Expand Down
15 changes: 11 additions & 4 deletions src/rating/docs/controllers.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,12 @@
var ratingApp = angular.module('ratingApp', ['angularify.semantic.rating']);
angular.module('ratingApp', ['angularify.semantic.rating'])
.controller('RootCtrl', function($scope) {
$scope.rate = 3;
$scope.rated = function(rate) {
alert('Rate is ' + rate);
};

$scope.clearable_rate = 2;

$scope.fixed_rate = 4;
});

function RootCtrl ($scope) {
// $scope.rating = 1;
}
11 changes: 8 additions & 3 deletions src/rating/docs/demo.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,13 +3,18 @@
<head>
<meta charset="utf-8" />
<title>Semantic UI + Angular.JS</title>
<link href="../../../bower_components/semantic/build/packaged/css/semantic.min.css" rel="stylesheet" type="text/css" />
<link href="../../../bower_components/semantic/dist/semantic.min.css" rel="stylesheet" type="text/css" />
</head>
<body ng-controller="RootCtrl">
<rating id="my-rating" size="large" type="heart" ng-model="rating"></rating>
<rating class="massive heart" ng-model="rate" max="6" on-rate="rated(rate);"></rating>
<p>Rate is {{ rate }}.</p>
<rating class="massive heart" ng-model="clearable_rate" clearable="true"></rating>
<p>Rate is {{ clearable_rate }}.</p>
<rating class="massive heart" ng-model="fixed_rate" interactive="false"></rating>
<p>Rate is {{ fixed_rate }}.</p>
<script src="../../../bower_components/angular/angular.min.js" type="text/javascript"></script>
<script src="../../angularify.semantic.js" type="text/javascript"></script>
<script src="../rating.js" type="text/javascript"></script>
<script src="controllers.js" type="text/javascript"></script>
</body>
</html>
</html>
158 changes: 55 additions & 103 deletions src/rating/rating.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,109 +1,61 @@
'use strict';

angular.module('angularify.semantic.rating', [])

.directive('rating', function(){
return {
restrict: "E",
replace: true,
transclude: true,
scope: {
id: "@",
size: "@",
type: "@",
model : '=ngModel'
},
template: '<div class={{div_class}}>' +
'<i id="{{id + 1}}" class="{{icon_class}}" ng-click="click(1)" ng-mouseenter="mouse_enter(1)" ng-mouseleave="mouse_leave(1)"></i>' +
'<i id="{{id + 2}}" class="{{icon_class}}" ng-click="click(2)" ng-mouseenter="mouse_enter(2)" ng-mouseleave="mouse_leave(2)"></i>' +
'<i id="{{id + 3}}" class="{{icon_class}}" ng-click="click(3)" ng-mouseenter="mouse_enter(3)" ng-mouseleave="mouse_leave(3)"></i>' +
'<i id="{{id + 4}}" class="{{icon_class}}" ng-click="click(4)" ng-mouseenter="mouse_enter(4)" ng-mouseleave="mouse_leave(4)"></i>' +
'<i id="{{id + 5}}" class="{{icon_class}}" ng-click="click(5)" ng-mouseenter="mouse_enter(5)" ng-mouseleave="mouse_leave(5)"></i>' +
'</div>',
link: function(scope, element, attrs){
if (scope.model == undefined)
scope.model = 0;

if (scope.model < 1 && scope.model > 5)
scope.model = 0;

// is rating already checked
var checked = false;

//
// Set up icon type
//
if (scope.type == undefined)
scope.type = 'star';

//
// Set up size
//
if (scope.size == undefined)
scope.div_class = 'ui rating ' + scope.type;
else if (scope.size == 'small')
scope.div_class = 'ui small ' + scope.type + ' rating';
else if (scope.size == 'large')
scope.div_class = 'ui large ' + scope.type + ' rating';
else if (scope.size == 'huge')
scope.div_class = 'ui huge ' + scope.type + ' rating';

//
// set up icon class
//
scope.icon_class = 'icon';

//
// Handle mouse enter
//
scope.mouse_enter = function(icon_index){
if (checked == true)
return;

var i = 1;
for (i; i <= icon_index; i++){
document.getElementById(scope.id + i).className = 'icon active';
}

return;
};

//
// Handle mouse leave
//
scope.mouse_leave = function(icon_index){
if (checked == true)
return;

var i = 1;
for (i; i <= 5; i++){
document.getElementById(scope.id + i).className = 'icon';
}

return;
};

//
// Handle click
//
scope.click = function(icon_index, mode){
var i = 1;
for (i; i <= icon_index; i++){
document.getElementById(scope.id + i).className = 'icon active';
}

if (icon_index !== 0)
checked = true;

return;
};

//
// Watch for model
//
scope.$watch('model', function(val){
scope.click(val);
});
return {
restrict: "E",
replace: true,
scope: {
ngModel : '=',
max: '=',
onRate: '&?',
interactive: '=',
clearable: '='
},
controller: function() {
var vm = this;

if(!vm.max) vm.max = 5;
if(!+vm.ngModel) vm.ngModel = 0;
if(+vm.ngModel > vm.max ) vm.ngModel = +vm.max;
if(vm.interactive == undefined) vm.interactive = true;
if(vm.max == 1 && vm.clearable == undefined) vm.clearable = true;

vm.setRate = function(rate) {
if (vm.clearable && rate == +vm.ngModel) {
vm.ngModel = 0;
} else {
vm.ngModel = rate;
if (angular.isFunction(vm.onRate)) vm.onRate({ rate: rate });
}
};
};
},
controllerAs: 'vm',
bindToController: true,
require: 'ngModel',
template: '<div class="ui rating" ng-switch="vm.interactive">' +
'<i ng-switch-when="true" ' +
'class="icon" ' +
'ng-class="{ active: vm.current >= rate }" ' +
'ng-click="vm.setRate(rate)" ' +
'ng-mouseenter="vm.current = rate" ' +
'ng-mouseleave="vm.current = +vm.ngModel" ' +
'ng-repeat="rate in vm.range track by $index"' +
'></i>' +
'<i ng-switch-when="false" ' +
'class="icon" ' +
'ng-class="{ active: vm.current >= rate }" ' +
'ng-repeat="rate in vm.range track by $index"' +
'></i>' +
'</div>',
link: function($scope, iElement, iAttrs) {
$scope.$watch('vm.max', function (value) {
$scope.vm.range = Array.apply(null, Array(+value)).map(function (_, i) {return i+1;});
});

$scope.$watch('vm.ngModel', function(value) {
$scope.vm.current = value;
});
}
};
});
Loading