From e5e0fd39f5d58fdff348f3e325eeb69545ffd923 Mon Sep 17 00:00:00 2001 From: Charlie Marshall Date: Mon, 14 Oct 2013 20:00:49 +0100 Subject: make dashboard responsive --- usr/local/www/themes/pfsense_ng_fs/loader.js | 155 ++++++++++++++++++++++++--- 1 file changed, 139 insertions(+), 16 deletions(-) (limited to 'usr/local/www/themes/pfsense_ng_fs') diff --git a/usr/local/www/themes/pfsense_ng_fs/loader.js b/usr/local/www/themes/pfsense_ng_fs/loader.js index be5c2e4..7838c97 100644 --- a/usr/local/www/themes/pfsense_ng_fs/loader.js +++ b/usr/local/www/themes/pfsense_ng_fs/loader.js @@ -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 "); + jQuery(existing[i]).appendTo('#col' + addCols ); // append onLoad contents + } + noCols = maxCols; + for(var i=noCols; i 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 "); + else + jQuery('#col' + (tmpReplace).toString() ).after("
"); + 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("
"); 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('

\"Click
 Add column 
\"Click
 Delete column


').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("
"); 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('Maximum number of columns reached').show().delay(1000).fadeOut(1000); + connectColumns(); } + else + jQuery('#columnWarningText').html('Maximum number of columns reached for the current window size').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('Minimum number of columns reached').show().delay(1000).fadeOut(1000); - } + else + jQuery('#columnWarningText').html('Minimum number of columns reached for the current window size').show().delay(1000).fadeOut(1000); }); }); //]]> -- cgit v1.1