Renamed DateWheel to DatePicker

Gruntfile.js

@@ -26,7 +26,7 @@ module.exports = function(grunt) {
             { src: 'src/LayoutController.js', dest: 'docs/LayoutController.md' },
             { src: 'src/ScrollController.js', dest: 'docs/ScrollController.md' },
             { src: 'src/FlexScrollView.js', dest: 'docs/FlexScrollView.md' },
-            { src: 'src/widgets/DateWheel.js', dest: 'docs/widgets/DateWheel.md' },
+            { src: 'src/widgets/DatePicker.js', dest: 'docs/widgets/DatePicker.md' },
             { src: 'src/LayoutUtility.js', dest: 'docs/LayoutUtility.md' },
             { src: 'src/VirtualViewSequence.js', dest: 'docs/VirtualViewSequence.md' },
             // helpers

README.md

@@ -31,7 +31,7 @@ of renderables using a `GridLayout`, and change that into a `ListLayout`. When u
 - [LayoutController](#layoutcontroller) ([API Reference](docs/LayoutController.md))
 - ScrollController ([API Reference](docs/ScrollController.md))
 - [FlexScrollView](#flex-scrollview) ([API Reference](docs/ScrollController.md) | [Tutorial](tutorials/FlexScrollView.md))
-- DateWheel ([API Reference](docs/widgets/DateWheel.md) | [Tutorial](tutorials/DateWheel.md))
+- DatePicker ([API Reference](docs/widgets/DatePicker.md) | [Tutorial](tutorials/DatePicker.md))
 
 ### [Layouts](#standard-layouts)
 - [GridLayout](docs/layouts/GridLayout.md)
@@ -270,7 +270,7 @@ custom layouts. Key features:
 |[LayoutController](docs/LayoutController.md)|Lays out renderables and optionally animates between layout states.|
 |[ScrollController](docs/ScrollController.md)|Scrollable LayoutController (base class for FlexScrollView).|
 |[FlexScrollView](docs/FlexScrollView.md)|Flexible scroll-view with pull-to-refresh, margins & spacing and more good stuff.|
-|[DateWheel](docs/widgets/DateWheel.md)|Date(picker) wheel.|
+|[DatePicker](docs/widgets/DatePicker.md)|Date/time picker wheel.|
 |[LayoutContext](docs/LayoutContext.md)|Context used for writing layout-functions.|
 |[LayoutUtility](docs/LayoutUtility.md)|Utility class containing helper functions.|
 |[VirtualViewSequence](docs/VirtualViewSequence.md)|Infinite view-sequence which uses a factory delegate to create renderables.|

docs/widgets/DatePicker.md

@@ -0,0 +1,94 @@
+<a name="module_DatePicker"></a>
+#DatePicker
+Date/time picker (slot-machine/wheel layout) for famo.us.
+
+This component can be used as a date/time picker, a clock or
+any other application which requires a date/time wheel.
+
+Example:
+
+```javascript
+var DatePicker = require('famous-flex/widgets/DatePicker');
+
+var datePicker = new DatePicker({
+  date: new Date(),        // initial date
+  wheelLayout: {
+    itemSize: 100,         // height of an item on the date/wheel
+    diameter: 300,         // diameter of the wheel (undefined = 3 x itemSize)
+    radialOpacity: 0       // opacity at the top and bottom diameter edge
+  },
+  components: [
+    new DatePicker.Component.FullDay(),  // full-day component (year + month + day)
+    new DatePicker.Component.Hour(),     // hour component (0..23)
+    new DatePicker.Component.Minute()    // minute compoent (0..59)
+  ]
+});
+this.add(datePicker); // add to the render-tree
+
+datePicker.on('datechange', function(event) {
+  console.log('new date selected: ' + event.date.toLocaleString());
+});
+```
+
+CSS:
+
+```css
+.famous-flex-datepicker .item > div {
+  text-align: center;
+  font-size: 40px;
+  line-height: 60px; // this should equal the WheelLayout itemSize
+}
+```
+
+<a name="exp_module_DatePicker"></a>
+##class: DatePicker ⏏
+**Extends**: `View`  
+**Members**
+
+* [class: DatePicker ⏏](#exp_module_DatePicker)
+  * [new DatePicker(options)](#exp_new_module_DatePicker)
+  * [datePicker.setOptions(options)](#module_DatePicker#setOptions)
+  * [datePicker.setDate(date)](#module_DatePicker#setDate)
+  * [datePicker.getDate()](#module_DatePicker#getDate)
+
+<a name="exp_new_module_DatePicker"></a>
+###new DatePicker(options)
+**Params**
+
+- options `Object` - Configurable options.  
+  - \[perspective\] `Number` - Perspective to use when rendering the wheel.  
+  - \[components\] `Array` - Date/time components that are displayed.  
+  - \[wheelLayout\] `Object` - Layout-options that are passed to the WheelLayout.  
+  - \[overlay\] `Object` - Overlay renderables (`top`, `middle` & `bottom`).  
+  - \[scrollView\] `Object` - Options that are passed to the underlying ScrollControllers.  
+  - \[container\] `Object` - Container-options that are passed to the underlying ContainerSurface.  
+
+**Extends**: `View`  
+<a name="module_DatePicker#setOptions"></a>
+###datePicker.setOptions(options)
+Patches the DatePicker instance's options with the passed-in ones.
+
+**Params**
+
+- options `Object` - Configurable options (see ScrollController for all inherited options).  
+  - \[perspective\] `Number` - Perspective to use when rendering the wheel.  
+  - \[components\] `Array` - Date/time components that are displayed.  
+  - \[overlay\] `Object` - Overlay renderables (`top`, `middle` & `bottom`).  
+  - \[wheelLayout\] `Object` - Layout-options that are passed to the WheelLayout.  
+  - \[scrollView\] `Object` - Options that are passed to the underlying ScrollControllers.  
+
+**Returns**: `DatePicker` - this  
+<a name="module_DatePicker#setDate"></a>
+###datePicker.setDate(date)
+Set the selected date.
+
+**Params**
+
+- date `Date` - Selected date/time.  
+
+**Returns**: `DatePicker` - this  
+<a name="module_DatePicker#getDate"></a>
+###datePicker.getDate()
+Get the selected date.
+
+**Returns**: `Date` - selected date  

global-no-famous.template.js

@@ -14,7 +14,7 @@ ijzerenhein.VirtualViewSequence = require('./src/VirtualViewSequence');
 //ijzerenhein.ScrollView = require('./src/ScrollView');
 
 ijzerenhein.widgets = ijzerenhein.widgets || {};
-ijzerenhein.widgets.DateWheel = require('./src/widgets/DateWheel');
+ijzerenhein.widgets.DatePicker = require('./src/widgets/DatePicker');
 
 ijzerenhein.layout = ijzerenhein.layout || {};
 ijzerenhein.layout.CollectionLayout = require('./src/layouts/CollectionLayout');

src/widgets/DateWheel.js → src/widgets/DatePicker.js

@@ -12,40 +12,40 @@
 /*eslint no-use-before-define:0, no-console:0 */
 
 /**
- * Date/time wheel (slot-machine layout) for famo.us.
+ * Date/time picker (slot-machine/wheel layout) for famo.us.
  *
  * This component can be used as a date/time picker, a clock or
  * any other application which requires a date/time wheel.
  *
  * Example:
  *
  * ```javascript
- * var DateWheel = require('famous-flex/widgets/DateWheel');
+ * var DatePicker = require('famous-flex/widgets/DatePicker');
  *
- * var dateWheel = new DateWheel({
+ * var datePicker = new DatePicker({
  *   date: new Date(),        // initial date
  *   wheelLayout: {
  *     itemSize: 100,         // height of an item on the date/wheel
  *     diameter: 300,         // diameter of the wheel (undefined = 3 x itemSize)
  *     radialOpacity: 0       // opacity at the top and bottom diameter edge
  *   },
  *   components: [
- *     new DateWheel.Component.FullDay(),  // full-day component (year + month + day)
- *     new DateWheel.Component.Hour(),     // hour component (0..23)
- *     new DateWheel.Component.Minute()    // minute compoent (0..59)
+ *     new DatePicker.Component.FullDay(),  // full-day component (year + month + day)
+ *     new DatePicker.Component.Hour(),     // hour component (0..23)
+ *     new DatePicker.Component.Minute()    // minute compoent (0..59)
  *   ]
  * });
- * this.add(dateWheel); // add to the render-tree
+ * this.add(datePicker); // add to the render-tree
  *
- * dateWheel.on('datechange', function(event) {
+ * datePicker.on('datechange', function(event) {
  *   console.log('new date selected: ' + event.date.toLocaleString());
  * });
  * ```
  *
  * CSS:
  *
  * ```css
- * .famous-flex-datewheel .item > div {
+ * .famous-flex-datepicker .item > div {
  *   text-align: center;
  *   font-size: 40px;
  *   line-height: 60px; // this should equal the WheelLayout itemSize
@@ -77,9 +77,9 @@ define(function(require, exports, module) {
      * @param {Object} [options.overlay] Overlay renderables (`top`, `middle` & `bottom`).
      * @param {Object} [options.scrollView] Options that are passed to the underlying ScrollControllers.
      * @param {Object} [options.container] Container-options that are passed to the underlying ContainerSurface.
-     * @alias module:DateWheel
+     * @alias module:DatePicker
      */
-    function DateWheel(options) {
+    function DatePicker(options) {
         View.apply(this, arguments);
 
         this._date = new Date((options && options.date) ? options.date.getTime() : undefined);
@@ -89,11 +89,11 @@ define(function(require, exports, module) {
 
         this.setOptions(this.options);
     }
-    DateWheel.prototype = Object.create(View.prototype);
-    DateWheel.prototype.constructor = DateWheel;
-    DateWheel.Component = DateComponents;
+    DatePicker.prototype = Object.create(View.prototype);
+    DatePicker.prototype.constructor = DatePicker;
+    DatePicker.Component = DateComponents;
 
-    DateWheel.DEFAULT_OPTIONS = {
+    DatePicker.DEFAULT_OPTIONS = {
         perspective: 500,
         wheelLayout: {
             itemSize: 100,
@@ -109,28 +109,28 @@ define(function(require, exports, module) {
             }
         },
         container: {
-            classes: ['famous-flex-datewheel']
+            classes: ['famous-flex-datepicker']
         },
         components: [
-            new DateWheel.Component.FullDay(),
-            new DateWheel.Component.Hour(),
-            new DateWheel.Component.Minute()
+            new DatePicker.Component.FullDay(),
+            new DatePicker.Component.Hour(),
+            new DatePicker.Component.Minute()
         ],
         overlay: {}
     };
 
     /**
-     * Patches the DateWheel instance's options with the passed-in ones.
+     * Patches the DatePicker instance's options with the passed-in ones.
      *
      * @param {Object} options Configurable options (see ScrollController for all inherited options).
      * @param {Number} [options.perspective] Perspective to use when rendering the wheel.
      * @param {Array} [options.components] Date/time components that are displayed.
      * @param {Object} [options.overlay] Overlay renderables (`top`, `middle` & `bottom`).
      * @param {Object} [options.wheelLayout] Layout-options that are passed to the WheelLayout.
      * @param {Object} [options.scrollView] Options that are passed to the underlying ScrollControllers.
-     * @return {DateWheel} this
+     * @return {DatePicker} this
      */
-    DateWheel.prototype.setOptions = function(options) {
+    DatePicker.prototype.setOptions = function(options) {
         View.prototype.setOptions.call(this, options);
         if (!this.layout) {
             return this;
@@ -162,9 +162,9 @@ define(function(require, exports, module) {
      * Set the selected date.
      *
      * @param {Date} date Selected date/time.
-     * @return {DateWheel} this
+     * @return {DatePicker} this
      */
-    DateWheel.prototype.setDate = function(date) {
+    DatePicker.prototype.setDate = function(date) {
         this._date.setTime(date.getTime());
         _setDateToScrollWheels.call(this, this._date);
         return this;
@@ -175,7 +175,7 @@ define(function(require, exports, module) {
      *
      * @return {Date} selected date
      */
-    DateWheel.prototype.getDate = function() {
+    DatePicker.prototype.getDate = function() {
         return this._date;
     };
 
@@ -379,5 +379,5 @@ define(function(require, exports, module) {
         this.overlay.setDataSource(this.options.overlay);
     }
 
-    module.exports = DateWheel;
+    module.exports = DatePicker;
 });