Not sure if this is already possible or not so excuse my naivety.

Is it possible to observe the events emmitted by Shepherd? For example, I need to trigger a flash message after the walkthrough ends. So I'd hopefully be able to do something along the lines of:

triggerFlashMessage: Ember.on('tour.cancel', { // Tour has been cancelled }

Many thanks!

Would love a non trivial implementation of highlight that basically positions a div over the target element so that it doesn't affect ui. On a related note, a default arrow that points to the element would really help as well. Either one of these or both of them would really improve the user experience.

When I set classes in my 'defaults' config, they get added to the object, but do not translate to the dom. Am I missing something?

As you can see, I added modal and myclass to the defaults classes, and they do not show up in the dom.

Here is my defaults object:

this.get('tour').set('defaults', {
  classes: 'myclass modal shepherd-element shepherd-open shepherd-theme-arrows',
  modal: true,
  scrollTo: false,
  showCancelLink: true,
  copyStyles: false,
  highlightClass: 'highlight'
});

• It's hard to manually change class names for deeply nested components. (all buttons for example have the shepherd-button class.)
• One way to make it easier would be to have some some style addons (i.e. ember-shepherd-bootstrap)

Is there some crucial information I missed in the docs that would make this possible?

Update: 9/9/16

Honestly, this issue changed a lot over its 28 day life.

What it became is the realization that due to how shepherd was designed, we can not currently use htmlbars in a step's text property.

`` has 25 functions (exceeds 20 allowed). Consider refactoring.

https://codeclimate.com/github/shipshapecode/ember-shepherd/addon/services/tour.js#issue_5a1b0135329d510001000024

Function stepsChange has 54 lines of code (exceeds 25 allowed). Consider refactoring.

https://codeclimate.com/github/shipshapecode/ember-shepherd/addon/services/tour.js#issue_5a1b0135329d510001000025

Per the Shepherd docs, "if you don't specific an attachTo the element will appear in the middle of the screen." I get Uncaught TypeError: Cannot read property 'element' of undefined when attachTo isn't defined.

I see the following when I visit http://ember-shepherd.shipshape.io/. The tour popup does not fully appear, and appears frozen (in a partial animation?). Buttons are not clickable.

It is reproducible in Chrome Version 66.0.3359.139 (Official Build) (64-bit), but it is not reproducible in Safari Version 11.1 (11605.1.33.1.4). I am using a Mac. There is no error in the console. Warnings were:

vendor-9eb434e783f88d936264afe89fceff37.js:3908 [Violation] Added non-passive event listener to a scroll-blocking 'mousewheel' event. Consider marking event handler as 'passive' to make the page more responsive. See https://www.chromestatus.com/feature/5745543795965952
on @ vendor-9eb434e783f88d936264afe89fceff37.js:3908
onTourStart @ vendor-9eb434e783f88d936264afe89fceff37.js:4137
e._join @ vendor-9eb434e783f88d936264afe89fceff37.js:1454
e.join @ vendor-9eb434e783f88d936264afe89fceff37.js:1423
ot.join @ vendor-9eb434e783f88d936264afe89fceff37.js:2433
(anonymous) @ vendor-9eb434e783f88d936264afe89fceff37.js:2437
value @ vendor-9eb434e783f88d936264afe89fceff37.js:3780
value @ vendor-9eb434e783f88d936264afe89fceff37.js:3979
start @ vendor-9eb434e783f88d936264afe89fceff37.js:4136
(anonymous) @ dummy-4bf0226f3813439d8a02071215bd140f.js:14
e.invoke @ vendor-9eb434e783f88d936264afe89fceff37.js:1399
e.flush @ vendor-9eb434e783f88d936264afe89fceff37.js:1394
e.flush @ vendor-9eb434e783f88d936264afe89fceff37.js:1402
e.end @ vendor-9eb434e783f88d936264afe89fceff37.js:1414
e._run @ vendor-9eb434e783f88d936264afe89fceff37.js:1455
e._join @ vendor-9eb434e783f88d936264afe89fceff37.js:1454
e.join @ vendor-9eb434e783f88d936264afe89fceff37.js:1423
ot.join @ vendor-9eb434e783f88d936264afe89fceff37.js:2433
(anonymous) @ vendor-9eb434e783f88d936264afe89fceff37.js:2437
l @ vendor-9eb434e783f88d936264afe89fceff37.js:250
c @ vendor-9eb434e783f88d936264afe89fceff37.js:251
vendor-9eb434e783f88d936264afe89fceff37.js:251 [Violation] 'setTimeout' handler took 78ms
vendor-9eb434e783f88d936264afe89fceff37.js:3908 [Violation] Added non-passive event listener to a scroll-blocking 'mousewheel' event. Consider marking event handler as 'passive' to make the page more responsive. See https://www.chromestatus.com/feature/5745543795965952

We don't use a ton of jQuery, but we should remove the small amount we do use.

Hi there 👋

I've noticed that after calling the tour service in one of my components, that component's integration test would start failing with the following error Attempting to inject an unknown injection: 'service:window'.

I tracked it down to the ember-window-mock library that is a dependency of ember-shepherd, specifically here https://github.com/kaliber5/ember-window-mock#integrationunit-tests

I fixed my issues by following the steps outlined above ☝️ but it required a bit of hunting around.

Not sure if you can think of a fix to avoid this being an issue or perhaps just a documentation update to let people know that could be an issue.

Apart from that, enjoying the library, thanks ✌️

Hey, I was thinking we should probably be checking for the required elements when the tour starts. I've found that, between setting the steps and starting the tour, elements might change on the page. I am setting the steps of my tour for a route in setupController, so is maybe there's a better place to do the tour configuration?

Version 1.1.0 of ember-cli-shims just got published.

This version is covered by your current version range and after updating it in your project the build failed.

As ember-cli-shims is “only” a devDependency of this project it might not break production or downstream projects, but “only” your build or test tools – preventing new deploys or publishes.

I recommend you give this issue a high priority. I’m sure you can resolve this 💪

Your Greenkeeper Bot 🌴

The two places this comes across most is classes and beforeShowPromise:

• I think a classNames setup might be a nice feature that would allow for dryer code
• Also, a this._super(...arguments); would go a long ways in beforeShowPromise

// sorry for all the issues... ill start wrapping them up, just in a time of heavy code production

I'm not sure if this is related to #35, but I don't think it is.

You can see it on the project page. When you load it, it scrolls down until the element it is pointed at is at the top of the page (if your page is cached, you might need to do this in incognito).

Is there any way to disable this jumping and only scroll if the element is out of the view? Thanks!

What happened

I want to use a browser's native alert for confirming a tutorial quit.

I tried to monkey patch with the following code, but was unsuccessful:

    var route = this;
    Ember.$("body").on("click", ".shepherd-cancel-link", function(e){
      var stopTutorial = confirm('Are you sure you want to stop the tutorial?');
      if ( stopTutorial ) { return; }
      e.preventDefault();  // first attempt
      route.get('tour').start();   // second attempt 
    });

2 unsuccessful attempts

• e.preventDefault(); - you probably use ember bindings, rendering this useless
• route.get('tour').start(); - gets demo to start, but it's completely reset

Hi there,

Thanks for this amazing add-on. We've been trying it out with some great success.

I was just wondering if you've ever thought of pulling the dependencies in via npm instead of bower?

The reason I'm asking is that we also use ember-modal-dialog and ember-tooltips both of which use ember-tether to pull in the tether dependency via npm.

I'm not completely sure what happens if you pull tether in through npm and bower. I was just curious if you'e ever thought of this before?

Thanks,
Ian

Currently the copyStyles does not update the positioning of the copied element on browser resize

Shepherd seems to allow you to use an object to define the attachTo behavior:

For example: ".some #element left", or {element: '.some #element', on: 'left'}. If you use the object syntax, element can also be a DOM element. If you don't specify an attachTo the element will appear in the middle of the screen.

However, trying to use this with ember-shepherd breaks the tour with the following error

Uncaught TypeError: currentStep.options.attachTo.split is not a function

Which corresponds to the code found here.

After upgrading to ember 2.10.0 I'm getting an exception for shepherd. When I remove it from my app thing work again...

ideas?

shepherd.js:25 Uncaught TypeError: Cannot read property 'Utils' of undefined(…)
(anonymous function) @ shepherd.js:25
(anonymous function) @ shepherd.js:9
(anonymous function) @ shepherd.js:11

loader.js:219 Uncaught Error: Could not find module `ember-resolver` imported from `plhw-client/resolver`(…)
missingModule @ loader.js:219
findModule @ loader.js:230
Module.findDeps @ loader.js:170
findModule @ loader.js:233
Module.findDeps @ loader.js:170
findModule @ loader.js:233
requireModule @ loader.js:20
(anonymous function) @ app-boot.js:4

I am trying to implement the add-on, but I can't get it to work properly. When I add steps to the tour, including the default next button, I get a console error when it hits _this.getElementForCurrentStep():

Uncaught TypeError: Cannot read property 'style' of null

Any thoughts as to why?

Here are my options:

    this.get('tour').set('steps', [
      {
        id: 'tour-step-1',
        options: {
          title: 'Step 1 title!',
          text: ['Step 1 text.'],
          builtInButtons: [
            {
              classes: 'btn',
              text: 'Exit',
              type: 'cancel'
            },
            {
              classes: 'btn btn-success',
              text: 'Next',
              type: 'next'
            }
          ]
        }
      },

      // Step 2
      {
        id: 'tour-step-2',
        options: {
          attachTo: '.main-menu bottom',
          title: 'Step 2 title',
          text: ['Step 2 text'],
          builtInButtons: [
            {
              classes: 'btn',
              text: 'Exit',
              type: 'cancel'
            },
            {
              classes: 'btn btn-success',
              text: 'Next',
              type: 'next'
            }
          ]
        }
      }
    ]);

Using:

    "ember": "2.2.0",
    "ember-data": "2.2.1"

Need to use flexi instead probably

Would be great to have a really nice addon that covers all the bases for the community.
yashwin/ember-onboarding#1

• Arrows are only applied to correctly attached tethers. Is there a way to get it to work for pinned arrows too? see tether-theme-arrows.sass
• For example, being pinned in the x direction (i.e pinned right) shouldn't prevent arrows being added to tethers attached successfully in the y direction (i.e. attached top)

a cool way to solve it might be to somehow do something like :

• $('head').append('<style>.column:before{width:800px !important;}</style>');

a la stack overflow

We currently have 92% code coverage, but it would be great to get to 100% and make the tests more robust, so we can be sure the addon continues to work well.

Version 3.0.3 of ember-cli-eslint just got published.

This version is covered by your current version range and after updating it in your project the build failed.

As ember-cli-eslint is “only” a devDependency of this project it might not break production or downstream projects, but “only” your build or test tools – preventing new deploys or publishes.

I recommend you give this issue a high priority. I’m sure you can resolve this 💪

Your Greenkeeper Bot 🌴

When having showCancelLink: true on your steps, clicking the [x] doesn't trigger the cancel event.

this.get('tour').on('cancel', fn);

Current behavior

The element gets appended to body. In my case, it's a bit complicated since I have to place it in a different element to make the highlighting work properly.

Proposed behavior

The user can pass in an optional config option modalContainer (defaults to body) which influences where the modal element will be placed. Usage:

// tour setup goes here
tour.setProperties({
  modal: true, 
  modalContainer: '.some-modal-container'
});

Let me know what you think :) Happy to create a PR in case the proposal is accepted.

Hi,

This is a great library but i'm stuck trying to use more button types that the built-in ones.

In my step I'm using the builtInButtons option taken from the dummy app but wanting to include a button which has a custom action.

      ...
      builtInButtons: [
        {
          classes: 'button cancel-button',
          text: '<span class="button-text">Close</span>',
          type: 'cancel'
        },
        {
          classes: 'button tour-button',
          text: '<span class="button-text">Take the tour</span>',
          type: 'next'
        },
        {
          classes: 'button sign-in-button',
          text: '<span class="button-text">Sign in</span>',
          action: 'signin'
        }
      ],
      ...

Both the next and cancel work as expected, but I haven't been able to get the custom action to work no matter what I try.

First, I tried to add it as a custom event when I set the defaults for the tour like this,

    tour.on('signin', () => {
      console.log('sign in');
    });

Then as a simple action in the route from which the service is added

  action: {
    signin() {
      console.log('action sign in');
    }
  }

And failing that using the when option in the step

      when: {
        signin: () => {
          console.log('sign in from when');
        }
      }

I feel I must have missed something but can't seem to work out what.

If you could help I'd be happy to update the documentation to include this as it would be a big help (at least to me).

Thanks.

File tour.js has 323 lines of code (exceeds 250 allowed). Consider refactoring.

https://codeclimate.com/github/shipshapecode/ember-shepherd/addon/services/tour.js#issue_5a1b0135329d510001000022

It works on the same route, but does not update on route change now.

The current ember-cli-fastboot releases (1.0.0-rc.1 and above) introduce breaking changes. These will most likely break your current FastBoot implementation.

See ember-fastboot/ember-cli-fastboot#387 for more information and a guide on how to fix your addon. Also you may want to visit the -fastboot Slack channel to get help from other users.

Note: this issue has been created automatically, by searching for certain patterns in your code. If you think this has been falsely created, feel free to close!

Function popoutElement has a Cognitive Complexity of 13 (exceeds 5 allowed). Consider refactoring.

https://codeclimate.com/github/shipshapecode/ember-shepherd/addon/services/tour.js#issue_5a1b0135329d510001000023

We still call this builtInButtons, but it actually supports custom buttons too now, so we should update docs and possibly change the name.

Hi There,

Per the instructions, I just ran ember install ember-shepherd then ember s to recompile the app. When I do this, the app fails to load and my console is spitting out the following error application.inject is not a function. Do I need to perform additional configuration to get the app up and running? We're running on Ember 1.13 and Ember-Cli 0.2.7.

Thanks,
Eric

Is there any way to offset or alter the attaching behavior for elements that exist in the corner of the page?

The default behavior of centering on the selected side of the element doesn't work very well for elements in or near the corner, currently.

pointer-events doesn't get removed from last step when exit button is pressed, which disables the button.

Hey, do you think it'd be a good idea to tag released? I know you're keeping up with semver, so maybe it would be good to do that as well as keep up a changelog attached to each one.

I have a few styles that I'm adding to my app based on wether the tour is actually running. This is working great except that all of the classes for the tour persist even when the tour has been completed or cancelled. It would be really nice if the tour was torn down once it was finished.

Currently, if you set both to true, it disables scroll which breaks scrollTo. Need to work around this.

Disclaimer: I do not use the package, this was found during automated npm packages downloading.

Your current package size is 107 MiB packed, 622 MiB unpacked. 621 MiB of that are inside the tmp dir. I think that this probably got packed to the release by mistake.

Btw: you also packed your .idea dir to the release.

I think the latest update to ember-tether fixes the babel deprecation, would appreciate a release 👍

Is there already a way span a tour over multiple routes?
I tried with the beforeShowPromise function, which fires the promise too early before html classes are available...

this.get('tour').set('steps', [
  {
    id: 'intro',
    options: {
      attachTo: '.first-element bottom',
      beforeShowPromise: function() {
         return new Promise(function(resolve) {
             router.transitionTo('myurl').finally(() => {
                 resolve();
             });
        });
      },
     // ...
}]);

Any recommendations?

thx

After running $ ember install:addon ember-shepherd app immediately breaks, citing the following error: (Path or pattern "bower_components/shepherd.js/shepherd.js" did not match any files), as there is no 'ember-shepherd' directory in 'bower_components'. Most other addon's I have used refer to dependency in bower.json. Emerber-shepherd directory is added to node_modules, and package.json includes shepherd dependency. Seems to be missing path for bower. -- hope this helps, as I am eager to implement in my development.

From the step options in the shepherd docs:

advanceOn: An action on the page which should advance shepherd to the next step. It can be of the form "selector event", or an object with those properties. For example: ".some-element click", or {selector: '.some-element', event: 'click'}. It doesn't have to be an event inside the tour, it can be any event fired on any element on the page. You can also always manually advance the Tour by calling myTour.next().

Version 2.13.1 of ember-source just got published.

This version is covered by your current version range and after updating it in your project the build failed.

As ember-source is “only” a devDependency of this project it might not break production or downstream projects, but “only” your build or test tools – preventing new deploys or publishes.

I recommend you give this issue a high priority. I’m sure you can resolve this 💪

Your Greenkeeper Bot 🌴

Is modal: true supposed to be a walkthrough/non-clickable mode?

Relevant code here:
https://github.com/shipshapecode/ember-shepherd/blob/c01523580a32bca00fed316ad35713f024b9047b/addon/services/tour.js#L367

if (this.get('modal')) {
  currentElement.style.pointerEvents = 'none';

  if (step.options.copyStyles) {
    this.createHighlightOverlay(step);
  } else {
    $('.shepherd-modal').removeClass('shepherd-modal');
    $(currentElement).addClass('shepherd-modal');
  }
}

It might be worth mentioning in the readme that Tether.js, the library that Shepherd uses for positioning popups, is end-of-life. Plus, Shepherd's future seems tenuous at best given Hubspot's apparent abandonment of open source maintenance.

Thanks for the great addon, first of all. This is not a major issue, but disableScroll does not seem to work smoothly in Safari mobile. In iOS chrome I see a fairly smooth "snap-back", but in Safari it jitters back and forth rapidly, creating a flicker effect which is a bit jarring to the user.