|
35 | 35 | // column widths, but will take slightly longer |
36 | 36 | accuracy : false, |
37 | 37 | // don't automatically layout columns, only use manual columnbreak |
38 | | - manualBreaks : false |
| 38 | + manualBreaks : false, |
| 39 | + // previx for all the CSS classes used by this plugin |
| 40 | + // default to empty string for backwards compatibility |
| 41 | + cssClassPrefix : "" |
39 | 42 | }; |
40 | 43 | var options = $.extend(defaults, options); |
41 | 44 |
|
|
53 | 56 | var lastWidth = 0; |
54 | 57 | var columnizing = false; |
55 | 58 | var manualBreaks = options.manualBreaks; |
| 59 | + var cssClassPrefix = defaults.cssClassPrefix; |
| 60 | + if(typeof(options.cssClassPrefix) == "string"){ |
| 61 | + cssClassPrefix = options.cssClassPrefix; |
| 62 | + } |
| 63 | + |
56 | 64 |
|
57 | 65 | var adjustment = 0; |
58 | 66 |
|
|
99 | 107 | } |
100 | 108 | }); |
101 | 109 | } |
| 110 | + |
| 111 | + function prefixTheClassName(className, withDot){ |
| 112 | + var dot = withDot ? "." : ""; |
| 113 | + if(cssClassPrefix.length){ |
| 114 | + return dot + cssClassPrefix + "-" + className; |
| 115 | + } |
| 116 | + return dot + className; |
| 117 | + } |
| 118 | + |
102 | 119 |
|
103 | 120 | /** |
104 | 121 | * this fuction builds as much of a column as it can without |
|
126 | 143 | // |
127 | 144 | // Because we're not cloning, jquery will actually move the element" |
128 | 145 | // http://welcome.totheinter.net/2009/03/19/the-undocumented-life-of-jquerys-append/ |
129 | | - if($(node).find(".columnbreak").length){ |
| 146 | + if($(node).find(prefixTheClassName("columnbreak", true)).length){ |
130 | 147 | // |
131 | 148 | // our column is on a column break, so just end here |
132 | 149 | return; |
133 | 150 | } |
134 | | - if($(node).hasClass("columnbreak")){ |
| 151 | + if($(node).hasClass(prefixTheClassName("columnbreak"))){ |
135 | 152 | // |
136 | 153 | // our column is on a column break, so just end here |
137 | 154 | return; |
|
199 | 216 | * two copies of the element with it's contents divided between each |
200 | 217 | */ |
201 | 218 | function split($putInHere, $pullOutHere, $parentColumn, targetHeight){ |
202 | | - if($putInHere.contents(":last").find(".columnbreak").length){ |
| 219 | + if($putInHere.contents(":last").find(prefixTheClassName("columnbreak", true)).length){ |
203 | 220 | // |
204 | 221 | // our column is on a column break, so just end here |
205 | 222 | return; |
206 | 223 | } |
207 | | - if($putInHere.contents(":last").hasClass("columnbreak")){ |
| 224 | + if($putInHere.contents(":last").hasClass(prefixTheClassName("columnbreak"))){ |
208 | 225 | // |
209 | 226 | // our column is on a column break, so just end here |
210 | 227 | return; |
|
221 | 238 | // |
222 | 239 | // need to support both .prop and .attr if .prop doesn't exist. |
223 | 240 | // this is for backwards compatibility with older versions of jquery. |
224 | | - if($cloneMe.hasClass("columnbreak")){ |
| 241 | + if($cloneMe.hasClass(prefixTheClassName("columnbreak"))){ |
225 | 242 | // |
226 | 243 | // ok, we have a columnbreak, so add it into |
227 | 244 | // the column and exit |
|
231 | 248 | // keep adding until we hit a manual break |
232 | 249 | $putInHere.append($clone); |
233 | 250 | $cloneMe.remove(); |
234 | | - }else if($clone.get(0).nodeType == 1 && !$clone.hasClass("dontend")){ |
| 251 | + }else if($clone.get(0).nodeType == 1 && !$clone.hasClass(prefixTheClassName("dontend"))){ |
235 | 252 | $putInHere.append($clone); |
236 | 253 | if($clone.is("img") && $parentColumn.height() < targetHeight + 20){ |
237 | 254 | // |
238 | 255 | // we can't split an img in half, so just add it |
239 | 256 | // to the column and remove it from the pullOutHere section |
240 | 257 | $cloneMe.remove(); |
241 | | - }else if(!$cloneMe.hasClass("dontsplit") && $parentColumn.height() < targetHeight + 20){ |
| 258 | + }else if(!$cloneMe.hasClass(prefixTheClassName("dontsplit")) && $parentColumn.height() < targetHeight + 20){ |
242 | 259 | // |
243 | 260 | // pretty close fit, and we're not allowed to split it, so just |
244 | 261 | // add it to the column, remove from pullOutHere, and be done |
245 | 262 | $cloneMe.remove(); |
246 | | - }else if($clone.is("img") || $cloneMe.hasClass("dontsplit")){ |
| 263 | + }else if($clone.is("img") || $cloneMe.hasClass(prefixTheClassName("dontsplit"))){ |
247 | 264 | // |
248 | 265 | // it's either an image that's too tall, or an unsplittable node |
249 | 266 | // that's too tall. leave it in the pullOutHere and we'll add it to the |
|
258 | 275 | if(!columnize($clone, $cloneMe, $parentColumn, targetHeight)){ |
259 | 276 | // this node still has non-text nodes to split |
260 | 277 | // add the split class and then recur |
261 | | - $cloneMe.addClass("split"); |
| 278 | + $cloneMe.addClass(prefixTheClassName("split")); |
262 | 279 | if($cloneMe.children().length){ |
263 | 280 | split($clone, $cloneMe, $parentColumn, targetHeight); |
264 | 281 | } |
265 | 282 | }else{ |
266 | 283 | // this node only has text node children left, add the |
267 | 284 | // split class and move on. |
268 | | - $cloneMe.addClass("split"); |
| 285 | + $cloneMe.addClass(prefixTheClassName("split")); |
269 | 286 | } |
270 | 287 | if($clone.get(0).childNodes.length == 0){ |
271 | 288 | // it was split, but nothing is in it :( |
|
285 | 302 | $inBox.data("columnizing", true); |
286 | 303 |
|
287 | 304 | $inBox.empty(); |
288 | | - $inBox.append($("<div class='first last column' style='width:100%; float: " + options.columnFloat + ";'></div>")); //" |
| 305 | + $inBox.append($("<div class='" |
| 306 | + + prefixTheClassName("first") + " " |
| 307 | + + prefixTheClassName("last") + " " |
| 308 | + + prefixTheClassName("column") + " " |
| 309 | + + "' style='width:100%; float: " + options.columnFloat + ";'></div>")); //" |
289 | 310 | $col = $inBox.children().eq($inBox.children().length-1); |
290 | 311 | $destroyable = $cache.clone(true); |
291 | 312 | if(options.overflow){ |
292 | 313 | targetHeight = options.overflow.height; |
293 | 314 | columnize($col, $destroyable, $col, targetHeight); |
294 | 315 | // make sure that the last item in the column isn't a "dontend" |
295 | | - if(!$destroyable.contents().find(":first-child").hasClass("dontend")){ |
| 316 | + if(!$destroyable.contents().find(":first-child").hasClass(prefixTheClassName("dontend"))){ |
296 | 317 | split($col, $destroyable, $col, targetHeight); |
297 | 318 | } |
298 | 319 |
|
|
351 | 372 | return false; |
352 | 373 | } |
353 | 374 | if(dom.nodeType != 1) return false; |
354 | | - if($(dom).hasClass("dontend")) return true; |
| 375 | + if($(dom).hasClass(prefixTheClassName("dontend"))) return true; |
355 | 376 | if(dom.childNodes.length == 0) return false; |
356 | 377 | return checkDontEndColumn(dom.childNodes[dom.childNodes.length-1]); |
357 | 378 | } |
|
369 | 390 | var optionHeight = options.height; |
370 | 391 | if(options.columns) numCols = options.columns; |
371 | 392 | if(manualBreaks){ |
372 | | - numCols = $cache.find(".columnbreak").length + 1; |
| 393 | + numCols = $cache.find(prefixTheClassName("columnbreak", true)).length + 1; |
373 | 394 | optionWidth = false; |
374 | 395 | } |
375 | 396 |
|
|
420 | 441 | // create the columns |
421 | 442 | for (var i = 0; i < numCols; i++) { |
422 | 443 | /* create column */ |
423 | | - var className = (i == 0) ? "first column" : "column"; |
424 | | - var className = (i == numCols - 1) ? ("last " + className) : className; |
| 444 | + var className = (i == 0) ? prefixTheClassName("first") : ""; |
| 445 | + className += " " + prefixTheClassName("column"); |
| 446 | + var className = (i == numCols - 1) ? (prefixTheClassName("last") + " " + className) : className; |
425 | 447 | $inBox.append($("<div class='" + className + "' style='width:" + (Math.floor(100 / numCols))+ "%; float: " + options.columnFloat + ";'></div>")); //" |
426 | 448 | } |
427 | 449 |
|
|
435 | 457 | var $col = $inBox.children().eq(i); |
436 | 458 | columnize($col, $destroyable, $col, targetHeight); |
437 | 459 | // make sure that the last item in the column isn't a "dontend" |
438 | | - if(!$destroyable.contents().find(":first-child").hasClass("dontend")){ |
| 460 | + if(!$destroyable.contents().find(":first-child").hasClass(prefixTheClassName("dontend"))){ |
439 | 461 | split($col, $destroyable, $col, targetHeight); |
440 | 462 | }else{ |
441 | 463 | // alert("not splitting a dontend"); |
|
473 | 495 | // |
474 | 496 | // if $destroyable still has columnbreak nodes in it, then we need to keep |
475 | 497 | // looping and creating more columns. |
476 | | - if($destroyable.find(".columnbreak").length){ |
| 498 | + if($destroyable.find(prefixTheClassName("columnbreak", true)).length){ |
477 | 499 | numCols ++; |
478 | 500 | } |
479 | 501 | } |
|
514 | 536 | var numberOfColumnsThatDontEndInAColumnBreak = 0; |
515 | 537 | $inBox.children().each(function($inBox){ return function($item){ |
516 | 538 | var $col = $inBox.children().eq($item); |
517 | | - var endsInBreak = $col.children(":last").find(".columnbreak").length; |
| 539 | + var endsInBreak = $col.children(":last").find(prefixTheClassName("columnbreak", true)).length; |
518 | 540 | if(!endsInBreak){ |
519 | 541 | var h = $col.height(); |
520 | 542 | lastIsMax = false; |
|
561 | 583 | $col = $inBox.children().eq(i); |
562 | 584 | $col.width(optionWidth + "px"); |
563 | 585 | if(i==0){ |
564 | | - $col.addClass("first"); |
| 586 | + $col.addClass(prefixTheClassName("first")); |
565 | 587 | }else if(i==$inBox.children().length-1){ |
566 | | - $col.addClass("last"); |
| 588 | + $col.addClass(prefixTheClassName("last")); |
567 | 589 | }else{ |
568 | | - $col.removeClass("first"); |
569 | | - $col.removeClass("last"); |
| 590 | + $col.removeClass(prefixTheClassName("first")); |
| 591 | + $col.removeClass(prefixTheClassName("last")); |
570 | 592 | } |
571 | 593 | }); |
572 | 594 | $inBox.width($inBox.children().length * optionWidth + "px"); |
573 | 595 | } |
574 | 596 | $inBox.append($("<br style='clear:both;'>")); |
575 | 597 | } |
576 | | - $inBox.find('.column').find(':first.removeiffirst').remove(); |
577 | | - $inBox.find('.column').find(':last.removeiflast').remove(); |
| 598 | + $inBox.find(prefixTheClassName("column", true)).find(":first" + prefixTheClassName("removeiffirst", true)).remove(); |
| 599 | + $inBox.find(prefixTheClassName("column", true)).find(':last' + prefixTheClassName("removeiflast", true)).remove(); |
578 | 600 | $inBox.data("columnizing", false); |
579 | 601 |
|
580 | 602 | if(options.overflow){ |
|
0 commit comments