set height input
This commit is contained in:
parent
c56855e8c7
commit
8241badf0c
|
|
@ -6,11 +6,12 @@ const port = chrome.runtime.connect({ name: "message" });
|
||||||
|
|
||||||
const contentService = new ContentService(port);
|
const contentService = new ContentService(port);
|
||||||
|
|
||||||
console.log({ a: import.meta.env.VITE_API_URL });
|
|
||||||
|
|
||||||
port.onMessage.addListener((msg: IMsg<any>) => {
|
port.onMessage.addListener((msg: IMsg<any>) => {
|
||||||
console.log({ msg });
|
console.log({ msg });
|
||||||
|
|
||||||
|
// Set height input chat tager cho nó ra dễ click
|
||||||
|
contentService.fixedHeightChatInput();
|
||||||
|
|
||||||
if (msg.type !== "socket") return;
|
if (msg.type !== "socket") return;
|
||||||
|
|
||||||
switch (msg.event) {
|
switch (msg.event) {
|
||||||
|
|
|
||||||
|
|
@ -13,6 +13,48 @@ export class ContentService {
|
||||||
this.service = new TeamsChatService();
|
this.service = new TeamsChatService();
|
||||||
this.port = port;
|
this.port = port;
|
||||||
}
|
}
|
||||||
|
_forceHeightObserver: any;
|
||||||
|
|
||||||
|
getElementByXPath(xpath: string) {
|
||||||
|
return document.evaluate(
|
||||||
|
xpath,
|
||||||
|
document,
|
||||||
|
null,
|
||||||
|
XPathResult.FIRST_ORDERED_NODE_TYPE,
|
||||||
|
null
|
||||||
|
).singleNodeValue;
|
||||||
|
}
|
||||||
|
|
||||||
|
forceHeight(el: HTMLElement, height = "100px") {
|
||||||
|
if (!el) return;
|
||||||
|
|
||||||
|
el.style.setProperty("height", height, "important");
|
||||||
|
|
||||||
|
// Gỡ bỏ auto-resize (nếu là textarea)
|
||||||
|
el.style.setProperty("resize", "none", "important");
|
||||||
|
|
||||||
|
// Lặp lại khi element bị focus/input
|
||||||
|
const keepHeight = () => {
|
||||||
|
el.style.setProperty("height", height, "important");
|
||||||
|
};
|
||||||
|
|
||||||
|
el.addEventListener("focus", keepHeight);
|
||||||
|
el.addEventListener("input", keepHeight);
|
||||||
|
el.addEventListener("blur", keepHeight);
|
||||||
|
|
||||||
|
// Thêm mutation observer nếu bị script khác chỉnh sửa
|
||||||
|
const observer = new MutationObserver(() => {
|
||||||
|
el.style.setProperty("height", height, "important");
|
||||||
|
});
|
||||||
|
|
||||||
|
observer.observe(el, {
|
||||||
|
attributes: true,
|
||||||
|
attributeFilter: ["style"],
|
||||||
|
});
|
||||||
|
|
||||||
|
// Lưu lại để debug nếu cần
|
||||||
|
this._forceHeightObserver = observer;
|
||||||
|
}
|
||||||
|
|
||||||
private _clickToConversation(id: string) {
|
private _clickToConversation(id: string) {
|
||||||
const el = document.getElementById(`chat-list-item_${id}`);
|
const el = document.getElementById(`chat-list-item_${id}`);
|
||||||
|
|
@ -270,4 +312,26 @@ export class ContentService {
|
||||||
await typeingService.send(message);
|
await typeingService.send(message);
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
fixedHeightChatInput(retry = 20, interval = 1000) {
|
||||||
|
const tryFind = () => {
|
||||||
|
const el = this.getElementByXPath(
|
||||||
|
this.service.elTags.chat_input
|
||||||
|
) as HTMLElement;
|
||||||
|
|
||||||
|
if (el) {
|
||||||
|
this.forceHeight(el, "100px");
|
||||||
|
console.log("✔ Fixed height applied to chat input");
|
||||||
|
} else if (retry > 0) {
|
||||||
|
setTimeout(
|
||||||
|
() => this.fixedHeightChatInput(retry - 1, interval),
|
||||||
|
interval
|
||||||
|
);
|
||||||
|
} else {
|
||||||
|
console.warn("✘ Element not found with provided XPath after retries");
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
tryFind();
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -17,6 +17,8 @@ export class TeamsChatService {
|
||||||
close_reply_btn:
|
close_reply_btn:
|
||||||
"/html/body/div[1]/div/div/div/div[6]/div[4]/div/div[1]/div/div[3]/div/div[3]/div/div[2]/div/div[2]/div/div/card/div/div/div[2]/div/div[1]/button",
|
"/html/body/div[1]/div/div/div/div[6]/div[4]/div/div[1]/div/div[3]/div/div[3]/div/div[2]/div/div[2]/div/div/card/div/div/div[2]/div/div[1]/button",
|
||||||
reply_btn: '[aria-label="Reply"]',
|
reply_btn: '[aria-label="Reply"]',
|
||||||
|
chat_input:
|
||||||
|
"/html/body/div[1]/div/div/div/div[6]/div[4]/div/div[1]/div/div[3]/div/div[3]/div/div[2]/div/div[2]/div[1]/div",
|
||||||
};
|
};
|
||||||
|
|
||||||
public getCurrentRoomInfo(): { room_id?: string; room_name?: string } {
|
public getCurrentRoomInfo(): { room_id?: string; room_name?: string } {
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue