Adding LESS field for patterns with live LESS -> CSS compiling

css/screen.less

@@ -209,6 +209,7 @@ div.mod h4 span.sep {
 	color: #bbb;
 	}
 div.mod a.clip {
+	clear:left;
 	float: left;
 	margin: 2px 0 0 10px;
 	opacity: 0;
@@ -225,15 +226,19 @@ div#pattern.mod div#pattern-wrap {
 	padding: 20px 60px;
 	}
 div#markup.mod {
-	float: left;
-	width: 49%;
+
 	background: rgba(255,255,255,.6);
 	}
 div#style.mod {
 	float: right;
 	width: 49%;
 	background: rgba(255,255,255,.6);
 	}
+div#prestyle.mod {
+	float: left;
+	width: 49%;
+	background: rgba(255,255,255,.6);
+	}
 div.mod textarea.mod-ta {	
 	width: 100%;
 	border: none;
@@ -320,8 +325,9 @@ body.expanded #nav-toggle {
 	font-weight: normal;
 	text-transform: uppercase;
 	letter-spacing: 2px;
+	color: #fff;
 	}
-#nav h2 a {
+#nav h2 a{
 	color: #fff;
 	}
 #nav ul {
@@ -350,7 +356,15 @@ body.expanded #nav-toggle {
 	color: rgba(255,255,255,.8);
 	background: rgba(255,255,255,.1);
 	}
-
+
+/* primary widgets 
+--------------------------------------------- */
+
+#primary {
+	width: 160px;
+	margin: 42px 0 0;
+	}
+
 /* footer 
 --------------------------------------------- */
 
@@ -399,6 +413,10 @@ a img {
     visibility: hidden;
     }
 
+.page-id-16 #style {
+	display:none;
+}
+
 /* IE patches 
 --------------------------------------------- */
 

footer.php

@@ -2,42 +2,103 @@
 </div> <!-- /wrap -->
 
 <div id="pears-footer">
-	<p>Pears is handcrafted in Salem, Massachusetts by <a href="http://simplebits.com">SimpleBits</a>.</p>
+	<p>Pears is handcrafted in Salem, Massachusetts by <a href="http://simplebits.com">SimpleBits</a>. LESS &amp; highlighting by <a href="http://circlecube.com">circlecube</a>.</p>
 
 	<p class="cc">This work is licensed under a <a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/3.0/">Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License</a>.</p>
 
-	<p><a href="http://simplebits.com" id="sb"><img src="/wp-content/themes/pears/images/sb-black.png" /></a></p>
 </div> <!-- /footer -->
 
 <!-- jQuery -->
-<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>
+<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
+<script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/js/jquery.color.js"></script>
+<script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/js/CodeMirror-2.21/lib/codemirror.js"></script>
+<script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/js/CodeMirror-2.21/mode/less/less.js"></script>
+<script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/js/CodeMirror-2.21/mode/css/css.js"></script>
+<script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/js/CodeMirror-2.21/mode/xml/xml.js"></script>
 
 <script>
-$(document).ready(function() { 
+$(document).ready(function() {
+	less_to_css();
+
 	// update rendered pattern when user edits the textareas
 	$('#markup textarea').live('keyup', function(e) {
-		$('#pattern-wrap').html($(this).val());
+		html_editor.save();
+		$('#pattern-wrap').html($('#html-code').val());
+	});
+	$('#prestyle textarea').live('keyup', function(e) {
+		less_to_css();
 	});
+
 	$('#style textarea').live('keyup', function(e) {
-		$('div.main style').html($(this).val());
+		css_editor.save();
+		$('div.main style').html($('#css-code').val());
 	});
 
+
 	// auto-select code in textarea when clipboard icon is clicked
 	$('#markup a.clip').click(function(){
-		$('#markup textarea').select();
+		html_editor.setSelection({line:0,ch:0}, {line:html_editor.lineCount(), ch:null});
+		html_editor.focus();
+		return false;
+	});
+	$('#prestyle a.clip').click(function(){
+		less_editor.setSelection({line:0,ch:0}, {line:less_editor.lineCount(), ch:null});
+		less_editor.focus();
 		return false;
 	});
 	$('#style a.clip').click(function(){
-		$('#style textarea').select();
+		css_editor.setSelection({line:0,ch:0}, {line:css_editor.lineCount(), ch:null});
+		css_editor.focus();
 		return false;
 	});
+
 
 	// expand/collapse side nav
 	$('#nav-toggle').click(function() {
 		$('body').toggleClass('expanded');
 		return false;
 	});
-}); 
+});
+
+//code hinting
+var css_editor = CodeMirror.fromTextArea(document.getElementById("css-code"), {mode: 'css', lineWrapping: true, lineNumbers: true});
+var less_editor = CodeMirror.fromTextArea(document.getElementById("less-code"), {mode: 'less', lineWrapping: true, lineNumbers: true});
+var html_editor = CodeMirror.fromTextArea(document.getElementById("html-code"), {mode: 'xml', lineWrapping: true, lineNumbers: true});
+
+function less_to_css(){
+	less_editor.save();
+		//process the less content into css,
+		var less_data = $('#global_mixins').val() + "\n " + $('#less-code').val();
+		try{
+			new(less.Parser)().parse(less_data, function (e, tree) {
+
+
+				var css_data = tree.toCSS();
+				//copy it into the css textarea and
+				if (css_data != "") {
+					$('#style textarea').val(css_data);
+					css_editor.setValue(css_data);
+					//copy it into the css textarea and apply the styles.
+					$('div.main style').html(css_data);
+
+					//user feedback
+					$('#style').animate( { 'background-color': 'rgba(161, 207, 50, 0.6)' }, {queue:false,  duration:800, complete: function(){
+						$('#style').animate( { 'background-color': 'rgba(255, 255, 255, 0.6)' }, {queue:false,  duration:800 });  
+					}} );
+					$('#prestyle').animate( { 'background-color': 'rgba(255, 255, 255, 0.6)' }, {queue:false,  duration:800 });
+
+				}
+			else{
+				throw(err);
+			}
+		});
+		} catch (err){ 
+			//alert(err);
+			//user feedback
+			$('#prestyle').animate( { 'background-color': 'rgba(114, 11, 9, 0.6)' }, {queue:false,  duration:800 } ); 
+		}
+}
+
 </script>
 
 <!-- c(~) -->

