linkedinattic / hopscotch Goto Github PK

There are a couple of current enhancements for configuration changes that affect the internals of each Hopscotch bubble (#33 and #39). I'm thinking, instead of creating new configuration options that affect the bubble display (which could lead to a bloated configuration object over time), what if we could provide the option to use a JavaScript template (or other method) to render the internals of each bubble?

How it would work

A user could define a render method in their tour configuration options or register a template via hopscotch.registerTemplate(Function render). Hopscotch would be agnostic to how this template is written or compiled... all it cares about is a method that it can hand an object off to for rendering the bubble's internals. The object itself would contain information relevant to the current step (title, content, stepNum, totalSteps, button info, labels) and would be responsible for returning HTML that can be set as the bubble's innerHTML.

Other contemplations

• How to handle events? One possibility is to include some means when declaring the template to provide the IDs that Hopscotch should attach events to. Or, we could have Hopscotch pass a DOM reference to the render method and require it to handle attaching the events.
• Should render() be limited in its scope to just the inside of the bubble, or should it have responsibility for the structure of the whole bubble? The latter might require some updates to positioning calculations.
• If we go this route, we may want to consider modifying how Hopscotch currently does bubble rendering to use this new pattern instead.

Any thoughts?

I believe it'd be very nice to have a jQuery selector example for target. After a lot of time testing, the final one I used was just the string "table tr:first-child td", but I didn't find it in the documentation.

Also, since this script's main use if for a tutorial after an event happened, it'd be nice i it was possible to bind it to an event.

Thank you.

I tried registering the callback to an onNext and to an onShow event and it works,
but with onCTA it just wont.

onCTA do work when using a function literal and not a helper.

I have a web app that uses iframes. The main content window is an iframe and I am triggering hopscotch from a button within. When it needs to scroll down the page it initially starts to scroll, but the page content does not scroll with it.
You can see in my screenshot that the scroll bar does not span the entire page anymore. It seems to have added in a bunch of white space that is not part of the page anymore. My tour object is also below. Nothing out of the ordinary I don't think. There seems to be something I am missing with iframes. Suggestions?

var tour = {
        id: "hello-hopscotch",
        showPrevButton: true,
        showNextButton: true,
        steps: [
        {
            title: "Number",
            content: 'This is the number.<br/><b>OOB Number</b>',
            target: "element.u_that_table.number",
            placement: "bottom"
        },
        {
            title: "State:",
            content: "Select a State in here.",
            target: "element.u_that_table.state",
            placement: "bottom",
        },
        {
            title: "Description:",
            content: "Here is where you add a description of the change.",
            target: "element.u_that_table.description",
            placement: "top",
            arrowOffset: 'center'
        },
        {
            title: "Work Notes:",
            content: "Here is where you add some work notes.",
            target: "element.u_that_table.work_notes",
            placement: "top"
        },
        {
            title: "Approval:",
            content: "This is the approval status.",
            target: "element.u_that_table.approval",
            placement: "bottom"
        }
        ]
    };

browserLink:37
var hometour = {
id: "nptour",
steps: [
{
title: "Compare anything !",
content: " Start comparing two persons, products, movies and what not ?",
target: $('[data-target="#ComparesM"]'),
placement: "right"
},
{
title: "Debate on issues !",
content: "Start a debate on issues, ",
target: $('[data-target="#DebateM"]'),
placement: "right"
},
{
title: "Share your thoughts !",
content: "Have something interesting ? Or feeling like sharing your thoughts ? Share it right here.",
target: $("#Thought"),
placement: "bottom"
},
{
title: "Be social",
content: "Tease your friends as you do in real life :) Apologize if they are angry with you. Send messages to them and check out what's hot and happening in compares and debate !",
target: $("#Interesting"),
placement: "top",
},
{
title: "Share your thoughts !",
content: "Have something interesting ? Or feeling like sharing your thoughts ? Share it right here.",
target: $("#Thought"),
placement: "bottom"
}
]
};
hopscotch.startTour(hometour);

the error TypeError: Object [object Object] has no method 'getBoundingClientRect' comes

Instead of using a sprite for displaying step number in circle use border radius.

.hopscotch-bubble-number {
// background: transparent @spriteUrl 0 0 no-repeat;
border-radius: 50%;
...

}

look into using grunt-include-replace to help maintain our javascript output file

Trying to place hopscotch on a targeted element that is in the upper right corner of the browser window. Hopscotch is rendering outside of the browser window.

I mean, it may be already done with callbacks, but I think it may be useful "by config", for example to

• alert a user about something "somewhere on page" with a hopscotch popup
• point to the user "here is the way to launch a hopscotch if you want"
• ...

This project needs a changelog, so end users know what changed wich new versions of hopscotch

I have a scenario where a form will be loaded via Ajax upon clicking on a button. I want to have a step to target on the first input field of the form. I've tried to load the form in onNext callback of the previous step. But it seems like the position of the next step's element is calculated before onNext is triggered and the next step is being skipped because the form has yet to be loaded at that time.
Is it possible to add onBeforeShow callback to allow loading of content via Ajax?

Hey there,
Not really an issue. Just to let u know that I create a GWT API for this awesome library. See the demo here : http://eemi2010.github.io/gwt-tour/.
Cheers,
Alain

Hello.
I try to find in your library how to retrieve current target of tour. But unsuccessful. Please help me

I'm trying to specify optional onCTA buttons/events, but am finding that these will stack up -- so that if I don't click the CTA button on Step One, but click the CTA button on Step Two, both functions from steps one and two will fire... instead of just the function from Step Two.

I've tried clearing the callbacks in between steps, but no dice.

Hi

Is there any way where we can have hopscotch tour for 'Menu' and 'Menu Items.
I want to use the hopscotch tour to menu items as well.

I'm a new bee to this one. Please help on this.

It is not pretty, but it adds support for left and right keys to go to the previous and next steps respectively. Add this to your tour options:

  onStart: function(){
    document.onkeydown = checkKey;

    function checkKey(e) {

        e = e || window.event;

        if (e.keyCode == '37') {
            hopscotch.prevStep()
        }
        else if (e.keyCode == '39') {
            hopscotch.nextStep()
        }
    }
  },

As agreed in the issue #14, we'll be developing ways to make Hopscotch ships with localizated strings for the common things that are already built in (like "Next", "Previous", so on).

This issue was created mainly to keep track of it.

Current structure of the project has source and distribution files mixed together. It is hard to understand which files should be updated when sending a pull request, and which ones are auto generated.

It is also hard to get hopscotch at certain version. It's a bit misleading to have hopscotch/js/hopscotch-0.1.2/js which actually has changes since 0.1.2 release. End users should be able to easily grab all hopscotch artifacts for a given hopscotch version.

We need to re-structure repo to make it easier to manage, easier to contribute to and very simple and easy to get all the files you need to use it.

As part of this restructure we should also add CI with Travis, so all pull requests are tested.

I'd like to override the button style to match my application. However the default style .hopscotch-nav-button and .hopscotch-nav-button .next applies a number of css styles. It would be nice if I could specify a buttonCssClass to be used instead of the default .hopscotch-nav-button. This would allow me to easily change the button style without having to try to undo the styles added by .hopscotch-nav-button. Thanks!

My team and I are doing our best to unit test all of our code. We recently implemented Hopscotch and it's pretty awesome. We wondered if there was a way for us to unit test hopscotch to make sure it all runs properly?

Its unclear if Hopscotch can support showing a video inside a hopscotch tour "bubble"? Seems there should not be a problem in principle but no one is listing it or there are no such examples. Is this a feature that is planned to be supported?

Hi I"m writing a tour that opens a same domain iframe modal and continues the tour in the iframe. I'm trying to use multipage: true for this functionality. Seeing an error from the iframe.

Uncaught TypeError: Cannot read property 'length' of undefined hopscotch-0.1.1.js?body=1:1821

the error is stemming from startTour line 1821

        if (stepNum >= currTour.steps.length) {
          throw 'Specified step number out of bounds.';
        }

Heres the tour code, The onNext calls a click handler that opens the modal:

$(function(){
  hopscotch.add_widget_tour = {
    id: "add_widget_tour",
    steps:[
      {
        "target": "add_widget_link",
        "placement": "left",
        "title": "You can add a new Widget",
        "content": "Add a new widget to build a new Table, Chart or Graph.",
        "multipage": true,
        "yOffset": "-20",
        "onNext": function(){
          $('#add_widget_link').click();
        }
      },

      {
        "target": document.querySelector("h3 .page-title"),
        "placement": "right",
        "title": "adding a widget",
        "content": "This is the Add Widget Screen"
      }
    ]
  };
});

I'm trying to continue the tour in the iframe with this code:

  if(hopscotch.getState()){
    var tour = hopscotch.getState().split(':');
    $(function(){
      hopscotch.startTour(tour[0], tour[1]);
    });
  }

It would be helpful for people who are more keyboard-focused and/or especially in tours that explain form fields.

Here, it would also be great if the tour would follow the current focus. This way, one could "tab" through form fields and the tour would always explain what can be entered in the current field.

I am using Hopscotch with a tour that looks like this:

    var tour = {
      id: "quoddy-intro",
      steps: [
        {
          title: "Activity Stream",
          content: "This is the Activity Stream area.  Various kinds of activities appear here, based on the" +
          " users you follow, groups you join, subscriptions you setup, etc.  Activity Stream events include Status Updates" +
          " from other users, Calendar Feed entries, Business Events, RSS Feed entries, BPM User Task entries, and others.",
          target: "activityStream",
          placement: "top",
          width: 350
        },
        {
            title: "Status Update",
            content: "This is a Status Update, shared by one of your Friends or someone you Follow.",
            target: document.querySelector(".basicActivityStreamEntry"),
            placement: "left",
            width: 350          

        }
      ]
    };

The first step works fine, using an id. But the second step never results in a tour bubble being rendered. I've verified with a simple function that alert()'s the output of the document.querySelector call that it does, indeed, find the element I am looking for, but Hopscotch doesn't seem to like it.

This occurs in both Chrome Version 25.0.1364.172 and Firefox 18.0.2, both on Fedora Linux.

Hopscotch has been registered with bower, but there is no bower.json file detailing version, js files, css files etc

This means that automated bower injection using the grunt task bower-install fails:

grunt bower-install

hopscotch was not injected in your file.

In Chrome 29.0.1547.65, whenever I click 'Next' to go to the next step and as soon as the next bubble slides in, the previous step bubble flashes, and this happens for every single step.

Do not see the same behavior in FF 23 or Safari 5.

Strangely enough, when I tried the demo tour using Chrome, this does not happen. What could possibly cause this annoying behavior?

Hi,
is it possible to continue the tour at a closed tour step?
Getting the state via hopscotch.getState() is only possible when the tour is running.
If it's closed the state is null.

I get an 'invalid argument' error on line 621 when I am using the the arrowOffsetCenter argument.

It happens here (line 621):

arrowEl.style.left = bubbleWidth/2 + bubblePadding - arrowEl.getBoundingClientRect().width/2 + 'px';

and here as well:

el.style.left = left + 'px';

Currently building a .NET application built around the single page model. Users interact with the application by click on a navigation link that opens up a popup modal. Unfortunately the content loaded within the modal is called dynamically with AJAX and is not present when Hopscotch is instantiated.

Is there a way to chain steps to selector within the dynamically loaded content? Or perhaps a way to "refresh" Hopscotch so that it has the most current state of the DOM?

Possible related scenario and solution here: http://stackoverflow.com/questions/18897520/hopscotch-js-dynamically-created-modal-target-not-functioning
Is there an official way to accomplish this functionality?

hopscotch.startTour(config, 0) does not start the tour at step 0 for me. I had to explicitly call hopscotch.endTour() in order to get the subsequent endTour() call to start at step zero.

Everything's awesome but when the last step comes and when we click "Done", there is no fading in animation or something like that. Its just disappearing. Animate the exit too please !

I have it all set up right. You can see my demo site here

http://dev2.playmakercrm.com/Hopscotch/

I have the

h1 id="hopscotch-title" (with the < > of course)

and I have it set in the js as

steps: [
{
target: "hopscotch-title",
title: "Welcome to Hopscotch!",
content: "Hey there! This is an example Hopscotch tour. There will be plenty of time to read documentation and sample code, but let's just take some time to see how Hopscotch actually works.",
placement: "bottom",
xOffset: 'center',
arrowOffset: 'center'
},

But I cannot get it to load at all. If anyone can take a look I would sure appreciate it.

How about the option to highlight the current element by graying out the rest of the page? This is what Intro.js does: http://usablica.github.io/intro.js/

Hi,

I have the scenario where i need to show a modal window before show the last step because the element for last step is in the modal window. When i try to show the window modal in onNext i got an error because the element was not found.

any solution to handle this?

Hey guys,

We're having a slight issue trying to get Hopscotch to work with Angular routes and views. Basically what's happening is when we use isNext() to change the route and the next Hopscotch bubble is pointing to an element on the next view, Hopscotch fails and won't continue. This makes complete sense, because there is no element for Hopscotch to use as a target. It just doesn't exist yet.

What would probably solve this problem is the ability to create events just by passing a string in hopscotch.listen() and then be able to call hopscotch.trigger('eventName') later in the application... Thoughts?

Thanks.

Could we have an example of i18n working? I made this:

var retour = {
  id: "tutorial-user-creation",
  steps: [
                  {
                    title: "Tutorial is here",
                    content: "At any time you can press this button to restart the tutorial.",
                    target: '#restart_tutorial',
                    placement: "bottom",
                    xOffset: -15,
                    showNextButton: true,
                    showPrevButton: true
                  },
  ],
  i18n.nextBtn: "Próximo"
};
 hopscotch.startTour(retour);

...and it returns me the error "Uncaught SyntaxError: Unexpected identifier". In the documentation it says it accepts string. What is wrong with that?

Thank you.

Especially when having hopscotch bubbles for each field in a form, it would be cool if the bubbles would automatically show whenever the user jumps from field to field.

And vice-versa, it would be nice if the form field would receive the focus if next/previous are clicked in the hopscotch bubble.

Setting the bubbleWidth on individual steps does not work. The default of 280 is always applied. If it is set outside of the the steps it works, but applies to all steps.

I am trying to implement hopscotch on a few asp.net pages. I put the references to the scripts and js in the master file. The problem is that the messagebox keeps flashes for some reason like it is in a loop. Any help would be greatly appreciated.

I'm using hopscotch to create a tour in an Angular app, in this app depending of some conditions I need to skip the tour to an specific step.

so I have something like this:

hopscotch.registerHelper("skipToStep", function(stepIdx) {
console.log(hopscotch.getCurrStepNum());
console.log(hopscotch.getState());
hopscotch.showStep(stepIdx);
console.log(hopscotch.getCurrStepNum());
console.log(hopscotch.getState());
});

and then I put the callback inside the step in the tour

steps[1].onNext = ["skipToStep", 5]

the output of the console when i click next in the step 1 is:

2
graphTour:1

5
graphTour:5

but the step that appears is the step[2]

Hi i'm using hopscotch in a rails app that uses Turbolinks. On an initial page load of the app I can trigger hopscotch tours manually with hopscotch.startTour When switching to a new page with Turbolinks I can call the hopscotch api methods, startTour GetCurrStepNo GetCurrTour they look successful but hopscotch doesn't render any DOM elements. I'm thinking some hook or event or something gets wiped in the Turbolinks page load and needs to be reestablished.

Hi,

I am using hopscotch to display the product tour. It is working fine.

While showing the tour, the step number shown as 1,2,3.... . I want to show the step number with the total number of steps (1/5,2/5,3/5...).

Is there any possible way to do this?

a) Remove all buttons
b) Add a inuitive keyboard/mouse navigation

