zurb / joyride

jQuery feature tour plugin.
http://www.zurb.com/playground/jquery-joyride-feature-tour-plugin
1.42k stars 241 forks source link

Feature request: Custom target selector #217

Open PaoloFalomo opened 8 years ago

PaoloFalomo commented 8 years ago

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 commented 7 years ago

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>