☰

WME Fix UI

Allows alterations to the WME UI to fix things screwed up or ignored by Waze

目前為 2016-06-08 提交的版本，檢視 最新版本。

  1. // ==UserScript==
  2. // @name                WME Fix UI
  3. // @namespace           https://greasyfork.org/en/users/46070
  4. // @description         Allows alterations to the WME UI to fix things screwed up or ignored by Waze
  5. // @include             https://www.waze.com/editor/*
  6. // @include             https://www.waze.com/*/editor/*
  7. // @include             https://editor-beta.waze.com/*
  8. // @exclude             https://www.waze.com/user/editor/*
  9. // @supportURL          https://www.waze.com/forum/viewtopic.php?f=819&t=191178
  10. // @version             0.5
  11. // @grant               none
  12. // ==/UserScript==
  13.  
  14. // Thanks to (in no particular order) Bellhouse, Twister-UK, Timbones, Dave2084, Rickzabel
  15.  
  16. (function()
  17. {
  18. // global variables
  19. var wmefu_version = "0.5";
  20. var applyCount = 0;
  21. var wmefuinit = false;
  22. var shrinkBlackBarActive = false;
  23. var compressSegmentTabActive = false;
  24.  
  25. function initialiseFixUI() {
  26. 	if (wmefuinit) {
  27. 		return;
  28. 	}
  29.  
  30. 	// go round again if map container isn't there yet
  31. 	if(!window.Waze.map)
  32. 	{
  33. 			window.console.log("WME FixUI: waiting for WME...");
  34. 			setTimeout(initialiseFixUI, 1000);
  35. 			return;
  36. 	}
  37.  
  38. 	//create styles that will be used later
  39.  
  40. 	// create tab contents
  41. 	var addon = document.createElement('section');
  42. 	addon.id = "wmefu-addon";
  43. 	var section = document.createElement('p');
  44. 	section.style.paddingTop = "0px";
  45. 	section.id = "fuContent";
  46. 	section.innerHTML  = '<b>UI Fixes</b><br>';
  47. 	section.innerHTML += '<input type="checkbox" id="_cbMoveZoomBar" /> ' +
  48. 			'<span title="Because nobody likes a pointless UI change that breaks your workflow, imposed by idiots who rarely use the editor and don\'t listen to feedback">Move zoom bar to left</span><br>';
  49. 	section.innerHTML += '<input type="checkbox" id="_cbHideUserInfo" /> ' +
  50. 			'<span title="Because we can earn points quicker without a massive chunk of space wasted on telling us how many we earnt up to yesterday">Hide user info in the side panel</span><br>';
  51. 	section.innerHTML += '<input type="checkbox" id="_cbShrinkBlackBar" /> ' +
  52. 			'<span title="Because we can\'t afford to waste screen space on stuff we didn\'t ask for and don\'t want">Shrink the black bar above the map</span><br>';
  53. 	section.innerHTML += '<input type="checkbox" id="_cbCompressSegmentTab" /> ' +
  54. 			'<span title="Because I\'m sick of having to scroll the side panel because of oversized fonts and wasted space">Compress the contents of the side panel</span><br>';
  55. 	section.innerHTML += '<input type="checkbox" id="_cbRestyleReports" /> ' +
  56. 			'<span title="Another UI element configured for developers with massive screens instead of normal users">Change formatting for report panels (UR/MP)</span><br>';
  57. 	section.innerHTML += '<br>';
  58. 	section.innerHTML += '<b><a href="https://greasyfork.org/en/scripts/20077-wme-fix-ui" target="_blank"><u>' +
  59. 			'WME Fix UI</u></a></b> &nbsp; v' + wmefu_version;
  60.  
  61. 	addon.appendChild(section);
  62.  
  63. 	// insert the content as a tab
  64. 	var userTabs = getId('user-info');
  65. 	var navTabs = getElementsByClassName('nav-tabs', userTabs)[0];
  66. 	var tabContent = getElementsByClassName('tab-content', userTabs)[0];
  67.  
  68. 	if (typeof navTabs === "undefined") {
  69. 		console.log("WMEFU: not logged in - will initialise later");
  70. 		Waze.loginManager.on("login", initialiseFixUI);
  71. 		return;
  72. 	}
  73. 	newtab = document.createElement('li');
  74. 	newtab.innerHTML = '<a href="#sidepanel-FixUI" data-toggle="tab" title="Fix UI">FU</a>';
  75. 	navTabs.appendChild(newtab);
  76.  
  77. 	addon.id = "sidepanel-FixUI";
  78. 	addon.className = "tab-pane";
  79. 	tabContent.appendChild(addon);
  80.  
  81.  
  82. 	// setup event handlers for user actions:
  83. 	getId('_cbMoveZoomBar').onclick = moveZoomBar;
  84. 	getId('_cbShrinkBlackBar').onclick = shrinkBlackBar;
  85. 	getId('_cbHideUserInfo').onclick = hideUserInfo;
  86. 	getId('_cbCompressSegmentTab').onclick = compressSegmentTab;
  87. 	getId('_cbRestyleReports').onclick = restyleReports;
  88.  
  89. 	// restore saved settings
  90. 	if (localStorage.WMEFixUI) {
  91. 		console.log("WMEFU: loading options");
  92. 		options = JSON.parse(localStorage.WMEFixUI);
  93.  
  94. 		getId('_cbMoveZoomBar').checked = options[1];
  95. 		getId('_cbShrinkBlackBar').checked = options[2];
  96. 		getId('_cbHideUserInfo').checked = options[3];
  97. 		getId('_cbCompressSegmentTab').checked = options[4];
  98. 		getId('_cbRestyleReports').checked = options[5];
  99. 	} else {
  100. 		getId('_cbMoveZoomBar').checked = true;
  101. 		getId('_cbShrinkBlackBar').checked = true;
  102. 		getId('_cbHideUserInfo').checked = true;
  103. 		getId('_cbCompressSegmentTab').checked = true;
  104. 		getId('_cbRestyleReports').checked = true;
  105. 	}
  106.  
  107. 	if (W.loginManager.user.userName == 'iainhouse') {
  108. 		// Adds an extra checkbox so I can test segment panel changes easily
  109. 		var brand = getId('brand');
  110. 		extraCBSection = document.createElement('p');
  111. 		extraCBSection.innerHTML = '<input type="checkbox" id="_cbextraCBSection" />';
  112. 		brand.appendChild(extraCBSection);
  113. 		getId('_cbextraCBSection').onclick = FALSEcompressSegmentTab;
  114. 		_cbextraCBSection.checked = _cbCompressSegmentTab.checked;
  115. 	}
  116.  
  117. 	// overload the WME exit function
  118. 	saveOptions = function() {
  119. 		if (localStorage) {
  120. 			console.log("WMEFU: saving options");
  121. 			var options = [];
  122.  
  123. 			// preserve previous options which may get lost after logout
  124. 			if (localStorage.WMEFixUI)
  125. 				options = JSON.parse(localStorage.WMEFixUI);
  126.  
  127. 			options[1] = getId('_cbMoveZoomBar').checked;
  128. 			options[2] = getId('_cbShrinkBlackBar').checked;
  129. 			options[3] = getId('_cbHideUserInfo').checked;
  130. 			options[4] = getId('_cbCompressSegmentTab').checked;
  131. 			options[5] = getId('_cbRestyleReports').checked;
  132.  
  133. 			localStorage.WMEFixUI = JSON.stringify(options);
  134. 		}
  135. 	};
  136. 	window.addEventListener("beforeunload", saveOptions, false);
  137.  
  138. 	// apply the settings
  139. 	setTimeout(applyAllSettings, 2000);
  140. 	
  141. 	wmefuinit = true;
  142. 	window.console.log("WMEFU: Initialised");
  143. 	}
  144.  
  145. function applyAllSettings() {
  146. 	applyCount += 1;
  147. 	if (applyCount < 5) {
  148. 		setTimeout(applyAllSettings, 2000);
  149. 	}
  150. 	moveZoomBar();
  151. 	shrinkBlackBar();
  152. 	hideUserInfo();
  153. 	compressSegmentTab();
  154. 	restyleReports();
  155. }
  156.  
  157. function moveZoomBar() {
  158. 	var WMETBZLI = getId('WMETB_ZoomLevelIndicator');
  159. 	var reportPanel = getId('panel-container');
  160. 	
  161. 	reportPanel.style.position = "absolute";
  162. 	if (_cbMoveZoomBar.checked) {
  163. 		$(".olControlPanZoomBar").css({'left':10,'width':30,'right':""});
  164. 		if (reportPanel) {
  165. 			if (document.body.dir == "rtl") {
  166. 				reportPanel.style.right = "inherit";
  167. 			} else {
  168. 				reportPanel.style.left = "40px";
  169. 				if (WMETBZLI) {
  170. 					if( WMETBZLI.style.display != "none" ) reportPanel.style.left = "70px";
  171. 				}
  172. 			}
  173. 		}
  174. 		if (WMETBZLI) {
  175. 			WMETBZLI.style.left = "50px";
  176. 			WMETBZLI.style.right = "inherit";
  177. 		}
  178. 	} else {
  179. 		$(".olControlPanZoomBar").css({'left':"",'width':30,'right':10});
  180. 		if (reportPanel) {
  181. 			if (document.body.dir == "rtl") {
  182. 				reportPanel.style.right = "40px";
  183. 				if (WMETBZLI) {
  184. 					if( WMETBZLI.style.display != "none" ) reportPanel.style.right = "70px";
  185. 				}
  186. 			} else {
  187. 				reportPanel.style.left = "inherit";
  188. 			}
  189. 		}
  190. 		if (WMETBZLI) {
  191. 			WMETBZLI.style.left = "inherit";
  192. 			WMETBZLI.style.right = "50px";
  193. 		}
  194. 	}
  195. }
  196.  
  197. function hideUserInfo() {
  198. 	var PSButton = getId('WMEPS_UIButton');
  199. 	var userbox = getId('user-box');
  200. 	// WME Panel Swap button - move it up off the tabs if user info is hidden
  201. 	if (_cbHideUserInfo.checked) {
  202. 		userbox.style.padding = '0px';
  203. 		$(".user-profile").css({'display':'none'});
  204. 		if (PSButton) PSButton.style.top = '-20px';
  205. 	} else {
  206. 		userbox.style.padding = '20px';
  207. 		$(".user-profile").css({'display':'block'});
  208. 		if (PSButton) PSButton.style.top = '10px';
  209. 	}
  210. }
  211.  
  212. function shrinkBlackBar() {
  213. 	var wm = getId('WazeMap');
  214. 	if (_cbShrinkBlackBar.checked) {
  215. 		$(".topbar").css({'height':'20px','line-height':'20px','padding':'0 10px'});
  216. 		$(".topbar .location-info").css({'font-size':'12px'});
  217. 		if (!shrinkBlackBarActive) wm.style.height = (wm.offsetHeight + 10) + 'px';
  218. 	} else {
  219. 		$(".topbar").css({'height':'30px','line-height':'30px','padding':'0 10px'});
  220. 		$(".topbar .location-info").css({'font-size':'15px'});
  221. 		if (shrinkBlackBarActive) wm.style.height = (wm.offsetHeight - 10) + 'px';
  222. 	}
  223. 	shrinkBlackBarActive = _cbShrinkBlackBar.checked;
  224. }
  225.  
  226. function FALSEcompressSegmentTab() {
  227. 	_cbCompressSegmentTab.checked = _cbextraCBSection.checked;
  228. 	compressSegmentTab();
  229. }
  230.  
  231. function compressSegmentTab() {
  232. 	var ep=getId('edit-panel');
  233. 	if (_cbCompressSegmentTab.checked) {
  234. 		if (!compressSegmentTabActive) {
  235. 			// shrink address
  236. 			addGlobalStyle('#edit-panel .primary-street { font-size: 13px; line-height: 15px; }');
  237. 			addGlobalStyle('#edit-panel .address-edit-view .preview .address-edit-btn:not(.disabled) { background-color: yellow; }');
  238. 			addGlobalStyle('#edit-panel .segment .address-edit-view, .edit-panel .segment .address-edit-view { margin-bottom: 5px; }');
  239. 			//shrink tabs
  240. 			addGlobalStyle('#sidebar .nav-tabs li a { padding: 4px; }');
  241. 			addGlobalStyle('#sidebar .nav-tabs { margin-bottom: 5px; }');
  242. 			//reduce some vertical margins
  243. 			addGlobalStyle('#edit-panel .contents { padding-top: 0px; }');
  244. 			addGlobalStyle('#edit-panel .form-group { margin-bottom: 2px; line-height: 1; font-size: 11px; }');
  245. 			addGlobalStyle('#edit-panel .selection { margin-bottom: 5px; }');
  246. 			addGlobalStyle('#sidebar .side-panel-section:not(:last-child) { margin-bottom: 2px; }');
  247. 			addGlobalStyle('#sidebar .side-panel-section:not(:last-child)::after { margin-top: 5px; margin-bottom: 2px; }');
  248. 			addGlobalStyle('#edit-panel .control-label { margin-bottom: 1px; }');
  249. 			addGlobalStyle('#sidebar .controls-container { padding-top: 2px; }');
  250. 			addGlobalStyle('#edit-panel .segment .speed-limit label { margin-bottom: 0px }');
  251. 			addGlobalStyle('#edit-panel .more-actions { padding-top: 2px }');
  252. 			addGlobalStyle('#edit-panel .segment .speed-limit .direction-label, #edit-panel .segment .speed-limit .unit-label { line-height: 2.1em }');
  253.  
  254. 			//shrink dropdown controls & buttons
  255. 			addGlobalStyle('#edit-panel button, #edit-panel select, #edit-panel .form-control { font-size: 11px; height: 22px; padding: 0px 12px; }');
  256. 			addGlobalStyle('#edit-panel .more-actions button:not(:last-of-type) { margin-bottom: 2px; }');
  257. 			//fit road property checkboxes on one line for all three (if text length allows)
  258. 			addGlobalStyle('#edit-panel .controls-container { display: inline-block; }');
  259. 			addGlobalStyle('#edit-panel .controls-container label { font-size: 12px; line-height: 18px; padding-left: 22px; }');
  260. 		 }
  261. 	} else {
  262. 		if (compressSegmentTabActive) {
  263. 			//enlarge address
  264. 			addGlobalStyle('#edit-panel .primary-street { font-size: 18px; line-height: 24px; }');
  265. 			addGlobalStyle('#edit-panel .address-edit-view .preview .address-edit-btn:not(.disabled) { background-color: inherit; }');
  266. 			addGlobalStyle('#edit-panel .segment .address-edit-view, .edit-panel .segment .address-edit-view { margin-bottom: 20px; }');
  267. 			//enlarge tabs
  268. 			addGlobalStyle('#sidebar .nav-tabs li a { padding: 5px 15px; }');
  269. 			addGlobalStyle('#sidebar .nav-tabs { margin-bottom: 20px; }');
  270. 			//restore vertical margins
  271. 			addGlobalStyle('#edit-panel .contents { padding-top: 20px }');
  272. 			addGlobalStyle('#edit-panel .form-group { margin-bottom: 10px; line-height: 1.43; font-size: 13px; }');
  273. 			addGlobalStyle('#edit-panel .selection { margin-bottom: 20px; }');
  274. 			addGlobalStyle('#sidebar .side-panel-section:not(:last-child) { margin-bottom: 21px; }');
  275. 			addGlobalStyle('#sidebar .side-panel-section:not(:last-child)::after { margin-top: 21px; margin-bottom: 21px; }');
  276. 			addGlobalStyle('#edit-panel .control-label { margin-bottom: 5px; }');
  277. 			addGlobalStyle('#sidebar .controls-container { padding-top: 7px; }');
  278. 			addGlobalStyle('#edit-panel .segment .speed-limit label { margin-bottom: 5px }');
  279. 			addGlobalStyle('#edit-panel .more-actions { padding-top: 10px }');
  280. 			addGlobalStyle('#edit-panel .segment .speed-limit .direction-label, #edit-panel .segment .speed-limit .unit-label { line-height: 2.5em }');
  281. 		
  282. 			//enlarge dropdown controls & buttons
  283. 			addGlobalStyle('#edit-panel button, #edit-panel select, #edit-panel .form-control { font-size: 13px; height: 32px; padding: 6px 12px; }');
  284. 			addGlobalStyle('#edit-panel .more-actions button:not(:last-of-type) { margin-bottom: 100px; }');
  285. 			//restore road property checkboxes to one line per item
  286. 			addGlobalStyle('#edit-panel .controls-container { display: inherit; }');
  287. 			addGlobalStyle('#edit-panel .controls-container label { font-size: inherit; line-height: inherit; padding-left: 25px; }');
  288. 		 }
  289. 	}
  290. 	//tweak required if Speedhelper script is installed
  291. 	addGlobalStyle('div[id^="spd_"] { line-height: 1.43 }');
  292. 	compressSegmentTabActive = _cbCompressSegmentTab.checked
  293. }
  294.  
  295. function restyleReports() {
  296. 	var WMEFP = getId('WMEFP-UR-ALLPM');
  297. 	if (_cbRestyleReports.checked) {
  298. 		//do stuff
  299. 		addGlobalStyle('#panel-container .panel { font-size: 12px; line=height: 1; }');
  300. 		addGlobalStyle('#panel-container .problem-edit .header { padding: 5px 10px; line-height: 15px; }');
  301. 		addGlobalStyle('#panel-container .problem-edit .problem-data .title { line-height: 22px; }');
  302. 		if (WMEFP) WMEFP.style.top = '-2px'; //tweak Fancy permalink button
  303. 		addGlobalStyle('#panel-container .problem-edit .conversation.section .new-comment-form { padding: 5px; }');
  304. 		addGlobalStyle('#panel-container .problem-edit .conversation.section .new-comment-form textarea { resize: vertical; height: 110px; margin-bottom: 5px; padding: 3px 5px; font-size: 12px; }');
  305. 		addGlobalStyle('#panel-container .btn { height: 20px; padding: 0px 10px;}');
  306. 		addGlobalStyle('#panel-container .problem-edit .actions .content { padding: 2px 5px;}');
  307. 		addGlobalStyle('#panel-container .problem-edit .actions .controls-container label { margin-bottom: 2px; }');
  308. 	} else {
  309. 		//undo stuff
  310. 		addGlobalStyle('#panel-container .panel { font-size: inherit; line=height: inherit; }');
  311. 		addGlobalStyle('#panel-container .problem-edit .header { padding: 10px 15px; line-height: 21px; }');
  312. 		addGlobalStyle('#panel-container .problem-edit .problem-data .title { line-height: 40px; }');
  313. 		if (WMEFP) WMEFP.style.top = '10px'; //un-tweak Fancy permalink button
  314. 		addGlobalStyle('#panel-container .problem-edit .conversation.section .new-comment-form { padding: 15px 15px 10px 15px; }');
  315. 		addGlobalStyle('#panel-container .problem-edit .conversation.section .new-comment-form textarea { resize: none; height: 70px; margin-bottom: 10px; padding: 6px 10px; font-size: 13px; }');
  316. 		addGlobalStyle('#panel-container .btn { height: inherit; padding: 6px 20px;}');
  317. 		addGlobalStyle('#panel-container .problem-edit .actions .content { padding: 15px;}');
  318. 		addGlobalStyle('#panel-container .problem-edit .actions .controls-container label { margin-bottom: 12px; }');
  319. 	}
  320. }
  321.  
  322. //Helper functions
  323.  
  324. function addGlobalStyle(css) {
  325. 	var head, style;
  326. 	head = document.getElementsByTagName('head')[0];
  327. 	if (!head) {
  328. 		return;
  329. 	}
  330. 	style = document.createElement('style');
  331. 	style.type = 'text/css';
  332. 	style.innerHTML = css;
  333. 	head.appendChild(style);
  334. }
  335.  
  336. function getElementsByClassName(classname, node) {
  337. 	if(!node) node = document.getElementsByTagName("body")[0];
  338. 	var a = [];
  339. 	var re = new RegExp('\\b' + classname + '\\b');
  340. 	var els = node.getElementsByTagName("*");
  341. 	for (var i=0,j=els.length; i<j; i++)
  342. 		if (re.test(els[i].className)) a.push(els[i]);
  343. 	return a;
  344. }
  345.  
  346. function getId(node) {
  347. 	return document.getElementById(node);
  348. }
  349.  
  350. // Start it running
  351. setTimeout(initialiseFixUI, 1000);
  352.  
  353. })();