ti-segmented-control.js 2.2 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950
  1. angular.module('ti-segmented-control', []
  2. ).directive('tiSegmentedControl', function () {
  3. return {
  4. restrict: 'E',
  5. transclude: true,
  6. replace: true,
  7. scope: {
  8. onSelect: "&"
  9. },
  10. template: '<div class=\"buttons\"><div class=\"button-bar bar-light ti-segmented-control\" ng-transclude></div></div>',
  11. controller: function($scope){
  12. this.buttons = [];
  13. this.setSelectedButton = function (title) {
  14. $scope.onSelect({$index: this.buttons.indexOf(title)});
  15. }
  16. var style = window.document.createElement('style');
  17. style.type = 'text/css';
  18. style.innerHTML += '.button.button-outline.ti-segmented-control:first-child { border-top-left-radius: 5px;border-bottom-left-radius: 5px; }';
  19. style.innerHTML += '.button.button-outline.ti-segmented-control { line-height: 23px;max-height: 25px;min-height: 25px; }';
  20. style.innerHTML += '.button.button-outline.ti-segmented-control:last-child { border-top-right-radius: 5px; border-bottom-right-radius: 5px; }';
  21. style.innerHTML += '.button.button-outline.ti-segmented-control.activated { color: #fafafa;box-shadow: none; }';
  22. window.document.getElementsByTagName('head')[0].appendChild(style);
  23. },
  24. link: function (scope) {
  25. }
  26. }
  27. }).directive('tiSegmentedControlButton', function () {
  28. return {
  29. replace: true,
  30. require: '^tiSegmentedControl',
  31. scope: {
  32. title: '='
  33. },
  34. template: '<a class=\"button button-outline ti-segmented-control\">{{title}}</a>',
  35. link: function(scope, element, attr, segmentedControlCtrl){
  36. segmentedControlCtrl.buttons.push(scope.title);
  37. if(attr.selected != undefined) element.addClass('active');
  38. element.bind('click', function(){
  39. segmentedControlCtrl.setSelectedButton(scope.title);
  40. var buttons = angular.element(angular.element(element.parent()[0]).children());
  41. for(var i = 0; i < buttons.length; i++){
  42. angular.element(buttons[i]).removeClass('active');
  43. }
  44. element.addClass('active');
  45. });
  46. }
  47. }
  48. });