.add(moduleName, selector) method

Add a new entry to be autoloaded.

Accepts

• moduleName

  The module name (Example: 'Modal_1', or 'Dropdown_1')

• selector

  A selector which finds elements where this module should be autoloaded (Example: '.my-modal' or '.my-dropdown')

.remove(moduleName) method

Removes a module from autoload, making it not be automatically loaded.

Accepts

• moduleName

  The module's name and version ('Name_ver')

.run(parentEl, [options]) method

Run Autoload on a specific element.

Useful when you load something from AJAX and want it to have automatically loaded Ink modules.

Accepts

• parentEl

  Root element. The children of this element will be processed by Autoload.

• options

  Options object, containing:

• options.forceAutoload

  Autoload things on elements even if they have `data-autoload="false"`

• options.createClose

  Whether to create the Ink.UI.Close component. Defaults to `true`.

• options.createSmoothScroller

  Whether to create the Scroller component. Defaults to `true`.

• options.selectors

  Ink.Autoload.selectorsA hash mapping module names to selectors that match elements to load these modules. For example, `{ 'Modal_1': '.my-specific-modal' }`.

• options.waitForDOMLoaded

  falseDo nothing until the DOM is loaded. Uses Ink.Dom.Loaded.run();

What is Autoload?

Autoload makes creating Ink components easy. You just have to include a certain class in your elements (or otherwise make them match a certain selector) and Autoload will find them and create the components for you.

<div id="my-something">
    ...
</div>
<script>
    Ink.requireModules(['Ink.UI.Something_1'], function (Something) {
        new Something('#my-sticky', { someOption: true, numberOption: 3 });
    });
</script>

Notice how the ID is required to find the element and create it.

<div class="ink-something" data-some-option="true" data-number-option="3">
    ...
</div>

<script src="/path/to/autoload.js"></script>

Autoload will automatically wait until the page loads and create the UI modules for you. If you didn't load the module into the page using a script tag, it will use Ink's requireModules machinery to load it.

The following modules are available to be loaded by Autoload

You can modify your dist/autoload.js to change the selector list.

Is Autoload getting in the way?

If Autoload is loading things it shouldn't, you can do one of these things:

• Just add the data-autoload="false" attribute to the element in question (new in Ink 3.0.3)
• Modify your dist/autoload.js file to remove or modify the selector in question.
• Add <script>window.INK_NO_AUTO_LOAD = true</script> to your page to stop Autoload from executing when the DOMReady event fires. You can use Autoload.run() to run it selectively inside a specific container in your page.

How do I get an Ink UI Component from an element Autoload has loaded?

You may want to get a component instance in order to call methods on it or destroy it.

You can (it works better in ink>=3.0.3) use Ink.UI.Common.getInstance() to get an instance from a DOM element at any time.

An alternative would be to stop autoload from loading the module and load it yourself using raw javascript.