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.
247 lines
8.0 KiB
HTML
247 lines
8.0 KiB
HTML
<html window-icon="themepicsingle:stickers">
|
|
<head>
|
|
<include src="common.htm" />
|
|
<style src="stickersmgr.css" />
|
|
<style id="dyncss" />
|
|
<script>
|
|
view.isMaximizable = false;
|
|
view.minSize = [500, 200];
|
|
|
|
translateWindow("menu.custom li > span");
|
|
|
|
const ChatNative = View.share.ChatNative;
|
|
|
|
var page = "my",
|
|
startup = $("#startup"),
|
|
stickerpacks1 = $("#stickerpacks1"),
|
|
stickerpacks2 = $("#stickerpacks2"),
|
|
preview = $("#preview"),
|
|
btns1 = $("#btns1"),
|
|
btns2 = $("#btns2"),
|
|
query = $("#query"),
|
|
packmenu = $("#packmenu");
|
|
|
|
startup.html = _("No sticker packs are currently loaded |
|
$("#loadpacks").text = _("Update list from store");
|
|
$("#close").text = _("Close");
|
|
$("#goback").text = _("Go back");
|
|
stickerpacks2.attr["searching"] = _("Searching...");
|
|
stickerpacks2.attr["notfound"] = _("Nothing can be found");
|
|
var numberOf = _("Number of stickers");
|
|
var authorUser = _("Added by user");
|
|
var authorICQ = _("Added by ICQ team");
|
|
var buyIn = _("Add pack");
|
|
var buyOut = _("Remove pack");
|
|
|
|
function InitSearchButton() {
|
|
this.on("click", (e) => {
|
|
sendQuery();
|
|
query.state.focus = true;
|
|
});
|
|
}
|
|
|
|
function getStickerLink(lottie, id) {
|
|
if (id == "") return id;
|
|
return (lottie ? "https://cicq.org/lottie_original/" : "https://ub.icq.net/files/preview/max/listicon_small/") + id;
|
|
//https://cicq.org/lottie_preview/listicon_large/
|
|
}
|
|
|
|
function getLottieStickerLink(link) {
|
|
return "https://cicq.org/lottie_preview/listicon_large/"
|
|
}
|
|
|
|
var iconICQ = "themepic:sticker_icq";
|
|
var iconUser = "themepic:sticker_user";
|
|
|
|
function makePackOption(pack) {
|
|
var isLottie = pack.ContentType == "animated";
|
|
var lasticon = isLottie ? pack.ListIconLink.replace("ub.icq.net/api/v1/files/sticker", "cicq.org/lottie_original/") : pack.ListIconLink;
|
|
var icon = pack.Content && pack.Content.length > 0 ? getStickerLink(isLottie, pack.Content[0]) : lasticon;
|
|
var img = isLottie ? <lottie class="picker" src={icon ? icon : ""} autoplay loop /> : <img class="picker" src={icon ? icon : ""} />;
|
|
return <option pack={pack.Id} storeid={pack.StoreId} count={pack.Count} lottie={isLottie}>
|
|
{img}
|
|
<div class="caption"><span class="name">{pack.Name}</span><span>{numberOf}: {pack.Count}</span></div>
|
|
<div class="actions">
|
|
<img class="purchase" action={pack.Purchased ? "sell" : "buy"} src={"themepic:sticker_" + (pack.Purchased ? "sell" : "buy")} title={pack.Purchased ? buyOut : buyIn} />
|
|
<img class="author" src={pack.UserSticker ? iconUser : iconICQ} title={(pack.UserSticker ? authorUser : authorICQ) + (pack.length > 6 && pack.Desc ? " [" + pack.Desc + "]" : "")} />
|
|
</div>
|
|
</option>;
|
|
}
|
|
|
|
function refreshPage(newpage = "none") {
|
|
if (newpage !== "none") page = newpage;
|
|
if (page === "my") {
|
|
if (stickerpacks1.length > 0) {
|
|
stickerpacks1.classList.remove("hidden");
|
|
startup.classList.add("hidden");
|
|
} else {
|
|
stickerpacks1.classList.add("hidden");
|
|
startup.classList.remove("hidden");
|
|
}
|
|
stickerpacks2.classList.add("hidden");
|
|
btns1.classList.remove("hidden");
|
|
btns2.classList.add("hidden");
|
|
} else {
|
|
startup.classList.add("hidden");
|
|
stickerpacks1.classList.add("hidden");
|
|
stickerpacks2.classList.remove("hidden");
|
|
btns1.classList.add("hidden");
|
|
btns2.classList.remove("hidden");
|
|
}
|
|
}
|
|
|
|
function refreshSearchState(state = "none") {
|
|
if (state === "notfound") {
|
|
stickerpacks2.classList.add("notfound")
|
|
stickerpacks2.classList.remove("searching");
|
|
} else if (state === "searching") {
|
|
stickerpacks2.classList.remove("notfound")
|
|
stickerpacks2.classList.add("searching");
|
|
} else {
|
|
stickerpacks2.classList.remove("notfound")
|
|
stickerpacks2.classList.remove("searching");
|
|
}
|
|
}
|
|
|
|
function execSearch(clear = true) {
|
|
if (clear) {
|
|
stickerpacks2.clear();
|
|
refreshSearchState("searching");
|
|
}
|
|
ChatNative.SearchStickerPacks(query.value);
|
|
}
|
|
|
|
function sendQuery() {
|
|
if (query.value.trim() == "") return;
|
|
if (!CommonNative.CheckOnline()) return;
|
|
execSearch();
|
|
refreshPage("search");
|
|
}
|
|
|
|
view.updateMyStickerPacks = function() {
|
|
if (page == "search") execSearch(false);
|
|
|
|
var packs = ChatNative.GetStickerPacks();
|
|
if (!packs || packs.length == 0) return;
|
|
|
|
$("#loadpacks").state.disabled = false;
|
|
startup.classList.add("hidden");
|
|
|
|
stickerpacks1.clear();
|
|
for (let pack of packs)
|
|
stickerpacks1.append(makePackOption(pack));
|
|
|
|
refreshPage();
|
|
}
|
|
|
|
function openPackPreview(pack, count, lottie) {
|
|
preview.clear();
|
|
var content = ChatNative.GetStickerPackContent(pack);
|
|
if (!content || content.length == 0) return;
|
|
for (let sticker of content)
|
|
if (lottie)
|
|
preview.append(<lottie src={getStickerLink(true, sticker)} autoplay loop />);
|
|
else
|
|
preview.append(<img src={getStickerLink(false, sticker)} />);
|
|
preview.classList.remove("invisible");
|
|
preview.scrollTo(0, 0, false);
|
|
}
|
|
|
|
$("#query").attr["novalue"] = _("Stickers search");
|
|
|
|
var dyncss = $("style#dyncss");
|
|
dyncss.text = ".search > .searchbtn:hover { foreground-image-transformation: colorize(" + (View.share.activeClr ? View.share.activeClr.toString("RGB") : "#666") + ") brightness(0.05); }";
|
|
|
|
view.updateMyStickerPacks();
|
|
view.updateSearchResults = function(packs) {
|
|
stickerpacks2.clear();
|
|
if (!packs || packs.length == 0) {
|
|
refreshSearchState("notfound");
|
|
} else {
|
|
refreshSearchState();
|
|
for (let pack of packs)
|
|
stickerpacks2.append(makePackOption(pack));
|
|
}
|
|
}
|
|
view.startStickersSearch = function(qry) {
|
|
query.value = qry;
|
|
if (CommonNative.CheckOnline()) execSearch();
|
|
refreshPage("search");
|
|
}
|
|
|
|
preview.on("click", () => {
|
|
preview.classList.add("invisible");
|
|
document.post(() => preview.clear());
|
|
return true;
|
|
});
|
|
|
|
$("#loadpacks").on("click", function() {
|
|
if (!CommonNative.CheckOnline()) return;
|
|
this.state.disabled = true;
|
|
ChatNative.GetStoreStickerPacks();
|
|
});
|
|
$("#close").on("click", () => view.close());
|
|
|
|
$("#goback").on("click", () => {
|
|
refreshSearchState();
|
|
refreshPage("my");
|
|
});
|
|
|
|
document.on("click", ".picker, .caption", (e) => {
|
|
var opt = e.target.$p("option");
|
|
openPackPreview(opt.attr["pack"], opt.attr["count"], opt.attr["lottie"] == "true");
|
|
return true;
|
|
}).on("click", ".purchase", (e) => {
|
|
if (!CommonNative.CheckOnline()) return;
|
|
var opt = e.target.$p("option");
|
|
if (e.target.attr["action"] == "buy")
|
|
ChatNative.BuyStickerPack(opt.attr["pack"]);
|
|
else
|
|
ChatNative.RemoveStickerPack(opt.attr["pack"]);
|
|
return true;
|
|
}).on("~mouseup", "option", (e, el) => {
|
|
if (!e.propButton || !el.attr["storeid"] || el.attr["storeid"] == "") return;
|
|
packmenu.attr["storeid"] = el.attr["storeid"];
|
|
$("#storeid").text = "[" + el.attr["storeid"] + "]";
|
|
var [x, y] = view.box("position", "cursor");
|
|
el.popup(packmenu, { x: x, y: y });
|
|
}).on("keydown", (e) => {
|
|
if (e.keyCode == Event.VK_ESCAPE || (e.ctrlKey && e.keyCode == Event.VK_W)) {
|
|
view.close();
|
|
return true;
|
|
}
|
|
});
|
|
|
|
packmenu.on("click", (e) => {
|
|
if (e.target.id == "copyid")
|
|
Clipboard.writeText(packmenu.attr["storeid"]);
|
|
else if (e.target.id == "copylink")
|
|
Clipboard.writeText("https://cicq.org/s/" + packmenu.attr["storeid"]);
|
|
});
|
|
|
|
query.on("keyup", (e) => {
|
|
if (e.keyCode == Event.VK_RETURN) sendQuery();
|
|
});
|
|
</script>
|
|
</head>
|
|
<body>
|
|
<div class="search">
|
|
<input uwp wide id="query" /><div class="searchbtn"></div>
|
|
</div>
|
|
<select type="list" as="string" class="vlist hidden" id="stickerpacks1"></select>
|
|
<select type="list" as="string" class="vlist hidden" id="stickerpacks2" notfound="" searching=""></select>
|
|
<div id="startup"></div>
|
|
<div id="preview" class="invisible"></div>
|
|
<div class="bottombtns" id="btns1">
|
|
<button uwp id="loadpacks" tabindex="2"></button>
|
|
<button uwp right id="close" tabindex="1"></button>
|
|
</div>
|
|
<div class="bottombtns hidden" id="btns2">
|
|
<button uwp right id="goback" tabindex="3"></button>
|
|
</div>
|
|
<menu class="context custom" id="packmenu">
|
|
<li id="copyid"><div auto pic="copy"></div><span>Copy pack ID</span> <span id="storeid"></span></li>
|
|
<li id="copylink"><div auto pic="url"></div><span>Copy link to this pack</span></li>
|
|
</menu>
|
|
</body>
|
|
</html> |