loleaflet/build/deps.js | 7 + loleaflet/debug/document/document_simple_example.html | 2 loleaflet/dist/images/deletepage.png |binary loleaflet/dist/images/duplicatepage.png |binary loleaflet/dist/images/insertpage.png |binary loleaflet/src/control/Control.PartsPreview.js | 82 +++++++++---- loleaflet/src/control/Control.Presentation.js | 107 ++++++++++++++++++ 7 files changed, 174 insertions(+), 24 deletions(-)
New commits: commit e78d65c199f23766a035cd9cf181e449e38e6e33 Author: Ozcan Esen <[email protected]> Date: Tue Dec 22 14:47:36 2015 +0200 loleaflet: add presentation controls Change-Id: Ied2c8d0700d95ad628ad9634b1736839c90bd313 diff --git a/loleaflet/build/deps.js b/loleaflet/build/deps.js index 1cc21bf..b525cbf 100644 --- a/loleaflet/build/deps.js +++ b/loleaflet/build/deps.js @@ -281,6 +281,13 @@ var deps = { heading: 'Controls', desc: 'Parts preview sidebar' }, + + ControlPresentation: { + src: ['control/Control.js', + 'control/Control.Presentation.js'], + heading: 'Controls', + desc: 'Common commands for slides.' + }, ControlColumnHeader: { src: ['control/Control.js', diff --git a/loleaflet/debug/document/document_simple_example.html b/loleaflet/debug/document/document_simple_example.html index 861b05f..744be8c 100644 --- a/loleaflet/debug/document/document_simple_example.html +++ b/loleaflet/debug/document/document_simple_example.html @@ -97,5 +97,7 @@ globalMap.addControl(L.control.tabs()); globalMap.addControl(L.control.columnHeader()); globalMap.addControl(L.control.rowHeader()); + globalMap.addControl(L.control.presentation()); + </script> </body></html> diff --git a/loleaflet/dist/images/deletepage.png b/loleaflet/dist/images/deletepage.png new file mode 100644 index 0000000..e12688a Binary files /dev/null and b/loleaflet/dist/images/deletepage.png differ diff --git a/loleaflet/dist/images/duplicatepage.png b/loleaflet/dist/images/duplicatepage.png new file mode 100644 index 0000000..234a362 Binary files /dev/null and b/loleaflet/dist/images/duplicatepage.png differ diff --git a/loleaflet/dist/images/insertpage.png b/loleaflet/dist/images/insertpage.png new file mode 100644 index 0000000..612251d Binary files /dev/null and b/loleaflet/dist/images/insertpage.png differ diff --git a/loleaflet/src/control/Control.PartsPreview.js b/loleaflet/src/control/Control.PartsPreview.js index 9630373..df9a36f 100644 --- a/loleaflet/src/control/Control.PartsPreview.js +++ b/loleaflet/src/control/Control.PartsPreview.js @@ -10,13 +10,15 @@ L.Control.PartsPreview = L.Control.extend({ onAdd: function (map) { this._previewInitialized = false; - this._previewTiles = {}; + this._previewTiles = []; var docContainer = map.options.documentContainer; this._partsPreviewCont = L.DomUtil.create('div', 'parts-preview', docContainer.parentElement); map.on('updateparts', this._updateDisabled, this); map.on('updatepart', this._updatePart, this); map.on('tilepreview', this._updatePreview, this); + map.on('insertpage', this._insertPreview, this); + map.on('deletepage', this._deletePreview, this); }, _updateDisabled: function (e) { @@ -38,38 +40,39 @@ L.Control.PartsPreview = L.Control.extend({ $('.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 imgClassName = 'preview-img'; - if (i == 0) { - imgClassName += ' preview-img-selected'; - } - var img = L.DomUtil.create('img', imgClassName, 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.getPreview(i, i, 180, 180, {autoUpdate: this.options.autoUpdate}); + this._previewTiles.push(this._createPreview(i)); } + L.DomUtil.addClass(this._previewTiles[selectedPart], 'preview-img-selected'); this._previewInitialized = true; } else { // change the border style of the selected preview. for (var i = 0; i < parts; i++) { - var img = L.DomUtil.get('preview-tile' + i); - L.DomUtil.removeClass(img, 'preview-img-selected'); + L.DomUtil.removeClass(this._previewTiles[i], 'preview-img-selected'); } - var img = L.DomUtil.get('preview-tile' + selectedPart); - L.DomUtil.addClass(img, 'preview-img-selected'); + L.DomUtil.addClass(this._previewTiles[selectedPart], 'preview-img-selected'); } } }, + _createPreview: function (i) { + var id = 'preview-tile' + i; + var frame = L.DomUtil.create('div', 'preview-frame', this._partsPreviewCont); + L.DomUtil.create('span', 'preview-helper', frame); + var imgClassName = 'preview-img'; + var img = L.DomUtil.create('img', imgClassName, frame); + img.id = id; + 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.getPreview(i, i, 180, 180, {autoUpdate: this.options.autoUpdate}); + + return img; + }, + _setPart: function (e) { var part = e.target.id.match(/\d+/g)[0]; if (part !== null) { @@ -84,10 +87,9 @@ L.Control.PartsPreview = L.Control.extend({ }, _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 () { + this._previewTiles[e.id].onload = function () { $('.parts-preview').mCustomScrollbar({ axis: 'y', theme: 'dark-thick', @@ -95,7 +97,39 @@ L.Control.PartsPreview = L.Control.extend({ alwaysShowScrollbar: 1}); }; - this._previewTiles[id].src = e.tile; + this._previewTiles[e.id].src = e.tile; + }, + + _updatePreviewIds: function () { + // TO DO: preview-tileX prefix is unneccessary, can be removed completely + // since we have them in this._previewTiles[] + for (var i=0; i < this._previewTiles.length; i++) { + this._previewTiles[i].id = 'preview-tile' + i; + } + $('.parts-preview').mCustomScrollbar('update'); + }, + + _insertPreview: function (e) { + var newIndex = e.selectedPart + 1; + var newPreview = this._createPreview(newIndex); + + // insert newPreview to newIndex position + this._previewTiles.splice(newIndex, 0, newPreview); + + var selectedFrame = this._previewTiles[e.selectedPart].parentNode; + var newFrame = newPreview.parentNode; + + // insert after selectedFrame + selectedFrame.parentNode.insertBefore(newFrame, selectedFrame.nextSibling); + this._updatePreviewIds(); + }, + + _deletePreview: function (e) { + var selectedFrame = this._previewTiles[e.selectedPart].parentNode; + L.DomUtil.remove(selectedFrame); + + this._previewTiles.splice(e.selectedPart, 1); + this._updatePreviewIds(); } }); diff --git a/loleaflet/src/control/Control.Presentation.js b/loleaflet/src/control/Control.Presentation.js new file mode 100644 index 0000000..944d51c --- /dev/null +++ b/loleaflet/src/control/Control.Presentation.js @@ -0,0 +1,107 @@ +/* + * L.Control.Presentation is used for common commands for slides. + */ + +L.Control.Presentation = L.Control.extend({ + options: { + position: 'topleft', + }, + + onAdd: function (map) { + var buttonsName = 'leaflet-control-presentation', + container = L.DomUtil.create('div', buttonsName + '-container' + ' leaflet-bar'); + + this._buttons = { + 'insertpage': {title: 'Insert Page', uno: 'InsertPage', iconName: 'insertpage.png'}, + 'duplicatepage': {title: 'Duplicate Page', uno: 'DuplicatePage', iconName: 'duplicatepage.png'}, + 'deletepage': {title: 'Delete Page', uno: 'DeletePage', iconName: 'deletepage.png'}, + } + + for (var key in this._buttons) { + var button = this._buttons[key]; + button.el = this._createButton(key, button.title, button.iconName, + buttonsName, container, this._onButtonClick); + } + + map.on('updateparts', this._updateDisabled, this) + + return container; + }, + + _updateDisabled: function (e) { + if (e.docType === 'presentation') { + return; + } + + for (var key in this._buttons) { + var button = this._buttons[key]; + L.DomUtil.addClass(button.el, 'leaflet-disabled'); + L.DomUtil.addClass(button.el, 'leaflet-control-buttons-disabled'); + } + }, + + _createButton: function (id, title, iconName, className, container, fn) { + var link = L.DomUtil.create('a', className, container); + link.href = '#'; + link.title = title; + var img = L.DomUtil.create('img', className, link); + img.id = id; + img.src = L.Icon.Default.imagePath + '/' + iconName; + + L.DomEvent + .on(link, 'mousedown dblclick', L.DomEvent.stopPropagation) + .on(link, 'click', L.DomEvent.stop) + .on(link, 'click', fn, this) + .on(link, 'click', this._refocusOnMap, this); + + return link; + }, + + _onButtonClick: function (e) { + if (L.DomUtil.hasClass(e.target.parentNode, 'leaflet-disabled')) { + return; + } + var id = e.target.id; + var button = this._buttons[id]; + var docLayer = this._map._docLayer; + + // TO DO: Deleting all the pages causes problem. + if (id === 'deletepage' && docLayer._parts === 1) { + return; + } + + if (button.uno) { + L.Socket.sendMessage('uno .uno:' + button.uno); + } + + // TO DO: We should fire these events after server response + // Unfortunately server does not send any response. + if (id === 'insertpage' || id === 'duplicatepage') { + this._map.fire('insertpage', { + selectedPart: docLayer._selectedPart, + parts: docLayer._parts, + }); + + docLayer._parts++; + this._map.setPart('next'); + } + else if (id === 'deletepage') { + this._map.fire('deletepage', { + selectedPart: docLayer._selectedPart, + parts: docLayer._parts, + }); + + docLayer._parts--; + + if (docLayer._selectedPart >= docLayer._parts) { + docLayer._selectedPart--; + } + + this._map.setPart(docLayer._selectedPart); + } + }, +}); + +L.control.presentation = function (options) { + return new L.Control.Presentation(options); +}; _______________________________________________ Libreoffice-commits mailing list [email protected] http://lists.freedesktop.org/mailman/listinfo/libreoffice-commits
