Initial upload

filamentgroup · Jan 17, 2012 · 1c65e34 · 1c65e34
commit 1c65e34
Show file tree

Hide file tree

Showing 15 changed files with 289 additions and 0 deletions.
diff --git a/README.md b/README.md
@@ -0,0 +1,10 @@
+Code Examples from the book [Designing with Progressive Enhancement](http://filamentgroup.com/dwpe)
+================================
+
+This repository includes open-sourced code developed and maintained by Filament Group, Inc. as part of the book "Designing With Progressive Enhancement" (Peachpit).
+
+Those who purchase the book can access all of the examples from the book at the following URL: http://filamentgroup.com/dwpe#codeexamples.
+
+All examples use the [jQuery JavaScript library](http://jquery.com).
+
+These code examples use the [EnhanceJS framework](https://github.com/filamentgroup/EnhanceJS) for applying progressive enhancement based on browser capabilities testing.
diff --git a/css/basic.css b/css/basic.css
@@ -0,0 +1,3 @@
+/* Page styles */
+body, input { font-family: "Segoe UI", Arial, sans-serif; }
+legend { font-weight: bold; }
diff --git a/css/enhanced.css b/css/enhanced.css
@@ -0,0 +1,25 @@
+/* Page styles */
+body { font-size:62.5%; }
+form { margin:20px 0; padding:3em 20px; border:2px solid #aaa; background:#fafafa; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; width:630px; }
+fieldset { border:0; margin:1em 0 0; border-top:1px dotted #aaa; }
+legend { font-size:2em; padding:0; margin:0; color:#222; }
+legend span { position:relative; top:-.1em; left:-10px; background:#fafafa; padding-right:10px; }
+label { font-size:1.6em; margin-right:15px; float:left; clear:left; width:130px; text-align:right; }
+.question { overflow:auto; padding:1.4em 0; }
+.slider-status { float:left; font-weight:bold; font-size:1.5em; color:#444; }
+input#price,input#bedrooms,input#baths { float:left; font-size:1.3em; font-weight:bold; width:55px; border:1px solid #ccc; -moz-border-radius:3px; -webkit-border-radius:3px; border-radius:3px; padding:.2em; }
+input#search { background:#666 url(../images/bg-button.png) 50% repeat-x; color:#fff; padding:.4em 1.3em; border:2px solid #444; font-size:1.7em; font-weight:bold; -moz-border-radius:1.3em; -webkit-border-radius:1.3em; border-radius:1.3em; cursor:pointer; margin:1em 0 0 150px; width: 200px; }
+input#search:hover { background-image:url(../images/bg-button-hover.png); }
+#subway,#water,#walking { display: none;}
+
+/* slider styles */
+.ui-slider { position:relative; top:.8em; width:293px; float:left; margin-right:15px; text-align:left; height:1em; background:#ebebec url(../images/bg-slider.png) top repeat-x; border:1px solid #aaa; -moz-border-radius:.5em; -webkit-border-radius:.5em; border-radius:.5em; }
+.ui-slider .ui-slider-handle { position:absolute; z-index:2; width:1.6em; height:1.6em; top:-.5em; margin-left:-.8em; cursor:pointer; border:2px solid #444; background:#fff url(../images/bg-slider-handle.png) 50% repeat-x; -moz-border-radius:.9em; -webkit-border-radius:.9em; border-radius:.9em; }
+.ui-slider .ui-slider-handle:hover,.ui-slider .ui-slider-handle:focus { background-image:url(../images/bg-slider-handle-hover.png); }
+.ui-slider .ui-slider-handle:active { background-image:none; }
+.ui-slider .ui-slider-range { position:absolute; z-index:1; font-size:.7em; display:block; border:0; top:0; height:100%; background:#999 url(../images/bg-slider-range.png) 50% repeat-x; left:0; }
+
+/*slider label key*/
+.sliders-labels { height:2em; margin-left:145px; width:293px; background:url(../images/bg-continuum.png) bottom left no-repeat; padding-top:1em; }
+.sliders-labels span.label-first { float:left; }
+.sliders-labels span.label-last { float:right; }
diff --git a/images/bg-button-hover.png b/images/bg-button-hover.png
diff --git a/images/bg-button.png b/images/bg-button.png
diff --git a/images/bg-continuum.png b/images/bg-continuum.png
diff --git a/images/bg-form.png b/images/bg-form.png
diff --git a/images/bg-slider-handle-hover.png b/images/bg-slider-handle-hover.png
diff --git a/images/bg-slider-handle.png b/images/bg-slider-handle.png
diff --git a/images/bg-slider-range.png b/images/bg-slider-range.png
diff --git a/images/bg-slider.png b/images/bg-slider.png
diff --git a/index.html b/index.html
@@ -0,0 +1,85 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
+	<title>Slider from input</title>
+	<link href="css/basic.css" type="text/css" rel="stylesheet" />
+	<script type="text/javascript" src="../-shared/EnhanceJS/enhance.js"></script>		
+	<script type="text/javascript">
+		// Run capabilities test
+		enhance({
+			loadScripts: [
+				'../-shared/jquery.min.js',
+				'../-shared/jqueryui.min.js',
+				'js/jQuery.peSlider.js',
+				'js/example.js'
+			],
+			loadStyles: [
+				'css/enhanced.css'
+			]
+		});   
+    </script>
+</head>
+<body>
+
+
+<form method="get" action="#">
+	<fieldset id="criteria">
+		<legend><span>Apartment Criteria</span></legend>
+
+		<div class="question">
+			<label for="price">Max Rent ($):</label>
+			<input type="number" name="price" id="price" value="2000" min="0" max="5000" size="4" data-units="dollars" />
+		</div>
+		<div class="question">
+			<label for="bedrooms">Min bedrooms:</label>
+			<input type="number" name="bedrooms" id="bedrooms" value="2" min="0" max="10" size="2" data-units="bedrooms" />
+		</div>
+		<div class="question">
+			<label for="baths">Min baths:</label>
+			<input type="number" name="baths" id="baths" value="2" min="0" max="10" size="2" data-units="baths" />
+		</div>
+	</fieldset>
+
+
+
+	<fieldset id="amenities">
+		<legend><span>Amenity Preferences</span></legend>	
+
+		<div class="question">
+			<label for="subway">Subway access:</label>
+			<select name="subway" id="subway">
+				<option value="a">Not important</option>
+				<option value="b">Somewhat important</option>
+				<option value="c">Pretty Important</option>
+				<option value="d">Must have</option>
+			</select>
+		</div>
+
+		<div class="question">
+			<label for="water">Water views:</label>
+			<select name="water" id="water">
+				<option value="a">Not important</option>
+				<option value="b">Somewhat important</option>
+				<option value="c">Pretty Important</option>
+				<option value="d">Must have</option>
+			</select>
+		</div>
+
+		<div class="question">
+			<label for="walking">Walking paths:</label>
+			<select name="walking" id="walking">
+				<option value="a">Not important</option>
+				<option value="b">Somewhat important</option>
+				<option value="c">Pretty Important</option>
+				<option value="d">Must have</option>
+			</select>
+		</div>
+	</fieldset>
+	<input type="submit" name="search" id="search" value="Search apartments" />
+</form>
+
+
+
+</body>
+</html>
diff --git a/js/example.js b/js/example.js
@@ -0,0 +1,28 @@
+// Run the script on DOM ready:
+$(function(){
+
+	//create input sliders
+	$('input#price').peSlider({range: 'min'});
+	$('input#bedrooms,input#baths').peSlider({range: 'min'});
+
+	//create select sliders
+	$('select')
+		.attr('aria-hidden','true')
+		.after('<div class="slider-status" aria-hidden="true"></div>')
+		.peSlider({
+			slide:function(e,ui){
+				$(this).next().next().text(  $(this).find('a:eq(0)').attr('aria-valuetext') );
+			}
+		})
+		.each(function(){
+			$(this).next().text(  $(this).prev().find('a:eq(0)').attr('aria-valuetext') );
+		});
+
+	//add select labels
+		$('<div class="sliders-labels" aria-hidden="true"><span class="label-first">'+ $('#subway option:first').text() +'</span><span class="label-last">'+ $('#subway option:last').text() +'</span></div>')
+			.insertAfter('#amenities legend');		
+
+});
+
+
+
diff --git a/js/jQuery.peSlider.js b/js/jQuery.peSlider.js
@@ -0,0 +1,117 @@
+/**
+ * --------------------------------------------------------------------
+ * jQuery peSlider plugin
+ * Author: Scott Jehl, [email protected]
+ * Copyright (c) 2009 Filament Group 
+ * licensed under MIT (filamentgroup.com/examples/mit-license.txt)
+ * --------------------------------------------------------------------
+ */
+$.fn.peSlider = function(settings){
+
+	//configurable options (none so far)
+	var o = $.extend({},settings);
+
+	if( !$('body').is('[role]') ){ $('body').attr('role','application'); }
+
+	return $(this).each(function(){
+		var thisLabel = $('label[for=' + $(this).attr('id') + ']').attr('id', $(this).attr('id') + '-label').attr('id');
+		var thisUnits = $(this).attr('data-units') || '';
+		var slider = $('<div></div>');
+
+		if( $(this).is('input') ){
+			var input = $(this);
+			var thisUnits = input.attr('data-units');
+			var friendlyVal = input.val() + ' ' + thisUnits;
+			var sliderOptions = $.extend(o,{
+				min: parseFloat(input.attr('min')),
+				max: parseFloat(input.attr('max')),
+				value: parseFloat(input.val())
+			});
+
+			slider
+				.insertBefore(input)
+				.slider(sliderOptions)
+				.bind('slide', function(e, ui){ 
+					input.val(ui.value); 
+					friendlyVal = input.val() + ' ' + thisUnits;
+					slider.find('a').attr({
+						'aria-valuenow': ui.value,
+						'aria-valuetext': friendlyVal,
+						'title': friendlyVal
+					});
+				})
+				.find('a')
+				.attr({
+					'role': 'slider',
+					'aria-valuemin': input.attr('min'),
+					'aria-valuemax': input.attr('max'),
+					'aria-valuenow': input.val(),
+					'aria-valuetext': friendlyVal,
+					'title': friendlyVal,
+					'aria-labelledby': thisLabel
+				});
+
+			input
+				.keyup(function(){ 
+					var inVal = parseFloat(input.val());
+					if( !isNaN(inVal) ){ 
+						slider.slider('value', inVal); 
+						input.val(slider.slider('value')); 
+					}				
+				})
+				.blur(function(){
+					var inVal = parseFloat(input.val());
+					if( isNaN(inVal) ){ 
+						input.val(0);
+					}				
+				});
+
+			if( !settings.step ){
+				var step = Math.round( parseFloat(input.attr('max')) / slider.width());
+				if(step > 1){ slider.slider('option','step',step); }
+			}
+
+		}
+		else {		
+			var select = $(this);
+			var friendlyVal = select.find('option').eq( select[0].selectedIndex ).text() + ' ' + thisUnits;
+			var sliderOptions = $.extend(o,{
+				min: 0,
+				max: select.find('option').length-1,
+				value: select[0].selectedIndex	
+			});
+
+			slider
+				.insertBefore(select)
+				.slider(sliderOptions)
+				.bind('slide', function(e, ui){ 
+					select[0].selectedIndex = ui.value; 
+					friendlyVal = select.find('option').eq( select[0].selectedIndex ).text() + ' ' + thisUnits;
+					slider.find('a').attr({
+						'aria-valuenow': ui.value,
+						'aria-valuetext': friendlyVal,
+						'title': friendlyVal
+					});
+				})
+				.find('a')
+				.attr({
+					'role': 'slider',
+					'aria-valuemin': 0,
+					'aria-valuemax': select.find('option').length-1,
+					'aria-valuenow': select[0].selectedIndex,
+					'aria-valuetext': friendlyVal,
+					'title': friendlyVal,
+					'aria-labelledby': thisLabel
+				});		
+
+			select.bind('keyup change', function(){ 
+				slider.slider('value',  select[0].selectedIndex); 
+			});			
+		}
+
+
+	});	
+};
+
+
+
diff --git a/license.txt b/license.txt
@@ -0,0 +1,21 @@
+The MIT License
+
+Copyright (c) 2010 Filament Group, Inc
+
+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.