Changeset 1388

Timestamp:

06/21/08 11:48:04 (4 months ago)

Author:

cito@online.de

Message:

Refactored patch in r1383 (wrong sizes in visual effects). Instead of additional functions getElementWidth and getElementHeight, a boolean parameter contentSize has been added to getElementDimensions. The content size is now calculated by subtracting padding and border. Added a hack to getStyle to always get pixel sizes, even with Internet Explorer, to get more consistent behavior, and to make this work when padding or border are not set in pixels. Some small improvements in the visual effects demos.

Files:

• mochikit/trunk/MochiKit/Style.js (modified) (5 diffs)
• mochikit/trunk/MochiKit/Visual.js (modified) (19 diffs)
• mochikit/trunk/doc/rst/MochiKit/Style.rst (modified) (4 diffs)
• mochikit/trunk/examples/effects/effects_combi.css (modified) (1 diff)
• mochikit/trunk/examples/effects/effects_onload.html (modified) (4 diffs)
• mochikit/trunk/examples/effects/effects_slide.html (modified) (4 diffs)
• mochikit/trunk/tests/test_MochiKit-Style.html (modified) (7 diffs)

mochikit/trunk/MochiKit/Style.js

@@ -124 +124 @@
-            } else if (elem.currentStyle) {
-                value = elem.currentStyle[cssProperty];
+                if (/^\d/.test(value) && !/px$/.test(value)) {
+                    /* Convert to px using an hack from Dean Edwards */
+                    var left = elem.style.left;
+                    var rsLeft = elem.runtimeStyle.left;
+                    elem.runtimeStyle.left = elem.currentStyle.left;
+                    elem.style.left = value || 0;
+                    value = elem.style.pixelLeft + "px";
+                    elem.style.left = left;
+                    elem.runtimeStyle.left = rsLeft;
+                }
-            }
-        }
@@ -130 +140 @@
-        }
-
-
+Value
-            if (MochiKit.Style.getStyle(elem, 'position') == 'static') {
-                value = 'auto';
@@ -137 +147 @@
-
-        return value == 'auto' ? null : value;
-    },
-
-    /** @id MochiKit.Style.getElementWidth */
-    getElementWidth: function (elem) {
-        var self = MochiKit.Style;
-        w = parseFloat(self.getStyle(elem, 'width'));
-        if (/Opera/.test(navigator.userAgent)) {
-            w -= (parseFloat(self.getStyle(elem, 'paddingLeft'))
-                + parseFloat(self.getStyle(elem, 'paddingRight'))
-                + parseFloat(self.getStyle(elem, 'borderLeft'))
-                + parseFloat(self.getStyle(elem, 'borderRight')));
-        }
-        return w;
-    },
-
-    /** @id MochiKit.Style.getElementHeight */
-    getElementHeight: function (elem) {
-        var self = MochiKit.Style;
-        h = parseFloat(self.getStyle(elem, 'height'));
-        if (/Opera/.test(navigator.userAgent)) {
-            h -= (parseFloat(self.getStyle(elem, 'paddingTop'))
-                + parseFloat(self.getStyle(elem, 'paddingBottom'))
-                + parseFloat(self.getStyle(elem, 'borderTop'))
-                + parseFloat(self.getStyle(elem, 'borderBottom')));
-        }
-        return h;
-    },
-
@@ -350 +334 @@
-
-    /** @id MochiKit.Style.getElementDimensions */
-
+, contentSize/*optional*/
-        var self = MochiKit.Style;
-        var dom = MochiKit.DOM;
@@ -362 +346 @@
-        var disp = self.getStyle(elem, 'display');
-        // display can be empty/undefined on WebKit/KHTML
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-        return new self.Dimensions(originalWidth, originalHeight);
-    },

mochikit/trunk/MochiKit/Visual.js

