Focus (Point) Vanilla JS

// coding: utf-8
/** Created by: Udo Schmal | https://www.gocher.me/ */
(function() {
  'use strict';
  // initialize focus object
  function Focus (img) {
    this.img = img; // image
    this.wrapper = img.parentNode; // frame
    this.focus_x = null;
    this.focus_y = null;
    this.focus_observe = false;
    // find frame if it's not the parent
    while ((this.wrapper.tagName.toLowerCase() !== 'div') &&
           (this.wrapper.tagName.toLowerCase() !== 'body')) {
      this.wrapper = this.wrapper.parentNode;
    }
    if (this.wrapper.tagName.toLowerCase() !== 'body') {
      if (this.img.hasAttribute('data-focus-observe')) {
        this.focus_observe = this.img.getAttribute('data-focus-observe');
      }
      // frame must have position attribute for focused content
      if (!this.wrapper.style.position) {
        this.wrapper.style.position = 'relative';
      }
      // image must have a absolute position
      img.style.position = 'absolute';
      img.style.maxWidth = 'none';
      this.handleEvent();

      var self = this;
      // observe image for changes in focus attributes
      if (this.focus_observe) {
        this.imgObserver = new MutationObserver(function () { self.handleEvent(); });
        this.imgObserver.observe(self.img, {
          attributes: true,
          attributeFilter: ['data-focus', 'data-focus-x', 'data-focus-y']
        });
      }

      // observe wrapper on resize
      if ('ResizeObserver' in Window) {
        this.wrapperObserver = new ResizeObserver(function () { self.handleEvent(); });
        this.wrapperObserver.observe(self.wrapper);
      } else {
        // observe wrapper for changes in class and style attribute
        this.wrapperObserver = new MutationObserver(function () { self.handleEvent(); });
        this.wrapperObserver.observe(self.wrapper, {
          attributes: true,
          attributeFilter: ['class', 'style']
        });
        // until ResizeObserver works on all devices
        this.handleEvent.bind(this);
        window.addEventListener("resize", this, false);
      }
    }
  }

  Focus.prototype = {
    handleEvent: function () {
      // get dependencies from attributes
      var width = this.wrapper.offsetWidth, // frame width
          height = this.wrapper.offsetHeight, // frame height
          type = this.img.getAttribute('data-focus'); // full centered image else cover
      if (this.focus_observe || this.focus_x == null) {
        this.focus_x = .50; // center
        this.focus_y = .50; // center
        if (type !== 'contain') {
          // overwrite focus x coortinate else center
          if (this.img.getAttribute('data-focus-x')) {
            this.focus_x = parseInt(this.img.getAttribute('data-focus-x')) / 100;
          }
          // overwrite focus y coordinate else center
          if (this.img.getAttribute('data-focus-y')) {
            this.focus_y = parseInt(this.img.getAttribute('data-focus-y')) / 100;
          }
        }
      }
      // concept: depending on the aspect ratio and the type of filling of the frame
      // one side adapts to the frame and the other side is cut off or has a stub
      var scaled, value;
      if ((type !== 'contain')  === ((this.img.width / this.img.height) >= (width / height))) {
        this.img.style.width = 'auto';
        this.img.style.height = '100%';
        this.img.style.top = '0';
        scaled = this.img.width * (this.img.height / height);
        value = - Math.floor((scaled * this.focus_x) - (width / 2));
        if (type !== 'contain')  {
          if (value > 0) {
            value = 0;
          } else if (value < width - scaled) {
            value = Math.floor(width - scaled);
          }
        }
        this.img.style.left = value + 'px';
      } else {
        this.img.style.width = '100%';
        this.img.style.height = 'auto';
        this.img.style.left = '0';
        scaled = this.img.height * (this.img.width / width);
        value = - Math.floor((scaled * this.focus_y) - (height / 2));
        if (type !== 'contain')  {
          if (value > 0) {
            value = 0;
          } else if (value < (height - scaled)) {
            value = Math.floor(height - scaled);
          }
        }
        this.img.style.top = value + 'px';
      }
    }
  };

  // get all images on page
  var i, els = document.getElementsByTagName("img"), len = els.length;
  for (i = 0; i < len; i++) {
    // add a on load eventlistener to set the focus if the class list contains "focus"
    // this don't breaks lazy loading
    if (els[i].classList.contains("focus")) {
      if (!els[i].complete || (els[i].naturalWidth === 0)) {
        els[i].addEventListener("load", function (e) { new Focus(this); }, false);
      } else {
        new Focus(els[i]);
      }
    }
  }
})();