☰

Greasy Fork is available in English.

Configuration Dialog

A enhanced configuration dialog for Userscripts.

Verze ze dne 08. 02. 2019. Zobrazit nejnovější verzi.

Tento skript by neměl být instalován přímo. Jedná se o knihovnu, kterou by měly jiné skripty využívat pomocí meta příkazu // @require https://update.greatest.deepsurf.us/scripts/45343/668865/Configuration%20Dialog.js 

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