Skip to content

Commit

Permalink
Added a modal background option, and an expose feature
Browse files Browse the repository at this point in the history 
to expose elements on the tour
also added postRide, postStep, and postExpose callbacks

Change-Id: I5717903e8b040388ad3400271c7c71e49bd89c46
  • Loading branch information
@ehudokai
ehudokai committed Mar 21, 2013
1 parent 670c9e6 commit cb0d25d
Show file tree
Hide file tree
Showing 3 changed files with 232 additions and 33 deletions.
16 changes: 9 additions & 7 deletions demo/demo.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -111,13 +111,15 @@ <h2>Stop #5</h2>
<script>
$(window).load(function() {
$('#joyRideTipContent').joyride({
autoStart : true,
postStepCallback : function (index, tip) {
if (index == 2) {
$(this).joyride('set_li', false, 1);
}
}
});
autoStart : true,
postStepCallback : function (index, tip) {
if (index == 2) {
$(this).joyride('set_li', false, 1);
}
},
modal:true,
expose: true
});
});
</script>

Expand Down
17 changes: 17 additions & 0 deletions joyride-2.0.3.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -238,3 +238,20 @@ body {
left: 0;
cursor: pointer;
}

.joyride-expose-wrapper {
background-color: #ffffff;
position: absolute;
z-index: 102;
-moz-box-shadow: 0px 0px 30px #ffffff;
-webkit-box-shadow: 0px 0px 30px #ffffff;
box-shadow: 0px 0px 30px #ffffff;
}

.joyride-expose-cover {
background: transparent;
position: absolute;
z-index: 10000;
top: 0px;
left: 0px;
}
232 changes: 206 additions & 26 deletions jquery.joyride-2.0.3.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,14 +29,22 @@
'cookieName' : 'joyride', // Name the cookie you'll use
'cookieDomain' : false, // Will this cookie be attached to a domain, ie. '.notableapp.com'
'tipContainer' : 'body', // Where will the tip be attached
'modal' : false, // Whether to cover page with modal during the tour
'expose' : false, // Whether to expose the elements at each step in the tour (requires modal:true)
'postExposeCallback' : $.noop, // A method to call after an element has been exposed
'preRideCallback' : $.noop, // A method to call before the tour starts (passed index, tip, and cloned exposed element)
'postRideCallback' : $.noop, // A method to call once the tour closes (canceled or complete)
'preStepCallback' : $.noop, // A method to call before each step
'postStepCallback' : $.noop, // A method to call after each step
'template' : { // HTML segments for tip layout
'link' : '<a href="#close" class="joyride-close-tip">X</a>',
'timer' : '<div class="joyride-timer-indicator-wrap"><span class="joyride-timer-indicator"></span></div>',
'tip' : '<div class="joyride-tip-guide"><span class="joyride-nub"></span></div>',
'wrapper' : '<div class="joyride-content-wrapper" role="dialog"></div>',
'button' : '<a href="#" class="joyride-next-tip"></a>'
'button' : '<a href="#" class="joyride-next-tip"></a>',
'modal' : '<div class="joyride-modal-bg"></div>',
'expose' : '<div class="joyride-expose-wrapper"></div>',
'exposeCover': '<div class="joyride-expose-cover"></div>'
}
},

Expand All @@ -57,6 +65,7 @@
settings.$document = $(settings.document);
settings.$window = $(window);
settings.$content_el = $(this);
settings.$body = $(settings.tipContainer);
settings.body_offset = $(settings.tipContainer).position();
settings.$tip_content = $('> li', settings.$content_el);
settings.paused = false;
Expand Down Expand Up @@ -87,12 +96,12 @@
// show first tip
if(settings.autoStart)
{
if (!settings.startTimerOnClick && settings.timer > 0) {
methods.show('init');
methods.startTimer();
} else {
methods.show('init');
}
if (!settings.startTimerOnClick && settings.timer > 0) {
methods.show('init');
methods.startTimer();
} else {
methods.show('init');
}
}

}
Expand Down Expand Up @@ -121,11 +130,19 @@

