gallery-2010.12.01-21-32 daithiw44 gallery-timespinner

derek · Dec 1, 2010 · 850978b · 850978b
1 parent b7f297e
commit 850978b
Show file tree

Hide file tree

Showing 5 changed files with 762 additions and 0 deletions.
diff --git a/src/gallery-timespinner/build.properties b/src/gallery-timespinner/build.properties
@@ -0,0 +1,27 @@
+# Time Spinner Build Properties
+
+# As long as the 'builder' project is cloned to the default folder
+# next to the 'yui3-gallery' project folder, the 'builddir' property does not 
+# need to be changed
+#
+# If the 'builder' project is checked out to an alternate location, this
+# property should be updated to point to the checkout location.
+builddir=../../../builder/componentbuild
+
+# The name of the component. E.g. event, attribute, widget 
+component=gallery-timespinner
+
+# The list of files which should be concatenated to create the component.
+# NOTE: For a css component (e.g. cssfonts, cssgrids etc.) use component.cssfiles instead. 
+# component.jsfiles=timespinner.js, timespinnerHelperClass.js, timespinnerSubComponentClass.js
+component.jsfiles=gallery-timespinner.js
+
+# The list of modules this component requires. Used to set up the Y.add module call for YUI 3.
+component.requires=widget,node-focusmanager
+
+# The list of modules this component supersedes. Used to set up the Y.add module call for YUI 3.
+component.supersedes=
+
+# The list of modules that are optional for this module. Used to set up the Y.add module call for YUI 3.
+component.optional=
+
diff --git a/src/gallery-timespinner/build.xml b/src/gallery-timespinner/build.xml
@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- YUI 3 Gallery Component Build File -->
+<project name="Time Spinner" default="local">
+    <description>Time Spinner Build File</description>
+    <property file="build.properties" />
+    <import file="${builddir}/3.x/bootstrap.xml" description="Default Build Properties and Targets" />
+</project>
diff --git a/src/gallery-timespinner/css/gallery-timespinner.css b/src/gallery-timespinner/css/gallery-timespinner.css
diff --git a/src/gallery-timespinner/example/time_spinner.html b/src/gallery-timespinner/example/time_spinner.html
@@ -0,0 +1,210 @@
+<html>
+<head>
+<title>Time Spinner</title>
+
+<style type="text/css">
+/*margin and padding on body element
+  can introduce errors in determining
+  element position and are not recommended;
+  we turn them off as a foundation for YUI
+  CSS treatments. */
+body {
+	margin:10;
+	padding:0;
+}
+</style>
+<link rel="stylesheet" type="text/css" href="css/gallery-timespinner.css">
+</head>
+
+<body class="yui-skin-sam">
+<h3>Time Spinner Config.</h3>
+<p>var timespinner = new Y.TimeSpinner{... </p>
+<p>
+	hourtype:'12', <span>'hourtype' is either 12 or 24 hr format.</span> <br/>
+	separator:':',  <span>'separator' the separator to be used in between hh:mm:ss.</span><br/>
+	seconds:true,  <span>'seconds' true or false as wether or not ss are required.</span><br/>
+	timepsan:{required:true,sep:' - '},  <span>'timepsan' true or false and the spearator to be used.</span><br/>
+	holder:'#..'  <span>the id of the element to where the time spinner will be drawn.</span><br/>
+
+<p>
+<h3>Time Spinner Examples</h3>
+<p>
+Time Spinner <br/>
+12 hour clock, with seconds, with a time span.
+</p>
+<p>
+var timespinner = new Y.TimeSpinner({
+       hourtype:'12',
+       separator:':',
+       seconds:true,
+       timepsan:{required:true,sep:' - '},
+	   holder:'#boxd'
+    });
+    timespinner.render();
+    timespinner.focus();
+
+</p>
+<div id="boxd"></div>
+<input type=button id="button" value="GetValue TS"/>
+<p>To get the value of the time spinner. 'timespinner.getValue();'</p>
+<br/><br/>
+
+<p>
+Time Spinner 1. <br/>
+12 hour clock, no seconds, with a time span.
+</p>
+<p>
+var timespinner1 = new Y.TimeSpinner({
+       hourtype:'12',
+       separator:':',
+       seconds:false,
+       timepsan:{required:true,sep:' - '},
+	   holder:'#boxd1'
+    });
+    timespinner1.render();
+    timespinner1.focus();
+
+</p>
+<div id="boxd1"> </div>
+<input type=button id="button1" value="GetValue TS & TS 1"/>
+<p>To get the value of the time spinner. 'timespinner1.getValue();'</p>
+<br/><br/>
+<p>
+Time Spinner 2. <br/>
+24 hour clock, no seconds, no time span.
+</p>
+<p>
+	var timespinner2 = new Y.TimeSpinner({
+       hourtype:'24',
+       separator:':',
+       seconds:false,
+       timepsan:{required:false,sep:' - '},
+	   holder:'#boxd2'
+    });
+    timespinner2.render();
+    timespinner2.focus();
+
+</p>
+<div id="boxd2"> </div>
+<input type=button id="button2" value="GetValue TS 2"/>
+<p>To get the value of the time spinner. 'timespinner2.getValue();'</p>
+<br/><br/>
+
+<p>
+Time Spinner 3. <br/>
+12 hour clock, no seconds, no time span.
+</p>
+<p>
+	var timespinner3 = new Y.TimeSpinner({
+       hourtype:'12',
+       separator:':',
+       seconds:false,
+       timepsan:{required:false,sep:' - '},
+	   holder:'#boxd3'
+    });
+    timespinner3.render();
+    timespinner3.focus();
+
+</p>
+<div id="boxd3"> </div>
+<input type=button id="button3" value="GetValue TS 3"/>
+<p>To get the value of the time spinner. 'timespinner3.getValue();'</p>
+
+
+<script src="http://yui.yahooapis.com/3.2.0/build/yui/yui-min.js">
+</script>
+<script src="js/gallery-timespinner.js">
+</script>
+<script>
+
+YUI(
+
+).use('gallery-timespinner', function (Y) {
+    // Create a new TimeSpinner instance
+
+var timespinner = new Y.TimeSpinner({
+       hourtype:'12',
+       separator:':',
+       seconds:true,
+       timepsan:{required:true,sep:' - '},
+	   holder:'#boxd'
+    });
+    timespinner.render();
+    timespinner.focus();
+
+
+	var timespinner1 = new Y.TimeSpinner({
+       hourtype:'12',
+       separator:':',
+       seconds:false,
+       timepsan:{required:true,sep:' - '},
+	   holder:'#boxd1'
+    });
+    timespinner1.render();
+    timespinner1.focus();
+
+
+	var timespinner2 = new Y.TimeSpinner({
+       hourtype:'24',
+       separator:':',
+       seconds:false,
+       timepsan:{required:false,sep:' - '},
+	   holder:'#boxd2'
+    });
+    timespinner2.render();
+    timespinner2.focus();
+
+	var timespinner3 = new Y.TimeSpinner({
+       hourtype:'12',
+       separator:':',
+       seconds:false,
+       timepsan:{required:false,sep:' - '},
+	   holder:'#boxd3'
+    });
+    timespinner3.render();
+    timespinner3.focus();
+
+	var foo = Y.one("#button");
+
+	Y.on("click", function(){var ts0 = timespinner.getValue();
+									alert(ts0);
+							} ,foo);
+
+
+	var foo1 = Y.one("#button1");
+	Y.on("click", function(){
+
+	var ts0 = timespinner.getValue();
+	var ts1 = timespinner1.getValue();
+	alert(ts0);
+	alert(ts1);
+
+	} ,foo1);
+
+
+	var foo2 = Y.one("#button2");
+	Y.on("click", function(){
+
+	var ts3 = timespinner2.getValue();
+	alert(ts3);
+
+	} ,foo2);
+
+	var foo3 = Y.one("#button3");
+	Y.on("click", function(){
+
+	var ts4 = timespinner3.getValue();
+	alert(ts4);
+
+	} ,foo3);
+
+
+});
+
+</script>
+
+
+
+</body>
+</html>
+