profile vcard - preliminary work

view/css/mod_profile.css

@@ -5,3 +5,111 @@
 .profile-thing-img {
 	margin: 7px 0px;
 }
+
+.vcard-header {
+	cursor: pointer;
+	padding: 7px 10px;
+	margin-bottom: 3px;
+}
+
+.vcard-header:hover,
+.vcard-header.active {
+	background-color: rgb(238,238,238);
+	cursor: pointer;
+}
+
+.vcard-header.active:hover {
+	cursor: initial;
+}
+
+.vcard-add-field {
+	margin-top: 8px;
+	display: none;
+}
+
+.vcard-cancel {
+	margin: 6px 10px;
+	height: 32px;
+	line-height: 32px;
+	color: #777;
+	font-size: 16px;
+
+	cursor: pointer;
+	display: none;
+	float: right;
+}
+
+.vcard-info {
+	display: none;
+}
+
+.vcard-nophoto {
+	display: inline-block;
+	width: 32px;
+	height: 32px;
+	border-radius: 4px;
+	border: 1px solid #ccc;
+	text-align: center;
+	font-size: 20px;
+	color: #fff;
+	background-color: #ddd;
+}
+
+.vcard-photo {
+	width: 32px;
+	height: 32px;
+	border-radius: 4px;
+	border: 1px solid #ccc;
+	text-align: center;
+}
+
+.vcard-fn-preview,
+input.vcard-fn {
+	font-size: 16px !important;
+	margin-left: 5px;
+}
+
+.vcard-email-preview,
+.vcard-tel-preview {
+	color: #999;
+}
+
+
+.vcard-fn,
+#create_form,
+#more_block {
+	display: none;
+}
+
+input.vcard-fn,
+.vcard-fn-create input,
+.vcard-org input,
+.vcard-title input,
+.vcard-tel input,
+.vcard-email input,
+.vcard-impp input,
+.vcard-url input,
+.vcard-adr input,
+.vcard-note input {
+	padding: 0px;
+	margin-left: 5px;
+	border-width: 0px 0px 1px 0px;
+	border-radius: 0px;
+	background-color: transparent;
+	min-width: 160px;
+}
+
+#template-form-vcard-org,
+#template-form-vcard-title,
+#template-form-vcard-tel,
+#template-form-vcard-email,
+#template-form-vcard-impp,
+#template-form-vcard-url,
+#template-form-vcard-adr,
+#template-form-vcard-note {
+	display: none;
+}
+
+.connphone {
+	color: green;
+}

view/css/mod_profiles.css

@@ -29,3 +29,110 @@
 	height: 48px;
 	margin: 10px 0px;
 }
+.vcard-header {
+	cursor: pointer;
+	padding: 7px 10px;
+	margin-bottom: 3px;
+}
+
+.vcard-header:hover,
+.vcard-header.active {
+	background-color: rgb(238,238,238);
+	cursor: pointer;
+}
+
+.vcard-header.active:hover {
+	cursor: initial;
+}
+
+.vcard-add-field {
+	margin-top: 8px;
+	display: none;
+}
+
+.vcard-cancel {
+	margin: 6px 10px;
+	height: 32px;
+	line-height: 32px;
+	color: #777;
+	font-size: 16px;
+
+	cursor: pointer;
+	display: none;
+	float: right;
+}
+
+.vcard-info {
+	display: none;
+}
+
+.vcard-nophoto {
+	display: inline-block;
+	width: 32px;
+	height: 32px;
+	border-radius: 4px;
+	border: 1px solid #ccc;
+	text-align: center;
+	font-size: 20px;
+	color: #fff;
+	background-color: #ddd;
+}
+
+.vcard-photo {
+	width: 32px;
+	height: 32px;
+	border-radius: 4px;
+	border: 1px solid #ccc;
+	text-align: center;
+}
+
+.vcard-fn-preview,
+input.vcard-fn {
+	font-size: 16px !important;
+	margin-left: 5px;
+}
+
+.vcard-email-preview,
+.vcard-tel-preview {
+	color: #999;
+}
+
+
+.vcard-fn,
+#create_form,
+#more_block {
+	display: none;
+}
+
+input.vcard-fn,
+.vcard-fn-create input,
+.vcard-org input,
+.vcard-title input,
+.vcard-tel input,
+.vcard-email input,
+.vcard-impp input,
+.vcard-url input,
+.vcard-adr input,
+.vcard-note input {
+	padding: 0px;
+	margin-left: 5px;
+	border-width: 0px 0px 1px 0px;
+	border-radius: 0px;
+	background-color: transparent;
+	min-width: 160px;
+}
+
+#template-form-vcard-org,
+#template-form-vcard-title,
+#template-form-vcard-tel,
+#template-form-vcard-email,
+#template-form-vcard-impp,
+#template-form-vcard-url,
+#template-form-vcard-adr,
+#template-form-vcard-note {
+	display: none;
+}
+
+.connphone {
+	color: green;
+}

view/js/mod_profiles.js

@@ -1,4 +1,70 @@
 $(document).ready(function() {
 	$('form').areYouSure(); // Warn user about unsaved settings
 	$('textarea').bbco_autocomplete('bbcode');
+
+	$(document).on('click', '.vcard-header, .vcard-cancel-btn', updateView);
+	$(document).on('click', '.add-field', doAdd);
+	$(document).on('click', '.remove-field', doRemove);
+
+	function updateView() {
+		var id = $(this).data('id');
+		var action = $(this).data('action');
+		var header = $('#vcard-header-' + id);
+		var cancel = $('#vcard-cancel-' + id);
+		var addField = $('#vcard-add-field-' + id);
+		var info = $('#vcard-info-' + id);
+		var vcardPreview = $('#vcard-preview-' + id);
+		var fn = $('#vcard-fn-' + id);
+
+		if(action === 'open') {
+			$(header).addClass('active');
+			$(cancel).show();
+			$(addField).show();
+			$(info).show();
+			$(fn).show();
+			$(vcardPreview).hide();
+		}
+		else {
+			$(header).removeClass('active');
+			$(cancel).hide();
+			$(addField).hide();
+			$(info).hide();
+			$(fn).hide();
+			$(vcardPreview).show();
+		}
+	}
+
+	function doAdd() {
+		var what = $(this).data('add');
+		var id = $(this).data('id');
+		var element = '#template-form-' + what;
+		var where = '#abook-edit-form';
+
+		$(element + ' .remove-field').attr('data-id', id)
+
+		if(what === 'vcard-adr') {
+			var adrCount = $(where + ' .form-' + what).length;
+			var attrName = 'adr[' + adrCount + '][]';
+			$(element + ' input').attr('name', attrName);
+		}
+
+		if(what === 'vcard-org' || what === 'vcard-title' || what === 'vcard-note') {
+			$(where + ' .add-' + what).hide()
+		}
+
+		$(element).clone().removeAttr('id').appendTo(where + ' .form-' + what + '-wrapper');
+	}
+
+	function doRemove() {
+		var what = $(this).data('remove');
+		var element = $(this).parents('div.form-' + what);
+		var where = '#abook_edit_form' + $(this).data('id');
+
+		if(what === 'vcard-org' || what === 'vcard-title' || what === 'vcard-note') {
+			$(where + ' .add-' + what).show()
+		}
+
+		$(element).remove();
+	}
+
 });