bjoerge/profilbildeforstorrer.js

## profilbildeforstorrer.js
(function ($) {

  // Tha popup component
  var Popup = (function () {

    // Constrain the popup to be within this margin of the page
    var margin = {top: 10, bottom: 30};

    // Get current viewport
    function getViewport() {
      var $win = $(window);
      return {
        height: $win.height(),
        width: $win.width(),
        top: $win.scrollTop(),
        left: $win.scrollLeft()
      }
    }
    // The popup constructor
    function Popup($el) {
      this.$el = $el;
      // Ensure the element is absolute positioned
      $el.css('position', 'absolute');
    }
    Popup.prototype.hide = function () {
      this.$el.hide();
    };
    Popup.prototype.show = function () {
      this.$el.show();
    };
    Popup.prototype.positionRelativeTo = function ($other) {
      var viewport = getViewport();
      this.show();
      var offset = $other.offset();
      if (offset.left < viewport.width / 2) {
        // Position it to the right of $other
        offset.left += $other.width() + 5;
      }
      else {
        // Position it to the left of $other
        offset.left -= this.$el.width() + 10;
      }
      offset.top -= this.$el.height() / 2;

      // Adjust so it fits into viewport
      if (offset.top + this.$el.height() + margin.bottom > viewport.top + viewport.height) {
        offset.top = viewport.top + (viewport.height - this.$el.height() - margin.bottom);
      }
      else if (offset.top < viewport.top + margin.top) {
        offset.top = viewport.top + margin.top;
      }
      this.$el.offset(offset);
    };
    return Popup;
  }());

  var selectors = {
    member: '.user_image, .member_image_inner',
    other: '.thread_excerpt img, .kudos_top_list img'
  };
  selectors.all = $.map(selectors, function(value) { return value; }).join(",");

  // Create the popup container element and insert it into the <body> element
  var $popup = $('<div>')
      .css({
        zIndex:'10001',
        padding:'3px',
        border:'1px solid #aaa',
        borderRadius:'3px',
        backgroundColor:'#fff',
        boxShadow:'1px 1px 10px 0px #777777'
      })
      .hide()
      .prependTo($('body'));

  // Create the <img> we'll use to display profile images
  var $preview = $('<img>')
      .css({
        maxHeight:'400px',
        maxWidth:'400px'
      })
      .appendTo($popup);

  // Create the element to display while loading an image
  var $spinner = $('<div>')
      .css({
        height: '50px',
        width: '100px',
        backgroundImage:"url('/assets/images/spinner.gif')",
        paddingTop:'50px',
        textAlign:'center',
        backgroundPosition:'50% 30%',
        backgroundRepeat:'no-repeat'
      })
      .hide()
      .appendTo($popup);

  // Make a Popup with the popup container as element
  var popup = new Popup($popup);

  function isMemberPhoto($thumbnail) {
    return $thumbnail.is(selectors.member);
  }

  function toLargeUrl(thumbnailUrl) {
    return thumbnailUrl.replace(/(.+\/versions\/)(\d+s)(\/\d+)(\.png)/, "$1" + 650 + "$3.jpeg");
  }

  // Take a thumbnail element and display a larger version
  function showLarge($thumbnail) {

    // Derive the url of a larger version from url of thumbnail
    var url = toLargeUrl($thumbnail.attr('src'));

    // If the url is different from the one we are currently viewing
    if ($preview.attr('src') != url) {

      // Hide current image and display spinner while loading
      $preview.hide();
      $spinner
          .html(isMemberPhoto($thumbnail) ? "Henter fjes" : "Henter større versjon")
          .show();

      popup.positionRelativeTo($thumbnail);
      // Set image src to url of new image
      $preview.one('load', function() {
        showLarge($thumbnail);
      });
      $preview.attr('src', url);
      return;
    }

    // Hide spinner (it may be visible)
    $spinner.hide();

    // Display image element with the loaded image
    $preview.show();

    popup.positionRelativeTo($thumbnail);
  }

  var showTimer = null;
  function cancel() {
    clearTimeout(showTimer);
    $preview.unbind('load');
  }

  // Setup event listeners for mouseover/mouseout matching css selectors for profile photos
  $('body').on('mouseover', selectors.all, function (event) {
    cancel();
    var $thumbnail = $(event.target);

    // Remove annoying title
    $thumbnail.attr('title', '');

    // No photo for this user
    if ($thumbnail.attr('src').match(/\/assets\/images\/noicon.*/)) return;

    showTimer = setTimeout(function () {
      showLarge($thumbnail);
    }, 400);
  });

  $('body').on('mouseout', selectors.all, function (event) {
    cancel();
    popup.hide();
  });

  var $memberImage = $('.member_image_inner');
  if ($memberImage.length) {
    $memberImage.wrap($('<a target="_blank" href="'+toLargeUrl($memberImage.attr("src"))+'">'));
  }
})(jQuery);
	(function ($) {

	// Tha popup component
	var Popup = (function () {

	// Constrain the popup to be within this margin of the page
	var margin = {top: 10, bottom: 30};

	// Get current viewport
	function getViewport() {
	var $win = $(window);
	return {
	height: $win.height(),
	width: $win.width(),
	top: $win.scrollTop(),
	left: $win.scrollLeft()
	}
	}
	// The popup constructor
	function Popup($el) {
	this.$el = $el;
	// Ensure the element is absolute positioned
	$el.css('position', 'absolute');
	}
	Popup.prototype.hide = function () {
	this.$el.hide();
	};
	Popup.prototype.show = function () {
	this.$el.show();
	};
	Popup.prototype.positionRelativeTo = function ($other) {
	var viewport = getViewport();
	this.show();
	var offset = $other.offset();
	if (offset.left < viewport.width / 2) {
	// Position it to the right of $other
	offset.left += $other.width() + 5;
	}
	else {
	// Position it to the left of $other
	offset.left -= this.$el.width() + 10;
	}
	offset.top -= this.$el.height() / 2;

	// Adjust so it fits into viewport
	if (offset.top + this.$el.height() + margin.bottom > viewport.top + viewport.height) {
	offset.top = viewport.top + (viewport.height - this.$el.height() - margin.bottom);
	}
	else if (offset.top < viewport.top + margin.top) {
	offset.top = viewport.top + margin.top;
	}
	this.$el.offset(offset);
	};
	return Popup;
	}());

	var selectors = {
	member: '.user_image, .member_image_inner',
	other: '.thread_excerpt img, .kudos_top_list img'
	};
	selectors.all = $.map(selectors, function(value) { return value; }).join(",");

	// Create the popup container element and insert it into the <body> element
	var $popup = $('<div>')
	.css({
	zIndex:'10001',
	padding:'3px',
	border:'1px solid #aaa',
	borderRadius:'3px',
	backgroundColor:'#fff',
	boxShadow:'1px 1px 10px 0px #777777'
	})
	.hide()
	.prependTo($('body'));

	// Create the <img> we'll use to display profile images
	var $preview = $('<img>')
	.css({
	maxHeight:'400px',
	maxWidth:'400px'
	})
	.appendTo($popup);

	// Create the element to display while loading an image
	var $spinner = $('<div>')
	.css({
	height: '50px',
	width: '100px',
	backgroundImage:"url('/assets/images/spinner.gif')",
	paddingTop:'50px',
	textAlign:'center',
	backgroundPosition:'50% 30%',
	backgroundRepeat:'no-repeat'
	})
	.hide()
	.appendTo($popup);

	// Make a Popup with the popup container as element
	var popup = new Popup($popup);

	function isMemberPhoto($thumbnail) {
	return $thumbnail.is(selectors.member);
	}

	function toLargeUrl(thumbnailUrl) {
	return thumbnailUrl.replace(/(.+\/versions\/)(\d+s)(\/\d+)(\.png)/, "$1" + 650 + "$3.jpeg");
	}

	// Take a thumbnail element and display a larger version
	function showLarge($thumbnail) {

	// Derive the url of a larger version from url of thumbnail
	var url = toLargeUrl($thumbnail.attr('src'));

	// If the url is different from the one we are currently viewing
	if ($preview.attr('src') != url) {

	// Hide current image and display spinner while loading
	$preview.hide();
	$spinner
	.html(isMemberPhoto($thumbnail) ? "Henter fjes" : "Henter større versjon")
	.show();

	popup.positionRelativeTo($thumbnail);
	// Set image src to url of new image
	$preview.one('load', function() {
	showLarge($thumbnail);
	});
	$preview.attr('src', url);
	return;
	}

	// Hide spinner (it may be visible)
	$spinner.hide();

	// Display image element with the loaded image
	$preview.show();

	popup.positionRelativeTo($thumbnail);
	}

	var showTimer = null;
	function cancel() {
	clearTimeout(showTimer);
	$preview.unbind('load');
	}

	// Setup event listeners for mouseover/mouseout matching css selectors for profile photos
	$('body').on('mouseover', selectors.all, function (event) {
	cancel();
	var $thumbnail = $(event.target);

	// Remove annoying title
	$thumbnail.attr('title', '');

	// No photo for this user
	if ($thumbnail.attr('src').match(/\/assets\/images\/noicon.*/)) return;

	showTimer = setTimeout(function () {
	showLarge($thumbnail);
	}, 400);
	});

	$('body').on('mouseout', selectors.all, function (event) {
	cancel();
	popup.hide();
	});

	var $memberImage = $('.member_image_inner');
	if ($memberImage.length) {
	$memberImage.wrap($('<a target="_blank" href="'+toLargeUrl($memberImage.attr("src"))+'">'));
	}
	})(jQuery);