moparisthebest/mail
1
0
Fork 0
mirror of https://github.com/moparisthebest/mail synced 2024-11-23 01:12:19 -05:00
Code Issues Releases Wiki Activity

implement field jumping on spaceand tab press

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
src/js/controller/write.js
View File

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

18
src/tpl/write.html
View File

@ -9,25 +9,27 @@
<div class="headers"> <div class="headers">
<p> <p>
<span>To:</span> <span>To:</span>
<span ng-repeat="recipient in to track by $index"> <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> </span>
</p> </p>
<p> <p>
<span>Cc:</span> <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>
<p> <p>
<span>Bcc:</span> <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> </p>
</div><!--/.address-headers--> </div><!--/.address-headers-->
<div class="subject-box"> <div class="subject-box">
<div class="subject-line"> <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> </div>
<button class="btn-attachment"> <button class="btn-attachment">
<div data-icon="&#xe003;"></div> <div data-icon="&#xe003;"></div>
@ -35,7 +37,7 @@
</div><!--/.subject-box--> </div><!--/.subject-box-->
<div class="body" focus-child> <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}"> <div class="encrypt-preview" ng-class="{'invisible': !ciphertextPreview}">
<p>-----BEGIN ENCRYPTED PREVIEW-----<br>{{ciphertextPreview}}<br>-----END ENCRYPTED PREVIEW-----</p> <p>-----BEGIN ENCRYPTED PREVIEW-----<br>{{ciphertextPreview}}<br>-----END ENCRYPTED PREVIEW-----</p>
@ -43,7 +45,7 @@
</div><!--/.body--> </div><!--/.body-->
<div class="send-control"> <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>
</div><!--/.write-view--> </div><!--/.write-view-->