Project

General

Profile

« Previous | Next » 

Revision 05a42cce

Added by Marcello Silva Coutinho about 13 years ago

drag and drop function to reorder lists on pkg framework using jquery.
also new features like base64,description, tooltip custom texts.
tested with sorting features too.
related post on forum
http://forum.pfsense.org/index.php/topic,49322.msg264514.html#msg264514

View differences:

usr/local/www/pkg.php
2 2
/* $Id$ */
3 3
/*
4 4
    pkg.php
5
    Copyright (C) 2004-2010 Scott Ullrich <sullrich@gmail.com>
5
    Copyright (C) 2004-2012 Scott Ullrich <sullrich@gmail.com>
6 6
    All rights reserved.
7 7

  
8 8
    Redistribution and use in source and binary forms, with or without
......
45 45
	return $config['system']['hostname'] . "." . $config['system']['domain'] . " - " . $pgname;
46 46
}
47 47

  
48
function domTT_title($title_msg){
49
	print "onmouseout=\"this.style.color = ''; domTT_mouseout(this, event);\" onmouseover=\"domTT_activate(this, event, 'content', '".gettext($title_msg)."', 'trail', true, 'delay', 0, 'fade', 'both', 'fadeMax', 93, 'styleClass', 'niceTitle');\"";
50
}
51

  
48 52
$xml = $_REQUEST['xml'];
49 53

  
50 54
if($xml == "") {
......
82 86

  
83 87
$evaledvar = $config['installedpackages'][xml_safe_fieldname($pkg['name'])]['config'];
84 88

  
89
if ($_GET['act'] == "update") {
90
		
91
		if(is_array($config['installedpackages'][$pkg['name']]) && $pkg['name'] != "" && $_REQUEST['ids'] !=""){
92
			#get current values
93
			$current_values=$config['installedpackages'][$pkg['name']]['config'];
94
			#get updated ids
95
			parse_str($_REQUEST['ids'], $update_list);
96
			#sort ids to know what to change
97
			#usefull to do not loose data when using sorting and paging
98
			$sort_list=$update_list['ids'];
99
			sort($sort_list);
100
			#apply updates
101
			foreach($update_list['ids'] as $key=> $value){
102
				$config['installedpackages'][$pkg['name']]['config'][$sort_list[$key]]=$current_values[$update_list['ids'][$key]];
103
				}
104
			#save current config
105
			write_config();
106
			#sync package
107
			eval ("{$pkg['custom_php_resync_config_command']}");
108
			}
109
		#function called via jquery, no need to continue after save changes.
110
		exit;
111
}
85 112
if ($_GET['act'] == "del") {
86 113
		// loop through our fieldnames and automatically setup the fieldnames
87 114
		// in the environment.  ie: a fieldname of username with a value of
......
131 158
<form action="pkg.php" name="pkgform" method="get">
132 159
<input type='hidden' name='xml' value='<?=$_REQUEST['xml']?>'>
133 160
<? if($_GET['savemsg'] <> "") $savemsg = htmlspecialchars($_GET['savemsg']); ?>
161
<div id="savemsg"></div>
134 162
<?php if ($savemsg) print_info_box($savemsg); ?>
135 163
<table width="100%" border="0" cellpadding="0" cellspacing="0">
136 164
<?php
......
178 206
    }
179 207
}
180 208
?>
209
<script type="text/javascript" src="javascript/domTT/domLib.js"></script>
210
<script type="text/javascript" src="javascript/domTT/domTT.js"></script>
211
<script type="textjavascript" src="javascript/domTT/behaviour.js"></script>
212
<script type="textjavascript" src="javascript/domTT/fadomatic.js"></script>
181 213
<script>
182 214
	function setFilter(filtertext) {
183 215
		jQuery('#pkg_filter').val(filtertext);
184 216
		document.pkgform.submit();
185
	}
217
    }
218

  
219
	<?php
220
		if($pkg['adddeleteeditpagefields']['movable']){
221
	?>
222
			jQuery(document).ready(function(){
223
				jQuery('#mainarea table tbody').sortable({
224
					items: 'tr.sortable',
225
					cursor: 'move',
226
					distance: 10,
227
					opacity: 0.8,
228
					helper: function(e,ui){  
229
						ui.children().each(function(){  
230
							jQuery(this).width(jQuery(this).width());  
231
						});
232
					return ui;  
233
					},
234
				});
235
			});
236
			function save_changes_to_xml(xml) {
237
					var ids=jQuery('#mainarea table tbody').sortable('serialize',{key:"ids[]"});
238
					var strloading="<img src='/themes/<?= $g['theme']; ?>/images/misc/loader.gif'> " +  "<?=gettext('Saving changes...');?>";
239
					if(confirm("<?=gettext("Do you really want to save changes?");?>")){
240
						jQuery.ajax({
241
							type: 'get',
242
							cache: false,
243
							url: "<?=$_SERVER['SCRIPT_NAME'];?>",
244
							data: {xml:'<?=$xml?>', act:'update', ids: ids},
245
							beforeSend: function(){
246
						        jQuery('#savemsg').empty().html(strloading);
247
							},
248
							error: function(data){
249
        						jQuery('#savemsg').empty().html('Error:' + data);
250
   							 },
251
							success: function(data){
252
        						jQuery('#savemsg').empty().html(data);
253
   							 }
254
						});
255
					}
256
			}
257
	<?php 
258
		}
259
	?>
186 260
</script>
187 261
<tr><td><div id="mainarea"><table width="100%" border="0" cellpadding="0" cellspacing="0">
188 262
	<tr>
......
298 372
									foreach($field['sortablefields']['item'] as $sf) {
299 373
										if($sf['name'] == $_REQUEST['pkg_filter_type']) {
300 374
											$filter_fieldname = $sf['fieldname'];
301
											$filter_regex = str_replace("%FILTERTEXT%", $_REQUEST['pkg_filter'], trim($sf['regex']));
375
											#Use a default regex on sortable fields when none is declared
376
											if($sf['regex'])
377
												$filter_regex = str_replace("%FILTERTEXT%", $_REQUEST['pkg_filter'], trim($sf['regex']));
378
											else
379
												$filter_regex = "/{$_REQUEST['pkg_filter']}/i";
302 380
										}
303 381
									}
304 382
								}
......
324 402
						continue;
325 403
					}
326 404
				}
327
				echo "<tr valign=\"top\">\n";
405
				if($pkg['adddeleteeditpagefields']['movable'])
406
					echo "<tr valign=\"top\" class=\"sortable\" id=\"id_{$i}\">\n";
407
				else
408
					echo "<tr valign=\"top\">\n";
328 409
				if($pkg['adddeleteeditpagefields']['columnitem'] <> "")
329 410
					foreach ($pkg['adddeleteeditpagefields']['columnitem'] as $column) {
330 411
						if ($column['fieldname'] == "description")
......
335 416
						<td class="<?=$class;?>" ondblclick="document.location='pkg_edit.php?xml=<?=$xml?>&act=edit&id=<?=$i;?>';">
336 417
							<?php
337 418
								$fieldname = $ip[xml_safe_fieldname($column['fieldname'])];
419
								#Check if columnitem has a type field declared
338 420
							    if($column['type'] == "checkbox") {
339 421
									if($fieldname == "") {
340 422
								    	echo gettext("No");
......
344 426
							    } else if ($column['type'] == "interface") {
345 427
									echo  $column['prefix'] . $iflist[$fieldname] . $column['suffix'];
346 428
							    } else {
347
									echo $column['prefix'] . $fieldname . $column['suffix'];
429
							    	#Check if columnitem has an encoding field declared
430
							    	if ($column['encoding'] == "base64")
431
										echo  $column['prefix'] . base64_decode($fieldname) . $column['suffix'];
432
									#Check if there is a custom info to show when $fieldname is not empty
433
									else if($column['listmodeon'] && $fieldname != "")
434
								   		echo $column['prefix'] . gettext($column['listmodeon']). $column['suffix'];
435
								   	#Check if there is a custom info to show when $fieldname is empty	
436
								   	else if($column['listmodeoff'] && $fieldname == "")
437
								    	echo $column['prefix'] .gettext($column['listmodeoff']). $column['suffix'];
438
									else
439
										echo $column['prefix'] . $fieldname ." ". $column['suffix'];
348 440
							    }
349 441
							?>
350 442
						</td>
......
354 446
				<td valign="middle" class="list" nowrap>
355 447
				<table border="0" cellspacing="0" cellpadding="1">
356 448
				<tr>
357
				<td valign="middle"><a href="pkg_edit.php?xml=<?=$xml?>&act=edit&id=<?=$i;?>"><img src="./themes/<?= $g['theme']; ?>/images/icons/icon_e.gif" width="17" height="17" border="0"></a></td>
358
				<td valign="middle"><a href="pkg.php?xml=<?=$xml?>&act=del&id=<?=$i;?>" onclick="return confirm('<?=gettext("Do you really want to delete this item?");?>')"><img src="./themes/<?= $g['theme']; ?>/images/icons/icon_x.gif" width="17" height="17" border="0"></a></td>
449
				<?php
450
				#Show custom description to edit button if defined
451
				$edit_msg=($pkg['adddeleteeditpagefields']['edittext']?$pkg['adddeleteeditpagefields']['edittext']:"Edit this item");?>
452
				<td valign="middle"><a href="pkg_edit.php?xml=<?=$xml?>&act=edit&id=<?=$i;?>"><img src="./themes/<?= $g['theme']; ?>/images/icons/icon_e.gif" width="17" height="17" border="0" <?=domTT_title($edit_msg)?>></a></td>
453
				<?php
454
				#Show custom description to delete button if defined
455
				$delete_msg=($pkg['adddeleteeditpagefields']['deletetext']?$pkg['adddeleteeditpagefields']['deletetext']:"Delete this item");?>
456
				<td valign="middle"><a href="pkg.php?xml=<?=$xml?>&act=del&id=<?=$i;?>" onclick="return confirm('<?=gettext("Do you really want to delete this item?");?>')"><img src="./themes/<?= $g['theme']; ?>/images/icons/icon_x.gif" width="17" height="17" border="0" <?=domTT_title($delete_msg)?>></a></td>
359 457
				</tr>
360 458
				</table>
361 459
				</td>
......
403 501
					<td>
404 502
						<table border="0" cellspacing="0" cellpadding="1">
405 503
							<tr>
406
								<td valign="middle"><a href="pkg_edit.php?xml=<?=$xml?>&id=<?=$i?>"><img src="./themes/<?= $g['theme']; ?>/images/icons/icon_plus.gif" width="17" height="17" border="0"></a></td>
504
								<?php
505
								#Show custom description to add button if defined
506
								$add_msg=($pkg['adddeleteeditpagefields']['addtext']?$pkg['adddeleteeditpagefields']['addtext']:"Add a new item");?>
507
								<td valign="middle"><a href="pkg_edit.php?xml=<?=$xml?>&id=<?=$i?>"><img src="./themes/<?= $g['theme']; ?>/images/icons/icon_plus.gif" width="17" height="17" border="0" <?=domTT_title($add_msg)?>></a></td>
508
								<?php
509
								#Show description button and info if defined
510
								if($pkg['adddeleteeditpagefields']['description']){?>
511
								<td valign="middle"><img src="./themes/<?= $g['theme']; ?>/images/icons/icon_info_pkg.gif" width="17" height="17" border="0" <?=domTT_title($pkg['adddeleteeditpagefields']['description'])?>></td>
512
								<?php }?>
407 513
							</tr>
408 514
						</table>
409 515
					</td>
410 516
				</tr>
411 517
				<?=$final_footer?>
518
				<?php
519
				#Show save button only when movable is defined
520
				if($pkg['adddeleteeditpagefields']['movable']){?>
521
				<td><input class="formbtn" type="button" value="Save" name="Submit" onclick="save_changes_to_xml('<?=$xml?>')"></td>
522
				<?php }?>
412 523
		</table>
413 524
	</td>
414 525
</tr>

Also available in: Unified diff