Skip to content

Instantly share code, notes, and snippets.

@bjoerge
Created September 30, 2012 15:24
Show Gist options
  • Save bjoerge/3807154 to your computer and use it in GitHub Desktop.
Save bjoerge/3807154 to your computer and use it in GitHub Desktop.
Profilbildeforstørrer 2.0
(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);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment