loleaflet: separate parts preview and tabs from the next/prev buttons
This commit is contained in:
Mihai Varga
parent
bafd379442
commit
dc56c97c9e
5 changed files with 158 additions and 87 deletions
|
|
@ -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'],
|
||||
|
|
|
|||
|
|
@ -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('', {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
});
|
||||
|
||||
|
|
|
|||
75
loleaflet/src/control/Control.PartsPreview.js
Normal file
75
loleaflet/src/control/Control.PartsPreview.js
Normal file
|
|
@ -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);
|
||||
};
|
||||
67
loleaflet/src/control/Control.Tabs.js
Normal file
67
loleaflet/src/control/Control.Tabs.js
Normal file
|
|
@ -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);
|
||||
};
|
||||
Loading…
Reference in a new issue