bigpicture.js

/*
 *
 * bigpicture.js
 *
 * bigpicture.js is a library that allows infinite panning and infinite zooming in HTML pages.
 *               See it in action on http://www.bigpicture.bi/demo !
 *
 * author:  Joseph Ernest (twitter: @JosephErnest)
 * url:     http://github.com/josephernest/bigpicture.js
 *
 */

var bigpicture = (function() {
  "use strict";

  /*
   * INITIALIZATION
   */

  var bpContainer = document.getElementById('bigpicture-container'),
    bp = document.getElementById('bigpicture');

  if (!bp) { return; }

  bp.setAttribute('spellcheck', false);

  var params = { x: getQueryVariable('x'), y: getQueryVariable('y'), zoom: getQueryVariable('zoom') };

  var current = {};
  current.x = params.x ? parseFloat(params.x) : $(bp).data('x');
  current.y = params.y ? parseFloat(params.y) : $(bp).data('y');
  current.zoom = params.zoom ? parseFloat(params.zoom) : $(bp).data('zoom');

  bp.x = 0; bp.y = 0;
  bp.updateContainerPosition = function() { bp.style.left = bp.x + 'px'; bp.style.top = bp.y + 'px'; };

  /*
   * TEXT BOXES
   */

  $(".text").each(function() { updateTextPosition(this); });     // initialization

  $(bp).on('blur', '.text', function() { if ($(this).text().replace(/^\s+|\s+$/g, '') === '') { $(this).remove(); } });

  $(bp).on('input', '.text', function() { redoSearch = true; });

  function updateTextPosition(e) {
    e.style.fontSize = $(e).data("size") / current.zoom + 'px';
    e.style.left = ($(e).data("x") - current.x) / current.zoom - bp.x + 'px';
    e.style.top = ($(e).data("y") - current.y) / current.zoom - bp.y + 'px';
  }

  function newText(x, y, size, text) {
    var tb = document.createElement('div');
    tb.className = "text";
    tb.contentEditable = true;
    tb.innerHTML = text;
    $(tb).data("x", x).data("y", y).data("size", size);
    updateTextPosition(tb);
    bp.appendChild(tb);
    return tb;
  }

  bpContainer.onclick = function(e) {
    if (isContainedByClass(e.target, 'text')) { return; }
    newText(current.x + (e.clientX) * current.zoom, current.y + (e.clientY) * current.zoom, 20 * current.zoom, '').focus();
  };

  /*
   * PAN AND MOVE
   */

  var movingText = null,
    dragging = false,
    previousMousePosition;

  bpContainer.onmousedown = function(e) {
    if ($(e.target).hasClass('text') && (e.ctrlKey || e.metaKey)) {
      movingText = e.target;
      movingText.className = "text noselect notransition";
    }
    else {
      movingText = null;
      dragging = true;
    }
    biggestPictureSeen = false;
    previousMousePosition = { x: e.pageX, y: e.pageY };
  };

  window.onmouseup = function() {
    dragging = false;
    if (movingText) { movingText.className = "text"; }
    movingText = null;
  };

  bpContainer.ondragstart = function(e) {
    e.preventDefault();
  };

  bpContainer.onmousemove = function(e) {
    if (dragging && !e.shiftKey) {       // SHIFT prevents panning / allows selection
      bp.style.transitionDuration = "0s";
      bp.x += e.pageX - previousMousePosition.x;
      bp.y += e.pageY - previousMousePosition.y;
      bp.updateContainerPosition();
      current.x -= (e.pageX - previousMousePosition.x) * current.zoom;
      current.y -= (e.pageY - previousMousePosition.y) * current.zoom;
      previousMousePosition = { x: e.pageX, y: e.pageY };
    }
    if (movingText) {
      $(movingText).data("x", $(movingText).data("x") + (e.pageX - previousMousePosition.x) * current.zoom);
      $(movingText).data("y", $(movingText).data("y") + (e.pageY - previousMousePosition.y) * current.zoom);
      updateTextPosition(movingText);
      previousMousePosition = { x: e.pageX, y: e.pageY };
    }
  };

  /*
   * ZOOM
   */

  bpContainer.ondblclick = function(e) {
    e.preventDefault();
    onZoom((e.ctrlKey || e.metaKey) ? current.zoom * 1.7 * 1.7 : current.zoom / 1.7 / 1.7, current.x + e.clientX * current.zoom, current.y + e.clientY * current.zoom, e.clientX, e.clientY);
  };

  var biggestPictureSeen = false,
    previous;

  function onZoom(zoom, wx, wy, sx, sy) {  // zoom on (wx, wy) (world coordinates) which will be placed on (sx, sy) (screen coordinates)
    wx = (typeof wx === "undefined") ? current.x + window.innerWidth / 2 * current.zoom : wx;
    wy = (typeof wy === "undefined") ? current.y + window.innerHeight / 2 * current.zoom : wy;
    sx = (typeof sx === "undefined") ? window.innerWidth / 2  : sx;
    sy = (typeof sy === "undefined") ? window.innerHeight / 2 : sy;

    bp.style.transitionDuration = "0.2s";

    bp.x = 0; bp.y = 0;
    bp.updateContainerPosition();
    current.x = wx - sx * zoom; current.y = wy - sy * zoom; current.zoom = zoom;

    $(".text").each(function() { updateTextPosition(this); });

    biggestPictureSeen = false;
  }

  function zoomOnText(res) {
    onZoom($(res).data('size') / 20, $(res).data('x'), $(res).data('y'));
  }

  function seeBiggestPicture(e) {
    e.preventDefault();
    document.activeElement.blur();
    function universeboundingrect() {
      var minX = Infinity, maxX = - Infinity, minY = Infinity, maxY = - Infinity;
      var texteelements = document.getElementsByClassName('text');
      [].forEach.call(texteelements, function(elt) {
        var rect2 = elt.getBoundingClientRect();
        var rect = { left: $(elt).data("x"),
                     top: $(elt).data("y"),
                     right: (rect2.width > 2 && rect2.width < 10000) ? current.x + rect2.right * current.zoom : $(elt).data("x") + 300 * $(elt).data("size") / 20,
                     bottom: (rect2.height > 2 && rect2.height < 10000) ? current.y + rect2.bottom * current.zoom : $(elt).data("y") + 100 * $(elt).data("size") / 20 };
        if (rect.left < minX) { minX = rect.left; }
        if (rect.right > maxX) { maxX = rect.right; }
        if (rect.top < minY) { minY = rect.top; }
        if (rect.bottom > maxY) { maxY = rect.bottom; }
      });
      return { minX: minX, maxX: maxX, minY: minY, maxY: maxY };
    }

    var texts = document.getElementsByClassName('text');
    if (texts.length === 0) { return; } 
    if (texts.length === 1) { zoomOnText(texts[0]); return; }

    if (!biggestPictureSeen) {
      previous = { x: current.x, y: current.y, zoom: current.zoom };
      var rect = universeboundingrect();
      var zoom = Math.max((rect.maxX - rect.minX) / window.innerWidth, (rect.maxY - rect.minY) / window.innerHeight) * 1.1;
      onZoom(zoom, (rect.minX + rect.maxX) / 2, (rect.minY + rect.maxY) / 2);
      biggestPictureSeen = true;
    }
    else {
      onZoom(previous.zoom, previous.x, previous.y, 0, 0);
      biggestPictureSeen = false;
    }
  }

  /*
   * SEARCH
   */

  var results = { index: -1, elements: [], text: "" },
    redoSearch = true,
    query;

  function find(txt) {
    results = { index: -1, elements: [], text: txt };
    $(".text").each(function() {
      if ($(this).text().toLowerCase().indexOf(txt.toLowerCase()) != -1) { results.elements.push(this); }
    });
    if (results.elements.length > 0) { results.index = 0; }
  }

  function findNext(txt) {
    if (!txt || txt.replace(/^\s+|\s+$/g, '') === '') { return; }   // empty search
    if (results.index == -1 || results.text != txt || redoSearch) {
      find(txt);
      if (results.index == -1) { return; }       // still no results
      redoSearch = false;
    }
    var res = results.elements[results.index];
    zoomOnText(res);
    results.index += 1;
    if (results.index == results.elements.length) { results.index = 0; }  // loop
  }

  /*
   * MOUSEWHEEL
   */

  var mousewheeldelta = 0, 
    last_e, 
    mousewheeltimer = null, 
    mousewheel;

  if (navigator.appVersion.indexOf("Mac") != -1) {   // Mac OS X
    mousewheel = function(e) {
      e.preventDefault();
      mousewheeldelta += Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail)));
      last_e = e;
      if (!mousewheeltimer) {
        mousewheeltimer = setTimeout(function() {
          onZoom((mousewheeldelta > 0) ? current.zoom / 1.7 : current.zoom * 1.7, current.x + last_e.clientX * current.zoom, current.y + last_e.clientY * current.zoom, last_e.clientX, last_e.clientY);
          mousewheeldelta = 0;
          mousewheeltimer = null; }, 70);
      }
    };
  }
  else {
    mousewheel = function(e) {
      e.preventDefault();
      var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail)));
      onZoom((delta > 0) ? current.zoom / 1.7 : current.zoom * 1.7, current.x + e.clientX * current.zoom, current.y + e.clientY * current.zoom, e.clientX, e.clientY);
    };
  }

  if ("onmousewheel" in document) { bpContainer.onmousewheel = mousewheel; }
  else { bpContainer.addEventListener('DOMMouseScroll', mousewheel, false); }

  /*
   * KEYBOARD SHORTCUTS
   */

  window.onkeydown = function(e) {
    if (((e.ctrlKey && !e.altKey || e.metaKey) && (e.keyCode == 61 || e.keyCode == 187 || e.keyCode == 171 || e.keyCode == 107 || e.key == '+' || e.key == '=' ))   // CTRL+PLUS or COMMAND+PLUS 
    || e.keyCode == 34) {   // PAGE DOWN     // !e.altKey to prevent catching of ALT-GR 
      e.preventDefault();
      onZoom(current.zoom / 1.7);
      return;
    }
    if (((e.ctrlKey && !e.altKey || e.metaKey) && (e.keyCode == 54 || e.keyCode == 189 || e.keyCode == 173 || e.keyCode == 167 || e.keyCode == 109 || e.keyCode == 169 || e.keyCode == 219 || e.key == '-' ))   // CTRL+MINUS or COMMAND+MINUS
    || e.keyCode == 33) {   // PAGE UP
      e.preventDefault();
      onZoom(current.zoom * 1.7);
      return;
    }
    if ((e.ctrlKey && !e.altKey || e.metaKey) && e.keyCode == 70) {         // CTRL+F
      e.preventDefault();
      setTimeout(function() { query = window.prompt("What are you looking for?", ""); findNext(query); }, 10);
      return;
    }
    if (e.keyCode == 114) {                 // F3
      e.preventDefault();
      if (results.index == -1) { setTimeout(function() { query = window.prompt("What are you looking for?", ""); findNext(query); }, 10); }
      else { findNext(query); }
      return;
    }
    if (e.keyCode == 113) {                 // F2
      e.preventDefault();
      seeBiggestPicture(e);
      return;
    }
  };

  /*
   * USEFUL FUNCTIONS
   */

  function isContainedByClass(e, cls) { while (e && e.tagName) { if (e.classList.contains(cls)) { return true; } e = e.parentNode; } return false; }

  function getQueryVariable(id) { var params = window.location.search.substring(1).split("&");  for (var i = 0; i < params.length; i++) { var p = params[i].split("="); if (p[0] == id) { return p[1]; } } return(false); }

  /*
   * API
   */

  return { newText: newText, 
           current: current, 
           updateTextPosition: updateTextPosition };

})();