Skip to content

Animated backdrop #657

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
vanderlee wants to merge 3 commits into
base: master
Choose a base branch
from
Open

Animated backdrop #657

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
badd337
Animated backdrop
vanderlee Nov 7, 2017
aeef6c0
Update bootstrap-tour.coffee
vanderlee Nov 14, 2017
fa822e9
Update bootstrap-tour.coffee
vanderlee Nov 14, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
24 changes: 9 additions & 15 deletions src/coffee/bootstrap-tour.coffee
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -238,7 +238,7 @@

if step.backdrop
next_step = iNext? and @getStep iNext
if !next_step or !next_step.backdrop or next_step.backdropElement != step.backdropElement
if !next_step or !next_step.backdrop
@_hideOverlayElement(step)

step.onHidden(@) if step.onHidden?
Expand Down Expand Up @@ -642,32 +642,25 @@
_showBackground: (step, data) ->
height = $(document).height()
width = $(document).width()
duration = 'fast'
for pos in ['top', 'bottom', 'left', 'right']
$backdrop = @backdrops[pos] ?= $('<div>', class: "tour-backdrop #{pos}")
$(step.backdropContainer).append($backdrop)

switch pos
when 'top'
$backdrop
.height(if data.offset.top > 0 then data.offset.top else 0)
.width(width)
.offset(top: 0, left: 0)
.animate({top: 0, left: 0, height: Math.max(0, data.offset.top), width: width }, duration)

@houndci-bot houndci-bot Nov 7, 2017

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Line exceeds maximum allowed length. Length is 102, max is 80.

when 'bottom'
$backdrop
.offset(top: data.offset.top + data.height, left: 0)
.height(height - (data.offset.top + data.height))
.width(width)
.animate({top: data.offset.top + data.height, left: 0, height: height - (data.offset.top + data.height), width: width }, duration)

@houndci-bot houndci-bot Nov 7, 2017

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Line exceeds maximum allowed length. Length is 142, max is 80.

when 'left'
$backdrop
.offset(top: data.offset.top, left: 0)
.height(data.height)
.width(if data.offset.left > 0 then data.offset.left else 0)
.animate({top: data.offset.top, left: 0, height: data.height, width: Math.max(0, data.offset.left) }, duration)

@houndci-bot houndci-bot Nov 7, 2017

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Line exceeds maximum allowed length. Length is 123, max is 80.

when 'right'
$backdrop
.offset(top: data.offset.top, left: data.offset.left + data.width)
.height(data.height)
.width(width - (data.offset.left + data.width))

.animate({top: data.offset.top, left: data.offset.left + data.width, height: data.height, width: width - (data.offset.left + data.width) }, duration)

@houndci-bot houndci-bot Nov 7, 2017

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Line exceeds maximum allowed length. Length is 161, max is 80.


_showOverlayElement: (step) ->
$backdropElement = $ step.backdropElement

Expand All @@ -684,13 +677,14 @@
height: $backdropElement.innerHeight()
offset: $backdropElement.offset()

$('.tour-step-backdrop').not($backdropElement).removeClass('tour-step-backdrop')

@houndci-bot houndci-bot Nov 14, 2017

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Line exceeds maximum allowed length. Length is 88, max is 80.

$backdropElement.addClass 'tour-step-backdrop'
elementData = @_applyBackdropPadding step.backdropPadding, elementData if step.backdropPadding

@_showBackground(step, elementData)

_hideOverlayElement: (step) ->
$(step.backdropElement).removeClass 'tour-step-backdrop'
$('.tour-step-backdrop').removeClass 'tour-step-backdrop'

for pos, $backdrop of @backdrops
$backdrop.remove() if $backdrop and $backdrop.remove isnt undefined
Expand Down