A: Why? Because the position of the buttons is changing, which is annoying.
B: A Consisten UI requires a consistent navigation. That means changing the location of buttons is inacceptable. The best solution is to offer a way to skip to the next introduction by pressing the left mouse button or spacebar for example. Esc or holding the mouse button/touch or spacebar could be used to skip the entire tutorial. You could also center all dialogues and point with an arrow to the place it describes. Fading the intro in is a good idea, but the size of the text/dialog should be larger in order to look like "easy intructions". It might be useful to not display all text at once, but fade/swipe/typewriter style display the next paragraph after a calculated amount of time (avg words per minute).

The bubbles should check to see if they are displaying off screen and if they are they should move and/or resize automatically.

I have a hopscothc tour. Im doing this:

onEnd:function(){
window.location="findfriends";
}

but even after pressing the last button of the the tour "Done", I am not being redirected to findfriends page.

So does it mean that onEnd isn't firing ?

Situation

If I set the nextOnTarget: true property on a step, everything works as expected if I'm using the Next button or clicking on the target (basically if I'm moving forward). However, if, while I'm at a step with that property enabled, on an element A, I click Back or I use a CTA with showStep() in the callback, the event is not removed from the element. Thus, in the future, even if I'm on another step, if I click on element A, I'm getting forwarded to the next step.

