Added content frame's size updating to the "update" method. Added new…

… method "adjust" that just adjusts frames without content frame's size updating.
agoragames · Mar 23, 2011 · 4b756bc · 4b756bc
1 parent 6118e48
commit 4b756bc
Show file tree

Hide file tree

Showing 4 changed files with 102 additions and 60 deletions.
diff --git a/jquery.viewport.js b/jquery.viewport.js
@@ -20,12 +20,18 @@ $.widget('ui.viewport', {
         }
 
         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; },
-    update:  function() { this.viewport.adjust(); },
+    adjust: function() { this.viewport.adjust(); },
+
+    update:  function() {
+        this.viewport.init();
+        this.viewport.adjust();
+    },
 
     size: function(height, width) {
         if (height == null || width == null) {
@@ -58,49 +64,54 @@ function createViewport(element, options) {
     element.css({position: 'relative', overflow: 'hidden'});
     content.css({position: 'absolute'});
 
-    if (options.width != false && options.height != false) {
-        content.height(options.height);
-        content.width(options.width);
+    var contents = false;
+    if (options.content == false && element.contents().length) {
+        contents = element.contents().detach();
     } else if (options.content != false) {
-        content.height(options.content.height());
-        content.width(options.content.width());
-    }
-
-    if (options.content != false) {
-        content.append(options.content.detach())
-    } else {
-        content.append(element.contents().detach());
+        contents = options.content.detach();
     }
 
+    content.append(contents);
     binder.append(content);
     element.append(binder);
 
-    var contentOffset = {
-        left: content.offset().left,
-        top: content.offset().top
-    };
-
-    var contentSize = {
-        height: content.height(),
-        width: content.width()
-    };
-
-    var centerHorizontal = true,
+    var contentPosition, contentSize,
+        centerHorizontal = true,
         centerVertical = true,
         heightDiff = 0,
         widthDiff = 0;
 
     element.bind('dragstop', function(event, ui) {
-        if(contentOffset.top != ui.position.top) {
+        if(contentPosition.top != ui.position.top) {
             centerHorizontal = false;
         }
-        if(contentOffset.left != ui.position.left) {
+        if(contentPosition.left != ui.position.left) {
             centerVertical = false;
         }
-        contentOffset.left = ui.position.left;
-        contentOffset.top = ui.position.top;
+        contentPosition.left = ui.position.left;
+        contentPosition.top = ui.position.top;
     });
 
+    function init() {
+        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()
+        };
+
+        contentPosition = {
+            left: content.position().left,
+            top: content.position().top
+        };
+    }
+
     function adjust() {
         var viewportSize = {
             height: element.height(),
@@ -120,13 +131,13 @@ function createViewport(element, options) {
             binder.css('top', -diff);
 
             if (centerVertical) {
-                contentOffset.top = Math.floor(diff / 2);
-                content.css('top', contentOffset.top);
+                contentPosition.top = Math.floor(diff / 2);
+                content.css('top', contentPosition.top);
             } else {
-                var newTop = contentOffset.top + (diff - heightDiff);
+                var newTop = contentPosition.top + (diff - heightDiff);
                 newTop = newTop >= 0 ? newTop : 0;
+                contentPosition.top = newTop;
                 content.css('top', newTop);
-                contentOffset.top = newTop;
             }
             heightDiff = diff;
         }
@@ -142,13 +153,13 @@ function createViewport(element, options) {
             binder.css('left', -diff);
 
             if (centerHorizontal) {
-                contentOffset.left = Math.floor(diff / 2);
-                content.css('left', contentOffset.left);
+                contentPosition.left = Math.floor(diff / 2);
+                content.css('left', contentPosition.left);
             } else {
-                var newLeft = contentOffset.left + (diff - widthDiff);
+                var newLeft = contentPosition.left + (diff - widthDiff);
                 newLeft = newLeft >= 0 ? newLeft : 0;
+                contentPosition.left = newLeft;
                 content.css('left', newLeft);
-                contentOffset.left = newLeft;
             }
             widthDiff = diff;
         }
@@ -173,6 +184,7 @@ function createViewport(element, options) {
     }
 
     return {
+        init: init,
         adjust: adjust,
         setContentHeight: setContentHeight,
         setContentWidth: setContentWidth,

diff --git a/tests/behavior.test.js b/tests/behavior.test.js
@@ -183,7 +183,7 @@ TestCase("behavior", {
     },
 
     testContentBoxHasCorrectPositionAfterItWasDraggedAndViewportSizeBecomeSmaller: function() {
-        var element = $('<div></div>');
+        var element = $('<div></div>').appendTo(document.body);
         element.height(500);
         element.width(500);
 
@@ -193,19 +193,18 @@ TestCase("behavior", {
 
         element.viewport({content: content});
 
-        content.trigger('dragstart');
-        content.css('left', 50);
-        content.css('top', 50);
-        content.trigger('dragstop', {position: {left: 50, top: 50}});
+        var viewportBinder = element.viewport('binder');
+        var viewportContent = element.viewport('content');
+
+        viewportContent.trigger('dragstart');
+        viewportContent.css('left', 50);
+        viewportContent.css('top', 50);
+        viewportContent.trigger('dragstop', {position: {left: 50, top: 50}});
 
         element.height(300);
         element.width(300);
-        element.viewport('update');
 
-        var viewportBinder = element.viewport('binder');
-        var viewportContent = element.viewport('content');
-
-        element.appendTo(document.body);
+        element.viewport('update');
 
         assertEquals(1100, viewportBinder.height());
         assertEquals(1100, viewportBinder.width());

diff --git a/tests/content.test.js b/tests/content.test.js
@@ -27,13 +27,12 @@ TestCase("content", {
 
     // $('<div><div class="cont"></div><div class="cont"></div></div>').viewport();
     testInitiallContentThatAreSeveralElementsAreMovedIfContentParamIsNotSet: function() {
-        /*:DOC html = <div>
-            <div class="content_1"></div>
-            <div class="content_2"></div>
-            <div class="content_3"></div>
-            <div class="content_4"></div>
-            <div class="content_5"></div>
-            </div>
+        /*:DOC html = <div><div class="content_1"></div>
+                           <div class="content_2"></div>
+                           <div class="content_3"></div>
+                           <div class="content_4"></div>
+                           <div class="content_5"></div>
+                      </div>
         */
 
         var element = $(this.html).viewport();

diff --git a/tests/methods.test.js b/tests/methods.test.js
@@ -1,5 +1,5 @@
 TestCase("methods", {
-    testHeightMethodChangesContentBoxHeight: function() {
+    testHeightMethodChangesContentFrameHeight: function() {
         var element = $('<div></div>').viewport();
         element.viewport('height', 1000);
 
@@ -16,7 +16,7 @@ TestCase("methods", {
         assertEquals(height, element.viewport('height'));
     },
 
-    testWidthMethodChangesContentBoxWidth: function() {
+    testWidthMethodChangesContentFrameWidth: function() {
         var width = 1000;
 
         var element = $('<div></div>').viewport();
@@ -35,7 +35,7 @@ TestCase("methods", {
         assertEquals(width, element.viewport('width'));
     },
 
-    testUpdateMethodUpdatesFrameAfterViewportSizeIsChanged: function() {
+    testAdjustMethodAdjustsBinderFrameAfterViewportSizeIsChanged: function() {
         var content = $('<div class="content"></div>');
         content.height(700);
         content.width(700);
@@ -44,41 +44,73 @@ TestCase("methods", {
         element.height(300);
         element.width(300);
 
-        element.viewport('update');
+        element.viewport('adjust');
 
         var viewportBinder = element.viewport('binder');
-        var viewportContent = element.viewport('content');
 
         element.appendTo(document.body);
 
         assertEquals(1100, viewportBinder.height());
         assertEquals(1100, viewportBinder.width());
+    },
+
+    testAdjustMethodAdjustsContentFramePositionViewportSizeIsChanged: function() {
+        var content = $('<div class="content"></div>');
+        content.height(700);
+        content.width(700);
+
+        var element = $('<div></div>').viewport({content: content});
+        element.height(300);
+        element.width(300);
+
+        element.viewport('adjust');
+
+        var viewportContent = element.viewport('content');
+
+        element.appendTo(document.body);
+
         assertEquals('200px', viewportContent.css('left'));
         assertEquals('200px', viewportContent.css('top'));
     },
 
-    testUpdateMethodChangesBinderBoxIfContentBoxSizeIsChanged: function() {
+    testAdjustMethodAdjustsBinderFrameSizeIfContentFrameSizeIsChanged: function() {
         var element = $('<div></div>').viewport();
 
         element.height(500);
         element.width(500);
 
         element.viewport('size', 1000, 2000);
-        element.viewport('update');
+        element.viewport('adjust');
 
         var viewportBinder = element.viewport('binder');
 
         assertEquals(1500, viewportBinder.height());
         assertEquals(3500, viewportBinder.width());
     },
 
+    testUpdateMethodUpdatesContentFrameSizeIfContentIsChanged: function() {
+        var content = $('<div></div>').height(1000).width(1000);
+        var element = $('<div></div>').height(500).width(500);
+
+        element.viewport({content: content})
+
+        content.height(700).width(800);
+
+        element.viewport('update');
+
+        var viewportContent = element.viewport('content');
+
+        assertEquals(700, viewportContent.height());
+        assertEquals(800, viewportContent.width());
+    },
+
     testUpdateMethodReturnsReferenceToJQueryObject: function() {
         var element = $('<div></div>').viewport();
 
         assertEquals(element.viewport('update'), element);
     },
 
-    testSizeMethodChangesContentBoxSize: function() {
+    testSizeMethodChangesContentFrameSize: function() {
         var element = $('<div></div>').viewport();
 
         element.viewport('size', 1000, 2000);