Skip to content

Commit 649f315

Browse files
adamwulfadamwulf
committed
Merge pull request adamwulf#206 from Regaddi/feature-uncolumnize
Feature uncolumnize
2 parents 536afa3 + 73040f5 commit 649f315

File tree

5 files changed

+133
-28
lines changed

5 files changed

+133
-28
lines changed

‎README.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -119,6 +119,11 @@ Columnizer does not add default "dontsplit" or "dontend" classes to your content
119119
$yourContent.find('h1, h2, h3, h4, h5, h6').addClass('dontend');
120120
$yourContent.find('br').addClass('removeiflast').addClass('removeiffirst');
121121

122+
### Uncolumnize
123+
124+
You can revert your columnized DOM by using the "uncolumnize" function.
125+
126+
$('selector').uncolumnize();
122127

123128
## Troubleshooting
124129

‎samples/index.html‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<h1>Columnizer JQuery Plugin</h1>
22
<h3>About</h3>
3-
<p>Columnizer will automatically split your 1 div of content into as many columns as will fit the user's browser! If
3+
<p>Columnizer will automatically split your 1 div of content into as many columns as will fit the user's browser! If
44
the browser is resized, columns will be automatically added or removed appropriately.</p>
55
<p></p>
66
<p>For documentation, samples, and latest news, visit the project homepage at <a href='http://welcome.totheinter.net/columnizer-jquery-plugin/'>http://welcome.totheinter.net/columnizer-jquery-plugin/</a></p>
@@ -22,6 +22,7 @@ <h3>About</h3>
2222
<p><a href='sample12.html'>sample 12</a> - shows mix of automatic columns and manual column breaks.</p>
2323
<p><a href='sample13.html'>sample 13</a> - shows only manual column breaks.</p>
2424
<p><a href='sample14.html'>sample 14</a> - shows column break inside of a dontsplit item.</p>
25+
<p><a href='sample14.html'>sample uncolumnize</a> - shows uncolumnize function based on sample 1.</p>
2526

2627
<p>&nbsp;</p>
2728
<p><b>GitHub Issues</b></p>

