Creating Pinned Tabs

The content-studio object's createTab() method can be used to create a pinned tab (that is, a permanent tab with no close button) in the Content Studio editor area. You can, for example, enter the following code into your Javascript console to create a pinned tab displaying the Escenic web site:

var cs = require('content-studio');
cs.createTab('http://www.escenic.com/', 'Escenic Web Site');

You can also create menu items as described in Requiring Objects in order to control the display of a pinned tab. The following example creates two menu items called Show Escenic Web Site and Hide Escenic Web Site in the Content Studio View menu that can then be used to show/hide a pinned tab containing the Escenic web site:

var cs = require('content-studio');
var actions = require('actions');

var uri = 'http://www.escenic.com/';
var tabControl = null;

var showAction = actions.createAction('Show Escenic Web Site', 'shortcut W');
showAction.on('action', function() {
  if (tabControl) {
    tabControl.show();
  }
  else {
    cs.createTab(uri, 'Escenic Web Site');
  }
});

var hideAction = actions.createAction('Hide Escenic Web Site', 'shortcut shift W');
hideAction.on('action', function() {
  if (tabControl) {
    tabControl.remove();
  }
});

cs.on('tab-init', function(control) {
  if (control.uri == uri) {
    tabControl = control;
  }
});
cs.on('tab-remove', function(tabURI) {
  if (tabURI == uri) {
    tabControl = null;
  }
});

actions.addAction(showAction, 'view');
actions.addAction(hideAction, 'view');

Note that the TabControl object returned by content-studio.createTab() can also be accessed and controlled from Javascript code in the HTML document displayed inside the tab. It can be accessed from inside the tab as:

window.studioTabControl