Refactor to use the new library structure convention.

2011-07-15 08:15:31 -03:00
parent 4a87d5822b
commit 9dd1439a2f
92 changed files with 40 additions and 217 deletions
--- a/example/SimpleWebServer/webroot/demo2/demo.html
+++ b/example/SimpleWebServer/webroot/demo2/demo.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+<title>Halftone Navigation Menu With jQuery &amp; CSS3 | Tutorialzine demo</title>
+
+<link rel="stylesheet" type="text/css" href="styles.css" />
+
+<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
+
+<script type="text/javascript" src="script.js"></script>
+
+</head>
+
+<body>
+
+<h1>Halftone Navigation Menu With jQuery &amp; CSS3</h1>
+<h2>View the <a href="http://tutorialzine.com/2010/01/halftone-navigation-menu-jquery-css/">original tutorial &raquo;</a></h2>
+
+
+<div id="main">
+	
+ <div id="navigation">
+     <ul class="menuUL">
+	     <!-- The class names that are assigned to the links correspond to name of the shape that is shown on hover: -->
+         <li><a href="#" class="house">Home</a></li>
+         <li><a href="#" class="wrench">Services</a></li>
+         <li><a href="#" class="envelope">Contact</a></li>
+         <li><a href="#" class="info">About</a></li>
+     </ul>
+     <div class="clear"></div>
+ </div>
+
+    <div id="stage">
+    <!-- The dot divs are shown here -->
+    </div>
+</div>
+
+<p class="tutInfo">This is a tutorialzine demo. View the <a href="http://tutorialzine.com/2010/01/halftone-navigation-menu-jquery-css/">original tutorial</a>, or download the <a href="demo.zip">source files</a>.</p>
+
+
+</body>
+</html>
--- a/example/SimpleWebServer/webroot/demo2/img/background.jpg
+++ b/example/SimpleWebServer/webroot/demo2/img/background.jpg
--- a/example/SimpleWebServer/webroot/demo2/img/button_bg.jpg
+++ b/example/SimpleWebServer/webroot/demo2/img/button_bg.jpg
--- a/example/SimpleWebServer/webroot/demo2/img/dot.png
+++ b/example/SimpleWebServer/webroot/demo2/img/dot.png
--- a/example/SimpleWebServer/webroot/demo2/script.js
+++ b/example/SimpleWebServer/webroot/demo2/script.js
@@ -0,0 +1,121 @@
+/* Set serviceMode to true to create your own shapes: */
+var serviceMode = false;
+
+$(document).ready(function(){
+	/* This code is executed after the DOM has been completely loaded */
+
+	var str=[];
+	var perRow = 16;
+	
+	/* Generating the dot divs: */
+	
+	for(var i=0;i<192;i++)
+	{
+		str.push('<div class="dot" id="d-'+i+'" />');
+	}
+	
+	/* Joining the array into a string and adding it to the inner html of the stage div: */
+	
+	$('#stage').html(str.join(''));
+	
+	/* Using the hover method: */
+
+	$('#navigation li a').hover(function(e){
+	
+		/* serviceDraw is a cut-out version of the draw function, used for shape editing and composing: */
+		
+		if(serviceMode)
+			serviceDraw($(this).attr('class'));
+		else
+			draw($(this).attr('class'));
+	}, function(e){
+		
+	});
+	
+	/* Caching the dot divs into a variable for performance: */
+	dots = $('.dot');
+	
+	if(serviceMode)
+	{
+		/* If we are in service mode, show borders around the dot divs, add the export link, and listen for clicks: */
+		
+		dots.css({
+			border:'1px solid black',
+			width:dots.eq(0).width()-2,
+			height:dots.eq(0).height()-2,
+			cursor:'pointer'
+		})
+		
+		$('<div/>').css({
+			position:'absolute',
+			bottom:-20,
+			right:0
+		}).html('<a href="" onclick="outputString();return false;">[Export Shape]</a>').appendTo('#stage');
+		
+		dots.click(function(){
+			$(this).toggleClass('active');
+		});
+	}
+	
+});
+
+var shapes={
+	
+	/* Each shape is described by an array of points. You can add your own shapes here,
+	   just don't forget to add a coma after each array, except for the last one */
+	
+	house:[22,37,38,39,52,53,54,55,56,67,68,69,70,71,72,73,82,83,84,85,86,87,88,89,90,99,100,104,105,115,116,120,121,131,132,136,137,147,148,150,151,152,153,163,164,166,167,168,169],
+	wrench:[22,23,24,25,26,27,38,39,40,41,42,43,54,55,58,59,70,71,86,87,88,89,101,102,103,104,105,116,117,118,131,132,133,146,147,148,163],
+	envelope:[34,35,36,37,38,39,40,41,42,43,44,50,51,52,58,59,60,66,68,69,73,74,76,82,85,86,88,89,92,98,102,103,104,108,114,119,124,130,140,146,147,148,149,150,151,152,153,154,155,156],
+	info:[22,23,38,39,69,70,71,86,87,102,103,118,119,134,135,150,151,166,167,168]
+}
+
+var stopCounter = 0;
+var dots;
+
+function draw(shape)
+{
+	/* This function draws a shape from the shapes object */
+	
+	stopCounter++;
+	var currentCounter = stopCounter;
+
+	dots.removeClass('active').css('opacity',0);
+	
+	$.each(shapes[shape],function(i,j){
+		setTimeout(function(){
+							
+			/* If a different shape animaton has been started during the showing of the current one, exit the function  */
+			if(currentCounter!=stopCounter) return false;
+			
+			dots.eq(j).addClass('active').fadeTo('slow',0.4);
+			
+			/* The fade animation is scheduled for 10*i millisecond in the future: */
+		},10*i);
+
+	});
+}
+
+function serviceDraw(shape)
+{
+	/* A cut out version of the draw function, used in service mode */
+	
+	dots.removeClass('active');
+	
+	$.each(shapes[shape],function(i,j){
+		dots.eq(j).addClass('active');
+	});
+}
+
+function outputString()
+{
+	/* Outputs the positions of the active dot divs as a comma-separated string: */
+	
+	var str=[];
+	$('.dot.active').each(function(){
+		
+		str.push(this.id.replace('d-',''));
+	})
+	
+	prompt('Insert this string as an array in the shapes object',str.join(','));
+}
--- a/example/SimpleWebServer/webroot/demo2/styles.css
+++ b/example/SimpleWebServer/webroot/demo2/styles.css
@@ -0,0 +1,148 @@
+body,h1,h2,h3,p,quote,small,form,input,ul,li,ol,label{
+	/* Simple page reset */
+	margin:0;
+	padding:0;
+}
+
+body{
+	/* Setting default text color, background and a font stack */
+	color:#cccccc;
+	font-size:0.825em;
+	background: url(img/background.jpg) no-repeat center top #252525;
+	font-family:Arial, Helvetica, sans-serif;
+}
+
+.menuUL li{
+	/* This will arrange the LI-s next to each other */
+	display:inline;
+}
+
+.menuUL li a,.menuUL li a:visited{
+	/* Styling the hyperlinks of the menu as buttons */
+	
+	float:left;
+	font-weight:bold;
+	background:url(img/button_bg.jpg) repeat-x center bottom #666666;
+	
+	/* display:block allows for additinal CSS rules to take effect, such as paddings: */
+	display:block;
+	border:1px solid #4D4D4D;
+	color:#CCCCCC;
+	border-top-color:#565656;
+	
+	padding:4px 6px;
+	margin:4px 5px;
+	height:16px;
+	
+	
+	/* Setting a CSS3 box shadow around the button */
+	
+	-moz-box-shadow:0 0 1px black;
+	-webkit-box-shadow:0 0 1px black;
+	box-shadow:0 0 1px black;
+	
+	/* CSS3 text shadow */
+	text-shadow:0 1px black;
+}
+
+.menuUL li a:hover{
+	/* On hover show the top, lighter, part of the background: */
+	background-position:center top;
+	text-decoration:none;
+}
+
+#navigation{
+	/* The navigation menu bar: */
+	background:#222222;
+	border:1px solid #111111;
+	float:left;
+	padding:5px 10px;
+}
+
+#navigation,.menuUL li a{
+	/* CSS3 rounded corners for both the navigation bar and the buttons: */
+	-moz-border-radius:4px;
+	-webkit-border-radius:4px;
+	-khtml-border-radius:4px;
+	border-radius:4px;
+}
+
+#stage{
+	/* The stage contains the individual divs that comprise the halftone icon: */
+	height:300px;
+	position:absolute;
+	right:50px;
+	top:20px;
+	width:400px;
+}
+
+.dot{
+	/* The stage contains 192 .dot divs: */
+	float:left;
+	height:25px;
+	width:25px;
+}
+
+.dot.active{
+	/* When assigned the active class, the div shows a background image of a dot: */
+	background:url(img/dot.png) no-repeat center center;
+}
+
+.clear{
+	/* Old-school clear fix hack to clear the floats: */
+	clear:both;
+}
+
+#main{
+	margin:0 auto;
+	position:relative;
+	width:900px;
+}
+
+/* The styles below are only necessary for the demo page */
+
+h1{
+	background:#222222;
+	border-bottom:1px solid black;
+	font-size:1.5em;
+	font-weight:normal;
+	margin-bottom:15px;
+	padding:15px;
+	text-align:center;
+}
+
+h2 {
+	font-size:0.9em;
+	font-weight:normal;
+	padding-right:40px;
+	position:relative;
+	right:0;
+	text-align:right;
+	text-transform:uppercase;
+	top:-48px;
+}
+
+a, a:visited {
+	color:#0196e3;
+	text-decoration:none;
+	outline:none;
+}
+
+a:hover{
+	text-decoration:underline;
+}
+
+p.tutInfo{
+	/* The tutorial info on the bottom of the page */
+	padding:10px 0;
+	text-align:center;
+	position:absolute;
+	bottom:0px;
+	background:#222222;
+	border-top:1px solid black;
+	width:100%;
+}
+
+h1,h2,p.tutInfo{
+	font-family:"Myriad Pro",Arial,Helvetica,sans-serif;
+}