Worked in progress - hooked angular up to fire the chardin.js

jeffthompson1971 · Jul 5, 2014 · 25165d1 · 25165d1
1 parent 2e9e431
commit 25165d1
Show file tree

Hide file tree

Showing 10 changed files with 238 additions and 2 deletions.
diff --git a/.gitignore b/.gitignore
@@ -4,4 +4,4 @@ dist
 .sass-cache
 .idea
 *.iml
-app/bower_components
+bower_components
diff --git a/bower.json b/bower.json
@@ -16,5 +16,10 @@
 		"bower_components",
 		"test",
 		"tests"
-	]
+	],
+  "dependencies": {
+    "jQuery": ">=1.6.0 <2.0.0",
+    "chardin.js": "~0.1.3",
+    "angular": "1.2.19"
+  }
 }
diff --git a/example/css/bootstrap-responsive.min.css b/example/css/bootstrap-responsive.min.css
diff --git a/example/css/bootstrap.min.css b/example/css/bootstrap.min.css
diff --git a/example/css/demo.css b/example/css/demo.css
@@ -0,0 +1,99 @@
+body {
+  background-color: #fff;
+  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#eee), color-stop(25%, #fff), to(#fff));
+  background-image: -webkit-linear-gradient(#eee, #fff 25%, #fff);
+  background-image: -moz-linear-gradient(top, #eee, #fff 25%, #fff);
+  background-image: -ms-linear-gradient(#eee, #fff 25%, #fff);
+  background-image: -o-linear-gradient(#eee, #fff 25%, #fff);
+  background-image: linear-gradient(#eee, #fff 25%, #fff);
+  background-repeat: no-repeat;
+  background-attachment: fixed;
+}
+
+.primary.btn {
+  color: #fff;
+  text-decoration: none;
+  text-shadow: 0 -1px 0 rgba(0,0,0,.5);
+  background-color: #3072b3; /* Old browsers */
+  background-repeat: repeat-x; /* Repeat the gradient */
+  background-image: -moz-linear-gradient(top, #599bdc 0%, #3072b3 100%); /* FF3.6+ */
+  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#599bdc), color-stop(100%,#3072b3)); /* Chrome,Safari4+ */
+  background-image: -webkit-linear-gradient(top, #599bdc 0%,#3072b3 100%); /* Chrome 10+,Safari 5.1+ */
+  background-image: -ms-linear-gradient(top, #599bdc 0%,#3072b3 100%); /* IE10+ */
+  background-image: -o-linear-gradient(top, #599bdc 0%,#3072b3 100%); /* Opera 11.10+ */
+  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#599bdc', endColorstr='#3072b3',GradientType=0 ); /* IE6-9 */
+  background-image: linear-gradient(top, #599bdc 0%,#3072b3 100%); /* W3C */
+  border: 1px solid #2967a4;
+  -webkit-transition: none;
+     -moz-transition: none;
+          transition: none;
+  -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 2px rgba(0,0,0,.2);
+     -moz-box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 2px rgba(0,0,0,.2);
+          box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 2px rgba(0,0,0,.2);
+}
+.primary.btn:hover {
+  background-position: 0 -15px;
+}
+.primary.btn:active {
+  background-image: none;
+  background-color: #3072b3; /* Old browsers */
+  -webkit-box-shadow: inset 0 5px 10px rgba(0,0,0,.125), 0 1px 2px rgba(0,0,0,.2);
+     -moz-box-shadow: inset 0 5px 10px rgba(0,0,0,.125), 0 1px 2px rgba(0,0,0,.2);
+          box-shadow: inset 0 5px 10px rgba(0,0,0,.125), 0 1px 2px rgba(0,0,0,.2);
+}
+
+.jumbotron {
+  margin: 50px 0;
+  text-align: center;
+}
+.jumbotron h1 {
+  font-size: 100px;
+  font-family: Montserrat, sans-serif;
+  line-height: 1;
+  display: inline-block;
+  color: #444444;
+}
+
+.jumbotron h1.chardinjs-show-element, .chardinjs-show-element {
+  color: #cccccc;
+}
+
+.chardinjs-show-element a {
+  color: rgba(77, 186, 240, 1);
+}
+
+.jumbotron .lead {
+  font-size: 24px;
+  line-height: 1.25;
+}
+
+.jumbotron img {
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
+  max-height: 300px;
+  height: 0px;
+}
+
+.jumbotron .btn {
+  font-size: 21px;
+  padding: 14px 24px;
+  margin: 20px;
+  margin-bottom: 10px;
+}
+
+.links {
+  padding-top: 20px;
+  text-align: center;
+}
+
+.links p, .credits p { display: inline-block; }
+
+.credits, .license {
+  text-align: center;
+  margin: 10px;
+}
+
+.chardinjs-helper-layer[data-id="links"] .chardinjs-tooltip:after {
+  left: 10%;
+}
diff --git a/example/img/chardin.png b/example/img/chardin.png
diff --git a/example/index.html b/example/index.html
@@ -0,0 +1,63 @@
+<!DOCTYPE html>
+<html lang="en" ng-app="app">
+  <head>
+    <meta charset="utf-8">
+    <title>Chardin.js</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="description" content="Chardin.js - Better introductions for websites and features with a step-by-step guide for your projects.">
+    <meta name="author" content="Pablo Fernandez">
+
+    <!-- styles -->
+    <link href='http://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
+    <link href="css/bootstrap.min.css" rel="stylesheet">
+    <link href="css/demo.css" rel="stylesheet">
+
+    <link href="../bower_components/chardin.js/chardinjs.css" rel="stylesheet">
+
+    <link href="css/bootstrap-responsive.min.css" rel="stylesheet">
+
+    <script src="../bower_components/jQuery/dist/jquery.min.js"></script>
+    <script src="../bower_components/chardin.js/chardinjs.min.js"></script>
+    <script src="../bower_components/angular/angular.js"></script>
+    <script src="../lib/angular-help-overlay.js"></script>
+    <script src="js/app.js"></script>
+    <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" help-overlay>
+    <div class="container">
+      <div class="jumbotron">
+        <button ng-click="hello()">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="" 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">
+            Baked with
+            <b>&lt;3</b>
+            by
+            <a href="https://github.com/heelhook">@heelhook</a>.
+          </p>
+        </div>
+      </div>
+
+
+        <div class="links">
+          <p id="links" data-intro="Links to Github, Twitter, etc." data-position="top">
+            <a href="https://twitter.com/share" class="twitter-share-button" data-lang="en" data-text="Check out Chardin.js, simple overlay instructions for apps, https://heelhook.github.com/chardin.js" data-count="none" data-via="pablo2dot0">Tweet</a>
+            <a href="https://twitter.com/pablo2dot0" class="twitter-follow-button" data-show-count="false" data-lang="en">Follow @pablo2dot0</a>
+            <iframe style="display: inline-block;" frameborder="no" scrolling="no" height="30px" width="70px" src="http://hnlike.com/upvote.php?link=http%3A%2F%2Fheelhook.github.com&title=Chardin">iframes not supported by your browser</iframe>
+          </p>
+        </div>
+
+<div class="license">
+  Code licensed under the
+  <a href="http://www.apache.org/licenses/LICENSE-2.0">Apache License v2.0</a>.
+</div>
+</div>
+</body>
+</html>
diff --git a/example/js/app.js b/example/js/app.js
@@ -0,0 +1,16 @@
+angular.module('app', ['angular-help-overlay']).controller('MainCtrl', function ($scope) {
+
+  $scope.hello = function() {
+    var picture = $('.jumbotron img');
+    if (picture.is(':visible')) {
+      return ($('body').data('chardinJs')).toggle();
+    } else {
+      return picture.animate({
+        height: 250
+      }, 600, function() {
+        return ($('body').data('chardinJs')).toggle();
+      });
+    }
+  };
+
+});
diff --git a/example/js/demo.js b/example/js/demo.js
diff --git a/lib/angular-help-overlay.js b/lib/angular-help-overlay.js
@@ -0,0 +1,10 @@
+'use strict';
+
+angular.module('angular-help-overlay', []).directive('helpOverlay', ['$window', function ($window) {
+  return {
+    restrict: 'A',
+    link: function(scope, element, attributes) {
+      element.chardinJs();
+    }
+  };
+}]);