js/ui.parts.js

  1. /**=====LICENSE STATEMENT START=====
  2.     Translator++ 
  3.     CAT (Computer-Assisted Translation) tools and framework to create quality
  4.     translations and localizations efficiently.
  5.         
  6.     Copyright (C) 2018  Dreamsavior<dreamsavior@gmail.com>
  8.     This program is free software: you can redistribute it and/or modify
  9.     it under the terms of the GNU General Public License as published by
  10.     the Free Software Foundation, either version 3 of the License, or
  11.     (at your option) any later version.
  13.     This program is distributed in the hope that it will be useful,
  14.     but WITHOUT ANY WARRANTY; without even the implied warranty of
  15.     MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
  16.     GNU General Public License for more details.
  18.     You should have received a copy of the GNU General Public License
  19.     along with this program.  If not, see <https://www.gnu.org/licenses/>.
  20. =====LICENSE STATEMENT END=====*/
  21. const UIParts = {};
  22. const CustomFields 	= require('www/js/customFields.js');
  24. const renderStyle = function($formElm, css={}) {
  25. 	for (let key in css) {
  26. 		$formElm.css(key, css[key]);
  27. 	}
  28. }
  30. /**
  31.  * Creates a form dialog with custom fields.
  32.  * @param {jQuery|Object} $elm - jQuery object or customField object representing the element to which the form will be appended.
  33.  * @param {Object} [options={}] - Options for customization.
  34.  * @param {boolean} [options.ignoreValidation=false] - Flag to submit the form regardless of validation errors.
  35.  * @returns {Promise<Object>} - A promise that resolves to the form field values when the form is submitted successfully, or rejects if an error occurs.
  36.  */
  37. UIParts.form = async function($elm, options={}) {
  38. 	options ||= {};
  39. 	options.css ||=  {};
  40. 	options.overlayCss ||= {};
  41. 	// submit regardless validation error
  42. 	options.ignoreValidation ||= false;
  44. 	return new Promise((resolve, reject) => {
  45. 		var result;
  46. 		const $form = $(`<form class="uiCustomFields"></form>`);
  47. 		const customFields = new CustomFields($form, $elm);
  48. 		$form.data("customFields", customFields)
  49. 		$form.on("submit", function(e) {
  50. 			e.preventDefault();
  51. 			console.log("form submitted!");
  52. 			//$form.dialog("close");
  54. 			let validate = {};
  55. 			if (!options.ignoreValidation) {
  56. 				validate = customFields.validate();
  57. 			}
  58. 			if (!validate?.errors) {
  59. 				//result = customFields.getValues();
  60. 				result = customFields.getFormValues();
  61. 				$form.dialog("close");
  62. 			}
  63. 		});
  64. 		
  66. 		const dialogOptions = {...{
  67. 			title	: options.title || t("Form"),
  68. 			autoOpen: false,
  69. 			modal	:options.modal || true,
  70. 			width	:options.width ||800,
  71. 			height	:options.height ||600,
  72. 			minWidth:options.minWidth ||640,
  73. 			minHeight:options.minHeight ||320,
  74. 			show: {
  75. 				effect: "fade",
  76. 				duration: 200
  77. 			},
  78. 			hide: {
  79. 				effect: "fade",
  80. 				duration: 200
  81. 			},
  82. 			close:function(event, ui) {
  83. 				resolve(result);
  84. 				common.wait(500)
  85. 				.then(()=> {
  86. 					console.log("removing elm");
  87. 					$form.remove();
  88. 				});
  89. 			},
  90. 			open: function(event, ui) {
  91. 				console.log("form opened", ui, this);
  92. 				if (typeof options.onOpen == "function") options.onOpen.call($form, event, ui);
  93. 			},
  94. 			buttons:[
  95. 				{
  96. 					text: options.buttonCancelText || t("Cancel"),
  97. 					icon: "ui-icon-close",
  98. 					click: function() {
  99. 						$(this).dialog( "close" );
  100. 					}
  101. 				},
  102. 				{
  103. 					text: options.buttonOkText || t("Ok"),
  104. 					click: async function() {
  105. 						$form.submit();
  106. 					}
  107. 				}
  108. 	
  109. 			]
  110. 		}, ...options}
  111. 		$form.dialog(dialogOptions);
  112. 		renderStyle($form.closest(".ui-dialog"), options.css);
  113. 		renderStyle($("body > .ui-widget-overlay.ui-front"), options.overlayCss);
  114. 		$form.dialog("open");
  115. 		
  116. 	})
  117. 	
  118. }
  120. module.exports = UIParts;