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.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/)
|
||||
|
|
|
|||
2
Rakefile
2
Rakefile
|
|
@ -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',
|
||||
|
|
|
|||
|
|
@ -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($) {
|
||||
|
||||
$.belowthefold = function(element, settings) {
|
||||
var fold = $(window).height() + $(window).scrollTop();
|
||||
return fold <= $(element).offset().top - settings.threshold;
|
||||
};
|
||||
|
||||
$.widget('ui.viewport', {
|
||||
options:{
|
||||
binderClass: 'viewportBinder',
|
||||
contentClass: 'viewportContent',
|
||||
position: 'center',
|
||||
content: false,
|
||||
height: false,
|
||||
width: false
|
||||
},
|
||||
|
||||
_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);
|
||||
$.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});
|
||||
},
|
||||
"above-the-top": function(a, i, m) {
|
||||
return $.abovethetop(a, {threshold : 0});
|
||||
},
|
||||
"left-of-screen": function(a, i, m) {
|
||||
return $.leftofscreen(a, {threshold : 0});
|
||||
},
|
||||
"right-of-screen": function(a, i, m) {
|
||||
return $.rightofscreen(a, {threshold : 0});
|
||||
},
|
||||
"in-viewport": function(a, i, m) {
|
||||
return $.inviewport(a, {threshold : 0});
|
||||
}
|
||||
|
||||
this.viewport = createViewport(this.element, this.options);
|
||||
this.viewport.init();
|
||||
this.viewport.adjust();
|
||||
},
|
||||
|
||||
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();
|
||||
},
|
||||
|
||||
size: function(height, width) {
|
||||
if (height == null || width == null) {
|
||||
return this.viewport.getContentSize();
|
||||
}
|
||||
this.viewport.setContentHeight(height);
|
||||
this.viewport.setContentWidth(width);
|
||||
},
|
||||
|
||||
height: function(height) {
|
||||
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