first commit
This commit is contained in:
513
libraries/framework/js/demo/charts/d3.js
vendored
Normal file
513
libraries/framework/js/demo/charts/d3.js
vendored
Normal file
@@ -0,0 +1,513 @@
|
||||
/* All functions in this file are used only for charts.html */
|
||||
var D3Charts = function () {
|
||||
|
||||
// Init Flot Chart Plugins
|
||||
var runD3Plugins = function () {
|
||||
|
||||
// Plugin 1
|
||||
|
||||
}
|
||||
|
||||
// Init Flot Charts Plugin
|
||||
var runD3Charts = function () {
|
||||
|
||||
// Add a series of colors to be used in the charts and pie graphs
|
||||
var Colors = [bgPrimary, bgInfo, bgWarning, bgAlert, bgDanger, bgSystem, bgSuccess,];
|
||||
|
||||
// Line Chart
|
||||
var chart1 = c3.generate({
|
||||
bindto: '#line-chart',
|
||||
color: {
|
||||
pattern: Colors,
|
||||
},
|
||||
point: {
|
||||
r: 3
|
||||
},
|
||||
padding: {
|
||||
left: 30,
|
||||
right: 30,
|
||||
top: 0,
|
||||
bottom: 0,
|
||||
},
|
||||
data: {
|
||||
columns: [
|
||||
['data1', 30, 200, 100, 400, 150, 250],
|
||||
['data2', 50, 20, 10, 40, 15, 25]
|
||||
],
|
||||
axes: {
|
||||
data1: 'y',
|
||||
data2: 'y2',
|
||||
}
|
||||
},
|
||||
axis: {
|
||||
x: {
|
||||
label: 'X Label'
|
||||
},
|
||||
y: {
|
||||
label: {
|
||||
text: 'Y Axis Label',
|
||||
position: 'outer-middle'
|
||||
}
|
||||
},
|
||||
y2: {
|
||||
show: true,
|
||||
label: {
|
||||
text: 'Y2 Axis Label',
|
||||
position: 'outer-middle'
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
// setTimeout(function () {
|
||||
// chart1.axis.labels({
|
||||
// x: 'New X Axis Label',
|
||||
// y: 'New Y Axis Label',
|
||||
// y2: 'New Y2 Axis Label',
|
||||
// });
|
||||
// }, 1000);
|
||||
// setTimeout(function () {
|
||||
// chart1.load({
|
||||
// columns: [
|
||||
// ['data1', 100, 300, 600, 200, 400, 500]
|
||||
// ]
|
||||
// });
|
||||
// chart.axis.labels({y: 'New Y Axis Label Again'});
|
||||
// }, 2000);
|
||||
|
||||
|
||||
// Area Chart
|
||||
var chart2 = c3.generate({
|
||||
bindto: '#area-chart',
|
||||
color: {
|
||||
pattern: Colors,
|
||||
},
|
||||
padding: {
|
||||
left: 30,
|
||||
right: 15,
|
||||
top: 0,
|
||||
bottom: 0,
|
||||
},
|
||||
data: {
|
||||
columns: [
|
||||
['data1', 300, 350, 300, 0, 0, 0],
|
||||
['data2', 130, 100, 140, 200, 150, 50]
|
||||
],
|
||||
types: {
|
||||
data1: 'area',
|
||||
data2: 'area-spline'
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
// Step Chart
|
||||
var chart3 = c3.generate({
|
||||
bindto: '#step-chart',
|
||||
color: {
|
||||
pattern: Colors,
|
||||
},
|
||||
padding: {
|
||||
left: 30,
|
||||
right: 15,
|
||||
top: 0,
|
||||
bottom: 0,
|
||||
},
|
||||
data: {
|
||||
columns: [
|
||||
['data1', 300, 350, 300, 0, 0, 100],
|
||||
['data2', 130, 100, 140, 200, 150, 50]
|
||||
],
|
||||
types: {
|
||||
data1: 'step',
|
||||
data2: 'area-step'
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
// Bar Chart
|
||||
var chart4 = c3.generate({
|
||||
bindto: '#bar-chart',
|
||||
color: {
|
||||
pattern: Colors,
|
||||
},
|
||||
padding: {
|
||||
left: 30,
|
||||
right: 15,
|
||||
top: 0,
|
||||
bottom: 0,
|
||||
},
|
||||
data: {
|
||||
columns: [
|
||||
['data1', 30, 200, 100, 400, 150, 250],
|
||||
['data2', 130, 100, 140, 200, 150, 50]
|
||||
],
|
||||
type: 'bar'
|
||||
},
|
||||
bar: {
|
||||
width: {
|
||||
ratio: 0.5 // this makes bar width 50% of length between ticks
|
||||
}
|
||||
// or
|
||||
//width: 100 // this makes bar width 100px
|
||||
}
|
||||
});
|
||||
setTimeout(function () {
|
||||
chart4.load({
|
||||
columns: [
|
||||
['data3', 130, -150, 200, 300, -200, 100]
|
||||
]
|
||||
});
|
||||
}, 1000);
|
||||
|
||||
|
||||
// TimeSeries Chart
|
||||
var chart5 = c3.generate({
|
||||
bindto: '#timeseries-chart',
|
||||
color: {
|
||||
pattern: Colors,
|
||||
},
|
||||
padding: {
|
||||
left: 30,
|
||||
right: 15,
|
||||
top: 0,
|
||||
bottom: 0,
|
||||
},
|
||||
data: {
|
||||
x: 'x',
|
||||
// xFormat: '%Y%m%d', // 'xFormat' can be used as custom format of 'x'
|
||||
columns: [
|
||||
['x', '2013-01-01', '2013-01-02', '2013-01-03', '2013-01-04', '2013-01-05', '2013-01-06'],
|
||||
// ['x', '20130101', '20130102', '20130103', '20130104', '20130105', '20130106'],
|
||||
['data1', 30, 200, 100, 400, 150, 250],
|
||||
['data2', 130, 340, 200, 500, 250, 350]
|
||||
]
|
||||
},
|
||||
axis: {
|
||||
x: {
|
||||
type: 'timeseries',
|
||||
tick: {
|
||||
format: '%Y-%m-%d'
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
// setTimeout(function () {
|
||||
// chart5.load({
|
||||
// columns: [
|
||||
// ['data3', 400, 500, 450, 700, 600, 500]
|
||||
// ]
|
||||
// });
|
||||
// }, 1000);
|
||||
|
||||
|
||||
// Scatter Chart
|
||||
var chart6 = c3.generate({
|
||||
bindto: '#scatter-chart',
|
||||
color: {
|
||||
pattern: Colors,
|
||||
},
|
||||
padding: {
|
||||
left: 30,
|
||||
right: 15,
|
||||
top: 0,
|
||||
bottom: 0,
|
||||
},
|
||||
data: {
|
||||
xs: {
|
||||
setosa: 'setosa_x',
|
||||
versicolor: 'versicolor_x',
|
||||
},
|
||||
// iris data from R
|
||||
columns: [
|
||||
["setosa_x", 3.5, 3.0, 3.2, 3.1, 3.6, 3.9, 3.4, 3.4, 2.9, 3.1, 3.7, 3.4, 3.0, 3.0, 4.0, 4.4, 3.9, 3.5, 3.8, 3.8, 3.4, 3.7, 3.6, 3.3, 3.4, 3.0, 3.4, 3.5, 3.4, 3.2, 3.1, 3.4, 4.1, 4.2, 3.1, 3.2, 3.5, 3.6, 3.0, 3.4, 3.5, 2.3, 3.2, 3.5, 3.8, 3.0, 3.8, 3.2, 3.7, 3.3],
|
||||
["versicolor_x", 3.2, 3.2, 3.1, 2.3, 2.8, 2.8, 3.3, 2.4, 2.9, 2.7, 2.0, 3.0, 2.2, 2.9, 2.9, 3.1, 3.0, 2.7, 2.2, 2.5, 3.2, 2.8, 2.5, 2.8, 2.9, 3.0, 2.8, 3.0, 2.9, 2.6, 2.4, 2.4, 2.7, 2.7, 3.0, 3.4, 3.1, 2.3, 3.0, 2.5, 2.6, 3.0, 2.6, 2.3, 2.7, 3.0, 2.9, 2.9, 2.5, 2.8],
|
||||
["setosa", 0.2, 0.2, 0.2, 0.2, 0.2, 0.4, 0.3, 0.2, 0.2, 0.1, 0.2, 0.2, 0.1, 0.1, 0.2, 0.4, 0.4, 0.3, 0.3, 0.3, 0.2, 0.4, 0.2, 0.5, 0.2, 0.2, 0.4, 0.2, 0.2, 0.2, 0.2, 0.4, 0.1, 0.2, 0.2, 0.2, 0.2, 0.1, 0.2, 0.2, 0.3, 0.3, 0.2, 0.6, 0.4, 0.3, 0.2, 0.2, 0.2, 0.2],
|
||||
["versicolor", 1.4, 1.5, 1.5, 1.3, 1.5, 1.3, 1.6, 1.0, 1.3, 1.4, 1.0, 1.5, 1.0, 1.4, 1.3, 1.4, 1.5, 1.0, 1.5, 1.1, 1.8, 1.3, 1.5, 1.2, 1.3, 1.4, 1.4, 1.7, 1.5, 1.0, 1.1, 1.0, 1.2, 1.6, 1.5, 1.6, 1.5, 1.3, 1.3, 1.3, 1.2, 1.4, 1.2, 1.0, 1.3, 1.2, 1.3, 1.3, 1.1, 1.3],
|
||||
],
|
||||
type: 'scatter'
|
||||
},
|
||||
axis: {
|
||||
x: {
|
||||
label: 'Sepal.Width',
|
||||
tick: {
|
||||
fit: false
|
||||
}
|
||||
},
|
||||
y: {
|
||||
label: 'Petal.Width'
|
||||
}
|
||||
}
|
||||
});
|
||||
// setTimeout(function () {
|
||||
// chart6.load({
|
||||
// xs: {
|
||||
// virginica: 'virginica_x'
|
||||
// },
|
||||
// columns: [
|
||||
// ["virginica_x", 3.3, 2.7, 3.0, 2.9, 3.0, 3.0, 2.5, 2.9, 2.5, 3.6, 3.2, 2.7, 3.0, 2.5, 2.8, 3.2, 3.0, 3.8, 2.6, 2.2, 3.2, 2.8, 2.8, 2.7, 3.3, 3.2, 2.8, 3.0, 2.8, 3.0, 2.8, 3.8, 2.8, 2.8, 2.6, 3.0, 3.4, 3.1, 3.0, 3.1, 3.1, 3.1, 2.7, 3.2, 3.3, 3.0, 2.5, 3.0, 3.4, 3.0],
|
||||
// ["virginica", 2.5, 1.9, 2.1, 1.8, 2.2, 2.1, 1.7, 1.8, 1.8, 2.5, 2.0, 1.9, 2.1, 2.0, 2.4, 2.3, 1.8, 2.2, 2.3, 1.5, 2.3, 2.0, 2.0, 1.8, 2.1, 1.8, 1.8, 1.8, 2.1, 1.6, 1.9, 2.0, 2.2, 1.5, 1.4, 2.3, 2.4, 1.8, 1.8, 2.1, 2.4, 2.3, 1.9, 2.3, 2.5, 2.3, 1.9, 2.0, 2.3, 1.8],
|
||||
// ]
|
||||
// });
|
||||
// }, 1000);
|
||||
// setTimeout(function () {
|
||||
// chart6.unload({
|
||||
// ids: 'setosa'
|
||||
// });
|
||||
// }, 2000);
|
||||
// setTimeout(function () {
|
||||
// chart6.load({
|
||||
// columns: [
|
||||
// ["virginica", 0.2, 0.2, 0.2, 0.2, 0.2, 0.4, 0.3, 0.2, 0.2, 0.1, 0.2, 0.2, 0.1, 0.1, 0.2, 0.4, 0.4, 0.3, 0.3, 0.3, 0.2, 0.4, 0.2, 0.5, 0.2, 0.2, 0.4, 0.2, 0.2, 0.2, 0.2, 0.4, 0.1, 0.2, 0.2, 0.2, 0.2, 0.1, 0.2, 0.2, 0.3, 0.3, 0.2, 0.6, 0.4, 0.3, 0.2, 0.2, 0.2, 0.2],
|
||||
// ]
|
||||
// });
|
||||
// }, 3000);
|
||||
|
||||
|
||||
// Spline Chart
|
||||
var chart7 = c3.generate({
|
||||
bindto: '#spline-chart',
|
||||
color: {
|
||||
pattern: Colors,
|
||||
},
|
||||
padding: {
|
||||
left: 30,
|
||||
right: 15,
|
||||
top: 0,
|
||||
bottom: 0,
|
||||
},
|
||||
data: {
|
||||
columns: [
|
||||
['data1', 30, 200, 100, 400, 150, 250],
|
||||
['data2', 130, 100, 140, 200, 150, 50]
|
||||
],
|
||||
type: 'spline'
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
// Sub Navigation Chart
|
||||
var chart8 = c3.generate({
|
||||
bindto: '#subnav-chart',
|
||||
color: {
|
||||
pattern: Colors,
|
||||
},
|
||||
padding: {
|
||||
left: 25,
|
||||
right: 15,
|
||||
top: 0,
|
||||
bottom: 0,
|
||||
},
|
||||
data: {
|
||||
columns: [
|
||||
['sample', 30, 200, 100, 400, 150, 250]
|
||||
]
|
||||
},
|
||||
subchart: {
|
||||
show: true
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
// MouseWheel Zoom
|
||||
var chart9 = c3.generate({
|
||||
bindto: '#zoom-chart',
|
||||
color: {
|
||||
pattern: Colors,
|
||||
},
|
||||
padding: {
|
||||
left: 30,
|
||||
right: 15,
|
||||
top: 0,
|
||||
bottom: 0,
|
||||
},
|
||||
data: {
|
||||
columns: [
|
||||
['sample', 30, 200, 100, 400, 150, 250, 150, 200, 170, 240, 350, 150, 100, 400, 150, 250, 150, 200, 170, 240, 100, 150, 250, 150, 200, 170, 240, 30, 200, 100, 400, 150, 250, 150, 200, 170, 240, 350, 150, 100, 400, 350, 220, 250, 300, 270, 140, 150, 90, 150, 50, 120, 70, 40]
|
||||
]
|
||||
},
|
||||
zoom: {
|
||||
enabled: true
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
// Donut Chart
|
||||
var chart10 = c3.generate({
|
||||
bindto: '#donut-chart',
|
||||
color: {
|
||||
pattern: Colors,
|
||||
},
|
||||
data: {
|
||||
columns: [
|
||||
['data1', 30],
|
||||
['data2', 120],
|
||||
],
|
||||
type : 'donut',
|
||||
onclick: function (d, i) { console.log("onclick", d, i); },
|
||||
onmouseover: function (d, i) { console.log("onmouseover", d, i); },
|
||||
onmouseout: function (d, i) { console.log("onmouseout", d, i); }
|
||||
},
|
||||
donut: {
|
||||
title: "Iris Petal Width"
|
||||
}
|
||||
});
|
||||
// setTimeout(function () {
|
||||
// chart10.load({
|
||||
// columns: [
|
||||
// ["setosa", 0.2, 0.2, 0.2, 0.2, 0.2, 0.4, 0.3, 0.2, 0.2, 0.1, 0.2, 0.2, 0.1, 0.1, 0.2, 0.4, 0.4, 0.3, 0.3, 0.3, 0.2, 0.4, 0.2, 0.5, 0.2, 0.2, 0.4, 0.2, 0.2, 0.2, 0.2, 0.4, 0.1, 0.2, 0.2, 0.2, 0.2, 0.1, 0.2, 0.2, 0.3, 0.3, 0.2, 0.6, 0.4, 0.3, 0.2, 0.2, 0.2, 0.2],
|
||||
// ["versicolor", 1.4, 1.5, 1.5, 1.3, 1.5, 1.3, 1.6, 1.0, 1.3, 1.4, 1.0, 1.5, 1.0, 1.4, 1.3, 1.4, 1.5, 1.0, 1.5, 1.1, 1.8, 1.3, 1.5, 1.2, 1.3, 1.4, 1.4, 1.7, 1.5, 1.0, 1.1, 1.0, 1.2, 1.6, 1.5, 1.6, 1.5, 1.3, 1.3, 1.3, 1.2, 1.4, 1.2, 1.0, 1.3, 1.2, 1.3, 1.3, 1.1, 1.3],
|
||||
// ["virginica", 2.5, 1.9, 2.1, 1.8, 2.2, 2.1, 1.7, 1.8, 1.8, 2.5, 2.0, 1.9, 2.1, 2.0, 2.4, 2.3, 1.8, 2.2, 2.3, 1.5, 2.3, 2.0, 2.0, 1.8, 2.1, 1.8, 1.8, 1.8, 2.1, 1.6, 1.9, 2.0, 2.2, 1.5, 1.4, 2.3, 2.4, 1.8, 1.8, 2.1, 2.4, 2.3, 1.9, 2.3, 2.5, 2.3, 1.9, 2.0, 2.3, 1.8],
|
||||
// ]
|
||||
// });
|
||||
// }, 1500);
|
||||
// setTimeout(function () {
|
||||
// chart10.unload({
|
||||
// ids: 'data1'
|
||||
// });
|
||||
// chart10.unload({
|
||||
// ids: 'data2'
|
||||
// });
|
||||
// }, 2500);
|
||||
|
||||
|
||||
// Guage Chart
|
||||
var chart11 = c3.generate({
|
||||
bindto: '#guage-chart',
|
||||
color: {
|
||||
pattern: Colors,
|
||||
threshold: {
|
||||
// unit: 'value', // percentage is default
|
||||
// max: 200, // 100 is default
|
||||
values: [30, 60, 90, 100]
|
||||
}
|
||||
},
|
||||
data: {
|
||||
columns: [
|
||||
['data', 91.4]
|
||||
],
|
||||
type: 'gauge',
|
||||
onclick: function (d, i) { console.log("onclick", d, i); },
|
||||
onmouseover: function (d, i) { console.log("onmouseover", d, i); },
|
||||
onmouseout: function (d, i) { console.log("onmouseout", d, i); }
|
||||
},
|
||||
gauge: {
|
||||
// label: {
|
||||
// format: function(value, ratio) {
|
||||
// return value;
|
||||
// },
|
||||
// show: false // to turn off the min/max labels.
|
||||
// },
|
||||
// min: 0, // 0 is default, //can handle negative min e.g. vacuum / voltage / current flow / rate of change
|
||||
// max: 100, // 100 is default
|
||||
// units: ' %',
|
||||
// width: 39 // for adjusting arc thickness
|
||||
},
|
||||
size: {
|
||||
height: 180
|
||||
}
|
||||
});
|
||||
// setTimeout(function () {
|
||||
// chart11.load({
|
||||
// columns: [['data', 10]]
|
||||
// });
|
||||
// }, 1000);
|
||||
// setTimeout(function () {
|
||||
// chart11.load({
|
||||
// columns: [['data', 50]]
|
||||
// });
|
||||
// }, 2000);
|
||||
// setTimeout(function () {
|
||||
// chart11.load({
|
||||
// columns: [['data', 70]]
|
||||
// });
|
||||
// }, 3000);
|
||||
// setTimeout(function () {
|
||||
// chart11.load({
|
||||
// columns: [['data', 0]]
|
||||
// });
|
||||
// }, 4000);
|
||||
// setTimeout(function () {
|
||||
// chart11.load({
|
||||
// columns: [['data', 100]]
|
||||
// });
|
||||
// }, 5000);
|
||||
|
||||
// Pie Chart
|
||||
var chart12 = c3.generate({
|
||||
bindto: '#pie-chart',
|
||||
color: {
|
||||
pattern: Colors,
|
||||
},
|
||||
data: {
|
||||
// iris data from R
|
||||
columns: [
|
||||
['data1', 30],
|
||||
['data2', 120],
|
||||
],
|
||||
type : 'pie',
|
||||
onclick: function (d, i) { console.log("onclick", d, i); },
|
||||
onmouseover: function (d, i) { console.log("onmouseover", d, i); },
|
||||
onmouseout: function (d, i) { console.log("onmouseout", d, i); }
|
||||
}
|
||||
});
|
||||
// setTimeout(function () {
|
||||
// chart12.load({
|
||||
// columns: [
|
||||
// ["setosa", 0.2, 0.2, 0.2, 0.2, 0.2, 0.4, 0.3, 0.2, 0.2, 0.1, 0.2, 0.2, 0.1, 0.1, 0.2, 0.4, 0.4, 0.3, 0.3, 0.3, 0.2, 0.4, 0.2, 0.5, 0.2, 0.2, 0.4, 0.2, 0.2, 0.2, 0.2, 0.4, 0.1, 0.2, 0.2, 0.2, 0.2, 0.1, 0.2, 0.2, 0.3, 0.3, 0.2, 0.6, 0.4, 0.3, 0.2, 0.2, 0.2, 0.2],
|
||||
// ["versicolor", 1.4, 1.5, 1.5, 1.3, 1.5, 1.3, 1.6, 1.0, 1.3, 1.4, 1.0, 1.5, 1.0, 1.4, 1.3, 1.4, 1.5, 1.0, 1.5, 1.1, 1.8, 1.3, 1.5, 1.2, 1.3, 1.4, 1.4, 1.7, 1.5, 1.0, 1.1, 1.0, 1.2, 1.6, 1.5, 1.6, 1.5, 1.3, 1.3, 1.3, 1.2, 1.4, 1.2, 1.0, 1.3, 1.2, 1.3, 1.3, 1.1, 1.3],
|
||||
// ["virginica", 2.5, 1.9, 2.1, 1.8, 2.2, 2.1, 1.7, 1.8, 1.8, 2.5, 2.0, 1.9, 2.1, 2.0, 2.4, 2.3, 1.8, 2.2, 2.3, 1.5, 2.3, 2.0, 2.0, 1.8, 2.1, 1.8, 1.8, 1.8, 2.1, 1.6, 1.9, 2.0, 2.2, 1.5, 1.4, 2.3, 2.4, 1.8, 1.8, 2.1, 2.4, 2.3, 1.9, 2.3, 2.5, 2.3, 1.9, 2.0, 2.3, 1.8],
|
||||
// ]
|
||||
// });
|
||||
// }, 1500);
|
||||
// setTimeout(function () {
|
||||
// chart12.unload({
|
||||
// ids: 'data1'
|
||||
// });
|
||||
// chart12.unload({
|
||||
// ids: 'data2'
|
||||
// });
|
||||
// }, 2500);
|
||||
|
||||
|
||||
// Combination Chart
|
||||
var chart13 = c3.generate({
|
||||
bindto: '#combo-chart',
|
||||
color: {
|
||||
pattern: Colors,
|
||||
},
|
||||
padding: {
|
||||
left: 30,
|
||||
right: 15,
|
||||
top: 0,
|
||||
bottom: 0,
|
||||
},
|
||||
data: {
|
||||
columns: [
|
||||
['data1', 30, 20, 50, 40, 60, 50],
|
||||
['data2', 200, 130, 90, 240, 130, 220],
|
||||
['data3', 300, 200, 160, 400, 250, 250],
|
||||
['data4', 200, 130, 90, 240, 130, 220],
|
||||
['data5', 130, 120, 150, 140, 160, 150],
|
||||
['data6', 90, 70, 20, 50, 60, 120],
|
||||
],
|
||||
type: 'bar',
|
||||
types: {
|
||||
data3: 'spline',
|
||||
data4: 'line',
|
||||
data6: 'area',
|
||||
},
|
||||
groups: [
|
||||
['data1','data2']
|
||||
]
|
||||
}
|
||||
});
|
||||
|
||||
};
|
||||
return {
|
||||
init: function () {
|
||||
runD3Plugins();
|
||||
runD3Charts();
|
||||
}
|
||||
};
|
||||
}();
|
||||
302
libraries/framework/js/demo/charts/flot.js
Normal file
302
libraries/framework/js/demo/charts/flot.js
Normal file
File diff suppressed because one or more lines are too long
1386
libraries/framework/js/demo/charts/highcharts.js
Normal file
1386
libraries/framework/js/demo/charts/highcharts.js
Normal file
File diff suppressed because it is too large
Load Diff
545
libraries/framework/js/demo/demo.js
Normal file
545
libraries/framework/js/demo/demo.js
Normal file
@@ -0,0 +1,545 @@
|
||||
'use strict';
|
||||
/*! main.js - v0.1.1
|
||||
* http://admindesigns.com/
|
||||
* Copyright (c) 2015 Admin Designs;*/
|
||||
|
||||
/* Demo theme functions. Required for
|
||||
* Settings Pane and misc functions */
|
||||
var Demo = function() {
|
||||
|
||||
// Demo AdminForm Functions
|
||||
var runDemoForms = function() {
|
||||
|
||||
// Prevents directory response when submitting a demo form
|
||||
$('.admin-form').on('submit', function(e) {
|
||||
|
||||
if ($('body.timeline-page').length || $('body.admin-validation-page').length) {
|
||||
return;
|
||||
}
|
||||
e.preventDefault;
|
||||
alert('Your form has submitted!');
|
||||
return false;
|
||||
});
|
||||
|
||||
// give file-upload preview onclick functionality
|
||||
var fileUpload = $('.fileupload-preview');
|
||||
if (fileUpload.length) {
|
||||
|
||||
fileUpload.each(function(i, e) {
|
||||
var fileForm = $(e).parents('.fileupload').find('.btn-file > input');
|
||||
$(e).on('click', function() {
|
||||
fileForm.click();
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// Demo Header Functions
|
||||
var runDemoTopbar = function() {
|
||||
|
||||
// Init jQuery Multi-Select
|
||||
if ($("#topbar-multiple").length) {
|
||||
$('#topbar-multiple').multiselect({
|
||||
buttonClass: 'btn btn-default btn-sm ph15',
|
||||
dropRight: true
|
||||
});
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// Demo AdminForm Functions
|
||||
var runDemoSourceCode = function() {
|
||||
|
||||
var bsElement = $(".bs-component");
|
||||
|
||||
if (bsElement.length) {
|
||||
|
||||
// allow caching of demo resources
|
||||
$.ajaxSetup({
|
||||
cache: true
|
||||
});
|
||||
|
||||
// load highlight.js plugin stylesheet from admindesigns.com
|
||||
$("<link/>", {
|
||||
rel: "stylesheet",
|
||||
type: "text/css",
|
||||
href: "http://admindesigns.com/demos/admindesigns/theme/vendor/plugins/highlight/styles/github.css"
|
||||
}).appendTo("head");
|
||||
|
||||
// load highlight.js plugin script from admindesigns.com
|
||||
$.getScript("http://admindesigns.com/demos/admindesigns/theme/vendor/plugins/highlight/highlight.pack.js");
|
||||
|
||||
// Define Source code modal
|
||||
var modalSource = '<div class="modal fade" id="source-modal" tabindex="-1" role="dialog"> ' +
|
||||
'<div class="modal-dialog modal-lg"> ' +
|
||||
'<div class="modal-content"> ' +
|
||||
'<div class="modal-header"> ' +
|
||||
'<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> ' +
|
||||
'<h4 class="modal-title" id="myModalLabel">Source Code HTML</h4> ' +
|
||||
'</div> ' +
|
||||
'<div class="modal-body"> ' +
|
||||
'<div class="highlight"> ' +
|
||||
'<pre> ' +
|
||||
'<code class="language-html" data-lang="html"></code> ' +
|
||||
'</pre> ' +
|
||||
'</div> </div> ' +
|
||||
'<div class="modal-footer"> ' +
|
||||
'<button type="button" class="btn btn-primary btn-clipboard">Highlight Source</button> ' +
|
||||
'</div> </div> </div> </div> </div>';
|
||||
|
||||
|
||||
// Append modal to body
|
||||
$(modalSource).appendTo('body');
|
||||
|
||||
// Code btn definition
|
||||
var codeBtn = $("<div id='source-button' class='btn btn-primary btn-xs'>< ></div>")
|
||||
codeBtn.click(function() {
|
||||
var html = $(this).parent().html();
|
||||
html = cleanSource(html);
|
||||
$("#source-modal pre").text(html);
|
||||
$("#source-modal").modal();
|
||||
|
||||
// Init Highlight.js plugin after delay
|
||||
var source = $("#source-modal").find('pre');
|
||||
setTimeout(function() {
|
||||
source.each(function(i, block) {
|
||||
hljs.highlightBlock(block);
|
||||
});
|
||||
}, 250);
|
||||
|
||||
// Highlight code text on click
|
||||
$('.btn-clipboard').on('click', function() {
|
||||
var selection = $(this).parents('.modal-dialog').find('pre');
|
||||
selection.selectText();
|
||||
});
|
||||
|
||||
$(document).keypress(function(e) {
|
||||
if (e.which == 99) {
|
||||
console.log('go')
|
||||
// highlight source code if user preses "c" key
|
||||
$('.btn-clipboard').click();
|
||||
}
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
// Show code btn on hover
|
||||
bsElement.hover(function() {
|
||||
$(this).append(codeBtn);
|
||||
codeBtn.show();
|
||||
}, function() {
|
||||
codeBtn.hide();
|
||||
});
|
||||
|
||||
// Show code modal on click
|
||||
var cleanSource = function(html) {
|
||||
var lines = html.split(/\n/);
|
||||
|
||||
lines.shift();
|
||||
lines.splice(-1, 1);
|
||||
|
||||
var indentSize = lines[0].length - lines[0].trim().length,
|
||||
re = new RegExp(" {" + indentSize + "}");
|
||||
|
||||
lines = lines.map(function(line) {
|
||||
if (line.match(re)) {
|
||||
line = line.substring(indentSize);
|
||||
}
|
||||
return line;
|
||||
});
|
||||
|
||||
lines = lines.join("\n");
|
||||
return lines;
|
||||
}
|
||||
|
||||
// Helper function to highlight code text
|
||||
jQuery.fn.selectText = function() {
|
||||
var doc = document,
|
||||
element = this[0],
|
||||
range, selection;
|
||||
if (doc.body.createTextRange) {
|
||||
range = document.body.createTextRange();
|
||||
range.moveToElementText(element);
|
||||
range.select();
|
||||
} else if (window.getSelection) {
|
||||
selection = window.getSelection();
|
||||
range = document.createRange();
|
||||
range.selectNodeContents(element);
|
||||
selection.removeAllRanges();
|
||||
selection.addRange(range);
|
||||
}
|
||||
};
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// DEMO FUNCTIONS - primarily trash
|
||||
var runDemoSettings = function() {
|
||||
|
||||
if ($('#skin-toolbox').length) {
|
||||
|
||||
// Toggles Theme Settings Tray
|
||||
$('#skin-toolbox .panel-heading').on('click', function() {
|
||||
$('#skin-toolbox').toggleClass('toolbox-open');
|
||||
});
|
||||
// Disable text selection
|
||||
$('#skin-toolbox .panel-heading').disableSelection();
|
||||
|
||||
// Cache component elements
|
||||
var Body = $('body');
|
||||
var Breadcrumbs = $('#topbar');
|
||||
var Sidebar = $('#sidebar_left');
|
||||
var Header = $('.navbar');
|
||||
var Branding = Header.children('.navbar-branding');
|
||||
|
||||
// Possible Component Skins
|
||||
var headerSkins = "bg-primary bg-success bg-info bg-warning bg-danger bg-alert bg-system bg-dark";
|
||||
var sidebarSkins = "sidebar-light light dark";
|
||||
|
||||
// Theme Settings
|
||||
var settingsObj = {
|
||||
// 'headerTone': true,
|
||||
'headerSkin': '',
|
||||
'sidebarSkin': 'sidebar-default',
|
||||
'headerState': 'navbar-fixed-top',
|
||||
'sidebarState': 'affix',
|
||||
'sidebarAlign': '',
|
||||
'breadcrumbState': 'relative',
|
||||
'breadcrumbHidden': 'visible',
|
||||
};
|
||||
|
||||
// Local Storage Theme Key
|
||||
var themeKey = 'admin-settings1';
|
||||
|
||||
// Local Storage Theme Get
|
||||
var themeGet = localStorage.getItem(themeKey);
|
||||
|
||||
// Set new key if one doesn't exist
|
||||
if (themeGet === null) {
|
||||
localStorage.setItem(themeKey, JSON.stringify(settingsObj));
|
||||
themeGet = localStorage.getItem(themeKey);
|
||||
}
|
||||
|
||||
// Restore Theme Settings onload from Local Storage Key
|
||||
(function() {
|
||||
|
||||
var settingsParse = JSON.parse(themeGet);
|
||||
settingsObj = settingsParse;
|
||||
|
||||
$.each(settingsParse, function(i, e) {
|
||||
switch (i) {
|
||||
case 'headerSkin':
|
||||
Header.removeClass(headerSkins).addClass(e);
|
||||
Branding.removeClass(headerSkins).addClass(e + ' dark');
|
||||
if (e === "bg-light") {
|
||||
Branding.removeClass(headerSkins);
|
||||
} else {
|
||||
Branding.removeClass(headerSkins).addClass(e);
|
||||
}
|
||||
$('#toolbox-header-skin input[value="bg-light"]').prop('checked', false);
|
||||
$('#toolbox-header-skin input[value="' + e + '"]').prop('checked', true);
|
||||
break;
|
||||
case 'sidebarSkin':
|
||||
Sidebar.removeClass(sidebarSkins).addClass(e);
|
||||
$('#toolbox-sidebar-skin input[value="bg-light"]').prop('checked', false);
|
||||
$('#toolbox-sidebar-skin input[value="' + e + '"]').prop('checked', true);
|
||||
break;
|
||||
case 'headerState':
|
||||
if (e === "navbar-fixed-top") {
|
||||
Header.addClass('navbar-fixed-top');
|
||||
$('#header-option').prop('checked', true);
|
||||
} else {
|
||||
Header.removeClass('navbar-fixed-top');
|
||||
$('#header-option').prop('checked', false);
|
||||
|
||||
// Remove left over inline styles from nanoscroller plugin
|
||||
Sidebar.nanoScroller({
|
||||
destroy: true
|
||||
});
|
||||
Sidebar.find('.nano-content').attr('style', '');
|
||||
Sidebar.removeClass('affix');
|
||||
$('#sidebar-option').prop('checked', false);
|
||||
}
|
||||
break;
|
||||
case 'sidebarState':
|
||||
if (e === "affix") {
|
||||
Sidebar.addClass('affix');
|
||||
$('#sidebar-option').prop('checked', true);
|
||||
} else {
|
||||
// Remove left over inline styles from nanoscroller plugin
|
||||
Sidebar.nanoScroller({
|
||||
destroy: true
|
||||
});
|
||||
Sidebar.find('.nano-content').attr('style', '');
|
||||
Sidebar.removeClass('affix');
|
||||
$('#sidebar-option').prop('checked', false);
|
||||
}
|
||||
break;
|
||||
case 'sidebarAlign':
|
||||
if (e === "sb-top") {
|
||||
Body.addClass('sb-top');
|
||||
$('#sidebar-align').prop('checked', true);
|
||||
} else {
|
||||
Body.removeClass('sb-top');
|
||||
$('#sidebar-align').prop('checked', false);
|
||||
}
|
||||
break;
|
||||
case 'breadcrumbState':
|
||||
if (e === "affix") {
|
||||
Breadcrumbs.addClass('affix');
|
||||
$('#breadcrumb-option').prop('checked', true);
|
||||
} else {
|
||||
Breadcrumbs.removeClass('affix');
|
||||
$('#breadcrumb-option').prop('checked', false);
|
||||
}
|
||||
break;
|
||||
case 'breadcrumbHidden':
|
||||
if (Breadcrumbs.hasClass('hidden')) {
|
||||
$('#breadcrumb-hidden').prop('checked', true);
|
||||
}
|
||||
else {
|
||||
if (e === "hidden") {
|
||||
Breadcrumbs.addClass('hidden');
|
||||
$('#breadcrumb-hidden').prop('checked', true);
|
||||
} else {
|
||||
Breadcrumbs.removeClass('hidden');
|
||||
$('#breadcrumb-hidden').prop('checked', false);
|
||||
}
|
||||
}
|
||||
break;
|
||||
}
|
||||
});
|
||||
|
||||
})();
|
||||
|
||||
// Header Skin Switcher
|
||||
$('#toolbox-header-skin input').on('click', function() {
|
||||
var This = $(this);
|
||||
var Val = This.val();
|
||||
var ID = This.attr('id');
|
||||
|
||||
// Swap Header Skin
|
||||
Header.removeClass(headerSkins).addClass(Val);
|
||||
Branding.removeClass(headerSkins).addClass(Val + ' dark');
|
||||
|
||||
// Save new Skin to Settings Key
|
||||
settingsObj['headerSkin'] = Val;
|
||||
localStorage.setItem(themeKey, JSON.stringify(settingsObj));
|
||||
|
||||
});
|
||||
|
||||
// Sidebar Skin Switcher
|
||||
$('#toolbox-sidebar-skin input').on('click', function() {
|
||||
var Val = $(this).val();
|
||||
|
||||
// Swap Sidebar Skin
|
||||
Sidebar.removeClass(sidebarSkins).addClass(Val);
|
||||
|
||||
// Save new Skin to Settings Key
|
||||
settingsObj['sidebarSkin'] = Val;
|
||||
localStorage.setItem(themeKey, JSON.stringify(settingsObj));
|
||||
});
|
||||
|
||||
// Fixed Header Switcher
|
||||
$('#header-option').on('click', function() {
|
||||
var headerState = "navbar-fixed-top";
|
||||
|
||||
if (Header.hasClass('navbar-fixed-top')) {
|
||||
Header.removeClass('navbar-fixed-top');
|
||||
headerState = "relative";
|
||||
|
||||
// Remove Fixed Sidebar option if navbar isnt fixed
|
||||
Sidebar.removeClass('affix');
|
||||
|
||||
// Remove left over inline styles from nanoscroller plugin
|
||||
Sidebar.nanoScroller({
|
||||
destroy: true
|
||||
});
|
||||
Sidebar.find('.nano-content').attr('style', '');
|
||||
Sidebar.removeClass('affix');
|
||||
$('#sidebar-option').prop('checked', false);
|
||||
|
||||
$('#sidebar-option').parent('.checkbox-custom').addClass('checkbox-disabled').end().prop('checked', false).attr('disabled', true);
|
||||
settingsObj['sidebarState'] = "";
|
||||
localStorage.setItem(themeKey, JSON.stringify(settingsObj));
|
||||
|
||||
// Remove Fixed Breadcrumb option if navbar isnt fixed
|
||||
Breadcrumbs.removeClass('affix');
|
||||
$('#breadcrumb-option').parent('.checkbox-custom').addClass('checkbox-disabled').end().prop('checked', false).attr('disabled', true);
|
||||
settingsObj['breadcrumbState'] = "";
|
||||
localStorage.setItem(themeKey, JSON.stringify(settingsObj));
|
||||
|
||||
} else {
|
||||
Header.addClass('navbar-fixed-top');
|
||||
headerState = "navbar-fixed-top";
|
||||
// Enable fixed sidebar and breadcrumb options
|
||||
$('#sidebar-option').parent('.checkbox-custom').removeClass('checkbox-disabled').end().attr('disabled', false);
|
||||
$('#breadcrumb-option').parent('.checkbox-custom').removeClass('checkbox-disabled').end().attr('disabled', false);
|
||||
}
|
||||
|
||||
// Save new setting to Settings Key
|
||||
settingsObj['headerState'] = headerState;
|
||||
localStorage.setItem(themeKey, JSON.stringify(settingsObj));
|
||||
});
|
||||
|
||||
// Fixed Sidebar Switcher
|
||||
$('#sidebar-option').on('click', function() {
|
||||
var sidebarState = "";
|
||||
|
||||
if (Sidebar.hasClass('affix')) {
|
||||
|
||||
// Remove left over inline styles from nanoscroller plugin
|
||||
Sidebar.nanoScroller({
|
||||
destroy: true
|
||||
});
|
||||
Sidebar.find('.nano-content').attr('style', '');
|
||||
Sidebar.removeClass('affix');
|
||||
|
||||
sidebarState = "";
|
||||
} else {
|
||||
Sidebar.addClass('affix');
|
||||
// If sidebar is fixed init nano scrollbar plugin
|
||||
|
||||
if ($('.nano.affix').length) {
|
||||
$(".nano.affix").nanoScroller({
|
||||
preventPageScrolling: true
|
||||
});
|
||||
}
|
||||
sidebarState = "affix";
|
||||
|
||||
}
|
||||
|
||||
$(window).trigger('resize');
|
||||
|
||||
// Save new setting to Settings Key
|
||||
settingsObj['sidebarState'] = sidebarState;
|
||||
localStorage.setItem(themeKey, JSON.stringify(settingsObj));
|
||||
});
|
||||
|
||||
// Sidebar Horizontal Setting Switcher
|
||||
$('#sidebar-align').on('click', function() {
|
||||
|
||||
var sidebarAlign = "";
|
||||
|
||||
if (Body.hasClass('sb-top')) {
|
||||
Body.removeClass('sb-top');
|
||||
sidebarAlign = "";
|
||||
} else {
|
||||
Body.removeClass('sb-top');
|
||||
sidebarAlign = "sb-top";
|
||||
}
|
||||
|
||||
// Save new setting to Settings Key
|
||||
settingsObj['sidebarAlign'] = sidebarAlign;
|
||||
localStorage.setItem(themeKey, JSON.stringify(settingsObj));
|
||||
});
|
||||
|
||||
// Fixed Breadcrumb Switcher
|
||||
$('#breadcrumb-option').on('click', function() {
|
||||
|
||||
var breadcrumbState = "";
|
||||
|
||||
if (Breadcrumbs.hasClass('affix')) {
|
||||
Breadcrumbs.removeClass('affix');
|
||||
breadcrumbState = "";
|
||||
} else {
|
||||
Breadcrumbs.addClass('affix');
|
||||
breadcrumbState = "affix";
|
||||
}
|
||||
|
||||
// Save new setting to Settings Key
|
||||
settingsObj['breadcrumbState'] = breadcrumbState;
|
||||
localStorage.setItem(themeKey, JSON.stringify(settingsObj));
|
||||
});
|
||||
|
||||
// Hidden Breadcrumb Switcher
|
||||
$('#breadcrumb-hidden').on('click', function() {
|
||||
var breadcrumbState = "";
|
||||
|
||||
if (Breadcrumbs.hasClass('hidden')) {
|
||||
Breadcrumbs.removeClass('hidden');
|
||||
breadcrumbState = "";
|
||||
} else {
|
||||
Breadcrumbs.addClass('hidden');
|
||||
breadcrumbState = "hidden";
|
||||
}
|
||||
|
||||
// Save new setting to Settings Key
|
||||
settingsObj['breadcrumbHidden'] = breadcrumbState;
|
||||
localStorage.setItem(themeKey, JSON.stringify(settingsObj));
|
||||
});
|
||||
|
||||
// Clear local storage button and confirm dialog
|
||||
$("#clearLocalStorage").on('click', function() {
|
||||
|
||||
// check for Bootbox plugin - should be in core
|
||||
if (bootbox.confirm) {
|
||||
bootbox.confirm("Are You Sure?!", function(e) {
|
||||
|
||||
// e returns true if user clicks "accept"
|
||||
// false if "cancel" or dismiss icon are clicked
|
||||
if (e) {
|
||||
// Timeout simply gives the user a second for the modal to
|
||||
// fade away so they can visibly see the options reset
|
||||
setTimeout(function() {
|
||||
localStorage.clear();
|
||||
location.reload();
|
||||
}, 200);
|
||||
} else {
|
||||
return;
|
||||
}
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
var runFullscreenDemo = function() {
|
||||
|
||||
// If browser is IE we need to pass the fullsreen plugin the 'html' selector
|
||||
// rather than the 'body' selector. Fixes a fullscreen overflow bug
|
||||
var selector = $('html');
|
||||
|
||||
var ua = window.navigator.userAgent;
|
||||
var old_ie = ua.indexOf('MSIE ');
|
||||
var new_ie = ua.indexOf('Trident/');
|
||||
if ((old_ie > -1) || (new_ie > -1)) { selector = $('body'); }
|
||||
|
||||
// Fullscreen Functionality
|
||||
var screenCheck = $.fullscreen.isNativelySupported();
|
||||
|
||||
// Attach handler to navbar fullscreen button
|
||||
$('.request-fullscreen').on('click', function() {
|
||||
|
||||
// Check for fullscreen browser support
|
||||
if (screenCheck) {
|
||||
if ($.fullscreen.isFullScreen()) {
|
||||
$.fullscreen.exit();
|
||||
}
|
||||
else {
|
||||
selector.fullscreen({
|
||||
overflow: 'auto'
|
||||
});
|
||||
}
|
||||
} else {
|
||||
alert('Your browser does not support fullscreen mode.')
|
||||
}
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
return {
|
||||
init: function() {
|
||||
runDemoForms();
|
||||
runDemoTopbar();
|
||||
runDemoSourceCode();
|
||||
runDemoSettings();
|
||||
runFullscreenDemo();
|
||||
}
|
||||
}
|
||||
}();
|
||||
1320
libraries/framework/js/demo/widgets.js
Normal file
1320
libraries/framework/js/demo/widgets.js
Normal file
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user