[Time Conductor] Try to rewrite datetime picker as control

This commit is contained in:
Victor Woeltjen 2015-09-15 18:34:27 -07:00
parent 6c497f3c36
commit 9a78b63065
6 changed files with 24 additions and 16 deletions

View File

@ -54,10 +54,6 @@
{ {
"key": "time-controller", "key": "time-controller",
"templateUrl": "templates/controls/time-controller.html" "templateUrl": "templates/controls/time-controller.html"
},
{
"key": "datetime-picker",
"templateUrl": "templates/controls/datetime-picker.html"
} }
], ],
"controllers": [ "controllers": [
@ -249,6 +245,10 @@
{ {
"key": "selector", "key": "selector",
"templateUrl": "templates/controls/selector.html" "templateUrl": "templates/controls/selector.html"
},
{
"key": "datetime-picker",
"templateUrl": "templates/controls/datetime-picker.html"
} }
], ],
"licenses": [ "licenses": [

View File

@ -51,7 +51,7 @@
</div> </div>
<div style="vertical-align: top; display: inline-block" <div style="vertical-align: top; display: inline-block"
ng-repeat="key in ['hours', 'minutes', 'seconds']" ng-repeat="key in ['hours', 'minutes', 'seconds']"
ng-if="parameters[key]"> ng-if="options[key]">
<div>{{nameFor(key)}}</div> <div>{{nameFor(key)}}</div>
<select size="10" <select size="10"
ng-model="time[key]" ng-model="time[key]"

View File

@ -22,7 +22,7 @@
<div class="l-time-controller" ng-controller="TimeRangeController"> <div class="l-time-controller" ng-controller="TimeRangeController">
<div class="l-time-range-inputs-holder"> <div class="l-time-range-inputs-holder">
Start: <input type="date" ng-model="startOuterDate"/> Start: {{ngModel.outer.start}}
<span ng-controller="ToggleController as t"> <span ng-controller="ToggleController as t">
<a class="ui-symbol" ng-click="t.toggle()"> <a class="ui-symbol" ng-click="t.toggle()">
@ -31,10 +31,11 @@
<mct-popup ng-if="t.isActive()"> <mct-popup ng-if="t.isActive()">
<div style="background: #555;" <div style="background: #555;"
mct-click-elsewhere="t.setState(false)"> mct-click-elsewhere="t.setState(false)">
<mct-include key="'datetime-picker'" <mct-control key="'datetime-picker'"
ng-model="ngModel.outer.start" ng-model="ngModel.outer"
parameters="{ hours: true }"> field="'start'"
</mct-include> options="{ hours: true }">
</mct-control>
</div> </div>
</mct-popup> </mct-popup>
</span> </span>

View File

@ -136,7 +136,7 @@ define(
minute: $scope.time.minutes, minute: $scope.time.minutes,
second: $scope.time.seconds second: $scope.time.seconds
}); });
$scope.ngModel = m.valueOf(); $scope.ngModel[$scope.field] = m.valueOf();
} }
$scope.isSelectable = function (cell) { $scope.isSelectable = function (cell) {
@ -189,10 +189,11 @@ define(
updateScopeForMonth(); updateScopeForMonth();
// Ensure some useful default // Ensure some useful default
$scope.ngModel = $scope.ngModel === undefined ? $scope.ngModel[$scope.field] =
now() : $scope.ngModel; $scope.ngModel[$scope.field] === undefined ?
now() : $scope.ngModel[$scope.field];
$scope.$watch('ngModel', updateFromModel); $scope.$watch('ngModel[field]', updateFromModel);
$scope.$watchCollection('date', updateFromView); $scope.$watchCollection('date', updateFromView);
$scope.$watchCollection('time', updateFromView); $scope.$watchCollection('time', updateFromView);
} }

View File

@ -26,6 +26,13 @@ define(
function () { function () {
"use strict"; "use strict";
/**
* The `mct-click-elsewhere` directive will evaluate its
* associated expression whenever a `mousedown` occurs anywhere
* outside of the element that has the `mct-click-elsewhere`
* directive attached. This is useful for dismissing popups
* and the like.
*/
function MCTClickElsewhere($document) { function MCTClickElsewhere($document) {
// Link; install event handlers. // Link; install event handlers.

View File

@ -25,7 +25,7 @@ define(
function () { function () {
var TEMPLATE = "<div></div>"; var TEMPLATE = "<div></div>";
function MCTPopup($window, $document, $compile, $interval) { function MCTPopup($window, $document, $compile) {
function link(scope, element, attrs, ctrl, transclude) { function link(scope, element, attrs, ctrl, transclude) {
var body = $document.find('body'), var body = $document.find('body'),
popup = $compile(TEMPLATE)(scope), popup = $compile(TEMPLATE)(scope),
@ -52,7 +52,6 @@ define(
scope.$on('$destroy', function () { scope.$on('$destroy', function () {
popup.remove(); popup.remove();
$interval.cancel(activeInterval);
}); });
} }