shepherd-pro / shepherd Goto Github PK

The theme shepherd-theme-arrows has a high level of specificity which makes it really difficult to override styles within another project. For example, if one wants to override the header in a shepherd step, they have to compete with this:

.shepherd-element.shepherd-theme-arrows.shepherd-has-title .shepherd-content header {
    background: #eeeeee;
}

Than means if I want to change the background color, I have to get more specific than that rule above. Then best way might be to add my own class when adding a step:

tour.addStep('guide-step-1', {
    title: "Title for a step",
    text:  "Text for step",
    classes: 'intro-step shepherd-theme-arrows',

and then in my css do this:

intro-step.shepherd-element.shepherd-theme-arrows.shepherd-has-title .shepherd-content header {
    background: #ffffff;
}

There's no reason the initial rule declaration needs to have that high of a specificity. The same affect could be achieved with:

.shepherd-element header {
    background: #eeeeee;
}

Doesn't work well with screen readers, nor can you really tab between the buttons

Is it currently possible to create an application Tour that spans across different Page URL's?

For example the WOrdPress Admin panel has a similar Tour functionality which can go to different pages in your website/app and continue on with the Tour once the new URL is loaded.

I confess I haven't dug into the code yet or built anything with this library. I just didn't see this functionality in the Demo that I saw and wanted to know if it is possible out of the box or if I need to modify a lot. Or perhaps this functionality needs to be implemented outside of this library anyways!

I would love to hear what others thing or know about this please?

Right now when step is triggered attached element gets all "shepherd-*" classes but when step is closed this classes should be cleaned up.

Any particular reason this is not happening?

The documentation says that Tour::addStep returns the new created Step instance. Instead it returns the Tour object.

I am trying to use Shepherd in a single-page app, and I just noticed that divs that Shepherd creates to display step content remain in the document when the tour ends. If the page is not refreshed and multiple tours are started the number of those divs grows indefinitely.

Is there any way to clean them up? I mean I can always just remove '.shepherd-step' divs, but why are they kept around?

This is a very usefull option to have and it is not documented in your docs right now (Or Im blind =)).

Also it would be cool to have same thing on Tour object.

If I attach an event listener to 'show' for a step, it fires once for every step, instead of just once for the current step. I have 6 steps, and I do the following:

this.get('steps').forEach(function(step) {
  var tourStep = tour.addStep(step.id, step.options);
  tourStep.on('show', function(currentStep) {
    console.log('show');
  }.bind(this));
}.bind(this));

The console.log is called 6 times, once for each step, instead of just once. I saw another issue mentioning this quite awhile ago. Is it being worked on?

When tour scrollTo is set to true and attachTo is set to top the page scrolls so that the element the step is attached to is at the very top and the tour step is automatically relocated to the bottom. Is there a a way to use scrollTo: true and still have the tour step appear on top of the element?

ReferenceError: tour is not defined

This is what I get when i hit the run button here:

http://github.hubspot.com/shepherd/

using FF30 on win7

Any plans? Currently the shepherd.js build is putting Shepherd directly on the window object, and there isn't a main or browser defined in the package.json. In addition, the package name shepherd is already taken in NPM.

It would be very convenient for me if shepherd would automatically skip a step if the element/selector specified was not found. Currently an error is thrown and the html is just appended to the body without using tether. At the very least I would expect a way for me to implement this myself through the event system, but that doesn't seem to work either. I tried cancelling a step in the 'before-show' event, but I got console errors from tether.

Unless I'm missing something, it seems that Shepherd only supports "top, bottom, left, right" as options within the attachTo option.

It would be nice to add the ability to position items using "top left" or "bottom middle", etc.

http://github.hubspot.com/tether/#attachment

Is it possible to make the step tips modal? As shown on the demo page http://github.hubspot.com/shepherd/docs/welcome/

I can't find this parameter in the documentation.

I don't use Eager or Coffeescript, so in order to use shepherd I'd have to either change my development method, or learn Coffeescript to know how to translate your examples. As it is I just used a different library.

It seems like the drop-shadow property is not behaving in Chrome.

ex: http://imgur.com/TbdoWNr

Maybe the way the window is placed is causing a collision? It happens a lot in my application.

It'd be nice to have an option that disables the dimming of the background and the overlay div.

When shepherd tries to go to the next step, and that step's attachTo element is missing, Shepherd should just advance to the next step. Likewise, when going through the steps in reverse and an attachTo element is missing, it should just behave as if the step were not there. Currently, I have a workaround where I cache the previous step in the .on('show' function() ... on the tour and set a flag myElement to true/false. Then I bind a function to the step I want to check like this:

.on('show', function() {
    if (!myElement && previousStep.id === "the-previous-step") {
        tour.next();
    } else if (!myElement && previousStep.id === "the-next-step") {
        tour.back();
    }
});

seems I can't do this

shepherd.on('cancel complete', function(){
      // some code here
})

in jQuery you can do that :)

