|
96 | 96 | } |
97 | 97 | }); |
98 | 98 | } |
99 | | - |
| 99 | + |
100 | 100 | /** |
101 | | - * return a node that has a height |
102 | | - * less than or equal to height |
| 101 | + * this fuction builds as much of a column as it can without |
| 102 | + * splitting nodes in half. If the last node in the new column |
| 103 | + * is a text node, then it will try to split that text node. otherwise |
| 104 | + * it will leave the node in $pullOutHere and return with a height |
| 105 | + * smaller than targetHeight. |
| 106 | + * |
| 107 | + * Returns a boolean on whether we did some splitting successfully at a text point |
| 108 | + * (so we know we don't need to split a real element). return false if the caller should |
| 109 | + * split a node if possible to end this column. |
103 | 110 | * |
104 | | - * @param putInHere, a dom element |
105 | | - * @$pullOutHere, a jQuery element |
| 111 | + * @param putInHere, the jquery node to put elements into for the current column |
| 112 | + * @param $pullOutHere, the jquery node to pull elements out of (uncolumnized html) |
| 113 | + * @param $parentColumn, the jquery node for the currently column that's being added to |
| 114 | + * @param targetHeight, the ideal height for the column, get as close as we can to this height |
106 | 115 | */ |
107 | | - function columnize($putInHere, $pullOutHere, $parentColumn, height){ |
| 116 | + function columnize($putInHere, $pullOutHere, $parentColumn, targetHeight){ |
108 | 117 | // |
109 | 118 | // add as many nodes to the column as we can, |
110 | 119 | // but stop once our height is too tall |
111 | | - while($parentColumn.height() < height && |
| 120 | + while($parentColumn.height() < targetHeight && |
112 | 121 | $pullOutHere[0].childNodes.length){ |
| 122 | + // |
| 123 | + // Because we're not cloning, jquery will actually move the element" |
| 124 | + // http://welcome.totheinter.net/2009/03/19/the-undocumented-life-of-jquerys-append/ |
113 | 125 | $putInHere.append($pullOutHere[0].childNodes[0]); |
114 | 126 | } |
115 | 127 | if($putInHere[0].childNodes.length == 0) return; |
|
131 | 143 | counter2 = options.accuracy; |
132 | 144 | var columnText; |
133 | 145 | var latestTextNode = null; |
134 | | - while($parentColumn.height() < height && oText.length){ |
| 146 | + while($parentColumn.height() < targetHeight && oText.length){ |
135 | 147 | if (oText.indexOf(' ', counter2) != '-1') { |
136 | 148 | columnText = oText.substring(0, oText.indexOf(' ', counter2)); |
137 | 149 | } else { |
|
146 | 158 | oText = ""; |
147 | 159 | } |
148 | 160 | } |
149 | | - if($parentColumn.height() >= height && latestTextNode != null){ |
| 161 | + if($parentColumn.height() >= targetHeight && latestTextNode != null){ |
150 | 162 | // too tall :( |
151 | 163 | $putInHere[0].removeChild(latestTextNode); |
152 | 164 | oText = latestTextNode.nodeValue + oText; |
|
167 | 179 | return $item[0].nodeType == 3; |
168 | 180 | } |
169 | 181 |
|
170 | | - function split($putInHere, $pullOutHere, $parentColumn, height){ |
| 182 | + /** |
| 183 | + * Split up an element, which is more complex than splitting text. We need to create |
| 184 | + * two copies of the element with it's contents divided between each |
| 185 | + */ |
| 186 | + function split($putInHere, $pullOutHere, $parentColumn, targetHeight){ |
171 | 187 | if($pullOutHere.children().length){ |
172 | 188 | var $cloneMe = $pullOutHere.children(":first"); |
173 | 189 | // |
|
179 | 195 | if(($clone.prop && $clone.prop("nodeType") == 1 && !$clone.hasClass("dontend")) || |
180 | 196 | ($clone.attr("nodeType") == 1 && !$clone.hasClass("dontend"))){ |
181 | 197 | $putInHere.append($clone); |
182 | | - if($clone.is("img") && $parentColumn.height() < height + 20){ |
| 198 | + if($clone.is("img") && $parentColumn.height() < targetHeight + 20){ |
183 | 199 | // |
184 | 200 | // we can't split an img in half, so just add it |
185 | 201 | // to the column and remove it from the pullOutHere section |
186 | 202 | $cloneMe.remove(); |
187 | | - }else if(!$cloneMe.hasClass("dontsplit") && $parentColumn.height() < height + 20){ |
| 203 | + }else if(!$cloneMe.hasClass("dontsplit") && $parentColumn.height() < targetHeight + 20){ |
188 | 204 | // |
189 | 205 | // pretty close fit, and we're not allowed to split it, so just |
190 | 206 | // add it to the column, remove from pullOutHere, and be done |
|
201 | 217 | // the node in the column we're building, and start splitting |
202 | 218 | // it in half, leaving some of it in pullOutHere |
203 | 219 | $clone.empty(); |
204 | | - if(!columnize($clone, $cloneMe, $parentColumn, height)){ |
| 220 | + if(!columnize($clone, $cloneMe, $parentColumn, targetHeight)){ |
205 | 221 | // this node still has non-text nodes to split |
206 | 222 | // add the split class and then recur |
207 | 223 | $cloneMe.addClass("split"); |
208 | 224 | if($cloneMe.children().length){ |
209 | | - split($clone, $cloneMe, $parentColumn, height); |
| 225 | + split($clone, $cloneMe, $parentColumn, targetHeight); |
210 | 226 | } |
211 | 227 | }else{ |
212 | 228 | // this node only has text node children left, add the |
|
318 | 334 | scrollHorizontally = true; |
319 | 335 | } |
320 | 336 |
|
| 337 | + // |
| 338 | + // We loop as we try and workout a good height to use. We know it initially as an average |
| 339 | + // but if the last column is higher than the first ones (which can happen, depending on split |
| 340 | + // points) we need to raise 'adjustment'. We try this over a few iterations until we're 'solid'. |
321 | 341 | for(var loopCount=0;loopCount<maxLoops;loopCount++){ |
322 | 342 | $inBox.empty(); |
323 | 343 | var $destroyable; |
|
0 commit comments