settings.$window.bind('resize.joyride', function (e) {
if(settings.$li){
if (methods.is_phone()) {
methods.pos_phone();
} else {
methods.pos_default();
}
if(settings.exposed && settings.exposed.length>0){
var $els = $(settings.exposed);
$els.each(function(){
var $this = $(this);
methods.un_expose($this);
methods.expose($this);
});
}
if (methods.is_phone()) {
methods.pos_phone();
} else {
methods.pos_default();
}
}
});
} else {
Expand Down Expand Up @@ -232,6 +249,17 @@
settings.attempts = 0;

if (settings.$li.length && settings.$target.length > 0) {
if(init){ //run when we first start
settings.preRideCallback(settings.$li.index(), settings.$next_tip );
if(settings.modal){
methods.show_modal();
}
}
settings.preStepCallback(settings.$li.index(), settings.$next_tip );
if(settings.modal && settings.expose){
methods.expose();
}

opts_arr = (settings.$li.data('options') || ':').split(';');
opts_len = opts_arr.length;

Expand Down Expand Up @@ -331,9 +359,14 @@
},

hide : function () {
settings.postStepCallback(settings.$li.index(), settings.$current_tip);
if(settings.modal && settings.expose){
methods.un_expose();
}
if(!settings.modal){
$('.joyride-modal-bg').hide();
}
settings.$current_tip.hide();
settings.postStepCallback(settings.$li.index(), settings.$current_tip);
},

set_li : function (init) {
Expand Down Expand Up @@ -390,7 +423,7 @@

destroy : function () {
if(!$.isEmptyObject(settings)){
settings.$document.off('.joyride');
settings.$document.off('.joyride');
}

$(window).off('.joyride');
Expand All @@ -413,16 +446,17 @@
}
else
{
methods.hide();
settings.$li = undefined;
methods.show('init');
methods.hide();
settings.$li = undefined;
methods.show('init');
}
},

pos_default : function (init) {
var half_fold = Math.ceil(settings.$window.height() / 2),
tip_position = settings.$next_tip.offset(),
$nub = $('.joyride-nub', settings.$next_tip),
nub_width = Math.ceil($nub.outerWidth() / 2),
nub_height = Math.ceil($nub.outerHeight() / 2),
toggle = init || false;

Expand Down Expand Up @@ -453,15 +487,15 @@

settings.$next_tip.css({
top: settings.$target.offset().top,
left: (settings.$target.outerWidth() + settings.$target.offset().left)});
left: (settings.$target.outerWidth() + settings.$target.offset().left + nub_width)});

methods.nub_position($nub, settings.tipSettings.nubPosition, 'left');

} else if (methods.left()) {

settings.$next_tip.css({
top: settings.$target.offset().top,
left: (settings.$target.offset().left - settings.$next_tip.outerWidth() - nub_height)});
left: (settings.$target.offset().left - settings.$next_tip.outerWidth() - nub_width)});

methods.nub_position($nub, settings.tipSettings.nubPosition, 'right');

Expand Down Expand Up @@ -543,8 +577,13 @@
methods.center();
$nub.hide();

methods.show_modal();

},

show_modal : function() {
if ($('.joyride-modal-bg').length < 1) {
$('body').append('<div class="joyride-modal-bg">').show();
$('body').append(settings.template.modal).show();
}

if (/pop/i.test(settings.tipAnimation)) {
Expand All @@ -554,6 +593,129 @@
}
},

