Feature request: Custom target selector

[PaoloFalomo]

Hi! I love this tool :)

Description of the feature

I've made a tiny mod easy to integrate that will allow you to select targets using a custom css selector directly with a data-customselector html attribute

Technical purpose

Inside the method definition of set_target on the jquery.joyride.js file i want to suggest this tiny addon:

From this:

set_target : function () {
        var cl = settings.$li.attr('data-class'),
            id = settings.$li.attr('data-id'),
            $sel = function () {
              if (id) {
                return $(settings.document.getElementById(id));
              } else if (cl) {
                return $('.' + cl).filter(":visible").first();
              } else {
                return $('body');
              }
            };

        settings.$target = $sel();
      },

To this:

set_target : function () {
        var cl = settings.$li.attr('data-class'),
            id = settings.$li.attr('data-id'),
            cs= settings.$li.attr('data-customselector'),
            $sel = function () {
              if (id) {
                return $(settings.document.getElementById(id));
              } else if (cl) {
                return $('.' + cl).filter(":visible").first();
              } else if (cs) {
                return $(cs).filter(":visible").first();
              } else {
                return $('body');
              }
            };

        settings.$target = $sel();
      },

What It's changing? (3 lines)

set_target : function () {
        var cl = settings.$li.attr('data-class'),
            id = settings.$li.attr('data-id'),
+           cs= settings.$li.attr('data-customselector'),
            $sel = function () {
              if (id) {
                return $(settings.document.getElementById(id));
              } else if (cl) {
                return $('.' + cl).filter(":visible").first();
+             } else if (cs) {
+               return $(cs).filter(":visible").first();
              } else {
                return $('body');
              }
            };

        settings.$target = $sel();
      },

Example of usage

Inside the <ol>s each <li> will now support a data-customselector attribute.

<ol>
   <li data-id="item-one"></li><!-- Normal target using id-->
   <li data-class="a-classitem"></li><!-- Normal target using class-->
   <li data-customselector=".container > .customitem"></li><!-- Custom target using a css selector-->
   <li data-customselector='[myattribute="true"]'></li><!-- Another custom target using a css selector--> <!-- check here the support of the single quote attribute https://www.w3.org/TR/html4/intro/sgmltut.html#h-3.2.2 -->
</ol>

This has been tested by me. Fell free to contribute. ✔️
⚠️ As for classes even in this custom css selector will be always taken the :first() target found.

[robinfhu]

The current way around this is to just hack it using data-class. You just have to avoid putting a . in front of the first selector. Also first CSS selector must be a class.

<li data-class='my-selector > .customitem'> ...</li>