TreeTabsMigration/scripts/groups.js
karol@jagiello.it 48dccfecd6 bump to 1.7.0
2018-07-03 20:36:38 +02:00

575 lines
20 KiB
JavaScript

// Copyright (c) 2017 kroppy. All rights reserved.
// Use of this source code is governed by a Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0) license
// that can be found at https://creativecommons.org/licenses/by-nc-nd/4.0/
// ********** GROUPS FUNCTIONS ***************
function SaveGroups() {
chrome.runtime.sendMessage({command: "save_groups", groups: tt.groups, windowId: tt.CurrentWindowId});
}
function AppendGroups(Groups) {
if (opt.debug) {
log("f: AppendGroups, Groups: "+JSON.stringify(Groups));
}
AppendGroupToList("tab_list", labels.ungrouped_group, "", true);
for (var group in Groups) {
AppendGroupToList(Groups[group].id, Groups[group].name, Groups[group].font, true);
if (document.querySelectorAll(".group").length == Object.keys(Groups).length) {
RearrangeGroupsButtons();
setTimeout(function() {
RearrangeGroupsLists();
}, 50);
}
}
}
function RearrangeGroupsButtons(first_loop) {
if (opt.debug) {
log("f: RearrangeGroupsButtons");
}
document.querySelectorAll(".group_button").forEach(function(s){
let groupId = (s.id).substr(1);
if (tt.groups[groupId]) {
if (s.parentNode.childNodes[tt.groups[groupId].index] != undefined) {
let Ind = Array.from(s.parentNode.children).indexOf(s);
if (Ind > tt.groups[groupId].index) {
InsterBeforeNode(s, s.parentNode.childNodes[tt.groups[groupId].index]);
} else {
InsterAfterNode(s, s.parentNode.childNodes[tt.groups[groupId].index]);
}
let newInd = Array.from(s.parentNode.children).indexOf(s);
if (newInd != tt.groups[groupId].index && first_loop) {
RearrangeGroupsButtons(false);
}
}
}
});
}
function RearrangeGroupsLists() {
if (opt.debug) {
log("f: RearrangeGroupsLists");
}
let activegroup = document.getElementById(tt.active_group);
let scroll = activegroup.scrollTop;
let groups = document.getElementById("groups");
document.querySelectorAll(".group_button").forEach(function(s){
let group = document.getElementById((s.id).substr(1));
if (group != null) {
groups.appendChild(group);
}
});
activegroup.scrollTop = scroll;
}
function AppendGroupToList(groupId, group_name, font_color, SetEvents) {
if (opt.debug) {
log("f: AppendGroupToList, groupId: "+groupId+", group_name: "+group_name+", font_color: "+font_color+", SetEvents: "+SetEvents);
}
if (document.getElementById(groupId) == null) {
let grp = document.createElement("div"); grp.className = "group"; grp.id = groupId; grp.style.display = "none"; document.getElementById("groups").appendChild(grp);
let gcf = document.createElement("div"); gcf.className = "children_folders"; gcf.id = "cf"+groupId; grp.appendChild(gcf);
let gct = document.createElement("div"); gct.className = "children_tabs"; gct.id = "ct"+groupId; grp.appendChild(gct);
if (SetEvents) {
grp.onclick = function(event) {
if (event.which == 1 && event.target == this && event.clientX < (this.childNodes[0].getBoundingClientRect().width + this.getBoundingClientRect().left)) {
DeselectFolders();
DeselectTabs();
}
}
grp.onmousedown = function(event) {
event.stopImmediatePropagation();
if (event.which == 1 && event.target == this && event.clientX < (this.childNodes[0].getBoundingClientRect().width + this.getBoundingClientRect().left)) {
HideMenus();
return false;
}
if (event.which == 2) {
event.preventDefault();
ActionClickGroup(this, opt.midclick_group);
}
if (event.which == 3 && event.target.id == this.id) {
// SHOW MENU
ShowFGlobalMenu(event);
}
if (browserId == "V") {
chrome.windows.getCurrent({populate: false}, function(window) {
if (tt.CurrentWindowId != window.id && window.focused) {
location.reload();
}
});
}
}
grp.ondragover = function(event) {
// PIN,TAB==>GROUP
if (event.target.id == this.id && (tt.DragNodeClass == "tab" || tt.DragNodeClass == "folder")) {
RemoveHighlight();
this.classList.add("highlighted_drop_target");
}
// tt.DragOverId = this.id;
}
// grp.ondragenter = function(event) {
// console.log("clearTimeout");
// if (opt.open_tree_on_hover) {
// clearTimeout(tt.DragOverTimer);
// }
// }
// DOUBLE CLICK ACTION
grp.ondblclick = function(event) {
if (event.target.id == this.id) {
ActionClickGroup(this, opt.dbclick_group);
}
}
if (opt.switch_with_scroll) {
BindTabsSwitchingToMouseWheel(groupId);
}
}
}
if (document.getElementById("_"+groupId) == null) {
let gbn = document.createElement("div"); gbn.className = "group_button"; if (SetEvents) {gbn.draggable = true;} gbn.id = "_"+groupId; document.getElementById("group_list").appendChild(gbn);
let gte = document.createElement("span"); gte.className = "group_title"; gte.id = "_gte"+groupId; gte.textContent = group_name;
if (font_color != "") {
gte.style.color = "#"+font_color;
} else {
gte.style.color = window.getComputedStyle(document.getElementById("body"), null).getPropertyValue("--group_list_default_font_color");
}
gbn.appendChild(gte);
var di = document.createElement("div"); di.className = "drag_indicator"; di.id = "di"+groupId; gbn.appendChild(di); // DROP TARGET INDICATOR
if (SetEvents) {
// ACTIVATE GROUP
gbn.onclick = function(event) {
SetActiveGroup(this.id.substr(1), true, true);
}
// SHOW GROUP MENU
gbn.onmousedown = function(event) {
if (event.which == 3) {
ShowFGroupMenu(document.getElementById(this.id.substr(1)), event);
}
}
// EDIT GROUP
gbn.ondblclick = function(event) {
if (event.which == 1 && this.id != "_tab_list") {
ShowGroupEditWindow((this.id).substr(1));
}
}
// DRAGGING GROUPS
gbn.ondragstart = function(event) { // DRAG START
GroupStartDrag(this, event);
}
gbn.ondragover = function(event) {
GroupButtonDragOver(this, event);
}
gbn.ondragenter = function(event) {
// console.log("gbn.ondragenter");
if (opt.open_tree_on_hover) {
if (this.classList.contains("active") == false && tt.DragNodeClass != "group") {
clearTimeout(tt.DragOverTimer);
let This = this;
tt.DragOverTimer = setTimeout(function() {
SetActiveGroup(This.id.substr(1), false, false);
}, 1500);
}
}
}
// gbn.ondragleave = function(event) {
// console.log("gbn.ondragleave");
// if (opt.open_tree_on_hover) {
// clearTimeout(tt.DragOverTimer);
// }
// }
}
}
RefreshGUI();
}
function GenerateNewGroupID(){
let newID = "";
while (newID == "") {
newID = "g_"+GenerateRandomID();
if (document.getElementById(newID) != null) {
newID = "";
}
}
return newID;
}
function AddNewGroup(Name, FontColor) {
let newId = GenerateNewGroupID();
tt.groups[newId] = { id: newId, index: 0, active_tab: 0, prev_active_tab: 0, active_tab_ttid: "", name: (Name ? Name : labels.noname_group), font: (FontColor ? FontColor : "") };
if (opt.debug) {
log("f: AddNewGroup, groupId: "+newId+", Name: "+Name+", FontColor: "+FontColor);
}
AppendGroupToList(newId, tt.groups[newId].name, tt.groups[newId].font, true);
UpdateBgGroupsOrder();
return newId;
}
// remove group, delete tabs if close_tabs is true
function GroupRemove(groupId, close_tabs) {
if (close_tabs) {
let tabIds = Array.prototype.map.call(document.querySelectorAll("#"+groupId+" .tab"), function(s){
return parseInt(s.id);
});
CloseTabs(tabIds);
document.querySelectorAll("#"+groupId+" .folder").forEach(function(s){
RemoveFolder(s.id);
});
} else {
let TabListFolders = document.getElementById("cftab_list");
let GroupFolders = document.getElementById("cf"+groupId);
if (GroupFolders != null) {
while (GroupFolders.firstChild) {
TabListFolders.appendChild(GroupFolders.firstChild);
}
}
let TabListTabs = document.getElementById("cttab_list");
let GroupTabs = document.getElementById("ct"+groupId);
if (GroupTabs != null) {
while (GroupTabs.firstChild) {
TabListTabs.appendChild(GroupTabs.firstChild);
}
}
RefreshExpandStates();
RefreshCounters();
}
if (groupId != "tab_list") {
delete tt.groups[groupId];
if (groupId == tt.active_group) {
if (document.getElementById("_"+groupId).previousSibling) {
SetActiveGroup((document.getElementById("_"+groupId).previousSibling.id).substr(1), true, true);
} else {
if (document.getElementById("_"+groupId).nextSibling) {
SetActiveGroup((document.getElementById("_"+groupId).nextSibling.id).substr(1), true, true);
} else {
SetActiveGroup("tab_list", true, true);
}
}
}
let group = document.getElementById(groupId);
if (group != null) {
group.parentNode.removeChild(group);
}
let groupButton = document.getElementById("_"+groupId);
if (groupButton != null) {
groupButton.parentNode.removeChild(groupButton);
}
}
SaveGroups();
tt.schedule_update_data++;
}
function UpdateBgGroupsOrder() {
document.querySelectorAll(".group_button").forEach(function(s){
if (tt.groups[(s.id).substr(1)]) {
tt.groups[(s.id).substr(1)].index = Array.from(s.parentNode.children).indexOf(s);
}
});
SaveGroups();
}
function KeepOnlyOneActiveTabInGroup() {
let active_tabs = document.querySelectorAll("#"+tt.active_group+" .active_tab");
if (active_tabs.length > 1) {
chrome.tabs.query({currentWindow: true, active: true}, function(activeTab) {
SetActiveTab(activeTab[0].id, false);
});
}
}
function SetActiveGroup(groupId, switch_to_active_in_group, scroll_to_active) {
if (opt.debug) {
log("f: SetActiveGroup, groupId: "+groupId+", switch_to_active_in_group: "+switch_to_active_in_group+", scroll_to_active: "+scroll_to_active);
}
let group = document.getElementById(groupId);
if (group != null) {
tt.active_group = groupId;
document.querySelectorAll(".group_button").forEach(function(s){
s.classList.remove("active_group");
});
document.getElementById("_"+groupId).classList.add("active_group");
document.querySelectorAll(".group").forEach(function(s){
s.style.display = "none";
});
group.style.display = "";
RefreshGUI();
HideRenameDialogs()
let activeTab = document.querySelector("#"+groupId+" .active_tab");
if (activeTab != null ){
if (switch_to_active_in_group){
chrome.tabs.update(parseInt(activeTab.id), {active: true});
}
if (scroll_to_active){
ScrollToTab(activeTab.id);
}
KeepOnlyOneActiveTabInGroup();
}
if (groupId == "tab_list") {
document.querySelectorAll("#button_remove_group, #button_edit_group").forEach(function(s){
s.classList.add("disabled");
});
} else {
document.querySelectorAll("#button_remove_group, #button_edit_group").forEach(function(s){
s.classList.remove("disabled");
});
}
chrome.runtime.sendMessage({command: "set_active_group", active_group: groupId, windowId: tt.CurrentWindowId});
RefreshExpandStates();
RefreshCounters();
if (browserId == "F" && opt.hide_other_groups_tabs_firefox) {
let HideTabIds = Array.prototype.map.call(document.querySelectorAll(".group:not([id='"+groupId+"']) .tab"), function(s){
return parseInt(s.id);
});
let ShowTabIds = Array.prototype.map.call(document.querySelectorAll("#"+groupId+" .tab"), function(s){
return parseInt(s.id);
});
browser.tabs.hide(HideTabIds);
browser.tabs.show(ShowTabIds);
}
}
}
function SetActiveTabInGroup(groupId, tabId) {
if (document.querySelector("#"+groupId+" [id='"+tabId+"']") != null && tt.groups[groupId] != undefined) {
if (groupId != tt.active_group) {
SetActiveGroup(groupId, false, true);
}
if (tt.groups[groupId]) {
tt.groups[groupId].prev_active_tab = tt.groups[groupId].active_tab;
tt.groups[groupId].active_tab = parseInt(tabId);
}
SaveGroups();
}
}
// Edit group popup
function ShowGroupEditWindow(groupId) {
HideRenameDialogs();
if (tt.groups[groupId]) {
let name = document.getElementById("group_edit_name");
name.value = tt.groups[groupId].name;
let groupEditDialog = document.getElementById("group_edit");
groupEditDialog.setAttribute("groupId", groupId);
groupEditDialog.style.display = "block";
groupEditDialog.style.top = document.getElementById("toolbar").getBoundingClientRect().height + document.getElementById("pin_list").getBoundingClientRect().height + 8 + "px";
// groupEditDialog.style.left = "22px";
groupEditDialog.style.left = "";
let DefaultGroupButtonFontColor = window.getComputedStyle(document.getElementById("body"), null).getPropertyValue("--group_list_default_font_color");
let GroupEditFont = document.getElementById("group_edit_font");
GroupEditFont.style.backgroundColor = (tt.groups[groupId].font == "" ? DefaultGroupButtonFontColor : "#"+tt.groups[groupId].font);
setTimeout(function(){
document.getElementById("group_edit_name").select();
},5);
}
}
// when pressed OK in group popup
function GroupEditConfirm() {
let groupId = document.getElementById("group_edit").getAttribute("groupId");
if (tt.groups[groupId]) {
let GroupEditName = document.getElementById("group_edit_name");
// GroupEditName.value = GroupEditName.value.replace(/[\f\n\r\v\t\<\>\+\-\(\)\.\,\;\:\~\/\|\?\@\!\"\'\£\$\%\&\^\#\=\*\[\]]?/gi, "");
tt.groups[groupId].name = GroupEditName.value;
let GroupEditFont = document.getElementById("group_edit_font");
let DefaultGroupButtonFontColor = window.getComputedStyle(document.getElementById("body"), null).getPropertyValue("--group_list_default_font_color");
let ThisGroupButtonFontColor = RGBtoHex(GroupEditFont.style.backgroundColor);
if ("#"+ThisGroupButtonFontColor != DefaultGroupButtonFontColor) {
tt.groups[groupId].font = ThisGroupButtonFontColor;
document.getElementById("_gte"+groupId).style.color = "#"+ThisGroupButtonFontColor;
}
HideRenameDialogs();
RefreshGUI();
SaveGroups();
}
}
function RestoreStateOfGroupsToolbar() {
chrome.runtime.sendMessage({command: "get_group_bar", windowId: tt.CurrentWindowId}, function(response) {
let toolbarGroups = document.getElementById("toolbar_groups");
if (response == true) {
toolbarGroups.style.display = "inline-block";
toolbarGroups.style.width = "19px";
toolbarGroups.style.borderRight = "1px solid var(--group_list_borders)";
toolbarGroups.classList.remove("hidden");
} else {
toolbarGroups.style.display = "none";
toolbarGroups.style.width = "0px";
toolbarGroups.style.borderRight = "none";
toolbarGroups.classList.add("hidden");
}
});
}
function GroupsToolbarToggle() {
let toolbarGroups = document.getElementById("toolbar_groups");
toolbarGroups.classList.toggle("hidden");
if (toolbarGroups.classList.contains("hidden")) {
toolbarGroups.style.display = "none";
toolbarGroups.style.width = "0px";
toolbarGroups.style.borderRight = "none";
chrome.runtime.sendMessage({command: "set_group_bar", group_bar: false, windowId: tt.CurrentWindowId});
} else {
toolbarGroups.style.display = "inline-block";
toolbarGroups.style.width = "19px";
toolbarGroups.style.borderRight = "1px solid var(--group_list_borders)";
chrome.runtime.sendMessage({command: "set_group_bar", group_bar: true, windowId: tt.CurrentWindowId});
}
RefreshGUI();
}
function ActionClickGroup(Node, bgOption) {
if (bgOption == "new_tab") {
if (Node.id == "pin_list") {
OpenNewTab(true, undefined);
}
if (Node.classList.contains("tab") || Node.classList.contains("folder") || Node.classList.contains("group")) {
OpenNewTab(false, Node.id);
}
}
if (bgOption == "activate_previous_active") {
chrome.tabs.update(parseInt(tt.groups[tt.active_group].prev_active_tab), {active: true});
}
if (bgOption == "undo_close_tab") {
chrome.sessions.getRecentlyClosed( null, function(sessions) {
if (sessions.length > 0) {
chrome.sessions.restore(null, function(restored) {});
}
});
}
}
// SET ACTIVE TAB FOR EACH GROUP
function SetActiveTabInEachGroup() {
chrome.tabs.query({currentWindow: true, active: true}, function(tabs) {
if (tabs.length) {
SetActiveTab(tabs[0].id);
chrome.runtime.sendMessage({command: "get_active_group", windowId: tt.CurrentWindowId}, function(response) {
if (response) {
SetActiveGroup(response, false, true);
for (var group in tt.groups) {
let ActiveInGroup = document.querySelector("#"+group+" [id='"+tt.groups[group].active_tab+"']");
if (ActiveInGroup != null) {
ActiveInGroup.classList.add("active_tab");
}
}
if (tabs[0].pinned) {
let ActiveTabinActiveGroup = document.querySelectorAll("#"+tt.active_group+" .active_tab");
if (ActiveTabinActiveGroup != null) {
ActiveTabinActiveGroup.forEach(function(s){
s.classList.remove("active_tab");
});
}
}
} else {
SetActiveGroup("tab_list", false, true);
}
});
}
});
}
// function ActionClickGroup(GroupNode, bgOption) {
// if (opt.debug) {
// log("f: ActionClickGroup, GroupId "+GroupNode.id+", bgOption: "+bgOption);
// }
// if (bgOption == "rename_folder") {
// ShowRenameFolderDialog(FolderNode.id);
// }
// }
function GroupButtonDragOver(Node, event) {
if (Node.classList.contains("inside") == false && (tt.DragNodeClass == "tab" || tt.DragNodeClass == "folder")) {
RemoveHighlight();
Node.classList.remove("before");
Node.classList.remove("after");
Node.classList.add("inside");
Node.classList.add("highlighted_drop_target");
}
if (Node.classList.contains("before") == false && event.layerY < Node.clientHeight/2 && tt.DragNodeClass == "group") {
RemoveHighlight();
Node.classList.add("before");
Node.classList.remove("after");
Node.classList.remove("inside");
Node.classList.add("highlighted_drop_target");
}
if (Node.classList.contains("after") == false && event.layerY > Node.clientHeight/2 && tt.DragNodeClass == "group") {
RemoveHighlight();
Node.classList.remove("before");
Node.classList.add("after");
Node.classList.remove("inside");
Node.classList.add("highlighted_drop_target");
}
}
function GroupStartDrag(Node, event) {
if (opt.debug) {
log("f: GroupStartDrag, GroupId "+Node.id);
}
event.stopPropagation();
event.dataTransfer.setDragImage(document.getElementById("DragImage"), 0, 0);
event.dataTransfer.setData("text", "");
event.dataTransfer.setData("SourceWindowId", tt.CurrentWindowId);
CleanUpDragClasses();
EmptyDragAndDrop();
tt.DragNodeClass = "group";
let Group = Object.assign({}, tt.groups[Node.id.substr(1)]);
let TabsIds = [];
let TabsIdsParents = [];
let Folders = {};
document.querySelectorAll("#"+Node.id.substr(1)+" .tab").forEach(function(s){
TabsIds.push(parseInt(s.id));
TabsIdsParents.push(s.parentNode.id);
});
document.querySelectorAll("#"+Node.id.substr(1)+" .folder").forEach(function(s){
Folders[s.id] = Object.assign({}, tt.folders[s.id]);
});
// console.log(Group);
// console.log(TabsIds);
// console.log(TabsIdsParents);
// console.log(Folders);
// let Group = document.getElementById(Node.id.substr(1));
event.dataTransfer.setData("Class", "group");
event.dataTransfer.setData("Group", JSON.stringify(Group));
event.dataTransfer.setData("TabsIds", JSON.stringify(TabsIds));
event.dataTransfer.setData("TabsIdsParents", JSON.stringify(TabsIdsParents));
event.dataTransfer.setData("Folders", JSON.stringify(Folders));
chrome.runtime.sendMessage({
command: "drag_drop",
DragNodeClass: "group",
DragTreeDepth: 0
});
}