From f3cae0eb1b2d6727ad837a4ab06e8bc53c2fe696 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jesper=20Lindstr=C3=B8m=20Nielsen?= Date: Thu, 7 Apr 2016 09:23:35 +0200 Subject: [PATCH 1/3] Fixed issue #71 by changing require('intro') to require('intro.js') which is the real name of the npm package --- build/angular-intro.min.js | 4 ++-- src/angular-intro.js | 6 ++---- 2 files changed, 4 insertions(+), 6 deletions(-) diff --git a/build/angular-intro.min.js b/build/angular-intro.min.js index 6386cbe..398c916 100644 --- a/build/angular-intro.min.js +++ b/build/angular-intro.min.js @@ -1,2 +1,2 @@ -/*! angular-intro.js 2016-02-11 */ -!function(a,b){"function"==typeof define&&define.amd?define(["angular","intro"],b):"object"==typeof exports?module.exports=b(require("angular"),require("intro")):a.angularIntroJs=b(a.angular,a.introJs)}(this,function(a,b){"object"==typeof b&&(b=b.introJs);var c=a.module("angular-intro",[]);return c.directive("ngIntroOptions",["$timeout",function(a){return{restrict:"A",scope:{ngIntroMethod:"=",ngIntroExitMethod:"=?",ngIntroNextMethod:"=?",ngIntroPreviousMethod:"=?",ngIntroOptions:"=",ngIntroOncomplete:"=",ngIntroOnexit:"=",ngIntroOnchange:"=",ngIntroOnbeforechange:"=",ngIntroOnafterchange:"=",ngIntroAutostart:"=",ngIntroAutorefresh:"="},link:function(c,d,e){var f,g,h;c.ngIntroMethod=function(d){h=c.$on("$locationChangeStart",function(){f.exit()}),f="string"==typeof d?b(d):b(),f.setOptions(c.ngIntroOptions),c.ngIntroAutorefresh&&(g=c.$watch(function(){f.refresh()})),c.ngIntroOncomplete&&f.oncomplete(function(){c.ngIntroOncomplete.call(this,c),a(function(){c.$digest()}),j()}),c.ngIntroOnexit&&f.onexit(function(){c.ngIntroOnexit.call(this,c),a(function(){c.$digest()}),j()}),c.ngIntroOnchange&&f.onchange(function(b){c.ngIntroOnchange.call(this,b,c),a(function(){c.$digest()})}),c.ngIntroOnbeforechange&&f.onbeforechange(function(b){c.ngIntroOnbeforechange.call(this,b,c),a(function(){c.$digest()})}),c.ngIntroOnafterchange&&f.onafterchange(function(b){c.ngIntroOnafterchange.call(this,b,c),a(function(){c.$digest()})}),"number"==typeof d?f.goToStep(d).start():f.start()},c.ngIntroNextMethod=function(){f.nextStep()},c.ngIntroPreviousMethod=function(){f.previousStep()},c.ngIntroExitMethod=function(a){f.exit(),a()};var i=c.$watch("ngIntroAutostart",function(){c.ngIntroAutostart&&a(function(){c.ngIntroMethod()}),i()});c.$on("$locationChangeSuccess",function(){"undefined"!=typeof f&&f.exit()});var j=function(){h&&h(),g&&g()};c.$on("$destroy",function(){j()})}}}]),c}); \ No newline at end of file +/*! angular-intro.js 2016-04-07 */ +!function(a,b){"function"==typeof define&&define.amd?define(["angular","intro.js"],b):"object"==typeof exports?module.exports=b(require("angular"),require("intro.js")):a.angularIntroJs=b(a.angular,a.introJs)}(this,function(a,b){"object"==typeof b&&(b=b.introJs);var c=a.module("angular-intro",[]);return c.directive("ngIntroOptions",["$timeout",function(a){return{restrict:"A",scope:{ngIntroMethod:"=",ngIntroExitMethod:"=?",ngIntroNextMethod:"=?",ngIntroPreviousMethod:"=?",ngIntroOptions:"=",ngIntroOncomplete:"=",ngIntroOnexit:"=",ngIntroOnchange:"=",ngIntroOnbeforechange:"=",ngIntroOnafterchange:"=",ngIntroAutostart:"=",ngIntroAutorefresh:"="},link:function(c,d,e){var f,g,h;c.ngIntroMethod=function(d){h=c.$on("$locationChangeStart",function(){f.exit()}),f="string"==typeof d?b(d):b(),f.setOptions(c.ngIntroOptions),c.ngIntroAutorefresh&&(g=c.$watch(function(){f.refresh()})),c.ngIntroOncomplete&&f.oncomplete(function(){c.ngIntroOncomplete.call(this,c),a(function(){c.$digest()}),j()}),c.ngIntroOnexit&&f.onexit(function(){c.ngIntroOnexit.call(this,c),a(function(){c.$digest()}),j()}),c.ngIntroOnchange&&f.onchange(function(b){c.ngIntroOnchange.call(this,b,c),a(function(){c.$digest()})}),c.ngIntroOnbeforechange&&f.onbeforechange(function(b){c.ngIntroOnbeforechange.call(this,b,c),a(function(){c.$digest()})}),c.ngIntroOnafterchange&&f.onafterchange(function(b){c.ngIntroOnafterchange.call(this,b,c),a(function(){c.$digest()})}),"number"==typeof d?f.goToStep(d).start():f.start()},c.ngIntroNextMethod=function(){f.nextStep()},c.ngIntroPreviousMethod=function(){f.previousStep()},c.ngIntroExitMethod=function(a){f.exit(),a()};var i=c.$watch("ngIntroAutostart",function(){c.ngIntroAutostart&&a(function(){c.ngIntroMethod()}),i()});c.$on("$locationChangeSuccess",function(){"undefined"!=typeof f&&f.exit()});var j=function(){h&&h(),g&&g()};c.$on("$destroy",function(){j()})}}}]),c}); \ No newline at end of file diff --git a/src/angular-intro.js b/src/angular-intro.js index ce56b9a..3e5b7da 100644 --- a/src/angular-intro.js +++ b/src/angular-intro.js @@ -1,8 +1,8 @@ (function (root, factory) { if (typeof define === 'function' && define.amd) { - define(["angular", "intro"], factory); + define(["angular", "intro.js"], factory); } else if (typeof exports === 'object') { - module.exports = factory(require('angular'), require('intro')); + module.exports = factory(require('angular'), require('intro.js')); } else { root.angularIntroJs = factory(root.angular, root.introJs); } @@ -145,5 +145,3 @@ return ngIntroDirective; })); - - From d47cd63e7d93d9b43118fadd1d025055a65f12be Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jesper=20Lindstr=C3=B8m=20Nielsen?= Date: Thu, 7 Apr 2016 12:08:46 +0200 Subject: [PATCH 2/3] updated the readme, so it contains npm and webpack installation --- README.md | 37 ++++++++++++++++++++++--------------- package.json | 38 -------------------------------------- 2 files changed, 22 insertions(+), 53 deletions(-) delete mode 100644 package.json diff --git a/README.md b/README.md index 526448a..9352da5 100644 --- a/README.md +++ b/README.md @@ -13,6 +13,19 @@ You can install this package through `Bower` by using the following command : bower install angular-intro.js --save +## NPM + +You can install this package through `NPM` by using the following command : + + npm install angular-intro.js --save + +## Webpack + +You can use this package in your webpack project, first by including `intro.js` and its css file. Next you need to require this package. + + import ngIntro from 'angular-intro.js'; + +This project will return you the hole angular module so if you want to use as a dependency in your own angular module you would need to reference the name `ngIntro.name`. ## How to use @@ -22,19 +35,19 @@ The two main directives are `ng-intro-options` and `ng-intro-method`. `ng-intro-options="IntroOptions"` -You should create a `$scope.IntroOptions` in your controller which contains the intro.js options. The options are exactly the same as [the original](https://github.com/usablica/intro.js#options). This also allows you to modify the options as part of your controller behavior if necessary. You don't have to use `IntroOptions`, you can specify some other name. +You should create a `$scope.IntroOptions` in your controller which contains the intro.js options. The options are exactly the same as [the original](https://github.com/usablica/intro.js#options). This also allows you to modify the options as part of your controller behavior if necessary. You don't have to use `IntroOptions`, you can specify some other name. ### Start method -`ng-intro-method="CallMe"` +`ng-intro-method="CallMe"` The directive will create a method on `$scope.CallMe` so that you can invoke it yourself later. Make sure the there isn't a method `CallMe` already in your controller. To use the method be sure to wrap it with `$timeout`. You don't have to use `CallMe`, you can specify some other name. ### Call the start method -You can invoke it from an event such a click, +You can invoke it from an event such a click, -`ng-click="CallMe();"` +`ng-click="CallMe();"` as long as you are still in the same controller scope. You can also specify a step number in the method call, `CallMe(3);`. @@ -42,7 +55,7 @@ You can start the intro from code, either call `$scope.CallMe();`. If the `$sco ### Autostart -If you set `ng-intro-autostart="true"`, the intro will start as soon as the directive is ready. +If you set `ng-intro-autostart="true"`, the intro will start as soon as the directive is ready. ### Autorefresh @@ -50,7 +63,7 @@ If an intro tour includes dynamic content, use `ng-intro-autorefresh="true"` to ### Callbacks -Intro.js provides several callbacks. You can receive these callbacks in your controller. For example, for the `onchange` event, specify the function name in the directive. +Intro.js provides several callbacks. You can receive these callbacks in your controller. For example, for the `onchange` event, specify the function name in the directive. `ng-intro-onchange="ChangeEvent"` @@ -81,19 +94,19 @@ You can also use this [sample plunker](http://plnkr.co/edit/wo9EzfbOFjM7NDoAvmjA If you want to build or contribute, first, get the node modules needed (grunt, bower) npm install - + Next, use bower to get the JS libraries needed node_modules/.bin/bower install Then, whenever you make any changes, get grunt to build the minified angular-intro.min.js - node_modules/.bin/grunt + node_modules/.bin/grunt Finally, view the demo page to make sure everything's working; start a web server: ./node_modules/.bin/grunt connect:server - + And browse to `http://localhost:8000/example/index.html` @@ -102,9 +115,3 @@ And browse to `http://localhost:8000/example/index.html` ## License As with intro.js, this is under the [MIT license](https://github.com/mendhak/angular-intro.js/blob/master/LICENSE). - - - - - - diff --git a/package.json b/package.json deleted file mode 100644 index 1b3938c..0000000 --- a/package.json +++ /dev/null @@ -1,38 +0,0 @@ -{ - "name": "angular-intro.js", - "version": "1.3.0", - "description": "Angular directive to wrap intro.js", - "main": "src/angular-intro.js", - "directories": { - "example": "example", - "lib": "lib" - }, - "scripts": { - "test": "grunt test" - }, - "repository": { - "type": "git", - "url": "git://github.com/mendhak/angular-intro.js.git" - }, - "keywords": [ - "angular", - "intro.js", - "angular-intro" - ], - "author": "mendhak", - "license": "MIT", - "bugs": { - "url": "https://github.com/mendhak/angular-intro.js/issues" - }, - "homepage": "https://github.com/mendhak/angular-intro.js", - "devDependencies": { - "bower": "~1.5.2", - "grunt": "~0.4.5", - "grunt-cli": "~0.1.13", - "grunt-contrib-connect": "^0.11.2", - "grunt-contrib-jshint": "~0.11.3", - "grunt-contrib-uglify": "~0.9.2", - "grunt-contrib-watch": "~0.6.1", - "load-grunt-tasks": "~3.2.0" - } -} From bbf6a925f5d92b8588bb2854ec4f0b4b198e74bb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jesper=20Lindstr=C3=B8m=20Nielsen?= Date: Thu, 7 Apr 2016 12:10:03 +0200 Subject: [PATCH 3/3] updated the package --- package.json | 47 +++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 47 insertions(+) create mode 100644 package.json diff --git a/package.json b/package.json new file mode 100644 index 0000000..1b00b21 --- /dev/null +++ b/package.json @@ -0,0 +1,47 @@ +{ + "name": "angular-intro.js", + "version": "1.3.0", + "description": "Angular directive to wrap intro.js", + "main": "src/angular-intro.js", + "directories": { + "example": "example" + }, + "scripts": { + "test": "grunt test" + }, + "repository": { + "type": "git", + "url": "git://github.com/mendhak/angular-intro.js.git" + }, + "keywords": [ + "angular", + "intro.js", + "angular-intro" + ], + "author": "mendhak", + "license": "MIT", + "bugs": { + "url": "https://github.com/mendhak/angular-intro.js/issues" + }, + "homepage": "https://github.com/mendhak/angular-intro.js", + "devDependencies": { + "bower": "~1.5.2", + "grunt": "~0.4.5", + "grunt-cli": "~0.1.13", + "grunt-contrib-connect": "^0.11.2", + "grunt-contrib-jshint": "~0.11.3", + "grunt-contrib-uglify": "~0.9.2", + "grunt-contrib-watch": "~0.6.1", + "load-grunt-tasks": "~3.2.0" + }, + "dependencies": { + "bower": "^1.5.4", + "grunt": "^0.4.5", + "grunt-cli": "^0.1.13", + "grunt-contrib-connect": "^0.11.2", + "grunt-contrib-jshint": "^0.11.3", + "grunt-contrib-uglify": "^0.9.2", + "grunt-contrib-watch": "^0.6.1", + "load-grunt-tasks": "^3.2.0" + } +}