123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472 |
- (function(){
- function module_init() {
- console.log("[lora-prompt-tool] load context menu module");
- lorahelper.lorahelper_context_menu = null;
- lorahelper.lorahelper_context_menu_list = null;
- lorahelper.lorahelper_context_menu_edit_btn = null;
- lorahelper.lorahelper_context_menu_search_box = null;
- lorahelper.lorahelper_sub_context_menu = null;
- lorahelper.lorahelper_context_menu_opt = null;
-
- lorahelper.context_menu_list = [];
- lorahelper.context_menu_search_box_item = null;
-
- lorahelper.lorahelper_context_menu_search_text = "";
- lorahelper.lorahelper_context_menu_search_lock = false;
-
- lorahelper.lorahelper_mouse_position = {x: -1, y: -1};
- function updateLoraHelperSearchingBox(event){
- if(lorahelper.lorahelper_context_menu_search_lock){
- return;
- }
- if(lorahelper.lorahelper_context_menu_search_text == lorahelper.lorahelper_context_menu_search_box.value){
- return;
- }
- lorahelper.lorahelper_context_menu_search_lock = true;
- lorahelper.lorahelper_context_menu_search_text = lorahelper.lorahelper_context_menu_search_box.value;
- let filter = lorahelper.lorahelper_context_menu_search_text.trim();
- const menu_list = lorahelper.lorahelper_context_menu_list.querySelectorAll('.item');
- if(filter === ""){
- for(const menu_item of menu_list){
- menu_item.style.display = "block";
- }
- lorahelper.lorahelper_context_menu_search_lock = false;
- return;
- }
- let is_regex = false;
- if(filter.charAt(filter.length-1) == filter.charAt(0) && filter.charAt(0) == "/" && filter.length >= 2){
- try {
- const reg_filter = filter.substring(1, filter.length-1);
- if(reg_filter !== ""){
- filter = new RegExp(reg_filter);
- is_regex = true;
- }
- } catch (error) {
- is_regex = false;
- }
- }
- if(!is_regex){
- filter = filter.toLowerCase();
- if(filter.indexOf("\\") > -1){
- try {
- filter = lorahelper.unescape_string(filter);
- } catch (error) {
-
- }
- }
- }
-
- for(const menu_item of menu_list){
- if(menu_item.classList.contains('edit-btn')) continue;
- let flag = false;
- const find_areas = [
- menu_item.innerHTML || "",
- menu_item.getAttribute("prompt") || "",
- menu_item.getAttribute("categorys") || ""
- ];
- for(const find_area of find_areas){
- if(is_regex){
- flag = find_area.toLowerCase().search(filter) > -1
- } else {
- flag = find_area.toLowerCase().indexOf(filter) > -1
- }
- if (flag) break;
- }
- menu_item.style.display = flag ? "block" : "none";
- }
- lorahelper.lorahelper_context_menu_search_lock = false;
- }
-
- function normalizePosition(the_context_menu, mouseX, mouseY){
- const {
- left: scopeOffsetX,
- top: scopeOffsetY,
- } = lorahelper.lorahelper_scope_div.getBoundingClientRect();
-
- const scopeX = mouseX - scopeOffsetX;
- const scopeY = mouseY - scopeOffsetY;
-
- //check if the element will go out of bounds
- const outOfBoundsOnX =
- scopeX + the_context_menu.clientWidth > lorahelper.lorahelper_scope_div.clientWidth;
- const outOfBoundsOnY =
- scopeY + the_context_menu.clientHeight > lorahelper.lorahelper_scope_div.clientHeight;
-
- let normalizeX = mouseX;
- let normalizeY = mouseY;
-
- //normalize on X
- if(outOfBoundsOnX){
- normalizeX =
- scopeOffsetX + lorahelper.lorahelper_scope_div.clientWidth - the_context_menu.clientWidth;
- }
-
- //normalize on Y
- if(outOfBoundsOnY){
- normalizeY =
- scopeOffsetY + lorahelper.lorahelper_scope_div.clientHeight - the_context_menu.clientHeight;
- }
-
- return {normalizeX, normalizeY};
- }
-
- function show_lora_context_menu(mouseX, mouseY){
- lorahelper.lorahelper_context_menu_search_box.value = "";
- lorahelper.lorahelper_context_menu_search_text = "";
-
- lorahelper.lorahelper_context_menu_list.style.height = "unset";
- lorahelper.lorahelper_context_menu_search_box.style.width = "unset";
- lorahelper.lorahelper_context_menu_list.style.overflow = "unset";
- if(lorahelper.lorahelper_context_menu_list.clientHeight > lorahelper.lorahelper_scope_div.clientHeight - 150){
- lorahelper.lorahelper_context_menu_list.style.height = `${lorahelper.lorahelper_scope_div.clientHeight - 150}px`;
- lorahelper.lorahelper_context_menu_list.style.overflow = "scroll";
- }
-
- lorahelper.lorahelper_context_menu_search_box.style.width = `${lorahelper.lorahelper_context_menu_list.clientWidth - 10}px`;
-
- lorahelper.lorahelper_context_menu_edit_btn.innerHTML = lorahelper.get_UI_display("edit prompt words...");
- lorahelper.lorahelper_context_menu_search_box.placeholder = lorahelper.my_getTranslation("Search...");
-
- const {normalizeX, normalizeY} = normalizePosition(lorahelper.lorahelper_context_menu, mouseX, mouseY);
-
- lorahelper.lorahelper_context_menu.style.top = `${normalizeY}px`;
- lorahelper.lorahelper_context_menu.style.left = `${normalizeX}px`;
-
- open_lora_context_menu(lorahelper.lorahelper_context_menu);
- }
-
- function show_lora_sub_context_menu(sub_context_menu, parent_menu){
- const parent_rect = parent_menu.getBoundingClientRect();
-
- sub_context_menu.style.height = "unset";
- sub_context_menu.style.overflow = "unset";
- if(sub_context_menu.clientHeight > lorahelper.lorahelper_scope_div.clientHeight - 100){
- sub_context_menu.style.height = `${lorahelper.lorahelper_scope_div.clientHeight - 100}px`;
- sub_context_menu.style.overflow = "scroll";
- }
- let pos_x = parent_rect.right
- let pos_y = parent_rect.top
-
- if(parent_rect.right + sub_context_menu.clientWidth > lorahelper.lorahelper_scope_div.clientWidth){
- pos_x = parent_rect.left - sub_context_menu.clientWidth;
- }
-
- const {normalizeX, normalizeY} = normalizePosition(sub_context_menu, pos_x, pos_y);
-
- sub_context_menu.style.top = `${normalizeY}px`;
- sub_context_menu.style.left = `${normalizeX}px`;
-
- open_lora_context_menu(sub_context_menu);
- }
-
- function close_lora_context_menu(selected_context_menu){
- if (!lorahelper.is_nullptr(selected_context_menu)){
- selected_context_menu.classList.remove("visible");
- if (typeof(selected_context_menu.on_close) === typeof(lorahelper.noop_func)){
- selected_context_menu.on_close(selected_context_menu);
- }
- }else{
- lorahelper.resetElementLayer();
- let available_context_menu = get_lora_context_menu_list();
- for (let the_context_menu of available_context_menu){
- the_context_menu.classList.remove("visible");
- if (typeof(the_context_menu.on_close) === typeof(lorahelper.noop_func)){
- the_context_menu.on_close(the_context_menu);
- }
- }
- }
- }
-
- function open_lora_context_menu(selected_context_menu){
- selected_context_menu.classList.remove("visible");
- setTimeout(()=>{
- selected_context_menu.classList.add("visible");
- });
- }
-
- function add_lora_context_menu(the_context_menu){
- lorahelper.lorahelper_scope.appendChild(the_context_menu);
- lorahelper.context_menu_list.push(the_context_menu);
- }
-
- function delete_lora_context_menu(the_context_menu){
- try {
- the_context_menu.remove();
- } catch (error) { }
- const index = lorahelper.context_menu_list.indexOf(the_context_menu);
- if (index > -1) { // only splice array when item is found
- lorahelper.context_menu_list.splice(index, 1); // 2nd parameter means remove one item only
- }
- }
-
- function get_lora_context_menu_list(){
- let copy_list = [];
- for (let item of lorahelper.context_menu_list) copy_list.push(item);
- return copy_list;
- }
-
- function create_context_menu(id){
- let the_context_menu = document.createElement("div");
- if(typeof(id) === typeof("string")){
- if(id.trim() != "") the_context_menu.setAttribute("id", id);
- }
- the_context_menu.classList.add("lora-context-menu");
- the_context_menu.innerHTML = "";
- return the_context_menu;
- }
-
- function create_context_menu_group(){
- let context_menu_group = document.createElement("div");
- context_menu_group.innerHTML = "";
- return context_menu_group;
- }
-
- function create_context_menu_hr_item(){
- let context_menu_hr_item = document.createElement("div");
- context_menu_hr_item.classList.add('hritem');
- context_menu_hr_item.appendChild(document.createElement("hr"));
- return context_menu_hr_item;
- }
-
- function create_context_menu_button(text){
- let context_menu_button_item = document.createElement("div");
- context_menu_button_item.classList.add('item');
- context_menu_button_item.innerHTML = text;
- return context_menu_button_item;
- }
-
- function create_context_subset(text, subset){
- let context_menu_button_item = document.createElement("div");
- let context_menu_subset_icon = document.createElement("span");
- context_menu_subset_icon.innerHTML = "\u27a4";
- context_menu_subset_icon.style.float = "right";
- context_menu_button_item.classList.add('item');
- context_menu_button_item.innerHTML = text;
- context_menu_button_item.appendChild(context_menu_subset_icon);
- context_menu_button_item.menu_subset = [];
- for(const set_item of subset) {
- context_menu_button_item.menu_subset.push(set_item);
- }
- const display_submenu = (event) => {
- let old_sub_menu = context_menu_button_item.sub_menu_object;
- if (!lorahelper.is_nullptr(old_sub_menu)){
-
- } else {
- let the_sub_menu = create_context_menu();
- for(const set_item of context_menu_button_item.menu_subset){
- the_sub_menu.appendChild(set_item);
- }
- the_sub_menu.on_close = (self)=>{
- context_menu_button_item.sub_menu_object = undefined;
- delete_lora_context_menu(self);
- };
- context_menu_button_item.sub_menu_object = the_sub_menu;
- add_lora_context_menu(the_sub_menu);
- show_lora_sub_context_menu(the_sub_menu, context_menu_button_item);
- }
- }
- context_menu_button_item.addEventListener('mouseover', function(event) {
- display_submenu(event);
- }, false);
- context_menu_button_item.addEventListener('touchstart', function(event) {
- display_submenu(event);
- let current_sub_menu = context_menu_button_item.sub_menu_object;
- if (!lorahelper.is_nullptr(current_sub_menu)){
- lorahelper.sendontop(current_sub_menu);
- }
- }, false);
- context_menu_button_item.addEventListener('mouseleave', function(eve) {
- window.setTimeout(((context_menu_button_item) => {
- return () => {
- let the_sub_menu = context_menu_button_item.sub_menu_object;
- if (!lorahelper.is_nullptr(the_sub_menu)){
- const sub_menu_rect = the_sub_menu.getBoundingClientRect();
- if(!lorahelper.pointInRect(sub_menu_rect, lorahelper.lorahelper_mouse_position)){
- close_lora_context_menu(the_sub_menu);
- }
- }
- }
- })(context_menu_button_item), 50);
- }, false);
- return context_menu_button_item;
- }
-
- function create_context_menu_textbox(text, onchange){
- let context_menu_textbox_item = document.createElement("div");
- let the_textbox = document.createElement("input");
- the_textbox.placeholder = text;
- if (typeof(onchange) === typeof(lorahelper.noop_func)){
- the_textbox.addEventListener("change", onchange);
- the_textbox.addEventListener("keypress", onchange);
- the_textbox.addEventListener("paste", onchange);
- the_textbox.addEventListener("input", onchange);
- }
- context_menu_textbox_item.classList.add('item');
- context_menu_textbox_item.appendChild(the_textbox);
- return context_menu_textbox_item;
- }
-
- function create_context_menu_iframe(href){
- let context_menu_iframe_item = document.createElement("div");
- let the_iframe = document.createElement("iframe");
- the_iframe.setAttribute("src", href);
- the_iframe.style.width = "600px";
- the_iframe.style.height = "60vh";
- the_iframe.style.overflow = "scroll";
- context_menu_iframe_item.classList.add('item');
- context_menu_iframe_item.appendChild(the_iframe);
- return context_menu_iframe_item;
- }
-
- lorahelper.context_menu_edit_hr_item = null;
- function hide_edit_btn(){
- lorahelper.context_menu_edit_hr_item.style.display = "none";
- lorahelper.lorahelper_context_menu_edit_btn.style.display = "none";
- }
- function show_edit_btn(){
- lorahelper.context_menu_edit_hr_item.style.display = "block";
- lorahelper.lorahelper_context_menu_edit_btn.style.display = "block";
- }
-
- function build_mahiro_menu(event){
- const {clientX: mouseX, clientY: mouseY} = event;
- lorahelper.lorahelper_context_menu_list.innerHTML = "";
- lorahelper.lorahelper_context_menu_opt.innerHTML = "";
- const onimai_list = ["Mahiro", "Mihari", "Momiji", "Kaede", "Asahi", "Miyo"];
- for(const onimai of onimai_list){
- let mahiro_off_website = create_context_menu_button(`${onimai}!`);
- mahiro_off_website.setAttribute("onclick",`lorahelper.build_mahiro_iframe(event, '${onimai.toLowerCase()}')`);
- lorahelper.lorahelper_context_menu_list.appendChild(mahiro_off_website);
- }
- lorahelper.context_menu_search_box_item.style.display = "block";
- hide_edit_btn();
- show_lora_context_menu(mouseX, mouseY);
- event.stopPropagation();
- event.preventDefault();
- }
-
- function build_mahiro_iframe(event, mahiro){
- const {clientX: mouseX, clientY: mouseY} = event;
- window.setTimeout(
- ((mouseX, mouseY)=>{
- return ()=>{
- lorahelper.lorahelper_context_menu_list.innerHTML = "";
- let mahiro_off_website = create_context_menu_iframe(`https://onimai.jp/character/${mahiro}.html`);
- if(lorahelper.lorahelper_scope_div.clientWidth <= 600){
- mahiro_off_website.style.width = "100vw";
- } else {
- mahiro_off_website.style.width = "600px";
- }
- mahiro_off_website.style.overflow = "scroll";
- lorahelper.lorahelper_context_menu_list.appendChild(mahiro_off_website);
- lorahelper.context_menu_search_box_item.style.display = "none";
- hide_edit_btn();
- show_lora_context_menu(mouseX, mouseY);
- };
- })(mouseX, mouseY)
- , 50);
- close_lora_context_menu();
- event.stopPropagation();
- event.preventDefault();
- }
-
- function setup_context_menu(){
- lorahelper.lorahelper_context_menu = create_context_menu("lora-context-menu");
- lorahelper.lorahelper_sub_context_menu = create_context_menu("lora-sub-context-menu");
-
- //searching box
- lorahelper.context_menu_search_box_item = create_context_menu_textbox(lorahelper.my_getTranslation("Search..."), updateLoraHelperSearchingBox);
- lorahelper.lorahelper_context_menu_search_box = lorahelper.context_menu_search_box_item.querySelector("input");
- lorahelper.lorahelper_context_menu_search_box.setAttribute("id", "lora-context-menu-search-box");
- lorahelper.lorahelper_context_menu.appendChild(lorahelper.context_menu_search_box_item);
-
- //prompt list
- lorahelper.lorahelper_context_menu_list = create_context_menu_group();
- lorahelper.lorahelper_context_menu.appendChild(lorahelper.lorahelper_context_menu_list);
-
- //other option
- lorahelper.lorahelper_context_menu_opt = create_context_menu_group();
- lorahelper.lorahelper_context_menu.appendChild(lorahelper.lorahelper_context_menu_opt);
-
- //分隔線
- lorahelper.context_menu_edit_hr_item = create_context_menu_hr_item();
- lorahelper.lorahelper_context_menu.appendChild(lorahelper.context_menu_edit_hr_item);
-
- //編輯按鈕
- lorahelper.lorahelper_context_menu_edit_btn = create_context_menu_button(lorahelper.get_UI_display("edit prompt words..."))
- lorahelper.lorahelper_context_menu_edit_btn.classList.add('edit-btn');
- lorahelper.lorahelper_context_menu.appendChild(lorahelper.lorahelper_context_menu_edit_btn);
-
- //test
- /*let my_sub = create_context_subset("a", [
- create_context_subset("b", [
- create_context_menu_button("c"),
- create_context_menu_button("d")
- ]),
- create_context_menu_button("e"),
- create_context_menu_button("f")
- ]);
- lorahelper.lorahelper_context_menu.appendChild(my_sub);*/
-
- lorahelper.lorahelper_scope = document.querySelector("body");
- lorahelper.lorahelper_scope.addEventListener("click", (e) => {
- let flag = true;
- let available_context_menu = get_lora_context_menu_list();
- for (let the_context_menu of available_context_menu){
- flag = flag && (e.target.offsetParent != the_context_menu);
- }
- if(flag){
- close_lora_context_menu();
- }
- });
- lorahelper.lorahelper_scope.addEventListener("mousemove", (e) => {
- lorahelper.lorahelper_mouse_position.x = e.clientX;
- lorahelper.lorahelper_mouse_position.y = e.clientY;
- });
- lorahelper.lorahelper_scope.addEventListener("touchstart", (e) => {
- if(!lorahelper.is_nullptr(e.changedTouches)){
- const touches = e.changedTouches;
- lorahelper.lorahelper_mouse_position.x = touches[0].clientX;
- lorahelper.lorahelper_mouse_position.y = touches[0].clientY;
- }
- });
- add_lora_context_menu(lorahelper.lorahelper_context_menu);
- add_lora_context_menu(lorahelper.lorahelper_sub_context_menu);
-
- //只覆蓋目前螢幕可見範圍的div,用於計算右鍵選單位置
- lorahelper.lorahelper_scope_div = document.createElement("div");
- lorahelper.lorahelper_scope_div.style.position = "fixed";
- lorahelper.lorahelper_scope_div.style.top = "0px";
- lorahelper.lorahelper_scope_div.style.left = "0px";
- lorahelper.lorahelper_scope_div.style.width = "100vw";
- lorahelper.lorahelper_scope_div.style.height = "100vh";
- lorahelper.lorahelper_scope_div.style.zIndex = -1;
- lorahelper.lorahelper_scope_div.style.backgroundColor = "transparent";
- lorahelper.lorahelper_scope_div.style.opacity = 0;
- lorahelper.lorahelper_scope_div.style.pointerEvents = "none";
- lorahelper.lorahelper_scope.appendChild(lorahelper.lorahelper_scope_div);
- }
- lorahelper.show_lora_context_menu = show_lora_context_menu;
- lorahelper.close_lora_context_menu = close_lora_context_menu;
- lorahelper.create_context_menu_hr_item = create_context_menu_hr_item;
- lorahelper.create_context_menu_button = create_context_menu_button;
- lorahelper.create_context_subset = create_context_subset;
- lorahelper.show_edit_btn = show_edit_btn;
- lorahelper.build_mahiro_menu = build_mahiro_menu;
- lorahelper.build_mahiro_iframe = build_mahiro_iframe;
- lorahelper.setup_context_menu = setup_context_menu;
- }
- let module_loadded = false;
- document.addEventListener("DOMContentLoaded", () => {
- if (module_loadded) return;
- module_loadded = true;
- module_init();
- });
- document.addEventListener("load", () => {
- if (module_loadded) return;
- module_loadded = true;
- module_init();
- });
- })();
|