ng-if-bootstrap-grid - npm Package Compare versions

Comparing version 0.0.2 to 0.1.0

package.json

 {
   "name": "ng-if-bootstrap-grid",
-  "version": "0.0.2",
+  "version": "0.1.0",
   "description": "Angular directives, including or excluding HTML-elements, based on currently active Bootstrap grid: xs, sm, md, lg",
@@ -5,0 +5,0 @@ "main": "src/index.js",

Readme.md

@@ -1,3 +0,7 @@
-Angular directives, including or excluding HTML-elements, based on currently active Bootstrap grid: xs, sm, md, lg.
+Angular directives, including or excluding HTML-elements, based on currently active Bootstrap grid: xs, sm, md, lg. Allowing for a reduction of watcherts.
 
+1. Bootstrap 3 grid class detection takes places via injecting Bootstrap 3 grid classes and testing them for visibility.
+2. Internally, `ng-if` is used.
+3. Thus, as this directive combines the Bootstrap-css-grid and Angular-ng-if, it should be pretty solid.
+
 # Installation
@@ -10,5 +14,3 @@ `npm i ng-if-bootstrap-grid --save`
 ```javascript
-angular.module('myApp',
-[require('ng-if-bootstrap-grid').name]
-);
+angular.module('myApp', [require('ng-if-bootstrap-grid').name]);
 ```
@@ -38,4 +40,5 @@
 # TODO
-Extensive cross-browser testing
+The injection does not take place in the `compile` function of the directive, as this (misteriously) breaks the code.
 
+
 # Links
@@ -42,0 +45,0 @@ [Git](https://github.com/xErik/ng-if-bootstrap-grid)

src/index.js

 'use strict';
 
 module.exports = angular.module('ng-if-bootstrap-grid', [])
-	.directive('ngIfBootstrapGrid', ['ngIfDirective', '$window', function(ngIfDirective, $window) {
-		var ngIf = ngIfDirective[0];
-		return {
-			transclude: ngIf.transclude,
-			priority: ngIf.priority,
-			terminal: ngIf.terminal,
-			restrict: ngIf.restrict,
-			link: function($scope, $element, $attr) {
+    .directive('ngIfBootstrapGrid', ['ngIfDirective', '$window', function(ngIfDirective, $window) {
+        var ngIf = ngIfDirective[0];
 
-				var yourCustomValue = $window.innerWidth === undefined ? $window.clientWidth : $window.innerWidth;
-				angular.element($window).bind('resize', function() {
-					yourCustomValue = $window.innerWidth === undefined ? $window.clientWidth : $window.innerWidth;
-					$scope.$apply();
-				});
+        return {
+            transclude: ngIf.transclude,
+            priority: ngIf.priority,
+            terminal: ngIf.terminal,
+            restrict: ngIf.restrict,
+            link: function($scope, $element, $attr) {
 
-				$attr.ngIf = function() {
-					var render = false;
-					var splitArr = $attr.ngIfBootstrapGrid.split(/[, ]+/g); // allows runtime changes
+                    angular.element($window).bind('resize', function() {
+                        $scope.$apply();
+                    });
 
-					for(var i = 0; i < splitArr.length; i++) {
-						switch(splitArr[i].toLowerCase()) {
-							case 'xs':
-								render = yourCustomValue <= 767;
-								break;
-							case 'sm':
-								render = yourCustomValue >= 768 && yourCustomValue <= 991;
-								break;
-							case 'md':
-								render = yourCustomValue >= 992 && yourCustomValue <= 1199;
-								break;
-							case 'lg':
-								render = yourCustomValue >= 1200;
-								break;
-							default:
-								throw 'Unknown bootstrap grid class: ' + splitArr[i];
-						}
-						if(render === true) {
-							break;
-						}
+					function isDisplayed(query) {
+						var elem = document.querySelector(query);
+						var elementStyleMap = $window.getComputedStyle(elem, null);
+						return elementStyleMap.display !== 'none';
 					}
-					return render;
-				};
-				ngIf.link.apply(ngIf, arguments);
-			}
-		};
-	}])
-	.directive('ngIfNotBootstrapGrid', ['ngIfDirective', '$window', function(ngIfDirective, $window) {
-		var ngIf = ngIfDirective[0];
-		return {
-			transclude: ngIf.transclude,
-			priority: ngIf.priority,
-			terminal: ngIf.terminal,
-			restrict: ngIf.restrict,
-			link: function($scope, $element, $attr) {
 
-				var yourCustomValue = $window.innerWidth === undefined ? $window.clientWidth : $window.innerWidth;
-				angular.element($window).bind('resize', function() {
-					yourCustomValue = $window.innerWidth === undefined ? $window.clientWidth : $window.innerWidth;
-					$scope.$apply();
-				});
+					// This should be in compile() function, but that breaks the code.
+					var tester = document.getElementsByClassName("ng-if-bootstrap-grid-detection-block");
+					if (tester.length === 0) {
+						var e = angular.element(document).find('body');
+						e.append(
+							'<!-- ng-if-bootstrap-grid-detection-block: -->\
+							<div class="ng-if-bootstrap-grid-detection-block">\
+								<div class="device-xs visible-xs visible-xs-block"></div>\
+								<div class="device-sm visible-sm visible-sm-block"></div>\
+								<div class="device-md visible-md visible-md-block"></div>\
+								<div class="device-lg visible-lg visible-lg-block"></div>\
+							</div>');
+					}
 
-				$attr.ngIf = function() {
-					var render = false;
-					var splitArr = $attr.ngIfNotBootstrapGrid.split(/[, ]+/g); // allows runtime changes
+                    $attr.ngIf = function() {
+                        var render = false;
+                        var splitArr = $attr.ngIfBootstrapGrid.split(/[, ]+/g); // allows runtime changes
 
-					for(var i = 0; i < splitArr.length; i++) {
-						switch(splitArr[i].toLowerCase()) {
+                        for (var i = 0; i < splitArr.length; i++) {
+                            switch (splitArr[i].toLowerCase()) {
+                                case 'xs':
+									render = isDisplayed('.ng-if-bootstrap-grid-detection-block .visible-xs');
+                                    break;
+                                case 'sm':
+									render = isDisplayed('.ng-if-bootstrap-grid-detection-block .visible-sm');
+									break;
+                                case 'md':
+									render = isDisplayed('.ng-if-bootstrap-grid-detection-block .visible-md');
+                                    break;
+                                case 'lg':
+                                    render = isDisplayed('.ng-if-bootstrap-grid-detection-block .visible-lg');
+                                    break;
+                                default:
+                                    throw 'Unknown bootstrap grid class: ' + splitArr[i];
+                            }
+                            if (render === true) {
+                                break;
+                            }
+                        }
+                        return render;
+                    };
+                    ngIf.link.apply(ngIf, arguments);
+                }
+
+        };
+    }])
+    .directive('ngIfNotBootstrapGrid', ['ngIfDirective', '$window', function(ngIfDirective, $window) {
+        var ngIf = ngIfDirective[0];
+
+        return {
+            transclude: ngIf.transclude,
+            priority: ngIf.priority,
+            terminal: ngIf.terminal,
+            restrict: ngIf.restrict,
+            link: function($scope, $element, $attr) {
+
+                angular.element($window).bind('resize', function() {
+                    $scope.$apply();
+                });
+
+				function isDisplayed(query) {
+					var elem = document.querySelector(query);
+					var elementStyleMap = $window.getComputedStyle(elem, null);
+					return elementStyleMap.display !== 'none';
+				}
+
+				// This should be in compile() function, but that breaks the code.
+				var tester = document.getElementsByClassName("ng-if-bootstrap-grid-detection-block");
+		        if (tester.length === 0) {
+					var e = angular.element(document).find('body');
+					e.append(
+		                '<!-- ng-if-bootstrap-grid-detection-block: -->\
+						<div class="ng-if-bootstrap-grid-detection-block">\
+							<div class="device-xs visible-xs visible-xs-block"></div>\
+							<div class="device-sm visible-sm visible-sm-block"></div>\
+							<div class="device-md visible-md visible-md-block"></div>\
+							<div class="device-lg visible-lg visible-lg-block"></div>\
+						</div>');
+		        }
+
+                $attr.ngIf = function() {
+                    var render = false;
+                    var splitArr = $attr.ngIfNotBootstrapGrid.split(/[, ]+/g); // allows runtime changes
+
+                    for (var i = 0; i < splitArr.length; i++) {
+                        switch (splitArr[i].toLowerCase()) {
 							case 'xs':
-								render = yourCustomValue > 767;
+								render = !isDisplayed('.ng-if-bootstrap-grid-detection-block .visible-xs');
 								break;
 							case 'sm':
-								render = yourCustomValue < 768 || yourCustomValue > 991;
+								render = !isDisplayed('.ng-if-bootstrap-grid-detection-block .visible-sm');
 								break;
 							case 'md':
-								render = yourCustomValue < 992 || yourCustomValue > 1199;
+								render = !isDisplayed('.ng-if-bootstrap-grid-detection-block .visible-md');
 								break;
 							case 'lg':
-								render = yourCustomValue < 1200;
+								render = !isDisplayed('.ng-if-bootstrap-grid-detection-block .visible-lg');
 								break;
 							default:
 								throw 'Unknown bootstrap grid class: ' + splitArr[i];
-						}
-						if(render === true) {
-							break;
-						}
-					}
-					return render;
-				};
-				ngIf.link.apply(ngIf, arguments);
-			}
-		};
-	}]);
+                        }
+                        if (render === true) {
+                            break;
+                        }
+                    }
+                    return render;
+                };
+                ngIf.link.apply(ngIf, arguments);
+            }
+        };
+    }]);

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

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

Improved metrics

Total package byte prevSize

16092

increased by142.64%

Number of package files

6

increased by20%

Lines of code

120

increased by36.36%

Number of lines in readme file

49

increased by6.52%

No dependency changes