@@ -1365 +1365 @@
-    var v = MochiKit.Visual;
-    element = MochiKit.DOM.getElement(element);
+    var elementDimensions = MochiKit.Style.getElementDimensions(element, true);
-    var oldStyle = {
-        position: s.getStyle(element, 'position'),
@@ -1387 +1388 @@
-        [new v.Scale(element, 200,
-            {sync: true, scaleFromCenter: options.scaleFromCenter,
+             scaleMode: {originalHeight: elementDimensions.h,
+                         originalWidth: elementDimensions.w},
-             scaleContent: options.scaleContent, restoreAfterFinish: true}),
-         new v.Opacity(element, {sync: true, to: 0.0 })],
@@ -1400 +1403 @@
-    ***/
-    var d = MochiKit.DOM;
-    var s = MochiKit.Style;
-    element = d.getElement(element);
+    var elementDimensions = MochiKit.Style.getElementDimensions(element, true);
-    var elemClip = d.makeClipping(element);
-    options = MochiKit.Base.update({
-        scaleContent: false,
-        scaleX: false,
-s.getElementHeight(element)
-originalWidth: s.getElementWidth(element)
+elementDimensions.h
+        originalWidth: elementDimensions.w
-        restoreAfterFinish: true,
-        afterFinishInternal: function (effect) {
@@ -1427 +1430 @@
-    var s = MochiKit.Style;
-    element = d.getElement(element);
+    var elementDimensions = s.getElementDimensions(element, true);
-    var elemClip;
-    options = MochiKit.Base.update({
@@ -1432 +1436 @@
-        scaleX: false,
-        scaleFrom: 0,
-s.getElementHeight(element)
-originalWidth: s.getElementWidth(element)
+elementDimensions.h
+        originalWidth: elementDimensions.w
-        restoreAfterFinish: true,
-        afterSetupInternal: function (effect) {
@@ -1457 +1461 @@
-    var s = MochiKit.Style;
-    element = d.getElement(element);
-
+
+
-    var elemClip;
-    options = MochiKit.Base.update({
@@ -1467 +1472 @@
-        },
-        afterFinishInternal: function (effect) {
-MochiKit.Style
+s
-            d.undoClipping(element, elemClip);
-            d.undoPositioned(element);
-MochiKit.Style
+s
-        }
-    }, options);
@@ -1481 +1486 @@
-                     { sync: true, duration: 0.43 * options.duration,
-                       scaleFromCenter: true, scaleX: false,
-s.getElementHeight(element)
-originalWidth: s.getElementWidth(element)
+elementDimensions.h
+          originalWidth: elementDimensions.w
-                       scaleContent: false, restoreAfterFinish: true })],
-        options);
@@ -1578 +1583 @@
-    d.removeEmptyTextNodes(element);
-    var oldInnerBottom = s.getStyle(element.firstChild, 'bottom') || 0;
+    var elementDimensions = s.getElementDimensions(element, true);
-    var elemClip;
-    options = b.update({
@@ -1583 +1589 @@
-        scaleX: false,
-        scaleFrom: 0,
-s.getElementHeight(element)
-originalWidth: s.getElementWidth(element)
+elementDimensions.h
+        originalWidth: elementDimensions.w
-        restoreAfterFinish: true,
-        afterSetupInternal: function (effect) {
@@ -1597 +1603 @@
-        },
-        afterUpdateInternal: function (effect) {
+            var elementDimensions = s.getElementDimensions(effect.element, true);
-            s.setStyle(effect.element.firstChild,
-s.getElementHeight(effect.element)
+elementDimensions.h
-        },
-        afterFinishInternal: function (effect) {
@@ -1635 +1642 @@
-    d.removeEmptyTextNodes(element);
-    var oldInnerBottom = s.getStyle(element.firstChild, 'bottom');
+    var elementDimensions = s.getElementDimensions(element, true);
-    var elemClip;
-    options = b.update({
-        scaleContent: false,
-        scaleX: false,
-s.getElementHeight(element)
-originalWidth: s.getElementWidth(element)
+elementDimensions.h
+        originalWidth: elementDimensions.w
-        scaleFrom: 100,
-        restoreAfterFinish: true,
@@ -1653 +1661 @@
-        },
-        afterUpdateInternal: function (effect) {
+            var elementDimensions = s.getElementDimensions(effect.element, true);
-            s.setStyle(effect.element.firstChild,
-{bottom: (effect.dims[0] - s.getElementHeight(effect.element)
+    {bottom: (effect.dims[0] - elementDimensions.h
-        },
-        afterFinishInternal: function (effect) {
@@ -1678 +1687 @@
-    var d = MochiKit.DOM;
-    var b = MochiKit.Base;
-s = MochiKit.Style
+elementDimensions = MochiKit.Style.getElementDimensions(element, true)
-    var elemClip;
-    options = b.update({
-        restoreAfterFinish: true,
-s.getElementHeight(element)
-originalWidth: s.getElementWidth(element)
+elementDimensions.w
+        originalWidth: elementDimensions.h
-        beforeSetupInternal: function (effect) {
-            elemClip = d.makeClipping(effect.element);
@@ -1723 +1732 @@
-        opacity: s.getStyle(element, 'opacity')
-    };
-
-
+
-    var initialMoveX, initialMoveY;
-    var moveX, moveY;
@@ -1788 +1796 @@
-                 }),
-                 new v.Scale(effect.element, 100, {
-
+
+
-                        sync: true,
-                        scaleFrom: /Opera/.test(navigator.userAgent) ? 1 : 0,
@@ -1829 +1838 @@
-    };
-
-
-
+
-    var moveX, moveY;
-
@@ -1924 +1932 @@
-    var s = MochiKit.Style;
-    element = d.getElement(element);
+    var elementDimensions = s.getElementDimensions(element, true);
-    var oldStyle = {
-        top: element.style.top,
@@ -1934 +1943 @@
-        scaleContent: false,
-        scaleX: false,
-s.getElementHeight(element)
-originalWidth: s.getElementWidth(element)
+elementDimensions.h
+        originalWidth: elementDimensions.w
-        afterFinishInternal: function (effect) {
-            new v.Scale(element, 1, {
-                scaleContent: false,
-                scaleY: false,
-s.getElementHeight(element)
-originalWidth: s.getElementWidth(element)
+elementDimensions.h
+        originalWidth: elementDimensions.w
-                afterFinishInternal: function (effect) {
-                    s.hideElement(effect.element);

mochikit/trunk/doc/rst/MochiKit/Style.rst

@@ -90 +90 @@
-    specified as either a string with the element's ID or the element
-    object itself.
-
+
-    ``cssSelector``:
-        The CSS selector, e.g. ``background-color``.
@@ -103 +103 @@
-    specified as either a string with the element's ID or the element
-    object itself.
-
+
-    ``styles``:
-        Dictionnary holding CSS properties to set, e.g.
@@ -122 +122 @@
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
-
-    *Availability*:
@@ -276 +277 @@
-:mochidef:`Coordinates(x, y)`:
-
- 
+
-    returns something like ``{x: 0, y: 42}`` for debugging.
-
-    *Availability*:
-        Available in MochiKit 1.4+
-
+
-:mochidef:`Dimensions(w, h)`:
-
- 
+
-    returns something like ``{w: 0, h: 42}`` for debugging.
-

mochikit/trunk/examples/effects/effects_combi.css

@@ -7 +7 @@
-    margin-right: 10px;
-    margin-bottom: 10px;
-20
-20
-       border: 1
+12
+12
+    border: 4
-    background-color: #ccf;
-    text-align: center;

mochikit/trunk/examples/effects/effects_onload.html

@@ -8 +8 @@
-    <script src="../../MochiKit/Position.js" type="text/javascript"></script>
-    <script src="../../MochiKit/Visual.js" type="text/javascript"></script>
+</head>
-<body>
-<h1>script.aculo.us Effects functional test file</h1>
@@ -15 +16 @@
-<div id="debug"> </div>
-
-asdasd
+slide down
-
-<div id="d1" onclick="MochiKit.Visual.slideUp('d1');" style="overflow:hidden;"><div  style="background-color:#ff8080;">
@@ -54 +55 @@
-  pulsate
-</div>
-
+
-<script type="text/javascript" language="javascript" charset="utf-8">
-// <![CDATA[
@@ -61 +62 @@
-  MochiKit.Visual.blindDown("d1");
-// ]]>
-    
+
-
-</body>

mochikit/trunk/examples/effects/effects_slide.html

@@ -3 +3 @@
-<head>
-<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
-Untitled Documen
+Slide effects tes
-<style type="text/css">
-#menu {
@@ -24 +24 @@
-  width: 100%;
-  bottom: 0px;
-  height: 15px;
-  text-align: center;
-  display: block;
@@ -38 +37 @@
-  <div class="menu_block_container" id="menu_block_container1">
-    <div class="menu_block" id="menu_block1"><div>
-
-
-
-
-
-
-
+/
+/
+/
+/
+/
+/
+/
-        <a class="close_block" onClick="MochiKit.Visual.slideUp('menu_block1'); return false;">close</a></div></div>
-  </div>
@@ -50 +49 @@
-  <div class="menu_block_container" id="menu_block_container2">
-    <div class="menu_block" id="menu_block2"><div>
-
-
-
-
-
-
-
+/
+/
+/
+/
+/
+/
+/
-        <a class="close_block" onClick="MochiKit.Visual.slideUp('menu_block2'); return false;">close</a></div></div>
-  </div>

mochikit/trunk/tests/test_MochiKit-Style.html

@@ +1 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
-<html>
-<head>
@@ -8 +9 @@
-    <script type="text/javascript" src="../MochiKit/Color.js"></script>
-    <script type="text/javascript" src="../MochiKit/Logging.js"></script>
-        
+
-    <link rel="stylesheet" type="text/css" href="SimpleTest/test.css">
-</head>
-<body style="border: 0; margin: 0; padding: 0;">
-
-100px
+80px; padding: 10px 20px 30px 40px; border-width: 1px 2px 3px 4px; border-style: solid; border-color: background: rgb(0, 255, 0)
-
-<pre id="test">
@@ -24 +25 @@
-    is(pos.x, 400, 'initial x position');
-    is(pos.y, 100, 'initial y position');
-
+
-    // moved
-    var newPos = new MochiKit.Style.Coordinates(500, 200);
@@ -37 +38 @@
-    is(pos.x, 400, 'updated x position (using relativeTo parameter)');
-    is(pos.y, 100, 'updated y position (using relativeTo parameter)');
-
+
-    // Coordinates object
-    pos = getElementPosition({x: 123, y: 321});
-    is(pos.x, 123, 'passthrough x position');
-    is(pos.y, 321, 'passthrough y position');
-
+
-    // Coordinates object with relativeTo
-    pos = getElementPosition({x: 123, y: 321}, {x: 100, y: 50});
-    is(pos.x, 23, 'passthrough x position (using relativeTo parameter)');
-    is(pos.y, 271, 'passthrough y position (using relativeTo parameter)');
-
- 
- 
+
+
+
-        'invalid element should return an undefined position');
-
+
-    // Only set one coordinate
-    setElementPosition('styleTest', {'x': 300});
@@ -57 +58 @@
-    is(pos.x, 300, 'updated only x position');
-    is(pos.y, 200, 'not updated y position');
-
+
-    var mc = MochiKit.Color.Color;
-    var red = mc.fromString('rgb(255,0,0)');
-    var color = null;
-
+
-    color = mc.fromString(getStyle('styleTest', 'background-color'));
- 
+
-        'test getStyle selector case');
-
+
-    color = mc.fromString(getStyle('styleTest', 'backgroundColor'));
- 
+
-        'test getStyle camel case');
-
- 
+
-        'test computed getStyle selector case');
-
- 
+
+
-        'test computed getStyle camel case');
-
- 
+
-        'test getStyle opacity');
-
-    is(getStyle('styleTest', 'opacity'), 0.5, 'test getOpacity');
-
+
-    setStyle('styleTest', {'opacity': 0.2});
-    is(getStyle('styleTest', 'opacity'), 0.2, 'test setOpacity');
@@ -102 +103 @@
-
-    var dims = getElementDimensions('styleTest');
-
-
+
+
+
+
+
+
-
-    setElementDimensions('styleTest', {'w': 200, 'h': 150});
-
+, true
-    is(dims.w, 200, 'setElementDimensions w ok');
-    is(dims.h, 150, 'setElementDimensions h ok');
-
-    setElementDimensions('styleTest', {'w': 150});
-
+, true
-    is(dims.w, 150, 'setElementDimensions only w ok');
-    is(dims.h, 150, 'setElementDimensions h not updated ok');
-
-    hideElement('styleTest');
-
+, true
-    is(dims.w, 150, 'getElementDimensions w ok when display none');
-    is(dims.h, 150, 'getElementDimensions h ok when display none');
@@ -136 +141 @@
-
-    ok( true, "test suite finished!");
-
-
+
+
-} catch (err) {
-
+
-    var s = "test suite failure!\n";
-    var o = {};