added column toggler to templates (still not pretty)...

Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>

lib/jli.js

@@ -45,8 +45,10 @@
 // In all forms this will return the current state string or null if the
 // action argument given is invalid.
 //
-// NOTE: if it is needed to apply this to and explicit target but with 
+// NOTE: there is a special action 'next', passing it will have the same
-// 		no action explicit action, just pass null as the second argument.
+// 		effect as not passing any action.
+// NOTE: if it is needed to apply this to an explicit target but with 
+// 		no explicit action, just pass 'next' as the second argument.
 // NOTE: a special class name 'none' means no class is set, if it is present 
 // 		in the class_list then that state will be with all other state 
 // 		classes removed.
@@ -54,10 +56,10 @@
 // NOTE: of only one callback is given then it will be called after the 
 // 		class change...
 // 		a way around this is to pass an empty function as callback_b
-// NOTE: due to several times I've repeated the same mistake of forgetting 
+// NOTE: leading dots in class names in class_list are optional. 
-// 		to write the classes without leading dots, this now will normalize
+// 		this is due to several times I've repeated the same mistake of 
-// 		the class list, so now this will correctly treat both dotted 
+// 		forgetting to write the classes without leading dots, this now 
-// 		and non-dotted class names...
+// 		will normalize the class list...
 //
 //
 // This also takes one or two callbacks. If only one is given then it is
@@ -97,11 +99,11 @@ function createCSSClassToggler(elem, class_list, callback_a, callback_b){
 	// XXX make this generic...
 	var func = function(a, b){
 		if(b == null){
-			var action = a
+			var action = a == 'next' ? null : a
 			var e = elem
 		} else {
 			var e = a
-			var action = b
+			var action = b == 'next' ? null : b
 		}
 		e = $(e)
 		// option number...

magazine.css

@@ -612,6 +612,13 @@ div.page-number-text {
 }
 
 /* column layouts */
+.page .content .one-column {
+	column-count: 1;
+	-webkit-column-count: 1;
+	-moz-column-count: 1;
+
+	text-align: justify;
+}
 .page .content .two-column {
 	column-count: 2;
 	-webkit-column-count: 2;

templates.html

@@ -100,6 +100,7 @@ body {
 	text-shadow: black 0.1em 0.1em 0.4em, black 0.1em 0.1em;
 }
 
+.container .column-toggle,
 .container .light.theme-toggle,
 .container .theme-toggle {
 	position: absolute;
@@ -139,6 +140,17 @@ body {
 	background: white;
 }
 
+.container .column-toggle div {
+	width: 8px;
+	height: 18px;
+	margin: 1px;
+	background: gray;
+	float: left;
+}
+.container .column-toggle {
+	right: 40px;
+}
+
 
 </style>
 
@@ -160,6 +172,21 @@ function toggleTheme(){
 	return false
 }
 
+var togglePageColumns = createCSSClassToggler('', [
+	'one-column',
+	'two-column',
+	'three-column',
+	'four-column',
+])
+
+function toggleColumns(){
+	var page = $(this)
+				.parents('.page-box, .preview')
+				.find('.one-column, .two-column, .three-column, .four-column')
+	togglePageColumns(page, 'next')
+	return false
+}
+
 function addThemeToggleZones(){
 	$('<div><div/></div>')
 		.addClass('theme-toggle')
@@ -168,9 +195,18 @@ function addThemeToggleZones(){
 		.click(toggleTheme)
 }
 
+function addColumnToggleZones(){
+	$('<div><div/><div/></div>')
+		.addClass('column-toggle')
+		.attr('title', 'Toggle columns theme')
+		.appendTo($('.one-column, .two-column, .three-column, .four-column').parents('.page-box').add($('.preview')))
+		.click(toggleColumns)
+}
+
 $(function(){
 
 	addThemeToggleZones()
+	addColumnToggleZones()
 
 	$('.preview')
 		.click(function(){
@@ -222,34 +258,12 @@ $(function(){
 		<div class="title">Page Group</div>
 	</div>
 
-
-	<div class="page-box">
-		<div class="page">
-			<div class="content">
-				<div class="header">
-					<h1>Two column</h1>
-				</div>
-				<div class="body two-column">
-
-					Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius.
-
-				</div>
-				<div class="footer">
-					<div class="page-number-text">[PAGE NUMBER]</div>
-				</div>
-			</div>
-		</div>
-		<!-- keep this last -->
-		<div class="title">Two Column</div>
-	</div>
-
-
 	<div class="page-box">
 		<div class="title">Two Column</div>
 		<div class="page">
 			<div class="content">
 				<div class="header">
-					<h1>Three column</h1>
+					<h1>Page with columns</h1>
 				</div>
 				<div class="body three-column">
 
@@ -262,7 +276,7 @@ $(function(){
 			</div>
 		</div>
 		<!-- keep this last -->
-		<div class="title">Three Column</div>
+		<div class="title">Columns</div>
 	</div>