☰

Configuration Dialog

A enhanced configuration dialog for Userscripts.

目前為 2018-04-30 提交的版本，檢視 最新版本。

此腳本不應該直接安裝，它是一個供其他腳本使用的函式庫。欲使用本函式庫，請在腳本 metadata 寫上： // @require https://update.cn-greasyfork.org/scripts/45343/272541/Configuration%20Dialog.js 

  1. /*
  2. /////////////////////////////////////////////////////
  3. #                                                   #
  4. #          Script made by Marius Adam               #
  5. #                ©DevForce 2018                     #
  6. #               Code Version 0.2                    #
  7. #                                                   #
  8. /////////////////////////////////////////////////////
  9. */
  10.  
  11. var configurationWindow = {
  12. 	maximized: false,
  13. 	minimized: false,
  14.  
  15. 	changed: false,
  16.  
  17.     data: undefined,
  18. 	window_id: "window",
  19.  
  20. 	values: {},
  21. 	
  22. 	get : function(id){
  23. 		return this.values[id];
  24. 	},
  25. 	
  26. 	getElseSet : function(id, def, ifNone){
  27. 		var val = this.get(id);
  28. 		if(val == undefined){
  29. 			if(def == undefined){
  30. 				val = ifNone;
  31. 				this.set(id, ifNone);
  32. 			}else{
  33. 				val = def;
  34. 				this.set(id, def);
  35. 			}
  36. 		}
  37. 		return val;
  38. 	},
  39. 	
  40. 	set : function(id, value){
  41. 		this.values[id] = value;
  42. 	},
  43. 	
  44. 	save : function(){
  45. 		GM_setValue(this.window_id, JSON.stringify(this.values));
  46. 		console.debug("Saved to #" + this.window_id, this.values);
  47. 	},
  48. 	
  49. 	load : function(){
  50. 		var loaded = GM_getValue(this.window_id);
  51. 		if(loaded == undefined || loaded.length < 2) loaded = "{}";
  52. 		this.values = JSON.parse(loaded);
  53. 		console.debug("Loaded Values: ", this.values);
  54. 	},
  55. 	
  56. 	updateChanged : function() {
  57. 		this.changed = ($('[style="border: 2px solid rgb(255, 244, 0);"]').length + $('[style="outline: rgb(255, 244, 0) solid 3px;"]').length) > 0;
  58. 		
  59. 		$('#' + this.window_id).find('#saveButton').prop("disabled", ! this.changed);
  60. 		$('#' + this.window_id).find('#revertButton').prop("disabled", ! this.changed);
  61. 	},
  62. 	
  63. 	maximize : function() {
  64. 		$('#' + this.window_id).find('#content').show();
  65. 		$('#' + this.window_id).find('#footer').show();
  66. 		$('#' + this.window_id).find('#theme_dropdown').show();
  67. 		$("#window_minimize").show();
  68. 		$('#' + this.window_id).width("calc(100% - 20px)");
  69. 		$('#' + this.window_id).height("calc(100% - 20px)");
  70. 		$('#' + this.window_id).css("top", "7px");
  71. 		$('#' + this.window_id).css("left", "7px");
  72. 		$('#' + this.window_id).css("min-height", "");
  73.  
  74. 		this.maximized = true;
  75. 		this.minimized = false;
  76. 	},
  77.  
  78. 	minimize : function(){
  79. 		$('#' + this.window_id).find('#content').hide();
  80. 		$('#' + this.window_id).find('#footer').hide();
  81. 		$('#' + this.window_id).find('#theme_dropdown').hide();
  82. 		$("#window_minimize").hide();
  83. 		$('#' + this.window_id).width("50%");
  84. 		$('#' + this.window_id).height("25px");
  85. 		$('#' + this.window_id).css("top", "calc(100% - 30px)");
  86. 		$('#' + this.window_id).css("left", "25%");
  87. 		$('#' + this.window_id).css("min-height", "30px");
  88.  
  89. 		this.minimized = true;
  90. 	},
  91.  
  92. 	normalize : function(){
  93. 		$('#' + this.window_id).find('#content').show();
  94. 		$('#' + this.window_id).find('#footer').show();
  95. 		$('#' + this.window_id).find('#theme_dropdown').show();
  96. 		$("#window_minimize").show();
  97. 		$('#' + this.window_id).width("");
  98. 		$('#' + this.window_id).height("");
  99. 		$('#' + this.window_id).css("top", "");
  100. 		$('#' + this.window_id).css("left", "");
  101. 		$('#' + this.window_id).css("min-height", "");
  102.  
  103. 		this.maximized = false;
  104. 		this.minimized = false;
  105. 	},
  106.  
  107. 	clearSelection : function(){
  108. 		if (window.getSelection) {
  109. 			if (window.getSelection().empty) {  // Chrome
  110. 				window.getSelection().empty();
  111. 			} else if (window.getSelection().removeAllRanges) {  // Firefox
  112. 				window.getSelection().removeAllRanges();
  113. 			}
  114. 		} else if (document.selection) {  // IE
  115. 			document.selection.empty();
  116. 		}
  117. 	},
  118.  
  119. 	makeDragable : function(move, dragbox, useBorder) {
  120. 		if(dragbox == undefined) dragbox = move;
  121. 		if(useBorder == undefined) useBorder = true;
  122.  
  123. 		var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0, dragged = false;
  124.  
  125. 		dragbox.onmousedown = dragMouseDown;
  126.  
  127. 		function dragMouseDown(e) {
  128. 			e = e || window.event;
  129. 			if(configurationWindow.minimized){
  130. 				document.onmouseup = null;
  131. 				document.onmousemove = null;
  132. 				return;
  133. 			}
  134. 			// get the mouse cursor position at startup:
  135. 			pos3 = e.clientX;
  136. 			pos4 = e.clientY;
  137. 			document.onmouseup = closeDragElement;
  138. 			// call a function whenever the cursor moves:
  139. 			document.onmousemove = elementDrag;
  140. 		}
  141.  
  142. 		function elementDrag(e) {
  143. 			e = e || window.event;
  144. 			
  145. 			// calculate the new cursor position:
  146. 			pos1 = pos3 - e.clientX;
  147. 			pos2 = pos4 - e.clientY;
  148. 			pos3 = e.clientX;
  149. 			pos4 = e.clientY;
  150. 			
  151. 			// set the element's new position:
  152. 			var new_top = move.offsetTop - pos2;
  153. 			var new_left = move.offsetLeft - pos1;
  154. 			
  155. 			if(configurationWindow.maximized){
  156. 				configurationWindow.normalize();
  157. 				new_top = e.clientY;
  158. 				new_left = e.clientX;
  159. 			}
  160. 			
  161. 			if(useBorder){
  162. 				var max_width = $(window).width() - $(move).width();
  163. 				var max_height = $(window).height() - $(move).height();
  164. 				if(new_top < 0) new_top = 0;
  165. 				else if(new_top > max_height) new_top = max_height; 
  166. 				if(new_left < 0) new_left = 0;
  167. 				else if(new_left > max_width) new_left = max_width;
  168. 			}
  169. 			
  170. 			move.style.left = new_left + "px";
  171. 			move.style.top = new_top + "px";
  172. 			dragged = true;
  173. 			
  174. 			configurationWindow.clearSelection();
  175. 		}
  176.  
  177. 		function closeDragElement() {
  178. 			/* stop moving when mouse button is released:*/
  179. 			if(useBorder && dragged){
  180. 				if(move.style.top.indexOf("%") == -1 && move.style.top.replace("px", "") < 2)
  181. 					configurationWindow.maximize();
  182. 			}
  183. 			document.onmouseup = null;
  184. 			document.onmousemove = null;
  185. 		}
  186. 	},
  187.  
  188. 	isArray : function(what) {
  189. 		return Object.prototype.toString.call(what) === '[object Array]';
  190. 	},
  191.  
  192. 	isObject : function(what) {
  193. 		return Object.prototype.toString.call(what) === '[object Object]';
  194. 	},
  195.  
  196. 	join : function(labelFirst, label, element){
  197. 		return (labelFirst ? label + " " + element : element + " " + label);
  198. 	},
  199.  
  200. 	replaceAll : function(target, search, replacement) {
  201. 		return target.replace(new RegExp(search, 'g'), replacement);
  202. 	},
  203.  
  204. 	revertChanges : function(){
  205. 		$('#' + this.window_id).find("#content").find("input[type=text], input[type=password], input[type=number], input[type=color]").each(function(){
  206. 			$(this).val($(this).attr("value"));
  207. 			$(this).css("border", "");
  208. 		});
  209.  
  210. 		$('#' + this.window_id).find("#content").find("select").each(function(){
  211. 			this.value = $(this).find("option[selected]").val();
  212. 			$(this).css("border", "");
  213. 		});
  214.  
  215. 		$('#' + this.window_id).find("#content").find('input[type=checkbox]:not(.toggle)').each(function() {
  216. 			this.checked = $(this).attr("default") == "true";
  217. 			$(this).css("outline", "");
  218. 		});
  219.  
  220. 		this.updateChanged();
  221. 	},
  222.  
  223. 	saveChanges : function(){
  224. 		$('#' + this.window_id).find("#content").find("input[type=text], input[type=password], input[type=number], input[type=color]").each(function(){
  225. 			configurationWindow.set(this.id, this.value);
  226. 			$(this).attr("value", this.value);
  227. 			$(this).css("border", "");
  228. 		});
  229.  
  230. 		$('#' + this.window_id).find("#content").find("select").each(function(){
  231. 			configurationWindow.set(this.id, this.value);
  232.  
  233. 			var main_val = this.value;
  234.  
  235. 			$(this).find("option[selected]").removeAttr("selected");
  236. 			$(this).find("option").filter(function() {
  237. 				return this.innerHTML == main_val;
  238. 			}).attr("selected", "selected");
  239.  
  240. 			this.value = main_val;
  241.  
  242. 			$(this).css("border", "");
  243. 		});
  244.  
  245. 		$('#' + this.window_id).find("#content").find('input[type=checkbox]:not(.toggle)').each(function() {
  246. 			configurationWindow.set(this.id, this.checked);
  247. 			$(this).attr("default", this.checked);
  248. 			$(this).css("outline", "");
  249. 		});
  250.  
  251. 		this.updateChanged();
  252. 		this.save();
  253. 	},
  254.  
  255.     ResetSettings : function(){
  256.         if(this.isArray(this.data.content)){
  257. 			for(i = 0; i < this.data.content.length; i++){
  258. 				if(this.isObject(this.data.content[i])){
  259. 					var object = this.data.content[i];
  260.                     object.default = (object.default == undefined ? "" : object.default);
  261.                     
  262.                     var elem = $('#' + this.window_id).find("#content").find("#" + object.id);
  263. 					
  264. 					var type = elem.attr("type");
  265. 					if(type == undefined && elem.is("select")) type = "select"; 
  266. 						
  267.                     switch(type){
  268. 						case "text":
  269. 						case "number":
  270. 						case "password":
  271. 						case "select":
  272. 							$(elem).val(object.default);
  273. 							break;
  274. 						case "checkbox":
  275. 							$(elem).prop("checked", object.default);
  276. 							break;
  277. 						default: break;
  278. 					}
  279. 					$(elem).change();
  280.                 }
  281.             }
  282.         }
  283.         this.updateChanged();
  284.     },
  285.  
  286. 	close : function(){
  287. 		if(this.changed){
  288. 			if(!confirm(this.data.confirm_close)){
  289. 				return false;
  290. 			}
  291. 		}
  292. 		$('#' + this.window_id).attr("style", "display: none;");
  293. 		return true;
  294. 	},
  295. 	
  296.     open : function(data){
  297.         $('#' + this.window_id).attr("style", "");
  298.     },
  299.  
  300. 	create : function(data){
  301. 		//var data = JSON.parse(content);
  302.  
  303.         this.data = data;
  304. 		
  305.         if(this.window_id != undefined)
  306.             $('#' + this.window_id).remove();
  307.  
  308. 		$('#window_style').remove();
  309. 		$('#font-awesome').remove();
  310.  
  311. 		if(data.id == undefined) data.id = "window";
  312. 		this.window_id = data.id;
  313.  
  314. 		this.load();
  315. 	
  316. 		$('head').append('<link id="font-awesome" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">');
  317.  
  318. 		if (data.theme == undefined) data.theme = "mac";
  319. 		if (!(data.theme == "mac" || data.theme == "win10" || data.theme == "winXP")) data.theme = "mac";
  320. 		
  321. 		var saved_theme = GM_getValue("config_theme");
  322. 		if(data.theme_selector == undefined || data.theme_selector == true || data.theme_selector == "true"){
  323. 			data.theme_selector = true;
  324. 			if(saved_theme != undefined) data.theme = saved_theme;
  325. 		}else{
  326. 			data.theme_selector = false;
  327. 		}
  328. 		
  329. 		if(data.width == undefined) data.width = 50;
  330. 		if(data.height == undefined) data.height = 50;
  331. 		
  332. 		var section_color = "#c9c9c9";
  333. 		var subsection_color = "#f1f1f1";
  334. 		
  335. 		var style = "<style id='window_style'>";
  336. 		if(data.theme == "mac"){
  337. 			style += `
  338. 				#` + this.window_id + ` > #top > .btn {
  339. 					height: 16px;
  340. 					width: 16px;
  341. 					background-color: #bbb;
  342. 					border-radius: 50%;
  343. 					float: right;
  344. 					margin-right: 10px;
  345. 					display: inline-block;
  346. 					font-size: 10px;
  347. 					text-align: center;
  348. 					color: white;
  349. 					cursor: pointer;
  350. 					//font-weight: bold;
  351. 				}
  352.  
  353. 				#` + this.window_id + ` > #top > .title {
  354. 					margin: auto;
  355. 					font-size: 16px;
  356. 					font-weight: bold;
  357. 					cursor: move;
  358. 				}
  359.  
  360. 				#` + this.window_id + ` {
  361. 					border: 3px solid #f1f1f1;
  362. 					border-top-left-radius: 3px;
  363. 					border-top-right-radius: 3px;
  364. 					height: ` + data.height + `%;
  365. 					width: ` + data.width + `%;
  366. 					top: ` + ((100 - data.height) / 2) + `%;
  367. 					left: ` + ((100 - data.width) / 2) + `%;
  368. 					position: fixed;
  369. 					z-index: 11000;
  370. 					background: white;
  371. 					min-width: 250px;
  372. 					min-height: 250px;
  373. 					resize: both;
  374. 					overflow: auto;
  375. 					line-height: unset;
  376. 					overflow-y: hidden;`
  377. 				+ (data.font != undefined ?
  378. 					 (data.font.size != undefined ? "font-size: " + data.font.size + ";" : "")  +
  379. 					 (data.font.family != undefined ? "font-family: " + data.font.family + ";" : "")
  380. 				   : "") +
  381. 				`}
  382.  
  383. 				#` + this.window_id + ` > #top {
  384. 					padding: 10px;
  385. 					//height: 20px;
  386. 					background: #f1f1f1;
  387. 					border-top-left-radius: 4px;
  388. 					border-top-right-radius: 4px;
  389. 					position: absolute;
  390. 					width: calc(100% - 20px);
  391. 				}
  392. 			`;
  393. 		}else if(data.theme == "win10"){
  394. 			section_color = "#1f9cff";
  395. 			subsection_color = "#9dd4ff";
  396. 			style += `
  397. 				#` + this.window_id + ` > #top > .btn {
  398. 					height: 22px;
  399. 					width: 30px;
  400. 					float: right;
  401. 					margin-right: 5px;
  402. 					display: inline-block;
  403. 					font-size: 16px;
  404. 					text-align: center;
  405. 					color: white;
  406. 					cursor: pointer;
  407. 					color: black;
  408. 					padding: 2px;
  409. 				}
  410. 				
  411. 				#` + this.window_id + ` > #top > #window_minimize:hover, #` + this.window_id + ` > #top > #window_maximize:hover {
  412. 					background-color: #ddd;
  413. 				}
  414. 				
  415. 				#` + this.window_id + ` > #top > #window_close:hover {
  416. 					background-color: red;
  417. 				}
  418.  
  419. 				#` + this.window_id + ` > #top > .title {
  420. 					margin: auto;
  421. 					font-size: 16px;
  422. 					font-weight: bold;
  423. 					cursor: move;
  424. 					padding: 10px;
  425. 				}
  426.  
  427. 				#` + this.window_id + ` {
  428. 					border: 3px solid #1f9cff;
  429. 					height: ` + data.height + `%;
  430. 					width: ` + data.width + `%;
  431. 					top: ` + ((100 - data.height) / 2) + `%;
  432. 					left: ` + ((100 - data.width) / 2) + `%;
  433. 					position: fixed;
  434. 					z-index: 11000;
  435. 					background: white;
  436. 					min-width: 250px;
  437. 					min-height: 250px;
  438. 					resize: both;
  439. 					overflow: auto;
  440. 					line-height: unset;
  441. 					overflow-y: hidden;`
  442. 				+ (data.font != undefined ?
  443. 					 (data.font.size != undefined ? "font-size: " + data.font.size + ";" : "")  +
  444. 					 (data.font.family != undefined ? "font-family: " + data.font.family + ";" : "")
  445. 				   : "") +
  446. 				`}
  447.  
  448. 				#` + this.window_id + ` > #top {
  449. 					//padding: 10px;
  450. 					//height: 20px;
  451. 					background: #1f9cff;
  452. 					position: absolute;
  453. 					width: 100%;
  454. 				}
  455. 			`;
  456. 		}else if(data.theme == "winXP"){
  457. 			section_color = "#226ce7";
  458. 			subsection_color = "#4094ff";
  459. 			style += `
  460. 				#` + this.window_id + ` > #top > .btn {
  461. 					height: 20px;
  462. 					width: 20px;
  463. 					float: right;
  464. 					margin-right: 5px;
  465. 					margin-top: 5px;
  466. 					display: inline-block;
  467. 					font-size: 16px;
  468. 					text-align: center;
  469. 					color: white;
  470. 					cursor: pointer;
  471. 					color: white;
  472. 					border-radius: 2px;
  473. 					padding: 2px;
  474. 					border: 1px solid white;
  475. 					background: linear-gradient(135deg, #7EAED6 0%, #1B72FF 50%, #1655BE 100%);
  476. 				}
  477. 				
  478. 				#` + this.window_id + ` > #top > #window_minimize:hover, #` + this.window_id + ` > #top > #window_maximize:hover {
  479. 					background: linear-gradient(135deg, #6a93b5 0%, #1862da 50%, #124499 100%);
  480. 				}
  481. 				
  482. 				#` + this.window_id + ` > #top > #window_close {
  483. 					background: linear-gradient(135deg, #F1A689 0%, #C0442A 50%, #C2311E 100%);
  484. 				}
  485. 				
  486. 				#` + this.window_id + ` > #top > #window_close:hover {
  487. 					background: linear-gradient(135deg, #c3846c 0%, #a43923 50%, #982415 100%);
  488. 				}
  489.  
  490. 				#` + this.window_id + ` > #top > .title {
  491. 					margin: auto;
  492. 					font-size: 16px;
  493. 					font-weight: bold;
  494. 					cursor: move;
  495. 					padding: 10px;
  496. 					color: white;
  497. 				}
  498.  
  499. 				#` + this.window_id + ` {
  500. 					border-left: 3px solid #0056e4;
  501. 					border-right: 3px solid #0056e4;
  502. 					border-bottom: 3px solid #0056e4;
  503. 					height: ` + data.height + `%;
  504. 					width: ` + data.width + `%;
  505. 					top: ` + ((100 - data.height) / 2) + `%;
  506. 					left: ` + ((100 - data.width) / 2) + `%;
  507. 					position: fixed;
  508. 					z-index: 11000;
  509. 					background: white;
  510. 					min-width: 250px;
  511. 					min-height: 250px;
  512. 					border-radius: 8px;
  513. 					resize: both;
  514. 					overflow: auto;
  515. 					line-height: unset;
  516. 					overflow-y: hidden;`
  517. 				+ (data.font != undefined ?
  518. 					 (data.font.size != undefined ? "font-size: " + data.font.size + ";" : "")  +
  519. 					 (data.font.family != undefined ? "font-family: " + data.font.family + ";" : "")
  520. 				   : "") +
  521. 				`}
  522.  
  523. 				#` + this.window_id + ` > #top {
  524. 					//padding: 10px;
  525. 					//height: 20px;
  526. 					border-radius: 5px 5px 0px 0px;
  527. 					background: linear-gradient(to bottom, #4094ff 0%, #0056e4 13%, #0056e4 71%, #16428b 100%);
  528. 					position: absolute;
  529. 					width: 100%;
  530. 				}
  531. 			`;
  532. 		}
  533. 		
  534. 		style += `
  535. 			#` + this.window_id + ` > #footer {
  536. 				text-align: right;
  537. 				margin: 0px 0px 4px -20px;
  538. 				height: 40px;
  539. 				border-top-left-radius: 4px;
  540. 				border-top-right-radius: 4px;
  541. 				position: absolute;
  542. 				width: 100%;
  543. 				bottom: 0;
  544. 			}
  545.  
  546. 			#` + this.window_id + ` > #footer > button {
  547. 				background-color: #f1f1f1;
  548. 				border: none;
  549. 				color: black;
  550. 				padding: 12px 40px;
  551. 				font-size: 14px;
  552. 				cursor: pointer;
  553. 				margin-left: 5px;
  554. 			}
  555.  
  556. 			#` + this.window_id + ` > #footer > button:hover {
  557. 				background-color: RoyalBlue;
  558. 				color: white;
  559. 			}
  560. 			
  561. 			#` + this.window_id + ` > #footer > button:disabled {
  562. 				background-color: darkgrey;
  563. 				color: white;
  564. 			}
  565. 			
  566. 			#` + this.window_id + ` > #content {
  567. 				padding: 10px;
  568. 				margin-top: 40px;
  569. 				overflow-y: scroll;
  570. 				height: calc(100% - 75px);
  571. 				overflow-wrap: break-word;
  572. 			}
  573.  
  574. 			#` + this.window_id + ` > #content > input,#` + this.window_id + ` > #content > select {`
  575. 				 + (data.font != undefined ?
  576. 				 (data.font.size != undefined ? "font-size: " + data.font.size + ";" : "")  +
  577. 				 (data.font.family != undefined ? "font-family: " + data.font.family + ";" : "")
  578. 			   : "") +
  579. 			`}
  580.  
  581. 			#` + this.window_id + ` > #content > br {
  582. 				display: block;
  583. 				margin-top: 4px;
  584. 				content: " ";
  585. 			}
  586.  
  587. 			#` + this.window_id + ` > #theme_dropdown {
  588. 				float: left;
  589. 				bottom: 5px;
  590. 				position: absolute;
  591. 				left: 5px;
  592. 				border: none;
  593. 				-webkit-appearance: none;
  594. 				-moz-appearance: none;
  595. 				appearance: none;
  596. 				color: gray;
  597. 			}
  598. 			
  599. 			#` + this.window_id + ` > #theme_dropdown > option {
  600. 				color: black;
  601. 			}
  602. 			
  603. 			.no-margin {
  604. 				margin: 0px;
  605. 			}
  606. 			
  607. 			.wrap-collapsible {
  608. 				margin-bottom: 1.2rem 0;
  609. 			}
  610.  
  611. 			.toggle {
  612. 				display: none;
  613. 			}
  614.  
  615. 			.lbl-toggle {
  616. 				display: block;
  617. 				cursor: pointer;
  618. 				
  619. 				transition: all 0.25s ease-out;
  620. 			}
  621. 			
  622. 			.lbl-toggle h2, .lbl-toggle h4 {
  623. 				display: inline;
  624. 			}
  625.  
  626. 			.lbl-toggle:hover {
  627. 				color: white;
  628. 			}
  629.  
  630. 			.lbl-toggle::before {
  631. 				content: ' ';
  632. 				display: inline-block;
  633.  
  634. 				border-top: 5px solid transparent;
  635. 				border-bottom: 5px solid transparent;
  636. 				border-left: 5px solid currentColor;
  637. 				vertical-align: middle;
  638. 				margin-right: .7rem;
  639. 				transform: translateY(-2px);
  640.  
  641. 				transition: transform .2s ease-out;
  642. 			}
  643.  
  644. 			.toggle:checked + .lbl-toggle::before {
  645. 				transform: rotate(90deg) translateX(-3px);
  646. 			}
  647.  
  648. 			.collapsible-content {
  649. 				max-height: 0px;
  650. 				overflow: hidden;
  651. 				transition: max-height .25s ease-in-out;
  652. 			}
  653.  
  654. 			.toggle:checked + .lbl-toggle + .collapsible-content {
  655. 				max-height: 350px;
  656. 			}
  657.  
  658. 			.collapsible-content .content-inner {
  659. 				//background: rgba(161, 161, 161, 0.2);
  660. 				//border: 1px solid black;
  661. 			}
  662. 		`;
  663. 		
  664. 		style += "<style>";
  665. 		
  666. 		$('head').append(style);
  667. 		
  668. 		if(data.theme_section_color == undefined || data.theme_section_color == false){
  669. 			section_color = "#c9c9c9";
  670. 			subsection_color = "#f1f1f1";
  671. 		}
  672. 		
  673. 		var content = "";
  674.  
  675. 		if(this.isArray(data.content)){
  676. 			var section_collapsible = false;
  677. 			var subsection_collapsible = false;
  678. 			var collapsible_id = 1;
  679. 			
  680. 			for(i = 0; i < data.content.length; i++){
  681. 				if(this.isObject(data.content[i])){
  682. 					var label_first = undefined;
  683. 					Object.keys(data.content[i]).forEach(function(key){
  684. 						if(label_first != undefined) return;
  685.  
  686. 						if(key == "label") label_first = true;
  687. 						else if(key == "type") label_first = false;
  688. 					});
  689.  
  690. 					var label = this.replaceAll(data.content[i].label, "  ", "&nbsp;&nbsp;");
  691.  
  692. 					var object = data.content[i];
  693.  
  694. 					if(object.style != undefined) object.style = " style='" + object.style + "'";
  695. 					else object.style = "";
  696.  
  697. 					if(object.require != undefined) object.style += " require='" + object.require + "'";
  698. 					
  699. 					switch(object.type){
  700. 						case "p":
  701. 							content += "<p class='no-margin'" + object.style + ">" + label  + "</p>";
  702. 							break;
  703. 						case "h1":
  704. 							content += "<h1 class='no-margin'" + object.style + ">" + label + "</h1>";
  705. 							break;
  706. 						case "h2":
  707. 							content += "<h2 class='no-margin'" + object.style + ">" + label + "</h2>";
  708. 							break;
  709. 						case "h3":
  710. 							content += "<h3 class='no-margin'" + object.style + ">" + label + "</h3>";
  711. 							break;
  712. 						case "h4":
  713. 							content += "<h4 class='no-margin'" + object.style + ">" + label + "</h4>";
  714. 							break;
  715. 						case "section":
  716. 							if(object.align == undefined) object.align = "center";
  717. 							if(object.background == undefined) object.background = section_color;
  718. 							
  719. 							if(subsection_collapsible){
  720. 								content += "</div></div></div>";
  721. 								subsection_collapsible = false;
  722. 							}
  723. 							
  724. 							if(section_collapsible){
  725. 								content += "</div></div></div>";
  726. 								section_collapsible = false;
  727. 							}
  728. 							
  729. 							if(object.collapsible != undefined && object.collapsible){
  730. 								content += "<div class='wrap-collapsible'><input id='collapsible" + collapsible_id + "' class='toggle' type='checkbox' " + (object.collapsed != undefined && object.collapsed == false ? "checked" : "") + "><label style='margin: 5px 0px 0px 0px; background: " + object.background + "; text-align: " + object.align + ";' for='collapsible" + collapsible_id + "' class='lbl-toggle'><h2>" + label + "</h2></label><div class='collapsible-content'><div class='content-inner'>";
  731. 								section_collapsible = true;
  732. 								collapsible_id++;
  733. 							}else{
  734. 								content += "<div width='100%' style='margin: 5px 0px; background: " + object.background + "; text-align: " + object.align + ";'><h2 class='no-margin'>" + label + "</h2></div>";
  735. 							}
  736. 							break;
  737. 						case "subsection":
  738. 							if(object.align == undefined) object.align = "center";
  739. 							if(object.background == undefined) object.background = subsection_color;
  740. 							
  741. 							if(subsection_collapsible){
  742. 								content += "</div></div></div>";
  743. 								subsection_collapsible = false;
  744. 							}
  745. 							
  746. 							if(object.collapsible != undefined && object.collapsible){
  747. 								content += "<div class='wrap-collapsible'><input id='collapsible" + collapsible_id + "' class='toggle' type='checkbox' " + (object.collapsed != undefined && object.collapsed == false ? "checked" : "") + "><label style='margin: 5px 0px 0px 0px; background: " + object.background + "; text-align: " + object.align + ";' for='collapsible" + collapsible_id + "' class='lbl-toggle'><h4>" + label + "</h4></label><div class='collapsible-content'><div class='content-inner'>";
  748. 								subsection_collapsible = true;
  749. 								collapsible_id++;
  750. 							}else{
  751. 								content += "<div width='100%' style='margin: 5px 0px; background: " + object.background + "; text-align: " + object.align + ";'><h4 class='no-margin'>" + label + "</h4></div>";
  752. 							}
  753. 							break;
  754. 						case "text":
  755. 							var value = this.getElseSet(object.id, object.default, "");
  756. 							
  757. 							content += this.join(label_first, label, "<input id='" + object.id + "'" + object.style + " type='text' value='" + value + "' />");
  758.  
  759. 							content += "<br>";
  760. 							break;
  761. 						case "password":
  762. 							var value = this.getElseSet(object.id, object.default, "");
  763. 							
  764. 							content += this.join(label_first, label, "<input id='" + object.id + "'" + object.style + " type='password' value='" + value + "' />");
  765.  
  766. 							content += "<br>";
  767. 							break;
  768. 						case "checkbox":
  769. 							var value = this.getElseSet(object.id, object.default, false);
  770. 							
  771. 							if(value == "true" || value == true) value = true;
  772. 							else value = false;
  773.  
  774. 							label = "<label for='" + object.id + "'>" + label + "</label>";
  775. 							
  776. 							content += this.join(label_first, label, "<input id='" + object.id + "'" + object.style + " default='" + value + "' type='checkbox' " + (value ? "checked" : "") + "/>");
  777.  
  778. 							content += "<br>";
  779. 							break;
  780. 						case "select":
  781. 							var value = this.getElseSet(object.id, object.default, "");
  782.  
  783. 							var select = " <select" + object.style + " id='" + object.id + "'>";
  784. 							object.options.forEach(function(opt){
  785. 								if(opt == value){
  786. 									select += "<option selected>" + opt + "</option>";
  787. 								}else{
  788. 									select += "<option>" + opt + "</option>";
  789. 								}
  790. 							});
  791. 							select += "</select> ";
  792.  
  793. 							content += this.join(label_first, label, select);
  794.  
  795. 							content += "<br>";
  796. 							break;
  797. 						case "numeric":
  798. 							var value = this.getElseSet(object.id, object.default, 0);
  799. 							
  800. 							var element = "<input id='" + object.id + "'" + object.style + " type='number' value='" + value + "'";
  801. 							if(object.min != undefined) element += " min='" + object.min + "'";
  802. 							if(object.max != undefined) element += " max='" + object.max + "'";
  803. 							element += " />";
  804. 							
  805. 							content += this.join(label_first, label, element);
  806.  
  807. 							content += "<br>";
  808. 							break;
  809. 						case "color":
  810. 							var value = this.getElseSet(object.id, object.default, "#FFFFFF");
  811.  
  812. 							content += this.join(label_first, label, "<input id='" + object.id + "'" + object.style + " type='color' value='" + value + "' />");
  813.  
  814. 							content += "<br>";
  815. 							break;
  816. 						default: break;
  817. 					}
  818. 				}else{
  819. 					content += "<p>" + data.content[i] + "</p>";
  820. 				}
  821. 			}
  822. 			
  823. 			if(subsection_collapsible){
  824. 				content += "</div></div></div>";
  825. 				section_collapsible = false;
  826. 			}
  827. 			
  828. 			if(section_collapsible){
  829. 				content += "</div></div></div>";
  830. 				section_collapsible = false;
  831. 			}
  832. 		}else{
  833. 			content = data.content;
  834. 		}
  835. 		content += "<br style='height: 25px;' />";
  836. 		
  837. 		var buttons = "";
  838.  
  839.         if(data.completeresetbutton == undefined || data.completeresetbutton == true || data.completeresetbutton == "true"){
  840.             buttons += "<button id='completeResetButton'><i class='fa fa-trash'></i></button>";
  841.         }
  842.  
  843. 		if(data.revertbutton == undefined || data.revertbutton == true ||  data.revertbutton == "true"){
  844. 			buttons += "<button id='revertButton'><i class='fa fa-undo'></i></button>";
  845. 		}
  846.  
  847. 		if(data.savebutton == undefined || data.savebutton == true ||  data.savebutton == "true"){
  848. 			buttons += "<button id='saveButton'><i class='fa fa-save'></i></button>";
  849. 		}
  850.  
  851. 		var topbuttons = "";
  852. 		if(data.top == undefined || data.top.close == undefined || data.top.close == "true"){
  853. 			if(data.theme == "mac")		topbuttons += '<span id="window_close" class="btn" style="background:#ED594A; margin-right: 20px;"><i class="fa fa-times" style="vertical-align: sub;"></i></span>';
  854. 			else if(data.theme == "win10") topbuttons += '<span id="window_close" class="btn" style="margin-right: 0px;"><i class="fa fa-times"></i></span>';
  855. 			else if(data.theme == "winXP") topbuttons += '<span id="window_close" class="btn"><i class="fa fa-times"></i></span>';
  856. 		}
  857. 		
  858. 		if(data.top == undefined || data.top.maximize == undefined || data.top.maximize == "true"){
  859. 			if(data.theme == "mac")		topbuttons += '<span id="window_maximize" class="btn" style="background:#FDD800;"><i class="fa fa-window-maximize" style="vertical-align: sub;"></i></span>';
  860. 			else if(data.theme == "win10" || data.theme == "winXP") topbuttons += '<span id="window_maximize" class="btn"><i class="fa fa-window-maximize"></i></span>';
  861. 		}
  862. 		
  863. 		if(data.top == undefined || data.top.minimize == undefined || data.top.minimize == "true"){
  864. 			if(data.theme == "mac")		topbuttons += '<span id="window_minimize" class="btn" style="background:#5AC05A;"><i class="fa fa-window-minimize" style="vertical-align: sub;"></i></span>';
  865. 			else if(data.theme == "win10" || data.theme == "winXP") topbuttons += '<span id="window_minimize" class="btn"><i class="fa fa-window-minimize"></i></span>';
  866. 		}
  867. 		
  868.  
  869. 		$('body').append(`
  870. 			<div id="` + this.window_id + `" style='display: none;' class="window">
  871. 				<div id="top">
  872. 					` + topbuttons +
  873. 					`<p class="title">` + data.title + `</p>
  874. 				</div>
  875.  
  876. 				<div id="content">
  877. 					` + content + `
  878. 				</div>
  879.  
  880. 				<div id="footer">
  881. 					` + buttons + `
  882. 				</div>
  883. 				` +
  884. 				(data.theme_selector ? `<select id="theme_dropdown" value="Theme">
  885. 					<option value="std" style="display: none;">Theme</option>
  886. 					<option value="mac">Mac</option>
  887. 					<option value="win10">Windows 10</option>
  888. 					<option value="winXP">Windows XP</option>
  889. 				</select>` : "") + `
  890. 			</div>
  891. 		`);
  892.  
  893. 		this.makeDragable($('#' + this.window_id)[0], $('#' + this.window_id).find("#top")[0], true);
  894.  
  895.         var confirm_close = "Unsaved changes. Discard changes?";
  896.         var confirm_revert = "Reset all changes?";
  897.         var confirm_reset = "Bring settings back to factory settings?";
  898.         if(data.confirm_close != undefined) confirm_close = data.confirm_close;
  899.         if(data.confirm_revert != undefined) confirm_revert = data.confirm_revert;
  900.         if(data.confirm_reset != undefined) confirm_reset = data.confirm_reset;
  901.  
  902. 		$('#' + this.window_id).find('#revertButton').click(function(){
  903.             if(confirm(confirm_revert)) configurationWindow.revertChanges();
  904. 		});
  905. 		
  906. 		$('#' + this.window_id).find('#saveButton').click(function(){
  907. 			configurationWindow.saveChanges();
  908.             $('#' + configurationWindow.window_id).find('#saveButton').css("background", "lime");
  909.             setTimeout(function(){
  910.                 $('#' + configurationWindow.window_id).find('#saveButton').css("background", "");
  911.             }, 1000);
  912. 		});
  913.  
  914.         $('#' + this.window_id).find('#completeResetButton').click(function(){
  915. 			if(confirm(confirm_reset)) configurationWindow.ResetSettings();
  916. 		});
  917.  
  918.         $('#' + this.window_id).find('#window_close').click(function(){
  919.             configurationWindow.close();
  920. 		});
  921.  
  922. 		//================ WINDOW RESIZE BUTTONS ===================//
  923. 		$('#' + this.window_id).find('#window_maximize').click(function(){
  924. 			if(configurationWindow.maximized && !configurationWindow.minimized)
  925. 				configurationWindow.normalize();
  926. 			else
  927. 				configurationWindow.maximize();
  928. 		});
  929.  
  930. 		$('#' + this.window_id).find('#window_minimize').click(function(){
  931. 			configurationWindow.minimize();
  932. 		});
  933.  
  934. 		$('#' + this.window_id).find("#top").dblclick(function(){
  935. 			if(configurationWindow.minimized){
  936. 				if(configurationWindow.maximized)
  937. 					configurationWindow.maximize();
  938. 				else
  939. 					configurationWindow.normalize();
  940. 			}else{
  941. 				if(configurationWindow.maximized)
  942. 					configurationWindow.normalize();
  943. 				else
  944. 					configurationWindow.maximize();
  945. 			}
  946. 			configurationWindow.clearSelection();
  947. 		});
  948.  
  949. 		//==================== THEME SELECTOR =======================//
  950. 		$('#' + this.window_id).find("#theme_dropdown").change(function(){
  951. 			if(! configurationWindow.close()) return;
  952. 			GM_setValue("config_theme", this.value);
  953. 			configurationWindow.create(configurationWindow.data);
  954. 			configurationWindow.open();
  955. 		});
  956. 		
  957.  
  958. 		//==================== FIELD CHANGE LISTENER =====================//
  959. 		$('#' + this.window_id).find("#content").find("input[type=text], input[type=number], input[type=password], input[type=color]").change(function(){
  960. 			if($(this).attr("value") != $(this).val())
  961. 				$(this).css("border", "#fff400 solid 2px");
  962. 			else
  963. 				$(this).css("border", "");
  964.  
  965. 			configurationWindow.updateChanged();
  966. 		});
  967. 		 
  968. 		$('#' + this.window_id).find("#content").find("input[type=number]").change(function(){
  969. 			if($(this).attr("min") != undefined && $(this).val() < parseFloat($(this).attr("min")))
  970. 				$(this).val($(this).attr("min"));
  971. 			else if($(this).attr("max") != undefined && $(this).val() > parseFloat($(this).attr("max"))){
  972. 				$(this).val($(this).attr("max"));
  973. 			}
  974. 			
  975. 			configurationWindow.updateChanged();
  976. 		});
  977.  
  978. 		
  979.  
  980. 		$('#' + this.window_id).find("#content").find("select").change(function(){
  981. 			if(this.value != $(this).find("option[selected]").val())
  982. 				$(this).css("border", "#fff400 solid 2px");
  983. 			else
  984. 				$(this).css("border", "");
  985.  
  986. 			configurationWindow.updateChanged();
  987. 		});
  988.  
  989. 		$('#' + this.window_id).find("#content").find('input[type=checkbox]:not(.toggle)').change(function() {
  990. 			if(this.checked != ($(this).attr("default") == "true")){
  991. 				$(this).css("outline", "#fff400 solid 3px");
  992. 			}else{
  993. 				$(this).css("outline", "");
  994. 			}
  995. 			
  996. 			$('[require="' + this.id + '"]').prop("disabled", !this.checked);
  997. 			
  998. 			configurationWindow.updateChanged();
  999. 		});
  1000. 		
  1001. 		$('#' + this.window_id).find("#content").find('input[type=checkbox]:not(.toggle)').trigger("change");
  1002. 		
  1003. 		$(document).keyup(function(e) {
  1004. 			if (e.keyCode == 27) {
  1005. 				configurationWindow.close();
  1006. 			}
  1007. 		});
  1008. 		
  1009. 		this.updateChanged();
  1010. 	}
  1011. };