[Libreoffice-commits] online.git: loleaflet/css loleaflet/Makefile.am loleaflet/src
Szymon KÅ‚os (via logerrit)
logerrit at kemper.freedesktop.org
Wed Apr 15 14:52:07 UTC 2020
loleaflet/Makefile.am | 1
loleaflet/css/device-mobile.css | 39 ++++
loleaflet/src/control/Control.MobileTopBar.js | 38 ---
loleaflet/src/control/Control.StatusBar.js | 187 -------------------
loleaflet/src/control/Control.Toolbar.js | 39 ----
loleaflet/src/control/Control.UserList.js | 252 ++++++++++++++++++++++++++
loleaflet/src/main.js | 1
7 files changed, 305 insertions(+), 252 deletions(-)
New commits:
commit 610e2dbd583da4537e8cdef7f10318dc43e8c269
Author: Szymon Kłos <szymon.klos at collabora.com>
AuthorDate: Tue Apr 14 18:07:25 2020 +0200
Commit: Szymon Kłos <szymon.klos at collabora.com>
CommitDate: Wed Apr 15 16:51:48 2020 +0200
Move user list to a separate file
Change-Id: I1cd8881d8ea342b96bd5ea5bd4972f971c89881d
Reviewed-on: https://gerrit.libreoffice.org/c/online/+/92210
Tested-by: Jenkins CollaboraOffice <jenkinscollaboraoffice at gmail.com>
Reviewed-by: Szymon Kłos <szymon.klos at collabora.com>
diff --git a/loleaflet/Makefile.am b/loleaflet/Makefile.am
index a57e9ebd4..0cb94a244 100644
--- a/loleaflet/Makefile.am
+++ b/loleaflet/Makefile.am
@@ -266,6 +266,7 @@ LOLEAFLET_JS =\
src/control/Control.SearchBar.js \
src/control/Control.MobileTopBar.js \
src/control/Control.MobileBottomBar.js \
+ src/control/Control.UserList.js \
src/control/Control.Layers.js \
src/control/Search.js \
src/control/Permission.js \
diff --git a/loleaflet/css/device-mobile.css b/loleaflet/css/device-mobile.css
index 161686840..3f795fa53 100644
--- a/loleaflet/css/device-mobile.css
+++ b/loleaflet/css/device-mobile.css
@@ -23,6 +23,45 @@ input#follow-checkbox {
border: 2px solid #aaa;
outline: none;
box-shadow: #00000015 0px 0px 2px 1px;
+ margin: 0px !important;
+}
+#follow-container {
+ display: block;
+ position: relative;
+ font-size: 22px;
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+ }
+.checkmark {
+ position: absolute;
+ top: 0;
+ left: 0;
+ height: 25px;
+ width: 25px;
+}
+.checkmark:after {
+ content: "";
+ position: absolute;
+ display: none;
+}
+.checkmark:after {
+ left: 9px;
+ top: 5px;
+ width: 5px;
+ height: 10px;
+ border: solid white;
+ border-width: 0 3px 3px 0;
+ -webkit-transform: rotate(45deg);
+ -ms-transform: rotate(45deg);
+ transform: rotate(45deg);
+ }
+input#follow-checkbox:checked ~ .checkmark:after {
+ display: block;
+}
+input#follow-checkbox:checked ~ .checkmark {
+ background-color: #0b87e7;
}
#userlist_table + hr { display: none;}
div#w2ui-overlay-actionbar.w2ui-overlay{
diff --git a/loleaflet/src/control/Control.MobileTopBar.js b/loleaflet/src/control/Control.MobileTopBar.js
index 2d4a917f3..76874fb9c 100644
--- a/loleaflet/src/control/Control.MobileTopBar.js
+++ b/loleaflet/src/control/Control.MobileTopBar.js
@@ -3,7 +3,7 @@
* L.Control.SearchBar
*/
-/* global $ w2ui _ _UNO */
+/* global $ w2ui _UNO */
L.Control.MobileTopBar = L.Control.extend({
options: {
@@ -32,16 +32,7 @@ L.Control.MobileTopBar = L.Control.extend({
{type: 'button', id: 'insertion_mobile_wizard', img: 'insertion_mobile_wizard', disabled: true},
{type: 'button', id: 'insertcomment', img: 'insertcomment', disabled: true},
{type: 'button', id: 'fullscreen', img: 'fullscreen', hint: _UNO('.uno:FullScreen', 'text')},
- {type: 'drop', id: 'userlist', img: 'users', html: '<div id="userlist_container"><table id="userlist_table"><tbody></tbody></table>' +
- '<hr><table class="loleaflet-font" id="editor-btn">' +
- '<tr>' +
- '<td><input type="checkbox" name="alwaysFollow" id="follow-checkbox" onclick="editorUpdate(event)"></td>' +
- '<td>' + _('Always follow the editor') + '</td>' +
- '</tr>' +
- '</table>' +
- '<p id="currently-msg">' + _('Current') + ' - <b><span id="current-editor"></span></b></p>' +
- '</div>'
- },
+ {type: 'drop', id: 'userlist', img: 'users', html: L.control.createUserListWidget()},
];
} else if (docType == 'spreadsheet') {
return [
@@ -53,16 +44,7 @@ L.Control.MobileTopBar = L.Control.extend({
{type: 'button', id: 'insertion_mobile_wizard', img: 'insertion_mobile_wizard', disabled: true},
// {type: 'button', id: 'insertcomment', img: 'insertcomment', disabled: true},
{type: 'button', id: 'fullscreen', img: 'fullscreen', hint: _UNO('.uno:FullScreen', 'text')},
- {type: 'drop', id: 'userlist', img: 'users', html: '<div id="userlist_container"><table id="userlist_table"><tbody></tbody></table>' +
- '<hr><table class="loleaflet-font" id="editor-btn">' +
- '<tr>' +
- '<td><input type="checkbox" name="alwaysFollow" id="follow-checkbox" onclick="editorUpdate(event)"></td>' +
- '<td>' + _('Always follow the editor') + '</td>' +
- '</tr>' +
- '</table>' +
- '<p id="currently-msg">' + _('Current') + ' - <b><span id="current-editor"></span></b></p>' +
- '</div>'
- },
+ {type: 'drop', id: 'userlist', img: 'users', html: L.control.createUserListWidget()},
];
} else if (docType == 'presentation') {
return [
@@ -74,16 +56,7 @@ L.Control.MobileTopBar = L.Control.extend({
{type: 'button', id: 'mobile_wizard', img: 'mobile_wizard', disabled: true},
{type: 'button', id: 'insertion_mobile_wizard', img: 'insertion_mobile_wizard', disabled: true},
{type: 'button', id: 'insertcomment', img: 'insertcomment', disabled: true},
- {type: 'drop', id: 'userlist', img: 'users', hidden: true, html: '<div id="userlist_container"><table id="userlist_table"><tbody></tbody></table>' +
- '<hr><table class="loleaflet-font" id="editor-btn">' +
- '<tr>' +
- '<td><input type="checkbox" name="alwaysFollow" id="follow-checkbox" onclick="editorUpdate(event)"></td>' +
- '<td>' + _('Always follow the editor') + '</td>' +
- '</tr>' +
- '</table>' +
- '<p id="currently-msg">' + _('Current') + ' - <b><span id="current-editor"></span></b></p>' +
- '</div>'
- },
+ {type: 'drop', id: 'userlist', img: 'users', hidden: true, html: L.control.createUserListWidget()},
];
}
},
@@ -188,6 +161,9 @@ L.Control.MobileTopBar = L.Control.extend({
toolbar.check(id);
}
}
+ else if (id === 'userlist') {
+ this.map.fire('openuserlist');
+ }
},
onUpdatePermission: function(e) {
diff --git a/loleaflet/src/control/Control.StatusBar.js b/loleaflet/src/control/Control.StatusBar.js
index bfe2866ae..26db62d11 100644
--- a/loleaflet/src/control/Control.StatusBar.js
+++ b/loleaflet/src/control/Control.StatusBar.js
@@ -5,14 +5,6 @@
/* global $ w2ui w2utils _ _UNO */
L.Control.StatusBar = L.Control.extend({
- options: {
- userPopupTimeout: null,
- userJoinedPopupMessage: '<div>' + _('%user has joined') + '</div>',
- userLeftPopupMessage: '<div>' + _('%user has left') + '</div>',
- nUsers: undefined,
- oneUser: undefined,
- noUser: undefined
- },
initialize: function () {
},
@@ -21,12 +13,8 @@ L.Control.StatusBar = L.Control.extend({
this.map = map;
map.on('doclayerinit', this.onDocLayerInit, this);
- map.on('addview', this.onAddView, this);
- map.on('removeview', this.onRemoveView, this);
map.on('commandvalues', this.onCommandValues, this);
map.on('commandstatechanged', this.onCommandStateChanged, this);
- map.on('deselectuser', this.deselectUser, this);
-
},
hideTooltip: function(toolbar, id) {
@@ -67,27 +55,6 @@ L.Control.StatusBar = L.Control.extend({
return text;
},
- escapeHtml: function(input) {
- return $('<div>').text(input).html();
- },
-
- getUserItem: function(viewId, userName, extraInfo, color) {
- var html = '<tr class="useritem" id="user-' + viewId + '" onclick="onUseritemClicked(event)">' +
- '<td class=usercolor>';
- if (extraInfo !== undefined && extraInfo.avatar !== undefined) {
- html += '<img class="avatar-img" src="' + extraInfo.avatar + '" style="border-color: ' + color + ';" />';
- } else {
- html += '<div class="user-info" style="background-color: ' + color + ';" />';
- }
-
- // TODO: Add mail and other links as sub-menu.
- html += '</td>' +
- '<td class="username loleaflet-font" >' + userName + '</td>' +
- '</tr>';
-
- return html;
- },
-
_updateVisibilityForToolbar: function(toolbar) {
if (!toolbar)
return;
@@ -118,41 +85,6 @@ L.Control.StatusBar = L.Control.extend({
this._updateVisibilityForToolbar(w2ui['actionbar']);
},
- updateUserListCount: function() {
- var actionbar = w2ui.actionbar;
- var userlistItem = actionbar && actionbar.get('userlist');
- if (userlistItem == null) {
- return;
- }
-
- var count = $(userlistItem.html).find('#userlist_table tbody tr').length;
- if (count > 1) {
- userlistItem.text = this.options.nUsers.replace('%n', count);
- } else if (count === 1) {
- userlistItem.text = this.options.oneUser;
- } else {
- userlistItem.text = this.options.noUser;
- }
-
- w2ui['actionbar'].refresh();
-
- var hideUserList =
- window.ThisIsAMobileApp ||
- (this.map['wopi'].HideUserList !== null && this.map['wopi'].HideUserList !== undefined &&
- ($.inArray('true', this.map['wopi'].HideUserList) >= 0) ||
- (window.mode.isMobile() && $.inArray('mobile', this.map['wopi'].HideUserList) >= 0) ||
- (window.mode.isTablet() && $.inArray('tablet', this.map['wopi'].HideUserList) >= 0) ||
- (window.mode.isDesktop() && $.inArray('desktop', this.map['wopi'].HideUserList) >= 0));
-
- if (!hideUserList && count > 1) {
- actionbar.show('userlist');
- actionbar.show('userlistbreak');
- } else {
- actionbar.hide('userlist');
- actionbar.hide('userlistbreak');
- }
- },
-
onClick: function(e, id, item, subItem) {
if ('actionbar' in w2ui && w2ui['actionbar'].get(id) !== null) {
var toolbar = w2ui['actionbar'];
@@ -224,6 +156,9 @@ L.Control.StatusBar = L.Control.extend({
this.map.sendUnoCommand('.uno:StatusBarFunc', command);
});
}
+ else if (id === 'userlist') {
+ this.map.fire('openuserlist');
+ }
},
create: function() {
@@ -246,16 +181,7 @@ L.Control.StatusBar = L.Control.extend({
{type: 'button', id: 'cancelsearch', img: 'cancel', hint: _('Cancel the search'), hidden: true},
{type: 'html', id: 'left'},
{type: 'html', id: 'right'},
- {type: 'drop', id: 'userlist', img: 'users', hidden: true, html: '<div id="userlist_container"><table id="userlist_table"><tbody></tbody></table>' +
- '<hr><table class="loleaflet-font" id="editor-btn">' +
- '<tr>' +
- '<td><input type="checkbox" name="alwaysFollow" id="follow-checkbox" onclick="editorUpdate(event)"></td>' +
- '<td>' + _('Always follow the editor') + '</td>' +
- '</tr>' +
- '</table>' +
- '<p id="currently-msg">' + _('Current') + ' - <b><span id="current-editor"></span></b></p>' +
- '</div>'
- },
+ {type: 'drop', id: 'userlist', img: 'users', hidden: true, html: L.control.createUserListWidget()},
{type: 'break', id: 'userlistbreak', hidden: true, mobile: false },
{type: 'button', id: 'prev', img: 'prev', hint: _UNO('.uno:PageUp', 'text')},
{type: 'button', id: 'next', img: 'next', hint: _UNO('.uno:PageDown', 'text')},
@@ -287,22 +213,6 @@ L.Control.StatusBar = L.Control.extend({
],
onClick: function (e) {
that.hideTooltip(this, e.target);
- if (e.item.id === 'userlist') {
- setTimeout(function() {
- var cBox = $('#follow-checkbox')[0];
- var docLayer = that.map._docLayer;
- var editorId = docLayer._editorId;
-
- if (cBox)
- cBox.checked = docLayer._followEditor;
-
- if (docLayer.editorId !== -1 && that.map._viewInfo[editorId])
- $('#current-editor').text(that.map._viewInfo[editorId].username);
- else
- $('#currently-msg').hide();
- }, 100);
- return;
- }
that.onClick(e, e.target, e.item, e.subItem);
},
onRefresh: function() {
@@ -487,17 +397,7 @@ L.Control.StatusBar = L.Control.extend({
break;
}
- if (window.mode.isMobile() || window.mode.isTablet()) {
- this.options.nUsers = '%n';
- this.options.oneUser = '1';
- this.options.noUser = '0';
- } else {
- this.options.nUsers = _('%n users');
- this.options.oneUser = _('1 user');
- this.options.noUser = _('0 users');
- }
-
- this.updateUserListCount();
+ this.map.fire('updateuserlistcount');
this._updateToolbarsVisibility();
@@ -505,74 +405,6 @@ L.Control.StatusBar = L.Control.extend({
statusbar.refresh();
},
- onAddView: function(e) {
- var userlistItem = w2ui['actionbar'].get('userlist');
- var username = this.escapeHtml(e.username);
- var showPopup = false;
-
- if (userlistItem !== null)
- showPopup = $(userlistItem.html).find('#userlist_table tbody tr').length > 0;
-
- if (showPopup) {
- $('#tb_actionbar_item_userlist')
- .w2overlay({
- class: 'loleaflet-font',
- html: this.options.userJoinedPopupMessage.replace('%user', username),
- style: 'padding: 5px'
- });
- clearTimeout(this.options.userPopupTimeout);
- var that = this;
- this.options.userPopupTimeout = setTimeout(function() {
- $('#tb_actionbar_item_userlist').w2overlay('');
- clearTimeout(that.options.userPopupTimeout);
- that.options.userPopupTimeout = null;
- }, 3000);
- }
-
- var color = L.LOUtil.rgbToHex(this.map.getViewColor(e.viewId));
- if (e.viewId === this.map._docLayer._viewId) {
- username = _('You');
- color = '#000';
- }
-
- // Mention readonly sessions in userlist
- if (e.readonly) {
- username += ' (' + _('Readonly') + ')';
- }
-
- if (userlistItem !== null) {
- var newhtml = $(userlistItem.html).find('#userlist_table tbody').append(this.getUserItem(e.viewId, username, e.extraInfo, color)).parent().parent()[0].outerHTML;
- userlistItem.html = newhtml;
- this.updateUserListCount();
- }
- },
-
- onRemoveView: function(e) {
- $('#tb_actionbar_item_userlist')
- .w2overlay({
- class: 'loleaflet-font',
- html: this.options.userLeftPopupMessage.replace('%user', e.username),
- style: 'padding: 5px'
- });
- clearTimeout(this.options.userPopupTimeout);
- this.options.userPopupTimeout = setTimeout(function() {
- $('#tb_actionbar_item_userlist').w2overlay('');
- clearTimeout(this.options.userPopupTimeout);
- this.options.userPopupTimeout = null;
- }, 3000);
-
- if (e.viewId === this.map._docLayer._followThis) {
- this.map._docLayer._followThis = -1;
- this.map._docLayer._followUser = false;
- }
-
- var userlistItem = w2ui['actionbar'].get('userlist');
- if (userlistItem !== null) {
- userlistItem.html = $(userlistItem.html).find('#user-' + e.viewId).remove().end()[0].outerHTML;
- this.updateUserListCount();
- }
- },
-
_cancelSearch: function() {
var toolbar = window.mode.isMobile() ? w2ui['searchbar'] : w2ui['actionbar'];
var searchInput = L.DomUtil.get('search-input');
@@ -697,15 +529,6 @@ L.Control.StatusBar = L.Control.extend({
w2ui['actionbar'].set('LanguageStatus', {items: toolbaritems});
}
},
-
- deselectUser: function(e) {
- var userlistItem = w2ui['actionbar'].get('userlist');
- if (userlistItem === null) {
- return;
- }
-
- userlistItem.html = $(userlistItem.html).find('#user-' + e.viewId).removeClass('selected-user').parent().parent().parent()[0].outerHTML;
- },
});
L.control.statusBar = function () {
diff --git a/loleaflet/src/control/Control.Toolbar.js b/loleaflet/src/control/Control.Toolbar.js
index 06ffa7cdd..be3101358 100644
--- a/loleaflet/src/control/Control.Toolbar.js
+++ b/loleaflet/src/control/Control.Toolbar.js
@@ -1937,28 +1937,6 @@ function onUpdatePermission(e) {
map.invalidateSize();
}
-function onUseritemClicked(e) { // eslint-disable-line no-unused-vars
- var docLayer = map._docLayer;
- var viewId = parseInt(e.currentTarget.id.replace('user-', ''));
-
- map._goToViewId(viewId);
-
- if (viewId === map._docLayer._viewId) {
- $('#tb_actionbar_item_userlist').w2overlay('');
- return;
- } else if (docLayer._followThis !== -1) {
- map._setFollowing(false, null);
- }
-
- docLayer._followThis = viewId;
- docLayer._followUser = true;
- docLayer._followEditor = false;
-
- selectUser(viewId);
-}
-
-global.onUseritemClicked = onUseritemClicked;
-
function editorUpdate(e) { // eslint-disable-line no-unused-vars
var docLayer = map._docLayer;
@@ -1975,8 +1953,6 @@ function editorUpdate(e) { // eslint-disable-line no-unused-vars
var userlistItem = w2ui['actionbar'].get('userlist');
if (userlistItem !== null) {
$('.selected-user').removeClass('selected-user');
- if ($(userlistItem.html).find('.selected-user').length !== 0)
- userlistItem.html = $(userlistItem.html).find('.selected-user').removeClass('selected-user').parent().parent().parent()[0].outerHTML;
}
}
else {
@@ -1988,16 +1964,6 @@ function editorUpdate(e) { // eslint-disable-line no-unused-vars
global.editorUpdate = editorUpdate;
-function selectUser(viewId) {
- var userlistItem = w2ui['actionbar'].get('userlist');
- if (userlistItem === null) {
- return;
- }
-
- userlistItem.html = $(userlistItem.html).find('#user-' + viewId).addClass('selected-user').parent().parent().parent()[0].outerHTML;
- $('#tb_actionbar_item_userlist').w2overlay('');
-}
-
$(window).resize(function() {
resizeToolbar();
});
@@ -2013,11 +1979,6 @@ function setupToolbar(e) {
createToolbar();
- map.on('updateEditorName', function(e) {
- $('#currently-msg').show();
- $('#current-editor').text(e.username);
- });
-
map.on('focussearch', function () {
var entry = L.DomUtil.get('search-input');
entry.focus();
diff --git a/loleaflet/src/control/Control.UserList.js b/loleaflet/src/control/Control.UserList.js
new file mode 100644
index 000000000..9a7c27386
--- /dev/null
+++ b/loleaflet/src/control/Control.UserList.js
@@ -0,0 +1,252 @@
+/* -*- js-indent-level: 8 -*- */
+/*
+ * L.Control.UserList
+ */
+
+/* global $ w2ui _ */
+L.Control.UserList = L.Control.extend({
+ options: {
+ userPopupTimeout: null,
+ userJoinedPopupMessage: '<div>' + _('%user has joined') + '</div>',
+ userLeftPopupMessage: '<div>' + _('%user has left') + '</div>',
+ nUsers: undefined,
+ oneUser: undefined,
+ noUser: undefined
+ },
+
+ initialize: function () {
+ },
+
+ onAdd: function (map) {
+ this.map = map;
+
+ map.on('addview', this.onAddView, this);
+ map.on('removeview', this.onRemoveView, this);
+ map.on('deselectuser', this.deselectUser, this);
+ map.on('openuserlist', this.onOpenUserList, this);
+
+ if (window.mode.isMobile() || window.mode.isTablet()) {
+ this.options.nUsers = '%n';
+ this.options.oneUser = '1';
+ this.options.noUser = '0';
+ } else {
+ this.options.nUsers = _('%n users');
+ this.options.oneUser = _('1 user');
+ this.options.noUser = _('0 users');
+ }
+
+ map.on('updateEditorName', function(e) {
+ $('#currently-msg').show();
+ $('#current-editor').text(e.username);
+ });
+ },
+
+ escapeHtml: function(input) {
+ return $('<div>').text(input).html();
+ },
+
+ selectUser: function(viewId) {
+ var userlistItem = w2ui['actionbar'].get('userlist');
+ if (userlistItem === null) {
+ return;
+ }
+
+ $('#user-' + viewId).addClass('selected-user');
+ },
+
+ onUseritemClicked: function(e) { // eslint-disable-line no-unused-vars
+ var docLayer = this.map._docLayer;
+ var viewId = parseInt(e.currentTarget.id.replace('user-', ''));
+
+ this.map._goToViewId(viewId);
+
+ if (viewId === this.map._docLayer._viewId) {
+ this.map._setFollowing(false, null);
+ w2ui['actionbar'].uncheck('userlist');
+ return;
+ } else if (docLayer._followThis !== -1) {
+ this.map._setFollowing(false, null);
+ }
+
+ docLayer._followThis = viewId;
+ docLayer._followUser = true;
+ docLayer._followEditor = false;
+
+ this.selectUser(viewId);
+
+ w2ui['actionbar'].uncheck('userlist');
+ },
+
+ getUserItem: function(viewId, userName, extraInfo, color) {
+ var content = L.DomUtil.create('tr', 'useritem');
+ content.id = 'user-' + viewId;
+ $(document).on('click', '#' + content.id, this.onUseritemClicked.bind(this));
+
+ var iconTd = L.DomUtil.create('td', 'usercolor', content);
+ var nameTd = L.DomUtil.create('td', 'username loleaflet-font', content);
+
+ if (extraInfo !== undefined && extraInfo.avatar !== undefined) {
+ var img = L.DomUtil.create('img', 'avatar-img', iconTd);
+ img.src = extraInfo.avatar;
+ $(img).css({'border-color': color});
+ } else {
+ img = L.DomUtil.create('div', 'user-info', iconTd);
+ $(img).css({'background-color': color});
+ }
+
+ nameTd.innerHTML = userName;
+
+ return content;
+ },
+
+ updateUserListCount: function() {
+ var actionbar = w2ui.actionbar;
+ var userlistItem = actionbar && actionbar.get('userlist');
+ if (userlistItem == null) {
+ return;
+ }
+
+ var count = $(userlistItem.html).find('#userlist_table tbody tr').length;
+ if (count > 1) {
+ userlistItem.text = this.options.nUsers.replace('%n', count);
+ } else if (count === 1) {
+ userlistItem.text = this.options.oneUser;
+ } else {
+ userlistItem.text = this.options.noUser;
+ }
+
+ w2ui['actionbar'].refresh();
+
+ var hideUserList =
+ window.ThisIsAMobileApp ||
+ (this.map['wopi'].HideUserList !== null && this.map['wopi'].HideUserList !== undefined &&
+ ($.inArray('true', this.map['wopi'].HideUserList) >= 0) ||
+ (window.mode.isMobile() && $.inArray('mobile', this.map['wopi'].HideUserList) >= 0) ||
+ (window.mode.isTablet() && $.inArray('tablet', this.map['wopi'].HideUserList) >= 0) ||
+ (window.mode.isDesktop() && $.inArray('desktop', this.map['wopi'].HideUserList) >= 0));
+
+ if (!hideUserList && count > 1) {
+ actionbar.show('userlist');
+ actionbar.show('userlistbreak');
+ } else {
+ actionbar.hide('userlist');
+ actionbar.hide('userlistbreak');
+ }
+ },
+
+ deselectUser: function(e) {
+ var userlistItem = w2ui['actionbar'].get('userlist');
+ if (userlistItem === null) {
+ return;
+ }
+
+ $('#user-' + e.viewId).removeClass('selected-user');
+ },
+
+ onOpenUserList: function() {
+ var that = this;
+ setTimeout(function () {
+ var cBox = $('#follow-checkbox')[0];
+ var docLayer = that.map._docLayer;
+ var editorId = docLayer._editorId;
+ var viewId = docLayer._followThis;
+ var followUser = docLayer._followUser;
+
+ if (cBox)
+ cBox.checked = docLayer._followEditor;
+
+ if (docLayer.editorId !== -1 && that.map._viewInfo[editorId])
+ $('#current-editor').text(that.map._viewInfo[editorId].username);
+ else
+ $('#currently-msg').hide();
+
+ if (followUser)
+ that.selectUser(viewId);
+ }, 100);
+ },
+
+ onAddView: function(e) {
+ var userlistItem = w2ui['actionbar'].get('userlist');
+ var username = this.escapeHtml(e.username);
+ var showPopup = false;
+
+ if (userlistItem !== null)
+ showPopup = $(userlistItem.html).find('#userlist_table tbody tr').length > 0;
+
+ if (showPopup) {
+ $('#tb_actionbar_item_userlist')
+ .w2overlay({
+ class: 'loleaflet-font',
+ html: this.options.userJoinedPopupMessage.replace('%user', username),
+ style: 'padding: 5px'
+ });
+ clearTimeout(this.options.userPopupTimeout);
+ var that = this;
+ this.options.userPopupTimeout = setTimeout(function() {
+ $('#tb_actionbar_item_userlist').w2overlay('');
+ clearTimeout(that.options.userPopupTimeout);
+ that.options.userPopupTimeout = null;
+ }, 3000);
+ }
+
+ var color = L.LOUtil.rgbToHex(this.map.getViewColor(e.viewId));
+ if (e.viewId === this.map._docLayer._viewId) {
+ username = _('You');
+ color = '#000';
+ }
+
+ // Mention readonly sessions in userlist
+ if (e.readonly) {
+ username += ' (' + _('Readonly') + ')';
+ }
+
+ if (userlistItem !== null) {
+ var newhtml = $(userlistItem.html).find('#userlist_table tbody').append(this.getUserItem(e.viewId, username, e.extraInfo, color)).parent().parent()[0].outerHTML;
+ userlistItem.html = newhtml;
+ this.updateUserListCount();
+ }
+ },
+
+ onRemoveView: function(e) {
+ var that = this;
+ $('#tb_actionbar_item_userlist')
+ .w2overlay({
+ class: 'loleaflet-font',
+ html: this.options.userLeftPopupMessage.replace('%user', e.username),
+ style: 'padding: 5px'
+ });
+ clearTimeout(this.options.userPopupTimeout);
+ this.options.userPopupTimeout = setTimeout(function() {
+ $('#tb_actionbar_item_userlist').w2overlay('');
+ clearTimeout(that.options.userPopupTimeout);
+ that.options.userPopupTimeout = null;
+ }, 3000);
+
+ if (e.viewId === this.map._docLayer._followThis) {
+ this.map._docLayer._followThis = -1;
+ this.map._docLayer._followUser = false;
+ }
+
+ var userlistItem = w2ui['actionbar'].get('userlist');
+ if (userlistItem !== null) {
+ userlistItem.html = $(userlistItem.html).find('#user-' + e.viewId).remove().end()[0].outerHTML;
+ this.updateUserListCount();
+ }
+ },
+});
+
+L.control.userList = function () {
+ return new L.Control.UserList();
+};
+
+L.control.createUserListWidget = function () {
+ return '<div id="userlist_container"><table id="userlist_table"><tbody></tbody></table>' +
+ '<hr><table class="loleaflet-font" id="editor-btn">' +
+ '<tr>' +
+ '<td><label id="follow-container"><input type="checkbox" name="alwaysFollow" id="follow-checkbox" onclick="editorUpdate(event)"><span class="checkmark"></span></label></td>' +
+ '<td>' + _('Always follow the editor') + '</td>' +
+ '</tr>' +
+ '</table>' +
+ '<p id="currently-msg">' + _('Current') + ' - <b><span id="current-editor"></span></b></p>' +
+ '</div>';
+};
\ No newline at end of file
diff --git a/loleaflet/src/main.js b/loleaflet/src/main.js
index 2b17ff2bc..a291de1c8 100644
--- a/loleaflet/src/main.js
+++ b/loleaflet/src/main.js
@@ -84,6 +84,7 @@ map.addControl(map.dialog);
map.addControl(L.control.contextMenu());
map.addControl(L.control.infobar());
map.loadDocument(global.socket);
+map.addControl(L.control.userList());
global.socket = map._socket;
window.addEventListener('beforeunload', function () {
More information about the Libreoffice-commits
mailing list