1
0
mirror of https://github.com/moparisthebest/mail synced 2024-11-26 19:02:20 -05:00

implement field jumping on spaceand tab press

This commit is contained in:
Tankred Hase 2014-01-13 16:42:10 +01:00
parent 60342b3902
commit 6d0e562351
2 changed files with 30 additions and 27 deletions

View File

@ -30,7 +30,7 @@ define(function(require) {
fillFields(replyTo);
$scope.updatePreview();
$scope.verifyTo();
verify($scope.to[0]);
},
close: function() {
this.open = false;
@ -42,6 +42,12 @@ define(function(require) {
$scope.to = [{
address: ''
}];
$scope.cc = [{
address: ''
}];
$scope.bcc = [{
address: ''
}];
$scope.subject = '';
$scope.body = '';
$scope.ciphertextPreview = '';
@ -56,7 +62,7 @@ define(function(require) {
$scope.writerTitle = 'Reply';
// fill recipient field
$scope.to = re.from[0].address;
$scope.to[0].address = re.from[0].address;
// fill subject
$scope.subject = 'Re: ' + ((re.subject) ? re.subject.replace('Re: ', '') : '');
@ -75,18 +81,18 @@ define(function(require) {
// Editing headers
//
$scope.onAddressUpdate = function(recipient) {
var to = $scope.to,
$scope.onAddressUpdate = function(field, index) {
var recipient = field[index],
address = recipient.address;
// handle number of email inputs for multiple recipients
if (address.indexOf(' ') !== -1) {
recipient.address = address.replace(' ', '');
to.push({
field.push({
address: ''
});
} else if (address.length === 0 && to.length > 1) {
to.splice(to.indexOf(recipient), 1);
} else if (address.length === 0 && field.length > 1) {
field.splice(field.indexOf(recipient), 1);
}
verify(recipient);
@ -286,25 +292,20 @@ define(function(require) {
};
});
ngModule.directive('addressInput', function($timeout, $parse) {
ngModule.directive('addressInput', function($timeout) {
return {
//scope: true, // optionally create a child scope
link: function(scope, element, attrs) {
// get prefix for id
var idPrefix = attrs.addressInput;
element.bind('keydown', function(e) {
if (e.keyCode === 32) {
// space -> go to next input
e.preventDefault();
element[0].parent[0].nextSibling[0].children[0].focus();
}
scope.$apply();
});
var model = $parse(attrs.focusMe);
scope.$watch(model, function(value) {
if (value === true) {
$timeout(function() {
element[0].focus();
// find next input and focus
var index = attrs.id.replace(idPrefix, '');
var nextId = idPrefix + (parseInt(index, 10) + 1);
document.getElementById(nextId).focus();
}, 100);
}
});

View File

@ -9,25 +9,27 @@
<div class="headers">
<p>
<span>To:</span>
<span ng-repeat="recipient in to track by $index">
<input value="{{recipient.address}}" ng-model="recipient.address" ng-trim="false" ng-class="{'label': recipient.secure === true, 'label label-primary': recipient.secure === false && recipient.valid !== true}" auto-size="recipient.address" spellcheck="false" ng-change="onAddressUpdate(recipient)">
<input id="to{{$index}}" value="{{recipient.address}}" ng-model="recipient.address" ng-trim="false" ng-class="{'label': recipient.secure === true, 'label label-primary': recipient.secure === false && recipient.valid !== true}" auto-size="recipient.address" spellcheck="false" ng-change="onAddressUpdate(to, $index)" address-input="to" tabindex="1" focus-me="state.writer.open && writerTitle !== 'Reply'">
</span>
</p>
<p>
<span>Cc:</span>
<input type="email" ng-model="cc" tabindex="2">
<span ng-repeat="recipient in cc track by $index">
<input id="cc{{$index}}" value="{{recipient.address}}" ng-model="recipient.address" ng-trim="false" ng-class="{'label': recipient.secure === true, 'label label-primary': recipient.secure === false && recipient.valid !== true}" auto-size="recipient.address" spellcheck="false" ng-change="onAddressUpdate(cc, $index)" address-input="cc" tabindex="1">
</span>
</p>
<p>
<span>Bcc:</span>
<input type="email" ng-model="bcc" tabindex="3">
<span ng-repeat="recipient in bcc track by $index">
<input id="bcc{{$index}}" value="{{recipient.address}}" ng-model="recipient.address" ng-trim="false" ng-class="{'label': recipient.secure === true, 'label label-primary': recipient.secure === false && recipient.valid !== true}" auto-size="recipient.address" spellcheck="false" ng-change="onAddressUpdate(bcc, $index)" address-input="bcc" tabindex="1">
</span>
</p>
</div><!--/.address-headers-->
<div class="subject-box">
<div class="subject-line">
<input ng-model="subject" class="subject" spellcheck="true" tabindex="4" placeholder="Subject" ng-change="updatePreview()">
<input ng-model="subject" class="subject" spellcheck="true" tabindex="2" placeholder="Subject" ng-change="updatePreview()">
</div>
<button class="btn-attachment">
<div data-icon="&#xe003;"></div>
@ -35,7 +37,7 @@
</div><!--/.subject-box-->
<div class="body" focus-child>
<p ng-model="body" contentEditable="true" spellcheck="false" ng-change="updatePreview()" tabindex="5" focus-me="state.writer.open && writerTitle === 'Reply'"></p>
<p ng-model="body" contentEditable="true" spellcheck="false" ng-change="updatePreview()" tabindex="3" focus-me="state.writer.open && writerTitle === 'Reply'"></p>
<div class="encrypt-preview" ng-class="{'invisible': !ciphertextPreview}">
<p>-----BEGIN ENCRYPTED PREVIEW-----<br>{{ciphertextPreview}}<br>-----END ENCRYPTED PREVIEW-----</p>
@ -43,7 +45,7 @@
</div><!--/.body-->
<div class="send-control">
<button ng-click="sendToOutbox()" class="btn" data-icon="{{(toSecure === false) ? '&#xe001;' : (toSecure === true) ? '&#xe009;' : ''}}" ng-disabled="!to" tabindex="6">{{sendBtnText || 'Send'}}</button>
<button ng-click="sendToOutbox()" class="btn" data-icon="{{(toSecure === false) ? '&#xe001;' : (toSecure === true) ? '&#xe009;' : ''}}" ng-disabled="!to" tabindex="4">{{sendBtnText || 'Send'}}</button>
</div>
</div><!--/.write-view-->