☰

Configuration Dialog

A enhanced configuration dialog for Userscripts.

Αυτός ο κώδικας δεν πρέπει να εγκατασταθεί άμεσα. Είναι μια βιβλιοθήκη για άλλους κώδικες που περιλαμβάνεται μέσω της οδηγίας meta // @require https://update.greatest.deepsurf.us/scripts/45343/759338/Configuration%20Dialog.js 

  1. /*
  2. /////////////////////////////////////////////////////
  3. #                                                   #
  4. #          Script made by Marius Adam               #
  5. #                ©DevForce 2019                     #
  6. #               Code Version 0.4                    #
  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 + $('[style*="outline: 3px solid rgb(255, 244, 0);"]').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], textarea").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)).change();
  221. 		this.updateChanged();
  222. 	},
  223.  
  224. 	saveChanges : function(){
  225. 		$('#' + this.window_id).find("#content").find("input[type=text], input[type=password], input[type=number], input[type=color], textarea").each(function(){
  226. 			configurationWindow.set(this.id, this.value);
  227. 			$(this).attr("value", this.value);
  228. 			$(this).css("border", "");
  229. 		});
  230.  
  231. 		$('#' + this.window_id).find("#content").find("select").each(function(){
  232. 			configurationWindow.set(this.id, this.value);
  233.  
  234. 			var main_val = this.value;
  235.  
  236. 			$(this).find("option[selected]").removeAttr("selected");
  237. 			$(this).find("option").filter(function() {
  238. 				return this.innerHTML == main_val;
  239. 			}).attr("selected", "selected");
  240.  
  241. 			this.value = main_val;
  242.  
  243. 			$(this).css("border", "");
  244. 		});
  245.  
  246. 		$('#' + this.window_id).find("#content").find('input[type=checkbox]:not(.toggle)').each(function() {
  247. 			configurationWindow.set(this.id, this.checked);
  248. 			$(this).attr("default", this.checked);
  249. 			$(this).css("outline", "");
  250. 		});
  251.  
  252. 		this.updateChanged();
  253. 		this.save();
  254. 	},
  255.  
  256.     ResetSettings : function(){
  257.         if(this.isArray(this.data.content)){
  258. 			for(i = 0; i < this.data.content.length; i++){
  259. 				if(this.isObject(this.data.content[i])){
  260. 					var object = this.data.content[i];
  261.                     object.default = (object.default == undefined ? "" : object.default);
  262.                     
  263.                     var elem = $('#' + this.window_id).find("#content").find("#" + object.id);
  264. 					
  265. 					var type = elem.attr("type");
  266. 					if(type == undefined && elem.is("select")) type = "select"; 
  267. 						
  268.                     switch(type){
  269. 						case "text":
  270. 						case "number":
  271. 						case "password":
  272. 						case "select":
  273. 						case "textarea":
  274. 							$(elem).val(object.default);
  275. 							break;
  276. 						case "checkbox":
  277. 							$(elem).prop("checked", object.default);
  278. 							break;
  279. 						default: break;
  280. 					}
  281. 					$(elem).change();
  282.                 }
  283.             }
  284.         }
  285.         this.updateChanged();
  286.     },
  287.  
  288. 	close : function(){
  289. 		if(this.changed){
  290. 			if(!confirm(this.data.confirm_close)){
  291. 				return false;
  292. 			}
  293. 		}
  294. 		$('#' + this.window_id).attr("style", "display: none;");
  295. 		return true;
  296. 	},
  297. 	
  298.     open : function(data){
  299.         $('#' + this.window_id).attr("style", "");
  300.     },
  301.  
  302. 	create : function(data){
  303. 		//var data = JSON.parse(content);
  304.  
  305.         this.data = data;
  306. 		
  307.         if(this.window_id != undefined)
  308.             $('#' + this.window_id).remove();
  309.  
  310. 		$('#window_style').remove();
  311. 		$('#font-awesome').remove();
  312.  
  313. 		if(data.id == undefined) data.id = "window";
  314. 		this.window_id = data.id;
  315.  
  316. 		this.load();
  317. 	
  318. 		$('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">');
  319.  
  320. 		if (data.theme == undefined) data.theme = "mac";
  321. 		if (!(data.theme == "mac" || data.theme == "win10" || data.theme == "winXP")) data.theme = "mac";
  322. 		
  323. 		var saved_theme = GM_getValue("config_theme");
  324. 		if(data.theme_selector == undefined || data.theme_selector == true || data.theme_selector == "true"){
  325. 			data.theme_selector = true;
  326. 			if(saved_theme != undefined) data.theme = saved_theme;
  327. 		}else{
  328. 			data.theme_selector = false;
  329. 		}
  330. 		
  331. 		if(data.width == undefined) data.width = 50;
  332. 		if(data.height == undefined) data.height = 50;
  333. 		
  334. 		var section_color = "#c9c9c9";
  335. 		var subsection_color = "#f1f1f1";
  336. 		
  337. 		var style = "<style id='window_style'>";
  338. 		if(data.theme == "mac"){
  339. 			style += `
  340. 				#` + this.window_id + ` > #top > .btn {
  341. 					height: 16px;
  342. 					width: 16px;
  343. 					background-color: #bbb;
  344. 					border-radius: 50%;
  345. 					float: right;
  346. 					margin-right: 10px;
  347. 					display: inline-block;
  348. 					font-size: 10px;
  349. 					text-align: center;
  350. 					color: white;
  351. 					cursor: pointer;
  352. 					//font-weight: bold;
  353. 				}
  354.  
  355. 				#` + this.window_id + ` > #top > .title {
  356. 					margin: auto;
  357. 					font-size: 16px;
  358. 					font-weight: bold;
  359. 					cursor: move;
  360. 				}
  361.  
  362. 				#` + this.window_id + ` {
  363. 					border: 3px solid #f1f1f1;
  364. 					border-top-left-radius: 3px;
  365. 					border-top-right-radius: 3px;
  366. 					height: ` + data.height + `%;
  367. 					width: ` + data.width + `%;
  368. 					top: ` + ((100 - data.height) / 2) + `%;
  369. 					left: ` + ((100 - data.width) / 2) + `%;
  370. 					position: fixed;
  371. 					z-index: 11000;
  372. 					background: white;
  373. 					min-width: 250px;
  374. 					min-height: 250px;
  375. 					resize: both;
  376. 					overflow: auto;
  377. 					line-height: unset;
  378. 					overflow-y: hidden;`
  379. 				+ (data.font != undefined ?
  380. 					 (data.font.size != undefined ? "font-size: " + data.font.size + ";" : "")  +
  381. 					 (data.font.family != undefined ? "font-family: " + data.font.family + ";" : "")
  382. 				   : "") +
  383. 				`}
  384.  
  385. 				#` + this.window_id + ` > #top {
  386. 					padding: 10px;
  387. 					//height: 20px;
  388. 					background: #f1f1f1;
  389. 					border-top-left-radius: 4px;
  390. 					border-top-right-radius: 4px;
  391. 					position: absolute;
  392. 					width: calc(100% - 20px);
  393. 				}
  394. 			`;
  395. 		}else if(data.theme == "win10"){
  396. 			section_color = "#1f9cff";
  397. 			subsection_color = "#9dd4ff";
  398. 			style += `
  399. 				#` + this.window_id + ` > #top > .btn {
  400. 					height: 22px;
  401. 					width: 30px;
  402. 					float: right;
  403. 					margin-right: 5px;
  404. 					display: inline-block;
  405. 					font-size: 16px;
  406. 					text-align: center;
  407. 					color: white;
  408. 					cursor: pointer;
  409. 					color: black;
  410. 					padding: 2px;
  411. 				}
  412. 				
  413. 				#` + this.window_id + ` > #top > #window_minimize:hover, #` + this.window_id + ` > #top > #window_maximize:hover {
  414. 					background-color: #ddd;
  415. 				}
  416. 				
  417. 				#` + this.window_id + ` > #top > #window_close:hover {
  418. 					background-color: red;
  419. 				}
  420.  
  421. 				#` + this.window_id + ` > #top > .title {
  422. 					margin: auto;
  423. 					font-size: 16px;
  424. 					font-weight: bold;
  425. 					cursor: move;
  426. 					padding: 10px;
  427. 				}
  428.  
  429. 				#` + this.window_id + ` {
  430. 					border: 3px solid #1f9cff;
  431. 					height: ` + data.height + `%;
  432. 					width: ` + data.width + `%;
  433. 					top: ` + ((100 - data.height) / 2) + `%;
  434. 					left: ` + ((100 - data.width) / 2) + `%;
  435. 					position: fixed;
  436. 					z-index: 11000;
  437. 					background: white;
  438. 					min-width: 250px;
  439. 					min-height: 250px;
  440. 					resize: both;
  441. 					overflow: auto;
  442. 					line-height: unset;
  443. 					overflow-y: hidden;`
  444. 				+ (data.font != undefined ?
  445. 					 (data.font.size != undefined ? "font-size: " + data.font.size + ";" : "")  +
  446. 					 (data.font.family != undefined ? "font-family: " + data.font.family + ";" : "")
  447. 				   : "") +
  448. 				`}
  449.  
  450. 				#` + this.window_id + ` > #top {
  451. 					//padding: 10px;
  452. 					//height: 20px;
  453. 					background: #1f9cff;
  454. 					position: absolute;
  455. 					width: 100%;
  456. 				}
  457. 			`;
  458. 		}else if(data.theme == "winXP"){
  459. 			section_color = "#226ce7";
  460. 			subsection_color = "#4094ff";
  461. 			style += `
  462. 				#` + this.window_id + ` > #top > .btn {
  463. 					height: 20px;
  464. 					width: 20px;
  465. 					float: right;
  466. 					margin-right: 5px;
  467. 					margin-top: 5px;
  468. 					display: inline-block;
  469. 					font-size: 16px;
  470. 					text-align: center;
  471. 					color: white;
  472. 					cursor: pointer;
  473. 					color: white;
  474. 					border-radius: 2px;
  475. 					padding: 2px;
  476. 					border: 1px solid white;
  477. 					background: linear-gradient(135deg, #7EAED6 0%, #1B72FF 50%, #1655BE 100%);
  478. 				}
  479. 				
  480. 				#` + this.window_id + ` > #top > #window_minimize:hover, #` + this.window_id + ` > #top > #window_maximize:hover {
  481. 					background: linear-gradient(135deg, #6a93b5 0%, #1862da 50%, #124499 100%);
  482. 				}
  483. 				
  484. 				#` + this.window_id + ` > #top > #window_close {
  485. 					background: linear-gradient(135deg, #F1A689 0%, #C0442A 50%, #C2311E 100%);
  486. 				}
  487. 				
  488. 				#` + this.window_id + ` > #top > #window_close:hover {
  489. 					background: linear-gradient(135deg, #c3846c 0%, #a43923 50%, #982415 100%);
  490. 				}
  491.  
  492. 				#` + this.window_id + ` > #top > .title {
  493. 					margin: auto;
  494. 					font-size: 16px;
  495. 					font-weight: bold;
  496. 					cursor: move;
  497. 					padding: 10px;
  498. 					color: white;
  499. 				}
  500.  
  501. 				#` + this.window_id + ` {
  502. 					border-left: 3px solid #0056e4;
  503. 					border-right: 3px solid #0056e4;
  504. 					border-bottom: 3px solid #0056e4;
  505. 					height: ` + data.height + `%;
  506. 					width: ` + data.width + `%;
  507. 					top: ` + ((100 - data.height) / 2) + `%;
  508. 					left: ` + ((100 - data.width) / 2) + `%;
  509. 					position: fixed;
  510. 					z-index: 11000;
  511. 					background: white;
  512. 					min-width: 250px;
  513. 					min-height: 250px;
  514. 					border-radius: 8px;
  515. 					resize: both;
  516. 					overflow: auto;
  517. 					line-height: unset;
  518. 					overflow-y: hidden;`
  519. 				+ (data.font != undefined ?
  520. 					 (data.font.size != undefined ? "font-size: " + data.font.size + ";" : "")  +
  521. 					 (data.font.family != undefined ? "font-family: " + data.font.family + ";" : "")
  522. 				   : "") +
  523. 				`}
  524.  
  525. 				#` + this.window_id + ` > #top {
  526. 					//padding: 10px;
  527. 					//height: 20px;
  528. 					border-radius: 5px 5px 0px 0px;
  529. 					background: linear-gradient(to bottom, #4094ff 0%, #0056e4 13%, #0056e4 71%, #16428b 100%);
  530. 					position: absolute;
  531. 					width: 100%;
  532. 				}
  533. 			`;
  534. 		}
  535. 		
  536. 		style += `
  537. 			#` + this.window_id + ` > #footer {
  538. 				text-align: right;
  539. 				margin: 0px 0px 4px -20px;
  540. 				height: 40px;
  541. 				border-top-left-radius: 4px;
  542. 				border-top-right-radius: 4px;
  543. 				position: absolute;
  544. 				width: 100%;
  545. 				bottom: 0;
  546. 				pointer-events: none;
  547. 			}
  548.  
  549. 			#` + this.window_id + ` > #footer > button {
  550. 				background-color: #f1f1f1;
  551. 				border: none;
  552. 				color: black;
  553. 				padding: 12px 40px;
  554. 				font-size: 14px;
  555. 				cursor: pointer;
  556. 				margin-left: 5px;
  557. 				pointer-events: all;
  558. 			}
  559.  
  560. 			#` + this.window_id + ` > #footer > button:hover {
  561. 				background-color: RoyalBlue;
  562. 				color: white;
  563. 			}
  564. 			
  565. 			#` + this.window_id + ` > #footer > button:disabled {
  566. 				background-color: darkgrey;
  567. 				color: white;
  568. 			}
  569. 			
  570. 			#` + this.window_id + ` > #content {
  571. 				padding: 10px;
  572. 				margin-top: 40px;
  573. 				overflow-y: scroll;
  574. 				height: calc(100% - 75px);
  575. 				overflow-wrap: break-word;
  576. 			}
  577.  
  578. 			#` + this.window_id + ` > #content > input,#` + this.window_id + ` > #content > select {`
  579. 				 + (data.font != undefined ?
  580. 				 (data.font.size != undefined ? "font-size: " + data.font.size + ";" : "")  +
  581. 				 (data.font.family != undefined ? "font-family: " + data.font.family + ";" : "")
  582. 			   : "") +
  583. 			`}
  584.  
  585. 			#` + this.window_id + ` > #content > br {
  586. 				display: block;
  587. 				margin-top: 4px;
  588. 				content: " ";
  589. 			}
  590.  
  591. 			#` + this.window_id + ` > #theme_dropdown {
  592. 				float: left;
  593. 				bottom: 5px;
  594. 				position: absolute;
  595. 				left: 5px;
  596. 				border: none;
  597. 				-webkit-appearance: none;
  598. 				-moz-appearance: none;
  599. 				appearance: none;
  600. 				color: gray;
  601. 				background-color: transparent;
  602. 			}
  603. 			
  604. 			#` + this.window_id + ` > #theme_dropdown > option {
  605. 				color: black;
  606. 			}
  607. 			
  608. 			.no-margin {
  609. 				margin: 0px;
  610. 			}
  611. 			
  612. 			.wrap-collapsible {
  613. 				margin-bottom: 1.2rem 0;
  614. 			}
  615.  
  616. 			.toggle {
  617. 				display: none;
  618. 			}
  619.  
  620. 			.lbl-toggle {
  621. 				display: block;
  622. 				cursor: pointer;
  623. 				
  624. 				transition: all 0.25s ease-out;
  625. 			}
  626. 			
  627. 			.lbl-toggle h2, .lbl-toggle h4 {
  628. 				display: inline;
  629. 			}
  630.  
  631. 			.lbl-toggle:hover {
  632. 				color: white;
  633. 			}
  634.  
  635. 			.lbl-toggle::before {
  636. 				content: ' ';
  637. 				display: inline-block;
  638.  
  639. 				border-top: 5px solid transparent;
  640. 				border-bottom: 5px solid transparent;
  641. 				border-left: 5px solid currentColor;
  642. 				vertical-align: middle;
  643. 				margin-right: .7rem;
  644. 				transform: translateY(-2px);
  645.  
  646. 				transition: transform .2s ease-out;
  647. 			}
  648.  
  649. 			.toggle:checked + .lbl-toggle::before {
  650. 				transform: rotate(90deg) translateX(-3px);
  651. 			}
  652.  
  653. 			.collapsible-content {
  654. 				max-height: 0px;
  655. 				overflow: hidden;
  656. 				transition: max-height .25s ease-in-out;
  657. 			}
  658.  
  659. 			.toggle:checked + .lbl-toggle + .collapsible-content {
  660. 				max-height: unset;
  661. 			}
  662.  
  663. 			.collapsible-content .content-inner {
  664. 				//background: rgba(161, 161, 161, 0.2);
  665. 				//border: 1px solid black;
  666. 			}
  667. 		`;
  668. 		
  669. 		style += "<style>";
  670. 		
  671. 		$('head').append(style);
  672. 		
  673. 		if(data.theme_section_color == undefined || data.theme_section_color == false){
  674. 			section_color = "#c9c9c9";
  675. 			subsection_color = "#f1f1f1";
  676. 		}
  677. 		
  678. 		var content = "";
  679.  
  680. 		if(this.isArray(data.content)){
  681. 			var section_collapsible = false;
  682. 			var subsection_collapsible = false;
  683. 			var collapsible_id = 1;
  684. 			
  685. 			for(i = 0; i < data.content.length; i++){
  686. 				if(this.isObject(data.content[i])){
  687. 					var label_first = undefined;
  688. 					Object.keys(data.content[i]).forEach(function(key){
  689. 						if(label_first != undefined) return;
  690.  
  691. 						if(key == "label") label_first = true;
  692. 						else if(key == "type") label_first = false;
  693. 					});
  694.  
  695. 					var label = this.replaceAll(data.content[i].label, "  ", "&nbsp;&nbsp;");
  696.  
  697. 					var object = data.content[i];
  698.  
  699. 					if(object.style != undefined) object.style = " style='" + object.style + "'";
  700. 					else object.style = "";
  701.  
  702. 					if(object.require != undefined) object.style += " require='" + object.require + "'";
  703. 					
  704. 					switch(object.type){
  705. 						case "p":
  706. 							content += "<p class='no-margin'" + object.style + ">" + label  + "</p>";
  707. 							break;
  708. 						case "h1":
  709. 							content += "<h1 class='no-margin'" + object.style + ">" + label + "</h1>";
  710. 							break;
  711. 						case "h2":
  712. 							content += "<h2 class='no-margin'" + object.style + ">" + label + "</h2>";
  713. 							break;
  714. 						case "h3":
  715. 							content += "<h3 class='no-margin'" + object.style + ">" + label + "</h3>";
  716. 							break;
  717. 						case "h4":
  718. 							content += "<h4 class='no-margin'" + object.style + ">" + label + "</h4>";
  719. 							break;
  720. 						case "section":
  721. 							if(object.align == undefined) object.align = "center";
  722. 							if(object.background == undefined) object.background = section_color;
  723. 							
  724. 							if(subsection_collapsible){
  725. 								content += "</div></div></div>";
  726. 								subsection_collapsible = false;
  727. 							}
  728. 							
  729. 							if(section_collapsible){
  730. 								content += "</div></div></div>";
  731. 								section_collapsible = false;
  732. 							}
  733. 							
  734. 							if(object.collapsible != undefined && object.collapsible){
  735. 								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'>";
  736. 								section_collapsible = true;
  737. 								collapsible_id++;
  738. 							}else{
  739. 								content += "<div width='100%' style='margin: 5px 0px; background: " + object.background + "; text-align: " + object.align + ";'><h2 class='no-margin'>" + label + "</h2></div>";
  740. 							}
  741. 							break;
  742. 						case "subsection":
  743. 							if(object.align == undefined) object.align = "center";
  744. 							if(object.background == undefined) object.background = subsection_color;
  745. 							
  746. 							if(subsection_collapsible){
  747. 								content += "</div></div></div>";
  748. 								subsection_collapsible = false;
  749. 							}
  750. 							
  751. 							if(object.collapsible != undefined && object.collapsible){
  752. 								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'>";
  753. 								subsection_collapsible = true;
  754. 								collapsible_id++;
  755. 							}else{
  756. 								content += "<div width='100%' style='margin: 5px 0px; background: " + object.background + "; text-align: " + object.align + ";'><h4 class='no-margin'>" + label + "</h4></div>";
  757. 							}
  758. 							break;
  759. 						case "text":
  760. 							var value = this.getElseSet(object.id, object.default, "");
  761. 							
  762. 							content += this.join(label_first, label, "<input id='" + object.id + "'" + object.style + " type='text' value='" + value + "' />");
  763.  
  764. 							content += "<br>";
  765. 							break;
  766. 						case "textarea":
  767. 							var value = this.getElseSet(object.id, object.default, "");
  768. 							
  769. 							content += this.join(label_first, label, "<textarea id='" + object.id + "'" + object.style + " value='" + value + "'>" + value + "</textarea>");
  770.  
  771. 							content += "<br>";
  772. 							break;
  773. 						case "password":
  774. 							var value = this.getElseSet(object.id, object.default, "");
  775. 							
  776. 							content += this.join(label_first, label, "<input id='" + object.id + "'" + object.style + " type='password' value='" + value + "' />");
  777.  
  778. 							content += "<br>";
  779. 							break;
  780. 						case "checkbox":
  781. 							var value = this.getElseSet(object.id, object.default, false);
  782. 							
  783. 							if(value == "true" || value == true) value = true;
  784. 							else value = false;
  785.  
  786. 							label = "<label for='" + object.id + "'>" + label + "</label>";
  787. 							
  788. 							content += this.join(label_first, label, "<input id='" + object.id + "'" + object.style + " default='" + value + "' type='checkbox' " + (value ? "checked" : "") + "/>");
  789.  
  790. 							content += "<br>";
  791. 							break;
  792. 						case "select":
  793. 							var value = this.getElseSet(object.id, object.default, "");
  794.  
  795. 							var select = " <select" + object.style + " id='" + object.id + "'>";
  796. 							object.options.forEach(function(opt){
  797. 								if(opt == value){
  798. 									select += "<option selected>" + opt + "</option>";
  799. 								}else{
  800. 									select += "<option>" + opt + "</option>";
  801. 								}
  802. 							});
  803. 							select += "</select> ";
  804.  
  805. 							content += this.join(label_first, label, select);
  806.  
  807. 							content += "<br>";
  808. 							break;
  809. 						case "numeric":
  810. 							var value = this.getElseSet(object.id, object.default, 0);
  811. 							
  812. 							var element = "<input id='" + object.id + "'" + object.style + " type='number' value='" + value + "'";
  813. 							if(object.min != undefined) element += " min='" + object.min + "'";
  814. 							if(object.max != undefined) element += " max='" + object.max + "'";
  815. 							element += " />";
  816. 							
  817. 							content += this.join(label_first, label, element);
  818.  
  819. 							content += "<br>";
  820. 							break;
  821. 						case "color":
  822. 							var value = this.getElseSet(object.id, object.default, "#FFFFFF");
  823.  
  824. 							content += this.join(label_first, label, "<input id='" + object.id + "'" + object.style + " type='color' value='" + value + "' />");
  825.  
  826. 							content += "<br>";
  827. 							break;
  828. 						default: break;
  829. 					}
  830. 				}else{
  831. 					content += "<p>" + data.content[i] + "</p>";
  832. 				}
  833. 			}
  834. 			
  835. 			if(subsection_collapsible){
  836. 				content += "</div></div></div>";
  837. 				section_collapsible = false;
  838. 			}
  839. 			
  840. 			if(section_collapsible){
  841. 				content += "</div></div></div>";
  842. 				section_collapsible = false;
  843. 			}
  844. 		}else{
  845. 			content = data.content;
  846. 		}
  847. 		//content += "<br style='height: 25px;' />";
  848. 		content += "<br><br><br>";
  849. 		
  850. 		var buttons = "";
  851.  
  852.         if(data.completeresetbutton == undefined || data.completeresetbutton == true || data.completeresetbutton == "true"){
  853.             buttons += "<button id='completeResetButton'><i class='fa fa-trash'></i></button>";
  854.         }
  855.  
  856. 		if(data.revertbutton == undefined || data.revertbutton == true ||  data.revertbutton == "true"){
  857. 			buttons += "<button id='revertButton'><i class='fa fa-undo'></i></button>";
  858. 		}
  859.  
  860. 		if(data.savebutton == undefined || data.savebutton == true ||  data.savebutton == "true"){
  861. 			buttons += "<button id='saveButton'><i class='fa fa-save'></i></button>";
  862. 		}
  863.  
  864. 		var topbuttons = "";
  865. 		if(data.top == undefined || data.top.close == undefined || data.top.close == "true"){
  866. 			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>';
  867. 			else if(data.theme == "win10") topbuttons += '<span id="window_close" class="btn" style="margin-right: 0px;"><i class="fa fa-times"></i></span>';
  868. 			else if(data.theme == "winXP") topbuttons += '<span id="window_close" class="btn"><i class="fa fa-times"></i></span>';
  869. 		}
  870. 		
  871. 		if(data.top == undefined || data.top.maximize == undefined || data.top.maximize == "true"){
  872. 			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>';
  873. 			else if(data.theme == "win10" || data.theme == "winXP") topbuttons += '<span id="window_maximize" class="btn"><i class="fa fa-window-maximize"></i></span>';
  874. 		}
  875. 		
  876. 		if(data.top == undefined || data.top.minimize == undefined || data.top.minimize == "true"){
  877. 			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>';
  878. 			else if(data.theme == "win10" || data.theme == "winXP") topbuttons += '<span id="window_minimize" class="btn"><i class="fa fa-window-minimize"></i></span>';
  879. 		}
  880. 		
  881.  
  882. 		$('body').append(`
  883. 			<div id="` + this.window_id + `" style='display: none;' class="window">
  884. 				<div id="top">
  885. 					` + topbuttons +
  886. 					`<p class="title">` + data.title + `</p>
  887. 				</div>
  888.  
  889. 				<div id="content">
  890. 					` + content + `
  891. 				</div>
  892.  
  893. 				<div id="footer">
  894. 					` + buttons + `
  895. 				</div>
  896. 				` +
  897. 				(data.theme_selector ? `<select id="theme_dropdown" value="Theme">
  898. 					<option value="std" style="display: none;">Theme</option>
  899. 					<option value="mac">Mac</option>
  900. 					<option value="win10">Windows 10</option>
  901. 					<option value="winXP">Windows XP</option>
  902. 				</select>` : "") + `
  903. 			</div>
  904. 		`);
  905.  
  906. 		this.makeDragable($('#' + this.window_id)[0], $('#' + this.window_id).find("#top")[0], true);
  907.  
  908.         var confirm_close = "Unsaved changes. Discard changes?";
  909.         var confirm_revert = "Reset all changes?";
  910.         var confirm_reset = "Bring settings back to factory settings?";
  911.         if(data.confirm_close != undefined) confirm_close = data.confirm_close;
  912.         if(data.confirm_revert != undefined) confirm_revert = data.confirm_revert;
  913.         if(data.confirm_reset != undefined) confirm_reset = data.confirm_reset;
  914.  
  915. 		$('#' + this.window_id).find('#revertButton').click(function(){
  916.             if(confirm(confirm_revert)) configurationWindow.revertChanges();
  917. 		});
  918. 		
  919. 		$('#' + this.window_id).find('#saveButton').click(function(){
  920. 			configurationWindow.saveChanges();
  921.             $('#' + configurationWindow.window_id).find('#saveButton').css("background", "lime");
  922.             setTimeout(function(){
  923.                 $('#' + configurationWindow.window_id).find('#saveButton').css("background", "");
  924.             }, 1000);
  925. 		});
  926.  
  927.         $('#' + this.window_id).find('#completeResetButton').click(function(){
  928. 			if(confirm(confirm_reset)) configurationWindow.ResetSettings();
  929. 		});
  930.  
  931.         $('#' + this.window_id).find('#window_close').click(function(){
  932.             configurationWindow.close();
  933. 		});
  934.  
  935. 		//================ WINDOW RESIZE BUTTONS ===================//
  936. 		$('#' + this.window_id).find('#window_maximize').click(function(){
  937. 			if(configurationWindow.maximized && !configurationWindow.minimized)
  938. 				configurationWindow.normalize();
  939. 			else
  940. 				configurationWindow.maximize();
  941. 		});
  942.  
  943. 		$('#' + this.window_id).find('#window_minimize').click(function(){
  944. 			configurationWindow.minimize();
  945. 		});
  946.  
  947. 		$('#' + this.window_id).find("#top").dblclick(function(){
  948. 			if(configurationWindow.minimized){
  949. 				if(configurationWindow.maximized)
  950. 					configurationWindow.maximize();
  951. 				else
  952. 					configurationWindow.normalize();
  953. 			}else{
  954. 				if(configurationWindow.maximized)
  955. 					configurationWindow.normalize();
  956. 				else
  957. 					configurationWindow.maximize();
  958. 			}
  959. 			configurationWindow.clearSelection();
  960. 		});
  961.  
  962. 		//==================== THEME SELECTOR =======================//
  963. 		$('#' + this.window_id).find("#theme_dropdown").change(function(){
  964. 			if(! configurationWindow.close()) return;
  965. 			GM_setValue("config_theme", this.value);
  966. 			configurationWindow.create(configurationWindow.data);
  967. 			configurationWindow.open();
  968. 		});
  969. 		
  970.  
  971. 		//==================== FIELD CHANGE LISTENER =====================//
  972. 		$('#' + this.window_id).find("#content").find("input[type=text], input[type=number], input[type=password], input[type=color], textarea").change(function(){
  973. 			if($(this).attr("value") != $(this).val())
  974. 				$(this).css("border", "#fff400 solid 2px");
  975. 			else
  976. 				$(this).css("border", "");
  977.  
  978. 			configurationWindow.updateChanged();
  979. 		});
  980. 		 
  981. 		$('#' + this.window_id).find("#content").find("input[type=number]").change(function(){
  982. 			if($(this).attr("min") != undefined && $(this).val() < parseFloat($(this).attr("min")))
  983. 				$(this).val($(this).attr("min"));
  984. 			else if($(this).attr("max") != undefined && $(this).val() > parseFloat($(this).attr("max"))){
  985. 				$(this).val($(this).attr("max"));
  986. 			}
  987. 			
  988. 			configurationWindow.updateChanged();
  989. 		});
  990.  
  991. 		
  992.  
  993. 		$('#' + this.window_id).find("#content").find("select").change(function(){
  994. 			if(this.value != $(this).find("option[selected]").val())
  995. 				$(this).css("border", "#fff400 solid 2px");
  996. 			else
  997. 				$(this).css("border", "");
  998.  
  999. 			configurationWindow.updateChanged();
  1000. 		});
  1001.  
  1002. 		$('#' + this.window_id).find("#content").find('input[type=checkbox]:not(.toggle)').change(function() {
  1003. 			if(this.checked != ($(this).attr("default") == "true")){
  1004. 				$(this).css("outline", "#fff400 solid 3px");
  1005. 			}else{
  1006. 				$(this).css("outline", "");
  1007. 			}
  1008. 			
  1009. 			$('[require="' + this.id + '"]').prop("disabled", !this.checked);
  1010. 			
  1011. 			configurationWindow.updateChanged();
  1012. 		});
  1013. 		
  1014. 		$('#' + this.window_id).find("#content").find('input[type=checkbox]:not(.toggle)').trigger("change");
  1015. 		
  1016. 		$(document).keyup(function(e) {
  1017. 			if (e.keyCode == 27) {
  1018. 				configurationWindow.close();
  1019. 			}
  1020. 		});
  1021. 		
  1022. 		this.updateChanged();
  1023. 	}
  1024. };