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;
    this.init();
  }

  Focus.prototype = {
    init: function () {
      var self = this;
      // identify frame
      this.wrapper = this.img.parentNode;
      var cnt = 0;
      while ((this.wrapper.tagName.toLowerCase() !== 'body') &&
             ((this.wrapper.offsetWidth === 0) || (this.wrapper.offsetHeight === 0))) {
        this.wrapper = this.wrapper.parentNode;
        cnt++;
        if (cnt>2) {
          break;
        }
      }
      if ((this.wrapper.tagName.toLowerCase() !== 'body') && (cnt < 3)) {
        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
        this.img.style.position = 'absolute';
        this.img.style.maxWidth = 'none';
        this.handleEvent();

        // 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);
        }
      } else {
        setTimeout(function() {self.init();}, 15);
      }
    },
    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.naturalWidth / this.img.naturalHeight) >= (width / height))) {
        this.img.style.width = 'auto';
        this.img.style.height = '100%';
        this.img.style.top = '0';
        scaled = this.img.naturalWidth * (height / this.img.naturalHeight);
        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.naturalHeight * (width / this.img.naturalWidth);
        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 that class list contains "focus"
  var els = document.querySelectorAll('img[class~="focus"]');
  if (els.length > 0) {
    // this don't breaks viewport (lazy loading)
    for (var i=0; i < els.length; i++) {
      if (!els[i].complete || (els[i].naturalWidth === 0)) {
        els[i].addEventListener("load", function (e) { new Focus(this); }, false);
      } else {
        new Focus(els[i]);
      }
    };
  }
})();