Skip to content
This repository has been archived by the owner on Nov 3, 2021. It is now read-only.

Commit

Permalink
Merge pull request #5637 from arcturus/contacts-bug-796869
Browse files Browse the repository at this point in the history 
Bug 796869 - [contacts] Get ready for CSP
  • Loading branch information
@arcturus
arcturus committed Oct 4, 2012
2 parents 11f00e9 + 010be56 commit d17fb1f
Show file tree
Hide file tree
Showing 10 changed files with 235 additions and 60 deletions.
58 changes: 27 additions & 31 deletions apps/communications/contacts/index.html
View file
Expand Up @@ -73,9 +73,9 @@
<section id='view-contacts-list' role="region" data-mirror="mirror-contacts-list" data-state="active" class="view view-noscroll view-contacts-list">
<header>
<menu type="toolbar" role="menu">
<button id="cancel_activty" class="hide negative" onclick="Contacts.cancel();"><span class="icon icon-close"data-l10n-id="exit">Exit</span></button>
<button role="menuitem" id="add-contact-button" onclick="Contacts.showForm();"><span class="icon icon-add" data-l10n-id="add">add</span></button>
<button role="menuitem" id="settings-button" onclick="Contacts.navigation.go('view-settings', 'popup');">
<button id="cancel_activty" class="hide negative"><span class="icon icon-close"data-l10n-id="exit">Exit</span></button>
<button role="menuitem" id="add-contact-button"><span class="icon icon-add" data-l10n-id="add">add</span></button>
<button role="menuitem" id="settings-button">
<span class="icon icon-settings" data-l10n-id="settings">settings</span>
</button>
</menu>
Expand Down Expand Up @@ -113,8 +113,8 @@ <h1 data-l10n-id="contacts">Contacts</h1>
<section id="search-view" class="view">
<form id="searchview-container" class="search">
<label for="search-contact">
<input data-cancelable required type="search" name="search" class="textfield" onfocus='return contacts.Search.enterSearchMode();' placeholder="Search" id="search-contact" onkeyup="contacts.Search.search()" data-l10n-id="search-contact" />
<button id='cancel-search' onclick='return contacts.Search.exitSearchMode()' data-l10n-id="cancel">Cancel</button>
<input data-cancelable required type="search" name="search" class="textfield" placeholder="Search" id="search-contact" data-l10n-id="search-contact" />
<button id='cancel-search' data-l10n-id="cancel">Cancel</button>
</label>
</form>
</section>
Expand All @@ -123,9 +123,9 @@ <h1 data-l10n-id="contacts">Contacts</h1>
<!-- Contact Details Section -->
<section id='view-contact-details' role="region" data-mirror="mirror-contact-details" class="view view-contact-profile">
<header id='details-view-header'>
<button class="negative" onclick="Contacts.goBack();"><span class="icon icon-back" data-l10n-id="back">back</span></button>
<button id="details-back" class="negative"><span class="icon icon-back" data-l10n-id="back">back</span></button>
<menu type="toolbar" role="menu">
<button role="menuitem" id="edit-contact-button" onclick="Contacts.showForm(true);"><span class="icon icon-edit" data-l10n-id="edit" data-l10n-id="edit">edit</span></button>
<button role="menuitem" id="edit-contact-button"><span class="icon icon-edit" data-l10n-id="edit" data-l10n-id="edit">edit</span></button>
</menu>
<h1 id='contact-name-title'></h1>
<sup id='favorite-star' class='hide'></sup>
Expand All @@ -139,10 +139,10 @@ <h1 id='contact-name-title'></h1>
<h2>#type#</h2>
<div class="item">
<div class="item-media pull-right">
<button class="action" onclick="Contacts.sendSms('#value#')"><span role="button" class="icon-message">Message</span></button>
<button id="send-sms-button-#i#" class="action"><span role="button" class="icon-message">Message</span></button>
</div>
<div class="item-body-exp">
<button class="action" onclick="Contacts.callOrPick('#value#')">
<button class="action" id="call-or-pick-#i#">
<span role="button" class="icon-call" data-l10n-id="call">Call</span>
<b>#value#</b>
<em>#carrier#</em>
Expand All @@ -161,7 +161,7 @@ <h2 data-l10n-id="birthday">Birthday</h2>
<h2>#type#</h2>
<div class="item">
<div class="item-body-exp">
<button class="action" onclick="Contacts.sendEmailOrPick('#value#'); return false">
<button id="email-or-pick-#i#" class="action">
<span role="button" class="icon-email">E-mail</span>
<b>#value#</b>
</button>
Expand All @@ -177,27 +177,23 @@ <h2 data-l10n-id="social-network" id="social-label">Social Network</h2>