Also shepherd is not chainable, so I can't even do this:

shepherd.on('cancel', onClose).on('complete', onClose);

This page: http://github.hubspot.com/shepherd/ says there's no dependencies - looks like https://github.com/HubSpot/tether is a dependency.

what am i Missing here? I can't get this or the code example in the zip to function.
my script editor shows an error at the line : tour.addStep 'example',

 if (typeof this.tether !== 'undefined') {
      this.tether.destroy();
    }
 this.tether = null;

javascript type of null is object not undefined which is causing the error.

Latest version of Firefox does not support the -moz-filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2)); style.

As a results, the .shepherd-content appears not to have any border and is difficult to see on pages with light background.

As seen under Firefox:

As seen under Chrome:

The name in the bower.json file is listed as shepherd but one installs the package with bower install shepherd.js. Should they not be the same? it's certainly confusing with no bower install instructions documented.

Shepherd UI arrows have a partially-invisible footprint that can obscure items behind it from click events.

Adding pointer-events: none; to the arrow class would take care of the issue, and should cause no issues to the expected functionality.

Created a NuGet package for your project, let me know if you'd like anything changed.

https://www.nuget.org/packages/HubSpot.Shepherd/

It's great that Shepherd uses Tether in a way that is so "set it and forget it", but the downside is that Tether has lots of options that would be nice to modify in some situations. We'd really like, for instance, to be able to override the default Shepherd behavior of pinning steps to the edges of the viewport when they are scrolled out of view.

Would be really nice to be able to pass a tether options object to shepherd to override some of the defaults.

Why is Tour hide event not triggered when step is closing?

It should trigger every time step closes: on next, hide, cancel, completed actions.

Right now only Step hide event is triggered.

It would be nice to have an embedded image in some of the shepherd steps. Do you know if there is an easy way to do that?

Thanks!

I get this error when trying tour.start(), can't figure out what the issue is...has anybody else see this?

tour = new Shepherd.Tour
  defaults:
    classes: 'shepherd-theme-arrows'
    scrollTo: true

tour.addStep 'sample',
  text: 'Sample Text'
  attachTo: '#main-nav bottom'
  classes: 'example-step-extra-class'
  buttons: [
    text: 'Next'
    action: tour.next
  ]

tour.start()

in a step i want to change the flow of the tour for that i have used tour.show('step'); but it is not working. how to solve that????

I recently downloaded Shepard 0.5.1-zip from the website.

Including it in my file, I get the following error:

I see according to this issue that tether should be included, and the site likewise says there are no dependencies.

Any help would be appreciated, thank you.

Hi!
In the latest versions of Opera and Chrome I catch bug of box-shadow render in steps more than 3. Shadow makes distant out of popup box and if i resize browser window, shadow places correctly.

Other bug is there: tour sometimes kill margins of div and align it to the side of tour popup shows.

In Step.prototype._show, when this.el == null a call is made to render which calls setupTether. Then, _show calls setupTether again.

Both calls to setupTether add event handlers to the scrollParent, but only the second copies are removed when the step is destroyed. Therefore there are leftover event handlers when the tour has ended.

I think modifying _show so that setupTether is only called when render is not would solve the issue. Happy to create a pull request to that effect.

So when attaching to element that is in corner of screen and is smaller then "step" element arrow just disappears.

Can this be fixed?

Can arrow appear in top right corner too instead of just in middle?

it's very annoying these classes gather up and clash with each other potentially. why not just put the one you really use and that's it?

msMatchesSelector is not part of the matchesSelector!

Here is the corrected function:

  matchesSelector = function(el, sel) {
    var matches, _ref1, _ref2, _ref3, _ref4;
    matches = (_ref1 = (_ref2 = (_ref3 = (_ref4 = el.matches) != null ? _ref4 : el.msMatchesSelector) != null ? _ref3 : el.webkitMatchesSelector) != null ? _ref2 : el.mozMatchesSelector) != null ? _ref1 : el.oMatchesSelector;
    return matches.call(el, sel);
  };

Matches will be null and fail on IE 9+ until this is fixed

Our company uses Handlebars templates for our client side code. It would be pretty sweet if instead of a string of text we could pass in a compiled Handlebars template which would render inside the Tour container. Just a thought.

When I fire the complete event is there a way to destroy the plugin and remove all classes and dom elements from the page? Im getting some issues where when I complete the tour and want to show the tour again I get double tour panes.

Shepherd works normally for a drop down selected list. But including Select.js to style a select option results in shepherd sticking to the left-top most corner.

Neither shepherd's, nor tether's documentation talk about adding animation and googling around didn't help either. I tried adding 'animate' class and some effect classes from animate.css to the steps, but doesn't work.

I will appreciated any help regarding this.

