// ********** OPTIONS *************** var bg; if (navigator.userAgent.match("Firefox") !== null){ bg = browser.extension.getBackgroundPage(); } else { bg = chrome.extension.getBackgroundPage(); } var themes = []; var theme = {}; document.addEventListener("DOMContentLoaded", function(){ document.title = "Tree Tabs"; if (bg.opt == undefined){ setTimeout(function(){ location.reload(); }, 3000); } if (localStorage.getItem("themes") != null){ themes = JSON.parse(localStorage["themes"]); } if (localStorage.getItem("current_theme") != null){ LoadTheme(localStorage["current_theme"]); } GetOptions(); RefreshFields(); SetEvents(); }); // AppendCSSSheets from theme function AppendCSSSheets(theme){ var css_variables = ""; for (var css_variable in theme.TabsSizeSet){ css_variables = css_variables + "--" + css_variable + ":" + theme.TabsSizeSet[css_variable] + ";"; } for (var css_variable in theme.ColorsSet){ ColorsSet[css_variable] = theme.ColorsSet[css_variable]; if ($("#"+css_variable)[0]) $("#"+css_variable)[0].value = theme.ColorsSet[css_variable]; css_variables = css_variables + "--" + css_variable + ":" + theme.ColorsSet[css_variable] + ";"; } // remove previous css rules in css sheet 0 for (var r = 0; r < document.styleSheets[0].cssRules.length; r++){ if (document.styleSheets[0].cssRules[r].cssText.match("--pin_width") !== null){ document.styleSheets[0].deleteRule(r); } if (document.styleSheets[0].cssRules[r].cssText.match("::-webkit-scrollbar") !== null){ document.styleSheets[0].deleteRule(r); } } document.styleSheets[0].insertRule("body { "+css_variables+" }", 0); // scrollbars if (navigator.userAgent.match("Firefox") === null){ document.styleSheets[0].insertRule("::-webkit-scrollbar { width:"+theme.ScrollbarTabList+"px; height:"+theme.ScrollbarPinList+"px; }", 3); } } function LoadTheme(themeName){ var theme = JSON.parse(localStorage["theme"+themeName]); TabsSizeSet = theme.TabsSizeSetNumber; // append toolbar from theme $("#toolbar").html(theme.toolbar); AppendCSSSheets(theme); $("#button_filter_type").addClass("url").removeClass("title"); // expand toolbar options ToolbarShow = $("#show_toolbar")[0].checked = theme.ToolbarShow; $("#field_show_toolbar").css({"height": $("#show_toolbar")[0].checked ? "" : "6"}); ToolbarShow ? $("#options_available_buttons, #toolbar, #toolbar_colors").show() : $("#options_available_buttons, #toolbar, #toolbar_colors").hide(); // append example tabs $("#pin_list, #tab_list").html(""); // pins AppendTab({tab: {id: "p0", pinned: true}, Append: true}); AppendTab({tab: {id: "p1", pinned: true, active: true}, Append: true}); // tabs AppendTab({tab: {id: "t2", pinned: false}, Append: true}); $("#tab_titlet2")[0].textContent = chrome.i18n.getMessage("options_theme_tabs_sample_text_normal"); AppendTab({tab: {id: "t3", pinned: false, active: true}, Append: true, ParentId: "t2"}); $("#tab_titlet3")[0].textContent = chrome.i18n.getMessage("options_theme_tabs_sample_text_active_selected"); $(".tab#t3").addClass("c selected"); AppendTab({tab: {id: "t5", pinned: false, discarded: true}, Append: true}); $("#tab_titlet5")[0].textContent = chrome.i18n.getMessage("options_theme_tabs_sample_text_discarded"); AppendTab({tab: {id: "t6", pinned: false}, Append: true}); $("#tab_titlet6")[0].textContent = chrome.i18n.getMessage("options_theme_tabs_sample_text_search_result"); $(".tab#t6").addClass("filtered"); AppendTab({tab: {id: "t7", pinned: false}, Append: true}); $("#tab_titlet7")[0].textContent = chrome.i18n.getMessage("options_theme_tabs_sample_text_search_result_higlighted"); $(".tab#t7").addClass("filtered highlighted_search"); AppendTab({tab: {id: "t8", pinned: false}, Append: true}); $("#tab_titlet8")[0].textContent = chrome.i18n.getMessage("options_theme_tabs_sample_text_search_result_selected"); $(".tab#t8").addClass("selected filtered"); AppendTab({tab: {id: "t9", pinned: false}, Append: true}); $("#tab_titlet9")[0].textContent = chrome.i18n.getMessage("options_theme_tabs_sample_text_search_result_selected_active"); $(".tab#t9").addClass("active selected filtered"); // drag&drop indicator $(".drag_entered_bottom").first().addClass("highlighted_drop_target"); // toolbar events $("#toolbar_tools, #toolbar_search").addClass("hidden"); $(".on").removeClass("on"); ScrollbarPinList = $("#scrollbar_pin_list")[0].value = theme.ScrollbarPinList; ScrollbarTabList = $("#scrollbar_tab_list")[0].value = theme.ScrollbarTabList; $("#active_tab_font_bold")[0].checked = theme.ColorsSet.active_font_weight == "normal" ? false : true; $("#body").css({"background-color": "transparent"}); } // document events function GetOptions(){ // get language labels $(".label").each(function(){ $(this).text(chrome.i18n.getMessage(this.id)); }); // get language for color pick labels $(".cpl").each(function(){ $(this).text(chrome.i18n.getMessage(this.id)); }); // get language for menu labels $(".menu_item").each(function(){ $(this).text(chrome.i18n.getMessage("options_example_menu_item")); }); // get checkboxes from saved states $(".opt_checkbox").each(function(){ $(this)[0].checked = bg.opt[this.id]; }); $(".set_button").each(function(){ $(this)[0].textContent = chrome.i18n.getMessage(this.id); }); // get language dropdown menus $(".bg_opt_drop_down_menu").each(function(){ $(this)[0].textContent = chrome.i18n.getMessage(this.id); }); // get options for append child tab for (var i = 0; i < $("#append_child_tab")[0].options.length; i++){ if ($("#append_child_tab")[0].options[i].value === bg.opt.append_child_tab){ $("#append_child_tab")[0].selectedIndex = i; break; } } // get options for append child tab after limit for (var i = 0; i < $("#append_child_tab_after_limit")[0].options.length; i++){ if ($("#append_child_tab_after_limit")[0].options[i].value === bg.opt.append_child_tab_after_limit){ $("#append_child_tab_after_limit")[0].selectedIndex = i; break; } } // get options for append orphan tab for (var i = 0; i < $("#append_orphan_tab")[0].options.length; i++){ if ($("#append_orphan_tab")[0].options[i].value === bg.opt.append_orphan_tab){ $("#append_orphan_tab")[0].selectedIndex = i; break; } } // get options for action after closing active tab for (var i = 0; i < $("#after_closing_active_tab")[0].options.length; i++){ if ($("#after_closing_active_tab")[0].options[i].value === bg.opt.after_closing_active_tab){ $("#after_closing_active_tab")[0].selectedIndex = i; break; } } // get options for tabs tree depth option $("#max_tree_depth")[0].value = bg.opt.max_tree_depth; // append themes to dropdown menu for (var i = 0; i < themes.length; i++){ var t_list = document.getElementById("theme_list"); var theme_name = document.createElement("option"); theme_name.value = themes[i]; theme_name.text = themes[i]; t_list.add(theme_name); } // select current theme in dropdown list for (var i = 0; i < $("#theme_list")[0].options.length; i++){ if ($("#theme_list")[0].options[i].value === localStorage["current_theme"]){ $("#theme_list")[0].selectedIndex = i; break; } } } function ExportTheme(filename) { var themeObj = { "ToolbarShow": ToolbarShow, "ColorsSet": ColorsSet, "TabsSizeSetNumber": TabsSizeSet, "TabsSizeSet": TabsSizeSets[TabsSizeSet], "ScrollbarPinList": ScrollbarPinList, "ScrollbarTabList": ScrollbarTabList, "theme_name": $("#theme_list").val(), "theme_version": CurrentThemeVersion, "toolbar": ToolbarSet }; var data = JSON.stringify(themeObj); var body = document.getElementById("body"); var link = document.createElement("a"); link.target = "_blank"; link.download = filename; link.href = "data:text/csv;charset=utf-8," + encodeURIComponent(data); body.appendChild(link); link.click(); link.remove(); } function ImportTheme(){ var file = document.getElementById("import_theme"); var fr = new FileReader(); if (file.files[0] == undefined) return; fr.readAsText(file.files[0]); fr.onload = function(){ var data = fr.result; var themeObj = JSON.parse(data); if (themeObj.theme_version > CurrentThemeVersion){ alert(chrome.i18n.getMessage("options_loaded_theme_newer_version")); } if (themeObj.theme_version < CurrentThemeVersion){ alert(chrome.i18n.getMessage("options_loaded_theme_older_version")); } if (themeObj.theme_version <= CurrentThemeVersion){ for (var val in ColorsSet){ ColorsSet[val] = themeObj.ColorsSet[val]; } ToolbarShow = themeObj.ToolbarShow; TabsSizeSet = themeObj.TabsSizeSetNumber; ScrollbarPinList = themeObj.ScrollbarPinList; ScrollbarTabList = themeObj.ScrollbarTabList; $("#toolbar").html(themeObj.toolbar); ToolbarSet = themeObj.toolbar; if (themes.indexOf(themeObj.theme_name) != -1){ themeObj.theme_name = themeObj.theme_name + "(1)"; } themes.push(themeObj.theme_name); SaveTheme(themeObj.theme_name); var t_list = document.getElementById("theme_list"); var theme_name = document.createElement("option"); theme_name.value = themeObj.theme_name; theme_name.text = theme_name.value; t_list.add(theme_name); $("#theme_list")[0].selectedIndex = $("#theme_list")[0].options.length-1; localStorage["themes"] = JSON.stringify(themes); localStorage["current_theme"] = themeObj.theme_name; LoadTheme(themeObj.theme_name); RefreshFields(); } } } // document events function SetEvents(){ // import theme preset button $(document).on("click", "#options_import_theme_button", function(event){ $("#import_theme").click(); }); $(document).on("change", "#import_theme", function(event){ ImportTheme(); }); // export theme preset button $(document).on("click", "#options_export_theme_button", function(event){ if ($("#theme_list")[0].options.length == 0){ alert(chrome.i18n.getMessage("options_no_theme_to_export")); } else { ExportTheme($("#theme_list").val() + ".tt_theme"); } }); // rename theme preset button $(document).on("click", "#options_rename_theme_button", function(event){ if (themes.indexOf($("#new_theme_name")[0].value) != -1){ alert(chrome.i18n.getMessage("options_there_is_a_theme_with_this_name")); return; } if ($("#new_theme_name")[0].value == ""){ alert(chrome.i18n.getMessage("options_theme_name_cannot_be_empty")); return; } localStorage["theme"+($("#new_theme_name")[0].value)] = localStorage["theme"+($("#theme_list").val())]; localStorage.removeItem("theme"+($("#theme_list").val())); var t_list = document.getElementById("theme_list"); themes[themes.indexOf(t_list.options[t_list.selectedIndex].value)] = $("#new_theme_name")[0].value; t_list.options[t_list.selectedIndex].value = t_list.options[t_list.selectedIndex].text = $("#new_theme_name")[0].value; localStorage["themes"] = JSON.stringify(themes); localStorage["current_theme"] = $("#theme_list").val(); }); // set checkbox options on/off and save $(document).on("click", ".bg_opt", function(event){ bg.opt[this.id] = $(this)[0].checked ? true : false; chrome.runtime.sendMessage({command: "options_save"}); }); // set dropdown menu options $("#append_child_tab, #append_child_tab_after_limit, #after_closing_active_tab, #append_orphan_tab").change(function(){ bg.opt[this.id] = $(this).val(); chrome.runtime.sendMessage({command: "options_save"}); }); // set tabs tree depth option $(document).on("input", "#max_tree_depth", function(event){ bg.opt.max_tree_depth = $(this)[0].value; chrome.runtime.sendMessage({command: "options_save"}); }); // set toolbar on/off and show/hide all toolbar options $(document).on("click", "#show_toolbar", function(event){ ToolbarShow = $("#show_toolbar")[0].checked ? true : false; SaveTheme($("#theme_list").val()); $("#field_show_toolbar").css({"height": $("#show_toolbar")[0].checked ? "" : "6"}); ToolbarShow ? $("#options_available_buttons, #toolbar, #toolbar_colors").show() : $("#options_available_buttons, #toolbar, #toolbar_colors").hide(); }); // block system dragging $(document).bind("drop dragover", function(event){ event.preventDefault(); }); var dragged_button; $(document).on("mousedown", ".button", function(event){ if ($(this).is("#button_filter_type, #filter_search_go_prev, #filter_search_go_next")){ return; } $(this).attr("draggable", "true"); dragged_button = this; }); // set dragged button node $(document).on("dragstart", ".button", function(event){ event.originalEvent.dataTransfer.setData(" "," "); event.originalEvent.dataTransfer.setDragImage(document.getElementById("DragImage"), 0, 0); }); // remove draggable attribute to clean html which will be saved in the toolbar $(document).on("mouseleave", ".button", function(event){ $(".button").removeAttr("draggable"); }); // save toolbar $(document).on("dragend", ".button", function(event){ ToolbarSet = $("#toolbar").html(); SaveTheme($("#theme_list").val()); }); // drag&drop buttons to lists $(document).on("dragenter", "#toolbar_main, #toolbar_tools, #toolbar_unused_buttons", function(event){ if ($(dragged_button).is("#button_tools, #button_search") && $(this).is("#toolbar_tools")){ return; } if (dragged_button.parentNode.id != this.id){ $("#"+dragged_button.id).appendTo($(this)); } }); // move (flip) buttons $(document).on("dragenter", ".button", function(event){ if ($(dragged_button).is("#button_tools, #button_search") && $(this).parent().is("#toolbar_tools")){ return; } if ($(this).parent().is("#toolbar_search, #toolbar_search_buttons")){ return; } if ( $(this).index() <= $("#"+dragged_button.id).index()){ $("#"+dragged_button.id).insertBefore($(this)); } else { $("#"+dragged_button.id).insertAfter($(this)); } }); // add new theme preset button $(document).on("click", "#options_add_theme_button", function(event){ if (themes.indexOf($("#new_theme_name")[0].value) != -1){ alert(chrome.i18n.getMessage("options_there_is_a_theme_with_this_name")); return; } if ($("#new_theme_name")[0].value == ""){ alert(chrome.i18n.getMessage("options_theme_name_cannot_be_empty")); return; } LoadTheme("Default"); themes.push($("#new_theme_name")[0].value); var t_list = document.getElementById("theme_list"); var theme_name = document.createElement("option"); theme_name.value = $("#new_theme_name")[0].value; theme_name.text = theme_name.value; t_list.add(theme_name); $("#theme_list")[0].selectedIndex = $("#theme_list")[0].options.length-1; SaveTheme(theme_name.value); localStorage["themes"] = JSON.stringify(themes); localStorage["current_theme"] = $("#theme_list").val(); RefreshFields(); }); // remove theme preset button $(document).on("click", "#options_remove_theme_button", function(event){ if ($("#theme_list")[0].options.length == 0){ localStorage["current_theme"] = "Default"; return; } themes.splice(themes.indexOf($("#theme_list").val()), 1); localStorage["themes"] = JSON.stringify(themes); localStorage.removeItem("theme"+($("#theme_list").val())); var x = document.getElementById("theme_list"); x.remove(x.selectedIndex); localStorage["current_theme"] = ($("#theme_list")[0].options.length > 0) ? $("#theme_list").val() : "Default"; LoadTheme(localStorage["current_theme"]); RefreshFields(); }); // select theme from list $("#theme_list").change(function(){ localStorage["current_theme"] = $(this).val(); LoadTheme($(this).val()); }); // change colors with color pickers $(document).on("input", ".cp", function(event){ ColorsSet[this.id] = $(this)[0].value; AppendCSSSheets(SaveTheme($("#theme_list").val())); }); // set scrollbar sizes $(document).on("input", "#scrollbar_pin_list, #scrollbar_tab_list", function(event){ ScrollbarPinList = $("#scrollbar_pin_list")[0].value; ScrollbarTabList = $("#scrollbar_tab_list")[0].value; SaveTheme($("#theme_list").val()); document.styleSheets[0].addRule("::-webkit-scrollbar", "width:"+ScrollbarTabList+"px; height:"+ScrollbarPinList+"px;"); }); // change tabs size preset(up) $(document).on("click", "#options_tabs_size_up", function(event){ if (TabsSizeSet < TabsSizeSets.length-1){ TabsSizeSet++; AppendCSSSheets(SaveTheme($("#theme_list").val())); } }); // change tabs size preset(down) $(document).on("click", "#options_tabs_size_down", function(event){ if (TabsSizeSet > 0){ TabsSizeSet--; AppendCSSSheets(SaveTheme($("#theme_list").val())); } }); // change active_tab_font_bold $(document).on("click", "#active_tab_font_bold", function(event){ ColorsSet.active_font_weight = $(this)[0].checked ? "bold" : "normal"; AppendCSSSheets(SaveTheme($("#theme_list").val())); }); // show close button on hover $(document).on("mouseenter", ".close", function(event){ $(this).addClass("close_hover"); }); $(document).on("mouseleave", ".close", function(event){ $(".close_hover").removeClass("close_hover"); }); // tabs on hover $(document).on("mouseover", ".tab_header", function(event){ $(this).addClass("tab_header_hover").addClass("close_show"); }); $(document).on("mouseleave", ".tab_header", function(event){ $(this).removeClass("tab_header_hover").removeClass("close_show"); }); $(document).on("click", "#button_tools, #button_search", function(event){ if (event.button != 0){ return; } if ($(this).is(".on")){ $("#button_tools, #button_search").removeClass("on"); $("#toolbar_tools, #toolbar_search").addClass("hidden"); } else { $(this).addClass("on"); if ($(this).is("#button_tools")){ $("#button_search").removeClass("on"); $("#toolbar_search").addClass("hidden"); $("#toolbar_tools").removeClass("hidden"); } else { $("#button_tools").removeClass("on"); $("#toolbar_tools").addClass("hidden"); $("#toolbar_search").removeClass("hidden"); } } }); } // shrink or expand theme field function RefreshFields(){ if ($("#theme_list")[0].options.length == 0){ $("#field_theme").css({"height": "45px"}); } else { $("#field_theme").css({"height": ""}); } if (navigator.userAgent.match("Firefox") !== null){ $("#field_scrollbars").hide(); } else { $("#faster_scroll_for_firefox").hide(); } if (navigator.userAgent.match("Vivaldi") !== null){ $("#url_for_web_panel").val(chrome.runtime.getURL("sidebar.html")); $("#url_for_web_panel").prop("readonly", true); $("#url_for_web_panel").select(); } else{ $("#field_vivaldi").hide(); } }