public/javascripts/adminica_ui.js
/*
* Adminica UI
*
* Copyright (c) 2010 Tricycle Interactive
*
* http://www.tricycle.ie
*
* This file configures all the different jQuery scripts used in the Adminica Admin template. Links to the scripts can be found at the beginning of each function
*
*/
$(function() {
$("#internship_field_tokens").tokenInput("/fields.json", {
crossDomain: false
});
$("#internship_language_tokens").tokenInput("/languages.json", {
crossDomain: false
});
//jQuery UI elements (more info can be found at http://jqueryui.com/demos/)
// Sidenav Accordion Config
$( "ul#accordion" ).accordion({
collapsible: true,
active:false,
header: 'li a.top_level',
autoHeight:false,
icons:false
});
// Top Nav Dropdown Accordion Config
$( "ul.dropdown" ).accordion({
collapsible: true,
active:false,
header: 'li a.has_slide', // this is the element that will be clicked to activate the accordion
autoHeight:false,
event: 'mousedown',
icons:false
});
// Content Box Toggle Config
$("a.toggle").click(function(){
$(this).toggleClass("toggle_closed").next().slideToggle("slow");
return false; //Prevent the browser jump to the link anchor
});
// Content Box Tabs Config
$( ".tabs" ).tabs({
fx: {opacity: 'toggle', duration: 'slow'}
});
$( ".side_tabs" ).tabs({
fx: {opacity: 'toggle', duration: 'slow', height:'auto'}
});
// Content Box Accordion Config
$( ".content_accordion" ).accordion({
collapsible: true,
active:false,
header: 'h3.bar', // this is the element that will be clicked to activate the accordion
autoHeight:false,
event: 'mousedown',
icons:false,
animated: true
});
// Sortable Content Boxes Config
$( ".main_container" ).sortable({
handle:'.grabber', // the element which is used to 'grab' the item
items:'div.box', // the item to be sorted when grabbed!
opacity:0.8,
revert:true,
tolerance:'pointer',
helper:'original',
forceHelperSize:true,
placeholder: 'dashed_placeholder',
forcePlaceholderSize:true
});
// Sortable Accordion Items Config
$( ".content_accordion" ).sortable({
handle:'a.handle',
axis: 'y', // the items can only be sorted along the y axis
revert:true,
tolerance:'pointer',
forcePlaceholderSize:true
});
// Input Datepicker Config
$( ".datepicker" ).datepicker({ dateFormat: 'd M yy' });; // the time format which will be input to the datepicker field upon selection. more info on formatting here: http://docs.jquery.com/UI/Datepicker/formatDate
// input Slider Config
$( ".slider" ).slider(); // creates a simple slider with default settings
// input Range Slider Config
$( ".slider_range" ).slider({
range: true, // creates a range slider
min: 0,
max: 500,
values: [ 75, 300 ],
slide: function( event, ui ) {
$( "#amount" ).val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] );
}
});
$( "#amount" ).val( "$" + $( "#slider_range" ).slider( "values", 0 ) +
" - $" + $( "#slider_range" ).slider( "values", 1 ) );
// Dialog Config
$( "#dialog" ).dialog({
autoOpen: false,
show: "fade",
hide: "fade",
modal: true
});
$( "#opener" ).click(function() {
$( "#dialog" ).dialog( "open" ); // the #dialog element activates the modal box specified above
return false;
});
//Progress Bar Config
$( "#progressbar" ).progressbar({
value: 25
});
// Dismiss alert box
$(".alert").click(function(){
$(this).fadeOut('slow');
});
// target nav items with a dropdown for styling.
$('ul.dropdown').parent().addClass('has_dropdown');
// wizard
$('.wizard_steps ul li a').click(function(){
$('.wizard_steps ul li').removeClass('current');
$(this).parent('li').addClass('current');
var step = $(this).attr('href');
var step_num = $(this).attr('href').replace('#step_','');
var prog_val = (step_num*25);
$( "#progressbar").progressbar({ value: prog_val });
$('.wizard_content').children().hide();
$('.wizard_content').children(step).fadeIn();
return false;
});
$('button.next_step').click(function(){
var step = $(this).attr('id');
var hash_step = ('#'+step);
var step_num = $(this).attr('id').replace('step_','');
var prog_val = (step_num*25);
$( "#progressbar").progressbar({ value: prog_val });
$('.wizard_steps ul li').removeClass('current');
$('a[href='+ hash_step +']').parent().addClass('current');
$('.wizard_content').children().hide();
$('.wizard_content').children(hash_step).fadeIn();
return false;
});
// Other Scripts
// Uniform Config (more info can found at http://pixelmatrixdesign.com/uniform/)
$( "select, input:checkbox, input:radio, input:file").uniform();
// Tipsy Top Config (more info found at http://onehackoranother.com/projects/jquery/tipsy/)
$('[title]').tipsy({
fade: true, // fade tooltips in/out?
fallback: '', // fallback text to use when no tooltip text
gravity: 's', // gravity
opacity: 1, // opacity of tooltip
title: 'title', // attribute/callback containing tooltip text
trigger: 'hover' // how tooltip is triggered - hover | focus | manual
});
// Tipsy Side Config
$('input[title]').tipsy({
trigger: 'focus',
offset:'5',
gravity: 'w'
});
// focus on first field in form
//$("input[type='text']:first", document.forms[0]).focus();
// iOS Device Touch Config (more info can be found at http://old.nabble.com/jQuery-UI-Support-on-the-iPhone-td22011162s27240.html)
$('.main_container').sortable();
$('.grabber').addTouch();
$('ul.content_accordion').sortable();
$('a.handle').addTouch();
$('.ui-slider-handle').addTouch();
// DataTables Config (more info can be found at http://www.datatables.net/)
var oTable = $('.datatable').dataTable( {
"bJQueryUI": true,
"sScrollX": "",
"bSortClasses": false,
"aaSorting": [[0,'asc']],
"bAutoWidth": true,
"bInfo": true,
"sScrollY": "100%",
"sScrollX": "100%",
"bScrollCollapse": true,
"sPaginationType": "full_numbers",
"bRetrieve": true
} );
$(window).bind('resize', function () {
oTable.fnAdjustColumnSizing();
} );
// DataTables Config - this reloads dataTables when it is placed in a hidden tab
$(".tabs").tabs( {
"select": function(event, ui) {
$('.tabs div.dataTables_scroll').css({
"visibility":"hidden"
});
},
"show": function(event, ui) {
var oTable = $('div.dataTables_scrollBody > table', ui.panel).dataTable();
if ( oTable.length > 0 ) {
oTable.fnAdjustColumnSizing();
$(".tabs div.dataTables_scroll").css({
"display":"none",
"visibility":"visible"
}).fadeIn("slow");
}
}
} );
// DataTables Config - this reloads dataTables when it is placed in a closed accordion
$( ".content_accordion" ).accordion( {
"change": function(event, ui) {
var oTable = $('div.dataTables_scrollBody > table', ui.panel).dataTable();
if ( oTable.length > 0 ) {
oTable.fnAdjustColumnSizing();
$(".content_accordion div.dataTables_scroll").css({
"display":"none",
"visibility":"visible"
}).show();
}
if ( oTable.length > 0 ) {
oTable.fnAdjustColumnSizing();
}
}
} );
// static tables alternating rows
$('table.static tr:even').addClass("even")
// FileTree Config (more info can be found at http://abeautifulsite.net/blog/2008/03/jquery-file-tree/)
$('#file_tree').fileTree({
root: '/var/www/vhosts/tricycle.ie/httpdocs/adminica/file_tree/',
script: '../../../js/jqueryFileTree/jqueryFileTree.php',
loadMessage:'Loading...' }, function(file) {
alert(file);
});
//FancyBox Config (more info can be found at http://www.fancybox.net/)
$(".gallery ul li a").fancybox({
'overlayColor':'#000'
});
$("a img.fancy").fancybox();
//This configures the iPhone style Contacts display)
$('#slider_list').sliderNav({height:'500'});
//Slide to top link
$().UItoTop({ easingType: 'easeOutQuart' });
//Fullcalendar
$('#calendar').fullCalendar({
firstDay:'1',
weekMode:'liquid',
aspectRatio: '1.5',
theme:true,
selectable:true,
editable:true,
draggable:true,
droppable:true,
timeFormat:'H:mm',
axisFormat:'H:mm',
columnFormat:{
month: 'ddd', // Mon
week: 'ddd dS', // Mon 9/7
day: 'dddd dS MMMM' // Monday 9/7
},
titleFormat:{
month: 'MMMM yyyy', // September 2009
week: "MMM d[ yyyy]{ 'to'[ MMM] d, yyyy}", // Sep 7 - 13 2009
day: 'ddd, MMMM d, yyyy' // Tuesday, Sep 8, 2009
},
allDayText:'All Day',
header:{
left: 'prev title next, today',
center: '',
right: 'agendaWeek,agendaDay,month'
},
eventSources: [
// your event source
{
events: [ // put the array in the `events` property
{
title : 'Company AGM',
start : '2011-04-03',
className:'calendar_green'
},
{
title : 'Business Trip',
start : '2011-04-15',
end : '2011-04-20',
className:'calendar_blue'
},
{
title : 'Day off',
start : '2011-04-08 12:30:00',
className:'calendar_red'
}
]
},
{
url: 'https://www.google.com/calendar/feeds/nueoipsjhgm857gpojq5563cfo@group.calendar.google.com/public/basic',
className:'calendar_magenta'
},
{
url: 'http://www.google.com/calendar/feeds/usa__en%40holiday.calendar.google.com/public/basic',
className: 'calendar_navy'
}
],
drop: function(date, allDay) { // this function is called when something is dropped
// retrieve the dropped element's stored Event Object
var originalEventObject = $(this).data('eventObject');
// we need to copy it, so that multiple events don't have a reference to the same object
var copiedEventObject = $.extend({}, originalEventObject);
// assign it the date that was reported
copiedEventObject.start = date;
copiedEventObject.allDay = allDay;
// render the event on the calendar
// the last `true` argument determines if the event "sticks" (http://arshaw.com/fullcalendar/docs/event_rendering/renderEvent/)
$('#calendar').fullCalendar('renderEvent', copiedEventObject, true);
// is the "remove after drop" checkbox checked?
if ($('#drop-remove').is(':checked')) {
// if so, remove the element from the "Draggable Events" list
$(this).remove();
}
}
});
$('ul#calendar_drag_list li a').each(function() {
// create an Event Object (http://arshaw.com/fullcalendar/docs/event_data/Event_Object/)
// it doesn't need to have a start or end
var eventObject = {
title: $.trim($(this).text()), // use the element's text as the event title
className: 'calendar_black'
};
// store the Event Object in the DOM element so we can get to it later
$(this).data('eventObject', eventObject);
// make the event draggable using jQuery UI
$(this).draggable({
zIndex: 999,
revert: true, // will cause the event to go back to its
revertDuration: 5 // original position after the drag
});
});
// Graphs and Charts - Flot jQuery
var line_data = [];
for (var i = 0; i < 14; i += 0.2)
line_data.push([i, Math.sin(i)+8]);
var bar_data = [[0, 5], [2, 7], [4, 11], [6, 1], [8, 8], [10, 7], [12, 9], [14, 3]];
var bar_data_2 = [[1, 3], [3, 8], [5, 5], [7, 13], [9, 8], [11, 5], [13, 8], [15, 5]];
// a null signifies separate line segments
var point_data = [[0, 12], [7, 12], [8, 2.5], [12, 2.5], [15, 7]];
var extra_data_1 = [];
for (var i = -20; i < 20; i += 0.4)
extra_data_1.push([i, Math.tan(i)+(i*5)]);
var extra_data_2 = [[1988, 483994], [1989, 479060], [1991, 401949], [1993, 402375], [1994, 377867], [1996, 337946], [1997, 336185], [1998, 328611], [2000, 342172], [2001, 344932], [2003, 440813], [2004, 480451], [2006, 528692]];
var pie_data = [];
var series = Math.floor(Math.random()*5)+1;
for( var i = 0; i<series; i++)
{
pie_data[i] = { label: "Series"+(i+1), data: Math.floor(Math.random()*100)+1 }
}
var pie_data_2 = [
{ label: "Slice 1", data: [[1,117]], color: '#122b45'},
{ label: "Slice 2", data: [[1,30]], color: '#064792'},
{ label: "Slice 3", data: [[1,44]], color: '#4C5766'},
{ label: "Slice 4", data: [[1,90]], color: '#9e253b'},
{ label: "Slice 5", data: [[1,70]], color: '#8d579a'},
{ label: "Slice 6", data: [[1,80]], color: '#2b4356'}
];
var adminica_grad_black = { colors: ["#4C5766 ", "#313841 "] };
var adminica_grad_blue = { colors: ["#1C5EA0 ", "#064792 "] };
var adminica_grad_navy = { colors: ["#2b4356 ", "#122b45 "] };
var adminica_grad_red = { colors: ["#9e253b ", "#7C1F30 "] };
var adminica_grad_green = { colors: ["#3d8336 ", "#277423 "] };
var adminica_grad_magenta = { colors: ["#9b6ca6 ", "#8d579a "] };
var adminica_grad_brown = { colors: ["#53453e ", "#3b2e28 "] };
var adminica_grad_grey = { colors: ["#D0D6DA", "#4C5766"] };
var adminica_black = "#4C5766 ";
var adminica_blue = "#1C5EA0 ";
var adminica_navy = "#2b4356 ";
var adminica_red = "#9e253b ";
var adminica_green = "#3d8336";
var adminica_magenta = "#9b6ca6";
var adminica_brown = "#53453e";
$.plot($("#flot_pie"), pie_data_2,
{
series: {
pie: {
show: true
},
grid: {
hoverable: true,
clickable: true
}
}
});
$.plot($("#flot_pie_2"), pie_data_2,
{
series: {
pie: {
innerRadius: 0.75,
show: true
} ,
grid: {
hoverable: true,
clickable: true
}
}
});
$.plot($("#flot_bar"),
[
{
shadowSize: 25,
label:'Bar Chart 1',
color:adminica_magenta,
data: bar_data,
bars: {
show: true,
fill: true,
fillColor: adminica_grad_magenta,
lineWidth: 0,
border:false
}
},
{
shadowSize: 25,
label:'Bar Chart 2',
color:'#4C5766',
data: bar_data_2,
bars: {
show: true,
fill: true,
fillColor: adminica_grad_black,
lineWidth: 0,
border:false
}
}
],
{
grid:{
show: true,
aboveData: false,
backgroundColor: { colors: ["#fff", "#eee"] },
labelMargin:15,
//axisMargin: number
//markings: array of markings or (fn: axes -> array of markings)
borderWidth: 1,
borderColor: '#cccccc',
//minBorderMargin: number or null
clickable: true,
hoverable: true,
autoHighlight: true,
mouseActiveRadius: 10
},
legend: {
show: true,
//labelFormatter: null or (fn: string, series object -> string)
labelBoxBorderColor: '#fff',
noColumns: 5,
//position: "ne" or "nw" or "se" or "sw"
margin: 10,
backgroundColor: '#fff'
//backgroundOpacity: number between 0 and 1
//container: "#legend_holder"
}
}
);
$.plot($("#flot_line"),
[
{
shadowSize: 10,
label:'Line Chart 1',
color:adminica_blue,
data: line_data,
lines: {
show: true,
fill: true,
fillColor: adminica_grad_grey,
lineWidth: 4
}
},
{
shadowSize: 10,
label:'Line Chart 2',
color:adminica_red,
data: bar_data,
lines: {
show: true,
fill: false,
lineWidth: 4
},
points: {
show: true,
fill: false,
lineWidth: 2
}
}
],
{
grid:{
show: true,
aboveData: false,
backgroundColor: { colors: ["#fff", "#eee"] },
labelMargin:15,
//axisMargin: number
//markings: array of markings or (fn: axes -> array of markings)
borderWidth: 1,
borderColor: '#cccccc',
//minBorderMargin: number or null
clickable: true,
hoverable: true,
autoHighlight: true,
mouseActiveRadius: 10
},
legend: {
show: true,
//labelFormatter: null or (fn: string, series object -> string)
labelBoxBorderColor: '#fff',
noColumns: 5,
//position: "ne" or "nw" or "se" or "sw"
margin: 10,
backgroundColor: '#fff'
//backgroundOpacity: number between 0 and 1
//container: "#legend_holder"
}
}
);
$.plot($("#flot_points"),
[
{
shadowSize: 10,
label:'Points Chart',
color:adminica_blue,
data: extra_data_2,
points: {
show: true,
fill: true,
fillColor: '#ffffff',
lineWidth: 3
},
lines: {
show: true,
fill: true,
fillColor: adminica_grad_black,
lineWidth: 5
}
}
],
{
grid:{
show: true,
aboveData: false,
backgroundColor: { colors: ["#fff", "#eee"] },
labelMargin:15,
//axisMargin: number
//markings: array of markings or (fn: axes -> array of markings)
borderWidth: 1,
borderColor: '#cccccc',
//minBorderMargin: number or null
clickable: true,
hoverable: true,
autoHighlight: true,
mouseActiveRadius: 10
},
legend: {
show: true,
//labelFormatter: null or (fn: string, series object -> string)
labelBoxBorderColor: '#fff',
noColumns: 5,
//position: "ne" or "nw" or "se" or "sw"
margin: 10,
backgroundColor: '#fff'
//backgroundOpacity: number between 0 and 1
//container: "#legend_holder"
}
}
);
// resize the charts when the window resizes
$(window).resize(function() {
$('#flot_bar').resize();
$('#flot_line').resize();
$('#flot_points').resize();
$('#flot_pie').resize();
});
});