diff options
| author | Misko Hevery | 2012-04-28 22:25:05 -0700 | 
|---|---|---|
| committer | Misko Hevery | 2012-05-04 15:50:37 -0700 | 
| commit | c4fa48725039c30349af725583f147e7f4fb69c7 (patch) | |
| tree | 2cc0f972595c46f8384f909961b6173c2237d69d /src/bootstrap/bootstrap.js | |
| parent | cef3535c16d5b7825f797adc6705d61dad759796 (diff) | |
| download | angular.js-c4fa48725039c30349af725583f147e7f4fb69c7.tar.bz2 | |
feat(bootstrap): support code prettify and dropdown from bootstrap
Diffstat (limited to 'src/bootstrap/bootstrap.js')
| -rw-r--r-- | src/bootstrap/bootstrap.js | 158 | 
1 files changed, 158 insertions, 0 deletions
diff --git a/src/bootstrap/bootstrap.js b/src/bootstrap/bootstrap.js new file mode 100644 index 00000000..831998fc --- /dev/null +++ b/src/bootstrap/bootstrap.js @@ -0,0 +1,158 @@ +'use strict'; + +var directive = {}; + +directive.dropdownToggle = +          ['$document', '$location', '$window', +  function ($document,   $location,   $window) { +    var openElement = null, close; +    return { +      restrict: 'C', +      link: function(scope, element, attrs) { +        scope.$watch(function(){return $location.path();}, function() { +          close && close(); +        }); + +        element.parent().bind('click', function(event) { +          close && close(); +        }); + +        element.bind('click', function(event) { +          event.preventDefault(); +          event.stopImmediatePropagation(); + +          var iWasOpen = false; + +          if (openElement) { +            iWasOpen = openElement === element; +            close(); +          } + +          if (!iWasOpen){ +            element.parent().addClass('open'); +            openElement = element; + +            close = function (event) { +              event && event.preventDefault(); +              event && event.stopImmediatePropagation(); +              $document.unbind('click', close); +              element.parent().removeClass('open'); +              close = null; +              openElement = null; +            } + +            $document.bind('click', close); +          } +        }); +      } +    }; +  }]; + + +directive.tabbable = function() { +  return { +    restrict: 'C', +    compile: function(element) { +      var navTabs = angular.element('<ul class="nav nav-tabs"></ul>'), +          tabContent = angular.element('<div class="tab-content"></div>'); + +      tabContent.append(element.contents()); +      element.append(navTabs).append(tabContent); +    }, +    controller: ['$scope', '$element', function($scope, $element) { +      var navTabs = $element.contents().eq(0), +          ngModel = $element.controller('ngModel') || {}, +          tabs = [], +          selectedTab; + +      ngModel.$render = function() { +        var $viewValue = this.$viewValue; + +        if (selectedTab ? (selectedTab.value != $viewValue) : $viewValue) { +          if(selectedTab) { +            selectedTab.paneElement.removeClass('active'); +            selectedTab.tabElement.removeClass('active'); +            selectedTab = null; +          } +          if($viewValue) { +            for(var i = 0, ii = tabs.length; i < ii; i++) { +              if ($viewValue == tabs[i].value) { +                selectedTab = tabs[i]; +                break; +              } +            } +            if (selectedTab) { +              selectedTab.paneElement.addClass('active'); +              selectedTab.tabElement.addClass('active'); +            } +          } + +        } +      }; + +      this.addPane = function(element, attr) { +        var li = angular.element('<li><a href></a></li>'), +            a = li.find('a'), +            tab = { +              paneElement: element, +              paneAttrs: attr, +              tabElement: li +            }; + +        tabs.push(tab); + +        attr.$observe('value', update)(); +        attr.$observe('title', function(){ update(); a.text(tab.title); })(); + +        function update() { +          tab.title = attr.title; +          tab.value = attr.value || attr.title; +          if (!ngModel.$setViewValue && (!ngModel.$viewValue || tab == selectedTab)) { +            // we are not part of angular +            ngModel.$viewValue = tab.value; +          } +          ngModel.$render(); +        } + +        navTabs.append(li); +        li.bind('click', function(event) { +          event.preventDefault(); +          event.stopPropagation(); +          if (ngModel.$setViewValue) { +            $scope.$apply(function() { +              ngModel.$setViewValue(tab.value); +              ngModel.$render(); +            }); +          } else { +            // we are not part of angular +            ngModel.$viewValue = tab.value; +            ngModel.$render(); +          } +        }); + +        return function() { +          tab.tabElement.remove(); +          for(var i = 0, ii = tabs.length; i < ii; i++ ) { +            if (tab == tabs[i]) { +              tabs.splice(i, 1); +            } +          } +        }; +      } +    }] +  }; +}; + + +directive.tabPane = function() { +  return { +    require: '^tabbable', +    restrict: 'C', +    link: function(scope, element, attrs, tabsCtrl) { +      element.bind('$remove', tabsCtrl.addPane(element, attrs)); +    } +  }; +}; + + +angular.module('bootstrap', []).directive(directive);  | 