‎samples/sample-uncolumnize.html‎

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
2+
<html lang="en">
3+
<head>
4+
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
5+
<title>Columnizer JQuery Plugin sample page</title>
6+
<meta name="author" content="Adam Wulf, Matt Wilson">
7+
<!-- Date: 2008-07-12 -->
8+
<style>
9+
.column p, .column h1{ padding: 5px; }
10+
11+
12+
body { font-size: 9pt; }
13+
#wrapper { margin: 0px 100px; }
14+
.wide, .thin { clear:both; }
15+
</style>
16+
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
17+
<script src="../src/jquery.columnizer.js" type="text/javascript" charset="utf-8"></script>
18+
<script>
19+
$(function(){
20+
function setColumns() {
21+
$('.wide').columnize({width:400});
22+
$('.thin').columnize({width:200});
23+
}
24+
25+
$('.js-set-columns').click(function() {
26+
setColumns();
27+
});
28+
$('.js-reset-columns').click(function() {
29+
$('.wide, .thin').uncolumnize();
30+
});
31+
});
32+
</script>
33+
</head>
34+
<body>
35+
<div id="wrapper">
36+
<div class="wide">
37+
<h1>Lorem ipsum ne justo</h1>
38+
<p>Bonorum has. His ut cibo quas tantas, vis ut probo adhuc definiebas, has at meis debet vulputate. No sed velit essent suavitate, in pro decore ceteros temporibus, usu in odio offendit theophrastus. Mel labore indoctum cu, ad soleat admodum delicatissimi sed, mei viris tritani ullamcorper eu. Ut vim simul aperiam.</p>
39+
<p>Eu eleifend repudiandae has. Mea eu ridens aliquam. Nisl aeque sit ut, posse dolor utinam cum in. Ad timeam sapientem eos, et eripuit inermis nam. Eos integre voluptaria ne, iriure concludaturque ut eum.</p>
40+
<p>Vis erant intellegat in. Soleat legere no ius, usu ex laoreet molestie. Sit eu sint inermis. Ea zzril scribentur pro.</p>
41+
<h1>Tempor essent appetere</h1>
42+
<p>Ius mutat commune expetendis in. Nam et quas sensibus reprimique, vix no erat soluta suavitate. At mel eius dictas latine. Corrumpit inciderint reformidans sed no, no usu omnis utinam noluisse.</p>
43+
<p>Sit et, an ius nihil apeirian. Eu posse tempor iuvaret cum. No diam dolor sea, postea mnesarchum ne ius, vel no utinam ignota dolores. Malis suscipit accusamus his ne, utinam assentior prodesset ea eam, facer partem antiopam et cum.</p>
44+
<p>Probo debet quaestio an eos, no mel assum iracundia delicatissimi, rebum facete utroque sed ex. Eu melius invidunt repudiandae vix, eu paulo reformidans deterruisset duo, solum voluptaria efficiantur ea mel. Qui summo zzril alienum et. Eu est ferri iuvaret, mazim epicurei sententiae ut cum, modo reque intellegat ex vix. Vim eu tibique accusamus, quot electram at qui.</p>
45+
<p>Ex iisque eleifend periculis has. Sit aeterno virtute partiendo ei, eam nonumy bonorum adolescens ad. Ut nec suas vocent ornatus, cetero legendos constituam mea ea, pri cu delenit iracundia. Mundi decore nec te.</p>
46+
<h1>Soleat civibus in pri</h1>
47+
<p>In petentium erroribus percipitur per. Takimata accommodare ius ut, eam no postulant urbanitas. Qui ei tantas consectetuer, quis dictas euripidis duo ei. Quaeque democritum concludaturque has ne.</p>
48+
<p>Blandit insolens constituto vix an. Has diam wisi in, eum unum repudiare no. Sit at virtute rationibus, qui vitae explicari cu. Vim ne singulis voluptatum, sed puto accusata salutandi ei. Ad mel civibus adversarium.</p>
49+
<p>Per ne solum vivendo, fabulas dolorem vivendo in pro. Nec duis ignota cotidieque no, an per possit nostrum. Pro detraxit definitionem eu. Vivendo officiis no nam, eu has reque maiestatis percipitur, dolore reprimique accommodare cum ad. No utinam voluptua oportere pri, augue sonet dicant ei sea.</p>
50+
<p>Sit et, an ius nihil apeirian. Eu posse tempor iuvaret cum. No diam dolor sea, postea mnesarchum ne ius, vel no utinam ignota dolores. Malis suscipit accusamus his ne, utinam assentior prodesset ea eam, facer partem antiopam et cum.</p>
51+
</div>
52+
<div class="thin">
53+
<h1>Lorem ipsum ne justo</h1>
54+
<p>Bonorum has. His ut cibo quas tantas, vis ut probo adhuc definiebas, has at meis debet vulputate. No sed velit essent suavitate, in pro decore ceteros temporibus, usu in odio offendit theophrastus. Mel labore indoctum cu, ad soleat admodum delicatissimi sed, mei viris tritani ullamcorper eu. Ut vim simul aperiam.</p>
55+
<p>Blandit insolens constituto vix an. Has diam wisi in, eum unum repudiare no. Sit at virtute rationibus, qui vitae explicari cu. Vim ne singulis voluptatum, sed puto accusata salutandi ei. Ad mel civibus adversarium.</p>
56+
<p>Ius mutat commune expetendis in. Nam et quas sensibus reprimique, vix no erat soluta suavitate. At mel eius dictas latine. Corrumpit inciderint reformidans sed no, no usu omnis utinam noluisse.</p>
57+
<p>Probo debet quaestio an eos, no mel assum iracundia delicatissimi, rebum facete utroque sed ex. Eu melius invidunt repudiandae vix, eu paulo reformidans deterruisset duo, solum voluptaria efficiantur ea mel. Qui summo zzril alienum et. Eu est ferri iuvaret, mazim epicurei sententiae ut cum, modo reque intellegat ex vix. Vim eu tibique accusamus, quot electram at qui.</p>
58+
<p>Eu eleifend repudiandae has. Mea eu ridens aliquam. Nisl aeque sit ut, posse dolor utinam cum in. Ad timeam sapientem eos, et eripuit inermis nam. Eos integre voluptaria ne, iriure concludaturque ut eum.</p>
59+
<p>Sit et, an ius nihil apeirian. Eu posse tempor iuvaret cum. No diam dolor sea, postea mnesarchum ne ius, vel no utinam ignota dolores. Malis suscipit accusamus his ne, utinam assentior prodesset ea eam, facer partem antiopam et cum.</p>
60+
<p>Vis erant intellegat in. Soleat legere no ius, usu ex laoreet molestie. Sit eu sint inermis. Ea zzril scribentur pro.</p>
61+
<h1>Tempor essent appetere</h1>
62+
<p>Ius mutat commune expetendis in. Nam et quas sensibus reprimique, vix no erat soluta suavitate. At mel eius dictas latine. Corrumpit inciderint reformidans sed no, no usu omnis utinam noluisse.</p>
63+
<p>Sit et, an ius nihil apeirian. Eu posse tempor iuvaret cum. No diam dolor sea, postea mnesarchum ne ius, vel no utinam ignota dolores. Malis suscipit accusamus his ne, utinam assentior prodesset ea eam, facer partem antiopam et cum.</p>
64+
<p>Blandit insolens constituto vix an. Has diam wisi in, eum unum repudiare no. Sit at virtute rationibus, qui vitae explicari cu. Vim ne singulis voluptatum, sed puto accusata salutandi ei. Ad mel civibus adversarium.</p>
65+
<p>Per ne solum vivendo, fabulas dolorem vivendo in pro. Nec duis ignota cotidieque no, an per possit nostrum. Pro detraxit definitionem eu. Vivendo officiis no nam, eu has reque maiestatis percipitur, dolore reprimique accommodare cum ad. No utinam voluptua oportere pri, augue sonet dicant ei sea.</p>
66+
<p>Probo debet quaestio an eos, no mel assum iracundia delicatissimi, rebum facete utroque sed ex. Eu melius invidunt repudiandae vix, eu paulo reformidans deterruisset duo, solum voluptaria efficiantur ea mel. Qui summo zzril alienum et. Eu est ferri iuvaret, mazim epicurei sententiae ut cum, modo reque intellegat ex vix. Vim eu tibique accusamus, quot electram at qui.</p>
67+
<p>Ex iisque eleifend periculis has. Sit aeterno virtute partiendo ei, eam nonumy bonorum adolescens ad. Ut nec suas vocent ornatus, cetero legendos constituam mea ea, pri cu delenit iracundia. Mundi decore nec te.</p>
68+
<h1>Soleat civibus in pri</h1>
69+
<p>In petentium erroribus percipitur per. Takimata accommodare ius ut, eam no postulant urbanitas. Qui ei tantas consectetuer, quis dictas euripidis duo ei. Quaeque democritum concludaturque has ne.</p>
70+
<p>Blandit insolens constituto vix an. Has diam wisi in, eum unum repudiare no. Sit at virtute rationibus, qui vitae explicari cu. Vim ne singulis voluptatum, sed puto accusata salutandi ei. Ad mel civibus adversarium.</p>
71+
<p>Ius mutat commune expetendis in. Nam et quas sensibus reprimique, vix no erat soluta suavitate. At mel eius dictas latine. Corrumpit inciderint reformidans sed no, no usu omnis utinam noluisse.</p>
72+
<p>Sit et, an ius nihil apeirian. Eu posse tempor iuvaret cum. No diam dolor sea, postea mnesarchum ne ius, vel no utinam ignota dolores. Malis suscipit accusamus his ne, utinam assentior prodesset ea eam, facer partem antiopam et cum.</p>
73+
<p>Per ne solum vivendo, fabulas dolorem vivendo in pro. Nec duis ignota cotidieque no, an per possit nostrum. Pro detraxit definitionem eu. Vivendo officiis no nam, eu has reque maiestatis percipitur, dolore reprimique accommodare cum ad. No utinam voluptua oportere pri, augue sonet dicant ei sea.</p>
74+
<p>Sit et, an ius nihil apeirian. Eu posse tempor iuvaret cum. No diam dolor sea, postea mnesarchum ne ius, vel no utinam ignota dolores. Malis suscipit accusamus his ne, utinam assentior prodesset ea eam, facer partem antiopam et cum.</p>
75+
</div>
76+
<button type="button" class="js-set-columns">Set Columns</button>
77+
<button type="button" class="js-reset-columns">Reset Columns</button>
78+
</div>
79+
</body>
80+
</html>

