22

✏️ Editing: juxtapose.js

/* juxtapose - v2017-03-16-19-29-42 - 2017-03-16
 * Copyright (c) 2017 Alex Duner and Northwestern University Knight Lab
 */
/* juxtapose - v1.1.2 - 2015-07-16
 * Copyright (c) 2015 Alex Duner and Northwestern University Knight Lab
 */

(function (document, window) {

var juxtapose = {
    sliders: [],
    OPTIMIZATION_ACCEPTED: 1,
    OPTIMIZATION_WAS_CONSTRAINED: 2
  };

var flickr_key = "d90fc2d1f4acc584e08b8eaea5bf4d6c";
  var FLICKR_SIZE_PREFERENCES = ['Large', 'Medium'];

function Graphic(properties, slider) {
    var self = this;
    this.image = new Image();

this.loaded = false;
    this.image.onload = function() {
      self.loaded = true;
      slider._onLoaded();
    };

this.image.src = properties.src;
    this.image.alt = properties.alt || '';
    this.label = properties.label || false;
    this.credit = properties.credit || false;
  }

function FlickrGraphic(properties, slider) {
    var self = this;
    this.image = new Image();

this.loaded = false;
    this.image.onload = function() {
      self.loaded = true;
      slider._onLoaded();
    };

this.flickrID = this.getFlickrID(properties.src);
    this.callFlickrAPI(this.flickrID, self);

this.label = properties.label || false;
    this.credit = properties.credit || false;
  }

FlickrGraphic.prototype = {
    getFlickrID: function(url) {
      var idx = url.indexOf("flickr.com/photos/");
      var pos = idx + "flickr.com/photos/".length;
      var photo_info = url.substr(pos);
      if (photo_info.indexOf('/') == -1) return null;
      if (photo_info.indexOf('/') === 0) photo_info = photo_info.substr(1);
      id = photo_info.split("/")[1];
      return id;
    },

callFlickrAPI: function(id, self) {
      var url = 'https://api.flickr.com/services/rest/?method=flickr.photos.getSizes' +
          '&api_key=' + flickr_key +
          '&photo_id=' + id + '&format=json&nojsoncallback=1';

setFlickrImage: function(src) {
      this.image.src = src;
    },

bestFlickrUrl: function(ary) {
 var dict = {};
 for (var i = 0; i < ary.length; i++) {
 dict[ary[i].label] = ary[i].source;
 }
 for (var j = 0; j < FLICKR_SIZE_PREFERENCES.length; j++) {
 if (FLICKR_SIZE_PREFERENCES[j] in dict) {
 return dict[FLICKR_SIZE_PREFERENCES[j]];
 }
 }
 return ary[0].source;
 }
 };

function addClass(element, c) {
    if (element.classList) {
      element.classList.add(c);
    } else {
      element.className += " " + c;
    }
  }

function setText(element, text) {
    if (document.body.textContent) {
      element.textContent = text;
    } else {
      element.innerText = text;
    }
  }

function checkFlickr(url) {
    var idx = url.indexOf("flickr.com/photos/");
    if (idx == -1) {
      return false;
    } else {
      return true;
    }
  }

// values of BOOLEAN_OPTIONS are ignored. just used for 'in' test on keys
  var BOOLEAN_OPTIONS =  {'animate': true, 'showLabels': true, 'showCredits': true, 'makeResponsive': true };
  function interpret_boolean(x) {
    if (typeof(x) != 'string') {
      return Boolean(x);
    }
    return !(x === 'false' || x === '');
  }

function JXSlider(selector, images, options) {

this.selector = selector;

var i;
    this.options = { // new options must have default values set here.
      animate: true,
      showLabels: true,
      showCredits: true,
      makeResponsive: true,
      startingPosition: "50%",
      mode: 'horizontal',
      prevIcon: '',
      nextIcon: '',
      callback: null // pass a callback function if you like
    };

for (i in this.options) {
      if(i in options) {
        if (i in BOOLEAN_OPTIONS) {
          this.options[i] = interpret_boolean(options[i]);
        } else {
          this.options[i] = options[i];
        }
      }
    }

if (images.length == 2) {

if(checkFlickr(images[0].src)) {
        this.imgBefore = new FlickrGraphic(images[0], this);
      } else {
        this.imgBefore = new Graphic(images[0], this);
      }

if(checkFlickr(images[1].src)) {
        this.imgAfter = new FlickrGraphic(images[1], this);
      } else {
        this.imgAfter = new Graphic(images[1], this);
      }

} else {
      console.warn("The images parameter takes two Image objects.");
    }

if (this.imgBefore.credit || this.imgAfter.credit) {
      this.options.showCredits = true;
    } else {
      this.options.showCredits = false;
    }
  }

JXSlider.prototype = {

updateSlider: function(input, animate) {
      var leftPercent, rightPercent;

if (this.options.mode === "vertical") {
        leftPercent = getTopPercent(this.slider, input);
      } else {
        leftPercent = getLeftPercent(this.slider, input);
      }

leftPercent = leftPercent.toFixed(2) + "%";
      leftPercentNum = parseFloat(leftPercent);
      rightPercent = (100 - leftPercentNum) + "%";

if (leftPercentNum > 0 && leftPercentNum < 100) {
 removeClass(this.handle, 'transition');
 removeClass(this.rightImage, 'transition');
 removeClass(this.leftImage, 'transition');

if (this.options.animate && animate) {
          addClass(this.handle, 'transition');
          addClass(this.leftImage, 'transition');
          addClass(this.rightImage, 'transition');
        }

if (this.options.mode === "vertical") {
          this.handle.style.top = leftPercent;
          this.leftImage.style.height = leftPercent;
          this.rightImage.style.height = rightPercent;
        } else {
          this.handle.style.left = leftPercent;
          this.leftImage.style.width = leftPercent;
          this.rightImage.style.width = rightPercent;
        }
        this.sliderPosition = leftPercent;
      }
    },

getPosition: function() {
      return this.sliderPosition;
    },

displayLabel: function(element, labelText) {
      label = document.createElement("div");
      label.className = 'jx-label';
      //label.setAttribute('tabindex', 0); //put the controller in the natural tab order of the document

setText(label, labelText);
      element.appendChild(label);
    },

displayCredits: function() {
      credit = document.createElement("div");
      credit.className = "jx-credit";

text = "Photo Credits:";
 if (this.imgBefore.credit) { text += " Before " + this.imgBefore.credit; }
 if (this.imgAfter.credit) { text += " After " + this.imgAfter.credit; }

credit.innerHTML = text;

this.wrapper.appendChild(credit);
    },

setStartingPosition: function(s) {
      this.options.startingPosition = s;
    },

checkImages: function() {
      if (getImageDimensions(this.imgBefore.image).aspect() ==
        getImageDimensions(this.imgAfter.image).aspect()) {
        return true;
      } else {
        return false;
      }
    },

calculateDims: function(width, height){
      var ratio = getImageDimensions(this.imgBefore.image).aspect();

if (width) {
        height = width / ratio;
      } else if (height) {
        width = height * ratio;
      }

return {
        width: width,
        height: height,
        ratio: ratio
      };
    },

responsivizeIframe: function(dims){
 //Check the slider dimensions against the iframe (window) dimensions
 if (dims.height < window.innerHeight){
 //If the aspect ratio is greater than 1, imgs are landscape, so letterbox top and bottom
 if (dims.ratio >= 1){
 this.wrapper.style.paddingTop = parseInt((window.innerHeight - dims.height) / 2) + "px";
 }
 } else if (dims.height > window.innerHeight) {
 /* If the image is too tall for the window, which happens at 100% width on large screens,
 * force dimension recalculation based on height instead of width */
 dims = this.calculateDims(0, window.innerHeight);
 this.wrapper.style.paddingLeft = parseInt((window.innerWidth - dims.width) / 2) + "px";
 }
 if (this.options.showCredits) {
 // accommodate the credits box within the iframe
 dims.height -= 13;
 }
 return dims;
 },

setWrapperDimensions: function() {
      var wrapperWidth = getComputedWidthAndHeight(this.wrapper).width;
      var wrapperHeight = getComputedWidthAndHeight(this.wrapper).height;
      var dims = this.calculateDims(wrapperWidth, wrapperHeight);

// if window is in iframe, make sure images don't overflow boundaries
      if (window.location !== window.parent.location && !this.options.makeResponsive) {
        dims = this.responsivizeIframe(dims);
      }

// this.wrapper.style.height = parseInt(dims.height) + "px";
      // this.wrapper.style.width = parseInt(dims.width) + "px";

this.slider.style.height = parseInt(dims.height) + "px";
      this.slider.style.width = parseInt(dims.width) + "px";
    },

optimizeWrapper: function(maxWidth){
 var result = juxtapose.OPTIMIZATION_ACCEPTED;
 if ((this.imgBefore.image.naturalWidth >= maxWidth) && (this.imgAfter.image.naturalWidth >= maxWidth)) {
 this.wrapper.style.width = maxWidth + "px";
 result = juxtapose.OPTIMIZATION_WAS_CONSTRAINED;
 } else if (this.imgAfter.image.naturalWidth < maxWidth) {
 this.wrapper.style.width = this.imgAfter.image.naturalWidth + "px";
 } else {
 this.wrapper.style.width = this.imgBefore.image.naturalWidth + "px";
 }
 this.setWrapperDimensions();
 return result;
 },

_onLoaded: function() {

if (this.imgBefore && this.imgBefore.loaded === true &&
        this.imgAfter && this.imgAfter.loaded === true) {

this.wrapper = document.querySelector(this.selector);
        addClass(this.wrapper, 'juxtapose');

this.slider = document.createElement("div");
        this.slider.className = 'jx-slider';
        this.wrapper.appendChild(this.slider);

this.wrapper.style.width = getNaturalDimensions(this.imgBefore.image).width;
        this.setWrapperDimensions();

if (this.options.mode != "horizontal") {
          addClass(this.slider, this.options.mode);
        }

this.handle = document.createElement("div");
        this.handle.className = 'jx-handle';

this.rightImage = document.createElement("div");
        this.rightImage.className = 'jx-image jx-right';
        this.rightImage.appendChild(this.imgAfter.image);

this.leftImage = document.createElement("div");
        this.leftImage.className = 'jx-image jx-left';
        this.leftImage.appendChild(this.imgBefore.image);

this.labCredit = document.createElement("a");
        this.labCredit.setAttribute('href', 'http://juxtapose.knightlab.com');
        this.labCredit.setAttribute('target', '_blank');
        this.labCredit.className = 'jx-knightlab';
        this.labLogo = document.createElement("div");
        this.labLogo.className = 'knightlab-logo';
        this.labCredit.appendChild(this.labLogo);
        this.projectName = document.createElement("span");
        this.projectName.className = 'juxtapose-name';
        setText(this.projectName, 'JuxtaposeJS');
        this.labCredit.appendChild(this.projectName);

this.slider.appendChild(this.handle);
        this.slider.appendChild(this.leftImage);
        this.slider.appendChild(this.rightImage);
        //this.slider.appendChild(this.labCredit);

this.leftArrow = document.createElement("div");
        this.rightArrow = document.createElement("div");
        this.control = document.createElement("div");
        this.controller = document.createElement("div");
        this.controllerPrev = document.createElement("i");
        this.controllerNext = document.createElement("i");

this.leftArrow.className = 'jx-arrow jx-left';
        this.rightArrow.className = 'jx-arrow jx-right';
        this.control.className = 'jx-control';
        this.controller.className = 'jx-controller';
        this.controllerPrev.innerHTML = this.options.prevIcon;
        this.controllerNext.innerHTML = this.options.nextIcon;

//this.controller.setAttribute('tabindex', 0); //put the controller in the natural tab order of the document
        this.controller.setAttribute('role', 'slider');
        this.controller.setAttribute('aria-valuenow', 50);
        this.controller.setAttribute('aria-valuemin', 0);
        this.controller.setAttribute('aria-valuemax', 100);
        this.controller.setAttribute('aria-label', 50);

this.handle.appendChild(this.leftArrow);
        this.handle.appendChild(this.control);
        this.handle.appendChild(this.rightArrow);
        this.control.appendChild(this.controller);
        this.controller.appendChild(this.controllerPrev);
        this.controller.appendChild(this.controllerNext);

this._init();
      }
    },

_init: function() {

if (this.checkImages() === false) {
        console.warn(this, "Check that the two images have the same aspect ratio for the slider to work correctly.");
      }

this.updateSlider(this.options.startingPosition, false);

if (this.options.showLabels === true) {
        if (this.imgBefore.label) { this.displayLabel(this.leftImage, this.imgBefore.label); }
        if (this.imgAfter.label) { this.displayLabel(this.rightImage, this.imgAfter.label); }
      }

if (this.options.showCredits === true) {
        this.displayCredits();
      }

var self = this;

// Set up Javascript Events
      // On mousedown, call updateSlider then set animate to false
      // (if animate is true, adds css transition when updating).

this.slider.addEventListener("mousedown", function(e) {
        e = e || window.event;
        e.preventDefault();
        self.updateSlider(e, true);
        animate = true;

this.addEventListener("mousemove", function(e) {
          e = e || window.event;
          e.preventDefault();
          if (animate) { self.updateSlider(e, false); }
        });

this.addEventListener('mouseup', function(e) {
          e = e || window.event;
          e.preventDefault();
          e.stopPropagation();
          this.removeEventListener('mouseup', arguments.callee);
          animate = false;
        });
      });

this.slider.addEventListener("touchstart", function(e) {
        e = e || window.event;
        //e.preventDefault();
        e.stopPropagation();
        self.updateSlider(e, true);

this.addEventListener("touchmove", function(e) {
          e = e || window.event;
          //e.preventDefault();
          e.stopPropagation();
          self.updateSlider(event, false);
        });

});

window.addEventListener( 'orientationchange', function() {
        self.setWrapperDimensions();
      });

window.addEventListener( 'resize', function() {
        self.setWrapperDimensions();
      });

/* keyboard accessibility */
      this.handle.addEventListener("keydown", function (e) {
        e = e || window.event;
        var key = e.which || e.keyCode;
        var ariaValue = parseFloat(this.style.left);

//move jx-controller left
          if (key == 37) {
            ariaValue = ariaValue - 1;
          var leftStart = parseFloat(this.style.left) - 1;
          self.updateSlider(leftStart, false);
          self.controller.setAttribute('aria-valuenow', ariaValue);
          self.controller.setAttribute('aria-label', ariaValue);
          }

//move jx-controller right
          if (key == 39) {
            ariaValue = ariaValue + 1;
          var rightStart = parseFloat(this.style.left) + 1;
          self.updateSlider(rightStart, false);
          self.controller.setAttribute('aria-valuenow', ariaValue);
          self.controller.setAttribute('aria-label', ariaValue);
          }
      });

//toggle right-hand image visibility
      this.leftImage.addEventListener("keydown", function (event) {
           var key = event.which || event.keyCode;
            if ((key == 13) || (key ==32)) {
              self.updateSlider("90%", true);
                self.controller.setAttribute('aria-valuenow', 90);
                self.controller.setAttribute('aria-label', 90);
            }
      });

//toggle left-hand image visibility
      this.rightImage.addEventListener("keydown", function (event) {
           var key = event.which || event.keyCode;
            if ((key == 13) || (key ==32)) {
            self.updateSlider("10%", true);
            self.controller.setAttribute('aria-valuenow', 10);
            self.controller.setAttribute('aria-label', 10);
            }
      });

juxtapose.sliders.push(this);

if (this.options.callback && typeof(this.options.callback) == 'function') {
        this.options.callback(this);
      }
    }

};

/*
    Given an element that is configured with the proper data elements, make a slider out of it.
    Normally this will just be used by scanPage.
  */
  juxtapose.makeSlider = function (element, idx) {
    if (typeof idx == 'undefined') {
      idx = juxtapose.sliders.length; // not super threadsafe...
    }

var w = element;

var images = w.querySelectorAll('img');

specificClass = 'juxtapose-' + idx;
    addClass(element, specificClass);

selector = '.' + specificClass;

if (w.innerHTML) {
      w.innerHTML = '';
    } else {
      w.innerText = '';
    }

slider = new juxtapose.JXSlider(
      selector,
      [
        {
          src: images[0].src,
          label: images[0].getAttribute('data-label'),
          credit: images[0].getAttribute('data-credit'),
          alt: images[0].alt
        },
        {
          src: images[1].src,
          label: images[1].getAttribute('data-label'),
          credit: images[1].getAttribute('data-credit'),
          alt: images[1].alt
        }
      ],
      options
    );
  };

//Enable HTML Implementation
  juxtapose.scanPage = function( selector ) {
      var elements = document.querySelectorAll( selector );

for (var i = 0; i < elements.length; i++) {
 if ( 'true' !== elements[i].getAttribute( 'data-init' ) ) {
 elements[i].setAttribute( 'data-init', 'true' );
 juxtapose.makeSlider(elements[i], i);
 }
 }
 };

juxtapose.JXSlider = JXSlider;
  window.juxtapose = juxtapose;

}(document, window));

// addEventListener polyfill 1.0 / Eirik Backer / MIT Licence
(function(win, doc){
  if(win.addEventListener)return;   //No need to polyfill

addListen([doc, win]);
 if('Element' in win)win.Element.prototype.addEventListener = addEvent; //IE8
 else{ //IE < 8
 doc.attachEvent('onreadystatechange', function(){addListen(doc.all);}); //Make sure we also init at domReady
 docHijack('getElementsByTagName');
 docHijack('getElementById');
 docHijack('createElement');
 addListen(doc.all);
 }
})(window, document);

MR SKB