You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
RnQ/Distro/Template/viewinfo.htm

665 lines
23 KiB
HTML

<html window-icon="themepicsingle:info">
<head>
<include src="common.htm" />
<style src="viewinfo.css" />
<style src="customframe.css" />
<style id="dyncss" />
<script>
const Native = View.share.ViewInfoNative;
const commonSettings = View.share.commonSettings;
setupWindow(true, true, false);
view.minSize = [450, 520];
view.maxSize = [800, 800];
translateWindow("div[panel], label, button > span, .speedbutton > span, checkbox > span, radio > span");
var contact = view.parameters.contact,
viewInfo = {
itsMe: false
},
viewInfoData,
grouplist = $("#grouplist"),
aClrBkg = "",
aClrText = "",
pClrBkg = "",
pClrText = "";
function disableField(field) {
if (field.tag == "textarea" || field.style["behavior"] == "richtext" || (field.tag == "input" && field.attr["type"] == "text"))
field.state.readonly = true;
else
field.state.disabled = true;
}
function updateColoredCaption() {
if (!commonSettings.avatarUsePalette) return;
$("window-caption").text = view.caption;
var colors = Native.GetCaptionColors(contact);
if (!colors) return;
aClrBkg = colors.AvatarBack;
aClrText = colors.AvatarText;
pClrBkg = colors.PhotoBack;
pClrText = colors.PhotoText;
updatePalette();
}
function updateAvatarAndPhoto() {
updateColoredCaption();
updateAvatar();
updatePhoto();
}
function updateData() {
viewInfoData = Native.GetContactViewInfoData(contact);
view.caption = viewInfoData.caption;
var statuspic = $(".status > div[pic]");
statuspic.setIcon(viewInfoData.statusImg);
var xstatus = $(".xstatus");
xstatus.text = viewInfoData.xstatus;
xstatus.attr["title"] = viewInfoData.xstatustext;
var usertype = $("#m_usertype");
var utp;
switch (viewInfoData.userType) {
case 1: utp = "ICQ"; break;
case 2: utp = "Old ICQ"; break;
case 3: utp = "SMS"; break;
case 4: utp = "Phone"; break;
case 0: default: utp = _("Unknown"); break;
}
usertype.value = _(utp);
updateValues(viewInfoData.values);
}
function updateValues(values) {
// Main
if (values.m_birthl == -1) values.m_birthl = false;
$("form[name=common]").value = values;
if (values.m_birthl && values.m_birthl !== false) {
$("[name=m_birthl]").state.disabled = false;
$("[name=m_birthlchk]").state.checked = true;
} else {
$("[name=m_birthl]").state.disabled = true;
$("[name=m_birthlchk]").state.disabled = false;
}
// Phones
$("form[name=phones]").value = values;
//Avatar
$("div[panel=avatar]").style["display"] = commonSettings.supportAvatars ? "block" : "none";
$("form[name=avatar]").value = values;
//Extra
$("form[name=misc]").value = values;
//Client
$("form[name=client]").value = values;
function chunk(str, n) {
var ret = [], i, len;
len = str.length;
for (i = 0; i < len; i += n)
ret.push(str.substr(i, n))
return ret
}
if (values.caps_desc === "" && values.caps_hex === "") $("[name=c_caps]").html = "";
if (values.caps_desc && values.caps_hex) {
var capshex = [<div readonly="" class="caps_handle"></div>];
var hexcaps = values.caps_hex.split("\n");
var caps = [];
for (let hexcap of hexcaps) {
var hexcapt = chunk(hexcap.trim(), 2).join(" ");
if (hexcapt !== "") {
if (hexcap.trim().length == 4) {
caps.push(<span class="blended">09 46</span>);
caps.push(" " + hexcapt + " ");
caps.push(<span class="blended">4C 7F 11 D1 82 22 44 45 53 54 00 00</span>);
} else {
caps.push(hexcapt);
}
caps.push("\n");
}
}
capshex.push(<div class="caps_code">{caps}</div>);
var c_caps = $("[name=c_caps]");
c_caps.content([<div class="caps_hex">{capshex}</div>, <div class="caps_desc">{values.caps_desc}</div>]);
c_caps.content(CommonNative.HTMLDecode(c_caps.html));
$(".caps_desc").on("mousedown", function(e) {
if ($(".caps_hex").classList.contains("opened")) {
$(".caps_hex").classList.remove("opened");
let el = $(".caps_desc");
el.selection.collapse();
}
}).$("a[key]")?.on("click", function(e) {
Clipboard.writeText(this.attr["key"]);
this.state.disabled = true;
this.timer(3s, () => this.state.disabled = false);
});
$(".caps_handle").on("mousedown", function(e) {
if (!$(".caps_hex").classList.contains("opened")) {
$(".caps_hex").classList.add("opened");
let el = $(".caps_code");
el.selection.collapse();
}
return true;
});
}
//Notes
$("form[name=notes]").value = values;
document.timer(0, enableRetrieve);
enableRetrieve();
updateBirth();
updateColoredCaption();
updateAvatar();
updatePhoto();
}
function updatePalette() {
if (!commonSettings.supportAvatars || !commonSettings.avatarUsePalette) return;
var showType = $("form[name=avatar]").value.a_showtype;
if (showType === undefined) return;
var clrBkg = "#F0F0F0",
clrText = "#000",
clrTextFaded = "#999",
clrHoverBkg = Color.rgb(0, 0, 0, 0.1),
clrActiveBkg = Color.rgb(0, 0, 0, 0.2);
var coloredActive = false;
if (showType == 0 && aClrBkg !== "" && aClrText !== "") {
clrBkg = aClrBkg;
clrText = aClrText;
clrTextFaded = Color.morph(new Color(aClrText), new Color(aClrBkg), 0.6);
coloredActive = true;
} else if (showType == 1 && pClrBkg !== "" && pClrText !== "") {
clrBkg = pClrBkg;
clrText = pClrText;
clrTextFaded = Color.morph(new Color(pClrText), new Color(pClrBkg), 0.6);
coloredActive = true;
}
var opacity, blur;
if (coloredActive) {
applyActiveColor(new Color(clrBkg));
clrHoverBkg = Color.rgb(1, 1, 1, 0.2);
clrActiveBkg = Color.rgb(1, 1, 1, 0.3);
opacity = 0.66;
blur = "dark";
} else {
applyActiveColor(View.share.activeClr);
opacity = 0.5;
blur = "light ultra";
}
let tmpClr = new Color(clrBkg);
clrBkg = Color.rgb(tmpClr.r, tmpClr.g, tmpClr.b, opacity);
document.attr["window-blurbehind"] = blur;
view.blurBehind = blur;
var dyncss = $("style#dyncss");
dyncss.text = ".tabs > .strip { background: " + clrBkg.toString("rgba") + " }";
dyncss.text += ".tabs > .strip > [panel] { color: " + clrText + " }";
dyncss.text += "window-header { background-color: " + clrBkg.toString("rgba") + " }";
dyncss.text += "html[window-blurbehind=dark] { border-color: " + clrBkg.toString("rgba") + " !important }";
dyncss.text += "html:owns-focus window-caption { color: " + clrText + " !important }";
dyncss.text += "html:not(:owns-focus) window-caption { color: " + clrTextFaded.toString("rgb") + " !important }";
dyncss.text += "window-button[role=window-minimize] { stroke: " + clrText + " !important }";
dyncss.text += "window-button[role=window-minimize]:hover { background-color: " + clrHoverBkg.toString("rgba") + " !important }";
dyncss.text += "window-button[role=window-minimize]:active { background-color: " + clrActiveBkg.toString("rgba") + " !important }";
dyncss.text += "window-button[role=window-close]:not(:hover) { stroke: " + clrText + " !important }";
}
function updateAvatar() {
if (commonSettings.supportAvatars)
document.post(function() {
var url = "justavatar:" + contact;
document.loadImage(url, (image) => {
if (image !== null) {
document.bindImage(url, image);
$(".avclear").style["display"] = "block";
let img = $(".avatarimg > img");
img.attr["src"] = url;
img.classList.add("loaded");
} else {
$(".avclear").style["display"] = "none";
}
}, false);
});
}
function updatePhoto() {
if (commonSettings.supportAvatars)
document.post(() => {
var url = "justphoto:" + contact;
document.loadImage(url, (image) => {
if (image !== null) {
document.bindImage(url, image);
$(".tpclear").style["display"] = "block";
let img = $(".photoimg > img");
img.attr["src"] = url;
img.classList.add("loaded");
} else {
$(".tpclear").style["display"] = "none";
}
}, false);
});
}
function updateBirth() {
//$("[name=m_birth]").style["display"] = $("[name=m_age]").value == 0 ? "none" : "block";
updateAge();
}
function updateAge() {
var b = false;//$("[name=m_birth"]).value ? $("[name=m_birth]").value.valueOf()/1000 : false;
var bl = $("[name=m_birthl]").value ? $("[name=m_birthl]").value.valueOf()/1000 : false;
// if (b < 0) b = false;
// if (bl < 0) bl = false;
var years = Native.UpdateBirthAge(contact, 0/*$([name=m_age]).value*/, $("[name=m_birthlchk]").state.checked, b, bl);
$("#m_ageyears").text = years ? years : "";
//$("#m_ageyears").style["margin-left"] = $("[name=m_birth]").style["display"] == "none" ? "0" : "10px";
}
function saveLocalInfo() {
Native.SaveLocalInfo(
contact,
$("[name=m_display]").value,
$("[name=nl_important]").value,
$("[name=nl_notes]").value
);
}
$(".strip").on("click", "div[panel]", function(e, el) {
var strips = $$(".strip > div[selected]");
for (let strip of strips)
if (strip !== el) strip.removeAttribute("selected");
el.attr["selected"] = "";
var panels = $$(".panels > *[selected]");
for (let panel of panels)
panel.removeAttribute("selected");
$("[name=\""+ el.attr["panel"] + "\"]").attr["selected"] = "";
});
// $("[name=m_age]").on("change", function(e) {
// updateBirth();
// });
// $("[name=m_birth]").on("change", function(e) {
// updateBirth();
// });
$("[name=m_birthl]").on("change", function(e) {
updateBirth();
});
$("[name=e_nodbdelete]").on("change", function(e) {
Native.SetNoDBDelete(contact, this.value);
});
$("[name=c_translit]").on("change", function(e) {
this.timer(0.3s, function() { Native.SetTranslit(contact, this.value) });
});
function enableRetrieve() {
$("button.retrieve").state.disabled = false;
}
$("button.retrieve").on("click", function(e) {
Native.GetContactInfo(contact);
this.state.disabled = true;
document.timer(3s, enableRetrieve);
});
$("button.saveadd").on("click", function(e) {
if (viewInfo.itsMe) {
var values = [];
var data = {};
extend(data,
$("form[name=common]").value,
$("form[name=phones]").value,
$("form[name=misc]").value,
$("form[name=client]").value,
$("form[name=notes]").value
);
for (let [name, val] of Object.entries(data)) {
if (val !== undefined && (name.toString() == "m_birth" || name.toString() == "m_birthl"))
values.push([name.toString(), val.valueOf()/1000]);
else
values.push([name.toString(), val]);
}
function isTopProp(prop) {
return (prop == "m_age" || prop == "m_birthlchk"/* ||
prop == "e_interest1" || prop == "e_interest2" || prop == "e_interest3" || prop == "e_interest4"*/);
}
values = values.sort((a, b) => {
if (isTopProp(a[0]))
return -1;
else if (isTopProp(b[0]))
return 1;
else
return a[0].toLowerCase().localeCompare(b[0].toLowerCase());
});
saveLocalInfo();
Native.SaveServerInfo(contact, values);
} else {
var isInCL = Native.IsContactInCL(contact);
if (isInCL) {
showAlert("warning", "This contact is already in your list");
} else {
renderGroupLists(grouplist, true);
this.popup(grouplist, {
anchorAt: 9,
popupAt: 7
});
}
}
});
setMenuListener(grouplist, function() {
View.share.MainNative.AddContact(contact, parseInt(this.attr["groupid"]));
});
$("button.del").on("click", function(e) {
Native.DeleteContactFromList(contact);
});
// $(".mail").on("click", function(e) {
// if ($("[name=m_email]").value.trim() != "")
// view.load("mailto:" + $("[name=m_email]").value);
// });
// $(".hgo").on("click", function(e) {
// if ($("[name=h_homepage]").value.trim() != "")
// view.load("link:" + $("[name=h_homepage]").value);
// });
// $(".wgo").on("click", function(e) {
// if ($("[name=w_workpage]").value.trim() != "")
// view.load("link:" + $("[name=w_workpage]").value);
// });
$(".avload").on("click", function(e) {
$(".avatarimg > img").classList.remove("loaded");
Native.LoadAvatarAsync(contact);
});
$(".avclear").on("click", function(e) {
$(".avatarimg > img").classList.remove("loaded");
Native.ClearAvatarOrPhoto(contact, 0);
});
$(".tpclear").on("click", function(e) {
$(".photoimg > img").classList.remove("loaded");
Native.ClearAvatarOrPhoto(contact, 1);
});
$(".avchange").on("click", function(e) {
Native.ChangeAvatar();
});
$(".thumbload").on("click", function(e) {
$(".photoimg > img").classList.remove("loaded");
Native.LoadThumb(contact);
});
$(".photoload").on("click", function(e) {
$(".photoimg > img").classList.remove("loaded");
Native.LoadPhoto(contact);
});
// $(".applystatus").on("click", function(e) {
// Native.ApplyInfoStatus($("[name=w_lifestatus]").value);
// });
$("button.applynotes").on("click", function(e) {
var val = $("form[name=notes]").value;
Native.ApplyNotes(contact, val.ns_important, val.ns_nickname, val.ns_sms, val.ns_cell1, val.ns_cell2, val.ns_cell3);
});
$("form[name=avatar]").on("change", function(e) {
if (e.target.tag == "radio")
Native.SetIconShowType(contact, e.target.value);
});
$("button.nicklink").on("click", function(e) {
CommonNative.OpenLink("https://icq.im/" + $("[name=m_nick]").value);
});
$("button.verify").on("click", function(e) {
Native.VerifyPhone();
});
$("[name=m_birthlchk]").on("change", function(e) {
$("[name=m_birthl]").state.disabled = !this.state.checked;
updateBirth();
})
var minDate = Date.UTC(1901, 12, 17);
var now = new Date();
var maxDate = new Date(now.year, now.month, now.day);
document.on("change", function(e) {
if (e.target.tag == "input" &&
e.target.attr["type"] == "date") {
if (!e.target.value || e.target.state.readonly) return;
if (e.target.attr["limited"] == "true")
if (e.target.value.valueOf() < minDate.valueOf()) e.target.value = minDate;
if (e.target.value.valueOf() > maxDate.valueOf()) e.target.value = maxDate;
}
}).on("keydown", (e) => {
if (e.keyCode == Event.VK_ESCAPE || (e.ctrlKey && e.keyCode == Event.VK_W)) {
saveLocalInfo();
view.close();
return true;
}
}).post(() => {
$(".panels").classList.remove("hidden");
});
viewInfo = Native.GetContactViewInfo(contact);
var saveaddpic = $("button.saveadd > div[pic]");
saveaddpic.setIcon(viewInfo.itsMe ? "save.net" : "add.contact");
//for (var gender in viewInfo.genders)
//$([name=m_gender]).options.append();
//for (var marital in viewInfo.maritals)
//$([name=m_marital]).options.append();
// for (var bd in viewInfo.birthday)
// $([name=m_age]).options.append();
// for (var lang in viewInfo.langs) {
// var str = ;
// $([name=m_lang1]).options.append(str);
// $([name=m_lang2]).options.append(str);
// $([name=m_lang3]).options.append(str);
// }
// for (var gmt in viewInfo.gmts)
// $([name=m_gmt]).options.append();
// for (var country in viewInfo.countries) {
// var str = ;
// $([name=h_country]).options.append(str);
// }
/*
for (var interest in viewInfo.interests) {
var str = ;
$([name=e_interest1]).options.append(str);
$([name=e_interest2]).options.append(str);
$([name=e_interest3]).options.append(str);
$([name=e_interest4]).options.append(str);
}
*/
$("button.saveadd > span").text = _(viewInfo.itsMe ? 'Save my info' : 'Add to list');
var alwaysEnabled = ["m_display", "m_birthlchk", "a_showtype",
"ns_nickname", "ns_sms", "ns_cell1", "ns_cell2", "ns_cell3",
"nl_important", "nl_notes"];
var alwaysDisabled = ["ns_important", "m_status", "m_uin", "m_usertype",
"e_lastmsgtime", "e_lastonlinetime", "e_onlinesince", "e_regon",
"e_infoupd", "e_lastinfoupd", "e_group", "e_uinlists", "e_group",
"c_client", "c_caps", "c_attachedmail",
"p_cellular", "p_home", "p_work", "p_other", "m_marital"];
var fields = $$("form input, form select, form textarea");
for (var field of fields)
if (!viewInfo.itsMe &&
alwaysEnabled.indexOf(field.attr["name"]) == -1 ||
alwaysDisabled.indexOf(field.attr["name"]) > -1)
disableField(field);
if (viewInfo.itsMe) {
disableField($("[name=ns_nickname]"));
$("[name=e_nodbdelete]").setVisible(false);
$("[name=c_translit]").setVisible(false);
$("#translit").setVisible(false);
$(".del").setVisible(false);
} else {
$("#c_amfl").setVisible(false);
$("[name=c_attachedmail]").setVisible(false);
$(".avchange").setVisible(false);
$(".verify").setVisible(false);
}
updateData();
// $("[name=w_lifestatus]").state.readonly = !viewInfo.itsMe;
// $(".applystatus").state.disabled = !viewInfo.itsMe;
document.on("closerequest", (e) => {
if (e.reason !== Event.REASON_BY_CODE) saveLocalInfo();
}).post(() => {
if (commonSettings.avatarUsePalette) {
view.frameType = "solid-with-shadow";
document.classList.add("customframe");
}
if (view.state == Window.WINDOW_HIDDEN) view.state = Window.WINDOW_SHOWN;
view.focus = $("button.retrieve")
})
</script>
</head>
<window-header>
<div role="window-caption" class="icon" pic="info" auto></div>
<window-caption role="window-caption"></window-caption>
<window-buttons>
<window-button role="window-minimize"></window-button>
<window-button role="window-close"></window-button>
</window-buttons>
</window-header>
<body>
<div class="tabs">
<div class="strip">
<div panel="common" selected>Main</div>
<div panel="phones">Phones</div>
<div panel="misc">Extra</div>
<div panel="client">Client</div>
<div panel="notes">Notes</div>
<div panel="avatar">Avatar</div>
</div>
<div class="panels" class="hidden">
<form name="common" selected>
<label>UIN</label><div class="dual"><input uwp light type="text" name="m_uin" /><label>Type</label><input uwp light type="text" id="m_usertype" /></div>
<label>Displayed</label><input uwp light type="text" name="m_display" />
<label>Nick</label><div class="dual"><input uwp light type="text" name="m_nick" /><button uwp withpic light class="nicklink" title="Open profile page"><div auto pic="webinfo"></div></button></div>
<label>First name</label><input uwp light type="text" name="m_firstname" />
<label>Last name</label><input uwp light type="text" name="m_lastname" />
<label>Age</label>
<div><input uwp light nomargin type="date" name="m_birthl" /><checkbox uwp light nolabel name="m_birthlchk" /><label id="m_ageyears"></label></div>
<div class="statusdiv">
<label>Status</label>
<div class="status"><div pic="offline"></div></div>
<div class="xstatus"></div>
</div>
<textarea uwp light wrap spellcheck="false" name="m_status"></textarea>
<label class="withpadding">About</label><dummy />
<textarea uwp light wrap spellcheck="false" name="m_about"></textarea>
</form>
<form name="phones">
<label>Mobile</label><input uwp light type="text" name="p_cellular" />
<label>Home phone</label><input uwp light type="text" name="p_home" />
<label>Work phone</label><input uwp light type="text" name="p_work" />
<label>Other phone</label><input uwp light type="text" name="p_other" />
<div class="withpadding"><button uwp right withpic light class="verify"><div auto pic="url"></div><span>Add verified number</span></button></div>
</form>
<form name="misc">
<label>Group</label><input uwp light type="text" name="e_group" />
<label>Last message time</label><input uwp light type="text" name="e_lastmsgtime" />
<label>Last time seen online</label><input uwp light type="text" name="e_lastonlinetime" />
<label>Online since</label><input uwp light type="text" name="e_onlinesince" />
<label>Registered on</label><input uwp light type="text" name="e_regon" />
<label>Info changed</label><input uwp light type="text" name="e_infoupd" />
<label>Last info update</label><input uwp light type="text" name="e_lastinfoupd" />
<label class="withpadding">UIN-lists</label><dummy/>
<textarea uwp light wrap spellcheck="false" name="e_uinlists"></textarea>
<checkbox uwp light name="e_nodbdelete"><span>Don't delete from database</span></button>
</form>
<form name="client">
<label>Client</label><input uwp light type="text" name="c_client" />
<label id="translit">Transliterate russian messages</label><checkbox uwp light nolabel name="c_translit" />
<label id="c_amfl">Attached phone for login</label>
<input uwp light type="text" name="c_attachedmail" />
<label class="withpadding">Client capabilities</label><dummy/>
<div name="c_caps" readonly></div>
</form>
<form name="notes">
<label class="withtoppadding">Server side</label><dummy/>
<label>Important</label><input uwp light type="text" name="ns_important" />
<label>Nickname</label><input uwp light type="text" name="ns_nickname" />
<label>Cellular (SMS)</label><input uwp light type="text" name="ns_sms" />
<label>Home phone</label><input uwp light type="text" name="ns_cell2" />
<label>Work phone</label><input uwp light type="text" name="ns_cell1" />
<label>Other phone</label><input uwp light type="text" name="ns_cell3" />
<div class="withpadding"><button uwp light right withpic class="applynotes"><div auto pic="apply"></div><span>Apply</span></button></div>
<label class="withtoppadding">Local data</label><dummy />
<label>Important</label><input uwp light type="text" name="nl_important" />
<textarea uwp light wrap spellcheck="false" name="nl_notes"></textarea>
</form>
<form name="avatar">
<radio uwp light as="integer" name="a_showtype" value="0"><span>Avatar</span></radio>
<div>
<div class="avatarimg"><img /></div>
<div class="avatarbtns">
<button uwp withpic light class="avload"><div auto pic="load.net"></div><span>Load avatar</span></button>
<button uwp withpic light class="avchange"><div auto pic="save.net"></div><span>Change own avatar</span></button>
<button uwp withpic light class="avclear"><div auto pic="delete"></div><span>Clear avatar</span></button>
</div>
</div>
<radio uwp light as="integer" name="a_showtype" value="1"><span>Photo</span></radio>
<div>
<div class="photoimg"><img /></div>
<div class="photobtns">
<button uwp withpic light class="thumbload"><div auto pic="load.net"></div><span>Load thumb</span></button>
<button uwp withpic light class="photoload"><div auto pic="load.net"></div><span>Load photo</span></button>
<button uwp withpic light class="tpclear"><div auto pic="delete"></div><span>Clear photo</span></button>
</div>
</div>
<radio uwp light as="integer" name="a_showtype" value="2"><span>None</span></button>
</form>
</div>
</div>
<div class="buttonPanel">
<button uwp withpic light class="del"><div auto pic="delete"></div><span>Delete from list</span></button>
<button uwp withpic light right class="saveadd"><div auto pic="add.contact"></div><span>Save info</span></button>
<button uwp withpic light class="retrieve"><div auto pic="load.net"></div><span>Retrieve info</span></button>
</div>
<menu id="grouplist" class="context custom"></menu>
</body>
</html>