1659 lines
41 KiB
JavaScript
1659 lines
41 KiB
JavaScript
|
$(document).ready(function(){
|
||
|
|
|
||
|
|
/* ---------- Login Box Styles ---------- */
|
||
|
|
if($(".login-box")) {
|
||
|
|
|
||
|
|
$("#username").focus(function() {
|
||
|
|
|
||
|
|
$(this).parent(".input-prepend").addClass("input-prepend-focus");
|
||
|
|
|
||
|
|
});
|
||
|
|
|
||
|
|
$("#username").focusout(function() {
|
||
|
|
|
||
|
|
$(this).parent(".input-prepend").removeClass("input-prepend-focus");
|
||
|
|
|
||
|
|
});
|
||
|
|
|
||
|
|
$("#password").focus(function() {
|
||
|
|
|
||
|
|
$(this).parent(".input-prepend").addClass("input-prepend-focus");
|
||
|
|
|
||
|
|
});
|
||
|
|
|
||
|
|
$("#password").focusout(function() {
|
||
|
|
|
||
|
|
$(this).parent(".input-prepend").removeClass("input-prepend-focus");
|
||
|
|
|
||
|
|
});
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
/* ---------- Add class .active to current link ---------- */
|
||
|
|
$('ul.main-menu li a').each(function(){
|
||
|
|
|
||
|
|
if($(this).hasClass('submenu')) {
|
||
|
|
|
||
|
|
if($($(this))[0].href==String(window.location)) {
|
||
|
|
|
||
|
|
$(this).parent().parent().parent().addClass('active');
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
} else {
|
||
|
|
|
||
|
|
if($($(this))[0].href==String(window.location)) {
|
||
|
|
|
||
|
|
$(this).parent().addClass('active');
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
});
|
||
|
|
|
||
|
|
/* ---------- Acivate Functions ---------- */
|
||
|
|
$("#overlay").delay(1250).fadeOut(500);
|
||
|
|
template_functions();
|
||
|
|
init_masonry();
|
||
|
|
sparkline_charts();
|
||
|
|
charts();
|
||
|
|
calendars();
|
||
|
|
growlLikeNotifications();
|
||
|
|
widthFunctions();
|
||
|
|
circle_progess();
|
||
|
|
|
||
|
|
|
||
|
|
});
|
||
|
|
|
||
|
|
/* ---------- Masonry Gallery ---------- */
|
||
|
|
|
||
|
|
function init_masonry(){
|
||
|
|
|
||
|
|
if($('.masonry-gallery')){
|
||
|
|
|
||
|
|
var $container = $('.masonry-gallery');
|
||
|
|
|
||
|
|
var gutter = 6;
|
||
|
|
var min_width = 250;
|
||
|
|
$container.imagesLoaded( function(){
|
||
|
|
$container.masonry({
|
||
|
|
itemSelector : '.masonry-thumb',
|
||
|
|
gutterWidth: gutter,
|
||
|
|
isAnimated: true,
|
||
|
|
columnWidth: function( containerWidth ) {
|
||
|
|
var num_of_boxes = (containerWidth/min_width | 0);
|
||
|
|
|
||
|
|
var box_width = (((containerWidth - (num_of_boxes-1)*gutter)/num_of_boxes) | 0) ;
|
||
|
|
|
||
|
|
if (containerWidth < min_width) {
|
||
|
|
box_width = containerWidth;
|
||
|
|
}
|
||
|
|
|
||
|
|
$('.masonry-thumb').width(box_width);
|
||
|
|
|
||
|
|
return box_width;
|
||
|
|
}
|
||
|
|
});
|
||
|
|
});
|
||
|
|
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
/* ---------- Numbers Sepparator ---------- */
|
||
|
|
|
||
|
|
function numberWithCommas(x) {
|
||
|
|
x = x.toString();
|
||
|
|
var pattern = /(-?\d+)(\d{3})/;
|
||
|
|
while (pattern.test(x))
|
||
|
|
x = x.replace(pattern, "$1.$2");
|
||
|
|
return x;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* ---------- Template Functions ---------- */
|
||
|
|
|
||
|
|
function template_functions(){
|
||
|
|
|
||
|
|
|
||
|
|
/* ---------- Submenu ---------- */
|
||
|
|
|
||
|
|
$('.dropmenu').click(function(e){
|
||
|
|
|
||
|
|
e.preventDefault();
|
||
|
|
|
||
|
|
$(this).parent().find('ul').slideToggle();
|
||
|
|
|
||
|
|
});
|
||
|
|
|
||
|
|
/* ---------- ToDo List Action Buttons ---------- */
|
||
|
|
|
||
|
|
if($(".todo-list")) {
|
||
|
|
|
||
|
|
$(".todo-remove").click(function(){
|
||
|
|
|
||
|
|
$(this).parent().parent().fadeTo("slow", 0.00, function(){ //fade
|
||
|
|
$(this).slideUp("slow", function() { //slide up
|
||
|
|
$(this).remove(); //then remove from the DOM
|
||
|
|
});
|
||
|
|
});
|
||
|
|
|
||
|
|
|
||
|
|
return false;
|
||
|
|
});
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
/* ---------- Skill Bars ---------- */
|
||
|
|
|
||
|
|
if($(".skill-bar")){
|
||
|
|
|
||
|
|
$(".meter > span").each(function() {
|
||
|
|
$(this)
|
||
|
|
.data("origWidth", $(this).width())
|
||
|
|
.width(0)
|
||
|
|
.animate({
|
||
|
|
width: $(this).data("origWidth")
|
||
|
|
}, 3000);
|
||
|
|
});
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
/* ---------- Disable moving to top ---------- */
|
||
|
|
$('a[href="#"][data-top!=true]').click(function(e){
|
||
|
|
e.preventDefault();
|
||
|
|
});
|
||
|
|
|
||
|
|
/* ---------- Text editor ---------- */
|
||
|
|
if($('.cleditor')) {
|
||
|
|
|
||
|
|
$('.cleditor').cleditor();
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
/* ---------- Datapicker ---------- */
|
||
|
|
if($('.datepicker')) {
|
||
|
|
|
||
|
|
$('.datepicker').datepicker();
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
/* ---------- Notifications ---------- */
|
||
|
|
$('.noty').click(function(e){
|
||
|
|
e.preventDefault();
|
||
|
|
var options = $.parseJSON($(this).attr('data-noty-options'));
|
||
|
|
noty(options);
|
||
|
|
});
|
||
|
|
|
||
|
|
/* ---------- Uniform ---------- */
|
||
|
|
$("input:checkbox, input:radio, input:file").not('[data-no-uniform="true"],#uniform-is-ajax').uniform();
|
||
|
|
|
||
|
|
/* ---------- Choosen ---------- */
|
||
|
|
$('[data-rel="chosen"],[rel="chosen"]').chosen();
|
||
|
|
|
||
|
|
/* ---------- Tabs ---------- */
|
||
|
|
$('#myTab a:first').tab('show');
|
||
|
|
$('#myTab a').click(function (e) {
|
||
|
|
e.preventDefault();
|
||
|
|
$(this).tab('show');
|
||
|
|
});
|
||
|
|
|
||
|
|
/* ---------- Makes elements soratble, elements that sort need to have id attribute to save the result ---------- */
|
||
|
|
$('.sortable').sortable({
|
||
|
|
revert:true,
|
||
|
|
cancel:'.btn,.box-content,.nav-header',
|
||
|
|
update:function(event,ui){
|
||
|
|
//line below gives the ids of elements, you can make ajax call here to save it to the database
|
||
|
|
//console.log($(this).sortable('toArray'));
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
/* ---------- Tooltip ---------- */
|
||
|
|
$('[rel="tooltip"],[data-rel="tooltip"]').tooltip({"placement":"bottom",delay: { show: 400, hide: 200 }});
|
||
|
|
|
||
|
|
/* ---------- Popover ---------- */
|
||
|
|
$('[rel="popover"],[data-rel="popover"]').popover();
|
||
|
|
|
||
|
|
/* ---------- File Manager ---------- */
|
||
|
|
var elf = $('.file-manager').elfinder({
|
||
|
|
url : 'misc/elfinder-connector/connector.php' // connector URL (REQUIRED)
|
||
|
|
}).elfinder('instance');
|
||
|
|
|
||
|
|
/* ---------- Star Rating ---------- */
|
||
|
|
$('.raty').raty({
|
||
|
|
score : 4 //default stars
|
||
|
|
});
|
||
|
|
|
||
|
|
/* ---------- Uploadify ---------- */
|
||
|
|
$('#file_upload').uploadify({
|
||
|
|
'swf' : 'misc/uploadify.swf',
|
||
|
|
'uploader' : 'misc/uploadify.php'
|
||
|
|
// Put your options here
|
||
|
|
});
|
||
|
|
|
||
|
|
/* ---------- Fullscreen ---------- */
|
||
|
|
$('#toggle-fullscreen').button().click(function () {
|
||
|
|
var button = $(this), root = document.documentElement;
|
||
|
|
if (!button.hasClass('active')) {
|
||
|
|
$('#thumbnails').addClass('modal-fullscreen');
|
||
|
|
if (root.webkitRequestFullScreen) {
|
||
|
|
root.webkitRequestFullScreen(
|
||
|
|
window.Element.ALLOW_KEYBOARD_INPUT
|
||
|
|
);
|
||
|
|
} else if (root.mozRequestFullScreen) {
|
||
|
|
root.mozRequestFullScreen();
|
||
|
|
}
|
||
|
|
} else {
|
||
|
|
$('#thumbnails').removeClass('modal-fullscreen');
|
||
|
|
(document.webkitCancelFullScreen ||
|
||
|
|
document.mozCancelFullScreen ||
|
||
|
|
$.noop).apply(document);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
/* ---------- Datable ---------- */
|
||
|
|
$('.datatable').dataTable({
|
||
|
|
"sDom": "<'row-fluid'<'span6'l><'span6'f>r>t<'row-fluid'<'span12'i><'span12 center'p>>",
|
||
|
|
"sPaginationType": "bootstrap",
|
||
|
|
"oLanguage": {
|
||
|
|
"sLengthMenu": "_MENU_ records per page"
|
||
|
|
}
|
||
|
|
} );
|
||
|
|
$('.btn-close').click(function(e){
|
||
|
|
e.preventDefault();
|
||
|
|
$(this).parent().parent().parent().fadeOut();
|
||
|
|
});
|
||
|
|
$('.btn-minimize').click(function(e){
|
||
|
|
e.preventDefault();
|
||
|
|
var $target = $(this).parent().parent().next('.box-content');
|
||
|
|
if($target.is(':visible')) $('i',$(this)).removeClass('icon-chevron-up').addClass('icon-chevron-down');
|
||
|
|
else $('i',$(this)).removeClass('icon-chevron-down').addClass('icon-chevron-up');
|
||
|
|
$target.slideToggle();
|
||
|
|
});
|
||
|
|
$('.btn-setting').click(function(e){
|
||
|
|
e.preventDefault();
|
||
|
|
$('#myModal').modal('show');
|
||
|
|
});
|
||
|
|
|
||
|
|
|
||
|
|
/* ---------- Progress ---------- */
|
||
|
|
|
||
|
|
$(".simpleProgress").progressbar({
|
||
|
|
value: 89
|
||
|
|
});
|
||
|
|
|
||
|
|
$(".progressAnimate").progressbar({
|
||
|
|
value: 1,
|
||
|
|
create: function() {
|
||
|
|
$(".progressAnimate .ui-progressbar-value").animate({"width":"100%"},{
|
||
|
|
duration: 10000,
|
||
|
|
step: function(now){
|
||
|
|
$(".progressAnimateValue").html(parseInt(now)+"%");
|
||
|
|
},
|
||
|
|
easing: "linear"
|
||
|
|
})
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
$(".progressUploadAnimate").progressbar({
|
||
|
|
value: 1,
|
||
|
|
create: function() {
|
||
|
|
$(".progressUploadAnimate .ui-progressbar-value").animate({"width":"100%"},{
|
||
|
|
duration: 20000,
|
||
|
|
easing: 'linear',
|
||
|
|
step: function(now){
|
||
|
|
$(".progressUploadAnimateValue").html(parseInt(now*40.96)+" Gb");
|
||
|
|
},
|
||
|
|
complete: function(){
|
||
|
|
$(".progressUploadAnimate + .field_notice").html("<span class='must'>Upload Finished</span>");
|
||
|
|
}
|
||
|
|
})
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
if($(".taskProgress")) {
|
||
|
|
|
||
|
|
$(".taskProgress").each(function(){
|
||
|
|
|
||
|
|
var endValue = parseInt($(this).html());
|
||
|
|
|
||
|
|
$(this).progressbar({
|
||
|
|
value: endValue
|
||
|
|
});
|
||
|
|
|
||
|
|
$(this).parent().find(".percent").html(endValue + "%");
|
||
|
|
|
||
|
|
});
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
if($(".progressBarValue")) {
|
||
|
|
|
||
|
|
$(".progressBarValue").each(function(){
|
||
|
|
|
||
|
|
var endValueHTML = $(this).find(".progressCustomValueVal").html();
|
||
|
|
|
||
|
|
var endValue = parseInt(endValueHTML);
|
||
|
|
|
||
|
|
$(this).find(".progressCustomValue").progressbar({
|
||
|
|
|
||
|
|
value: 1,
|
||
|
|
create: function() {
|
||
|
|
$(this).find(".ui-progressbar-value").animate({"width": endValue + "%"},{
|
||
|
|
duration: 5000,
|
||
|
|
step: function(now){
|
||
|
|
|
||
|
|
$(this).parent().parent().find(".progressCustomValueVal").html(parseInt(now)+"%");
|
||
|
|
},
|
||
|
|
easing: "linear"
|
||
|
|
})
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
});
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
/* ---------- Custom Slider ---------- */
|
||
|
|
$(".sliderSimple").slider();
|
||
|
|
|
||
|
|
$(".sliderMin").slider({
|
||
|
|
range: "min",
|
||
|
|
value: 180,
|
||
|
|
min: 1,
|
||
|
|
max: 700,
|
||
|
|
slide: function( event, ui ) {
|
||
|
|
$( ".sliderMinLabel" ).html( "$" + ui.value );
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
$(".sliderMin-1").slider({
|
||
|
|
range: "min",
|
||
|
|
value: 50,
|
||
|
|
min: 1,
|
||
|
|
max: 700,
|
||
|
|
slide: function( event, ui ) {
|
||
|
|
$( ".sliderMin1Label" ).html( "$" + ui.value );
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
$(".sliderMin-2").slider({
|
||
|
|
range: "min",
|
||
|
|
value: 100,
|
||
|
|
min: 1,
|
||
|
|
max: 700,
|
||
|
|
slide: function( event, ui ) {
|
||
|
|
$( ".sliderMin2Label" ).html( "$" + ui.value );
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
$(".sliderMin-3").slider({
|
||
|
|
range: "min",
|
||
|
|
value: 150,
|
||
|
|
min: 1,
|
||
|
|
max: 700,
|
||
|
|
slide: function( event, ui ) {
|
||
|
|
$( ".sliderMin3Label" ).html( "$" + ui.value );
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
$(".sliderMin-4").slider({
|
||
|
|
range: "min",
|
||
|
|
value: 250,
|
||
|
|
min: 1,
|
||
|
|
max: 700,
|
||
|
|
slide: function( event, ui ) {
|
||
|
|
$( ".sliderMin4Label" ).html( "$" + ui.value );
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
$(".sliderMin-5").slider({
|
||
|
|
range: "min",
|
||
|
|
value: 350,
|
||
|
|
min: 1,
|
||
|
|
max: 700,
|
||
|
|
slide: function( event, ui ) {
|
||
|
|
$( ".sliderLabel" ).html( "$" + ui.value );
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
$(".sliderMin-6").slider({
|
||
|
|
range: "min",
|
||
|
|
value: 450,
|
||
|
|
min: 1,
|
||
|
|
max: 700,
|
||
|
|
slide: function( event, ui ) {
|
||
|
|
$( ".sliderLabel" ).html( "$" + ui.value );
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
$(".sliderMin-7").slider({
|
||
|
|
range: "min",
|
||
|
|
value: 550,
|
||
|
|
min: 1,
|
||
|
|
max: 700,
|
||
|
|
slide: function( event, ui ) {
|
||
|
|
$( ".sliderLabel" ).html( "$" + ui.value );
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
$(".sliderMin-8").slider({
|
||
|
|
range: "min",
|
||
|
|
value: 650,
|
||
|
|
min: 1,
|
||
|
|
max: 700,
|
||
|
|
slide: function( event, ui ) {
|
||
|
|
$( ".sliderLabel" ).html( "$" + ui.value );
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
|
||
|
|
$(".sliderMax").slider({
|
||
|
|
range: "max",
|
||
|
|
value: 280,
|
||
|
|
min: 1,
|
||
|
|
max: 700,
|
||
|
|
slide: function( event, ui ) {
|
||
|
|
$( ".sliderMaxLabel" ).html( "$" + ui.value );
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
$( ".sliderRange" ).slider({
|
||
|
|
range: true,
|
||
|
|
min: 0,
|
||
|
|
max: 500,
|
||
|
|
values: [ 192, 470 ],
|
||
|
|
slide: function( event, ui ) {
|
||
|
|
$( ".sliderRangeLabel" ).html( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] );
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
$( "#sliderVertical-1" ).slider({
|
||
|
|
orientation: "vertical",
|
||
|
|
range: "min",
|
||
|
|
min: 0,
|
||
|
|
max: 100,
|
||
|
|
value: 60,
|
||
|
|
});
|
||
|
|
|
||
|
|
$( "#sliderVertical-2" ).slider({
|
||
|
|
orientation: "vertical",
|
||
|
|
range: "min",
|
||
|
|
min: 0,
|
||
|
|
max: 100,
|
||
|
|
value: 40,
|
||
|
|
});
|
||
|
|
|
||
|
|
$( "#sliderVertical-3" ).slider({
|
||
|
|
orientation: "vertical",
|
||
|
|
range: "min",
|
||
|
|
min: 0,
|
||
|
|
max: 100,
|
||
|
|
value: 30,
|
||
|
|
});
|
||
|
|
|
||
|
|
$( "#sliderVertical-4" ).slider({
|
||
|
|
orientation: "vertical",
|
||
|
|
range: "min",
|
||
|
|
min: 0,
|
||
|
|
max: 100,
|
||
|
|
value: 15,
|
||
|
|
});
|
||
|
|
|
||
|
|
$( "#sliderVertical-5" ).slider({
|
||
|
|
orientation: "vertical",
|
||
|
|
range: "min",
|
||
|
|
min: 0,
|
||
|
|
max: 100,
|
||
|
|
value: 40,
|
||
|
|
});
|
||
|
|
|
||
|
|
$( "#sliderVertical-6" ).slider({
|
||
|
|
orientation: "vertical",
|
||
|
|
range: "min",
|
||
|
|
min: 0,
|
||
|
|
max: 100,
|
||
|
|
value: 80,
|
||
|
|
});
|
||
|
|
|
||
|
|
$( "#sliderVertical-7" ).slider({
|
||
|
|
orientation: "vertical",
|
||
|
|
range: "min",
|
||
|
|
min: 0,
|
||
|
|
max: 100,
|
||
|
|
value: 60,
|
||
|
|
});
|
||
|
|
|
||
|
|
$( "#sliderVertical-8" ).slider({
|
||
|
|
orientation: "vertical",
|
||
|
|
range: "min",
|
||
|
|
min: 0,
|
||
|
|
max: 100,
|
||
|
|
value: 40,
|
||
|
|
});
|
||
|
|
|
||
|
|
$( "#sliderVertical-9" ).slider({
|
||
|
|
orientation: "vertical",
|
||
|
|
range: "min",
|
||
|
|
min: 0,
|
||
|
|
max: 100,
|
||
|
|
value: 30,
|
||
|
|
});
|
||
|
|
|
||
|
|
$( "#sliderVertical-10" ).slider({
|
||
|
|
orientation: "vertical",
|
||
|
|
range: "min",
|
||
|
|
min: 0,
|
||
|
|
max: 100,
|
||
|
|
value: 15,
|
||
|
|
});
|
||
|
|
|
||
|
|
$( "#sliderVertical-11" ).slider({
|
||
|
|
orientation: "vertical",
|
||
|
|
range: "min",
|
||
|
|
min: 0,
|
||
|
|
max: 100,
|
||
|
|
value: 40,
|
||
|
|
});
|
||
|
|
|
||
|
|
$( "#sliderVertical-12" ).slider({
|
||
|
|
orientation: "vertical",
|
||
|
|
range: "min",
|
||
|
|
min: 0,
|
||
|
|
max: 100,
|
||
|
|
value: 80,
|
||
|
|
});
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
/* ---------- Circle Progess Bars ---------- */
|
||
|
|
|
||
|
|
function circle_progess() {
|
||
|
|
|
||
|
|
var divElement = $('div'); //log all div elements
|
||
|
|
|
||
|
|
$(".greenCircle").knob({
|
||
|
|
'min':0,
|
||
|
|
'max':100,
|
||
|
|
'readOnly': true,
|
||
|
|
'width': 120,
|
||
|
|
'height': 120,
|
||
|
|
'fgColor': '#b9e672',
|
||
|
|
'dynamicDraw': true,
|
||
|
|
'thickness': 0.2,
|
||
|
|
'tickColorizeValues': true,
|
||
|
|
'skin':'tron'
|
||
|
|
})
|
||
|
|
|
||
|
|
$(".orangeCircle").knob({
|
||
|
|
'min':0,
|
||
|
|
'max':100,
|
||
|
|
'readOnly': true,
|
||
|
|
'width': 120,
|
||
|
|
'height': 120,
|
||
|
|
'fgColor': '#FA5833',
|
||
|
|
'dynamicDraw': true,
|
||
|
|
'thickness': 0.2,
|
||
|
|
'tickColorizeValues': true,
|
||
|
|
'skin':'tron'
|
||
|
|
})
|
||
|
|
|
||
|
|
$(".lightOrangeCircle").knob({
|
||
|
|
'min':0,
|
||
|
|
'max':100,
|
||
|
|
'readOnly': true,
|
||
|
|
'width': 120,
|
||
|
|
'height': 120,
|
||
|
|
'fgColor': '#f4a70c',
|
||
|
|
'dynamicDraw': true,
|
||
|
|
'thickness': 0.2,
|
||
|
|
'tickColorizeValues': true,
|
||
|
|
'skin':'tron'
|
||
|
|
})
|
||
|
|
|
||
|
|
$(".blueCircle").knob({
|
||
|
|
'min':0,
|
||
|
|
'max':100,
|
||
|
|
'readOnly': true,
|
||
|
|
'width': 120,
|
||
|
|
'height': 120,
|
||
|
|
'fgColor': '#2FABE9',
|
||
|
|
'dynamicDraw': true,
|
||
|
|
'thickness': 0.2,
|
||
|
|
'tickColorizeValues': true,
|
||
|
|
'skin':'tron'
|
||
|
|
})
|
||
|
|
|
||
|
|
$(".yellowCircle").knob({
|
||
|
|
'min':0,
|
||
|
|
'max':100,
|
||
|
|
'readOnly': true,
|
||
|
|
'width': 120,
|
||
|
|
'height': 120,
|
||
|
|
'fgColor': '#e7e572',
|
||
|
|
'dynamicDraw': true,
|
||
|
|
'thickness': 0.2,
|
||
|
|
'tickColorizeValues': true,
|
||
|
|
'skin':'tron'
|
||
|
|
})
|
||
|
|
|
||
|
|
$(".pinkCircle").knob({
|
||
|
|
'min':0,
|
||
|
|
'max':100,
|
||
|
|
'readOnly': true,
|
||
|
|
'width': 120,
|
||
|
|
'height': 120,
|
||
|
|
'fgColor': '#e42b75',
|
||
|
|
'dynamicDraw': true,
|
||
|
|
'thickness': 0.2,
|
||
|
|
'tickColorizeValues': true,
|
||
|
|
'skin':'tron'
|
||
|
|
})
|
||
|
|
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/* ---------- Calendars ---------- */
|
||
|
|
|
||
|
|
function calendars(){
|
||
|
|
|
||
|
|
|
||
|
|
$('#external-events div.external-event').each(function() {
|
||
|
|
|
||
|
|
// 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
|
||
|
|
};
|
||
|
|
|
||
|
|
// 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: 0 // original position after the drag
|
||
|
|
});
|
||
|
|
|
||
|
|
});
|
||
|
|
|
||
|
|
var date = new Date();
|
||
|
|
var d = date.getDate();
|
||
|
|
var m = date.getMonth();
|
||
|
|
var y = date.getFullYear();
|
||
|
|
|
||
|
|
$('#main_calendar').fullCalendar({
|
||
|
|
header: {
|
||
|
|
left: 'title',
|
||
|
|
right: 'prev,next today,month,agendaWeek,agendaDay'
|
||
|
|
},
|
||
|
|
editable: true,
|
||
|
|
events: [
|
||
|
|
{
|
||
|
|
title: 'All Day Event',
|
||
|
|
start: new Date(y, m, 1)
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: 'Long Event',
|
||
|
|
start: new Date(y, m, d-5),
|
||
|
|
end: new Date(y, m, d-2)
|
||
|
|
},
|
||
|
|
{
|
||
|
|
id: 999,
|
||
|
|
title: 'Repeating Event',
|
||
|
|
start: new Date(y, m, d-3, 16, 0),
|
||
|
|
allDay: false
|
||
|
|
},
|
||
|
|
{
|
||
|
|
id: 999,
|
||
|
|
title: 'Repeating Event',
|
||
|
|
start: new Date(y, m, d+4, 16, 0),
|
||
|
|
allDay: false
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: 'Meeting',
|
||
|
|
start: new Date(y, m, d, 10, 30),
|
||
|
|
allDay: false
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: 'Lunch',
|
||
|
|
start: new Date(y, m, d, 12, 0),
|
||
|
|
end: new Date(y, m, d, 14, 0),
|
||
|
|
allDay: false
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: 'Birthday Party',
|
||
|
|
start: new Date(y, m, d+1, 19, 0),
|
||
|
|
end: new Date(y, m, d+1, 22, 30),
|
||
|
|
allDay: false
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: 'Click for Google',
|
||
|
|
start: new Date(y, m, 28),
|
||
|
|
end: new Date(y, m, 29),
|
||
|
|
url: 'http://google.com/'
|
||
|
|
}
|
||
|
|
]
|
||
|
|
});
|
||
|
|
|
||
|
|
$('#main_calendar_phone').fullCalendar({
|
||
|
|
header: {
|
||
|
|
left: 'title',
|
||
|
|
right: 'prev,next today,month,agendaWeek,agendaDay'
|
||
|
|
},
|
||
|
|
defaultView: 'agendaDay',
|
||
|
|
editable: true,
|
||
|
|
events: [
|
||
|
|
{
|
||
|
|
title: 'All Day Event',
|
||
|
|
start: new Date(y, m, 1)
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: 'Long Event',
|
||
|
|
start: new Date(y, m, d-5),
|
||
|
|
end: new Date(y, m, d-2)
|
||
|
|
},
|
||
|
|
{
|
||
|
|
id: 999,
|
||
|
|
title: 'Repeating Event',
|
||
|
|
start: new Date(y, m, d-3, 16, 0),
|
||
|
|
allDay: false
|
||
|
|
},
|
||
|
|
{
|
||
|
|
id: 999,
|
||
|
|
title: 'Repeating Event',
|
||
|
|
start: new Date(y, m, d+4, 16, 0),
|
||
|
|
allDay: false
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: 'Meeting',
|
||
|
|
start: new Date(y, m, d, 10, 30),
|
||
|
|
allDay: false
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: 'Lunch',
|
||
|
|
start: new Date(y, m, d, 12, 0),
|
||
|
|
end: new Date(y, m, d, 14, 0),
|
||
|
|
allDay: false
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: 'Birthday Party',
|
||
|
|
start: new Date(y, m, d+1, 19, 0),
|
||
|
|
end: new Date(y, m, d+1, 22, 30),
|
||
|
|
allDay: false
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: 'Click for Google',
|
||
|
|
start: new Date(y, m, 28),
|
||
|
|
end: new Date(y, m, 29),
|
||
|
|
url: 'http://google.com/'
|
||
|
|
}
|
||
|
|
]
|
||
|
|
});
|
||
|
|
|
||
|
|
|
||
|
|
$('#calendar').fullCalendar({
|
||
|
|
header: {
|
||
|
|
left: 'title',
|
||
|
|
right: 'prev,next today,month,agendaWeek,agendaDay'
|
||
|
|
},
|
||
|
|
editable: true,
|
||
|
|
droppable: true, // this allows things to be dropped onto the calendar !!!
|
||
|
|
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();
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
/* ---------- Sparkline Charts ---------- */
|
||
|
|
|
||
|
|
function sparkline_charts() {
|
||
|
|
|
||
|
|
//generate random number for charts
|
||
|
|
randNum = function(){
|
||
|
|
//return Math.floor(Math.random()*101);
|
||
|
|
return (Math.floor( Math.random()* (1+40-20) ) ) + 20;
|
||
|
|
}
|
||
|
|
|
||
|
|
var chartColours = ['#2FABE9', '#FA5833', '#b9e672', '#bbdce3', '#9a3b1b', '#5a8022', '#2c7282'];
|
||
|
|
|
||
|
|
//sparklines (making loop with random data for all 7 sparkline)
|
||
|
|
i=1;
|
||
|
|
for (i=1; i<9; i++) {
|
||
|
|
var data = [[1, 3+randNum()], [2, 5+randNum()], [3, 8+randNum()], [4, 11+randNum()],[5, 14+randNum()],[6, 17+randNum()],[7, 20+randNum()], [8, 15+randNum()], [9, 18+randNum()], [10, 22+randNum()]];
|
||
|
|
placeholder = '.sparkLineStats' + i;
|
||
|
|
$(placeholder).sparkline(data, {
|
||
|
|
width: 100,//Width of the chart - Defaults to 'auto' - May be any valid css width - 1.5em, 20px, etc (using a number without a unit specifier won't do what you want) - This option does nothing for bar and tristate chars (see barWidth)
|
||
|
|
height: 30,//Height of the chart - Defaults to 'auto' (line height of the containing tag)
|
||
|
|
lineColor: '#2FABE9',//Used by line and discrete charts to specify the colour of the line drawn as a CSS values string
|
||
|
|
fillColor: '#f2f7f9',//Specify the colour used to fill the area under the graph as a CSS value. Set to false to disable fill
|
||
|
|
spotColor: '#467e8c',//The CSS colour of the final value marker. Set to false or an empty string to hide it
|
||
|
|
maxSpotColor: '#b9e672',//The CSS colour of the marker displayed for the maximum value. Set to false or an empty string to hide it
|
||
|
|
minSpotColor: '#FA5833',//The CSS colour of the marker displayed for the mimum value. Set to false or an empty string to hide it
|
||
|
|
spotRadius: 2,//Radius of all spot markers, In pixels (default: 1.5) - Integer
|
||
|
|
lineWidth: 1//In pixels (default: 1) - Integer
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
/* ---------- Charts ---------- */
|
||
|
|
|
||
|
|
function charts() {
|
||
|
|
|
||
|
|
function randNum(){
|
||
|
|
return (Math.floor( Math.random()* (1+40-20) ) ) + 20;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* ---------- Chart with points ---------- */
|
||
|
|
if($("#stats-chart").length)
|
||
|
|
{
|
||
|
|
var pageviews = [[1, 5+randNum()], [2, 10+randNum()], [3, 15+randNum()], [4, 20+randNum()],[5, 25+randNum()],[6, 30+randNum()],[7, 35+randNum()],[8, 40+randNum()],[9, 45+randNum()],[10, 50+randNum()],[11, 55+randNum()],[12, 60+randNum()],[13, 65+randNum()],[14, 70+randNum()],[15, 75+randNum()],[16, 80+randNum()],[17, 85+randNum()],[18, 90+randNum()],[19, 85+randNum()],[20, 80+randNum()],[21, 75+randNum()],[22, 80+randNum()],[23, 75+randNum()],[24, 70+randNum()],[25, 65+randNum()],[26, 75+randNum()],[27,80+randNum()],[28, 85+randNum()],[29, 90+randNum()], [30, 95+randNum()]];
|
||
|
|
var visitors = [[1, randNum()-10], [2, randNum()-10], [3, randNum()-10], [4, randNum()],[5, randNum()],[6, 4+randNum()],[7, 5+randNum()],[8, 6+randNum()],[9, 6+randNum()],[10, 8+randNum()],[11, 9+randNum()],[12, 10+randNum()],[13,11+randNum()],[14, 12+randNum()],[15, 13+randNum()],[16, 14+randNum()],[17, 15+randNum()],[18, 15+randNum()],[19, 16+randNum()],[20, 17+randNum()],[21, 18+randNum()],[22, 19+randNum()],[23, 20+randNum()],[24, 21+randNum()],[25, 14+randNum()],[26, 24+randNum()],[27,25+randNum()],[28, 26+randNum()],[29, 27+randNum()], [30, 31+randNum()]];
|
||
|
|
|
||
|
|
var plot = $.plot($("#stats-chart"),
|
||
|
|
[ { data: pageviews, label: "pageviews"}, { data: visitors, label: "visitors" } ], {
|
||
|
|
series: {
|
||
|
|
lines: { show: true,
|
||
|
|
lineWidth: 3,
|
||
|
|
fill: true, fillColor: { colors: [ { opacity: 0.08 }, { opacity: 0.01 } ] }
|
||
|
|
},
|
||
|
|
points: { show: true },
|
||
|
|
shadowSize: 2
|
||
|
|
},
|
||
|
|
grid: { hoverable: true,
|
||
|
|
clickable: true,
|
||
|
|
tickColor: "#eee",
|
||
|
|
borderWidth: 0,
|
||
|
|
},
|
||
|
|
colors: ["#FA5833", "#2FABE9"],
|
||
|
|
xaxis: {ticks:11, tickDecimals: 0},
|
||
|
|
yaxis: {ticks:11, tickDecimals: 0},
|
||
|
|
});
|
||
|
|
|
||
|
|
function showTooltip(x, y, contents) {
|
||
|
|
$('<div id="tooltip">' + contents + '</div>').css( {
|
||
|
|
position: 'absolute',
|
||
|
|
display: 'none',
|
||
|
|
top: y + 5,
|
||
|
|
left: x + 5,
|
||
|
|
border: '1px solid #fdd',
|
||
|
|
padding: '2px',
|
||
|
|
'background-color': '#dfeffc',
|
||
|
|
opacity: 0.80
|
||
|
|
}).appendTo("body").fadeIn(200);
|
||
|
|
}
|
||
|
|
|
||
|
|
var previousPoint = null;
|
||
|
|
$("#stats-chart").bind("plothover", function (event, pos, item) {
|
||
|
|
$("#x").text(pos.x.toFixed(2));
|
||
|
|
$("#y").text(pos.y.toFixed(2));
|
||
|
|
|
||
|
|
if (item) {
|
||
|
|
if (previousPoint != item.dataIndex) {
|
||
|
|
previousPoint = item.dataIndex;
|
||
|
|
|
||
|
|
$("#tooltip").remove();
|
||
|
|
var x = item.datapoint[0].toFixed(2),
|
||
|
|
y = item.datapoint[1].toFixed(2);
|
||
|
|
|
||
|
|
showTooltip(item.pageX, item.pageY,
|
||
|
|
item.series.label + " of " + x + " = " + y);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
$("#tooltip").remove();
|
||
|
|
previousPoint = null;
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
$("#sincos").bind("plotclick", function (event, pos, item) {
|
||
|
|
if (item) {
|
||
|
|
$("#clickdata").text("You clicked point " + item.dataIndex + " in " + item.series.label + ".");
|
||
|
|
plot.highlight(item.series, item.datapoint);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/* ---------- Chart with points ---------- */
|
||
|
|
if($("#sincos").length)
|
||
|
|
{
|
||
|
|
var sin = [], cos = [];
|
||
|
|
|
||
|
|
for (var i = 0; i < 14; i += 0.5) {
|
||
|
|
sin.push([i, Math.sin(i)/i]);
|
||
|
|
cos.push([i, Math.cos(i)]);
|
||
|
|
}
|
||
|
|
|
||
|
|
var plot = $.plot($("#sincos"),
|
||
|
|
[ { data: sin, label: "sin(x)/x"}, { data: cos, label: "cos(x)" } ], {
|
||
|
|
series: {
|
||
|
|
lines: { show: true,
|
||
|
|
lineWidth: 2,
|
||
|
|
},
|
||
|
|
points: { show: true },
|
||
|
|
shadowSize: 2
|
||
|
|
},
|
||
|
|
grid: { hoverable: true,
|
||
|
|
clickable: true,
|
||
|
|
tickColor: "#dddddd",
|
||
|
|
borderWidth: 0
|
||
|
|
},
|
||
|
|
yaxis: { min: -1.2, max: 1.2 },
|
||
|
|
colors: ["#FA5833", "#2FABE9"]
|
||
|
|
});
|
||
|
|
|
||
|
|
function showTooltip(x, y, contents) {
|
||
|
|
$('<div id="tooltip">' + contents + '</div>').css( {
|
||
|
|
position: 'absolute',
|
||
|
|
display: 'none',
|
||
|
|
top: y + 5,
|
||
|
|
left: x + 5,
|
||
|
|
border: '1px solid #fdd',
|
||
|
|
padding: '2px',
|
||
|
|
'background-color': '#dfeffc',
|
||
|
|
opacity: 0.80
|
||
|
|
}).appendTo("body").fadeIn(200);
|
||
|
|
}
|
||
|
|
|
||
|
|
var previousPoint = null;
|
||
|
|
$("#sincos").bind("plothover", function (event, pos, item) {
|
||
|
|
$("#x").text(pos.x.toFixed(2));
|
||
|
|
$("#y").text(pos.y.toFixed(2));
|
||
|
|
|
||
|
|
if (item) {
|
||
|
|
if (previousPoint != item.dataIndex) {
|
||
|
|
previousPoint = item.dataIndex;
|
||
|
|
|
||
|
|
$("#tooltip").remove();
|
||
|
|
var x = item.datapoint[0].toFixed(2),
|
||
|
|
y = item.datapoint[1].toFixed(2);
|
||
|
|
|
||
|
|
showTooltip(item.pageX, item.pageY,
|
||
|
|
item.series.label + " of " + x + " = " + y);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
$("#tooltip").remove();
|
||
|
|
previousPoint = null;
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
$("#sincos").bind("plotclick", function (event, pos, item) {
|
||
|
|
if (item) {
|
||
|
|
$("#clickdata").text("You clicked point " + item.dataIndex + " in " + item.series.label + ".");
|
||
|
|
plot.highlight(item.series, item.datapoint);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
/* ---------- Flot chart ---------- */
|
||
|
|
if($("#flotchart").length)
|
||
|
|
{
|
||
|
|
var d1 = [];
|
||
|
|
for (var i = 0; i < Math.PI * 2; i += 0.25)
|
||
|
|
d1.push([i, Math.sin(i)]);
|
||
|
|
|
||
|
|
var d2 = [];
|
||
|
|
for (var i = 0; i < Math.PI * 2; i += 0.25)
|
||
|
|
d2.push([i, Math.cos(i)]);
|
||
|
|
|
||
|
|
var d3 = [];
|
||
|
|
for (var i = 0; i < Math.PI * 2; i += 0.1)
|
||
|
|
d3.push([i, Math.tan(i)]);
|
||
|
|
|
||
|
|
$.plot($("#flotchart"), [
|
||
|
|
{ label: "sin(x)", data: d1},
|
||
|
|
{ label: "cos(x)", data: d2},
|
||
|
|
{ label: "tan(x)", data: d3}
|
||
|
|
], {
|
||
|
|
series: {
|
||
|
|
lines: { show: true },
|
||
|
|
points: { show: true }
|
||
|
|
},
|
||
|
|
xaxis: {
|
||
|
|
ticks: [0, [Math.PI/2, "\u03c0/2"], [Math.PI, "\u03c0"], [Math.PI * 3/2, "3\u03c0/2"], [Math.PI * 2, "2\u03c0"]]
|
||
|
|
},
|
||
|
|
yaxis: {
|
||
|
|
ticks: 10,
|
||
|
|
min: -2,
|
||
|
|
max: 2
|
||
|
|
},
|
||
|
|
grid: { tickColor: "#dddddd",
|
||
|
|
borderWidth: 0
|
||
|
|
},
|
||
|
|
colors: ["#FA5833", "#2FABE9", "#FABB3D"]
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
/* ---------- Stack chart ---------- */
|
||
|
|
if($("#stackchart").length)
|
||
|
|
{
|
||
|
|
var d1 = [];
|
||
|
|
for (var i = 0; i <= 10; i += 1)
|
||
|
|
d1.push([i, parseInt(Math.random() * 30)]);
|
||
|
|
|
||
|
|
var d2 = [];
|
||
|
|
for (var i = 0; i <= 10; i += 1)
|
||
|
|
d2.push([i, parseInt(Math.random() * 30)]);
|
||
|
|
|
||
|
|
var d3 = [];
|
||
|
|
for (var i = 0; i <= 10; i += 1)
|
||
|
|
d3.push([i, parseInt(Math.random() * 30)]);
|
||
|
|
|
||
|
|
var stack = 0, bars = true, lines = false, steps = false;
|
||
|
|
|
||
|
|
function plotWithOptions() {
|
||
|
|
$.plot($("#stackchart"), [ d1, d2, d3 ], {
|
||
|
|
series: {
|
||
|
|
stack: stack,
|
||
|
|
lines: { show: lines, fill: true, steps: steps },
|
||
|
|
bars: { show: bars, barWidth: 0.6 },
|
||
|
|
},
|
||
|
|
colors: ["#FA5833", "#2FABE9", "#FABB3D"]
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
plotWithOptions();
|
||
|
|
|
||
|
|
$(".stackControls input").click(function (e) {
|
||
|
|
e.preventDefault();
|
||
|
|
stack = $(this).val() == "With stacking" ? true : null;
|
||
|
|
plotWithOptions();
|
||
|
|
});
|
||
|
|
$(".graphControls input").click(function (e) {
|
||
|
|
e.preventDefault();
|
||
|
|
bars = $(this).val().indexOf("Bars") != -1;
|
||
|
|
lines = $(this).val().indexOf("Lines") != -1;
|
||
|
|
steps = $(this).val().indexOf("steps") != -1;
|
||
|
|
plotWithOptions();
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
/* ---------- Pie chart ---------- */
|
||
|
|
var data = [
|
||
|
|
{ label: "Internet Explorer", data: 12},
|
||
|
|
{ label: "Mobile", data: 27},
|
||
|
|
{ label: "Safari", data: 85},
|
||
|
|
{ label: "Opera", data: 64},
|
||
|
|
{ label: "Firefox", data: 90},
|
||
|
|
{ label: "Chrome", data: 112}
|
||
|
|
];
|
||
|
|
|
||
|
|
if($("#piechart").length)
|
||
|
|
{
|
||
|
|
$.plot($("#piechart"), data,
|
||
|
|
{
|
||
|
|
series: {
|
||
|
|
pie: {
|
||
|
|
show: true
|
||
|
|
}
|
||
|
|
},
|
||
|
|
grid: {
|
||
|
|
hoverable: true,
|
||
|
|
clickable: true
|
||
|
|
},
|
||
|
|
legend: {
|
||
|
|
show: false
|
||
|
|
},
|
||
|
|
colors: ["#FA5833", "#2FABE9", "#FABB3D", "#78CD51"]
|
||
|
|
});
|
||
|
|
|
||
|
|
function pieHover(event, pos, obj)
|
||
|
|
{
|
||
|
|
if (!obj)
|
||
|
|
return;
|
||
|
|
percent = parseFloat(obj.series.percent).toFixed(2);
|
||
|
|
$("#hover").html('<span style="font-weight: bold; color: '+obj.series.color+'">'+obj.series.label+' ('+percent+'%)</span>');
|
||
|
|
}
|
||
|
|
$("#piechart").bind("plothover", pieHover);
|
||
|
|
}
|
||
|
|
|
||
|
|
/* ---------- Donut chart ---------- */
|
||
|
|
if($("#donutchart").length)
|
||
|
|
{
|
||
|
|
$.plot($("#donutchart"), data,
|
||
|
|
{
|
||
|
|
series: {
|
||
|
|
pie: {
|
||
|
|
innerRadius: 0.5,
|
||
|
|
show: true
|
||
|
|
}
|
||
|
|
},
|
||
|
|
legend: {
|
||
|
|
show: false
|
||
|
|
},
|
||
|
|
colors: ["#FA5833", "#2FABE9", "#FABB3D", "#78CD51"]
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
// we use an inline data source in the example, usually data would
|
||
|
|
// be fetched from a server
|
||
|
|
var data = [], totalPoints = 300;
|
||
|
|
function getRandomData() {
|
||
|
|
if (data.length > 0)
|
||
|
|
data = data.slice(1);
|
||
|
|
|
||
|
|
// do a random walk
|
||
|
|
while (data.length < totalPoints) {
|
||
|
|
var prev = data.length > 0 ? data[data.length - 1] : 50;
|
||
|
|
var y = prev + Math.random() * 10 - 5;
|
||
|
|
if (y < 0)
|
||
|
|
y = 0;
|
||
|
|
if (y > 100)
|
||
|
|
y = 100;
|
||
|
|
data.push(y);
|
||
|
|
}
|
||
|
|
|
||
|
|
// zip the generated y values with the x values
|
||
|
|
var res = [];
|
||
|
|
for (var i = 0; i < data.length; ++i)
|
||
|
|
res.push([i, data[i]])
|
||
|
|
return res;
|
||
|
|
}
|
||
|
|
|
||
|
|
// setup control widget
|
||
|
|
var updateInterval = 30;
|
||
|
|
$("#updateInterval").val(updateInterval).change(function () {
|
||
|
|
var v = $(this).val();
|
||
|
|
if (v && !isNaN(+v)) {
|
||
|
|
updateInterval = +v;
|
||
|
|
if (updateInterval < 1)
|
||
|
|
updateInterval = 1;
|
||
|
|
if (updateInterval > 2000)
|
||
|
|
updateInterval = 2000;
|
||
|
|
$(this).val("" + updateInterval);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
/* ---------- Realtime chart ---------- */
|
||
|
|
if($("#serverload").length)
|
||
|
|
{
|
||
|
|
var options = {
|
||
|
|
series: { shadowSize: 1 },
|
||
|
|
lines: { show: true, lineWidth: 0.4, fill: true, fillColor: { colors: [ { opacity: 0.1 }, { opacity: 1 } ] }},
|
||
|
|
yaxis: { min: 0, max: 100, tickFormatter: function (v) { return v + "%"; }},
|
||
|
|
xaxis: { show: false },
|
||
|
|
colors: ["#FA5833"],
|
||
|
|
grid: { tickColor: "#dddddd",
|
||
|
|
borderWidth: 0,
|
||
|
|
},
|
||
|
|
};
|
||
|
|
var plot = $.plot($("#serverload"), [ getRandomData() ], options);
|
||
|
|
function update() {
|
||
|
|
plot.setData([ getRandomData() ]);
|
||
|
|
// since the axes don't change, we don't need to call plot.setupGrid()
|
||
|
|
plot.draw();
|
||
|
|
|
||
|
|
setTimeout(update, updateInterval);
|
||
|
|
}
|
||
|
|
|
||
|
|
update();
|
||
|
|
}
|
||
|
|
|
||
|
|
if($("#realtimechart").length)
|
||
|
|
{
|
||
|
|
var options = {
|
||
|
|
series: { shadowSize: 1 },
|
||
|
|
lines: { fill: true, fillColor: { colors: [ { opacity: 1 }, { opacity: 0.1 } ] }},
|
||
|
|
yaxis: { min: 0, max: 100 },
|
||
|
|
xaxis: { show: false },
|
||
|
|
colors: ["#F4A506"],
|
||
|
|
grid: { tickColor: "#dddddd",
|
||
|
|
borderWidth: 0
|
||
|
|
},
|
||
|
|
};
|
||
|
|
var plot = $.plot($("#realtimechart"), [ getRandomData() ], options);
|
||
|
|
function update() {
|
||
|
|
plot.setData([ getRandomData() ]);
|
||
|
|
// since the axes don't change, we don't need to call plot.setupGrid()
|
||
|
|
plot.draw();
|
||
|
|
|
||
|
|
setTimeout(update, updateInterval);
|
||
|
|
}
|
||
|
|
|
||
|
|
update();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
function growlLikeNotifications() {
|
||
|
|
|
||
|
|
$('#add-sticky').click(function(){
|
||
|
|
|
||
|
|
var unique_id = $.gritter.add({
|
||
|
|
// (string | mandatory) the heading of the notification
|
||
|
|
title: 'This is a sticky notice!',
|
||
|
|
// (string | mandatory) the text inside the notification
|
||
|
|
text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus eget tincidunt velit. Cum sociis natoque penatibus et <a href="#" style="color:#ccc">magnis dis parturient</a> montes, nascetur ridiculus mus.',
|
||
|
|
// (string | optional) the image to display on the left
|
||
|
|
image: 'img/avatar.jpg',
|
||
|
|
// (bool | optional) if you want it to fade out on its own or just sit there
|
||
|
|
sticky: true,
|
||
|
|
// (int | optional) the time you want it to be alive for before fading out
|
||
|
|
time: '',
|
||
|
|
// (string | optional) the class name you want to apply to that specific message
|
||
|
|
class_name: 'my-sticky-class'
|
||
|
|
});
|
||
|
|
|
||
|
|
// You can have it return a unique id, this can be used to manually remove it later using
|
||
|
|
/* ----------
|
||
|
|
setTimeout(function(){
|
||
|
|
|
||
|
|
$.gritter.remove(unique_id, {
|
||
|
|
fade: true,
|
||
|
|
speed: 'slow'
|
||
|
|
});
|
||
|
|
|
||
|
|
}, 6000)
|
||
|
|
*/
|
||
|
|
|
||
|
|
return false;
|
||
|
|
|
||
|
|
});
|
||
|
|
|
||
|
|
$('#add-regular').click(function(){
|
||
|
|
|
||
|
|
$.gritter.add({
|
||
|
|
// (string | mandatory) the heading of the notification
|
||
|
|
title: 'This is a regular notice!',
|
||
|
|
// (string | mandatory) the text inside the notification
|
||
|
|
text: 'This will fade out after a certain amount of time. Vivamus eget tincidunt velit. Cum sociis natoque penatibus et <a href="#" style="color:#ccc">magnis dis parturient</a> montes, nascetur ridiculus mus.',
|
||
|
|
// (string | optional) the image to display on the left
|
||
|
|
image: 'img/avatar.jpg',
|
||
|
|
// (bool | optional) if you want it to fade out on its own or just sit there
|
||
|
|
sticky: false,
|
||
|
|
// (int | optional) the time you want it to be alive for before fading out
|
||
|
|
time: ''
|
||
|
|
});
|
||
|
|
|
||
|
|
return false;
|
||
|
|
|
||
|
|
});
|
||
|
|
|
||
|
|
$('#add-max').click(function(){
|
||
|
|
|
||
|
|
$.gritter.add({
|
||
|
|
// (string | mandatory) the heading of the notification
|
||
|
|
title: 'This is a notice with a max of 3 on screen at one time!',
|
||
|
|
// (string | mandatory) the text inside the notification
|
||
|
|
text: 'This will fade out after a certain amount of time. Vivamus eget tincidunt velit. Cum sociis natoque penatibus et <a href="#" style="color:#ccc">magnis dis parturient</a> montes, nascetur ridiculus mus.',
|
||
|
|
// (string | optional) the image to display on the left
|
||
|
|
image: 'img/avatar.jpg',
|
||
|
|
// (bool | optional) if you want it to fade out on its own or just sit there
|
||
|
|
sticky: false,
|
||
|
|
// (function) before the gritter notice is opened
|
||
|
|
before_open: function(){
|
||
|
|
if($('.gritter-item-wrapper').length == 3)
|
||
|
|
{
|
||
|
|
// Returning false prevents a new gritter from opening
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
return false;
|
||
|
|
|
||
|
|
});
|
||
|
|
|
||
|
|
$('#add-without-image').click(function(){
|
||
|
|
|
||
|
|
$.gritter.add({
|
||
|
|
// (string | mandatory) the heading of the notification
|
||
|
|
title: 'This is a notice without an image!',
|
||
|
|
// (string | mandatory) the text inside the notification
|
||
|
|
text: 'This will fade out after a certain amount of time. Vivamus eget tincidunt velit. Cum sociis natoque penatibus et <a href="#" style="color:#ccc">magnis dis parturient</a> montes, nascetur ridiculus mus.'
|
||
|
|
});
|
||
|
|
|
||
|
|
return false;
|
||
|
|
});
|
||
|
|
|
||
|
|
$('#add-gritter-light').click(function(){
|
||
|
|
|
||
|
|
$.gritter.add({
|
||
|
|
// (string | mandatory) the heading of the notification
|
||
|
|
title: 'This is a light notification',
|
||
|
|
// (string | mandatory) the text inside the notification
|
||
|
|
text: 'Just add a "gritter-light" class_name to your $.gritter.add or globally to $.gritter.options.class_name',
|
||
|
|
class_name: 'gritter-light'
|
||
|
|
});
|
||
|
|
|
||
|
|
return false;
|
||
|
|
});
|
||
|
|
|
||
|
|
$('#add-with-callbacks').click(function(){
|
||
|
|
|
||
|
|
$.gritter.add({
|
||
|
|
// (string | mandatory) the heading of the notification
|
||
|
|
title: 'This is a notice with callbacks!',
|
||
|
|
// (string | mandatory) the text inside the notification
|
||
|
|
text: 'The callback is...',
|
||
|
|
// (function | optional) function called before it opens
|
||
|
|
before_open: function(){
|
||
|
|
alert('I am called before it opens');
|
||
|
|
},
|
||
|
|
// (function | optional) function called after it opens
|
||
|
|
after_open: function(e){
|
||
|
|
alert("I am called after it opens: \nI am passed the jQuery object for the created Gritter element...\n" + e);
|
||
|
|
},
|
||
|
|
// (function | optional) function called before it closes
|
||
|
|
before_close: function(e, manual_close){
|
||
|
|
var manually = (manual_close) ? 'The "X" was clicked to close me!' : '';
|
||
|
|
alert("I am called before it closes: I am passed the jQuery object for the Gritter element... \n" + manually);
|
||
|
|
},
|
||
|
|
// (function | optional) function called after it closes
|
||
|
|
after_close: function(e, manual_close){
|
||
|
|
var manually = (manual_close) ? 'The "X" was clicked to close me!' : '';
|
||
|
|
alert('I am called after it closes. ' + manually);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
return false;
|
||
|
|
});
|
||
|
|
|
||
|
|
$('#add-sticky-with-callbacks').click(function(){
|
||
|
|
|
||
|
|
$.gritter.add({
|
||
|
|
// (string | mandatory) the heading of the notification
|
||
|
|
title: 'This is a sticky notice with callbacks!',
|
||
|
|
// (string | mandatory) the text inside the notification
|
||
|
|
text: 'Sticky sticky notice.. sticky sticky notice...',
|
||
|
|
// Stickeh!
|
||
|
|
sticky: true,
|
||
|
|
// (function | optional) function called before it opens
|
||
|
|
before_open: function(){
|
||
|
|
alert('I am a sticky called before it opens');
|
||
|
|
},
|
||
|
|
// (function | optional) function called after it opens
|
||
|
|
after_open: function(e){
|
||
|
|
alert("I am a sticky called after it opens: \nI am passed the jQuery object for the created Gritter element...\n" + e);
|
||
|
|
},
|
||
|
|
// (function | optional) function called before it closes
|
||
|
|
before_close: function(e){
|
||
|
|
alert("I am a sticky called before it closes: I am passed the jQuery object for the Gritter element... \n" + e);
|
||
|
|
},
|
||
|
|
// (function | optional) function called after it closes
|
||
|
|
after_close: function(){
|
||
|
|
alert('I am a sticky called after it closes');
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
return false;
|
||
|
|
|
||
|
|
});
|
||
|
|
|
||
|
|
$("#remove-all").click(function(){
|
||
|
|
|
||
|
|
$.gritter.removeAll();
|
||
|
|
return false;
|
||
|
|
|
||
|
|
});
|
||
|
|
|
||
|
|
$("#remove-all-with-callbacks").click(function(){
|
||
|
|
|
||
|
|
$.gritter.removeAll({
|
||
|
|
before_close: function(e){
|
||
|
|
alert("I am called before all notifications are closed. I am passed the jQuery object containing all of Gritter notifications.\n" + e);
|
||
|
|
},
|
||
|
|
after_close: function(){
|
||
|
|
alert('I am called after everything has been closed.');
|
||
|
|
}
|
||
|
|
});
|
||
|
|
return false;
|
||
|
|
|
||
|
|
});
|
||
|
|
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
/* ---------- Additional functions for data table ---------- */
|
||
|
|
$.fn.dataTableExt.oApi.fnPagingInfo = function ( oSettings )
|
||
|
|
{
|
||
|
|
return {
|
||
|
|
"iStart": oSettings._iDisplayStart,
|
||
|
|
"iEnd": oSettings.fnDisplayEnd(),
|
||
|
|
"iLength": oSettings._iDisplayLength,
|
||
|
|
"iTotal": oSettings.fnRecordsTotal(),
|
||
|
|
"iFilteredTotal": oSettings.fnRecordsDisplay(),
|
||
|
|
"iPage": Math.ceil( oSettings._iDisplayStart / oSettings._iDisplayLength ),
|
||
|
|
"iTotalPages": Math.ceil( oSettings.fnRecordsDisplay() / oSettings._iDisplayLength )
|
||
|
|
};
|
||
|
|
}
|
||
|
|
$.extend( $.fn.dataTableExt.oPagination, {
|
||
|
|
"bootstrap": {
|
||
|
|
"fnInit": function( oSettings, nPaging, fnDraw ) {
|
||
|
|
var oLang = oSettings.oLanguage.oPaginate;
|
||
|
|
var fnClickHandler = function ( e ) {
|
||
|
|
e.preventDefault();
|
||
|
|
if ( oSettings.oApi._fnPageChange(oSettings, e.data.action) ) {
|
||
|
|
fnDraw( oSettings );
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
$(nPaging).addClass('pagination').append(
|
||
|
|
'<ul>'+
|
||
|
|
'<li class="prev disabled"><a href="#">← '+oLang.sPrevious+'</a></li>'+
|
||
|
|
'<li class="next disabled"><a href="#">'+oLang.sNext+' → </a></li>'+
|
||
|
|
'</ul>'
|
||
|
|
);
|
||
|
|
var els = $('a', nPaging);
|
||
|
|
$(els[0]).bind( 'click.DT', { action: "previous" }, fnClickHandler );
|
||
|
|
$(els[1]).bind( 'click.DT', { action: "next" }, fnClickHandler );
|
||
|
|
},
|
||
|
|
|
||
|
|
"fnUpdate": function ( oSettings, fnDraw ) {
|
||
|
|
var iListLength = 5;
|
||
|
|
var oPaging = oSettings.oInstance.fnPagingInfo();
|
||
|
|
var an = oSettings.aanFeatures.p;
|
||
|
|
var i, j, sClass, iStart, iEnd, iHalf=Math.floor(iListLength/2);
|
||
|
|
|
||
|
|
if ( oPaging.iTotalPages < iListLength) {
|
||
|
|
iStart = 1;
|
||
|
|
iEnd = oPaging.iTotalPages;
|
||
|
|
}
|
||
|
|
else if ( oPaging.iPage <= iHalf ) {
|
||
|
|
iStart = 1;
|
||
|
|
iEnd = iListLength;
|
||
|
|
} else if ( oPaging.iPage >= (oPaging.iTotalPages-iHalf) ) {
|
||
|
|
iStart = oPaging.iTotalPages - iListLength + 1;
|
||
|
|
iEnd = oPaging.iTotalPages;
|
||
|
|
} else {
|
||
|
|
iStart = oPaging.iPage - iHalf + 1;
|
||
|
|
iEnd = iStart + iListLength - 1;
|
||
|
|
}
|
||
|
|
|
||
|
|
for ( i=0, iLen=an.length ; i<iLen ; i++ ) {
|
||
|
|
// remove the middle elements
|
||
|
|
$('li:gt(0)', an[i]).filter(':not(:last)').remove();
|
||
|
|
|
||
|
|
// add the new list items and their event handlers
|
||
|
|
for ( j=iStart ; j<=iEnd ; j++ ) {
|
||
|
|
sClass = (j==oPaging.iPage+1) ? 'class="active"' : '';
|
||
|
|
$('<li '+sClass+'><a href="#">'+j+'</a></li>')
|
||
|
|
.insertBefore( $('li:last', an[i])[0] )
|
||
|
|
.bind('click', function (e) {
|
||
|
|
e.preventDefault();
|
||
|
|
oSettings._iDisplayStart = (parseInt($('a', this).text(),10)-1) * oPaging.iLength;
|
||
|
|
fnDraw( oSettings );
|
||
|
|
} );
|
||
|
|
}
|
||
|
|
|
||
|
|
// add / remove disabled classes from the static elements
|
||
|
|
if ( oPaging.iPage === 0 ) {
|
||
|
|
$('li:first', an[i]).addClass('disabled');
|
||
|
|
} else {
|
||
|
|
$('li:first', an[i]).removeClass('disabled');
|
||
|
|
}
|
||
|
|
|
||
|
|
if ( oPaging.iPage === oPaging.iTotalPages-1 || oPaging.iTotalPages === 0 ) {
|
||
|
|
$('li:last', an[i]).addClass('disabled');
|
||
|
|
} else {
|
||
|
|
$('li:last', an[i]).removeClass('disabled');
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
/* ---------- Page width functions ---------- */
|
||
|
|
|
||
|
|
$(window).bind("resize", widthFunctions);
|
||
|
|
|
||
|
|
function widthFunctions( e ) {
|
||
|
|
var winHeight = $(window).height();
|
||
|
|
var winWidth = $(window).width();
|
||
|
|
|
||
|
|
if (winHeight) {
|
||
|
|
|
||
|
|
$("#content").css("min-height",winHeight);
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
if (winWidth < 980 && winWidth > 767) {
|
||
|
|
|
||
|
|
if($(".main-menu-span").hasClass("span2")) {
|
||
|
|
|
||
|
|
$(".main-menu-span").removeClass("span2");
|
||
|
|
$(".main-menu-span").addClass("span1");
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
if($("#content").hasClass("span10")) {
|
||
|
|
|
||
|
|
$("#content").removeClass("span10");
|
||
|
|
$("#content").addClass("span11");
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
$("a").each(function(){
|
||
|
|
|
||
|
|
if($(this).hasClass("quick-button-small span1")) {
|
||
|
|
|
||
|
|
$(this).removeClass("quick-button-small span1");
|
||
|
|
$(this).addClass("quick-button span2 changed");
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
});
|
||
|
|
|
||
|
|
$(".circleStatsItem").each(function() {
|
||
|
|
|
||
|
|
var getOnTablet = $(this).parent().attr('onTablet');
|
||
|
|
var getOnDesktop = $(this).parent().attr('onDesktop');
|
||
|
|
|
||
|
|
if (getOnTablet) {
|
||
|
|
|
||
|
|
$(this).parent().removeClass(getOnDesktop);
|
||
|
|
$(this).parent().addClass(getOnTablet);
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
});
|
||
|
|
|
||
|
|
$(".box").each(function(){
|
||
|
|
|
||
|
|
var getOnTablet = $(this).attr('onTablet');
|
||
|
|
var getOnDesktop = $(this).attr('onDesktop');
|
||
|
|
|
||
|
|
if (getOnTablet) {
|
||
|
|
|
||
|
|
$(this).removeClass(getOnDesktop);
|
||
|
|
$(this).addClass(getOnTablet);
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
});
|
||
|
|
|
||
|
|
} else {
|
||
|
|
|
||
|
|
if($(".main-menu-span").hasClass("span1")) {
|
||
|
|
|
||
|
|
$(".main-menu-span").removeClass("span1");
|
||
|
|
$(".main-menu-span").addClass("span2");
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
if($("#content").hasClass("span11")) {
|
||
|
|
|
||
|
|
$("#content").removeClass("span11");
|
||
|
|
$("#content").addClass("span10");
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
$("a").each(function(){
|
||
|
|
|
||
|
|
if($(this).hasClass("quick-button span2 changed")) {
|
||
|
|
|
||
|
|
$(this).removeClass("quick-button span2 changed");
|
||
|
|
$(this).addClass("quick-button-small span1");
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
});
|
||
|
|
|
||
|
|
$(".circleStatsItem").each(function() {
|
||
|
|
|
||
|
|
var getOnTablet = $(this).parent().attr('onTablet');
|
||
|
|
var getOnDesktop = $(this).parent().attr('onDesktop');
|
||
|
|
|
||
|
|
if (getOnTablet) {
|
||
|
|
|
||
|
|
$(this).parent().removeClass(getOnTablet);
|
||
|
|
$(this).parent().addClass(getOnDesktop);
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
});
|
||
|
|
|
||
|
|
$(".box").each(function(){
|
||
|
|
|
||
|
|
var getOnTablet = $(this).attr('onTablet');
|
||
|
|
var getOnDesktop = $(this).attr('onDesktop');
|
||
|
|
|
||
|
|
if (getOnTablet) {
|
||
|
|
|
||
|
|
$(this).removeClass(getOnTablet);
|
||
|
|
$(this).addClass(getOnDesktop);
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
});
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|