Jetpack Gallery

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 <adw@mozilla.com>
// Portions created by the Initial Developer are Copyright (C) 2009
// the Initial Developer. All Rights Reserved.
// 
// Contributor(s):
//  * Sean Martell (Quicktab icon) <http://www.seanmartell.com/>
// 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 = $("<div />", slide.contentDocument.body);
      tabWidget.addClass("tab");
      
        var headerBar = $("<div />", slide.contentDocument.body);
        headerBar.addClass("headerBar");
        tabWidget.append(headerBar);
      
          var favicon = $("<img />", slide.contentDocument.body);
          favicon.attr("src", getTabFavicon(tab));
          favicon.addClass("favicon");
          headerBar.append(favicon);
    
          var title = $("<div />", slide.contentDocument.body);
          title.addClass("title");
          title.text(getTabTitle(tab));
          headerBar.append(title);
      
          var closeIcon = $("<img />", 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: <>
    <style><![CDATA[
      body {
        font-family:      sans-serif;
        font-size:        9pt;
        overflow-x:         hidden;
        background-color: rgba(214, 221, 229, 1.0);
      }
      div.tab {
        background-color:   rgba(255, 255, 255, 0.3);
        position:           relative;
        padding:            6px;
        margin:             5px 0;
        -moz-border-radius: 5px;
        cursor:             pointer;
      }
      div.tab.focused, div.tab.focusedClosing {
        background-color: rgba(255, 255, 255, 0.8);
        font-weight:      bold;
        margin-right:    -20px;
        padding-right:    24px;
      }
      div.tab:hover {
        background-color: rgba(255, 255, 255, 0.6);
      }
      div.tab.focused:hover, div.tab.focusedClosing:hover {
        background-color: rgba(255, 255, 255, 0.9);
      }
      div.tab:hover img.favicon,
      div.tab.focused img.favicon,
      div.tab.focusedClosing img.favicon {
        opacity: 1;
      }
      div.headerbar {
        height:        16px;
        clear:         both;
        margin-bottom: 10px;
      }
      img.favicon {
        width:   16px;
        height:  16px;
        opacity: 0.7;
        float:   left;
      }
      div.title {
        float: left;
        margin-left: 4px;
        line-height: 1.6em;
        height:      16px;
      }
      img.closeButton {
        margin-top: 1px;
        float:      right;
        display:    none;
      }
      div.tab:hover img.closeButton {
        display: block;
      }
      div.tab.focused:hover img.closeButton {
        right: 25px;
      }
      div.tab canvas.tabPreview {
        outline: 1px solid gray;
        width:   206px;
      }
    ]]></style>
    <body>
      <div id="tabList"> </div>
      <div id="newtab" class="tab"><img src="" /></div>
    </body>
  </>
});