├── .gitignore ├── .travis.yml ├── LICENSE ├── README.md ├── bower.json ├── package.json ├── popover-toggle.js └── tests ├── karma.conf.js └── suite └── popover-toggle.js /.gitignore: -------------------------------------------------------------------------------- 1 | .idea 2 | node_modules 3 | npm-debug.log -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | node_js: 3 | - "0.12" 4 | before_script: 5 | - export CHROME_BIN=chromium-browser 6 | - export DISPLAY=:99.0 7 | - sh -e /etc/init.d/xvfb start -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2015 Petr Peller 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | [![Build Status](https://travis-ci.org/Elijen/angular-popover-toggle.svg?branch=master)](https://travis-ci.org/Elijen/angular-popover-toggle) 2 | 3 | ## WARNING If you are using ui.bootstrap v0.13.4 or later you probably don't need this 4 | `is-open` attribute was added to the `ui.bootstrap.popover` in v0.13.4. This repository will no longer be maintaned. 5 | 6 | 7 | # angular-popover-toggle 8 | `popoverToggle` directive allowing manual control over AngularUI's popovers 9 | 10 | ## Installation 11 | Download and include the `popover-toggle.js` file after AngularJS on your page. You can use Bower: 12 | ``` 13 | bower install angular-popover-toggle 14 | ``` 15 | 16 | Declare a dependency on `popoverToggle` in your module: 17 | ```JavaScript 18 | angular.module('YourModule', ['ui.bootstrap', 'popoverToggle']); 19 | ``` 20 | 21 | ## Usage 22 | Now you can use `popover-toggle` directive in addition to `popover` and `popover-template` directives: 23 | ```HTML 24 |
25 | There is a popover above me! 26 |
27 | ``` 28 | 29 | ### Example usage with simple `popover`: 30 | http://plnkr.co/edit/QeQqqEJAu1dCuDtSvomD?p=preview 31 | 32 | ### Example usage with `popover-template`: 33 | http://plnkr.co/edit/SBX3GPUFLYaKnjATbFtQ?p=preview 34 | -------------------------------------------------------------------------------- /bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "angular-popover-toggle", 3 | "homepage": "https://github.com/Elijen/angular-popover-toggle", 4 | "authors": [ 5 | "Petr Peller " 6 | ], 7 | "description": "popoverToggle directive allowing manual control over AngularUI's popover", 8 | "main": "popover-toggle.js", 9 | "keywords": [ 10 | "angular", 11 | "angular-ui", 12 | "angular-bootstrap", 13 | "popover", 14 | "popover-toggle", 15 | "ui-popover", 16 | "bootstrap", 17 | "toggle" 18 | ], 19 | "dependencies": { 20 | "angular-bootstrap": "*" 21 | }, 22 | "license": "MIT", 23 | "ignore": [ 24 | "**/.*", 25 | "node_modules", 26 | "bower_components", 27 | "test", 28 | "tests" 29 | ] 30 | } 31 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "angular-popover-toggle", 3 | "version": "0.1.0", 4 | "description": "popoverToggle directive allowing manual control over AngularUI's popover", 5 | "main": "popover-toggle.js", 6 | "directories": { 7 | "test": "tests" 8 | }, 9 | "dependencies": { 10 | "angular-ui-bootstrap": "^0.13.4", 11 | "angular": "^1.4.3" 12 | }, 13 | "devDependencies": { 14 | "angular-mocks": "^1.4.3", 15 | "jasmine-core": "^2.3.4", 16 | "karma": "^0.13.2", 17 | "karma-chrome-launcher": "^0.2.0", 18 | "karma-firefox-launcher": "^0.1.6", 19 | "karma-jasmine": "^0.3.6" 20 | }, 21 | "scripts": { 22 | "test": "./node_modules/.bin/karma start tests/karma.conf.js --single-run" 23 | }, 24 | "repository": { 25 | "type": "git", 26 | "url": "git+https://github.com/Elijen/angular-popover-toggle.git" 27 | }, 28 | "keywords": [ 29 | "angular", 30 | "angular-ui", 31 | "angular-bootstrap", 32 | "popover", 33 | "popover-toggle", 34 | "angular-popover" 35 | ], 36 | "author": "Petr Peller", 37 | "license": "MIT", 38 | "bugs": { 39 | "url": "https://github.com/Elijen/angular-popover-toggle/issues" 40 | }, 41 | "homepage": "https://github.com/Elijen/angular-popover-toggle#readme" 42 | } 43 | -------------------------------------------------------------------------------- /popover-toggle.js: -------------------------------------------------------------------------------- 1 | (function(angular){ 2 | 'use strict'; 3 | 4 | var POPOVER_SHOW = 'popoverToggleShow'; 5 | var POPOVER_HIDE = 'popoverToggleHide'; 6 | 7 | var module = angular.module('popoverToggle', ['ui.bootstrap']); 8 | 9 | module.config(['$tooltipProvider', function($tooltipProvider) { 10 | var triggers = {}; 11 | triggers[POPOVER_SHOW] = POPOVER_HIDE; 12 | 13 | $tooltipProvider.setTriggers(triggers); 14 | }]); 15 | 16 | module.directive('popoverToggle', ['$timeout', function($timeout) { 17 | return { 18 | restrict: 'A', 19 | link: link 20 | }; 21 | 22 | function link($scope, $element, $attrs) { 23 | $attrs.popoverTrigger = POPOVER_SHOW; 24 | 25 | $scope.$watch($attrs.popoverToggle, function(newValue) { 26 | $timeout(function(){ 27 | if(newValue) { 28 | dispatchEvent(POPOVER_SHOW, $element); 29 | } else { 30 | dispatchEvent(POPOVER_HIDE, $element); 31 | } 32 | }); 33 | 34 | function dispatchEvent(eventName, $element) { 35 | var event = document.createEvent('Event'); 36 | event.initEvent(eventName, true, true); 37 | 38 | $element[0].dispatchEvent(event); 39 | } 40 | }) 41 | } 42 | }]); 43 | 44 | })(angular); -------------------------------------------------------------------------------- /tests/karma.conf.js: -------------------------------------------------------------------------------- 1 | module.exports = function(config) { 2 | var configuration = { 3 | basePath: '../', 4 | 5 | files: [ 6 | 'node_modules/angular/angular.js', 7 | 'node_modules/angular-ui-bootstrap/ui-bootstrap.js', 8 | 'node_modules/angular-ui-bootstrap/ui-bootstrap-tpls.js', 9 | 'node_modules/angular-mocks/angular-mocks.js', 10 | 'popover-toggle.js', 11 | 'tests/suite/*.js' 12 | ], 13 | 14 | frameworks: [ 15 | 'jasmine' 16 | ], 17 | 18 | browsers: [ 19 | 'Chrome', 20 | 'Firefox' 21 | ], 22 | 23 | customLaunchers: { 24 | Chrome_travis_ci: { 25 | base: 'Chrome', 26 | flags: ['--no-sandbox'] 27 | } 28 | }, 29 | 30 | reporters: [ 31 | 'dots' 32 | ] 33 | }; 34 | 35 | if(process.env.TRAVIS) { 36 | configuration.browsers[0] = 'Chrome_travis_ci'; 37 | } 38 | 39 | config.set(configuration); 40 | }; -------------------------------------------------------------------------------- /tests/suite/popover-toggle.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | describe('popoverToggle directive', function(){ 4 | var $rootScope; 5 | var $compile; 6 | 7 | beforeEach(function() { 8 | module('popoverToggle'); 9 | 10 | inject(function(_$compile_, _$rootScope_){ 11 | $compile = _$compile_; 12 | $rootScope = _$rootScope_; 13 | }); 14 | }); 15 | 16 | it('Is displayed on initial load and hidden on change', inject(function($timeout){ 17 | var $scope = $rootScope.$new(); 18 | $scope.isPopoverOpen = true; 19 | 20 | var element = $compile('
There is a popover above me!
')($scope); 21 | $timeout.flush(); 22 | 23 | var result = angular.element(element[0].querySelectorAll('.popover')); 24 | expect(result.length).toEqual(1); 25 | expect(result.hasClass('in')).toEqual(true); 26 | 27 | // hide popover by changing $scope variable 28 | $scope.isPopoverOpen = false; 29 | $scope.$digest(); 30 | $timeout.flush(); 31 | 32 | // hiding animation starts 33 | result = angular.element(element[0].querySelectorAll('.popover')); 34 | expect(result.length).toEqual(1); 35 | expect(result.hasClass('in')).toEqual(false); 36 | 37 | $timeout.flush(); 38 | 39 | // popover hidden 40 | result = angular.element(element[0].querySelectorAll('.popover')); 41 | expect(result.length).toEqual(0); 42 | })); 43 | 44 | it('Is hidden on initial load and displayed on change', inject(function($timeout){ 45 | var $scope = $rootScope.$new(); 46 | $scope.isPopoverOpen = false; 47 | 48 | var element = $compile('
There is a popover above me!
')($scope); 49 | $timeout.flush(); 50 | 51 | var result = element[0].querySelectorAll('.popover'); 52 | expect(result.length).toEqual(0); 53 | 54 | // show popover by changing $scope variable 55 | $scope.isPopoverOpen = true; 56 | $scope.$digest(); 57 | $timeout.flush(); 58 | 59 | result = angular.element(element[0].querySelectorAll('.popover')); 60 | expect(result.length).toEqual(1); 61 | expect(result.hasClass('in')).toEqual(true); 62 | })); 63 | }); --------------------------------------------------------------------------------