Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add custom selector for V3.0 #216

Closed
wants to merge 20 commits into from
Closed

Add custom selector for V3.0 #216

wants to merge 20 commits into from

Conversation

PaoloFalomo
Copy link

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.

Imported code from old foundation-sites-6:joyride branch.
Aligned code with latest F6 code.
Some ES6 stuff.
Added a basic demo (containing some open points/future features).
First draft for javascript tests.
Commenting for configuration parameters.
Reorganized files accordint to guideline: https://github.com/zurb/foundation-standards/blob/master/folders.md.
Adjusted gulp tasks accordingly
Demo for standalone files.
Enhanced test cases for JS.
Added MediaQuery to SCSS dependency files so tooltips get opened and not fail because MQs are missing.
Added showOn-option to deal with missing MediaQueries in standalone verion.
Added demo page for UMD using requireJS.
Updated demo pages.
Added whatinput rule in SASS.
Added more commands to package.json.
Remove sinon.
Adjusted path for JS test set.
Added browser-sync.
Implemented watching of files + browser reloading.
Moved demo files to tests/visual.
Visual tests now run default gulp task, which will build, watch and serve files.
Normal gulp tasks will now output to _build/assets/.
Minified JS and CSS are only generated when using the new dist task.
Changed the links in the docs (external dependencies are now found in lib/, plugin files in assets/).
@PaoloFalomo
Copy link
Author

Moved to issue #217

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

Successfully merging this pull request may close these issues.

2 participants