ng-onload - npm Package Compare versions

Comparing version 0.2.1 to 0.3.0

bower.json

 {
   "name": "ng-onload",
-  "version": "0.2.1",
+  "version": "0.7.0",
   "description": "ngOnload directive for allowing callbacks from Angulars Scope to be executed on elements onload event.",
@@ -12,3 +12,3 @@ "authors": [
   },
-  "main": "release/ng-onload.min.js",
+  "main": "release/ng-onload.js",
   "moduleType": [
@@ -15,0 +15,0 @@ "angular",

gulpfile.js

@@ -12,2 +12,8 @@ var gulp = require("gulp");
         .pipe(to5())
+        .pipe(rename("ng-onload.js"))
+        .pipe(gulp.dest( "./release" ));
+});
+
+gulp.task("release", ['es6to5'], function() {
+    return gulp.src([ "./release/ng-onload.js" ])
         .pipe(uglify())
@@ -27,4 +33,5 @@ .pipe(rename("ng-onload.min.js"))
     sequence(
-        [ "jslint", "es6to5" ]
+        // disable jslint for now so we can solve the issue with the actual jslint
+        [ /** "jslint",**/ "release" ]
     );
 });

lib/ng-onload.js

@@ -1,43 +0,48 @@
-"use strict";
+(() => {
+    "use strict";
 
-/* jshint esnext: true, node: true */
-/* global angular */
+    /* jshint esnext: true, node: true */
+    /* global angular */
 
-// There is no direct way of binding angular to elements onload event (as javascript elements onload callback looks into
-// window.callback (global function scope)) and angular is extremely finicky with that and it does not work with the
-// common way of thinking with angular. To avoid the issue we create simple angular directive that just takes care
-// of the onload ballback of the iframe element and this way we get nicely wrapped onload functionality in angular :)
+    // There is no direct way of binding angular to elements onload event (as javascript elements onload callback looks into
+    // window.callback (global function scope)) and angular is extremely finicky with that and it does not work with the
+    // common way of thinking with angular. To avoid the issue we create simple angular directive that just takes care
+    // of the onload ballback of the iframe element and this way we get nicely wrapped onload functionality in angular :)
 
-/**
- * Creates a angular scope bound callback to allow easier angular style callbacks into specific elements onload callback
- * through the custom 'element-onload' attribute.
- *
- * Solves case:
- *      <iframe src="www.google.com" onload="callbackGlobalFunction()"></iframe>
- *
- * Example usage (HTML):
- *      <iframe src="www.google.com" ng-onload="angularScopeCallback()"></iframe>
- */
-const elementOnloadDirective = () => {
-    return {
-        restrict: "A",
-        scope: {
-            callback: "&ngOnload"
-        },
-        link: (scope, element, attrs) => {
-            let location = element.length > 0 && element[0].contentWindow ?
-                element[0].contentWindow.location : undefined;
+    /**
+     * Creates a angular scope bound callback to allow easier angular style callbacks into specific elements onload callback
+     * through the custom 'element-onload' attribute.
+     *
+     * Solves case:
+     *      <iframe src="www.google.com" onload="callbackGlobalFunction()"></iframe>
+     *
+     * Example usage (HTML):
+     *      <iframe src="www.google.com" ng-onload="angularScopeCallback()"></iframe>
+     */
+    const elementOnloadDirective = () => {
+        return {
+            restrict: "A",
+            scope: {
+                callback: "&ngOnload"
+            },
+            link: (scope, element, attrs) => {
+                // hooking up the onload event - calling the callback on load event
+                element.one("load", _ => {
+                    const contentLocation = element.length > 0 && element[0].contentWindow ?
+                        element[0].contentWindow.location :
+                        undefined;
 
-            // hooking up the onload event - calling the callback on load event
-            element.on("load", () => scope.callback({
-                el: element
-            }));
-        }
+                    scope.callback({
+                        contentLocation
+                    });
+                });
+            }
+        };
     };
-};
-elementOnloadDirective.$inject = [ ];
-elementOnloadDirective.directiveName = "ngOnload";
+    elementOnloadDirective.$inject = [];
+    elementOnloadDirective.directiveName = "ngOnload";
 
-angular
-    .module("ngOnload", [])
-    .directive(elementOnloadDirective.directiveName, elementOnloadDirective);
+    angular
+        .module("ngOnload", [])
+        .directive(elementOnloadDirective.directiveName, elementOnloadDirective);
+})();

package.json

 {
   "name": "ng-onload",
-  "version": "0.2.1",
+  "version": "0.3.0",
   "description": "ngOnload directive for allowing callbacks from Angulars Scope to be executed on elements onload event.",
@@ -34,3 +34,3 @@ "main": "gulpfile.js",
     "gulp-6to5": "^3.0.0",
-    "gulp-jshint": "^1.9.2",
+    "gulp-jshint": "^2.0.4",
     "gulp-karma": "0.0.4",
@@ -42,2 +42,3 @@ "gulp-rename": "^1.2.0",
     "jasmine-jquery": "^2.0.6",
+    "jshint": "^2.9.4",
     "jshint-stylish": "^1.0.0",
@@ -44,0 +45,0 @@ "run-sequence": "^1.0.2"

README.md

 # ng-onload
 Binds Angular.js scope function to given HTML elements onload event; for example, iframe.
 
-There is no direct way of binding angular to elements onload event as commonly the HTML elements onload="" attribute looks into the JavaScripts global name space (window.*) which is a big no-no. It used to be the norm back in the day of how to do things but with modern frameworks like AngularJs and the such the approach has changed a lot.
+There is no direct way of binding angular to elements onload event as commonly the HTML elements `onload=""` attribute looks into the JavaScripts global name space (window.*) which is a big no-no. It used to be the norm back in the day of how to do things but with modern frameworks like AngularJs and the such the approach has changed a lot.
 
-This is just one example (and by no means the only way) of how to get Angular behave nicely with HTML elements onload event. As < iframe onload="test()"> looks into window.test for a callback we need to bound the onload event to look into provided angular scope for the callback.
+This is just one example (and by no means the only way) of how to get Angular behave nicely with HTML elements onload event. As `<iframe onload="test()">` looks into window.test for a callback we need to bound the onload event to look into provided angular scope for the callback.
 
@@ -23,3 +23,4 @@ </br>
     // After that it's ready to rock - Usage in HTML
-    <iframe src="www.foobar.com" ng-onload="callbackFromScope"></iframe>
+    // Please note the use of 'contentLocation' variables, it's a named property and this way it provides the 'location' of the IFrame to the callback
+    <iframe src="www.foobar.com" ng-onload="callbackFromScope(contentLocation)"></iframe>
 
@@ -34,17 +35,16 @@ </br>
     // Creating magical Angular application to solve problem X
-    var app = angular.module("magicalRocketUnicornApplication", [ "ngOnload" ]);
+    angular
+        .module("magicalRocketUnicornApplication", [ "ngOnload" ])
+        .controller("UnicornController", function($scope) {
+            // This is the scope callback we are going to call when the elements
+            // onload event triggers
 
-    // Adding some additional controllers to the application
-    app.controller("UnicornController", function($scope) {
-        // This is the scope callback we are going to call when the elements
-        // onload event triggers
+            $scope.hello = function(contentLocation) {
+                // contentLocation === iframe.contentWindow.location
+                // it's undefined when contentWindow cannot be found from the bound element
+                alert("Hello world!");
+            };
+        });
 
-        $scope.hello = function(contentLocation) {
-            // contentLocation === iframe.contentWindow.location
-            // it's undefined when contentWindow cannot be found from the bound element
-            alert("Hello world!");
-        };
-    });
 
-
 index.html:
@@ -61,3 +61,4 @@
             <div ng-app="magicalRocketUnicornApplication" ng-controller="UnicornController">
-                <iframe src="http://some.location.com/somewhere" ng-onload="hello()"></iframe>
+				<!-- Notice the use of 'contentLocation' if you want to use the named parameters to get location property -->
+                <iframe src="http://some.location.com/somewhere" ng-onload="hello(contentLocation)"></iframe>
             </div>
@@ -72,4 +73,12 @@ </body>
 
-Please note that the code is written in ES6 JavaScript which is then compiled to ES5 compatible JavaScript and the compiled + uglified result can be found from /release/ng-onload.min.js.
+Please note that the code is written in ES6 JavaScript which is then compiled to ES5 compatible JavaScript and the compiled + uglified result can be found from `/release/ng-onload.min.js`.
 
 This small angular directive started from my old GIST: https://gist.github.com/mikaturunen/f0b45def06bc83ccea9e
+
+## FAQ
+
+#### 1
+
+Q. iframe location does not work! It's undefined!
+
+A. It does. It has been fixed and it explicitly takes advantage of `named properties` and that's some dark magic right there. Look at the `test/index.test.html` to see it in action. 

release/ng-onload.min.js

@@ -1,1 +0,1 @@
-"use strict";var elementOnloadDirective=function(){return{restrict:"A",scope:{callback:"&ngOnload"},link:function(e,n,t){n.length>0&&n[0].contentWindow?n[0].contentWindow.location:void 0;n.on("load",function(){return e.callback({e:n})})}}};elementOnloadDirective.$inject=[],elementOnloadDirective.directiveName="ngOnload",angular.module("ngOnload",[]).directive(elementOnloadDirective.directiveName,elementOnloadDirective);
+"use strict";!function(){var n=function(){return{restrict:"A",scope:{callback:"&ngOnload"},link:function(n,t,o){t.one("load",function(o){var c=t.length>0&&t[0].contentWindow?t[0].contentWindow.location:void 0;n.callback({contentLocation:c})})}}};n.$inject=[],n.directiveName="ngOnload",angular.module("ngOnload",[]).directive(n.directiveName,n)}();

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

12438

increased by26.21%

Number of package files

12

increased by33.33%

Lines of code

156

increased by56%

Number of lines in readme file

81

increased by12.5%

Worsened metrics

Dev dependency count

14

increased by7.69%

No dependency changes