functions.php

@@ -528,12 +528,15 @@ function pears_meta_box( $post ) {
 
   	$html = get_post_meta($post->ID,'html',true);
   	$css = get_post_meta($post->ID,'css',true);
+  	$less = get_post_meta($post->ID,'less',true);
 
 	echo '<p>These fields are for the HTML markup and CSS styles.  The post body can be used for notes.</p>';
 	echo '<label for="html">HTML</label>';
   	echo '<p><textarea id="html" name="html" rows="20" cols="90" />' . $html . '</textarea></p>';
-	echo '<label for="css">CSS</label>	';
-  	echo '<p><textarea id="css" name="css" rows="20" cols="90" />' . $css . '</textarea></p>';
+	echo '<label for="less">LESS/CSS</label>	';
+  	echo '<p><textarea id="less" name="less" rows="20" cols="90" />' . $less . '</textarea></p>';
+	//echo '<label for="css">CSS</label>	';
+  	//echo '<p><textarea id="css" name="css" rows="20" cols="90" />' . $css . '</textarea></p>';
 }
 
 function pears_save_post( $post_id ) {
@@ -559,6 +562,9 @@ function pears_save_post( $post_id ) {
   	$html_data = $_POST['html'];
 	update_post_meta($post_id, 'html', $html_data);
 
-	$css_data = $_POST['css'];
-	update_post_meta($post_id, 'css', $css_data);
+	//$css_data = $_POST['css'];
+	//update_post_meta($post_id, 'css', $css_data);
+
+	$less_data = $_POST['less'];
+	update_post_meta($post_id, 'less', $less_data);
 }

header.php

@@ -1,14 +1,16 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-<title>Pears <?php wp_title('/', true, 'left'); ?></title>
+<title><?php bloginfo('name'); ?> <?php wp_title(); ?></title>
 
 <meta charset="utf-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0" />
 
 <!-- hide css from IE6 but load for everyone else -->
 <!--[if gte IE 7]><!-->
 <link rel="stylesheet/less" media="screen, projection" href="<?php echo get_template_directory_uri(); ?>/css/screen.less" />
+<link rel="stylesheet/less" media="screen, projection" href="<?php echo get_template_directory_uri(); ?>/js/CodeMirror-2.21/lib/codemirror.css" />
+
 <!-- <![endif]-->
 
 <link rel="shortcut icon" href="/favicon.png" /> 

js/CodeMirror-2.21/LICENSE

@@ -0,0 +1,23 @@
+Copyright (C) 2011 by Marijn Haverbeke <[email protected]>
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.
+
+Please note that some subdirectories of the CodeMirror distribution
+include their own LICENSE files, and are released under different
+licences.

js/CodeMirror-2.21/README.md

@@ -0,0 +1,6 @@
+# CodeMirror 2
+
+CodeMirror 2 is a rewrite of [CodeMirror
+1](http://github.com/marijnh/CodeMirror). The docs live
+[here](http://codemirror.net/doc/manual.html), and the project page is
+[http://codemirror.net/](http://codemirror.net/).

js/CodeMirror-2.21/demo/activeline.html

@@ -0,0 +1,72 @@
+<!doctype html>
+<html>
+  <head>
+    <title>CodeMirror: Active Line Demo</title>
+    <link rel="stylesheet" href="../lib/codemirror.css">
+    <script src="../lib/codemirror.js"></script>
+    <script src="../mode/xml/xml.js"></script>
+    <link rel="stylesheet" href="../doc/docs.css">
+
+    <style type="text/css">
+      .CodeMirror {border-top: 1px solid black; border-bottom: 1px solid black;}
+      .activeline {background: #e8f2ff !important;}
+    </style>
+  </head>
+  <body>
+    <h1>CodeMirror: Active Line Demo</h1>
+
+    <form><textarea id="code" name="code">
+<?xml version="1.0" encoding="UTF-8"?>
+<rss xmlns:atom="http://www.w3.org/2005/Atom" version="2.0"
+     xmlns:georss="http://www.georss.org/georss"
+     xmlns:twitter="http://api.twitter.com">
+  <channel>
+    <title>Twitter / codemirror</title>
+    <link>http://twitter.com/codemirror</link>
+    <atom:link type="application/rss+xml"
+               href="http://twitter.com/statuses/user_timeline/242283288.rss" rel="self"/>
+    <description>Twitter updates from CodeMirror / codemirror.</description>
+    <language>en-us</language>
+    <ttl>40</ttl>
+  <item>
+    <title>codemirror: http://cloud-ide.com &#8212; they're springing up like mushrooms. This one
+      uses CodeMirror as its editor.</title>
+    <description>codemirror: http://cloud-ide.com &#8212; they're springing up like mushrooms. This
+      one uses CodeMirror as its editor.</description>
+    <pubDate>Thu, 17 Mar 2011 23:34:47 +0000</pubDate>
+    <guid>http://twitter.com/codemirror/statuses/48527733722058752</guid>
+    <link>http://twitter.com/codemirror/statuses/48527733722058752</link>
+    <twitter:source>web</twitter:source>
+    <twitter:place/>
+  </item>
+  <item>
+    <title>codemirror: Posted a description of the CodeMirror 2 internals at
+      http://codemirror.net/2/internals.html</title>
+    <description>codemirror: Posted a description of the CodeMirror 2 internals at
+      http://codemirror.net/2/internals.html</description>
+    <pubDate>Wed, 02 Mar 2011 12:15:09 +0000</pubDate>
+    <guid>http://twitter.com/codemirror/statuses/42920879788789760</guid>
+    <link>http://twitter.com/codemirror/statuses/42920879788789760</link>
+    <twitter:source>web</twitter:source>
+    <twitter:place/>
+  </item>
+  </channel>
+</rss></textarea></form>
+
+    <script>
+var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
+  mode: "application/xml",
+  lineNumbers: true,
+  lineWrapping: true,
+  onCursorActivity: function() {
+    editor.setLineClass(hlLine, null);
+    hlLine = editor.setLineClass(editor.getCursor().line, "activeline");
+  }
+});
+var hlLine = editor.setLineClass(0, "activeline");
+</script>
+
+    <p>Styling the current cursor line.</p>
+
+  </body>
+</html>

js/CodeMirror-2.21/demo/changemode.html

@@ -0,0 +1,50 @@
+<!doctype html>
+<html>
+  <head>
+    <title>CodeMirror: Mode-Changing Demo</title>
+    <link rel="stylesheet" href="../lib/codemirror.css">
+    <script src="../lib/codemirror.js"></script>
+    <script src="../mode/javascript/javascript.js"></script>
+    <script src="../mode/scheme/scheme.js"></script>
+    <link rel="stylesheet" href="../doc/docs.css">
+
+    <style type="text/css">
+      .CodeMirror {border: 1px solid black;}
+    </style>
+  </head>
+  <body>
+    <h1>CodeMirror: Mode-Changing demo</h1>
+
+    <form><textarea id="code" name="code">
+;; If there is Scheme code in here, the editor will be in Scheme mode.
+;; If you put in JS instead, it'll switch to JS mode.
+
+(define (double x)
+  (* x x))
+</textarea></form>
+
+<p>On changes to the content of the above editor, a (crude) script
+tries to auto-detect the language used, and switches the editor to
+either JavaScript or Scheme mode based on that.</p>
+
+<script>
+  var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
+    mode: "scheme",
+    lineNumbers: true,
+    matchBrackets: true,
+    tabMode: "indent",
+    onChange: function() {
+      clearTimeout(pending);
+      setTimeout(update, 400);
+    }
+  });
+  var pending;
+  function looksLikeScheme(code) {
+    return !/^\s*\(\s*function\b/.test(code) && /^\s*[;\(]/.test(code);
+  }
+  function update() {
+    editor.setOption("mode", looksLikeScheme(editor.getValue()) ? "scheme" : "javascript");
+  }
+</script>
+  </body>
+</html>