Skip to content

Adding touch support for mobile devices #17

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

Closed
wants to merge 1 commit into from
Closed

Adding touch support for mobile devices #17

Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
172 changes: 102 additions & 70 deletions angular-bootstrap-checkbox.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,76 +1,108 @@
"use strict";
(function($jquery){

angular.module("ui.checkbox", []).directive("checkbox", function() {
return {
scope: {},
require: "ngModel",
restrict: "E",
replace: "true",
template: "<button type=\"button\" ng-style=\"stylebtn\" class=\"btn btn-default\" ng-class=\"{'btn-xs': size==='default', 'btn-sm': size==='large', 'btn-lg': size==='largest', 'checked': checked===true}\">" +
"<span ng-style=\"styleicon\" class=\"glyphicon\" ng-class=\"{'glyphicon-ok': checked===true}\"></span>" +
"</button>",
link: function(scope, elem, attrs, modelCtrl) {
scope.size = "default";
// Default Button Styling
scope.stylebtn = {};
// Default Checkmark Styling
scope.styleicon = {"width": "10px", "left": "-1px"};
// If size is undefined, Checkbox has normal size (Bootstrap 'xs')
if(attrs.large !== undefined) {
scope.size = "large";
scope.stylebtn = {"padding-top": "2px", "padding-bottom": "2px", "height": "30px"};
scope.styleicon = {"width": "8px", "left": "-5px", "font-size": "17px"};
}
if(attrs.larger !== undefined) {
scope.size = "larger";
scope.stylebtn = {"padding-top": "2px", "padding-bottom": "2px", "height": "34px"};
scope.styleicon = {"width": "8px", "left": "-8px", "font-size": "22px"};
}
if(attrs.largest !== undefined) {
scope.size = "largest";
scope.stylebtn = {"padding-top": "2px", "padding-bottom": "2px", "height": "45px"};
scope.styleicon = {"width": "11px", "left": "-11px", "font-size": "30px"};
}
"use strict";

var trueValue = true;
var falseValue = false;
// Source: stackoverflow.com/questions/8503453
$jquery.event.special.checkboxTouch = {
setup: function() {
var isIOS = ((/iphone|ipad/gi).test(navigator.appVersion));
var checkboxTouch = isIOS ? "touchstart" : "mousedown";
$jquery(this).bind(checkboxTouch + ".myDownEvent", function(event) {
event.type = "checkboxTouch";
($jquery.event.dispatch||$jquery.event.handle).call(this, event);
});
},
teardown: function() {
$jquery(this).unbind(".checkboxTouch");
}
};

// If defined set true value
if(attrs.ngTrueValue !== undefined) {
trueValue = attrs.ngTrueValue;
}
// If defined set false value
if(attrs.ngFalseValue !== undefined) {
falseValue = attrs.ngFalseValue;
}

// Check if name attribute is set and if so add it to the DOM element
if(scope.name !== undefined) {
elem.name = scope.name;
}
angular.module("ui.checkbox", []).directive("checkbox", function() {
return {
scope: {},
require: "ngModel",
restrict: "E",
replace: "true",
template: "<button type=\"button\" ng-style=\"stylebtn\" class=\"btn btn-default\" ng-class=\"{'btn-xs': size==='default', 'btn-sm': size==='large', 'btn-lg': size==='largest', 'checked': checked===true}\">" +
"<span ng-style=\"styleicon\" class=\"glyphicon\" ng-class=\"{'glyphicon-ok': checked===true}\"></span>" +
"</button>",
link: function(scope, elem, attrs, modelCtrl) {
scope.size = "default";
// Default Button Styling
scope.stylebtn = {};
// Default Checkmark Styling
scope.styleicon = {"width": "10px", "left": "-1px"};
// If size is undefined, Checkbox has normal size (Bootstrap 'xs')
if(attrs.large !== undefined) {
scope.size = "large";
scope.stylebtn = {"padding-top": "2px", "padding-bottom": "2px", "height": "30px"};
scope.styleicon = {"width": "8px", "left": "-5px", "font-size": "17px"};
}
if(attrs.larger !== undefined) {
scope.size = "larger";
scope.stylebtn = {"padding-top": "2px", "padding-bottom": "2px", "height": "34px"};
scope.styleicon = {"width": "8px", "left": "-8px", "font-size": "22px"};
}
if(attrs.largest !== undefined) {
scope.size = "largest";
scope.stylebtn = {"padding-top": "2px", "padding-bottom": "2px", "height": "45px"};
scope.styleicon = {"width": "11px", "left": "-11px", "font-size": "30px"};
}

// Update element when model changes
scope.$watch(function() {
if(modelCtrl.$modelValue === trueValue || modelCtrl.$modelValue === true) {
modelCtrl.$setViewValue(trueValue);
} else {
modelCtrl.$setViewValue(falseValue);
}
return modelCtrl.$modelValue;
}, function(newVal, oldVal) {
scope.checked = modelCtrl.$modelValue === trueValue;
}, true);
var trueValue = true;
var falseValue = false;

// On click swap value and trigger onChange function
elem.bind("click", function() {
scope.$apply(function() {
if(modelCtrl.$modelValue === falseValue) {
modelCtrl.$setViewValue(trueValue);
} else {
modelCtrl.$setViewValue(falseValue);
}
});
});
}
};
});
// If defined set true value
if(attrs.ngTrueValue !== undefined) {
trueValue = attrs.ngTrueValue;
}
// If defined set false value
if(attrs.ngFalseValue !== undefined) {
falseValue = attrs.ngFalseValue;
}

// Check if name attribute is set and if so add it to the DOM element
if(scope.name !== undefined) {
elem.name = scope.name;
}

// Update element when model changes
scope.$watch(function() {
if(modelCtrl.$modelValue === trueValue || modelCtrl.$modelValue === true) {
modelCtrl.$setViewValue(trueValue);
} else {
modelCtrl.$setViewValue(falseValue);
}
return modelCtrl.$modelValue;
}, function(newVal, oldVal) {
scope.checked = modelCtrl.$modelValue === trueValue;
}, true);

// Source: stackoverflow.com/questions/7018919
var flag = false;

// On click swap value and trigger onChange function
$jquery(elem).bind("checkboxTouch", function() {
if (!flag) {
flag = true;

setTimeout(function(){
flag = false;

scope.$apply(function() {
if(modelCtrl.$modelValue === falseValue) {
modelCtrl.$setViewValue(trueValue);
} else {
modelCtrl.$setViewValue(falseValue);
}
});

}, 50);
}
});
}
};
});

})(jQuery);