‎src/jquery.columnizer.js‎

Lines changed: 43 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -3,14 +3,21 @@
33
// created by: Adam Wulf @adamwulf, adam.wulf@gmail.com
44

55
(function($){
6+
var DATA_ORIGINAL_DOM_KEY = 'columnizer-original-dom';
67

78
$.fn.columnize = function(options) {
8-
this.cols =[];
9-
this.offset= 0;
9+
// save original DOM clone as data
10+
this.each(function() {
11+
var $el = $(this);
12+
$el.data(DATA_ORIGINAL_DOM_KEY, $el.clone(true, true));
13+
});
14+
15+
this.cols =[];
16+
this.offset= 0;
1017
this.before=[];
11-
this.lastOther=0;
18+
this.lastOther=0;
1219
this.prevMax =0;
13-
this.debug=0;
20+
this.debug=0;
1421
this.setColumnStart =null;
1522
this.elipsisText='';
1623

@@ -27,7 +34,7 @@
2734
overflow : false,
2835
// this function is called after content is columnized
2936
doneFunc : function(){},
30-
// if the content should be columnized into a
37+
// if the content should be columnized into a
3138
// container node other than it's own node
3239
target : false,
3340
// re-columnizing when images reload might make things
@@ -80,7 +87,7 @@
8087
};
8188
}
8289
}
83-
90+
8491
/**
8592
* appending a text node to a <table> will
8693
* cause a jquery crash.
@@ -165,7 +172,7 @@
165172
* is a text node, then it will try to split that text node. otherwise
166173
* it will leave the node in $pullOutHere and return with a height
167174
* smaller than targetHeight.
168-
*
175+
*
169176
* Returns a boolean on whether we did some splitting successfully at a text point
170177
* (so we know we don't need to split a real element). return false if the caller should
171178
* split a node if possible to end this column.
@@ -260,7 +267,7 @@
260267
}
261268

262269
/**
263-
* Split up an element, which is more complex than splitting text. We need to create
270+
* Split up an element, which is more complex than splitting text. We need to create
264271
* two copies of the element with it's contents divided between each
265272
*/
266273
function split($putInHere, $pullOutHere, $parentColumn, targetHeight){
@@ -311,7 +318,7 @@
311318
}else if($clone.is("img") || $cloneMe.hasClass(prefixTheClassName("dontsplit"))){
312319
//
313320
// it's either an image that's too tall, or an unsplittable node
314-
// that's too tall. leave it in the pullOutHere and we'll add it to the
321+
// that's too tall. leave it in the pullOutHere and we'll add it to the
315322
// next column
316323
$clone.remove();
317324
}else{
@@ -324,13 +331,13 @@
324331
// this node may still have non-text nodes to split
325332
// add the split class and then recur
326333
$cloneMe.addClass(prefixTheClassName("split"));
327-
334+
328335
//if this node was ol element, the child should continue the number ordering
329336
if($cloneMe.get(0).tagName == 'OL'){
330337
var startWith = $clone.get(0).childElementCount + $clone.get(0).start;
331338
$cloneMe.attr('start',startWith+1);
332339
}
333-
340+
334341
if($cloneMe.children().length){
335342
split($clone, $cloneMe, $parentColumn, targetHeight);
336343
}
@@ -492,7 +499,7 @@
492499
}
493500