expose: function(){
var expose,
exposeCover,
el,
origCSS,
randId = 'expose-'+Math.floor(Math.random()*10000);
if (arguments.length>0 && arguments[0] instanceof $){
el = arguments[0];
} else if(settings.$target && !/body/i.test(settings.$target.selector)){
el = settings.$target;
} else {
return false;
}
if(el.length < 1){
if(window.console){
console.error('element not valid', el);
}
return false;
}
expose = $(settings.template.expose);
settings.$body.append(expose);
expose.css({
top: el.offset().top,
left: el.offset().left,
width: el.outerWidth(true),
height: el.outerHeight(true)
});
exposeCover = $(settings.template.exposeCover);
origCSS = {
zIndex: el.css('z-index'),
position: el.css('position')
};
el.css('z-index',expose.css('z-index')*1+1);
if(origCSS.position == 'static'){
el.css('position','relative');
}
el.data('expose-css',origCSS);
exposeCover.css({
top: el.offset().top,
left: el.offset().left,
width: el.outerWidth(true),
height: el.outerHeight(true)
});
settings.$body.append(exposeCover);
expose.addClass(randId);
exposeCover.addClass(randId);
el.data('expose', randId);
settings.postExposeCallback(settings.$li.index(), settings.$next_tip, el);
methods.add_exposed(el);
},

un_expose: function(){
var exposeId,
el,
expose ,
origCSS,
clearAll = false;
if (arguments.length>0 && arguments[0] instanceof $){
el = arguments[0];
} else if(settings.$target && !/body/i.test(settings.$target.selector)){
el = settings.$target;
} else {
return false;
}
if(el.length < 1){
if(window.console){
console.error('element not valid', el);
}
return false;
}
exposeId = el.data('expose');
expose = $('.'+exposeId);
if(arguments.length>1){
clearAll = arguments[1];
}
if(clearAll === true){
$('.joyride-expose-wrapper,.joyride-expose-cover').remove();
} else {
expose.remove();
}
origCSS = el.data('expose-css');
if(origCSS.zIndex == 'auto'){
el.css('z-index', '');
} else {
el.css('z-index',origCSS.zIndex);
}
if(origCSS.position != el.css('position')){
if(origCSS.position == 'static'){// this is default, no need to set it.
el.css('position', '');
} else {
el.css('position',origCSS.position);
}
}
el.removeData('expose');
el.removeData('expose-z-index');
methods.remove_exposed(el);
},

add_exposed: function(el){
settings.exposed = settings.exposed || [];
if(el instanceof $){
settings.exposed.push(el[0]);
} else if(typeof el == 'string'){
settings.exposed.push(el);
}
},

remove_exposed: function(el){
var search;
if(el instanceof $){
search = el[0]
} else if (typeof el == 'string'){
search = el;
}
settings.exposed = settings.exposed || [];
for(var i=0; i<settings.exposed.length; i++){
if(settings.exposed[i] == search){
settings.exposed.splice(i,1);
return;
}
}
},

center : function () {
var $w = settings.$window;

Expand Down Expand Up @@ -583,14 +745,30 @@

corners : function (el) {
var w = settings.$window,
window_half = w.height() / 2,
tipOffset = Math.ceil(settings.$target.offset().top - window_half + settings.$next_tip.outerHeight()),//using this to calculate since scroll may not have finished yet.
right = w.width() + w.scrollLeft(),
bottom = w.width() + w.scrollTop();
offsetBottom = w.height() + tipOffset,
bottom = w.height() + w.scrollTop(),
top = w.scrollTop();

if(tipOffset < top){
if (tipOffset <0 ){
top = 0;
} else {
top = tipOffset;
}
}

if(offsetBottom > bottom){
bottom = offsetBottom;
}

return [
el.offset().top <= w.scrollTop(),
right <= el.offset().left + el.outerWidth(),
bottom <= el.offset().top + el.outerHeight(),
w.scrollLeft() >= el.offset().left
el.offset().top < top,
right < el.offset().left + el.outerWidth(),
bottom < el.offset().top + el.outerHeight(),
w.scrollLeft() > el.offset().left
];
},

Expand Down Expand Up @@ -632,7 +810,9 @@
if (settings.timer > 0) {
clearTimeout(settings.automate);
}

if(settings.modal && settings.expose){
methods.un_expose();
}
$('.joyride-modal-bg').hide();
settings.$current_tip.hide();
settings.postStepCallback(settings.$li.index(), settings.$current_tip);
Expand Down

0 comments on commit cb0d25d

Please sign in to comment.