Skip to content

Commit

Permalink
Improved setting of the initial content frame's size. Added more test…
Browse files Browse the repository at this point in the history 
…s for those cases.
  • Loading branch information
@borbit
borbit committed Jan 3, 2012
1 parent d4f392c commit 9dc7187
Show file tree
Hide file tree
Showing 3 changed files with 67 additions and 35 deletions.
41 changes: 20 additions & 21 deletions jquery.viewport.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,6 @@ $.widget('ui.viewport', {
}

this.viewport = createViewport(this.element, this.options);
this.viewport.init();
this.viewport.adjust();
},

Expand Down Expand Up @@ -58,6 +57,14 @@ $.widget('ui.viewport', {
});

function createViewport(element, options) {
var contentPosition = {top: 0, left: 0}
, contentSize = {height: 0, width: 0}
, viewportSize = {height: 0, width: 0}
, centerHorizontal = true
, centerVertical = true
, heightDiff = 0
, widthDiff = 0;

var binder = $('<div class="' + options.binderClass + '"></div>');
var content = $('<div class="' + options.contentClass + '"></div>');

Expand All @@ -66,25 +73,23 @@ function createViewport(element, options) {
content.css({position: 'absolute'});

var contents = false;
if (options.content == false && element.contents().length) {
contents = element.children().detach();
if (options.content == false && element.children().length) {
contents = element.children();
} else if (options.content != false) {
contents = options.content.detach();
contents = options.content;
}

content.append(contents);

updateContentSize();
updateContentPosition();

if (contents) {
contents.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;
Expand All @@ -96,11 +101,6 @@ function createViewport(element, options) {
contentPosition.top = ui.position.top;
});

function init() {
updateContentSize();
updateContentPosition();
}

function updateContentPosition() {
var position = options.position.split(' ');

Expand Down Expand Up @@ -206,7 +206,6 @@ function createViewport(element, options) {
}

return {
init: init,
adjust: adjust,
updateContentSize: updateContentSize,
setContentHeight: setContentHeight,
Expand Down
2 changes: 0 additions & 2 deletions tests/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,8 +14,6 @@ <h2 id="qunit-userAgent"></h2>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.js"></script>

<script src="vendor/qunit.js"></script>
<script src="vendor/sinon.js"></script>

<script src="../jquery.viewport.js"></script>

<script src="initialization.test.js"></script>
Expand Down
59 changes: 47 additions & 12 deletions tests/initialization.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,6 @@ test('viewport el has overflow property set to hidden', function() {
equal(element.css('overflow'), 'hidden');
});


test('viewport el has position property set to relative', function() {
var element = $('<div/>').viewport();

Expand All @@ -29,22 +28,21 @@ test('viewport el has correct DOM structure', function() {
equal(content.length, 1);
})

test('binder el has position property set to absolute', function() {
test('binder frame has position property set to absolute', function() {
var element = $('<div/>').viewport();
var binder = element.viewport('binder');

equal(binder.css('position'), 'absolute');
});

test('viewport content has position property set to absolute', function() {
test('content frame has position property set to absolute', function() {
var element = $('<div/>').viewport();
var content = element.viewport('content');

equal(content.css('position'), 'absolute');
});


test('viewport content has the same size as element passed through option content', function() {
test('content frame has the same size as element passed through "content" option', function() {
var content = $('<div class="content"></div>');
content.height(100);
content.width(200);
Expand All @@ -56,7 +54,45 @@ test('viewport content has the same size as element passed through option conten
equal(viewportContent.width(), 200);
});

test('binder has the same size as a content if content is smaller then viewport', function() {
test('content frame has the same size as an initial content (static size)', function() {
var element = $('<div><div style="height:100px;width:200px;"></div>').viewport();
var viewportContent = element.viewport('content');

equal(viewportContent.height(), 100);
equal(viewportContent.width(), 200);
});

test('content frame has the same size as an initial content (inherited size)', function() {
var element = $('<div style="height:100px;width:200px;">\
<div style="height:inherit;width:inherit;"></div>');

element.appendTo(document.body);
element.viewport();

var viewportContent = element.viewport('content');

equal(viewportContent.height(), 100);
equal(viewportContent.width(), 200);

element.remove();
});

test('content frame has the same size as an initial content (100% size)', function() {
var element = $('<div style="height:100px;width:200px;">\
<div style="height:100%;width:100%;"></div>');

element.appendTo(document.body);
element.viewport();

var viewportContent = element.viewport('content');

equal(viewportContent.height(), 100);
equal(viewportContent.width(), 200);

element.remove();
});

test('binder frame has the same size as a content if content is smaller then viewport', function() {
var element = $('<div/>');
element.height(500);
element.width(500);
Expand All @@ -72,8 +108,7 @@ test('binder has the same size as a content if content is smaller then viewport'
equal(binder.width(), 200);
});


test('binder is in the center if content is smaller then viewport', function() {
test('binder frame is in the center if content is smaller then viewport', function() {
var element = $('<div/>');
element.height(500);
element.width(500);
Expand All @@ -93,7 +128,7 @@ test('binder is in the center if content is smaller then viewport', function() {
element.remove();
});

test('content has left and top properties set to 0 if it is smaller then viewport', function() {
test('content frame has left and top properties set to 0 if it is smaller then viewport', function() {
var element = $('<div/>');
element.height(500);
element.width(500);
Expand All @@ -114,7 +149,7 @@ test('content has left and top properties set to 0 if it is smaller then viewpor
element.remove();
});

test('binder has correct size if content is bigger then viewport', function() {
test('binder frame has correct size if content is bigger then viewport', function() {
var element = $('<div/>');
element.height(500);
element.width(500);
Expand All @@ -130,7 +165,7 @@ test('binder has correct size if content is bigger then viewport', function() {
equal(viewportBinder.width(), 1100);
});

test('binder is in the center if content box is bigger then viewport box', function() {
test('binder frame is in the center if content is bigger then viewport', function() {
var element = $('<div/>');
element.height(500);
element.width(500);
Expand All @@ -150,7 +185,7 @@ test('binder is in the center if content box is bigger then viewport box', funct
element.remove();
});

test('content has correct left and top properties if it is bigger then viewport', function() {
test('content frame has correct left and top properties if it is bigger then viewport', function() {
var element = $('<div/>');
element.height(500);
element.width(500);
Expand Down

0 comments on commit 9dc7187

Please sign in to comment.