494501
//
495-
// We loop as we try and workout a good height to use. We know it initially as an average
502+
// We loop as we try and workout a good height to use. We know it initially as an average
496503
// but if the last column is higher than the first ones (which can happen, depending on split
497504
// points) we need to raise 'adjustment'. We try this over a few iterations until we're 'solid'.
498505
//
@@ -572,7 +579,7 @@
572579
}
573580
if(options.overflow && !scrollHorizontally){
574581
var IE6 = false;
575-
/*@cc_on
582+
/*@cc_on
576583
@if (@_jscript_version < 5.7)
577584
IE6 = true;
578585
@end
@@ -687,6 +694,18 @@
687694
});
688695
};
689696

697+
$.fn.uncolumnize = function() {
698+
// revert to initial DOM
699+
this.each(function() {
700+
var $el = $(this),
701+
$clone;
702+
703+
if($clone = $el.data(DATA_ORIGINAL_DOM_KEY)) {
704+
$el.replaceWith($clone);
705+
}
706+
});
707+
};
708+
690709
$.fn.renumberByJS=function($searchTag, $colno, $targetId, $targetClass ) {
691710
this.setList = function($cols, $list, $tag1) {
692711
var $parents = this.before.parents();
@@ -711,8 +730,8 @@ $.fn.renumberByJS=function($searchTag, $colno, $targetId, $targetClass ) {
711730
// if the first LI in the current column is split, decrement, as we want the same number/key
712731
if( $($cols[this.offset]).find($tag1+':first li.split').length ) {
713732
var $whereElipsis=$($cols[this.offset-1]).find($tag1+':last li:last');
714-
if( this.elipsisText==='' ||
715-
$($cols[this.offset-1]).find($tag1+':last ~ div').length ||
733+
if( this.elipsisText==='' ||
734+
$($cols[this.offset-1]).find($tag1+':last ~ div').length ||
716735
$($cols[this.offset-1]).find($tag1+':last ~ p').length ) {
717736
;
718737
} else {
@@ -735,7 +754,7 @@ $.fn.renumberByJS=function($searchTag, $colno, $targetId, $targetClass ) {
735754
}
736755
// an item in split between two columns. it only holds one key...
737756
if($($cols[this.offset]).find($tag1+':first >li.split >'+$tag1).length==0) {
738-
$tint--;
757+
$tint--;
739758
}
740759
}
741760
if($rest==1) {
@@ -747,7 +766,7 @@ $.fn.renumberByJS=function($searchTag, $colno, $targetId, $targetClass ) {
747766
console.log("Supposed to be a nested list...decr");
748767
}
749768
$tint--;
750-
// some how, id previous list starts split, need secins decrement,
769+
// some how, id previous list starts split, need secins decrement,
751770
// if "split" is now correct, reference this
752771
var $tt = $($cols[this.offset -1]).find($tag1+':first li.split:first');
753772
if($tt.length>0) {
@@ -796,7 +815,7 @@ $.fn.renumberByJS=function($searchTag, $colno, $targetId, $targetClass ) {
796815
$list.attr('start', $tint);
797816
}
798817
}
799-
return 0;
818+
return 0;
800819
}
801820

802821
if(typeof $targetId === 'undefined') { $targetId=false; }
@@ -807,15 +826,15 @@ $.fn.renumberByJS=function($searchTag, $colno, $targetId, $targetClass ) {
807826

808827
var $target ='';
809828
this.prevMax =1;
810-
829+
811830
if($targetClass) {
812831
$target ="."+$targetClass;
813832
} else {
814833
$target ="#"+$targetId;
815834
}
816835
var $tag1 = $searchTag.toLowerCase();
817836
var $tag2 = $searchTag.toUpperCase();
818-
837+
819838
this.cols = $($target);
820839
if(this.debug) {
821840
console.log("There are "+this.cols.length+" items, looking for "+$tag1);
@@ -830,15 +849,15 @@ $.fn.renumberByJS=function($searchTag, $colno, $targetId, $targetClass ) {
830849
console.log("iterating "+this.offset+"...[of "+this.cols.length+"]");
831850
}
832851
// if the first column again, nothing to the left of you, do nothing...
833-
if(this.offset % $colno==0) {
852+
if(this.offset % $colno==0) {
834853
if(this.debug) {
835854
console.log("First column (in theory..)");
836855
}
837856

838857
this.prevMax = 1;
839858
continue;
840859
}
841-
860+
842861
this.before = $(this.cols[this.offset-1]).find($tag1+':last');
843862
// if there are no occurences of the searchTag, do nothing
844863
if(this.before.length) {
@@ -863,7 +882,7 @@ $.fn.renumberByJS=function($searchTag, $colno, $targetId, $targetClass ) {
863882
break;
864883
}
865884
}
866-
885+
867886
this.nest =1;
868887
if($(this.cols[this.offset]).find(">"+$tag1+':first li '+$tag1+":first").length) {
869888
this.nest = 2;
@@ -873,7 +892,7 @@ $.fn.renumberByJS=function($searchTag, $colno, $targetId, $targetClass ) {
873892
$list = $(this.cols[this.offset]).find($tag1+':first li '+$tag1+":first");
874893
if($list.length) {
875894
// I hope the two columns have same nesting, or its busted
876-
895+
877896
this.before= $(this.cols[this.offset-1]).find(">"+$tag1+':last li '+$tag1+":last");
878897
this.prevMax= 0;
879898
this.nest =1;

0 commit comments

Comments
 (0)