mirrors/pfsense
2
0
Fork 0
mirror of https://github.com/pfsense/pfsense.git synced 2025-10-26 11:38:35 +00:00
Code Issues Packages Projects Releases Wiki Activity

make dashboard responsive

Browse Source
This commit is contained in:
Charlie Marshall 2013-10-14 20:00:49 +01:00
parent b4a62651f8
commit e5e0fd39f5
1 changed files with 139 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

155
usr/local/www/themes/pfsense_ng_fs/loader.js
View File

@ -39,7 +39,103 @@ var printed7 = false;
var printed8 = false;
var printed9 = false;
var printed10 = false;
var id;
var noColsOnLoad = noCols; // holds a reference to the number of displayed columns on load
var existing =[]; // array to hold each columns contents
var specifiedColWidth = 350; // width of columns for resizing
///////////////////////////////////////////
// jQuery Widget functions
///////////////////////////////////////////
// function to connect all columns to each other to allow jQuery interaction (drag and droppable)
function connectColumns()
{
jQuery('.ui-sortable').sortable({connectWith: '.ui-sortable', dropOnEmpty: true, handle: '.widgetheader', change: showSave});
}
// function to add columns due to a window resize
function resizeAddColumns()
{
if(noColsOnLoad > noCols) // if a column has previously been deleted
{
var maxCols = maxColsToDisplay(); // the maximum we can display
if(noColsOnLoad < maxCols) // if the number of columns on load is less then the maximum number of columns we can display
maxCols = noColsOnLoad; // change the maximum number of columns as we do not want to display them all
if( (maxCols - noCols) > 0 ) // if we need to add more columns
{
replaceColumn();
for(var i=noCols; i<maxCols; i++)
{
var addCols = i +1;
jQuery('#col' + (i).toString() ).after("<div id=\"col" + addCols + "\" style=\"float: left; padding-bottom: 40px\" class=\"ui-sortable\"> </div>");
jQuery(existing[i]).appendTo('#col' + addCols ); // append onLoad contents
}
noCols = maxCols;
for(var i=noCols; i<noColsOnLoad ; i++)
{
jQuery(existing[i]).appendTo('#col' + maxCols ); // append widgets from stored array to columns
}
correctWidgetDisplay(noCols);
connectColumns();
showSave();
}
}
}
// function to remove columns due to a window resize
function resizeRmColumns()
{
if( noCols > 1 ) // keep at least 1 column displayed at all times
{
var maxCols = maxColsToDisplay();
var noColsToDel = noCols - maxCols;
if(noColsToDel>0) // if columns need deleteing
{
for(var i=(noCols-noColsToDel); i<noColsOnLoad; i++)
{
jQuery(existing[i]).appendTo('#col' + maxCols ); // append widgets from stored array to columns
}
for(var i=0; i<noColsToDel; i++ )
{
var del = noCols -i;
jQuery('#col' + del ).remove(); // remove columns
}
noCols = maxCols;
correctWidgetDisplay(noCols);
showSave();
}
}
};
// functions to removes the highest value column current displayed and replaces it with the same column number on load ie before any resizing took place
function replaceColumn()
{
var tmpReplace = noCols -1;
jQuery('#col' + noCols ).remove();
// prepend column1 as we can't add it AFTER a column as none will exist
if(tmpReplace==0)
jQuery("#niftyOutter").prepend("<div id=\"col1\" style=\"float: left; padding-bottom: 40px\" class=\"ui-sortable\"> </div>");
else
jQuery('#col' + (tmpReplace).toString() ).after("<div id=\"col" + noCols + "\" style=\"float: left; padding-bottom: 40px\" class=\"ui-sortable\"> </div>");
jQuery(existing[tmpReplace]).appendTo('#col' + noCols);
}
// function to calculate & return the maximum number of columns we can display
function maxColsToDisplay()
{
var niftyWidth = jQuery('#niftyOutter.fakeClass').width();
return Math.round(niftyWidth / specifiedColWidth);
}
// function to amend the widget width
function correctWidgetDisplay(noCols){
var percent = ( 100 / noCols ) - 0.1;
var percentStr = percent.toString() + '%';
@ -50,16 +146,17 @@ function correctWidgetDisplay(noCols){
// function to insert a new column we can place content into (from saved state)
function printColumn(newNum){
if(newNum > noCols)
if(newNum > noCols){
noCols = newNum;
noColsOnLoad = noCols;
}
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});
connectColumns();
}
// function to create the columns
function createColumn(colPos){
if (colpos == "col3" && printed3 == false){
printColumn(3);
@ -94,6 +191,25 @@ function createColumn(colPos){
printed10=true;
}
}
// function which is called when the broswer window is resized
jQuery( window ).resize(function()
{
// stop resize firing twice: http://stackoverflow.com/questions/4298612/jquery-how-to-call-resize-event-only-once-its-finished-resizing
clearTimeout(id);
id = setTimeout(finishedResizing, 500);
});
// function called after the browser has finished resizing
function finishedResizing()
{
var colWidth = jQuery("#col1").width();
if( colWidth < specifiedColWidth ) // Columns width is too small to display all the columns properly so we delete some columns and resize the remaining columns
resizeRmColumns(); // Check if we can delete any columns
else if( colWidth > specifiedColWidth ) // Columns width COULD display more columns properly
resizeAddColumns(); // Check if we can add any columns
};
///////////////// end widget code part 1 /////////////////////////
// jQuery function to define dropdown menu size
@ -107,14 +223,25 @@ jQuery(document).ready(function () {
// jQuery code for columns / widgets part 2
///////////////////////////////////////////
// correct the css for column 2
jQuery('#col2').css("float","left");
// insert add/delete column buttons
jQuery('<br/><br/><div id=\"columnModifier\"><div style=\"float:left\"><div id =\"addCol\" style=\"float:left\"><img src=\"./themes/pfsense_ng_fs/images/icons/icon_plus.gif\" style=\"cursor:pointer\" alt=\"Click here to add a column\"/></div>&nbsp;Add column&nbsp;</div><div style=\"float:left\"><div id =\"delCol\" style=\"float:left\"><img src=\"./themes/pfsense_ng_fs/images/icons/icon_x.gif\" style=\"cursor:pointer\" alt=\"Click here to delete a column\"/></div>&nbsp;Delete column</div><div id=\"columnWarningText\" style=\"float:left; margin-left:5em\"></div><br/><br/>').insertBefore('#niftyOutter.fakeClass');
// Make a copy of the current state of columns on page load
for ( var i = 1; i <= noCols; i = i + 1 )
{
var contents = jQuery('#col' + i ).html();
existing.push( contents );
}
finishedResizing(); // on page load correct display of columns to fit
// on click add a new column and change column widths
jQuery('#addCol').click(function(){
if( noCols < 10 ){
var maxCols = maxColsToDisplay();
if( (noCols < maxCols) && (noCols < 10) ){
var colAfter = noCols;
noCols++;
@ -122,18 +249,15 @@ jQuery(document).ready(function () {
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});
}
else{
jQuery('#columnWarningText').html('<b>Maximum number of columns reached</b>').show().delay(1000).fadeOut(1000);
connectColumns();
}
else
jQuery('#columnWarningText').html('<b>Maximum number of columns reached for the current window size</b>').show().delay(1000).fadeOut(1000);
});
// on click delete a columns and change column widths
jQuery('#delCol').click(function(){
if( noCols > 2 ){
if( noCols > 1 ){
var colToDel = noCols;
noCols -= 1;
@ -150,9 +274,8 @@ jQuery(document).ready(function () {
showSave();
}
else{
jQuery('#columnWarningText').html('<b>Minimum number of columns reached</b>').show().delay(1000).fadeOut(1000);
}
else
jQuery('#columnWarningText').html('<b>Minimum number of columns reached for the current window size</b>').show().delay(1000).fadeOut(1000);
});
});
//]]>