Add datepicker for contact birthday

This commit is contained in:
Alexandre Cloutier
2014-04-08 12:12:30 -04:00
parent 0d69a476bc
commit 5699e5e1b4
6 changed files with 210 additions and 180 deletions
+1
View File
@@ -1,5 +1,6 @@
config.make
tags
*._*
*/obj/
*/*/obj/
*/*/*/obj/
+60 -55
View File
@@ -10,39 +10,46 @@
title="name"
const:userDefaultsKeys="SOGoContactsCategories"
const:popup="YES"
>
const:cssFiles="datepicker.css"
const:jsFiles="datepicker.js">
<div class="menu" id="categoriesMenu">
</div>
<form var:href="saveURL" name="editform" id="mainForm">
<var:if condition="isNew"><div id="addressBookSelector">
<style type="text/css">DIV#editorTabs { top: 30px; };</style>
<var:string label:value="Add to:" />
<var:if condition="isNew">
<div id="addressBookSelector">
<var:string label:value="Add to:"/>
<var:popup const:id="addressBooksList"
list="addressBooksList" item="addressBookItem"
string="addressBookDisplayName"
var:selection="componentAddressBook"
/>
</div></var:if>
var:selection="componentAddressBook"/>
</div>
</var:if>
<div class="tabsContainer" id="editorTabs">
<ul>
<li target="baseInfos">
<span><var:string label:value="Contact" /></span>
</li>
<var:if condition="supportCategories"
><li target="categoryInfos">
<span><var:string label:value="Categories" /></span></li
></var:if>
<var:if condition="supportCategories">
<li target="categoryInfos">
<span><var:string label:value="Categories" /></span>
</li>
</var:if>
<li target="addressesInfos">
<span><var:string label:value="Address" /></span></li>
<var:if condition="supportPhotos"
><li target="photos">
<span><var:string label:value="Photos" /></span></li
></var:if>
<span><var:string label:value="Address" /></span>
</li>
<var:if condition="supportPhotos">
<li target="photos">
<span><var:string label:value="Photos" /></span>
</li>
</var:if>
<li target="otherInfos">
<span><var:string label:value="Other" /></span></li>
<span><var:string label:value="Other" /></span>
</li>
</ul>
<div class="tabs">
<div id="baseInfos" class="tab">
<span class="caption"><var:string label:value="Name" /></span>
@@ -171,18 +178,18 @@
</tr>
</table>
</div>
<var:if condition="supportCategories"
><div id="categoryInfos" class="tab">
<div id="categoryContainer">
</div>
<var:if condition="canCreateOrModify"
><input type="text" class="textField" id="emptyCategory"
const:readonly="readonly"
const:name="emptyCategory"
const:value="" /></var:if>
<var:if condition="supportCategories">
<div id="categoryInfos" class="tab">
<div id="categoryContainer"><!-- spacer --></div>
<var:if condition="canCreateOrModify">
<input type="text" class="textField" id="emptyCategory"
const:readonly="readonly"
const:name="emptyCategory"
const:value="" />
</var:if>
<script type="text/javascript">
var gCategories = <var:string value="contactCategoriesList" const:escapeHTML="NO"/>;
var gCategories = <var:string value="contactCategoriesList" const:escapeHTML="NO" />;
</script>
<input type="hidden" id="jsonContactCategories"
const:name="jsonContactCategories"
@@ -190,7 +197,7 @@
</div></var:if>
<div id="addressesInfos" class="tab">
<span class="caption"><var:string label:value="Home" /></span>
<span class="caption"><var:string label:value="Home"/></span>
<table class="frame">
<tr>
<td colspan="2">
@@ -339,42 +346,40 @@
<td colspan="2">
<label><var:string label:value="Web Page:" />
<input type="text" class="textField" name="mozillaworkurl"
var:value="ldifRecord.mozillaworkurl"
/></label>
var:value="ldifRecord.mozillaworkurl"/>
</label>
</td>
</tr>
</table>
</div>
<var:if condition="supportPhotos"
><div id="photos" class="tab">
<var:if condition="hasPhoto"
><img var:src="photoURL" class="contactPhoto"
/></var:if>
</div
></var:if>
<var:if condition="supportPhotos">
<div id="photos" class="tab">
<var:if condition="hasPhoto">
<img var:src="photoURL" class="contactPhoto"/>
</var:if>
</div>
</var:if>
<div id="otherInfos" class="tab">
<table class="framenocaption">
<tr>
<td>
<label><var:string label:value="Birthday (yyyy-mm-dd):"/>
<input type="text" class="textField" name="birthyear" id="birthyear"
var:value="ldifRecord.birthyear"
/></label>
-
<input type="text" class="textField" name="birthmonth" id="birthmonth"
var:value="ldifRecord.birthmonth" />
-
<input type="text" class="textField" name="birthday" id="birthday"
var:value="ldifRecord.birthday"/>
<div>
<label id="birthdayLabel"><var:string label:value="Birthday (yyyy-mm-dd):"/></label>
<var:component className="UIxDatePicker"
const:dateID="birthdayDate"
day="ldifRecord.birthday"
month="ldifRecord.birthmonth"
year="ldifRecord.birthyear"
label:label="browse birthday"/>
</div>
</td>
</tr>
<tr>
<tr>
<td>
<label><var:string label:value="Note:" />
<textarea rows="25" var:value="ldifRecord.description" name="note" id="note"></textarea>
</label>
<label><var:string label:value="Note:" /></label>
<textarea rows="23" var:value="ldifRecord.description" name="note" id="note"></textarea>
</td>
</tr>
</table>
@@ -382,8 +387,8 @@
</div>
</div>
<div id="buttons">
<var:if condition="canCreateOrModify"
><a class="button actionButton" name="submit" id="submitButton">
<var:if condition="canCreateOrModify">
<a class="button" name="submit" id="submitButton">
<span><var:string label:value="Save" /></span>
</a></var:if>
<a id="cancelButton" class="button" name="cancel">
+53 -21
View File
@@ -7,45 +7,54 @@ DIV#addressBookSelector SELECT
SELECT
{ width: 8em; }
DIV#buttons
{ color: #535D6D;
visibility: visible;
position: absolute;
right: 1em;
bottom: 1em; }
TR
{ width: 100% !important;
border: 2px solid #0ff; }
/********** Frame of the current tab **********/
DIV#editorTabs
{ position: absolute;
top: 5px;
left: 5px;
right: 5px;
bottom: 40px; }
top: 5px;
bottom: 5px;
}
DIV#editorTabs DIV.tab TD.titleCell
{ text-align: left;
font-weight: bold; }
DIV#buttons
{ color: #535D6D;
visibility: visible;
position: absolute;
bottom: 12px;
right: 10px; }
#cancelButton:hover
{
font-weight:bold;
}
#submitButton:hover
{
font-weight:bold;
}
/********** Contact **********/
INPUT.textField
{ width: 60%; }
TD#htmlMailFormat
{ text-align: left !important; }
TABLE#emailInfos TD
{ width: 90%; }
TABLE#emailInfos TD.preferred
{ width: 10% !important;
overflow: visible;
text-align: center; }
DIV.tab TD.firstColumn INPUT.textField,
DIV.tab TD.secondColumn INPUT.textField
{ width: 35%; }
/********** Categories **********/
#categoryContainer
{ max-height: 400px;
@@ -67,11 +76,34 @@ INPUT.comboBoxField, #emptyCategory
margin-bottom: 0px;
margin-top: 0px; }
#otherInfos TEXTAREA
{ width: 70%; }
/********** Address **********/
#birthday, #birthmonth
{ width: 18px; }
DIV.tab TD.firstColumn INPUT.textField,
DIV.tab TD.secondColumn INPUT.textField
{ width: 35%; }
#birthyear
{ width: 36px; }
/********** Photos **********/
/********** OTHER **********/
#birthdayDate
{ width: auto;
vertical-align: 8px;
}
#birthdayLabel
{
vertical-align: 8px;
}
#otherInfos table td
{ text-align: left;
padding-bottom: 8px;
}
#otherInfos textarea
{ width: 100%;
height: 100%;
}
+64 -77
View File
@@ -36,10 +36,9 @@ function unescapeCallbackParameter(s) {
return s;
}
function copyContact(type, email, uid, sn,
displayname, givenname, telephonenumber, facsimiletelephonenumber,
mobile, postalAddress, homePostalAddress,
departmentnumber, l)
function copyContact(type, email, uid, sn, displayname,
givenname, telephonenumber, facsimiletelephonenumber,
mobile, postalAddress, homePostalAddress, departmentnumber, l)
{
// var type = arguments[0];
// var email = arguments[1];
@@ -79,55 +78,39 @@ function copyContact(type, email, uid, sn,
};
function validateContactEditor() {
var rc = true;
var rc = true;
var e = $('mail');
if (e.value.length > 0
&& !emailRE.test(e.value)) {
alert(_("invalidemailwarn"));
rc = false;
}
var e = $('mail');
if (e.value.length > 0
&& !emailRE.test(e.value)) {
alert(_("invalidemailwarn"));
rc = false;
}
e = $('mozillasecondemail');
if (e.value.length > 0
&& !emailRE.test(e.value)) {
alert(_("invalidemailwarn"));
rc = false;
}
var today = new Date();
var yyyy = today.getFullYear();
var mm = today.getMonth();
var dd = today.getDay();
var byear = $('birthyear');
var bmonth = $('birthmonth');
var bday = $('birthday');
if(byear.value <= yyyy && (byear.value.length == 4)){
if(bmonth.value <= mm && bmonth.value <= 12 && bmonth.value >=1){
if(bday.value <= dd && bday.value <= 31 && bday.value >=1){
var bdayValue = byear.value + "-" + bmonth.value + "-" + bday.value;
if (bdayValue != "--" && !dateRegex.test(bdayValue)) {
alert(_("invaliddatewarn"));
rc = false;
}
}
else{
alert(_("invaliddatewarn"));
rc = false;}
}
else{
alert(_("invalidmonthwarn"));
rc = false;}
}
else{
alert(_("invalidyearwarn"));
rc = false;}
return rc;
e = $('mozillasecondemail');
if (e.value.length > 0
&& !emailRE.test(e.value)) {
alert(_("invalidemailwarn"));
rc = false;
}
return rc
}
this.initTimeWidgets = function (widgets) {
this.timeWidgets = widgets;
var firstDay = new Date();
firstDay.setFullYear(1900,0,1);
var lastDay = new Date();
jQuery(widgets['birthday']['date']).closest('.date').datepicker({autoclose: true,
weekStart: 0,
endDate: lastDay,
startDate: firstDay,
setStartDate: lastDay,
startView: 2,
position: "below-shifted-left"});
};
function onDisplaynameKeyDown() {
var fn = $("displayname");
fn.onkeydown = null;
@@ -286,39 +269,43 @@ function onEmptyCategoryClick(event) {
}
function initEditorForm() {
var tabsContainer = $("editorTabs");
var controller = new SOGoTabsController();
controller.attachToTabsContainer(tabsContainer);
var tabsContainer = $("editorTabs");
var controller = new SOGoTabsController();
controller.attachToTabsContainer(tabsContainer);
displaynameChanged = ($("displayname").value.length > 0);
$("displayname").onkeydown = onDisplaynameKeyDown;
$("sn").onkeyup = onDisplaynameNewValue;
$("givenname").onkeyup = onDisplaynameNewValue;
displaynameChanged = ($("displayname").value.length > 0);
$("displayname").onkeydown = onDisplaynameKeyDown;
$("sn").onkeyup = onDisplaynameNewValue;
$("givenname").onkeyup = onDisplaynameNewValue;
$("cancelButton").observe("click", onEditorCancelClick);
var submitButton = $("submitButton");
if (submitButton) {
submitButton.observe("click", onEditorSubmitClick);
$("cancelButton").observe("click", onEditorCancelClick);
var submitButton = $("submitButton");
if (submitButton) {
submitButton.observe("click", onEditorSubmitClick);
}
Event.observe(document, "keydown", onDocumentKeydown);
if (typeof(gCategories) != "undefined") {
regenerateCategoriesMenu();
}
var catsInput = $("jsonContactCategories");
if (catsInput && catsInput.value.length > 0) {
var contactCats = $(catsInput.value.evalJSON(false));
for (var i = 0; i < contactCats.length; i++) {
appendCategoryInput(contactCats[i]);
}
}
Event.observe(document, "keydown", onDocumentKeydown);
var emptyCategory = $("emptyCategory");
if (emptyCategory) {
emptyCategory.tabIndex = 10000;
emptyCategory.observe("click", onEmptyCategoryClick);
}
var widgets = {'birthday': {'date': $("birthdayDate")}};
initTimeWidgets(widgets);
if (typeof(gCategories) != "undefined") {
regenerateCategoriesMenu();
}
var catsInput = $("jsonContactCategories");
if (catsInput && catsInput.value.length > 0) {
var contactCats = $(catsInput.value.evalJSON(false));
for (var i = 0; i < contactCats.length; i++) {
appendCategoryInput(contactCats[i]);
}
}
var emptyCategory = $("emptyCategory");
if (emptyCategory) {
emptyCategory.tabIndex = 10000;
emptyCategory.observe("click", onEmptyCategoryClick);
}
}
document.observe("dom:loaded", initEditorForm);
+30 -25
View File
@@ -31,14 +31,11 @@
var that = this;
this.element = $(element);
this.position = options.position||this.element.data('position')||"bellow";
this.position = options.position||this.element.data('position');
this.format = DPGlobal.parseFormat(options.format||this.element.data('date-format')||'mm/dd/yyyy');
this.picker = $(DPGlobal.template)
.addClass(this.position)
.appendTo('body')
.on({
click: $.proxy(this.click, this)
});
this.picker = $(DPGlobal.template).addClass(this.position)
.appendTo('body')
.on({click: $.proxy(this.click, this)});
this.isInput = this.element.is('input');
this.component = this.element.is('.date') ? this.element.find('.add-on') : false;
this.hasInput = this.component && this.element.find('input').length;
@@ -51,7 +48,8 @@
keyup: $.proxy(this.update, this),
keydown: $.proxy(this.keydown, this)
});
} else {
}
else {
if (this.component && this.hasInput){
// For components that are not readonly, allow keyboard nav
this.element.find('input').on({
@@ -59,9 +57,9 @@
keyup: $.proxy(this.update, this),
keydown: $.proxy(this.keydown, this)
});
this.component.on('click', $.proxy(this.show, this));
} else {
this.component.on('click', $.proxy(this.show, this));
}
else {
this.element.on('click', $.proxy(this.show, this));
}
}
@@ -76,14 +74,16 @@
this.autoclose = false;
if ('autoclose' in options) {
this.autoclose = options.autoclose;
} else if ('dateAutoclose' in this.element.data()) {
}
else if ('dateAutoclose' in this.element.data()) {
this.autoclose = this.element.data('date-autoclose');
}
this.keyboardNavigation = true;
if ('keyboardNavigation' in options) {
this.keyboardNavigation = options.keyboardNavigation;
} else if ('dateKeyboardNavigation' in this.element.data()) {
}
else if ('dateKeyboardNavigation' in this.element.data()) {
this.keyboardNavigation = this.element.data('date-keyboard-navigation');
}
@@ -182,19 +182,24 @@
}).first().css('z-index'))+10;
var offset = this.component ? this.component.offset() : this.element.offset();
var width = this.component ? this.component.width() : this.element.width();
if (this.position == 'bellow')
this.picker.css({
top: offset.top + this.height,
left: offset.left,
right: 'auto',
zIndex: zIndex
if (this.position == 'bellow')
this.picker.css({top: offset.top + this.height,
left: offset.left,
right: 'auto',
zIndex: zIndex
});
else // above
this.picker.css({
top: offset.top - this.height - this.picker.outerHeight(),
right: window.width() - offset.left - width,
left: 'auto',
zIndex: zIndex
if (this.position == 'below-shifted-left')
this.picker.css({top: offset.top + this.height,
left: offset.left - 83,
right: 'auto',
zIndex: zIndex
});
else // above
this.picker.css({ top: offset.top - this.height - this.picker.outerHeight(),
right: window.width() - offset.left - width,
left: 'auto',
zIndex: zIndex
});
},
+2 -2
View File
@@ -267,7 +267,7 @@ function openContactWindow(url, wId) {
wId = sanitizeWindowName(wId);
var w = window.open(url, wId,
"width=450,height=530,resizable=0,location=0");
"width=460,height=560,resizable=0,location=0");
w.focus();
return w;
@@ -1743,7 +1743,7 @@ function onPreferencesClick(event) {
}
else {
var w = window.open(urlstr, "SOGoPreferences",
"width=580,height=476,resizable=1,scrollbars=0,location=0");
"width=615,height=520,resizable=1,scrollbars=0,location=0");
w.opener = window;
w.focus();
}