Reason

The issue happens because the targetClickNextFn event is added to the element, but is only removed on nextStep (as defined here ) and not in the other cases.

Solution

The

if (step.nextOnTargetClick) {
        // Detach the listener after we've clicked on the target OR the next button.
        utils.removeEvtListener(targetEl, 'click', targetClickNextFn);
      }

code should be also added in the prevStep method and showStep method.

Great code and I hope this project continues to be worked on.

Having an issue while going between pages on a tour and then going back to previous pages. I'm going to other pages by using the following (not sure if this is the right approach):

...
multipage: true,
onNext: function() {
document.location.href = 'index2.html';
}
...

This works as expected and I can continue to jump between pages going forward without any issue. Going backwards, however with the same logic, but in "onPrev()" sends me to the other page, but advances the steps. Therefore if step 1 = page 1, step 2 = page 2, step 3 = page 1, then when I click previous on step 2 (page 2) I am sent back to page 1, but it is now on step 3. It seems to have to do with the "multipage" variable being set.

Thanks again!
Michael

Is it possible to make hopscotch jump through different web pages. For example Homepage.html to PersonalDetails.html. If so how is it done?

When using a multipage setup, hopscotch works great in case the subsequent step is on the next page. However, it breaks if the subsequent step's target doesn't exist on the next page. I would assume hopscotch would then just "skip" to the next subsequent step, but it doesn't. Instead, it will repeat the last step after the multipage jump.

It would make it a little easier to use this if it could be consumed as a package with existing developer workflows. Happy to submit a pull request for either bower or package.json if you want.