[Libreoffice-commits] online.git: 5 commits - loleaflet/dist
Faruk Uzun
farukuzun at collabora.com
Thu May 26 10:15:29 UTC 2016
loleaflet/dist/loleaflet.css | 1
loleaflet/dist/toolbar.css | 40 ++++--
loleaflet/dist/toolbar/toolbar.js | 229 ++++++++++++++++++++------------------
3 files changed, 155 insertions(+), 115 deletions(-)
New commits:
commit e6ea503885bc8587ae290c849caa9ba506190acd
Author: Faruk Uzun <farukuzun at collabora.com>
Date: Thu May 26 11:27:40 2016 +0300
loleaflet: bccu#1829: Fix some insert table button issues
- Use css for highlight cells.
- Close insert-table dialog on mouse leave.
- Better GUI
- More jQuery
Change-Id: I35e25f4ff150e373e70e7b14aa434d1dc055746a
diff --git a/loleaflet/dist/toolbar.css b/loleaflet/dist/toolbar.css
index bbe7ab2..28b48c7 100644
--- a/loleaflet/dist/toolbar.css
+++ b/loleaflet/dist/toolbar.css
@@ -269,21 +269,39 @@ button.leaflet-control-search-next
cursor:pointer;
}
-
-#tablePicker table {
- border: 1px solid #808080;
+.inserttable-pop {
+ z-index: 100000;
+ box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
}
-#tablePicker td {
- border: 1px solid #808080 !important;
- width: 15px;
- height: 15px;
+/* for 10x10 grid 10x20+10*.col.margin */
+.inserttable-grid {
+ box-sizing: border-box;
+ background: rgba(255, 255, 255, 0.5);
+ position: relative;
+ padding: 2px;
+ display: block;
+ width: 230px;
+ height: 230px;
}
-#tablePicker td:hover {
- background: #87CEFA;
+.inserttable-grid .row {
+ height: 20px;
}
-#tablePicker div {
- text-align:left;
+.inserttable-grid .col {
+ height: 100%;
+ float: left;
+ padding: 2px;
+ width: 20px;
+ border: 1px;
+ border-style: solid;
+ border-color: rgba(120, 120, 120, 0.5);
+ background: rgba(255, 255, 255, 1);
+ margin: 3px 0 0 3px;
}
+
+.inserttable-grid .col.bright {
+ border: 0px;
+ background: rgba(66, 151, 215, 1);
+}
\ No newline at end of file
diff --git a/loleaflet/dist/toolbar/toolbar.js b/loleaflet/dist/toolbar/toolbar.js
index b6a138a..333277d 100644
--- a/loleaflet/dist/toolbar/toolbar.js
+++ b/loleaflet/dist/toolbar/toolbar.js
@@ -47,7 +47,7 @@ $(function () {
{ type: 'break', id: 'incdecindent' },
{ type: 'button', id: 'annotation', img: 'annotation', hint: _("Insert comment"), uno: 'InsertAnnotation' },
{ type: 'button', id: 'insertgraphic', img: 'insertgraphic', hint: _("Insert graphic") },
- { type: 'html', id: 'inserttable-html', html: '<div id="tablePicker" class="evo-pop loleaflet-font" style="position:absolute !important;display:none"><div id="tpstatus"></div><table id="insert-table"></table></div>' },
+ { type: 'html', id: 'inserttable-html', html: '<div id="inserttable-popup" class="inserttable-pop ui-widget ui-widget-content ui-corner-all" style="position: absolute; display: none;"><div class="inserttable-grid"></div><div id="inserttable-status" class="loleaflet-font" style="padding: 5px;"><br/></div>' },
{ type: 'button', id: 'inserttable', img: 'inserttable', hint: _("Insert table") },
{ type: 'break' },
{ type: 'button', id: 'help', img: 'help', hint: _("Help") },
@@ -75,7 +75,7 @@ $(function () {
$("#backColorPicker").on("change.color", onColorPick);
}
- tablePickerInit();
+ insertTable();
}
});
@@ -290,12 +290,7 @@ function onClick(id) {
L.DomUtil.get('insertgraphic').click();
}
else if (id === 'inserttable') {
- // toggles tablePicker
- if (L.DomUtil.get('tablePicker').style.display == 'none') {
- L.DomUtil.get('tablePicker').style.display = '';
- } else {
- L.DomUtil.get('tablePicker').style.display = 'none';
- }
+ $('#inserttable-popup').toggle();
}
else if (id === 'fontcolor') {
// absolutely no idea why, but without the timeout, the popup is
@@ -1014,6 +1009,7 @@ $(document).ready(function() {
if (closebutton) {
toolbar.show('close');
}
+ inserttable();
});
function resizeToolbar() {
@@ -1058,73 +1054,58 @@ function resizeToolbar() {
}
}
-function tablePickerInit() {
- $( "#tablePicker" ).draggable();
- var tbl = document.getElementById('insert-table');
- if (!tbl.childElementCount) {
- for (var i = 0; i < 3; i++) {
- var tr = tbl.insertRow();
- for (var j = 0; j < 3; j++) {
- var td = tr.insertCell();
- }
+function insertTable() {
+ var rows = 10;
+ var cols = 10;
+ var $grid = $('.inserttable-grid');
+ var $popup = $('#inserttable-popup');
+ var $status = $("#inserttable-status");
+
+ // Return if already initialized
+ if ($grid.children().length) {
+ return;
+ }
+
+ // init
+ for (var r = 0; r < rows; r++) {
+ var $row = $('<div/>').addClass('row');
+ $grid.append($row);
+ for (var c = 0; c < cols; c++) {
+ var $col = $('<div/>').addClass('col');
+ $row.append($col);
}
- walkCells();
}
-}
-// tablePicker - GUI
-function walkCells() {
- var table = document.getElementById('insert-table');
- var cells = table.getElementsByTagName("td");
-
- for (var i = 0; i < cells.length; i++) {
- var cell = cells[i];
- cell.onmouseover = function() {
- var cellIndex = this.cellIndex + 1;
- var rowIndex = this.parentNode.rowIndex + 1;
- var div = document.getElementById('tpstatus');
- div.innerHTML = cellIndex + " × " + rowIndex;
- for (var j = 0; j < cells.length; j++) {
- var celly = cells[j];
- if (celly.parentNode.rowIndex < rowIndex & celly.cellIndex < cellIndex) {
- celly.style.background = '#87CEFA';
- } else {
- celly.style.background = '';
- }
- }
- if (cellIndex == table.rows[0].cells.length) {
- for (var k = 0; k < table.rows.length; k++) {
- table.rows[k].insertCell();
- walkCells();
- }
- } else if (rowIndex == table.rows.length) {
- var tr = table.insertRow();
- for (var j = 0; j < table.rows[0].cells.length; j++) {
- var td = tr.insertCell();
- }
- walkCells();
- } else if ((table.rows.length>3 && rowIndex < table.rows.length-1)) {
- table.deleteRow(table.rows.length-1);
- walkCells();
- } else if (table.rows[0].cells.length>3 && cellIndex < table.rows[0].cells.length-1 ) {
- for (var j = 0; j < table.rows.length; j++) {
- var tr = table.rows[j];
- tr.deleteCell(table.rows[0].cells.length-1);
- }
- walkCells();
- }
- };
+ // events
+ $grid.on({
+ mouseover: function () {
+ var col = $(this).index() + 1;
+ var row = $(this).parent().index() + 1;
+ $('.col').removeClass('bright');
+ $('.row:nth-child(-n+' + row + ') .col:nth-child(-n+' + col + ')')
+ .addClass('bright');
+ $status.html(col+"x"+row);
- cell.onclick = function(){
- var cellIndex = this.cellIndex + 1;
- var rowIndex = this.parentNode.rowIndex + 1;
+ },
+ click: function(){
+ var col = $(this).index() + 1;
+ var row = $(this).parent().index() + 1;
+ $popup.toggle();
+ $('.col').removeClass('bright');
+ $status.html('<br/>');
var msg = 'uno .uno:InsertTable {' +
- ' "Columns": { "type": "long","value": ' +
- cellIndex +
- ' }, "Rows": { "type": "long","value": ' +
- rowIndex +' }}';
+ ' "Columns": { "type": "long","value": '
+ + col +
+ ' }, "Rows": { "type": "long","value": '
+ + row +' }}';
map._socket.sendMessage(msg);
- L.DomUtil.get('tablePicker').style.display = 'none';
- };
- }
+ }
+ }, ".col");
+
+ // close dialog on mouseleave
+ $popup.mouseleave(function(){
+ $(this).hide();
+ $('.col').removeClass('bright');
+ $status.html('<br/>');
+ });
}
commit cdd6147f56597ed13fcf6da3c1868400ceda9fab
Author: Pranav Kant <pranavk at collabora.com>
Date: Wed May 25 23:36:57 2016 +0530
loleaflet: Rework toolbar resize; fix an infinite loop
Set the min-width of window to 600px so that all select list
boxes remain in main toolbar, and not go in toolbar-more.
While resizing the toolbar, if the user tries to reduce the
window width past the min-width set, we would run into an
infinite loop causing spike in browser CPU usage and eventually
crash. This used to happen earlier also before setting this
min-width with very small browser window size.
Also simplify the toolbar resize algorithm. Rather than using raw
jquery methods to move items from one toolbar to another, use
library's (w2ui) methods to add/remove items from toolbar. This
also requires the need of proper initialization of few buttons
such as color picker, table picker because moving item from one
toolbar to another strips off the initialization corresponding to
these toolbar buttons and these need to be reinitialized. Moving
such initialization to onRefresh, hence, would keep them
initialized whenever toolbar is resized.
This also solves one major problem with enabled/disabled state of
toolbar buttons. Since, now, we are actually moving the items
from one toolbar to another, we can enable/disable them using
toolbar's methods ie. enable(), disable().
Change-Id: I64fb0a9d7761f66701bc0e020d1dbad9e4defe29
diff --git a/loleaflet/dist/loleaflet.css b/loleaflet/dist/loleaflet.css
index c7b4bed..473cf0c 100644
--- a/loleaflet/dist/loleaflet.css
+++ b/loleaflet/dist/loleaflet.css
@@ -29,6 +29,7 @@
body {
margin: 0;
+ min-width: 600px;
}
.loleaflet-font {
diff --git a/loleaflet/dist/toolbar/toolbar.js b/loleaflet/dist/toolbar/toolbar.js
index dfbc010..b6a138a 100644
--- a/loleaflet/dist/toolbar/toolbar.js
+++ b/loleaflet/dist/toolbar/toolbar.js
@@ -59,20 +59,23 @@ $(function () {
onClick(e.target);
},
onRefresh: function(e) {
- $('#fontColorPicker').colorpicker({showOn:'none', hideButton:true});
- $("#fontColorPicker").on("change.color", onColorPick);
- $('#backColorPicker').colorpicker({showOn:'none', hideButton:true});
- $("#backColorPicker").on("change.color", onColorPick);
-
if (!L.DomUtil.get('fontcolorindicator')) {
var fontColorIndicator = L.DomUtil.create('div', 'font-color-indicator', L.DomUtil.get('tb_toolbar-up_item_fontcolor'));
fontColorIndicator.id = 'fontcolorindicator';
+
+ $('#fontColorPicker').colorpicker({showOn:'none', hideButton:true});
+ $("#fontColorPicker").on("change.color", onColorPick);
}
if (!L.DomUtil.get('backcolorindicator')) {
var backColorIndicator = L.DomUtil.create('div', 'back-color-indicator', L.DomUtil.get('tb_toolbar-up_item_backcolor'));
backColorIndicator.id = 'backcolorindicator';
+
+ $('#backColorPicker').colorpicker({showOn:'none', hideButton:true});
+ $("#backColorPicker").on("change.color", onColorPick);
}
+
+ tablePickerInit();
}
});
@@ -329,6 +332,7 @@ function onClick(id) {
else {
toolbar.uncheck('more');
}
+ w2ui['toolbar-up-more'].render();
resizeToolbar();
}
else if (id === 'help') {
@@ -695,7 +699,6 @@ map.on('search', function (e) {
}
});
-
map.on('updatetoolbarcommandvalues', function (e) {
// we need an empty option for the place holder to work
var data = [''];
@@ -1015,22 +1018,24 @@ $(document).ready(function() {
function resizeToolbar() {
var has_more_items = false;
-
+ var toolbarUp = w2ui['toolbar-up'];
+ var toolbarUpMore = w2ui['toolbar-up-more'];
// move items from toolbar-up-more -> toolbar-up
while ($('#toolbar-up')[0].scrollWidth <= $(window).width()) {
- var firstItem = $('#toolbar-up-more>table>tbody>tr>td:first');
- if (firstItem.length < 1) {
+ var item = toolbarUpMore.items[0];
+ if (!item) {
break;
}
- var detached = $(firstItem).detach();
- $(detached).insertAfter($('#toolbar-up>table>tbody>tr>td:nth-last-child(5)')[0]);
+ toolbarUpMore.items.shift();
+ toolbarUp.insert('right', item);
}
// move items from toolbar-up -> toolbar-up-more
- while ($('#toolbar-up')[0].scrollWidth > $(window).width()) {
- var detached = $('#toolbar-up>table>tbody>tr>td:nth-last-child(5)').detach();
- $('#toolbar-up-more>table>tbody>tr').prepend(detached);
-
+ while ($('#toolbar-up')[0].scrollWidth > Math.max($(window).width(), parseInt($('body').css('min-width')))) {
+ var itemId = toolbarUp.items[toolbarUp.items.length - 4].id;
+ item = toolbarUp.get(itemId);
+ toolbarUp.remove(itemId);
+ toolbarUpMore.insert(toolbarUpMore.items[0], item);
has_more_items = true;
}
@@ -1045,6 +1050,7 @@ function resizeToolbar() {
var lastItem = $('#toolbar-up-more>table>tbody>tr>td[valign="middle"]').last();
if (lastItem.length) {
$('#toolbar-up-more').width($(lastItem).position().left + $(lastItem).width());
+ w2ui['toolbar-up-more'].render();
} else {
$('#toolbar-up-more').hide();
var toolbar = w2ui['toolbar-up'];
@@ -1052,18 +1058,19 @@ function resizeToolbar() {
}
}
-// tablePicker - init
-$(function() {
+function tablePickerInit() {
$( "#tablePicker" ).draggable();
- tbl = document.getElementById('insert-table');
- for (var i = 0; i < 3; i++) {
- var tr = tbl.insertRow();
- for (var j = 0; j < 3; j++) {
- var td = tr.insertCell();
+ var tbl = document.getElementById('insert-table');
+ if (!tbl.childElementCount) {
+ for (var i = 0; i < 3; i++) {
+ var tr = tbl.insertRow();
+ for (var j = 0; j < 3; j++) {
+ var td = tr.insertCell();
+ }
}
+ walkCells();
}
- walkCells();
-});
+}
// tablePicker - GUI
function walkCells() {
commit d915fc9310468a9a2f56e92eab7f48b2d7bc2153
Author: Pranav Kant <pranavk at collabora.com>
Date: Thu May 26 00:12:08 2016 +0530
loleaflet: Init font/back color on refresh
When these buttons are moved from toolbar-up to up-more and then
back they are not initialized.
Change-Id: Idc8c342092f723c3e50308988f8b2c070e0c08ad
diff --git a/loleaflet/dist/toolbar/toolbar.js b/loleaflet/dist/toolbar/toolbar.js
index 8a76146..dfbc010 100644
--- a/loleaflet/dist/toolbar/toolbar.js
+++ b/loleaflet/dist/toolbar/toolbar.js
@@ -59,6 +59,11 @@ $(function () {
onClick(e.target);
},
onRefresh: function(e) {
+ $('#fontColorPicker').colorpicker({showOn:'none', hideButton:true});
+ $("#fontColorPicker").on("change.color", onColorPick);
+ $('#backColorPicker').colorpicker({showOn:'none', hideButton:true});
+ $("#backColorPicker").on("change.color", onColorPick);
+
if (!L.DomUtil.get('fontcolorindicator')) {
var fontColorIndicator = L.DomUtil.create('div', 'font-color-indicator', L.DomUtil.get('tb_toolbar-up_item_fontcolor'));
fontColorIndicator.id = 'fontcolorindicator';
@@ -144,11 +149,6 @@ $(function () {
onClick(e.target);
}
});
-
- $('#fontColorPicker').colorpicker({showOn:'none', hideButton:true});
- $("#fontColorPicker").on("change.color", onColorPick);
- $('#backColorPicker').colorpicker({showOn:'none', hideButton:true});
- $("#backColorPicker").on("change.color", onColorPick);
});
// This object is used to track enabled/disabled state when one is in view mode
commit d04a92fcf3b7cfb474f49c05d1ce49fe638006c9
Author: Pranav Kant <pranavk at collabora.com>
Date: Thu May 26 00:14:43 2016 +0530
loleaflet: Check if clicked item is in toolbar-up-more
Change-Id: I8758f0195fcc9a2676597637c11efc9476d5093b
diff --git a/loleaflet/dist/toolbar/toolbar.js b/loleaflet/dist/toolbar/toolbar.js
index 7c06785..8a76146 100644
--- a/loleaflet/dist/toolbar/toolbar.js
+++ b/loleaflet/dist/toolbar/toolbar.js
@@ -194,10 +194,14 @@ function onClick(id) {
toolbar = w2ui['spreadsheet-toolbar'];
item = toolbar.get(id) ;
}
- else if (w2ui['presentation-toolbar'].get(id) != null) {
+ else if (w2ui['presentation-toolbar'].get(id) !== null) {
toolbar = w2ui['presentation-toolbar'];
item = toolbar.get(id);
}
+ else if (w2ui['toolbar-up-more'].get(id) !== null) {
+ toolbar = w2ui['toolbar-up-more'];
+ item = toolbar.get(id);
+ }
else {
throw new Error('unknown id: ' + id);
}
commit 586b15990287d0d39652a3ebb567edd1b1a90372
Author: Pranav Kant <pranavk at collabora.com>
Date: Wed May 25 23:33:04 2016 +0530
loleaflet: Clean-up toolbar; fix en/dis-able button states
Use an object to keep track of enabled/disabled state of buttons.
This also prevents us looping all the format buttons everytime a
commandstatechanged is received, so better algorithmic
complexity.
For sessions in view-only mode, keep storing the state of these
buttons in this object, and use the stored states to
enable/disable buttons when edit lock is taken.
While enabling/disabling the toolbar buttons, also check in
toolbar-more.
Change-Id: I6555fde6669e1a8ba349c3213280a627a05d80b7
diff --git a/loleaflet/dist/toolbar/toolbar.js b/loleaflet/dist/toolbar/toolbar.js
index baaf79a..7c06785 100644
--- a/loleaflet/dist/toolbar/toolbar.js
+++ b/loleaflet/dist/toolbar/toolbar.js
@@ -151,10 +151,15 @@ $(function () {
$("#backColorPicker").on("change.color", onColorPick);
});
-var formatButtons = ['undo', 'redo', 'save',
- 'bold', 'italic', 'underline', 'strikeout', 'annotation', 'inserttable',
- 'fontcolor', 'backcolor', 'bullet', 'numbering', 'alignleft', 'alignhorizontal', 'alignright', 'alignblock',
- 'incrementindent', 'decrementindent', 'insertgraphic'];
+// This object is used to track enabled/disabled state when one is in view mode
+var formatButtons = {
+ 'undo': true, 'redo': true, 'save': true,
+ 'bold': true, 'italic': true, 'underline': true, 'strikeout': true,
+ 'annotation': true, 'inserttable': true,
+ 'fontcolor': true, 'backcolor': true, 'bullet': true, 'numbering': true,
+ 'alignleft': true, 'alignhorizontal': true, 'alignright': true, 'alignblock': true,
+ 'incrementindent': true, 'decrementindent': true, 'insertgraphic': true
+};
var takeEditPopupMessage = '<div>' + _("You are viewing now.") + '<br/>' + _("Click here to take edit.") + '</div>';
var takeEditPopupTimeout = null;
@@ -637,22 +642,41 @@ map.on('commandstatechanged', function (e) {
}
}
- formatButtons.forEach(function (id) {
- if ('.uno:' + toolbar.get(id).uno === commandName) {
- if (state === 'true') {
- toolbar.check(id);
- }
- else if (state === 'false') {
- toolbar.uncheck(id);
- }
- else if (state === 'enabled' && map._permission === 'edit') {
+ var toolbarUpMore = w2ui['toolbar-up-more'];
+ var id = commandName.toLowerCase().substr(5);
+ if (typeof formatButtons[id] !== 'undefined') {
+ if (state === 'true') {
+ toolbar.check(id);
+ toolbarUpMore.check(id);
+ }
+ else if (state === 'false') {
+ toolbar.uncheck(id);
+ toolbarUpMore.uncheck(id);
+ }
+ // only store the state for now;
+ // buttons with stored state === enabled will
+ // be enabled when we get the editlock
+ else if (state === 'enabled') {
+ formatButtons[id] = true;
+ }
+ else if (state === 'disabled') {
+ formatButtons[id] = false;
+ }
+
+ // Change the toolbar button state immediately
+ // if we already have the editlock
+ if (map._editlock && (state === 'enabled' || state === 'disabled')) {
+ // in case some buttons are in toolbar-up-more, find
+ // them and en/dis-able them.
+ if (formatButtons[id]) {
toolbar.enable(id);
- }
- else if (state === 'disabled') {
+ toolbarUpMore.enable(id);
+ } else {
toolbar.disable(id);
+ toolbarUpMore.disable(id);
}
}
- });
+ }
});
map.on('search', function (e) {
@@ -873,14 +897,19 @@ map.on('editlock', function (e) {
}
toolbar = w2ui['toolbar-up'];
+ var toolbarUpMore = w2ui['toolbar-up-more'];
// {En,Dis}able toolbar buttons
- formatButtons.forEach(function (id) {
- if (e.value) {
+ for (var id in formatButtons) {
+ if (e.value && formatButtons[id]) {
+ // restore the state from stored object (formatButtons)
toolbar.enable(id);
+ // some might be hidden in toolbar-up-more
+ toolbarUpMore.enable(id);
} else {
toolbar.disable(id);
+ toolbarUpMore.disable(id);
}
- });
+ }
var spreadsheetButtons = ['firstrecord', 'prevrecord', 'nextrecord', 'lastrecord'];
var formulaBarButtons = ['sum', 'function'];
More information about the Libreoffice-commits
mailing list