angular-ui-layout - npm Package Compare versions

Comparing version 1.0.5-requirejs to 1.1.0

bower.json

 {
   "name": "angular-ui-layout",
-  "main": ["src/ui-layout.js", "src/ui-layout.css"],
-  "version": "1.0.5",
+  "main": [
+    "src/ui-layout.js",
+    "src/ui-layout.css"
+  ],
+  "version": "1.1.0",
   "homepage": "https://angular-ui.github.io/ui-layout/",
@@ -19,9 +22,9 @@ "authors": [
   "dependencies": {
-    "angular": "^1",
-    "raf": "https://gist.githubusercontent.com/paulirish/1579671/raw/3d42a3a76ed09890434a07be2212f376959e616f/rAF.js"
+    "angular": "^1"
   },
   "devDependencies": {
     "angular-mocks": "^1",
-    "jquery": "^2"
+    "jquery": "^2",
+    "requestAnimationFrame": "~0.0.22"
   }
 }

gulpfile.js

@@ -0,0 +0,0 @@ 'use strict';

package.json

 {
   "name": "angular-ui-layout",
-  "version": "1.0.5-requirejs",
+  "version": "1.1.0",
   "description": "This directive allows you to split !",
@@ -28,3 +28,3 @@ "devDependencies": {
   },
-  "main": "index.js",
+  "main": "ui-layout.js",
   "repository": {
@@ -31,0 +31,0 @@ "type": "git",

publish.js

@@ -0,0 +0,0 @@ /* jshint node:true */

README.md

@@ -136,2 +136,27 @@ # UI.Layout directive [![Build Status](https://travis-ci.org/angular-ui/ui-layout.svg)](https://travis-ci.org/angular-ui/ui-layout)
 
+## Events
+
+Events are broadcast on the scope where ui-layout is attached. This means they are available to any controller inside of a ui-layout container. 
+
+### ui.layout.toggle
+
+Dispatched when a container is opened or closed using the chevron buttons.
+
+```javascript
+$scope.$on('ui.layout.toggle', function(e, container){
+  if ( container.size > 0 ){
+     console.log('container is open!');
+  }
+});
+```
+
+### ui.layout.resize
+
+Dispatched as a splitbar is dragged, debounced to occur only every 50ms.
+
+```javascript
+$scope.$on('ui.layout.resize', function(e, beforeContainer, afterContainer){});
+```
+
+
 ## Testing
@@ -138,0 +163,0 @@

src/ui-layout.js

@@ -7,7 +7,6 @@ 'use strict';
 angular.module('ui.layout', [])
-  .controller('uiLayoutCtrl', ['$scope', '$attrs', '$element', 'LayoutContainer', function uiLayoutCtrl($scope, $attrs, $element, LayoutContainer) {
+  .controller('uiLayoutCtrl', ['$scope', '$attrs', '$element', '$timeout', 'LayoutContainer', function uiLayoutCtrl($scope, $attrs, $element, $timeout, LayoutContainer) {
     var ctrl = this;
     var opts = angular.extend({}, $scope.$eval($attrs.uiLayout), $scope.$eval($attrs.options));
     var numOfSplitbars = 0;
-    var lastDividerRemoved = false;
     //var cache = {};
@@ -17,2 +16,5 @@ var animationFrameRequested;
 
+    // regex to verify size is properly set to pixels or percent
+    var sizePattern = /\d+\s*(px|%)\s*$/i;
+
     ctrl.containers = [];
@@ -46,2 +48,3 @@ ctrl.movingSplitbar = null;
 
+    var debounceEvent;
     function draw() {
@@ -94,3 +97,8 @@ var position = ctrl.sizeProperties.flowProperty;
 
-            //TODO: dispatch container resize event
+            // broadcast an event that resize happened (debounced to 50ms)
+            if(debounceEvent) $timeout.cancel(debounceEvent);
+            debounceEvent = $timeout(function() {
+                $scope.$broadcast('ui.layout.resize', beforeContainer, afterContainer);
+                debounceEvent = null;
+            }, 50);
           }
@@ -115,2 +123,15 @@ }
 
+    /**
+     * Returns the current value for an option
+     * @param  option   The option to get the value for
+     * @return The value of the option. Returns null if there was no option set.
+     */
+    function optionValue(option) {
+      if(typeof option == 'number' || typeof option == 'string' && option.match(sizePattern)) {
+        return option;
+      } else {
+        return null;
+      }
+    }
+
     //================================================================================
@@ -212,10 +233,2 @@ // Public Controller Functions
       if(ctrl.containers.length > 0 && $element.children().length > 0) {
-        // remove the last splitbar container from DOM
-        if(!lastDividerRemoved && ctrl.containers.length === $element.children().length) {
-          var lastContainerIndex = ctrl.containers.length - 1;
-          ctrl.containers[lastContainerIndex].element.remove();
-          ctrl.containers.splice(lastContainerIndex, 1);
-          lastDividerRemoved = true;
-          numOfSplitbars--;
-        }
 
@@ -225,2 +238,3 @@ // calculate sizing for ctrl.containers
           if(!LayoutContainer.isSplitbar(ctrl.containers[i])) {
+
             var child = ctrl.containers[i].element;
@@ -232,8 +246,7 @@ opts.maxSizes[i] = child.attr('max-size') || opts.maxSizes[i] || null;
 
-            // verify size is properly set to pixels or percent
-            var sizePattern = /\d+\s*(px|%)\s*$/i;
-            opts.sizes[i] = (opts.sizes[i] != 'auto' && opts.sizes[i].match(sizePattern)) ? opts.sizes[i] : 'auto';
-            opts.minSizes[i] = (opts.minSizes[i] && opts.minSizes[i].match(sizePattern)) ? opts.minSizes[i] : null;
-            opts.maxSizes[i] = (opts.maxSizes[i] && opts.maxSizes[i].match(sizePattern)) ? opts.maxSizes[i] : null;
 
+            opts.sizes[i] = optionValue(opts.sizes[i]) || 'auto';
+            opts.minSizes[i] = optionValue(opts.minSizes[i]);
+            opts.maxSizes[i] = optionValue(opts.maxSizes[i]);
+
             if(opts.sizes[i] != 'auto') {
@@ -300,4 +313,2 @@ if(ctrl.isPercent(opts.sizes[i])) {
       }
-
-
     };
@@ -307,6 +318,10 @@
      * Adds a container to the list of layout ctrl.containers.
-     * @param container
+     * @param container The container to add
      */
     ctrl.addContainer = function(container) {
-      ctrl.containers.push(container);
+      var index = ctrl.indexOfElement(container.element);
+      if(!angular.isDefined(index) || index < 0 || ctrl.containers.length < index) {
+        console.error("Invalid index to add container; i=" + index + ", len=", ctrl.containers.length);
+        return;
+      }
 
@@ -317,2 +332,4 @@ if(LayoutContainer.isSplitbar(container)) {
 
+      ctrl.containers.splice(index, 0, container);
+
       ctrl.updateDisplay();
@@ -322,2 +339,38 @@ };
     /**
+     * Remove a container from the list of layout ctrl.containers.
+     * @param  container
+     */
+    ctrl.removeContainer = function(container) {
+      var index = ctrl.containers.indexOf(container);
+      if(index >= 0) {
+        if(!LayoutContainer.isSplitbar(container)) {
+          if(ctrl.containers.length > 2) {
+            // Assume there's a sidebar between each container
+            // We need to remove this container and the sidebar next to it
+            if(index == ctrl.containers.length - 1) {
+              // We're removing the last element, the side bar is on the left
+              ctrl.containers[index-1].element.remove();
+            } else {
+              // The side bar is on the right
+              ctrl.containers[index+1].element.remove();
+            }
+          }
+        } else {
+          // fix for potentially collapsed containers
+          ctrl.containers[index - 1].collapsed = false;
+          numOfSplitbars--;
+        }
+
+        // Need to re-check the index, as a side bar may have been removed
+        var newIndex = ctrl.containers.indexOf(container);
+        if(newIndex >= 0) {
+          ctrl.containers.splice(newIndex, 1);
+        }
+        ctrl.updateDisplay();
+      } else {
+        console.error("removeContainer for container that did not exist!");
+      }
+    };
+
+    /**
      * Returns an array of layout ctrl.containers.
@@ -365,2 +418,3 @@ * @returns {Array}
       });
+      $scope.$broadcast('ui.layout.toggle', c);
 
@@ -410,2 +464,3 @@ return c.collapsed;
       });
+      $scope.$broadcast('ui.layout.toggle', c);
 
@@ -447,2 +502,60 @@ return c.collapsed;
 
+    /**
+     * Checks whether the container before this one is a split bar
+     * @param  {container}  container The container to check
+     * @return {Boolean}    true if the element before is a splitbar, false otherwise
+     */
+    ctrl.hasSplitbarBefore = function(container) {
+      var index = ctrl.containers.indexOf(container);
+      if(1 <= index) {
+        return LayoutContainer.isSplitbar(ctrl.containers[index-1]);
+      }
+
+      return false;
+    };
+
+    /**
+     * Checks whether the container after this one is a split bar
+     * @param  {container}  container The container to check
+     * @return {Boolean}    true if the element after is a splitbar, false otherwise
+     */
+    ctrl.hasSplitbarAfter = function(container) {
+      var index = ctrl.containers.indexOf(container);
+      if(index < ctrl.containers.length - 1) {
+        return LayoutContainer.isSplitbar(ctrl.containers[index+1]);
+      }
+
+      return false;
+    };
+
+    /**
+     * Checks whether the passed in element is a ui-layout type element.
+     * @param  {element}  element The element to check
+     * @return {Boolean}          true if the element is a layout element, false otherwise.
+     */
+    ctrl.isLayoutElement = function(element) {
+      return element.hasAttribute('ui-layout-container') || element.hasAttribute('ui-splitbar') || element.nodeName === 'UI-LAYOUT-CONTAINER';
+    };
+
+    /**
+     * Retrieve the index of an element within it's parents context.
+     * @param  {element} element The element to get the index of
+     * @return {int}             The index of the element within it's parent
+     */
+    ctrl.indexOfElement = function(element) {
+      var parent = element.parent();
+      var children = parent.children();
+      var containerIndex = 0;
+      for(var i = 0; i < children.length; i++) {
+        var child = children[i];
+        if(ctrl.isLayoutElement(child)) {
+          if(element[0] == children[i]) {
+            return containerIndex;
+          }
+          containerIndex++;
+        }
+      }
+      return -1;
+    };
+
     return ctrl;
@@ -483,2 +596,3 @@ }])
       scope: {},
+
       link: function(scope, element, attrs, ctrl) {
@@ -651,4 +765,13 @@ if(!element.hasClass('stretch')) element.addClass('stretch');
 
+        scope.$on('$destroy', function() {
+          htmlElement.off('mouseup touchend mousemove touchmove');
+        });
+
         //Add splitbar to layout container list
         ctrl.addContainer(scope.splitbar);
+
+        element.on('$destroy', function() {
+          ctrl.removeContainer(scope.splitbar);
+          scope.$evalAsync();
+        });
       }
@@ -659,3 +782,3 @@ };
 
-  .directive('uiLayoutContainer', ['LayoutContainer', function(LayoutContainer) {
+  .directive('uiLayoutContainer', ['LayoutContainer', '$compile', function(LayoutContainer, $compile) {
     return {
@@ -666,7 +789,3 @@ restrict: 'AE',
 
-      compile: function(element) {
-        //TODO: add ability to disable auto-adding a splitbar after the container
-        var splitbar = angular.element('<div ui-splitbar><a><span class="glyphicon"></span></a><a><span class="glyphicon"></span></a></div>');
-        element.after(splitbar);
-
+      compile: function() {
         return {
@@ -676,3 +795,9 @@ pre: function(scope, element, attrs, ctrl) {
             scope.container.element = element;
+
             ctrl.addContainer(scope.container);
+
+            element.on('$destroy', function() {
+              ctrl.removeContainer(scope.container);
+              scope.$evalAsync();
+            });
           },
@@ -691,2 +816,14 @@ post: function(scope, element, attrs, ctrl) {
 
+            //TODO: add ability to disable auto-adding a splitbar after the container
+            var parent = element.parent();
+            var children = parent.children();
+            var index = ctrl.indexOfElement(element);
+            var splitbar = angular.element('<div ui-splitbar><a><span class="glyphicon"></span></a><a><span class="glyphicon"></span></a></div>');
+            if(0 < index && !ctrl.hasSplitbarBefore(scope.container)) {
+              angular.element(children[index-1]).after(splitbar);
+              $compile(splitbar)(scope);
+            } else if(index < children.length - 1) {
+              element.after(splitbar);
+              $compile(splitbar)(scope);
+            }
           }
@@ -699,3 +836,2 @@ };
   .factory('LayoutContainer', function() {
-
     // Base container that can be locked and resized
@@ -702,0 +838,0 @@ function BaseContainer() {

test/helpers/browserTrigger.js

@@ -0,0 +0,0 @@ 'use strict';

test/helpers/jquery_alias.js

@@ -0,0 +0,0 @@ 'use strict';

test/helpers/jquery_remove.js

@@ -0,0 +0,0 @@ 'use strict';

test/helpers/spec_helper.js

@@ -0,0 +0,0 @@ //

test/karma-jqlite.conf.js

@@ -25,3 +25,3 @@ // Karma configuration
       'bower_components/angular-mocks/angular-mocks.js',
-      'bower_components/raf/index.js',
+      'bower_components/requestAnimationFrame/app/requestAnimationFrame.js',
       'src/*',
@@ -28,0 +28,0 @@ 'test/*.spec.js'

test/karma-jquery.conf.js

@@ -25,3 +25,3 @@ // Karma configuration
       'bower_components/angular-mocks/angular-mocks.js',
-      'bower_components/raf/index.js',
+      'bower_components/requestAnimationFrame/app/requestAnimationFrame.js',
       'src/*',
@@ -28,0 +28,0 @@ 'test/*.spec.js'

test/layout-scenar.spec.js

@@ -0,0 +0,0 @@ 'use strict';

test/layout.spec.js

@@ -0,0 +0,0 @@ 'use strict';

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

97870

increased by9.13%

Lines of code

1724

increased by10.58%

Number of low quality alerts

0

decreased by-100%

Number of lines in readme file

181

increased by16.03%

Worsened metrics

Number of medium supply chain risk alerts

2

increased by100%

No dependency changes