Jetpack Gallery
Jetpacks
Contributors
About
Register
Log In
Close
Uh oh! Something went wrong...
You must be logged in to do that.
View Source Code for “
Thumbtabs 0.5
”
// ThumbTabs v0.4 // Created by Thomas Bassetto (http://tb4.fr) // // New in 0.4 : // - Jetpack 0.6 compatibility // - Prepare the code for settings // // New in 0.3 : // - Jetpack 0.5 compatibility // - Effects removed, too buggy // // The Original Code is the Quicktab Jetpack feature. // http://people.mozilla.com/~adw/jetpacks/quicktab/ // // The Initial Developer of the Original Code is // * Drew Willcoxon
// Portions created by the Initial Developer are Copyright (C) 2009 // the Initial Developer. All Rights Reserved. // // Contributor(s): // * Sean Martell (Quicktab icon)
// Quicktab: http://people.mozilla.com/~adw/jetpacks/quicktab/ const SLIDEBAR_ICON = "http://tb4.fr/labs/jetpack/thumbtabs/icon.png"; const DEFAULT_FAVICON = "http://tb4.fr/labs/jetpack/thumbtabs/favicon.png"; const CLOSE_TAB_ICON = "http://tb4.fr/labs/jetpack/thumbtabs/close.png"; const NEW_TAB_ICON = "http://tb4.fr/labs/jetpack/thumbtabs/new_tab.png"; const PREF_ICON = "http://tb4.fr/labs/jetpack/thumbtabs/pref.png"; var manifest = { settings: [ {id:"ratio", type:"range", label:"Ratio", min: 30, max: 100, default: 50 }, {id:"thumbnails", type:"boolean", label:"Thumbnails?", default: true } ] }; jetpack.future.import("slideBar"); jetpack.future.import("storage.settings"); jetpack.slideBar.append({ onReady: function (slide) { function getTabIndex(tab) { return tabs.indexOf(tab); } function getTabFavicon(tab) { var favicon = tab.favicon || DEFAULT_FAVICON; return /^chrome:/.test(favicon) ? DEFAULT_FAVICON : favicon; } function getTabTitle(tab) { var tabTitle = tab.raw.label; if (tabTitle.length > 30) { tabTitle = tabTitle.substr(0, 25); tabTitle += "..."; } return tabTitle; } function updateTabPreview(tab) { var tabWidget = tabWidgets[getTabIndex(tab)]; var tabPreview = $("canvas", tabWidget); var ctx = tabPreview[0].getContext("2d"); ctx.drawWindow(tab.contentWindow, 0, 0, 500, 500, "white"); } function makeTabWidget(tab) { var tabWidget = $("
", slide.contentDocument.body); tabWidget.addClass("tab"); var headerBar = $("
", slide.contentDocument.body); headerBar.addClass("headerBar"); tabWidget.append(headerBar); var favicon = $("
", slide.contentDocument.body); favicon.attr("src", getTabFavicon(tab)); favicon.addClass("favicon"); headerBar.append(favicon); var title = $("
", slide.contentDocument.body); title.addClass("title"); title.text(getTabTitle(tab)); headerBar.append(title); var closeIcon = $("
", slide.contentDocument.body); closeIcon.attr("src", CLOSE_TAB_ICON); closeIcon.addClass("closeButton"); closeIcon.click(function () tab.close()); headerBar.append(closeIcon); var tabPreview = slide.contentDocument.createElementNS("http://www.w3.org/1999/xhtml", "canvas"); tabPreview.setAttribute("class", "tabPreview"); tabWidget.append(tabPreview); tabWidget.mousedown(function (event) { if (!$(event.target).hasClass("closeButton")) tab.focus(); }); return tabWidget; } function onTabClosed(tab) { var tabIndex = getTabIndex(tab); var tabWidget = tabWidgets[tabIndex]; if (tabWidget.hasClass("focused")) { tabWidget.addClass("focusedClosing"); } tabWidgets.splice(tabIndex, 1); tabs.splice(tabIndex, 1); /*tabWidget.slideUp('normal').fadeOut('normal', function () tabWidget.remove());*/ tabWidget.remove() } function onTabFocused(tab) { updateTabPreview(tab); $(".focused", slide.contentDocument.body).removeClass("focused"); tabWidgets[getTabIndex(tab)].addClass("focused"); } function onTabOpened(tab) { var tabWidget = makeTabWidget(tab); tabWidgets.push(tabWidget); tabs.push(tab); tabWidget.appendTo($("#tabList", slide.contentDocument.body)); tabWidget.appendTo($("#tabList", slide.contentDocument.body)).fadeIn('normal'); /*$(slide.contentDocument.body).scrollTop(tabWidget.offset().top);*/ updateTabPreview(tab); } function onTabReady(tab) { var tabWidget = tabWidgets[getTabIndex(tab)]; $(".title", tabWidget).text(getTabTitle(tab)); updateTabPreview(tab); setTimeout(function () { $(".favicon", tabWidget).attr("src", getTabFavicon(tab)); }, 3000); } var newTabImage = $("#newtab img", slide.contentDocument.body); newTabImage.attr("src", NEW_TAB_ICON); var tabs = [] var tabWidgets = []; jetpack.tabs.forEach(function (tab) onTabOpened(tab)); onTabFocused(jetpack.tabs.focused); jetpack.tabs.onClose(function () onTabClosed(this)); jetpack.tabs.onFocus(function () onTabFocused(this)); jetpack.tabs.onOpen(function () onTabOpened(this)); jetpack.tabs.onReady(function () onTabReady(this)); $(slide.contentDocument).dblclick(function (event) { if (event.target.localName === "HTML") jetpack.tabs.open("about:blank").focus(); }); $("#newtab", slide.contentDocument.body).click(function (event) { jetpack.tabs.open("about:blank").focus(); }); }, icon: SLIDEBAR_ICON, width: 250, persist: true, html: <>
> });