Simple Notepad Demo (Save/Import Files as well)

1 post Page 1 of 1
Contributors
User avatar
mikethedj4
VIP - Site Partner
VIP - Site Partner
Posts: 2592
Joined: Thu Mar 25, 2010 4:36 am

Screenshot:
notepad.png
How This Works!
First goal is for cross platform compatibility with a good looking UI. So I went with JQuery Mobile so the UI is appropriate for mobile users as well. Second content box/div of JQuery Mobile had to be fixed to fit the users height of the page. Third was navigation being able to import files locally on the users computer without a server, and save the same way. A little CSS to have the textbox fill the area and then BAM! A simple notepad!

This notepad will also allow you to use the tab button for indentations as well. So go through the code, experiment, and have fun.

Full Code:
Code: Select all
<!DOCTYPE html>
<html>
<head>
<title>Simple Notepad Demo</title>
<meta name='Description' content="A simple web based notepad demo.">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv='Content-Type' charset='utf-8' content='text/html;charset=ISO-8859-1'>
<meta name='Keywords' content='simple, web, based, notepad, demo'>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
<style type="text/css">
body {
	padding:0px;
	margin:0px;}
	
textarea#notepad, textarea#notepad:focus {
	display:block;
	margin:0px;
	padding:0px;
	width:100%;
	height:100%;
	border:0px;
	font-family:monospace;
	line-height:1;
	min-height:1.4em;
	line-height:1.4em;
	font-size:1em;
	border-radius:0px;
	resize:none;}
</style>
<script type="text/javascript">
$(function() {
	var fixgeometry = function() {
	  /* Some orientation changes leave the scroll position at something
	   * that isn't 0,0. This is annoying for user experience. */
	  scroll(0, 0);

	  /* Calculate the geometry that our content area should take */
	  var header = $(".header:visible");
	  var footer = $(".footer:visible");
	  var content = $(".content:visible");
	  var viewport_height = $(window).height();
	  
	  var content_height = viewport_height - header.outerHeight() - footer.outerHeight();
	  
	  /* Trim margin/border/padding height */
	  content_height -= (content.outerHeight() - content.height());
	  content.height(content_height);
	}; /* fixgeometry */

	$(document).ready(function() {
		$(window).bind("orientationchange resize pageshow", fixgeometry);
	});
	
	// Using the <TAB>
	$('textarea.tab').keydown(function(e) {
		if(e.keyCode == 9) {
		  var start = $(this).get(0).selectionStart;
		  $(this).val($(this).val().substring(0, start) + "\t" + $(this).val().substring($(this).get(0).selectionEnd));
		  $(this).get(0).selectionStart = $(this).get(0).selectionEnd = start + 1;
		  return false;}
	});

	// Using Spaces
	$('textarea.space').keydown(function(e) {
		if(e.keyCode == 9) {
		  var start = $(this).get(0).selectionStart;
		  $(this).val($(this).val().substring(0, start) + "    " + $(this).val().substring($(this).get(0).selectionEnd));
		  $(this).get(0).selectionStart = $(this).get(0).selectionEnd = start + 4;
		  return false;}
	});
	
	$('a#cleardoc').click(ClearDoc);
	$('a#restartapp').click(RestartApp);
  
	// Clear Doc
	function ClearDoc() {
		$("textarea#notepad").val("");
		$("[ID$=preview]").html($('#notepad').val());}
		
	// Restarts The Application
	function RestartApp() {
		location.reload(true);
		$("[ID$=preview]").html($('#notepad').val());}
});

// Save Doc as HTML File
function saveTextAsFile() {
	var textToWrite = document.getElementById("notepad").value;
	var textFileAsBlob = new Blob([textToWrite], {type:'text/plain'});
	var fileNameToSaveAs = "myfile.txt";

	var downloadLink = document.createElement("a");
	downloadLink.download = fileNameToSaveAs;
	downloadLink.innerHTML = "Download File";
	if (window.webkitURL != null)
	{
		// Chrome allows the link to be clicked
		// without actually adding it to the DOM.
		downloadLink.href = window.webkitURL.createObjectURL(textFileAsBlob);
	}
	else
	{
		// Firefox requires the link to be added to the DOM
		// before it can be clicked.
		downloadLink.href = window.URL.createObjectURL(textFileAsBlob);
		downloadLink.onclick = destroyClickedElement;
		downloadLink.style.display = "none";
		document.body.appendChild(downloadLink);
	}

	downloadLink.click();}

function destroyClickedElement(event) {
	document.body.removeChild(event.target);}
	
// Load File into Editor
function loadfile(input){
    var reader = new FileReader();
    reader.onload = function(e) {
        document.getElementById('notepad').value = e.target.result;
    }
    reader.readAsText(input.files[0]);}
</script>
<head>
<body>
	<div data-role='page'>
		<div id="menupanel" data-role="panel" data-position="right" data-display="overlay">
			<ul ui="mainmenu" data-role="listview">
				<li data-icon="false" class="ui-disabled" style="display:none;"><input type="file" onchange="loadfile(this)"></li>
				
				<li data-icon="false"><input type="file" onchange="loadfile(this)"></li>
				<li data-icon="false"><a href="#my-header" id='cleardoc'>Clear</a></li>
				<li data-icon="false"><a href="#my-header" id='restartapp'>Restart</a></li>
				<li data-icon="false"><a href="#my-header" onclick='saveTextAsFile()'>Save/Download</a></li>
				<li data-icon="false"><a href="#my-header" data-rel="close">Close panel</a></li>
			</ul>
		</div><!-- /panel -->

		<div class='header' id="head1" data-role='header' data-theme="c">
			<h1>Simple Notepad Demo</h1>
			<a href="#menupanel" data-role="button" data-icon="bars" data-iconpos="notext" data-inline="true" class="ui-btn-right">Bars</a>
		</div>
		
		<div class='content' data-role='content'>
			<textarea id="notepad" class="space"></textarea>
		</div>
	</div>
</body>
</html>
You do not have the required permissions to view the files attached to this post.
1 post Page 1 of 1
Return to “Tutorials”