diff --git a/loleaflet/build/deps.js b/loleaflet/build/deps.js
index 62ef933f5..d527e7d01 100644
--- a/loleaflet/build/deps.js
+++ b/loleaflet/build/deps.js
@@ -233,6 +233,20 @@ var deps = {
 		desc: 'Parts control with two buttons (previous / next).'
 	},
 
+	ControlPartsPreview: {
+		src: ['control/Control.js',
+		      'control/Control.PartsPreview.js'],
+		heading: 'Controls',
+		desc: 'Parts preview sidebar'
+	},
+
+	ControlTabs: {
+		src: ['control/Control.js',
+		      'control/Control.Tabs.js'],
+		heading: 'Controls',
+		desc: 'Tabs for switching sheets'
+	},
+
 	ControlPermissionSwitch: {
 		src: ['control/Control.js',
 		      'control/Control.Permission.js'],
diff --git a/loleaflet/debug/document/document_simple_example.html b/loleaflet/debug/document/document_simple_example.html
index 234a2bca0..9d31f45d3 100644
--- a/loleaflet/debug/document/document_simple_example.html
+++ b/loleaflet/debug/document/document_simple_example.html
@@ -76,6 +76,8 @@
     globalMap.addControl(L.control.statusIndicator());
     globalMap.addControl(L.control.scroll());
     globalMap.addControl(L.control.dialog());
+    globalMap.addControl(L.control.partsPreview());
+    globalMap.addControl(L.control.tabs());
 
     ////// Document layer ////
     var docLayer = new L.TileLayer('', {
diff --git a/loleaflet/src/control/Control.Parts.js b/loleaflet/src/control/Control.Parts.js
index d32650a30..9fc0b1658 100644
--- a/loleaflet/src/control/Control.Parts.js
+++ b/loleaflet/src/control/Control.Parts.js
@@ -20,16 +20,8 @@ L.Control.Parts = L.Control.extend({
 				partName + '-prev',  container, this._prevPart);
 		this._nextPartButton = this._createButton(options.nextPartText, options.nextPartTitle,
 				partName + '-next', container, this._nextPart);
-		this._previewInitialized = false;
-		this._previewTiles = {};
-		this._tabsInitialized = false;
-		this._spreadsheetTabs = {};
-		var docContainer = L.DomUtil.get('document-container');
-		this._partsPreviewCont = L.DomUtil.create('div', 'parts-preview', docContainer.parentElement);
-		this._tabsCont = L.DomUtil.create('div', 'spreadsheet-tab', docContainer.parentElement);
 
 		map.on('updateparts', this._updateDisabled, this);
-		map.on('tilepreview', this._updatePreview, this);
 		map.on('pagenumberchanged', this._updateDisabledText, this);
 		return container;
 	},
@@ -72,7 +64,6 @@ L.Control.Parts = L.Control.extend({
 		var parts = e.parts;
 		var currentPart = e.currentPart;
 		var docType = e.docType;
-		var partNames = e.partNames;
 		if (docType === 'text') {
 			return;
 		}
@@ -86,64 +77,8 @@ L.Control.Parts = L.Control.extend({
 		} else {
 			L.DomUtil.removeClass(this._nextPartButton, className);
 		}
-		if (!this._previewInitialized && docType === 'presentation') {
-			// make room for the preview
-			var docContainer = L.DomUtil.get('document-container');
-			L.DomUtil.setStyle(docContainer, 'left', '200px');
-			setTimeout(L.bind(function () {
-				this._map.invalidateSize();
-				$('.scroll-container').mCustomScrollbar('update');
-			}, this), 500);
-			for (var i = 0; i < parts; i++) {
-				var id = 'preview-tile' + i;
-				var frame = L.DomUtil.create('div', 'preview-frame', this._partsPreviewCont);
-				L.DomUtil.create('span', 'preview-helper', frame);
-				var img = L.DomUtil.create('img', 'preview-img', frame);
-				img.id = id;
-				this._previewTiles[id] = img;
-				L.DomEvent
-					.on(img, 'click', L.DomEvent.stopPropagation)
-					.on(img, 'click', L.DomEvent.stop)
-					.on(img, 'click', this._setPart, this)
-					.on(img, 'click', this._refocusOnMap, this);
-				this._map.getPartPreview(i, i, 180, 180);
-			}
-			this._previewInitialized = true;
-		}
-		if (docType === 'spreadsheet') {
-			if (!this._tabsInitialized) {
-				// make room for the preview
-				docContainer = L.DomUtil.get('document-container');
-				L.DomUtil.setStyle(docContainer, 'bottom', '20px');
-				setTimeout(L.bind(function () {
-					this._map.invalidateSize();
-					$('.scroll-container').mCustomScrollbar('update');
-				}, this), 500);
-				for (i = 0; i < parts; i++) {
-					id = 'spreadsheet-tab' + i;
-					var tab = L.DomUtil.create('li', '', this._tabsCont);
-					tab.innerHTML = partNames[i];
-					tab.id = id;
-					L.DomEvent
-						.on(tab, 'click', L.DomEvent.stopPropagation)
-						.on(tab, 'click', L.DomEvent.stop)
-						.on(tab, 'click', this._setPart, this)
-						.on(tab, 'click', this._refocusOnMap, this);
-					this._spreadsheetTabs[id] = tab;
-				}
-				this._tabsInitialized = true;
-			}
-			for (var key in this._spreadsheetTabs) {
-				var part =  parseInt(key.match(/\d+/g)[0]);
-				L.DomUtil.removeClass(this._spreadsheetTabs[key], 'selected');
-				if (part === currentPart) {
-					L.DomUtil.addClass(this._spreadsheetTabs[key], 'selected');
-				}
-			}
-		}
 	},
 
-
 	_updateDisabledText: function (e) {
 		if (e) {
 			this._currentPage = e.currentPage;
@@ -161,28 +96,6 @@ L.Control.Parts = L.Control.extend({
 		} else {
 			L.DomUtil.removeClass(this._nextPartButton, className);
 		}
-	},
-
-	_setPart: function (e) {
-		var part =  e.target.id.match(/\d+/g)[0];
-		if (part !== null) {
-			this._map.setPart(parseInt(part));
-		}
-	},
-
-	_updatePreview: function (e) {
-		var id = 'preview-tile' + e.id;
-		// the scrollbar has to be re-initialized here else it doesn't work
-		// probably a bug from the scrollbar
-		this._previewTiles[id].onload = function () {
-			$('.parts-preview').mCustomScrollbar({
-				axis: 'y',
-				theme: 'dark-thick',
-				scrollInertia: 0,
-				alwaysShowScrollbar: 1});
-		};
-
-		this._previewTiles[id].src = e.tile;
 	}
 });
 
diff --git a/loleaflet/src/control/Control.PartsPreview.js b/loleaflet/src/control/Control.PartsPreview.js
new file mode 100644
index 000000000..455611151
--- /dev/null
+++ b/loleaflet/src/control/Control.PartsPreview.js
@@ -0,0 +1,75 @@
+/*
+ * L.Control.PartsPreview
+ */
+
+L.Control.PartsPreview = L.Control.extend({
+	onAdd: function (map) {
+		this._previewInitialized = false;
+		this._previewTiles = {};
+		var docContainer = L.DomUtil.get('document-container');
+		this._partsPreviewCont = L.DomUtil.create('div', 'parts-preview', docContainer.parentElement);
+
+		map.on('updateparts', this._updateDisabled, this);
+		map.on('tilepreview', this._updatePreview, this);
+		return document.createElement('div');
+	},
+
+	_updateDisabled: function (e) {
+		var parts = e.parts;
+		var docType = e.docType;
+		if (docType === 'text') {
+			return;
+		}
+
+		if (!this._previewInitialized && docType === 'presentation') {
+			// make room for the preview
+			var docContainer = L.DomUtil.get('document-container');
+			L.DomUtil.setStyle(docContainer, 'left', '200px');
+			setTimeout(L.bind(function () {
+				this._map.invalidateSize();
+				$('.scroll-container').mCustomScrollbar('update');
+			}, this), 500);
+			for (var i = 0; i < parts; i++) {
+				var id = 'preview-tile' + i;
+				var frame = L.DomUtil.create('div', 'preview-frame', this._partsPreviewCont);
+				L.DomUtil.create('span', 'preview-helper', frame);
+				var img = L.DomUtil.create('img', 'preview-img', frame);
+				img.id = id;
+				this._previewTiles[id] = img;
+				L.DomEvent
+					.on(img, 'click', L.DomEvent.stopPropagation)
+					.on(img, 'click', L.DomEvent.stop)
+					.on(img, 'click', this._setPart, this)
+					.on(img, 'click', this._refocusOnMap, this);
+				this._map.getPartPreview(i, i, 180, 180);
+			}
+			this._previewInitialized = true;
+		}
+	},
+
+	_setPart: function (e) {
+		var part =  e.target.id.match(/\d+/g)[0];
+		if (part !== null) {
+			this._map.setPart(parseInt(part));
+		}
+	},
+
+	_updatePreview: function (e) {
+		var id = 'preview-tile' + e.id;
+		// the scrollbar has to be re-initialized here else it doesn't work
+		// probably a bug from the scrollbar
+		this._previewTiles[id].onload = function () {
+			$('.parts-preview').mCustomScrollbar({
+				axis: 'y',
+				theme: 'dark-thick',
+				scrollInertia: 0,
+				alwaysShowScrollbar: 1});
+		};
+
+		this._previewTiles[id].src = e.tile;
+	}
+});
+
+L.control.partsPreview = function (options) {
+	return new L.Control.PartsPreview(options);
+};
diff --git a/loleaflet/src/control/Control.Tabs.js b/loleaflet/src/control/Control.Tabs.js
new file mode 100644
index 000000000..cce0de950
--- /dev/null
+++ b/loleaflet/src/control/Control.Tabs.js
@@ -0,0 +1,67 @@
+/*
+ * L.Control.Tabs is used to swtich sheets in Calc
+ */
+
+L.Control.Tabs = L.Control.extend({
+	onAdd: function (map) {
+		this._tabsInitialized = false;
+		this._spreadsheetTabs = {};
+		var docContainer = L.DomUtil.get('document-container');
+		this._tabsCont = L.DomUtil.create('div', 'spreadsheet-tab', docContainer.parentElement);
+
+		map.on('updateparts', this._updateDisabled, this);
+		return document.createElement('div');
+	},
+
+	_updateDisabled: function (e) {
+		var parts = e.parts;
+		var currentPart = e.currentPart;
+		var docType = e.docType;
+		var partNames = e.partNames;
+		if (docType === 'text') {
+			return;
+		}
+		if (docType === 'spreadsheet') {
+			if (!this._tabsInitialized) {
+				// make room for the preview
+				var docContainer = L.DomUtil.get('document-container');
+				L.DomUtil.setStyle(docContainer, 'bottom', '20px');
+				setTimeout(L.bind(function () {
+					this._map.invalidateSize();
+					$('.scroll-container').mCustomScrollbar('update');
+				}, this), 500);
+				for (var i = 0; i < parts; i++) {
+					var id = 'spreadsheet-tab' + i;
+					var tab = L.DomUtil.create('li', '', this._tabsCont);
+					tab.innerHTML = partNames[i];
+					tab.id = id;
+					L.DomEvent
+						.on(tab, 'click', L.DomEvent.stopPropagation)
+						.on(tab, 'click', L.DomEvent.stop)
+						.on(tab, 'click', this._setPart, this)
+						.on(tab, 'click', this._refocusOnMap, this);
+					this._spreadsheetTabs[id] = tab;
+				}
+				this._tabsInitialized = true;
+			}
+			for (var key in this._spreadsheetTabs) {
+				var part =  parseInt(key.match(/\d+/g)[0]);
+				L.DomUtil.removeClass(this._spreadsheetTabs[key], 'selected');
+				if (part === currentPart) {
+					L.DomUtil.addClass(this._spreadsheetTabs[key], 'selected');
+				}
+			}
+		}
+	},
+
+	_setPart: function (e) {
+		var part =  e.target.id.match(/\d+/g)[0];
+		if (part !== null) {
+			this._map.setPart(parseInt(part));
+		}
+	}
+});
+
+L.control.tabs = function (options) {
+	return new L.Control.Tabs(options);
+};