wrong viewport library

This commit is contained in:
John Bintz 2011-11-25 10:26:37 -05:00
parent 9f2b6240f6
commit 6c9ace0162
3 changed files with 55 additions and 217 deletions

View File

@ -4,7 +4,7 @@ Every other project is owned by the original owner, I'm just aggregating for my
* [jquery.cookies.js](http://code.google.com/p/cookies)
* [jquery.elastic.js](http://unwrongest.com/projects/elastic/)
* [jquery.viewport.js](https://github.com/borbit/jquery.viewport)
* [jquery.viewport.js](http://www.appelsiini.net/projects/viewport)
* [Better-Autocomplete](https://github.com/betamos/Better-Autocomplete)
* [Moment.js](https://github.com/timrwood/moment)
* [Ajax File Upload](http://phpletter.com/Our-Projects/AjaxFileUpload/)

View File

@ -23,7 +23,7 @@ sources = {
end
},
'jquery-viewport' => [
'https://raw.github.com/borbit/jquery.viewport/master/jquery.viewport.js'
'http://www.appelsiini.net/download/jquery.viewport.js'
],
'better-autocomplete' => [
'https://raw.github.com/betamos/Better-Autocomplete/develop/src/jquery.better-autocomplete.js',

View File

@ -1,220 +1,58 @@
/*
* Viewport - jQuery selectors for finding elements in viewport
*
* Copyright (c) 2008-2009 Mika Tuupola
*
* Licensed under the MIT license:
* http://www.opensource.org/licenses/mit-license.php
*
* Project home:
* http://www.appelsiini.net/projects/viewport
*
*/
(function($) {
$.widget('ui.viewport', {
options:{
binderClass: 'viewportBinder',
contentClass: 'viewportContent',
position: 'center',
content: false,
height: false,
width: false
$.belowthefold = function(element, settings) {
var fold = $(window).height() + $(window).scrollTop();
return fold <= $(element).offset().top - settings.threshold;
};
$.abovethetop = function(element, settings) {
var top = $(window).scrollTop();
return top >= $(element).offset().top + $(element).height() - settings.threshold;
};
$.rightofscreen = function(element, settings) {
var fold = $(window).width() + $(window).scrollLeft();
return fold <= $(element).offset().left - settings.threshold;
};
$.leftofscreen = function(element, settings) {
var left = $(window).scrollLeft();
return left >= $(element).offset().left + $(element).width() - settings.threshold;
};
$.inviewport = function(element, settings) {
return !$.rightofscreen(element, settings) && !$.leftofscreen(element, settings) && !$.belowthefold(element, settings) && !$.abovethetop(element, settings);
};
$.extend($.expr[':'], {
"below-the-fold": function(a, i, m) {
return $.belowthefold(a, {threshold : 0});
},
_create: function() {
var content = this.options.content;
var isObject = typeof(content) == 'object';
if (isObject && content.tagName != null) {
this.options.content = $(content);
} else if (isObject && $.isArray(content)) {
this.options.content = $(content);
}
this.viewport = createViewport(this.element, this.options);
this.viewport.init();
this.viewport.adjust();
"above-the-top": function(a, i, m) {
return $.abovethetop(a, {threshold : 0});
},
content: function() { return this.viewport.content; },
binder: function() { return this.viewport.binder; },
adjust: function() { this.viewport.adjust(); },
update: function() {
this.viewport.updateContentSize();
this.viewport.adjust();
"left-of-screen": function(a, i, m) {
return $.leftofscreen(a, {threshold : 0});
},
size: function(height, width) {
if (height == null || width == null) {
return this.viewport.getContentSize();
}
this.viewport.setContentHeight(height);
this.viewport.setContentWidth(width);
"right-of-screen": function(a, i, m) {
return $.rightofscreen(a, {threshold : 0});
},
height: function(height) {
if (height == null) {
return this.viewport.getContentSize().height;
"in-viewport": function(a, i, m) {
return $.inviewport(a, {threshold : 0});
}
this.viewport.setContentHeight(height);
},
width: function(width) {
if (width == null) {
return this.viewport.getContentSize().width;
}
this.viewport.setContentWidth(width);
}
});
function createViewport(element, options) {
var binder = $('<div class="' + options.binderClass + '"></div>');
var content = $('<div class="' + options.contentClass + '"></div>');
binder.css({position: 'absolute', overflow: 'hidden'});
element.css({position: 'relative', overflow: 'hidden'});
content.css({position: 'absolute'});
var contents = false;
if (options.content == false && element.contents().length) {
contents = element.contents().detach();
} else if (options.content != false) {
contents = options.content.detach();
}
content.append(contents);
binder.append(content);
element.append(binder);
var centerHorizontal = true,
centerVertical = true,
heightDiff = 0,
widthDiff = 0;
var contentPosition = {top: 0, left: 0};
var contentSize = {height: 0, width: 0};
var viewportSize = {height: 0, width: 0};
element.bind('dragstop', function(event, ui) {
if(contentPosition.top != ui.position.top) {
centerHorizontal = false;
}
if(contentPosition.left != ui.position.left) {
centerVertical = false;
}
contentPosition.left = ui.position.left;
contentPosition.top = ui.position.top;
});
function init() {
updateContentSize();
updateContentPosition();
}
function updateContentPosition() {
var position = options.position.split(' ');
if (position.indexOf('bottom') != -1) {
centerVertical = false;
contentPosition.top = viewportSize.height - contentSize.height;
} else if (position.indexOf('top') != -1) {
centerVertical = false;
contentPosition.top = 0;
}
if (position.indexOf('right') != -1) {
centerHorizontal = false;
contentPosition.left = viewportSize.width - contentSize.width;
} else if (position.indexOf('left') != -1) {
centerHorizontal = false;
contentPosition.left = 0;
}
}
function updateContentSize() {
if (options.width != false && options.height != false) {
content.height(options.height);
content.width(options.width);
} else if (contents != false) {
content.height(contents.height());
content.width(contents.width());
}
contentSize = {
height: content.height(),
width: content.width()
};
}
function adjust() {
viewportSize.height = element.height();
viewportSize.width = element.width();
var diff;
if (viewportSize.height > contentSize.height) {
content.css('top', 0);
binder.height(contentSize.height);
binder.css('top', Math.floor(viewportSize.height / 2) -
Math.floor(contentSize.height / 2))
} else {
diff = contentSize.height - viewportSize.height;
binder.height(viewportSize.height + diff * 2);
binder.css('top', -diff);
if (centerVertical) {
contentPosition.top = Math.floor(diff / 2);
content.css('top', contentPosition.top);
} else {
var newTop = contentPosition.top + (diff - heightDiff);
newTop = newTop >= 0 ? newTop : 0;
contentPosition.top = newTop;
content.css('top', newTop);
}
heightDiff = diff;
}
if (viewportSize.width > contentSize.width) {
content.css('left', 0);
binder.width(contentSize.width);
binder.css('left', Math.floor(viewportSize.width / 2) -
Math.floor(contentSize.width / 2));
} else {
diff = contentSize.width - viewportSize.width;
binder.width(viewportSize.width + diff * 2);
binder.css('left', -diff);
if (centerHorizontal) {
contentPosition.left = Math.floor(diff / 2);
content.css('left', contentPosition.left);
} else {
var newLeft = contentPosition.left + (diff - widthDiff);
newLeft = newLeft >= 0 ? newLeft : 0;
contentPosition.left = newLeft;
content.css('left', newLeft);
}
widthDiff = diff;
}
}
function setContentHeight(height) {
if (height != null) {
contentSize.height = height;
content.height(height);
}
}
function setContentWidth(width) {
if (width != null) {
contentSize.width = width;
content.width(width);
}
}
function getContentSize() {
return contentSize;
}
return {
init: init,
adjust: adjust,
updateContentSize: updateContentSize,
setContentHeight: setContentHeight,
setContentWidth: setContentWidth,
getContentSize: getContentSize,
content: content,
binder: binder
};
}
})(jQuery);