| 1 | /* |
|---|
| 2 | DOM Autolayout Interface |
|---|
| 3 | $Id$ |
|---|
| 4 | |
|---|
| 5 | Copyright (c) 2005, Six Apart, Ltd. |
|---|
| 6 | All rights reserved. |
|---|
| 7 | |
|---|
| 8 | Redistribution and use in source and binary forms, with or without |
|---|
| 9 | modification, are permitted provided that the following conditions are |
|---|
| 10 | met: |
|---|
| 11 | |
|---|
| 12 | * Redistributions of source code must retain the above copyright |
|---|
| 13 | notice, this list of conditions and the following disclaimer. |
|---|
| 14 | |
|---|
| 15 | * Redistributions in binary form must reproduce the above |
|---|
| 16 | copyright notice, this list of conditions and the following disclaimer |
|---|
| 17 | in the documentation and/or other materials provided with the |
|---|
| 18 | distribution. |
|---|
| 19 | |
|---|
| 20 | * Neither the name of "Six Apart" nor the names of its |
|---|
| 21 | contributors may be used to endorse or promote products derived from |
|---|
| 22 | this software without specific prior written permission. |
|---|
| 23 | |
|---|
| 24 | THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS |
|---|
| 25 | "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT |
|---|
| 26 | LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR |
|---|
| 27 | A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT |
|---|
| 28 | OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, |
|---|
| 29 | SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT |
|---|
| 30 | LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, |
|---|
| 31 | DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY |
|---|
| 32 | THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT |
|---|
| 33 | (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE |
|---|
| 34 | OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. |
|---|
| 35 | |
|---|
| 36 | */ |
|---|
| 37 | |
|---|
| 38 | Autolayout = { |
|---|
| 39 | matchAutolayout: /(?:^|\s)autolayout-(\S+)(?:\s|$)/, |
|---|
| 40 | |
|---|
| 41 | |
|---|
| 42 | matchSingleAutolayout: /^autolayout-(\S+)$/, |
|---|
| 43 | |
|---|
| 44 | |
|---|
| 45 | applyAutolayouts: function( e ) { |
|---|
| 46 | var cs = DOM.getClassNames( e ); |
|---|
| 47 | for( var i = 0; i < cs.length; i++ ) { |
|---|
| 48 | var r = this.matchSingleAutolayout.exec( cs[ i ] ); |
|---|
| 49 | if( !r || !r[ 1 ] ) |
|---|
| 50 | continue; |
|---|
| 51 | var l = r[ 1 ].cssToJS(); |
|---|
| 52 | if( !this.layouts.hasOwnProperty( l ) ) |
|---|
| 53 | continue; |
|---|
| 54 | this.layouts[ l ].apply( this, arguments ); |
|---|
| 55 | } |
|---|
| 56 | } |
|---|
| 57 | } |
|---|
| 58 | |
|---|
| 59 | |
|---|
| 60 | Autolayout.layouts = { |
|---|
| 61 | center: function( e ) { |
|---|
| 62 | DOM.setLeft( e, finiteInt( e.parentNode.clientWidth / 2 ) - finiteInt( e.offsetWidth / 2 ) ); |
|---|
| 63 | DOM.setTop( e, finiteInt( e.parentNode.clientHeight / 2 ) - finiteInt( e.offsetHeight / 2 ) ); |
|---|
| 64 | }, |
|---|
| 65 | |
|---|
| 66 | |
|---|
| 67 | heightParent: function( e ) { |
|---|
| 68 | DOM.setHeight( e, finiteInt( e.parentNode.clientHeight ) ); |
|---|
| 69 | }, |
|---|
| 70 | |
|---|
| 71 | |
|---|
| 72 | heightNext: function( e ) { |
|---|
| 73 | var ne = DOM.getNextElement( e ); |
|---|
| 74 | if( !ne ) |
|---|
| 75 | return; |
|---|
| 76 | DOM.setHeight( e, finiteInt( ne.offsetTop ) - finiteInt( e.offsetTop ) ); |
|---|
| 77 | }, |
|---|
| 78 | |
|---|
| 79 | |
|---|
| 80 | flyout: function( e ) { |
|---|
| 81 | var d = DOM.getIframeAbsoluteDimensions( this.targetElement ); |
|---|
| 82 | if( !d ) |
|---|
| 83 | return; |
|---|
| 84 | DOM.setLeft( e, d.absoluteLeft ); |
|---|
| 85 | DOM.setTop( e, d.absoluteBottom ); |
|---|
| 86 | }, |
|---|
| 87 | |
|---|
| 88 | |
|---|
| 89 | FLYOUT_SMART_EPSILON_Y: 200, |
|---|
| 90 | |
|---|
| 91 | flyoutSmart: function( e ) { |
|---|
| 92 | var td = DOM.getIframeAbsoluteDimensions( this.targetElement ); |
|---|
| 93 | if( !td ) |
|---|
| 94 | return; |
|---|
| 95 | var dd = DOM.getDocumentDimensions( DOM.getOwnerDocument( e ) ); |
|---|
| 96 | |
|---|
| 97 | if( td.absoluteLeft > (dd.width / 2) ) { |
|---|
| 98 | e.style.left = "auto"; |
|---|
| 99 | DOM.setRight( e, (dd.width - td.absoluteRight) ); |
|---|
| 100 | } else { |
|---|
| 101 | e.style.right = "auto"; |
|---|
| 102 | DOM.setLeft( e, td.absoluteLeft ); |
|---|
| 103 | } |
|---|
| 104 | |
|---|
| 105 | /* 300px seems like a good fudge epsilon */ |
|---|
| 106 | if( td.absoluteTop > (dd.height - 300) ) { |
|---|
| 107 | e.style.top = "auto"; |
|---|
| 108 | DOM.setBottom( e, (dd.height - td.absoluteBottom) ); |
|---|
| 109 | } else { |
|---|
| 110 | e.style.bottom = "auto"; |
|---|
| 111 | DOM.setTop( e, td.absoluteTop ); |
|---|
| 112 | } |
|---|
| 113 | }, |
|---|
| 114 | |
|---|
| 115 | |
|---|
| 116 | flyoutUp: function( e ) { |
|---|
| 117 | var d = DOM.getIframeAbsoluteDimensions( this.targetElement ); |
|---|
| 118 | if( !d ) |
|---|
| 119 | return; |
|---|
| 120 | |
|---|
| 121 | var a = DOM.getDimensions( e ); |
|---|
| 122 | DOM.setLeft( e, d.absoluteLeft ); |
|---|
| 123 | DOM.setTop( e, d.absoluteBottom - a.offsetHeight ); |
|---|
| 124 | }, |
|---|
| 125 | |
|---|
| 126 | |
|---|
| 127 | flyoutLeft: function( e ) { |
|---|
| 128 | var d = DOM.getIframeAbsoluteDimensions( this.targetElement ); |
|---|
| 129 | if( !d ) |
|---|
| 130 | return; |
|---|
| 131 | |
|---|
| 132 | var a = DOM.getDimensions( e ); |
|---|
| 133 | DOM.setLeft( e, d.absoluteLeft - a.offsetWidth ); |
|---|
| 134 | DOM.setTop( e, d.absoluteTop ); |
|---|
| 135 | }, |
|---|
| 136 | |
|---|
| 137 | |
|---|
| 138 | flyoutLeftFromRight: function( e ) { |
|---|
| 139 | var d = DOM.getIframeAbsoluteDimensions( this.targetElement ); |
|---|
| 140 | if( !d ) |
|---|
| 141 | return; |
|---|
| 142 | |
|---|
| 143 | var a = DOM.getDimensions( e ); |
|---|
| 144 | DOM.setLeft( e, d.absoluteRight - a.offsetWidth ); |
|---|
| 145 | DOM.setTop( e, d.absoluteTop ); |
|---|
| 146 | }, |
|---|
| 147 | |
|---|
| 148 | |
|---|
| 149 | targetWidth: function( e ) { |
|---|
| 150 | if( !this.targetElement ) |
|---|
| 151 | return; |
|---|
| 152 | DOM.setWidth( e, this.targetElement.offsetWidth ); |
|---|
| 153 | } |
|---|
| 154 | } |
|---|