Chrome Tabs - Tab Sorting and Opening in the Background

by adamschwartz

HTML

<script src="https://cdn.rawgit.com/adamschwartz/chrome-tabs/gh-pages/js/chrome-tabs.js"></script>
<link rel="stylesheet" href="https://cdn.rawgit.com/adamschwartz/chrome-tabs/gh-pages/css/chrome-tabs.css">
<script src="https://cdn.rawgit.com/adamschwartz/chrome-tabs/gh-pages/js/deps/draggabilly.js"></script>
<link rel="stylesheet" href="https://cdn.rawgit.com/adamschwartz/chrome-tabs/gh-pages/css/chrome-tabs-dark-theme.css">
<div class="browser">
  <div class="chrome-tabs">
    <div class="chrome-tabs-content"></div>
    <div class="chrome-tabs-bottom-bar"></div>
  </div>
</div>

CSS

html, body {
  margin: 0;
  box-sizing: border-box;
  height: 100%;
  width: 100%;
}

body {
  padding: 50px;
  background: #ccc;
}

.browser {
  background: #fff;
  border-radius: 5px;
  overflow: hidden;
  height: 100%;
  width: 100%;
}

JavaScript

var chromeTabs = new ChromeTabs();
var el = document.querySelector('.chrome-tabs');
chromeTabs.init(el, {
  tabOverlapDistance: 14,
  minWidth: 45,
  maxWidth: 150
})

setTimeout(function(){
  chromeTabs.addTab({
    title: 'jsFiddle',
    favicon: 'https://jsfiddle.net/favicon.png'
  })
  
  setTimeout(function(){
    chromeTabs.addTab({
      title: 'New Tab'
    })
    
    setTimeout(function(){
      el.classList.add('chrome-tabs-sorting')
      chromeTabs.animateTabMove(el.querySelector('.chrome-tab-current'), 1, 0)

      setTimeout(function(){
        el.classList.remove('chrome-tabs-sorting')
        
        var jsFiddleTab = el.querySelector('.chrome-tab:not(.chrome-tab-current)')
        chromeTabs.setCurrentTab(jsFiddleTab)
        
        setTimeout(function(){
          chromeTabs.addTab()
          chromeTabs.setCurrentTab(jsFiddleTab)
          
          setTimeout(function(){
            chromeTabs.addTab()
            chromeTabs.setCurrentTab(jsFiddleTab)
            
            setTimeout(function(){
              chromeTabs.addTab()
              chromeTabs.setCurrentTab(jsFiddleTab)
            }, 150)
          }, 150)
        }, 150)
      }, 500)
    }, 500)
  }, 500)
}, 0)