Working first draft. Should be good for production (i.e., initial).

jeffthompson1971 · Jul 7, 2014 · 3012862 · 3012862
1 parent daa9e29
commit 3012862
Show file tree

Hide file tree

Showing 5 changed files with 136 additions and 14 deletions.
diff --git a/Gruntfile.js b/Gruntfile.js
@@ -0,0 +1,64 @@
+module.exports = function(grunt) {
+
+	grunt.initConfig({
+		pkg: grunt.file.readJSON('package.json'),
+
+		files : {
+			src: ['src/angular-help-overlay.js']
+		},
+
+		jshint: {
+			all: {
+				src: '<%= files.src %>'
+			}
+		},
+
+		concat: {
+			dist: {
+				src: '<%= files.src %>',
+				dest: 'lib/<%= pkg.name %>.js'
+			}
+		},
+
+		uglify: {
+			options: {
+				preserveComments: false,
+				banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n',
+				report: 'min',
+				compress: {
+					drop_console: true
+				}
+			},
+			dist: {
+				files: {
+					'lib/<%= pkg.name %>.min.js': ['<%= concat.dist.dest %>']
+				}
+			}
+		},
+
+		watch : {
+			js: {
+				files: '<%= files.src %>',
+				tasks: ['jshint', 'concat']
+			}
+		},
+
+		connect: {
+			server: {
+				options: {
+					port: 8000,
+					base: '.',
+					keepalive: true
+				}
+			}
+		}
+	});
+
+	grunt.loadNpmTasks('grunt-contrib-uglify');
+	grunt.loadNpmTasks('grunt-contrib-concat');
+	grunt.loadNpmTasks('grunt-contrib-jshint');
+	grunt.loadNpmTasks('grunt-contrib-watch');
+	grunt.loadNpmTasks('grunt-contrib-connect');
+
+	grunt.registerTask('default', ['jshint', 'concat', 'uglify']);
+};
diff --git a/example/index.html b/example/index.html
@@ -24,16 +24,16 @@
     <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
   </head>
 
-  <body ng-controller="MainCtrl" >
-    <div class="container" help-overlay="showHelp" help-start="onStart(event)" help-end="onStop(event)">
+  <body ng-controller="MainCtrl" help-overlay="showHelp" overlay-start-callback="onStart(event)" overlay-stop-callback="onStop(event)">
+    <div class="container" >
       <div class="jumbotron">
-        <button ng-click="toggleHelp()">FOOOOOO</button>
         <h1 data-intro="Project title" data-position="right">Chardin.js</h1>
         <p class="lead">
           Simple overlay instructions for your apps.
         </p>
         <img src="img/chardin.png" data-intro="An awesome 18th-century painter, who found beauty in everyday, common things." data-position="right" />
-        <a href="#" class="btn btn-large primary" data-toggle="chardinjs" data-intro="This button toggles the overlay, you can click it, even when the overlay is visible" data-position="left">See it in action</a>
+        <a href="#" class="btn btn-large primary" data-toggle="chardinjs" data-intro="This button toggles the overlay, you can click it, even when the overlay is visible"
+           data-position="left" ng-click="toggleHelp()">See it in action</a>
         <a href="" id="opentour" class="hide" data-toggle="chardinjs">Or open it again</a>
         <div class="credits">
           <p data-intro="Author of this plugin, aka Pablo Fernandez" data-position="right">

diff --git a/lib/angular-help-overlay.js b/lib/angular-help-overlay.js
@@ -1,44 +1,47 @@
-'use strict';
+/*global angular:false */
 
 angular.module('angularHelpOverlay', []).directive('helpOverlay', ['$document', function ($document) {
+  var noop = false; // Special flag in case we get an a chardinJs change event outside of our control.
   return {
     restrict: 'A',
     scope: {
       helpOverlay: '=',
-      helpStart: '&',
-      helpStop: '&'
+      overlayStart: '&overlayStartCallback',
+      overlayStop: '&overlayStopCallback'
     },
     link: function (scope, element, attrs) {
 
       $document.on('chardinJs:start', function (event) {
-        if (angular.isFunction(scope.helpStart)) {
-          scope.helpStart(event);
+        if (angular.isFunction(scope.overlayStart)) {
+          scope.overlayStart(event);
         }
 
-        console.log('START');
         if (scope.helpOverlay === false) {
           scope.$apply(function () {
+            noop = true;
             scope.helpOverlay = true;
           });
         }
       });
 
       $document.on('chardinJs:stop', function (event) {
-        if (angular.isFunction(scope.helpStop)) {
-          scope.helpStop(event);
+        if (angular.isFunction(scope.overlayStop)) {
+          scope.overlayStop(event);
         }
 
-        console.log('STOP');
         if (scope.helpOverlay === true) {
           scope.$apply(function () {
+            noop = true;
             scope.helpOverlay = false;
           });
         }
       });
 
       scope.$watch('helpOverlay', function (newValue, oldValue) {
         if (newValue !== oldValue) {
-          if (newValue === true) {
+          if (noop === true) {
+            noop = false;
+          } else if (newValue === true) {
             element.chardinJs('start');
           } else if (newValue === false) {
             element.chardinJs('stop');

diff --git a/lib/angular-help-overlay.min.js b/lib/angular-help-overlay.min.js
diff --git a/src/angular-help-overlay.js b/src/angular-help-overlay.js
@@ -0,0 +1,53 @@
+/*global angular:false */
+
+angular.module('angularHelpOverlay', []).directive('helpOverlay', ['$document', function ($document) {
+  var noop = false; // Special flag in case we get an a chardinJs change event outside of our control.
+  return {
+    restrict: 'A',
+    scope: {
+      helpOverlay: '=',
+      overlayStart: '&overlayStartCallback',
+      overlayStop: '&overlayStopCallback'
+    },
+    link: function (scope, element, attrs) {
+
+      $document.on('chardinJs:start', function (event) {
+        if (angular.isFunction(scope.overlayStart)) {
+          scope.overlayStart(event);
+        }
+
+        if (scope.helpOverlay === false) {
+          scope.$apply(function () {
+            noop = true;
+            scope.helpOverlay = true;
+          });
+        }
+      });
+
+      $document.on('chardinJs:stop', function (event) {
+        if (angular.isFunction(scope.overlayStop)) {
+          scope.overlayStop(event);
+        }
+
+        if (scope.helpOverlay === true) {
+          scope.$apply(function () {
+            noop = true;
+            scope.helpOverlay = false;
+          });
+        }
+      });
+
+      scope.$watch('helpOverlay', function (newValue, oldValue) {
+        if (newValue !== oldValue) {
+          if (noop === true) {
+            noop = false;
+          } else if (newValue === true) {
+            element.chardinJs('start');
+          } else if (newValue === false) {
+            element.chardinJs('stop');
+          }
+        }
+      });
+    }
+  };
+}]);