Skip to content
Browse files

Correctly chooses default angle

Tour moves forward automatically
Many other updates
  • Loading branch information...
1 parent 9facabe commit 3319867a1b261eb67419a3b738509d59b98279a3 @tommoor committed Oct 6, 2012
Showing with 62 additions and 34 deletions.
  1. +1 −0 .gitignore
  2. +8 −0 css/crumble.css
  3. BIN images/bubble-sprite.png
  4. +9 −13 index.html
  5. +44 −21 js/jquery.crumble.js
View
1 .gitignore
@@ -0,0 +1 @@
+.DS_Store
View
8 css/crumble.css
@@ -0,0 +1,8 @@
+.grumble-text {
+ cursor: pointer;
+}
+
+.grumble50.hover{background-position:-200px 0}
+.grumble100.hover{background-position:-200px -50px}
+.grumble150.hover{background-position:-200px -150px}
+.grumble200.hover{background-position:-200px -300px}
View
BIN images/bubble-sprite.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
22 index.html
@@ -11,7 +11,8 @@
<meta name="description" content="Examples and documentation on crumble.js">
<meta name="author" content="Tom Moor">
- <link rel="stylesheet" href="css/grumble.min.css?v=3">
+ <link rel="stylesheet" href="css/grumble.min.css">
+ <link rel="stylesheet" href="css/crumble.css">
<style>
body {
@@ -107,6 +108,7 @@
padding-left:3px;
height:20px;
border:1px solid #ddd;
+ margin: 200px 50px;
font-size: 12px;
font-family: Consolas, "Lucida Console", monospace;
}
@@ -141,10 +143,6 @@
<h2>Examples</h2>
- <p>
- The following code animates a crumble tour, <a href="#" id="ex1">click here</a> to
- see it in action.
- </p>
<span class="ex" id="one">Step 1</span>
<span class="ex" id="two">Step 2</span>
@@ -154,28 +152,26 @@
</div>
<ol id="tour" style="display: none;">
- <li data-target="#one" data-options="angle:150">
+ <li data-target="#one" data-options="angle:0">
Welcome to the tour, click anywhere to continue
</li>
- <li data-target="#two" data-options="angle:20">
+ <li data-target="#two">
This is a step on the tour, it explains something
</li>
- <li data-target="#three" ddata-options="angle:40;distance:30">
+ <li data-target="#three">
You can trigger events for each step in the tour
</li>
- <li data-target="#four" data-options="angle:200">
+ <li data-target="#four">
and set options easily in HTML!
</li>
</ol>
-
+
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="js/jquery.grumble.min.js"></script>
<script src="js/jquery.crumble.js"></script>
<script>
- $('#ex1').click(function(){
- $('#tour').crumble();
- });
+ $('#tour').crumble();
</script>
</body>
View
65 js/jquery.crumble.js
@@ -19,9 +19,9 @@ var Crumble = function(){
grumble: {
text: '',
angle: 85,
- distance: 20,
+ distance: 30,
showAfter: 0,
- hasHideButton: true
+ hasHideButton: false
},
scrollSpeed: 'fast',
onStep: function(){},
@@ -41,12 +41,27 @@ var Crumble = function(){
if (top < windowTop) {
$('html, body').animate({scrollTop: top - 50}, defaults.scrollSpeed);
} else if (bottom > windowBottom) {
- $('html, body').animate({scrollTop: bottom - windowHeight + 50}, defaults.scrollSpeed);
+ $('html, body').animate({scrollTop: top - windowHeight - 50}, defaults.scrollSpeed);
}
};
var getCurrentGrumble = function() {
- return $('.grumble').last();
+ return $('.grumble').last().next();
+ };
+
+ var calculateAngle = function($element) {
+
+ var windowTop = $(window).scrollTop();
+ var centerX = window.innerWidth/2;
+ var centerY = window.innerHeight/2;
+ var elementX = $element.position().left;
+ var elementY = $element.position().top+windowTop;
+ var o = elementY-centerY;
+ var a = elementX-centerX;
+ var angle = Math.atan2(o, a) * (180/Math.PI);
+
+ if (angle < 0) return angle+90;
+ return angle-90;
};
var methods = {
@@ -103,6 +118,18 @@ var Crumble = function(){
this.step();
},
+ forward: function() {
+
+ // move forward through the tour
+ position++;
+
+ // show the next step
+ methods.step();
+
+ // trigger any bound events
+ defaults.onStep(position);
+ },
+
step: function() {
// if we're at the start, trigger an event
@@ -129,34 +156,30 @@ var Crumble = function(){
// check if target exists
if (!$current.length) {
- // move forward through the tour
- position++;
-
- // show the next step
- methods.step();
-
- // trigger any bound events
- defaults.onStep(position);
+ methods.forward();
return;
}
// everything looks good, continue through the tour
var options = $.extend({}, defaults.grumble, current.options, {
+ angle: current.options.angle || calculateAngle($current),
onHide: function(){
-
- // move forward through the tour
- position++;
-
- // show the next step
- methods.step();
-
- // trigger any bound events
- defaults.onStep(position);
+ methods.forward();
},
onShow: function() {
var $grumble = getCurrentGrumble();
scrollToGrumble($grumble);
+
+ $grumble.click(function(){
+ $current.trigger('hide.bubble');
+ });
+
+ $grumble.hover(function(){
+ $grumble.prev().addClass('hover');
+ }, function(){
+ $grumble.prev().removeClass('hover');
+ });
}
});

0 comments on commit 3319867

Please sign in to comment.
Something went wrong with that request. Please try again.