xref: /online/loleaflet/src/control/Control.MobileTopBar.js (revision 4cd1baa02d0b36e68a7194c77fdeb68c5af59f8a)
1/* -*- js-indent-level: 8 -*- */
2/*
3 * L.Control.SearchBar
4 */
5
6/* global $ w2ui _UNO _ */
7L.Control.MobileTopBar = L.Control.extend({
8
9	options: {
10		doctype: 'text'
11	},
12
13	initialize: function (docType) {
14		L.setOptions(this, {docType: docType});
15	},
16
17	onAdd: function (map) {
18		this.map = map;
19		this.create();
20
21		map.on('updatepermission', this.onUpdatePermission, this);
22		map.on('commandstatechanged', this.onCommandStateChanged, this);
23	},
24
25	getToolItems: function(docType) {
26		if (docType == 'text') {
27			return [
28				{type: 'button',  id: 'closemobile',  img: 'closemobile'},
29				{type: 'spacer'},
30				{type: 'button',  id: 'undo',  img: 'undo', hint: _UNO('.uno:Undo'), uno: 'Undo', disabled: true},
31				{type: 'button',  id: 'redo',  img: 'redo', hint: _UNO('.uno:Redo'), uno: 'Redo', disabled: true},
32				{type: 'button',  id: 'mobile_wizard', img: 'mobile_wizard', disabled: true},
33				{type: 'button',  id: 'insertion_mobile_wizard', img: 'insertion_mobile_wizard', disabled: true},
34				{type: 'button',  id: 'insertcomment', img: 'insertcomment', disabled: true},
35				{type: 'button',  id: 'fullscreen', img: 'fullscreen', hint: _UNO('.uno:FullScreen', 'text')},
36				{type: 'drop', id: 'userlist', img: 'users', hidden: true, html: L.control.createUserListWidget()},
37			];
38		} else if (docType == 'spreadsheet') {
39			return [
40				{type: 'button',  id: 'closemobile',  img: 'closemobile'},
41				{type: 'spacer'},
42				{type: 'button',  id: 'undo',  img: 'undo', hint: _UNO('.uno:Undo'), uno: 'Undo', disabled: true},
43				{type: 'button',  id: 'redo',  img: 'redo', hint: _UNO('.uno:Redo'), uno: 'Redo', disabled: true},
44				{type: 'button', hidden: true, id: 'acceptformula',  img: 'ok', hint: _('Accept')},
45				{type: 'button', hidden: true, id: 'cancelformula',  img: 'cancel', hint: _('Cancel')},
46				{type: 'button',  id: 'mobile_wizard', img: 'mobile_wizard', disabled: true},
47				{type: 'button',  id: 'insertion_mobile_wizard', img: 'insertion_mobile_wizard', disabled: true},
48//				{type: 'button',  id: 'insertcomment', img: 'insertcomment', disabled: true},
49				{type: 'button',  id: 'fullscreen', img: 'fullscreen', hint: _UNO('.uno:FullScreen', 'text')},
50				{type: 'drop', id: 'userlist', img: 'users', hidden: true, html: L.control.createUserListWidget()},
51			];
52		} else if (docType == 'presentation') {
53			return [
54				{type: 'button',  id: 'closemobile',  img: 'closemobile'},
55				{type: 'spacer'},
56				{type: 'button',  id: 'undo',  img: 'undo', hint: _UNO('.uno:Undo'), uno: 'Undo', disabled: true},
57				{type: 'button',  id: 'redo',  img: 'redo', hint: _UNO('.uno:Redo'), uno: 'Redo', disabled: true},
58				{type: 'button',  id: 'fullscreen-presentation', img: 'fullscreen-presentation', hint: _UNO('.uno:FullScreen', 'presentation')},
59				{type: 'button',  id: 'mobile_wizard', img: 'mobile_wizard', disabled: true},
60				{type: 'button',  id: 'insertion_mobile_wizard', img: 'insertion_mobile_wizard', disabled: true},
61				{type: 'button',  id: 'insertcomment', img: 'insertcomment', disabled: true},
62				{type: 'drop', id: 'userlist', img: 'users', hidden: true, html: L.control.createUserListWidget()},
63			];
64		}
65	},
66
67	create: function() {
68		var toolItems = this.getToolItems(this.options.docType);
69		var that = this;
70
71		var toolbar = $('#toolbar-up');
72		toolbar.w2toolbar({
73			name: 'actionbar',
74			items: toolItems,
75			onClick: function (e) {
76				that.onClick(e, e.target);
77				window.hideTooltip(this, e.target);
78			}
79		});
80
81		toolbar.bind('touchstart', function(e) {
82			w2ui['actionbar'].touchStarted = true;
83			var touchEvent = e.originalEvent;
84			if (touchEvent && touchEvent.touches.length > 1) {
85				L.DomEvent.preventDefault(e);
86			}
87		});
88	},
89
90	onClick: function(e, id, item) {
91		if ('actionbar' in w2ui && w2ui['actionbar'].get(id) !== null) {
92			var toolbar = w2ui['actionbar'];
93			item = toolbar.get(id);
94		}
95
96		// In the iOS app we don't want clicking on the toolbar to pop up the keyboard.
97		if (!window.ThisIsTheiOSApp && id !== 'zoomin' && id !== 'zoomout' && id !== 'mobile_wizard' && id !== 'insertion_mobile_wizard') {
98			this.map.focus(this.map.canAcceptKeyboardInput()); // Maintain same keyboard state.
99		}
100
101		if (item.disabled) {
102			return;
103		}
104
105		if (item.uno) {
106			if (item.unosheet && this.map.getDocType() === 'spreadsheet') {
107				this.map.toggleCommandState(item.unosheet);
108			}
109			else {
110				this.map.toggleCommandState(window.getUNOCommand(item.uno));
111			}
112		}
113		else if (id === 'cancelformula') {
114			this.map.sendUnoCommand('.uno:Cancel');
115			w2ui['actionbar'].hide('acceptformula', 'cancelformula');
116			w2ui['actionbar'].show('undo', 'redo');
117		}
118		else if (id === 'acceptformula') {
119			// focus on map, and press enter
120			this.map.focus();
121			this.map._docLayer.postKeyboardEvent('input',
122				this.map.keyboard.keyCodes.enter,
123				this.map.keyboard._toUNOKeyCode(this.map.keyboard.keyCodes.enter));
124
125			w2ui['actionbar'].hide('acceptformula', 'cancelformula');
126			w2ui['actionbar'].show('undo', 'redo');
127		}
128		else if (id === 'insertcomment') {
129			this.map.insertComment();
130		}
131		else if (id === 'closemobile') {
132			// Call global onClick handler
133			window.onClick(e, id, item);
134		}
135		else if (id === 'fullscreen') {
136			if (item.checked) {
137				toolbar.uncheck(id);
138			}
139			else {
140				toolbar.check(id);
141			}
142			L.toggleFullScreen();
143		}
144		else if (id === 'fullscreen-presentation') {
145			// Call global onClick handler
146			window.onClick(e, id, item);
147		}
148		else if (id === 'insertcomment') {
149			this.map.insertComment();
150		}
151		else if (id === 'mobile_wizard') {
152			if (window.mobileWizard) {
153				window.mobileWizard = false;
154				this.map.sendUnoCommand('.uno:SidebarHide');
155				this.map.fire('closemobilewizard');
156				toolbar.uncheck(id);
157			}
158			else {
159				if (window.insertionMobileWizard)
160					this.onClick(null, 'insertion_mobile_wizard');
161				window.mobileWizard = true;
162				this.map.sendUnoCommand('.uno:SidebarShow');
163				this.map.fire('showwizardsidebar');
164				toolbar.check(id);
165			}
166		}
167		else if (id === 'insertion_mobile_wizard') {
168			if (window.insertionMobileWizard) {
169				window.insertionMobileWizard = false;
170				this.map.fire('closemobilewizard');
171				toolbar.uncheck(id);
172			}
173			else {
174				if (window.mobileWizard)
175					this.onClick(null, 'mobile_wizard');
176				window.insertionMobileWizard = true;
177				var menuData = this.map.menubar.generateInsertMenuStructure();
178				this.map.fire('mobilewizard', menuData);
179				toolbar.check(id);
180			}
181		}
182		else if (id === 'userlist') {
183			this.map.fire('openuserlist');
184		}
185	},
186
187	onUpdatePermission: function(e) {
188		var toolbar;
189		var toolbarDownButtons = ['next', 'prev', 'mobile_wizard', 'insertion_mobile_wizard', 'insertcomment'];
190		if (e.perm === 'edit') {
191			toolbar = w2ui['actionbar'];
192			if (toolbar) {
193				toolbarDownButtons.forEach(function(id) {
194					toolbar.enable(id);
195				});
196				toolbar.set('closemobile', {img: 'editmode'});
197			}
198		} else {
199			toolbar = w2ui['actionbar'];
200			if (toolbar) {
201				toolbarDownButtons.forEach(function(id) {
202					toolbar.disable(id);
203				});
204				toolbar.set('closemobile', {img: 'closemobile'});
205			}
206		}
207	},
208
209	onCommandStateChanged: function(e) {
210		var commandName = e.commandName;
211		var state = e.state;
212
213		if (this.map.isPermissionEdit() && (state === 'enabled' || state === 'disabled')) {
214			var id = window.unoCmdToToolbarId(commandName);
215			var toolbar = w2ui['actionbar'];
216
217			if (state === 'enabled') {
218				toolbar.enable(id);
219			} else {
220				toolbar.uncheck(id);
221				toolbar.disable(id);
222			}
223		}
224	},
225});
226
227L.control.mobileTopBar = function (docType) {
228	return new L.Control.MobileTopBar(docType);
229};
230