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

Merge pull request #819 from CharlieMarshall/responsive

Browse Source 
make dashboard responsive (theme pfsense_ng_fs)
This commit is contained in:
Renato Botelho 2013-10-15 06:10:31 -07:00
commit 09dfec24c6
1 changed files with 161 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -5,7 +5,8 @@ var entrance = '';
var cond = '';
// BROWSER?
if (browser == '') {
if (browser == '')
{
if (navigator.appName.indexOf('Microsoft') != -1)
browser = 'IE'
else if (navigator.appName.indexOf('Netscape') != -1)
@ -13,18 +14,18 @@ if (browser == '') {
else
browser = 'IE';
}
if (version == '') {
if (version == '')
{
version= navigator.appVersion;
paren = version.indexOf('(');
whole_version = navigator.appVersion.substring(0,paren-1);
version = parseInt(whole_version);
}
if (browser == 'IE' && version < 7) {
if (browser == 'IE' && version < 7)
document.write('<script type="text/javascript" src="/themes/pfsense_ng/javascript/ie7/ie7-standard-p.js"></script>');
}
document.write('<script type="text/javascript" src="/themes/pfsense_ng/javascript/niftyjsCode.js"></script>');
document.write('<script type="text/javascript" src="/themes/pfsense_ng/javascript/niftyjsCode.js"></script>');
///////////////////////////////////////////
// jQuery code for columns / widgets part 1
@ -39,8 +40,105 @@ 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
function correctWidgetDisplay(noCols){
///////////////////////////////////////////
// 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() + '%';
@ -49,18 +147,22 @@ function correctWidgetDisplay(noCols){
}
// function to insert a new column we can place content into (from saved state)
function printColumn(newNum){
function printColumn(newNum)
{
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 createColumn(colPos){
// function to create the columns
function createColumn(colPos)
{
if (colpos == "col3" && printed3 == false){
printColumn(3);
printed3=true;
@ -94,10 +196,30 @@ 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
jQuery(document).ready(function () {
jQuery(document).ready(function ()
{
var hwindow = '';
hwindow = (jQuery(window).height()-35);
// Force the size dropdown menu
@ -107,14 +229,27 @@ 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 ){
jQuery('#addCol').click(function()
{
var maxCols = maxColsToDisplay();
if( (noCols < maxCols) && (noCols < 10) )
{
var colAfter = noCols;
noCols++;
@ -122,18 +257,17 @@ 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 ){
jQuery('#delCol').click(function()
{
if( noCols > 1 )
{
var colToDel = noCols;
noCols -= 1;
@ -147,12 +281,11 @@ jQuery(document).ready(function () {
// append deleted columns content to preceeding column
jQuery(colContent).appendTo('#col' + noCols );
showSave();
}
else{
jQuery('#columnWarningText').html('<b>Minimum number of columns reached</b>').show().delay(1000).fadeOut(1000);
showSave();
}
else
jQuery('#columnWarningText').html('<b>Minimum number of columns reached for the current window size</b>').show().delay(1000).fadeOut(1000);
});
});
//]]>