<div>
<button id="msg_button" data-l10n-id="msg-send"
class="fillflow-row action action-add fillflow-twocols fillflow-left"
onclick="Contacts.extFb.sendPrivateMsg('#i#')">
class="fillflow-row action action-add fillflow-twocols fillflow-left">
Message
</button>

<button id="wall_button" data-l10n-id="wall-post"
class="fillflow-row action action-add fillflow-twocols"
onclick="Contacts.extFb.wallPost('#i#')">
class="fillflow-row action action-add fillflow-twocols">
Wall Post
</button>
</div>

<button id="profile_button" data-l10n-id="show-profile"
class="fillflow-row action action-add"
onclick="Contacts.extFb.showProfile('#i#')">
class="fillflow-row action action-add">
Show Profile
</button>


<button id="link_button" class="fillflow-row action action-add"
onclick="Contacts.extFb.startLink('#i#','#linked#')">
<button id="link_button" class="fillflow-row action action-add">
#action#
</button>
</div>
Expand Down Expand Up @@ -231,7 +227,7 @@ <h1 id='org-title'></h1>
</ul>
</div>
<hr/>
<button onclick='contacts.Details.toggleFavorite(); return false;' id='toggle-favorite' class="fillflow-row action action-add">
<button id='toggle-favorite' class="fillflow-row action action-add">
<b>Add as favorite</b>
</button>
</section>
Expand All @@ -243,17 +239,17 @@ <h1 id='org-title'></h1>
<!-- Edit Section -->
<section id='view-contact-form' role="region" data-mirror="mirror-contact-form" class="view view-bottom view-edit-contact">
<header>
<button class="negative" onclick="Contacts.cancel();"><span class="icon icon-close"data-l10n-id="exit">Exit</span></button>
<button id='cancel-edit' class="negative"><span class="icon icon-close"data-l10n-id="exit">Exit</span></button>
<menu type="toolbar" role="menu" id='contact-form-actions'>
<button id="save-button" onclick="contacts.Form.saveContact();" role="menuitem"></button>
<button id="save-button" role="menuitem"></button>
</menu>
<h1 id='contact-form-title'></h1>
</header>

<!-- PHONE TEMPLATE -->
<div id='add-phone-#i#' data-template class='phone-template' data-index="#i#">
<dl class="setbox fillflow-row">
<dt class="setbox-title" onmousedown="Contacts.goToSelectTag(event); return false;">
<dt class="setbox-title">
<a class='with-arrow' data-taglist='phone-type' name="tel" value="#type#" id="tel_type_#i#" data-field="type">#type#</a>
<span role="button" class="icon-arrow icon-arrow-bottom setbox-icon">Expand</span>
</dt>
Expand All @@ -273,7 +269,7 @@ <h1 id='contact-form-title'></h1>
<!-- EMAIL TEMPLATE -->
<div id='add-email-#i#' data-template class='email-template' data-index="#i#">
<dl class="setbox fillflow-row">
<dt class="setbox-title" onmousedown="Contacts.goToSelectTag(event); return false;">
<dt class="setbox-title">
<a data-taglist='email-type' name="email" value="#type#" id="email_type_#i#" data-field="type">#type#</a>
<span role="button" class="icon-arrow icon-arrow-bottom setbox-icon">Expand</span>
</dt>
Expand All @@ -289,7 +285,7 @@ <h1 id='contact-form-title'></h1>
<!-- ADDRESS TEMPLATE -->
<div id='add-address-#i#' data-template class='address-template' data-index="#i#">
<dl class="setbox fillflow-row">
<dt class="setbox-title" onmousedown="Contacts.goToSelectTag(event); return false;">
<dt class="setbox-title">
<a data-taglist="address-type" name="address" value="#type#" id="address_type_#i#" data-field="type">#type#</a>
<span role="button" class="icon-arrow icon-arrow-bottom setbox-icon">Expand</span>
</dt>
Expand Down Expand Up @@ -362,7 +358,7 @@ <h1 id='contact-form-title'></h1>
</div>
</fieldset>

