angular-bulma - npm Package Compare versions

Comparing version 0.1.0 to 0.1.1

bower.json

 {
   "name": "angular-bulma",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "homepage": "https://github.com/gfpacheco/angular-bulma",
@@ -5,0 +5,0 @@ "repository": {

dist/angular-bulma.js

@@ -23,3 +23,5 @@ (function (angular) {
 
-  function buDropdown() {
+  buDropdown.$inject = ['$document'];
+
+  function buDropdown($document) {
     var directive = {
@@ -45,3 +47,3 @@ restrict: 'E',
     function link(scope, element) {
-      element.on('click', toggleOpen);
+      element.on('click', toggle);
 
@@ -64,5 +66,23 @@ var dropdown = angular.element(element[0].querySelector('.bu-dropdown'));
 
-      function toggleOpen() {
-        dropdown.css('display', dropdown.css('display') === 'block' ? 'none' : 'block');
+      function toggle() {
+        if (dropdown.css('display') === 'none') {
+          open();
+        } else {
+          close();
+        }
       }
+
+      function open() {
+        dropdown.css('display', 'block');
+        $document.on('click', close);
+      }
+
+      function close() {
+        dropdown.css('display', 'none');
+        $document.off('click', close);
+      }
+
+      scope.$on('$destroy', function() {
+        $document.off('click', close);
+      });
     }
@@ -69,0 +89,0 @@ }

dist/angular-bulma.min.js

@@ -1,1 +0,1 @@
-!function(n){n.module("bulma",["bulma.directives"])}(angular),function(n){n.module("bulma.directives",[])}(angular),function(n){function l(){function l(l,t){function e(){o.css("display","block"===o.css("display")?"none":"block")}t.on("click",e);var o=n.element(t[0].querySelector(".bu-dropdown")),i={display:"none",position:"absolute",top:"100%",zIndex:"1000"};"right"===l.align?i.right=0:i.left=0,o.css(i)}var t={restrict:"E",transclude:!0,replace:!0,scope:{label:"@",align:"@"},link:l,template:'<div class="control"><button class="button" type="button">{{label}}</button><div class="bu-dropdown" ng-transclude></div><div>'};return t}n.module("bulma.directives").directive("buDropdown",l)}(angular);
+!function(n){n.module("bulma",["bulma.directives"])}(angular),function(n){n.module("bulma.directives",[])}(angular),function(n){function o(o){function t(t,c){function e(){"none"===u.css("display")?i():l()}function i(){u.css("display","block"),o.on("click",l)}function l(){u.css("display","none"),o.off("click",l)}c.on("click",e);var u=n.element(c[0].querySelector(".bu-dropdown")),a={display:"none",position:"absolute",top:"100%",zIndex:"1000"};"right"===t.align?a.right=0:a.left=0,u.css(a),t.$on("$destroy",function(){o.off("click",l)})}var c={restrict:"E",transclude:!0,replace:!0,scope:{label:"@",align:"@"},link:t,template:'<div class="control"><button class="button" type="button">{{label}}</button><div class="bu-dropdown" ng-transclude></div><div>'};return c}n.module("bulma.directives").directive("buDropdown",o),o.$inject=["$document"]}(angular);

gulpfile.js

@@ -75,3 +75,3 @@ // Prevent bluebird warnings
     configFile: __dirname + '/karma-src.conf.js',
-    sleRun: true
+    singleRun: true
   }, done).start();
@@ -94,4 +94,4 @@ });
 
-gulp.task('test-all', function() {
-  runSequence('process-all', 'test-dist-concatenated', 'test-dist-minified');
+gulp.task('test-all', function(done) {
+  runSequence('process-all', 'test-dist-concatenated', 'test-dist-minified', done);
 });
@@ -139,4 +139,4 @@
 
-gulp.task('default', function() {
-  runSequence('process-all', 'watch');
+gulp.task('default', function(done) {
+  runSequence('test-all', done);
 });

package.json

 {
   "name": "angular-bulma",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "homepage": "https://github.com/gfpacheco/angular-bulma",
@@ -5,0 +5,0 @@ "repository": {

src/directives/dropdown.js

@@ -7,3 +7,5 @@ (function (angular) {
 
-  function buDropdown() {
+  buDropdown.$inject = ['$document'];
+
+  function buDropdown($document) {
     var directive = {
@@ -29,3 +31,3 @@ restrict: 'E',
     function link(scope, element) {
-      element.on('click', toggleOpen);
+      element.on('click', toggle);
 
@@ -48,5 +50,23 @@ var dropdown = angular.element(element[0].querySelector('.bu-dropdown'));
 
-      function toggleOpen() {
-        dropdown.css('display', dropdown.css('display') === 'block' ? 'none' : 'block');
+      function toggle() {
+        if (dropdown.css('display') === 'none') {
+          open();
+        } else {
+          close();
+        }
       }
+
+      function open() {
+        dropdown.css('display', 'block');
+        $document.on('click', close);
+      }
+
+      function close() {
+        dropdown.css('display', 'none');
+        $document.off('click', close);
+      }
+
+      scope.$on('$destroy', function() {
+        $document.off('click', close);
+      });
     }
@@ -53,0 +73,0 @@ }

tests/directives/dropdownSpec.js

@@ -9,11 +9,20 @@ 'use strict';
   var $rootScope;
+  var $document;
 
-  beforeEach(inject(function(_$compile_, _$rootScope_) {
+  beforeEach(inject(function(_$compile_, _$rootScope_, _$document_) {
     $compile = _$compile_;
     $rootScope = _$rootScope_;
+    $document = _$document_;
   }));
 
+  function getCompiledElement() {
+    $rootScope.label = 'Label';
+    var element = $compile('<bu-dropdown label="{{label}}" align="{{align}}"><p></p></bu-dropdown>')($rootScope);
+    $document.append(element);
+    $rootScope.$digest();
+    return element;
+  }
+
   it('Has a button with the value of the label property', function() {
-    var element = $compile('<bu-dropdown label="Label"></bu-dropdown>')($rootScope);
-    $rootScope.$digest();
+    var element = getCompiledElement();
     var button = element.find('button');
@@ -24,5 +33,3 @@ expect(button.text()).to.equal('Label');
   it('Updates the button value if the label property changes', function() {
-    $rootScope.label = 'Label';
-    var element = $compile('<bu-dropdown label="{{label}}"></bu-dropdown>')($rootScope);
-    $rootScope.$digest();
+    var element = getCompiledElement();
     var button = element.find('button');
@@ -36,4 +43,3 @@ expect(button.text()).to.equal('Label');
   it('Wraps the content inside a .bu-dropdown div', function() {
-    var element = $compile('<bu-dropdown><p>I\'m inside a dropdown</p></bu-dropdown>')($rootScope);
-    $rootScope.$digest();
+    var element = getCompiledElement();
     var dropdown = element.find('.bu-dropdown');
@@ -44,4 +50,3 @@ expect(dropdown.find('p').length).to.equal(1);
   it('Hides the .bu-dropdown div by default', function() {
-    var element = $compile('<bu-dropdown></bu-dropdown>')($rootScope);
-    $rootScope.$digest();
+    var element = getCompiledElement();
     var dropdown = element.find('.bu-dropdown');
@@ -52,4 +57,3 @@ expect(dropdown.css('display')).to.equal('none');
   it('Shows the .bu-dropdown div when clicked', function() {
-    var element = $compile('<bu-dropdown></bu-dropdown>')($rootScope);
-    $rootScope.$digest();
+    var element = getCompiledElement();
     var dropdown = element.find('.bu-dropdown');
@@ -61,4 +65,3 @@ element.trigger('click');
   it('Hides the .bu-dropdown div if clicked twice', function() {
-    var element = $compile('<bu-dropdown></bu-dropdown>')($rootScope);
-    $rootScope.$digest();
+    var element = getCompiledElement();
     var dropdown = element.find('.bu-dropdown');
@@ -70,5 +73,12 @@ element.trigger('click');
 
+  it('Hides the .bu-dropdown div if clicked outside', function() {
+    var element = getCompiledElement();
+    var dropdown = element.find('.bu-dropdown');
+    element.trigger('click');
+    $document.trigger('click');
+    expect(dropdown.css('display')).to.equal('none');
+  });
+
   it('Shows the .bu-dropdown div if clicked tree times', function() {
-    var element = $compile('<bu-dropdown></bu-dropdown>')($rootScope);
-    $rootScope.$digest();
+    var element = getCompiledElement();
     var dropdown = element.find('.bu-dropdown');
@@ -82,4 +92,3 @@ element.trigger('click');
   it('Aligns the .bu-dropdown div to the left by default', function() {
-    var element = $compile('<bu-dropdown></bu-dropdown>')($rootScope);
-    $rootScope.$digest();
+    var element = getCompiledElement();
     var dropdown = element.find('.bu-dropdown');
@@ -90,4 +99,4 @@ expect(dropdown.css('left')).to.equal('0px');
   it('Aligns the .bu-dropdown div to the right if told so', function() {
-    var element = $compile('<bu-dropdown align="right"></bu-dropdown>')($rootScope);
-    $rootScope.$digest();
+    $rootScope.align = 'right';
+    var element = getCompiledElement();
     var dropdown = element.find('.bu-dropdown');
@@ -94,0 +103,0 @@ expect(dropdown.css('right')).to.equal('0px');

No alert changes

Improved metrics

Total package byte prevSize

22545

increased by4.37%

Lines of code

552

increased by7.6%

No dependency changes