On the GitHub demo page, shouldn't I be disallowed from clicking on buttons outside of the tour unless I exit the tour or the tour specifically tells me to press a button?

Hi there

Thanks for providing a UMD-wrapped build. I'm using this version with RequireJS and it works well.

Looking at the other Tether-based projects Drop and Tooltip I noticed they do not offer such a build, so my first thought was to add to those projects' gulpfile's something similar to what is done in Shepherd's.

Thinking about it though, I'm not convinced this is the best approach. A few issues:

1. Shepherd's default build cannot be used in combination with that of Drop or Tooltip without Tether and/or Drop being loaded multiple times, as these libraries are bundled in each others' builds.
2. The point of the UMD pattern is to produce a module which is compatible with all module systems, including "script tags". It shouldn't be necessary to create a UMD build separate from the default build.
3. The naming of the UMD-wrapped build (shepherd-amd.js) is a bit misleading, since it's not solely an AMD module.

Here's what I propose.

• Do not concatenate Tether into the default build. Require it to be loaded separately prior to loading Shepherd, either with the help of a proper module system or with an additional script tag.
• UMD-wrap the default build.
• Remove the shepherd-amd.js build from the project.
• Follow a similar pattern in the other projects (Drop, Tooltip etc.)

If people really want a build with all dependencies bundled, I think this should be a secondary build. Ideally it would contain individually UMD-wrapped components, with the AMD bits producing named modules. Unfortunately I don't know an easy way to achieve this, but see selectize.js' standalone build for an example.

Any thoughts?

On the Shepherd API page when clicking the run button above each code snippet, a tour is not defined error is thrown. This happens when snippets are run in either Coffee or JS mode. The errors begin with the second snippet.

Here's the stack trace.

Uncaught ReferenceError: tour is not defined VM259:2
(anonymous function) VM259:2
runners.javascript executr.js:7
Editor.run executr.js:167
Editor.execute executr.js:178
(anonymous function) executr.js:84
x.event.dispatch jquery.js:5095
v.handle jquery.js:4766

And my browser.

Google Chrome   32.0.1700.107 (Official Build 248368) 
OS  Mac OS X 
Blink   537.36 (@165586)
JavaScript  V8 3.22.24.17
Flash   12.0.0.44
User Agent  Mozilla/5.0 (Macintosh; Intel Mac OS X 10_9_0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/32.0.1700.107 Safari/537.36
Command Line     /Applications/Google Chrome.app/Contents/MacOS/Google Chrome -psn_0_40970 --flag-switches-begin --enable-experimental-extension-apis --flag-switches-end
Executable Path /Applications/Google Chrome.app/Contents/MacOS/Google Chrome
Profile Path    /Users/amatthews/Library/Application Support/Google/Chrome/Default
Variations  6dcb530d-954431d1
e950616e-ca7d8d80
b178bdde-887f97ea
8afebf76-43f15e03
fd9e2196-9b833a7
3664a344-be9e69ba
9e5c75f1-25ae2b38
24dca50e-837c4893
ca65a9fe-91ac3782
8d790604-9cb2a91c
5a3c10b5-e1cc0f14
244ca1ac-4ad60575
f47ae82a-746c2ad4
5e29d81-f23d1dea
3ac60855-486e2a9c
246fb659-7158671e
f296190c-b52e3392
4442aae2-a90023b1
ed1d377-e1cc0f14
75f0f0a0-4ad60575
e2b18481-3a9ae350
e7e71889-4ad60575
7225da14-186f5907

Hallo.
I catch a trouble with step events in new version:
— If i try to bind one step to event 'show', all other steps binds to this event too
— And the same thing - if i set in Step a new parameter (like step.newvar = 5), all other steps get it.

That bug wasn't in old version (shepherd 0.5.1 and tether 0.6.5)

I need to know in my CSS which step i'm at, to hide certain elements and show others on each step. right now shepherd doesn't seem to do that. it only adds the shepherd-active.

In setupTether() a new instance of Tether is created (src/js/shepherd.js:191). But setupTether() is called twice: in _show() (line: 215) and in render() (line 348).

In my case of testing, after a Tether instance is created, a second new instance overwrites this.tether.

Now, when there are event listeners (for example: scroll on scrollParent), there are 2 times addEventListener but the destroy() function only removes 1 event listener (the second).

Possible solution: (line 191)

if (this.tether) {
    this.tether.destroy();
}
this.tether = new Tether(…)

The rendering of the step does not wait for before-show to complete. It should be a promise, and only continue calling render and show and getAttachTo and all of that, after before-show is completed. This allows before-show to do things with the app and show certain elements that you may want for the tour.

Doesn't really make sense to have before-show, if it isn't guaranteed to all happen before-show.

If you guys agree with this, I can work on a PR. Let me know!

A number of other tour libraries offer the ability to specify where the modal window loads in relation to the targeted element. It would be awesome if this were built into the library. Is this on the roadmap?