<button onclick='contacts.Form.insertField("tel"); return false;' id='add-new-phone' class="fillflow-row action action-add">
<button data-field-type="tel" id='add-new-phone' class="fillflow-row action action-add">
<span role="button" class="icon-add"></span>
<b data-l10n-id="addPhone">Add phone number</b>
</button>
Expand All @@ -374,7 +370,7 @@ <h1 id='contact-form-title'></h1>
</div>
</fieldset>

<button onclick='contacts.Form.insertField("email"); return false;' id='add-new-email' class="fillflow-row action action-add">
<button data-field-type="email" id='add-new-email' class="fillflow-row action action-add">
<span role="button" class="icon-add"></span>
<b data-l10n-id="addEmail">Add email address</b>
</button>
Expand All @@ -386,7 +382,7 @@ <h1 id='contact-form-title'></h1>
</div>
</fieldset>

<button onclick='contacts.Form.insertField("adr"); return false;' id='add-new-address' class="fillflow-row action action-add">
<button data-field-type="adr" id='add-new-address' class="fillflow-row action action-add">
<span role="button" class="icon-add"></span>
<b data-l10n-id="addAddress">Add new address</b>
</button>
Expand All @@ -398,7 +394,7 @@ <h1 id='contact-form-title'></h1>
</div>
</fieldset>

