Wrapped intro.js into directive with hardcoded values

mendhak · mendhak · commit 393eaf01ad9a · 2013-09-13T17:16:48.000+01:00
diff --git a/angular-intro.js b/angular-intro.js
@@ -0,0 +1,55 @@
+var ngIntroDirective = angular.module('angular-intro',[]);
+
+ngIntroDirective.directive('ngIntro', [function () {
+
+
+
+   return {
+       restrict: 'A',
+
+       scope:
+       {
+           callmethod: '=ngIntroFunction',
+           opts: '=ngIntroOptions'
+
+       },
+       link: function(scope, element, attrs){
+
+           scope.callmethod = function() {
+               attrs.$observe('IntroSnippets', function(actualValue){
+                   console.log(actualValue);
+               });
+
+               var intro = introJs();
+               intro.setOptions({
+                   steps:[
+                       {
+                           element: document.querySelector('#step1'),
+                           intro: "This is a tooltip."
+                       },
+                       {
+                           element: document.querySelectorAll('#step2')[0],
+                           intro: "Ok, wasn't that fun?",
+                           position: 'right'
+                       },
+                       {
+                           element: '#step3',
+                           intro: 'More features, more fun.',
+                           position: 'left'
+                       },
+                       {
+                           element: '#step4',
+                           intro: "Another step.",
+                           position: 'bottom'
+                       },
+                       {
+                           element: '#step5',
+                           intro: 'Get it, use it.'
+                       }
+                   ]
+               });
+               intro.start();
+           };
+       }
+   }
+}]);
diff --git a/example/index.html b/example/index.html
@@ -1,25 +1,26 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" data-ng-app="myApp">
 <head>
     <meta charset="utf-8">
-    <title>Defining with JSON configuration</title>
+    <title>Port of intro.js to Angular</title>
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta name="description" content="Intro.js - Better introductions for websites and features with a step-by-step guide for your projects.">
     <meta name="author" content="Afshin Mehrabani (@afshinmeh) in usabli.ca group">
 
     <!-- styles -->
     <link href="assets/css/bootstrap.min.css" rel="stylesheet">
     <link href="assets/css/demo.css" rel="stylesheet">
+    <link href="assets/css/bootstrap-responsive.min.css" rel="stylesheet">
 
     <!-- Add IntroJs styles -->
     <link href="../lib/introjs.css" rel="stylesheet">
 
-    <link href="assets/css/bootstrap-responsive.min.css" rel="stylesheet">
+
 </head>
 
-<body>
+<body >
 
-<div class="container-narrow">
+<div class="container-narrow" ng-controller="MyController" ng-intro ng-intro-options="IntroSnippets" ng-intro-function="StartTheTour">
 
     <div class="masthead">
         <ul id="step5" class="nav nav-pills pull-right">
@@ -35,7 +36,7 @@ <h3 class="muted">Intro.js</h3>
     <div class="jumbotron">
         <h1 id="step1">Programmatic</h1>
         <p id="step4" class="lead">In this example we are going to define steps with JSON configuration.</p>
-        <a class="btn btn-large btn-success" href="javascript:void(0);" onclick="startIntro();">Show me how</a>
+        <a class="btn btn-large btn-success" ng-click="StartTheTour();">Show me how</a>
     </div>
 
     <hr>
@@ -69,39 +70,11 @@ <h4>Section Six</h4>
 
 </div>
 <script type="text/javascript" src="../lib/intro.min.js"></script>
-<script type="text/javascript">
-    function startIntro(){
-        var intro = introJs();
-        intro.setOptions({
-            steps: [
-                {
-                    element: document.querySelector('#step1'),
-                    intro: "This is a tooltip."
-                },
-                {
-                    element: document.querySelectorAll('#step2')[0],
-                    intro: "Ok, wasn't that fun?",
-                    position: 'right'
-                },
-                {
-                    element: '#step3',
-                    intro: 'More features, more fun.',
-                    position: 'left'
-                },
-                {
-                    element: '#step4',
-                    intro: "Another step.",
-                    position: 'bottom'
-                },
-                {
-                    element: '#step5',
-                    intro: 'Get it, use it.'
-                }
-            ]
-        });
-
-        intro.start();
-    }
-</script>
+
+
+<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
+<script src="../angular-intro.js"></script>
+<script src="../lib/app.js"></script>
+
 </body>
 </html>
diff --git a/lib/app.js b/lib/app.js
@@ -0,0 +1,6 @@
+var app = angular.module('myApp', ['angular-intro']);
+
+app.controller('MyController', function ($scope) {
+
+});
+

-Original file line number
+Diff line change
@@ @@ -0,0 +1,6 @@ @@
 +var app = angular.module('myApp', ['angular-intro']);
++
 +app.controller('MyController', function ($scope) {
++
 +});
++