orxapi.tools.objectfit

The object-fit tools library for orxapi. A polyfill for browsers that don't support the object-fit CSS property. Unsure of what the object-fit does? Essentially object-fit is to <img> tags what background-size is to background-image. You can check out the MDN page for more details.

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.tools.objectfit --save

dependencies

none

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 object-fix tools with a Fuse Box Quantum API.

  <script type="text/javascript" src="../bundle/standalone/orxapi.tools.objectfit.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="../bundle/min/api.js"></script>
  <script type="text/javascript" src="../bundle/min/orxapi.tools.objectfit.min.js"></script>
  <script type="text/javascript" src="../bundle/min/orxapi.booking.validation.min.js"></script>
  ...

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

Package Managers

Tools Object-fit supports npm under the name "orxapi.tools.objectfit".

Usage

TypeScript code

import { initObjectFit } from "orxapi.tools.objectfit";

// Default initialization
initObjectFit();

// Add conditional handler for by example Blazy library
initObjectFit({condition: handleConditionSuccess});

/**
 * Handler of the condition success object fit
 * @param {HTMLImageElement} img
 * @return {boolean}
 */
function handleConditionSuccess(img: HTMLImageElement) {
    return img.classList.contents("b-lazy") ? img.classList.contents("b-loaded") : true;
}

JavaScript code

(function(doc) {

  // Default objectfit
  orxapiToolsObjectfit.initObjectFit();

  // Add conditional for example blazy library
  orxapiToolsObjectfit.initObjectFit({
    condition: function(img) {
      return img.classList.contents("b-lazy") ? img.classList.contents("b-loaded") : true;
    }
  });

})(document);

HTML code

<!-- Default usage -->
<figure class="image-wrap">
  <img src="/images/my-image.jpg" class="js-object-fit" alt="">
</figure>

<!-- With Blazy -->
<figure class="image-wrap">
  <img class="b-lazy" src="/images/empty.png" class="js-object-fit" data-src="/images/my-image.jpg" alt="">
</figure>

<!-- With Slick carousel -->
<div id="slider">
  <figure class="image-wrap ">
    <img data-lazy="/images/slider-image-1.jpg" class="js-object-fit" alt="">
  </figure>
  ...
</div>

Methods

• initObjectFit Initialize the objectfit.

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
• [x] Remove the image wrap
• [ ] Add unit tests
• [ ] Add functional tests
• [ ] Add documentation of the optional parameters
• [ ] Improve the documentation