<button onclick='contacts.Form.insertField("note"); return false;' id='add-new-note' class="fillflow-row action action-add">
<button data-field-type="note" id='add-new-note' class="fillflow-row action action-add">
<span role="button" class="icon-add"></span>
<b data-l10n-id="addComment">Add comment</b>
</button>
Expand All @@ -415,9 +411,9 @@ <h1 id='contact-form-title'></h1>
<!-- Tag selection -->
<section id="view-select-tag" role="region" data-mirror="mirror-contact-tags" class="view view-select-tag">
<header>
<button class="negative" onclick="Contacts.goBack();"><span class="icon icon-back" data-l10n-id="back">back</span></button>
<button id="settings-cancel" class="negative"><span class="icon icon-back" data-l10n-id="back">back</span></button>
<menu type="toolbar" role="menu" id="contact-form-actions">
<button role="menuitem" onclick="Contacts.doneTag();" data-l10n-id="done">Done</button>
<button id="settings-done" role="menuitem" data-l10n-id="done">Done</button>
</menu>
<h1 data-l10n-id="label">Label</h1>
</header>
Expand All @@ -434,7 +430,7 @@ <h1 data-l10n-id="label">Label</h1>
<!-- Settings section -->
<section data-theme="organic" id="view-settings" role="region" data-mirror="mirror-settings" class="skin-organic view view-bottom">
<header>
<button class="negative" onclick="contacts.Settings.close()">
<button id="settings-close" class="negative">
<span class="icon icon-close"data-l10n-id="exit">Exit</span>
</button>
<h1 data-l10n-id="settings">Settings</h1>
Expand Down
62 changes: 60 additions & 2 deletions apps/communications/contacts/js/contacts.js
View file
Expand Up @@ -165,6 +165,7 @@ var Contacts = (function() {
initContactsList();
contactsDetails.init();
contactsForm.init(TAG_OPTIONS);
initEventListeners();
checkUrl();
window.addEventListener('hashchange', checkUrl);
document.body.classList.remove('hide');
Expand Down Expand Up @@ -421,7 +422,7 @@ var Contacts = (function() {
contactTag.textContent = customTag.value;
}
contactTag = null;
this.goBack();
Contacts.goBack();
};

var sendSms = function sendSms(number) {
Expand Down Expand Up @@ -532,6 +533,14 @@ var Contacts = (function() {
}
};

var showAddContact = function showAddContact() {
showForm();
};

var showEditContact = function showEditContact() {
showForm(true);
}

var showForm = function c_showForm(edit) {
var contact = edit ? currentContact : null;

Expand All @@ -556,6 +565,10 @@ var Contacts = (function() {
currentContact = contact;
};

var showSettings = function showSettings() {
navigation.go('view-settings', 'popup');
}

var showOverlay = function showOverlay(message) {
var text = message || _('loadingContacts');

Expand All @@ -567,10 +580,55 @@ var Contacts = (function() {
loading.classList.remove('show-overlay');
};

var initEventListeners = function initEventListener() {
// Definition of elements and handlers
var handlers = {
'#cancel_activty': handleCancel, // Activity (any) cancellation
'#cancel-edit': handleCancel, // Cancel edition
'#save-button': contacts.Form.saveContact,
'#add-contact-button': showAddContact,
'#settings-button': showSettings, // Settings related
'#settings-cancel': handleBack,
'#settings-done': doneTag,
'#settings-close': contacts.Settings.close,
'#cancel-search': contacts.Search.exitSearchMode, // Search related
'#search-contact': [{'event': 'focus',
'handler': contacts.Search.enterSearchMode},
{'event': 'keyup',
'handler': contacts.Search.search}],
'#details-back': handleBack, // Details
'#edit-contact-button': showEditContact,
'#toggle-favorite': contacts.Details.toggleFavorite,
'#contact-form > button': contacts.Form.onNewFieldClicked
};

try {
for (var id in handlers) {
var handler = handlers[id];
var nodes = document.querySelectorAll(id);
for (var i = 0; i < nodes.length; i++) {
var node = nodes[i];
if (Array.isArray(handler)) {
handler.forEach(function handle(elem) {
if (!elem.hasOwnProperty('event') &&
!elem.hasOwnProperty('handler')) {
return;
}
node.addEventListener(
elem.event, elem.handler);
});
} else {
node.addEventListener('click', handler);
}
}
}
} catch(e) { console.log('---->' + e)}
};

return {
'doneTag': doneTag,
'cancel' : handleCancel,
'goBack' : handleBack,
'cancel': handleCancel,
'goToSelectTag': goToSelectTag,
'sendSms': sendSms,
'callOrPick': callOrPick,
Expand Down
35 changes: 35 additions & 0 deletions apps/communications/contacts/js/contacts_details.js
View file
Expand Up @@ -279,6 +279,8 @@ contacts.Details = (function() {
linkButton.classList.add('hide');
}

Contacts.extFb.initEventHandlers(social, contact, linked);

listContainer.appendChild(social);
}

Expand All @@ -296,10 +298,30 @@ contacts.Details = (function() {
i: tel
};
var template = utils.templates.render(phonesTemplate, telField);

// Add event listeners to the phone template components
var sendSmsButton = template.querySelector('#send-sms-button-' + tel);
sendSmsButton.dataset['tel'] = telField.value;
sendSmsButton.addEventListener('click', onSendSmsClicked);

var callOrPickButton = template.querySelector('#call-or-pick-' + tel);
callOrPickButton.dataset['tel'] = telField.value;
callOrPickButton.addEventListener('click', onCallOrPickClicked);

listContainer.appendChild(template);
}
};

var onSendSmsClicked = function onSendSmsClicked(evt) {
var tel = evt.target.dataset['tel'];
Contacts.sendSms(tel);
};

var onCallOrPickClicked = function onCallOrPickClicked(evt) {
var tel = evt.target.dataset['tel'];
Contacts.callOrPick(tel);
}

var renderEmails = function cd_renderEmails(contact) {
if (!contact.email) {
return;
Expand All @@ -313,10 +335,23 @@ contacts.Details = (function() {
i: email
};
var template = utils.templates.render(emailsTemplate, emailField);

// Add event listeners to the phone template components
var emailButton = template.querySelector('#email-or-pick-' + email);
emailButton.dataset['email'] = emailField.value;
emailButton.addEventListener('click', onEmailOrPickClick);

listContainer.appendChild(template);
}
};

var onEmailOrPickClick = function onEmailOrPickClick(evt) {
evt.preventDefault();
var email = evt.target.dataset['email'];
Contacts.sendEmailOrPick(email);
return false;
}

var renderAddresses = function cd_renderAddresses(contact) {
if (!contact.adr) {
return;
Expand Down

0 comments on commit d17fb1f

Please sign in to comment.