update loader.js - add jquery to display additional column button and create/delete columns

1 files changed, 114 insertions, 0 deletions

diff --git a/usr/local/www/themes/pfsense_ng_fs/loader.js b/usr/local/www/themes/pfsense_ng_fs/loader.js
index a028afe..293ad3e 100644
--- a/usr/local/www/themes/pfsense_ng_fs/loader.js
+++ b/usr/local/www/themes/pfsense_ng_fs/loader.js
@@ -26,11 +26,125 @@ if (browser == 'IE' && version < 7) {
 
 document.write('<script type="text/javascript" src="/themes/pfsense_ng/javascript/niftyjsCode.js"></scr'+'ipt>'); 
 
+///////////////////////////////////////////
+// jQuery code for columns / widgets part 1
+///////////////////////////////////////////
+
+var noCols = 2;
+var printed3 = false;
+var printed4 = false;
+var printed5 = false;
+var printed6 = false;
+var printed7 = false;
+var printed8 = false;
+var printed9 = false;
+var printed10 = false;
+
+function correctWidgetDisplay(noCols){
+	var percent = ( 100 / noCols ) - 0.1;
+	var percentStr = percent.toString() + '%';
+
+	// set all column widths
+	jQuery('.ui-sortable').width(percentStr);
+}
+
+// function to insert a new column we can place content into (from saved state)
+function printColumn(newNum){
+	if(newNum > noCols)
+		noCols = newNum;
+
+	document.write("</div><div id=\"col" + newNum + "\" style=\"float:left; padding-bottom:40px\" class=\"ui-sortable\">");
+	correctWidgetDisplay(noCols);
+
+	// connect new column with other columns 
+	jQuery('.ui-sortable').sortable({connectWith: '.ui-sortable', dropOnEmpty: true, handle: '.widgetheader', change: showSave});
+}
+
+function createColumn(colPos){
+	if (colpos == "col3" && printed3 == false){
+		printColumn(3);
+		printed3=true;
+	}
+	else if (colpos == "col4" && printed4 == false){
+		printColumn(4);
+		printed4=true;
+	}
+	else if (colpos == "col5" && printed5 == false){
+		printColumn(5);
+		printed5=true;
+	}
+	else if (colpos == "col6" && printed6 == false){
+		printColumn(6);
+		printed6=true;
+	}
+	else if (colpos == "col7" && printed7 == false){
+		printColumn(7);
+		printed7=true;
+	}
+	else if (colpos == "col8" && printed8 == false){
+		printColumn(8);
+		printed8=true;
+	}
+	else if (colpos == "col9" && printed9 == false){
+		printColumn(9);
+		printed9=true;
+	}
+	else if (colpos == "col10" && printed10 == false){
+		printColumn(10);
+		printed10=true;
+	}
+}
+///////////////// end widget code part 1 /////////////////////////
+
 // jQuery function to define dropdown menu size
 jQuery(document).ready(function () {
     var hwindow  = '';
     hwindow = (jQuery(window).height()-35);
     // Force the size dropdown menu 
     jQuery('#navigation ul li ul').css('max-height', hwindow);
+    
+    ///////////////////////////////////////////
+	// jQuery code for columns / widgets part 2    
+	///////////////////////////////////////////
+
+	jQuery('#col2').css("float","left");
+	jQuery('<br/><br/><div><div id =\"addCol\" style=float:left><img src=\"./themes/pfsense_ng_fs/images/icons/icon_plus.gif\"/>&nbsp;Add column&nbsp;</div><div id =\"delCol\" style=float:left><img src=\"./themes/pfsense_ng_fs/images/icons/icon_x.gif\"/>&nbsp;Delete column</div><br/><br/></div> ').insertBefore('#niftyOutter');
+	
+	// on click add a new column and change column widths
+	jQuery('#addCol').click(function(){
+		if( noCols < 10 ){
+			var colAfter = noCols;
+			noCols++;
+
+			// insert new column
+			jQuery('#col' + (colAfter).toString() ).after("<div id=\"col" + noCols + "\" style=\"float: left; padding-bottom: 40px\" class=\"ui-sortable\"> </div>");
+
+			correctWidgetDisplay(noCols);
+		
+			// connect new column with other columns 
+			jQuery('.ui-sortable').sortable({connectWith: '.ui-sortable', dropOnEmpty: true, handle: '.widgetheader', change: showSave});
+		}		  
+	});
+
+	// on click delete a columns and change column widths
+	jQuery('#delCol').click(function(){
+		if( noCols > 2 ){
+			var colToDel = noCols;
+			noCols -= 1;
+
+			correctWidgetDisplay(noCols);
+
+			// get column contents before deletion
+			var colContent = jQuery('#col' + colToDel ).html();
+
+			// remove column
+			jQuery('#col' + colToDel ).remove();
+
+			// append deleted columns content to preceeding column
+			jQuery(colContent).appendTo('#col' + noCols );
+			
+			showSave();           
+		}
+	});
 });
 //]]>