editor.js

/* HELLO EVERYBODY!

This is the main source of the editor. 	
This was fairly easy to make, so you		
should be able to easily figure out what 
exactly is going on.		
											
Send questopms to me@stevencampbell.org

Also, if you use this anywhere, shoot me 
an email. I'd love to check it out.

/* THANK YOU :) */



/* SET THESE VARIABLES */
html_element_id = 'page';		// the ID of the HTML element that all the HTML code goes into.
editor_element_id = 'editor';	// the ID of the HTML element containing the editor
								// by default, <div id="editor"></div>
							
				


// This is jQuery UI giving us the awesome ability to so easily drag around the editor.
$(function() { $("#editor").draggable(); });


// This tab code came from here: http://www.sohtanaka.com/web-design/simple-tabs-w-css-jquery/
// Thanks Soh Tanaka! :)
$(document).ready(function() {
	$(".tab-content").hide(); //Hide all content
	$("ul.tabnav li:first").addClass("active").show(); //Activate first tab
	$(".tab-content:first").show(); //Show first tab content
	
	$("ul.tabnav li").click(function() {
		$("ul.tabnav li").removeClass("active"); //Remove any "active" class
		$(this).addClass("active"); //Add "active" class to selected tab
		$(".tab-content").hide(); //Hide all tab content
		var activeTab = $(this).find("a").attr("href"); //Find the rel attribute value to identify the active tab + content
		$(activeTab).show(); // Show active tab
		return false;
	});
});

// css_file is the CSS "file" generated by Javascript
// html_page simply keeps track of the element all the HTML goes into
var css_file = document.createElement('style');
var html_page = document.getElementById(html_element_id);

// This updates the CSS code. The magic is in appendChild()
function update_css() {
	css_file.innerHTML = document.getElementById('cssinput').value;
	document.body.appendChild(css_file);
}

// If you want to have some "demo" CSS, set it to css_file.innerHTML and call onclick="demo_css()"
// This function was used while testing, and I thought I might leave it in if anyone found a use for it
function demo_css() {
	css_file.innerHTML = '';
	document.getElementById('cssinput').innerHTML = css_file.innerHTML;
	document.body.appendChild(css_file);
}

// This single-line function updates the HTML. PRETTY STRAIGHTFORWARD STUFF, you guys!
function update_html() {
	document.getElementById('page').innerHTML = document.getElementById('htmlinput').value;
}

// Sets initial HTML and CSS
function init() {

	css_file.innerHTML = 'body { \ncolor: #ccc; \nmargin: 50px; \nfont: 32px "Helvetica"; \nfont-weight: bold; \n}\n\nh1 { color: #000; font-size: 2em; }\n\na { color: #347489; }\n\na:hover { text-decoration: underline; } .infobox {\ndisplay: block;\nwidth: 600px;\nfont-size: 20px;\nfont-weight: normal;\nmargin: 40px 20px;\ncolor: #444;\n}\n\n.infobox p { margin-bottom: 25px; }';
	html_text = '<h1>Four Organs Editor</h1>\n<h2>By <a href="http://stevencampbell.org">Steven Campbell</a></h2>\n\n<div class="infobox">\n<p><strong>Four Organs Editor</strong>, named after <a href="http://en.wikipedia.org/wiki/Four_Organs">a famous Steve Reich piece</a>, is a very simple HTML and CSS editor.</p>\n<p>You can use the source in whatever projects you want, so long as you attribute me by linking <a href="http://stevencampbell.org/projects/four_organs/">back here</a>, or to <a href="http://stevencampbell.org/">my site</a>. The source can be found on <strong><a href="https://github.com/enceladus/four_organs">GitHub</a></strong>.</p>\n<p>This application was made possible by <a href="http://jquery.com/">jQuery</a> and <a href="http://jqueryui.com/">jQuery UI</a>.</p>\n</div>';
	
	// These lines take the above HTML and CSS code and apply it as like the update_*() functions above
	document.body.appendChild(css_file);
	document.getElementById('cssinput').innerHTML = css_file.innerHTML;
	document.getElementById('htmlinput').innerHTML = html_text;
	document.getElementById('page').innerHTML = document.getElementById('htmlinput').value;
}

// That's it! :)