added ability to allow programmatic configuration of steps #86

Merged
merged 3 commits into from Apr 23, 2013

5 participants

@juristr

Here's a pull request to allow programmatic configuration of the steps (as described already in #71) as an alternative to the data-* annotations.

Motivation

When you create single-page applications you usually distribute your views among multiple files and thus it would spread your step configs among them. Instead, I'd prefer to do the step configuration at one point in my application (i.e. in the startup procedure file) and apply it once my application is fully loaded.

Usage

var intro = introJs();
intro.setOptions({
  steps: [
    {
      element: document.getElementById('step1'),
      intro: "Hello all! :) This project's called Intro.js."
    },
    {
      element: document.getElementById('step2'),
      intro: "Ok, wasn't that fun?",
      position: 'right'
    },
    ...
  ]
});

intro.start();

Note, that programmatic configuration is mutually exclusive to the data-* approach, meaning you cannot mix both approaches (as of now).

@afshinm
usablica member

Well done @juristr. Let me review it. Thanks again!

@markyun

My English is not good. This writing is very good.I come from China

@vivekdurai

Fantastic. Is this going to get merged soon? Also is the multi page release that @afshinm is working on going to overlap with this? Just asking because we're using it (intro.js) with angularjs and are trying to integrate this within the mvc style that angular encourages.

@afshinm
usablica member

Sure, this will be one of big changes in next version of IntroJs, @vivekdurai.

@markparolisi

@juristr
I was waiting for some of the other issues and pull requests to get closed on this project before I submitted mine. It looks like you had the same idea I did.
Here is a link to my implementation...
https://github.com/markparolisi/intro.js/blob/json/intro-json.js

Should be able to request from a JSON URL endpoint and create an 'intro' that way too

@juristr

@markparolisi Yep indeed, we had the same idea ;)
I quickly went over your code and the main difference is that you're dynamically creating the data annotations while I'm taking the passed step configuration directly for the tooltips. I did this because my next pull request would be to allow for (how I call them) "activator functions".
Meaning instead of passing an element instance to the configuration directly, one can pass a function which is then called to activate the region the element is contained within (i.e. within a hidden tab-page etc...).

@markparolisi

@juristr
Yes, my implementation a month or so ago was spurred by the request for non-technical persons to create these intros and this could certainly be accomplished by some CMS like tool outputting JSON which would get applied to the "show".

Having "activator functions" is a good idea though.

@juristr
@afshinm afshinm merged commit d06d785 into usablica:master Apr 23, 2013
@afshinm
usablica member

Thanks @juristr, it works fine! Your contribute will be available in v0.4.0. Thank you again mate.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment