orxapi.tools.clickable

The clickable tools library for orxapi.

Getting Started

If you haven't used NodeJs before, be sure to have install the LTS version on your desktop ! Check your version with this command:

node -v
v6.9.2

Installation

npm install orxapi.plugins.tabs --save

dependencies

jQuery

Warning: update version 1 to version 2

The orxapi.tools.clickable is new API, be careful if you update from 1.x.x
The callback method is remove and replace by before method, see use for more information.

Information

This library is written in TypeScript, but you can use JavaScript.

Direct download

Download the script here and include it (unless you are packaging scripts somehow else):

Standalone: You can use the standalone version into bundle directory. The bundle contains a minimized version of the clickable tools with a Fuse Box Quantum API.

  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script type="text/javascript" src="../bundle/standalone/orxapi.tools.clickable.min.js"></script>

Min: If you want use other orxapi tools or plugins choose the min bundle and add external api.

  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script type="text/javascript" src="../bundle/min/api.js"></script>
  <script type="text/javascript" src="../bundle/min/orxapi.tools.clickable.min.js"></script>
  <script type="text/javascript" src="../bundle/min/orxapi.booking.validation.min.js"></script>
  ...

You access to the methods by the namespace "orxapiToolsClickable" see the exemple JavaScript

Package Managers

Tools Clickable supports npm under the name "orxapi.tools.clickable".

Usage

TypeScript code

import { initClickable, deleteClickable } from "orxapi.tools.clickable";

// Default clickable
initClickable();

// Special clickable initialize with custom callblack
initClickable({ 
    target: $("#specialWrap"), 
    selector: ".is-special-clickable", 
    before: (elem: JQuery, target: JQuery, userdata: IUserDataClickable) => { 
      console.log(userdata.link); 
    }
});

// Delete the default clickable event
deleteClickable();

JavaScript code

(function($) {

  // Default clickable
  orxapiToolsClickable.initClickable();

  // Custom clickable
  orxapiToolsClickable.initClickable({
    target: $("#customClickable"),
    selector: ".is-special-clickable",
    before: function(elem, target, userdata) {
      if (elem.hasClass("add-link-param")) {
        console.log("Update link with custom parameters");
        userdata.link = userdata.link + elem.data("addParam");
      }
    }
  });

})(jQuery);

HTML code

<!-- Default usage -->
<article class="is-clickable" data-link="http://www.orchestra.eu">
  <h2>Orchestra</h2>
  ...
  <a href="http://www.orchestra.eu">More information</a>
</div>

<!-- With target -->
<article class="is-clickable" 
         data-link="http://www.travelsoft.fr"
         data-link-target="_blank">
  <h2>Travelsoft</h2>
  ...
  <a href="http://www.travelsoft.fr">More group information</a>
</div>

<!-- With encode uri -->
<article class="is-clickable"
         data-link="http://www.orchestra.eu?query=Caractères alphanumériques et espace"
         data-encode-uri-link="true">
  <h2>Orchestra</h2>
  <a href="http://www.orchestra.eu">More information</a>
</div>

<!-- Escape internal trigger element -->
<article class="is-clickable" data-link="http://www.orchestra.eu">
  <h2>Orchestra</h2>
  <a href="http://www.travelsoft.fr" class="un-clickable">More group information</span>
  <a href="http://www.orchestra.eu">More information</a>
</div>

Methods

initClickable Initialize the clickable delegate event.
deleteClickable Delete the clickable delegate event

See docs for more information

Compatibility

This library was designed to work with ES 5+

Tested with browsers

Internet Explorer 11, Edge, Chrome, Firefox

TODO

[x] Add examples
[ ] Add unit tests
[ ] Add functional tests
[ ] Add documentation of the optional parameters
[ ] Improve the documentation