wrong viewport library
This commit is contained in:
John Bintz
parent
9f2b6240f6
commit
6c9ace0162
|
|
@ -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.cookies.js](http://code.google.com/p/cookies)
|
||||||
* [jquery.elastic.js](http://unwrongest.com/projects/elastic/)
|
* [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)
|
* [Better-Autocomplete](https://github.com/betamos/Better-Autocomplete)
|
||||||
* [Moment.js](https://github.com/timrwood/moment)
|
* [Moment.js](https://github.com/timrwood/moment)
|
||||||
* [Ajax File Upload](http://phpletter.com/Our-Projects/AjaxFileUpload/)
|
* [Ajax File Upload](http://phpletter.com/Our-Projects/AjaxFileUpload/)
|
||||||
|
|
|
||||||
2
Rakefile
2
Rakefile
|
|
@ -23,7 +23,7 @@ sources = {
|
||||||
end
|
end
|
||||||
},
|
},
|
||||||
'jquery-viewport' => [
|
'jquery-viewport' => [
|
||||||
'https://raw.github.com/borbit/jquery.viewport/master/jquery.viewport.js'
|
'http://www.appelsiini.net/download/jquery.viewport.js'
|
||||||
],
|
],
|
||||||
'better-autocomplete' => [
|
'better-autocomplete' => [
|
||||||
'https://raw.github.com/betamos/Better-Autocomplete/develop/src/jquery.better-autocomplete.js',
|
'https://raw.github.com/betamos/Better-Autocomplete/develop/src/jquery.better-autocomplete.js',
|
||||||
|
|
|
||||||
|
|
@ -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($) {
|
(function($) {
|
||||||
|
|
||||||
$.widget('ui.viewport', {
|
$.belowthefold = function(element, settings) {
|
||||||
options:{
|
var fold = $(window).height() + $(window).scrollTop();
|
||||||
binderClass: 'viewportBinder',
|
return fold <= $(element).offset().top - settings.threshold;
|
||||||
contentClass: 'viewportContent',
|
};
|
||||||
position: 'center',
|
|
||||||
content: false,
|
$.abovethetop = function(element, settings) {
|
||||||
height: false,
|
var top = $(window).scrollTop();
|
||||||
width: false
|
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});
|
||||||
},
|
},
|
||||||
|
"above-the-top": function(a, i, m) {
|
||||||
_create: function() {
|
return $.abovethetop(a, {threshold : 0});
|
||||||
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();
|
|
||||||
},
|
},
|
||||||
|
"left-of-screen": function(a, i, m) {
|
||||||
content: function() { return this.viewport.content; },
|
return $.leftofscreen(a, {threshold : 0});
|
||||||
binder: function() { return this.viewport.binder; },
|
|
||||||
adjust: function() { this.viewport.adjust(); },
|
|
||||||
|
|
||||||
update: function() {
|
|
||||||
this.viewport.updateContentSize();
|
|
||||||
this.viewport.adjust();
|
|
||||||
},
|
},
|
||||||
|
"right-of-screen": function(a, i, m) {
|
||||||
size: function(height, width) {
|
return $.rightofscreen(a, {threshold : 0});
|
||||||
if (height == null || width == null) {
|
|
||||||
return this.viewport.getContentSize();
|
|
||||||
}
|
|
||||||
this.viewport.setContentHeight(height);
|
|
||||||
this.viewport.setContentWidth(width);
|
|
||||||
},
|
},
|
||||||
|
"in-viewport": function(a, i, m) {
|
||||||
height: function(height) {
|
return $.inviewport(a, {threshold : 0});
|
||||||
if (height == null) {
|
|
||||||
return this.viewport.getContentSize().height;
|
|
||||||
}
|
}
|
||||||
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);
|
})(jQuery);
|
||||||
Loading…
Reference in New Issue