Initial commit

This commit is contained in:
Khanh Ngo
2015-12-13 16:34:12 +07:00
commit 2dac8205f6
3113 changed files with 514935 additions and 0 deletions

View File

@ -0,0 +1,175 @@
var Calendar = function() {
return {
//main function to initiate the module
init: function() {
Calendar.initCalendar();
},
initCalendar: function() {
if (!jQuery().fullCalendar) {
return;
}
var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();
var h = {};
if (Metronic.isRTL()) {
if ($('#calendar').parents(".portlet").width() <= 720) {
$('#calendar').addClass("mobile");
h = {
right: 'title, prev, next',
center: '',
left: 'agendaDay, agendaWeek, month, today'
};
} else {
$('#calendar').removeClass("mobile");
h = {
right: 'title',
center: '',
left: 'agendaDay, agendaWeek, month, today, prev,next'
};
}
} else {
if ($('#calendar').parents(".portlet").width() <= 720) {
$('#calendar').addClass("mobile");
h = {
left: 'title, prev, next',
center: '',
right: 'today,month,agendaWeek,agendaDay'
};
} else {
$('#calendar').removeClass("mobile");
h = {
left: 'title',
center: '',
right: 'prev,next,today,month,agendaWeek,agendaDay'
};
}
}
var initDrag = function(el) {
// 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(el.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
el.data('eventObject', eventObject);
// make the event draggable using jQuery UI
el.draggable({
zIndex: 999,
revert: true, // will cause the event to go back to its
revertDuration: 0 // original position after the drag
});
};
var addEvent = function(title) {
title = title.length === 0 ? "Untitled Event" : title;
var html = $('<div class="external-event label label-default">' + title + '</div>');
jQuery('#event_box').append(html);
initDrag(html);
};
$('#external-events div.external-event').each(function() {
initDrag($(this));
});
$('#event_add').unbind('click').click(function() {
var title = $('#event_title').val();
addEvent(title);
});
//predefined events
$('#event_box').html("");
addEvent("My Event 1");
addEvent("My Event 2");
addEvent("My Event 3");
addEvent("My Event 4");
addEvent("My Event 5");
addEvent("My Event 6");
$('#calendar').fullCalendar('destroy'); // destroy the calendar
$('#calendar').fullCalendar({ //re-initialize the calendar
header: h,
defaultView: 'month', // change default view with available options from http://arshaw.com/fullcalendar/docs/views/Available_Views/
slotMinutes: 15,
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;
copiedEventObject.className = $(this).attr("data-class");
// 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();
}
},
events: [{
title: 'All Day Event',
start: new Date(y, m, 1),
backgroundColor: Metronic.getBrandColor('yellow')
}, {
title: 'Long Event',
start: new Date(y, m, d - 5),
end: new Date(y, m, d - 2),
backgroundColor: Metronic.getBrandColor('green')
}, {
title: 'Repeating Event',
start: new Date(y, m, d - 3, 16, 0),
allDay: false,
backgroundColor: Metronic.getBrandColor('red')
}, {
title: 'Repeating Event',
start: new Date(y, m, d + 4, 16, 0),
allDay: false,
backgroundColor: Metronic.getBrandColor('green')
}, {
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),
backgroundColor: Metronic.getBrandColor('grey'),
allDay: false,
}, {
title: 'Birthday Party',
start: new Date(y, m, d + 1, 19, 0),
end: new Date(y, m, d + 1, 22, 30),
backgroundColor: Metronic.getBrandColor('purple'),
allDay: false,
}, {
title: 'Click for Google',
start: new Date(y, m, 28),
end: new Date(y, m, 29),
backgroundColor: Metronic.getBrandColor('yellow'),
url: 'http://google.com/',
}]
});
}
};
}();

File diff suppressed because it is too large Load Diff

View File

@ -0,0 +1,899 @@
var ChartsFlotcharts = function() {
return {
//main function to initiate the module
init: function() {
Metronic.addResizeHandler(function() {
Charts.initPieCharts();
});
},
initCharts: function() {
if (!jQuery.plot) {
return;
}
var data = [];
var totalPoints = 250;
// random data generator for plot charts
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;
}
//Basic Chart
function chart1() {
if ($('#chart_1').size() != 1) {
return;
}
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($("#chart_1"), [{
label: "sin(x)",
data: d1,
lines: {
lineWidth: 1,
},
shadowSize: 0
}, {
label: "cos(x)",
data: d2,
lines: {
lineWidth: 1,
},
shadowSize: 0
}, {
label: "tan(x)",
data: d3,
lines: {
lineWidth: 1,
},
shadowSize: 0
}], {
series: {
lines: {
show: true,
},
points: {
show: true,
fill: true,
radius: 3,
lineWidth: 1
}
},
xaxis: {
tickColor: "#eee",
ticks: [0, [Math.PI / 2, "\u03c0/2"],
[Math.PI, "\u03c0"],
[Math.PI * 3 / 2, "3\u03c0/2"],
[Math.PI * 2, "2\u03c0"]
]
},
yaxis: {
tickColor: "#eee",
ticks: 10,
min: -2,
max: 2
},
grid: {
borderColor: "#eee",
borderWidth: 1
}
});
}
//Interactive Chart
function chart2() {
if ($('#chart_2').size() != 1) {
return;
}
function randValue() {
return (Math.floor(Math.random() * (1 + 40 - 20))) + 20;
}
var pageviews = [
[1, randValue()],
[2, randValue()],
[3, 2 + randValue()],
[4, 3 + randValue()],
[5, 5 + randValue()],
[6, 10 + randValue()],
[7, 15 + randValue()],
[8, 20 + randValue()],
[9, 25 + randValue()],
[10, 30 + randValue()],
[11, 35 + randValue()],
[12, 25 + randValue()],
[13, 15 + randValue()],
[14, 20 + randValue()],
[15, 45 + randValue()],
[16, 50 + randValue()],
[17, 65 + randValue()],
[18, 70 + randValue()],
[19, 85 + randValue()],
[20, 80 + randValue()],
[21, 75 + randValue()],
[22, 80 + randValue()],
[23, 75 + randValue()],
[24, 70 + randValue()],
[25, 65 + randValue()],
[26, 75 + randValue()],
[27, 80 + randValue()],
[28, 85 + randValue()],
[29, 90 + randValue()],
[30, 95 + randValue()]
];
var visitors = [
[1, randValue() - 5],
[2, randValue() - 5],
[3, randValue() - 5],
[4, 6 + randValue()],
[5, 5 + randValue()],
[6, 20 + randValue()],
[7, 25 + randValue()],
[8, 36 + randValue()],
[9, 26 + randValue()],
[10, 38 + randValue()],
[11, 39 + randValue()],
[12, 50 + randValue()],
[13, 51 + randValue()],
[14, 12 + randValue()],
[15, 13 + randValue()],
[16, 14 + randValue()],
[17, 15 + randValue()],
[18, 15 + randValue()],
[19, 16 + randValue()],
[20, 17 + randValue()],
[21, 18 + randValue()],
[22, 19 + randValue()],
[23, 20 + randValue()],
[24, 21 + randValue()],
[25, 14 + randValue()],
[26, 24 + randValue()],
[27, 25 + randValue()],
[28, 26 + randValue()],
[29, 27 + randValue()],
[30, 31 + randValue()]
];
var plot = $.plot($("#chart_2"), [{
data: pageviews,
label: "Unique Visits",
lines: {
lineWidth: 1,
},
shadowSize: 0
}, {
data: visitors,
label: "Page Views",
lines: {
lineWidth: 1,
},
shadowSize: 0
}], {
series: {
lines: {
show: true,
lineWidth: 2,
fill: true,
fillColor: {
colors: [{
opacity: 0.05
}, {
opacity: 0.01
}]
}
},
points: {
show: true,
radius: 3,
lineWidth: 1
},
shadowSize: 2
},
grid: {
hoverable: true,
clickable: true,
tickColor: "#eee",
borderColor: "#eee",
borderWidth: 1
},
colors: ["#d12610", "#37b7f3", "#52e136"],
xaxis: {
ticks: 11,
tickDecimals: 0,
tickColor: "#eee",
},
yaxis: {
ticks: 11,
tickDecimals: 0,
tickColor: "#eee",
}
});
function showTooltip(x, y, contents) {
$('<div id="tooltip">' + contents + '</div>').css({
position: 'absolute',
display: 'none',
top: y + 5,
left: x + 15,
border: '1px solid #333',
padding: '4px',
color: '#fff',
'border-radius': '3px',
'background-color': '#333',
opacity: 0.80
}).appendTo("body").fadeIn(200);
}
var previousPoint = null;
$("#chart_2").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;
}
});
}
//Tracking Curves
function chart3() {
if ($('#chart_3').size() != 1) {
return;
}
//tracking curves:
var sin = [],
cos = [];
for (var i = 0; i < 14; i += 0.1) {
sin.push([i, Math.sin(i)]);
cos.push([i, Math.cos(i)]);
}
plot = $.plot($("#chart_3"), [{
data: sin,
label: "sin(x) = -0.00",
lines: {
lineWidth: 1,
},
shadowSize: 0
}, {
data: cos,
label: "cos(x) = -0.00",
lines: {
lineWidth: 1,
},
shadowSize: 0
}], {
series: {
lines: {
show: true
}
},
crosshair: {
mode: "x"
},
grid: {
hoverable: true,
autoHighlight: false,
tickColor: "#eee",
borderColor: "#eee",
borderWidth: 1
},
yaxis: {
min: -1.2,
max: 1.2
}
});
var legends = $("#chart_3 .legendLabel");
legends.each(function() {
// fix the widths so they don't jump around
$(this).css('width', $(this).width());
});
var updateLegendTimeout = null;
var latestPosition = null;
function updateLegend() {
updateLegendTimeout = null;
var pos = latestPosition;
var axes = plot.getAxes();
if (pos.x < axes.xaxis.min || pos.x > axes.xaxis.max || pos.y < axes.yaxis.min || pos.y > axes.yaxis.max) return;
var i, j, dataset = plot.getData();
for (i = 0; i < dataset.length; ++i) {
var series = dataset[i];
// find the nearest points, x-wise
for (j = 0; j < series.data.length; ++j)
if (series.data[j][0] > pos.x) break;
// now interpolate
var y, p1 = series.data[j - 1],
p2 = series.data[j];
if (p1 == null) y = p2[1];
else if (p2 == null) y = p1[1];
else y = p1[1] + (p2[1] - p1[1]) * (pos.x - p1[0]) / (p2[0] - p1[0]);
legends.eq(i).text(series.label.replace(/=.*/, "= " + y.toFixed(2)));
}
}
$("#chart_3").bind("plothover", function(event, pos, item) {
latestPosition = pos;
if (!updateLegendTimeout) updateLegendTimeout = setTimeout(updateLegend, 50);
});
}
//Dynamic Chart
function chart4() {
if ($('#chart_4').size() != 1) {
return;
}
//server load
var options = {
series: {
shadowSize: 1
},
lines: {
show: true,
lineWidth: 0.5,
fill: true,
fillColor: {
colors: [{
opacity: 0.1
}, {
opacity: 1
}]
}
},
yaxis: {
min: 0,
max: 100,
tickColor: "#eee",
tickFormatter: function(v) {
return v + "%";
}
},
xaxis: {
show: false,
},
colors: ["#6ef146"],
grid: {
tickColor: "#eee",
borderWidth: 0,
}
};
var updateInterval = 30;
var plot = $.plot($("#chart_4"), [getRandomData()], options);
function update() {
plot.setData([getRandomData()]);
plot.draw();
setTimeout(update, updateInterval);
}
update();
}
//bars with controls
function chart5() {
if ($('#chart_5').size() != 1) {
return;
}
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($("#chart_5"),
[{
label: "sales",
data: d1,
lines: {
lineWidth: 1,
},
shadowSize: 0
}, {
label: "tax",
data: d2,
lines: {
lineWidth: 1,
},
shadowSize: 0
}, {
label: "profit",
data: d3,
lines: {
lineWidth: 1,
},
shadowSize: 0
}]
, {
series: {
stack: stack,
lines: {
show: lines,
fill: true,
steps: steps,
lineWidth: 0, // in pixels
},
bars: {
show: bars,
barWidth: 0.5,
lineWidth: 0, // in pixels
shadowSize: 0,
align: 'center'
}
},
grid: {
tickColor: "#eee",
borderColor: "#eee",
borderWidth: 1
}
}
);
}
$(".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();
});
plotWithOptions();
}
//graph
chart1();
chart2();
chart3();
chart4();
chart5();
},
initBarCharts: function() {
// bar chart:
var data = GenerateSeries(0);
function GenerateSeries(added) {
var data = [];
var start = 100 + added;
var end = 200 + added;
for (i = 1; i <= 20; i++) {
var d = Math.floor(Math.random() * (end - start + 1) + start);
data.push([i, d]);
start++;
end++;
}
return data;
}
var options = {
series: {
bars: {
show: true
}
},
bars: {
barWidth: 0.8,
lineWidth: 0, // in pixels
shadowSize: 0,
align: 'left'
},
grid: {
tickColor: "#eee",
borderColor: "#eee",
borderWidth: 1
}
};
if ($('#chart_1_1').size() !== 0) {
$.plot($("#chart_1_1"), [{
data: data,
lines: {
lineWidth: 1,
},
shadowSize: 0
}], options);
}
// horizontal bar chart:
var data1 = [
[10, 10],
[20, 20],
[30, 30],
[40, 40],
[50, 50]
];
var options = {
series: {
bars: {
show: true
}
},
bars: {
horizontal: true,
barWidth: 6,
lineWidth: 0, // in pixels
shadowSize: 0,
align: 'left'
},
grid: {
tickColor: "#eee",
borderColor: "#eee",
borderWidth: 1
}
};
if ($('#chart_1_2').size() !== 0) {
$.plot($("#chart_1_2"), [data1], options);
}
},
initPieCharts: function() {
var data = [];
var series = Math.floor(Math.random() * 10) + 1;
series = series < 5 ? 5 : series;
for (var i = 0; i < series; i++) {
data[i] = {
label: "Series" + (i + 1),
data: Math.floor(Math.random() * 100) + 1
};
}
// DEFAULT
if ($('#pie_chart').size() !== 0) {
$.plot($("#pie_chart"), data, {
series: {
pie: {
show: true
}
}
});
}
// GRAPH 1
if ($('#pie_chart_1').size() !== 0) {
$.plot($("#pie_chart_1"), data, {
series: {
pie: {
show: true
}
},
legend: {
show: false
}
});
}
// GRAPH 2
if ($('#pie_chart_2').size() !== 0) {
$.plot($("#pie_chart_2"), data, {
series: {
pie: {
show: true,
radius: 1,
label: {
show: true,
radius: 1,
formatter: function(label, series) {
return '<div style="font-size:8pt;text-align:center;padding:2px;color:white;">' + label + '<br/>' + Math.round(series.percent) + '%</div>';
},
background: {
opacity: 0.8
}
}
}
},
legend: {
show: false
}
});
}
// GRAPH 3
if ($('#pie_chart_3').size() !== 0) {
$.plot($("#pie_chart_3"), data, {
series: {
pie: {
show: true,
radius: 1,
label: {
show: true,
radius: 3 / 4,
formatter: function(label, series) {
return '<div style="font-size:8pt;text-align:center;padding:2px;color:white;">' + label + '<br/>' + Math.round(series.percent) + '%</div>';
},
background: {
opacity: 0.5
}
}
}
},
legend: {
show: false
}
});
}
// GRAPH 4
if ($('#pie_chart_4').size() !== 0) {
$.plot($("#pie_chart_4"), data, {
series: {
pie: {
show: true,
radius: 1,
label: {
show: true,
radius: 3 / 4,
formatter: function(label, series) {
return '<div style="font-size:8pt;text-align:center;padding:2px;color:white;">' + label + '<br/>' + Math.round(series.percent) + '%</div>';
},
background: {
opacity: 0.5,
color: '#000'
}
}
}
},
legend: {
show: false
}
});
}
// GRAPH 5
if ($('#pie_chart_5').size() !== 0) {
$.plot($("#pie_chart_5"), data, {
series: {
pie: {
show: true,
radius: 3 / 4,
label: {
show: true,
radius: 3 / 4,
formatter: function(label, series) {
return '<div style="font-size:8pt;text-align:center;padding:2px;color:white;">' + label + '<br/>' + Math.round(series.percent) + '%</div>';
},
background: {
opacity: 0.5,
color: '#000'
}
}
}
},
legend: {
show: false
}
});
}
// GRAPH 6
if ($('#pie_chart_6').size() !== 0) {
$.plot($("#pie_chart_6"), data, {
series: {
pie: {
show: true,
radius: 1,
label: {
show: true,
radius: 2 / 3,
formatter: function(label, series) {
return '<div style="font-size:8pt;text-align:center;padding:2px;color:white;">' + label + '<br/>' + Math.round(series.percent) + '%</div>';
},
threshold: 0.1
}
}
},
legend: {
show: false
}
});
}
// GRAPH 7
if ($('#pie_chart_7').size() !== 0) {
$.plot($("#pie_chart_7"), data, {
series: {
pie: {
show: true,
combine: {
color: '#999',
threshold: 0.1
}
}
},
legend: {
show: false
}
});
}
// GRAPH 8
if ($('#pie_chart_8').size() !== 0) {
$.plot($("#pie_chart_8"), data, {
series: {
pie: {
show: true,
radius: 300,
label: {
show: true,
formatter: function(label, series) {
return '<div style="font-size:8pt;text-align:center;padding:2px;color:white;">' + label + '<br/>' + Math.round(series.percent) + '%</div>';
},
threshold: 0.1
}
}
},
legend: {
show: false
}
});
}
// GRAPH 9
if ($('#pie_chart_9').size() !== 0) {
$.plot($("#pie_chart_9"), data, {
series: {
pie: {
show: true,
radius: 1,
tilt: 0.5,
label: {
show: true,
radius: 1,
formatter: function(label, series) {
return '<div style="font-size:8pt;text-align:center;padding:2px;color:white;">' + label + '<br/>' + Math.round(series.percent) + '%</div>';
},
background: {
opacity: 0.8
}
},
combine: {
color: '#999',
threshold: 0.1
}
}
},
legend: {
show: false
}
});
}
// DONUT
if ($('#donut').size() !== 0) {
$.plot($("#donut"), data, {
series: {
pie: {
innerRadius: 0.5,
show: true
}
}
});
}
// INTERACTIVE
if ($('#interactive').size() !== 0) {
$.plot($("#interactive"), data, {
series: {
pie: {
show: true
}
},
grid: {
hoverable: true,
clickable: true
}
});
$("#interactive").bind("plothover", pieHover);
$("#interactive").bind("plotclick", pieClick);
}
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>');
}
function pieClick(event, pos, obj) {
if (!obj)
return;
percent = parseFloat(obj.series.percent).toFixed(2);
alert('' + obj.series.label + ': ' + percent + '%');
}
}
};
}();

View File

@ -0,0 +1,14 @@
var ComingSoon = function () {
return {
//main function to initiate the module
init: function () {
var austDay = new Date();
austDay = new Date(austDay.getFullYear() + 1, 1 - 1, 26);
$('#defaultCountdown').countdown({until: austDay});
$('#year').text(austDay.getFullYear());
}
};
}();

View File

@ -0,0 +1,57 @@
var ComponentsContextMenu = function () {
var demo2 = function() {
$('#main').contextmenu({
target: '#context-menu2',
before: function (e) {
// This function is optional.
// Here we use it to stop the event if the user clicks a span
e.preventDefault();
if (e.target.tagName == 'SPAN') {
e.preventDefault();
this.closemenu();
return false;
}
//this.getMenu().find("li").eq(2).find('a').html("Dynamically changed!");
return true;
}
});
}
var demo3 = function() {
// Demo 3
$('#context2').contextmenu({
target: '#context-menu2',
onItem: function (context, e) {
alert($(e.target).text());
}
});
$('#context-menu2').on('show.bs.context', function (e) {
console.log('before show event');
});
$('#context-menu2').on('shown.bs.context', function (e) {
console.log('after show event');
});
$('#context-menu2').on('hide.bs.context', function (e) {
console.log('before hide event');
});
$('#context-menu2').on('hidden.bs.context', function (e) {
console.log('after hide event');
});
}
return {
//main function to initiate the module
init: function () {
demo2();
demo3();
}
};
}();

View File

@ -0,0 +1,14 @@
var ComponentsDropdowns = function () {
var handleMultiSelect = function () {
$('#domain_multi_user').multiSelect();
}
return {
//main function to initiate the module
init: function () {
handleMultiSelect();
}
};
}();

View File

@ -0,0 +1,30 @@
var ComponentsEditors = function () {
var handleWysihtml5 = function () {
if (!jQuery().wysihtml5) {
return;
}
if ($('.wysihtml5').size() > 0) {
$('.wysihtml5').wysihtml5({
"stylesheets": ["../../assets/global/plugins/bootstrap-wysihtml5/wysiwyg-color.css"]
});
}
}
var handleSummernote = function () {
$('#summernote_1').summernote({height: 300});
//API:
//var sHTML = $('#summernote_1').code(); // get code
//$('#summernote_1').destroy(); // destroy
}
return {
//main function to initiate the module
init: function () {
handleWysihtml5();
handleSummernote();
}
};
}();

View File

@ -0,0 +1,589 @@
var ComponentsFormTools = function () {
var handleTwitterTypeahead = function() {
// Example #1
// instantiate the bloodhound suggestion engine
var numbers = new Bloodhound({
datumTokenizer: function(d) { return Bloodhound.tokenizers.whitespace(d.num); },
queryTokenizer: Bloodhound.tokenizers.whitespace,
local: [
{ num: 'metronic' },
{ num: 'keenthemes' },
{ num: 'metronic theme' },
{ num: 'metronic template' },
{ num: 'keenthemes team' }
]
});
// initialize the bloodhound suggestion engine
numbers.initialize();
// instantiate the typeahead UI
if (Metronic.isRTL()) {
$('#typeahead_example_1').attr("dir", "rtl");
}
$('#typeahead_example_1').typeahead(null, {
displayKey: 'num',
hint: (Metronic.isRTL() ? false : true),
source: numbers.ttAdapter()
});
// Example #2
var countries = new Bloodhound({
datumTokenizer: function(d) { return Bloodhound.tokenizers.whitespace(d.name); },
queryTokenizer: Bloodhound.tokenizers.whitespace,
limit: 10,
prefetch: {
url: 'demo/typeahead_countries.json',
filter: function(list) {
return $.map(list, function(country) { return { name: country }; });
}
}
});
countries.initialize();
if (Metronic.isRTL()) {
$('#typeahead_example_2').attr("dir", "rtl");
}
$('#typeahead_example_2').typeahead(null, {
name: 'typeahead_example_2',
displayKey: 'name',
hint: (Metronic.isRTL() ? false : true),
source: countries.ttAdapter()
});
// Example #3
var custom = new Bloodhound({
datumTokenizer: function(d) { return d.tokens; },
queryTokenizer: Bloodhound.tokenizers.whitespace,
remote: 'demo/typeahead_custom.php?query=%QUERY'
});
custom.initialize();
if (Metronic.isRTL()) {
$('#typeahead_example_3').attr("dir", "rtl");
}
$('#typeahead_example_3').typeahead(null, {
name: 'datypeahead_example_3',
displayKey: 'value',
source: custom.ttAdapter(),
hint: (Metronic.isRTL() ? false : true),
templates: {
suggestion: Handlebars.compile([
'<div class="media">',
'<div class="pull-left">',
'<div class="media-object">',
'<img src="{{img}}" width="50" height="50"/>',
'</div>',
'</div>',
'<div class="media-body">',
'<h4 class="media-heading">{{value}}</h4>',
'<p>{{desc}}</p>',
'</div>',
'</div>',
].join(''))
}
});
// Example #4
var nba = new Bloodhound({
datumTokenizer: function(d) { return Bloodhound.tokenizers.whitespace(d.team); },
queryTokenizer: Bloodhound.tokenizers.whitespace,
prefetch: 'demo/typeahead_nba.json'
});
var nhl = new Bloodhound({
datumTokenizer: function(d) { return Bloodhound.tokenizers.whitespace(d.team); },
queryTokenizer: Bloodhound.tokenizers.whitespace,
prefetch: 'demo/typeahead_nhl.json'
});
nba.initialize();
nhl.initialize();
if (Metronic.isRTL()) {
$('#typeahead_example_4').attr("dir", "rtl");
}
$('#typeahead_example_4').typeahead({
hint: (Metronic.isRTL() ? false : true),
highlight: true
},
{
name: 'nba',
displayKey: 'team',
source: nba.ttAdapter(),
templates: {
header: '<h3>NBA Teams</h3>'
}
},
{
name: 'nhl',
displayKey: 'team',
source: nhl.ttAdapter(),
templates: {
header: '<h3>NHL Teams</h3>'
}
});
}
var handleTwitterTypeaheadModal = function() {
// Example #1
// instantiate the bloodhound suggestion engine
var numbers = new Bloodhound({
datumTokenizer: function(d) { return Bloodhound.tokenizers.whitespace(d.num); },
queryTokenizer: Bloodhound.tokenizers.whitespace,
local: [
{ num: 'metronic' },
{ num: 'keenthemes' },
{ num: 'metronic theme' },
{ num: 'metronic template' },
{ num: 'keenthemes team' }
]
});
// initialize the bloodhound suggestion engine
numbers.initialize();
// instantiate the typeahead UI
if (Metronic.isRTL()) {
$('#typeahead_example_modal_1').attr("dir", "rtl");
}
$('#typeahead_example_modal_1').typeahead(null, {
displayKey: 'num',
hint: (Metronic.isRTL() ? false : true),
source: numbers.ttAdapter()
});
// Example #2
var countries = new Bloodhound({
datumTokenizer: function(d) { return Bloodhound.tokenizers.whitespace(d.name); },
queryTokenizer: Bloodhound.tokenizers.whitespace,
limit: 10,
prefetch: {
url: 'demo/typeahead_countries.json',
filter: function(list) {
return $.map(list, function(country) { return { name: country }; });
}
}
});
countries.initialize();
if (Metronic.isRTL()) {
$('#typeahead_example_modal_2').attr("dir", "rtl");
}
$('#typeahead_example_modal_2').typeahead(null, {
name: 'typeahead_example_modal_2',
displayKey: 'name',
hint: (Metronic.isRTL() ? false : true),
source: countries.ttAdapter()
});
// Example #3
var custom = new Bloodhound({
datumTokenizer: function(d) { return d.tokens; },
queryTokenizer: Bloodhound.tokenizers.whitespace,
remote: 'demo/typeahead_custom.php?query=%QUERY'
});
custom.initialize();
if (Metronic.isRTL()) {
$('#typeahead_example_modal_3').attr("dir", "rtl");
}
$('#typeahead_example_modal_3').typeahead(null, {
name: 'datypeahead_example_modal_3',
displayKey: 'value',
hint: (Metronic.isRTL() ? false : true),
source: custom.ttAdapter(),
templates: {
suggestion: Handlebars.compile([
'<div class="media">',
'<div class="pull-left">',
'<div class="media-object">',
'<img src="{{img}}" width="50" height="50"/>',
'</div>',
'</div>',
'<div class="media-body">',
'<h4 class="media-heading">{{value}}</h4>',
'<p>{{desc}}</p>',
'</div>',
'</div>',
].join(''))
}
});
// Example #4
var nba = new Bloodhound({
datumTokenizer: function(d) { return Bloodhound.tokenizers.whitespace(d.team); },
queryTokenizer: Bloodhound.tokenizers.whitespace,
limit: 3,
prefetch: 'demo/typeahead_nba.json'
});
var nhl = new Bloodhound({
datumTokenizer: function(d) { return Bloodhound.tokenizers.whitespace(d.team); },
queryTokenizer: Bloodhound.tokenizers.whitespace,
limit: 3,
prefetch: 'demo/typeahead_nhl.json'
});
nba.initialize();
nhl.initialize();
$('#typeahead_example_modal_4').typeahead({
hint: (Metronic.isRTL() ? false : true),
highlight: true
},
{
name: 'nba',
displayKey: 'team',
source: nba.ttAdapter(),
templates: {
header: '<h3>NBA Teams</h3>'
}
},
{
name: 'nhl',
displayKey: 'team',
source: nhl.ttAdapter(),
templates: {
header: '<h3>NHL Teams</h3>'
}
});
}
var handleBootstrapSwitch = function() {
$('.switch-radio1').on('switch-change', function () {
$('.switch-radio1').bootstrapSwitch('toggleRadioState');
});
// or
$('.switch-radio1').on('switch-change', function () {
$('.switch-radio1').bootstrapSwitch('toggleRadioStateAllowUncheck');
});
// or
$('.switch-radio1').on('switch-change', function () {
$('.switch-radio1').bootstrapSwitch('toggleRadioStateAllowUncheck', false);
});
}
var handleBootstrapTouchSpin = function() {
$("#touchspin_demo1").TouchSpin({
buttondown_class: 'btn green',
buttonup_class: 'btn green',
min: -1000000000,
max: 1000000000,
stepinterval: 50,
maxboostedstep: 10000000,
prefix: '$'
});
$("#touchspin_demo2").TouchSpin({
buttondown_class: 'btn blue',
buttonup_class: 'btn blue',
min: 0,
max: 100,
step: 0.1,
decimals: 2,
boostat: 5,
maxboostedstep: 10,
postfix: '%'
});
$("#touchspin_demo3").TouchSpin({
buttondown_class: 'btn green',
buttonup_class: 'btn green',
prefix: "$",
postfix: "%"
});
}
var handleBootstrapMaxlength = function() {
$('#maxlength_defaultconfig').maxlength({
limitReachedClass: "label label-danger",
})
$('#maxlength_thresholdconfig').maxlength({
limitReachedClass: "label label-danger",
threshold: 20
});
$('#maxlength_alloptions').maxlength({
alwaysShow: true,
warningClass: "label label-success",
limitReachedClass: "label label-danger",
separator: ' out of ',
preText: 'You typed ',
postText: ' chars available.',
validate: true
});
$('#maxlength_textarea').maxlength({
limitReachedClass: "label label-danger",
alwaysShow: true
});
$('#maxlength_placement').maxlength({
limitReachedClass: "label label-danger",
alwaysShow: true,
placement: Metronic.isRTL() ? 'top-right' : 'top-left'
});
}
var handleSpinners = function () {
$('#spinner1').spinner();
$('#spinner2').spinner({disabled: true});
$('#spinner3').spinner({value:0, min: 0, max: 10});
$('#spinner4').spinner({value:0, step: 5, min: 0, max: 200});
}
var handleTagsInput = function () {
if (!jQuery().tagsInput) {
return;
}
$('#tags_1').tagsInput({
width: 'auto',
'onAddTag': function () {
//alert(1);
},
});
$('#tags_2').tagsInput({
width: 300
});
}
var handleInputMasks = function () {
$.extend($.inputmask.defaults, {
'autounmask': true
});
$("#mask_date").inputmask("d/m/y", {
autoUnmask: true
}); //direct mask
$("#mask_date1").inputmask("d/m/y", {
"placeholder": "*"
}); //change the placeholder
$("#mask_date2").inputmask("d/m/y", {
"placeholder": "dd/mm/yyyy"
}); //multi-char placeholder
$("#mask_phone").inputmask("mask", {
"mask": "(999) 999-9999"
}); //specifying fn & options
$("#mask_tin").inputmask({
"mask": "99-9999999",
placeholder: "" // remove underscores from the input mask
}); //specifying options only
$("#mask_number").inputmask({
"mask": "9",
"repeat": 10,
"greedy": false
}); // ~ mask "9" or mask "99" or ... mask "9999999999"
$("#mask_decimal").inputmask('decimal', {
rightAlignNumerics: false
}); //disables the right alignment of the decimal input
$("#mask_currency").inputmask('€ 999.999.999,99', {
numericInput: true
}); //123456 => € ___.__1.234,56
$("#mask_currency2").inputmask('€ 999,999,999.99', {
numericInput: true,
rightAlignNumerics: false,
greedy: false
}); //123456 => € ___.__1.234,56
$("#mask_ssn").inputmask("999-99-9999", {
placeholder: " ",
clearMaskOnLostFocus: true
}); //default
}
var handleIPAddressInput = function () {
$('#input_ipv4').ipAddress();
$('#input_ipv6').ipAddress({
v: 6
});
}
var handlePasswordStrengthChecker = function () {
var initialized = false;
var input = $("#password_strength");
input.keydown(function () {
if (initialized === false) {
// set base options
input.pwstrength({
raisePower: 1.4,
minChar: 8,
verdicts: ["Weak", "Normal", "Medium", "Strong", "Very Strong"],
scores: [17, 26, 40, 50, 60]
});
// add your own rule to calculate the password strength
input.pwstrength("addRule", "demoRule", function (options, word, score) {
return word.match(/[a-z].[0-9]/) && score;
}, 10, true);
// set as initialized
initialized = true;
}
});
}
var handleUsernameAvailabilityChecker1 = function () {
var input = $("#username1_input");
$("#username1_checker").click(function (e) {
var pop = $(this);
if (input.val() === "") {
input.closest('.form-group').removeClass('has-success').addClass('has-error');
pop.popover('destroy');
pop.popover({
'placement': (Metronic.isRTL() ? 'left' : 'right'),
'html': true,
'container': 'body',
'content': 'Please enter a username to check its availability.',
});
// add error class to the popover
pop.data('bs.popover').tip().addClass('error');
// set last poped popover to be closed on click(see Metronic.js => handlePopovers function)
Metronic.setLastPopedPopover(pop);
pop.popover('show');
e.stopPropagation(); // prevent closing the popover
return;
}
var btn = $(this);
btn.attr('disabled', true);
input.attr("readonly", true).
attr("disabled", true).
addClass("spinner");
$.post('demo/username_checker.php', {
username: input.val()
}, function (res) {
btn.attr('disabled', false);
input.attr("readonly", false).
attr("disabled", false).
removeClass("spinner");
if (res.status == 'OK') {
input.closest('.form-group').removeClass('has-error').addClass('has-success');
pop.popover('destroy');
pop.popover({
'html': true,
'placement': (Metronic.isRTL() ? 'left' : 'right'),
'container': 'body',
'content': res.message,
});
pop.popover('show');
pop.data('bs.popover').tip().removeClass('error').addClass('success');
} else {
input.closest('.form-group').removeClass('has-success').addClass('has-error');
pop.popover('destroy');
pop.popover({
'html': true,
'placement': (Metronic.isRTL() ? 'left' : 'right'),
'container': 'body',
'content': res.message,
});
pop.popover('show');
pop.data('bs.popover').tip().removeClass('success').addClass('error');
Metronic.setLastPopedPopover(pop);
}
}, 'json');
});
}
var handleUsernameAvailabilityChecker2 = function () {
$("#username2_input").change(function () {
var input = $(this);
if (input.val() === "") {
input.closest('.form-group').removeClass('has-error').removeClass('has-success');
$('.fa-check, fa-warning', input.closest('.form-group')).remove();
return;
}
input.attr("readonly", true).
attr("disabled", true).
addClass("spinner");
$.post('demo/username_checker.php', {
username: input.val()
}, function (res) {
input.attr("readonly", false).
attr("disabled", false).
removeClass("spinner");
// change popover font color based on the result
if (res.status == 'OK') {
input.closest('.form-group').removeClass('has-error').addClass('has-success');
$('.fa-warning', input.closest('.form-group')).remove();
input.before('<i class="fa fa-check"></i>');
input.data('bs.popover').tip().removeClass('error').addClass('success');
} else {
input.closest('.form-group').removeClass('has-success').addClass('has-error');
$('.fa-check', input.closest('.form-group')).remove();
input.before('<i class="fa fa-warning"></i>');
input.popover('destroy');
input.popover({
'html': true,
'placement': (Metronic.isRTL() ? 'left' : 'right'),
'container': 'body',
'content': res.message,
});
input.popover('show');
input.data('bs.popover').tip().removeClass('success').addClass('error');
Metronic.setLastPopedPopover(input);
}
}, 'json');
});
}
return {
//main function to initiate the module
init: function () {
handleTwitterTypeahead();
handleTwitterTypeaheadModal();
handleBootstrapSwitch();
handleBootstrapTouchSpin();
handleBootstrapMaxlength();
handleSpinners();
handleTagsInput();
handleInputMasks();
handleIPAddressInput();
handlePasswordStrengthChecker();
handleUsernameAvailabilityChecker1();
handleUsernameAvailabilityChecker2();
}
};
}();

View File

@ -0,0 +1,54 @@
var ComponentsFormTools2 = function() {
var selectSplitter = function() {
$('#select_selectsplitter1').selectsplitter({
selectSize: 4
});
$('#select_selectsplitter2').selectsplitter({
selectSize: 6
});
$('#select_selectsplitter3').selectsplitter({
selectSize: 5
});
}
var miniColors = function() {
$('.demo').each(function() {
//
// Dear reader, it's actually very easy to initialize MiniColors. For example:
//
// $(selector).minicolors();
//
// The way I've done it below is just for the demo, so don't get confused
// by it. Also, data- attributes aren't supported at this time...they're
// only used for this demo.
//
$(this).minicolors({
control: $(this).attr('data-control') || 'hue',
defaultValue: $(this).attr('data-defaultValue') || '',
inline: $(this).attr('data-inline') === 'true',
letterCase: $(this).attr('data-letterCase') || 'lowercase',
opacity: $(this).attr('data-opacity'),
position: $(this).attr('data-position') || 'bottom left',
change: function(hex, opacity) {
if (!hex) return;
if (opacity) hex += ', ' + opacity;
if (typeof console === 'object') {
console.log(hex);
}
},
theme: 'bootstrap'
});
});
}
return {
//main function to initiate the module
init: function() {
selectSplitter();
miniColors();
}
};
}();

View File

@ -0,0 +1,81 @@
var ComponentsIonSliders = function () {
return {
//main function to initiate the module
init: function () {
$("#range_1").ionRangeSlider({
min: 0,
max: 5000,
from: 1000,
to: 4000,
type: 'double',
step: 1,
prefix: "$",
prettify: false,
hasGrid: true
});
$("#range_2").ionRangeSlider();
$("#range_5").ionRangeSlider({
min: 0,
max: 10,
type: 'single',
step: 0.1,
postfix: " mm",
prettify: false,
hasGrid: true
});
$("#range_6").ionRangeSlider({
min: -50,
max: 50,
from: 0,
type: 'single',
step: 1,
postfix: "°",
prettify: false,
hasGrid: true
});
$("#range_4").ionRangeSlider({
type: "single",
step: 100,
postfix: " light years",
from: 55000,
hideText: true
});
$("#range_3").ionRangeSlider({
type: "double",
postfix: " miles",
step: 10000,
from: 25000000,
to: 35000000,
onChange: function(obj){
var t = "";
for(var prop in obj) {
t += prop + ": " + obj[prop] + "\r\n";
}
$("#result").html(t);
}
});
$("#updateLast").on("click", function(){
$("#range_3").ionRangeSlider("update", {
min: Math.round(10000 + Math.random() * 40000),
max: Math.round(200000 + Math.random() * 100000),
step: 1,
from: Math.round(40000 + Math.random() * 40000),
to: Math.round(150000 + Math.random() * 80000)
});
});
}
};
}();

View File

@ -0,0 +1,108 @@
var ComponentsjQueryUISliders = function () {
return {
//main function to initiate the module
init: function () {
// basic
$(".slider-basic").slider(); // basic sliders
// vertical range sliders
$("#slider-range").slider({
isRTL: Metronic.isRTL(),
range: true,
values: [17, 67],
slide: function (event, ui) {
$("#slider-range-amount").text("$" + ui.values[0] + " - $" + ui.values[1]);
}
});
// snap inc
$("#slider-snap-inc").slider({
isRTL: Metronic.isRTL(),
value: 100,
min: 0,
max: 1000,
step: 100,
slide: function (event, ui) {
$("#slider-snap-inc-amount").text("$" + ui.value);
}
});
$("#slider-snap-inc-amount").text("$" + $("#slider-snap-inc").slider("value"));
// range slider
$("#slider-range").slider({
isRTL: Metronic.isRTL(),
range: true,
min: 0,
max: 500,
values: [75, 300],
slide: function (event, ui) {
$("#slider-range-amount").text("$" + ui.values[0] + " - $" + ui.values[1]);
}
});
$("#slider-range-amount").text("$" + $("#slider-range").slider("values", 0) + " - $" + $("#slider-range").slider("values", 1));
//range max
$("#slider-range-max").slider({
isRTL: Metronic.isRTL(),
range: "max",
min: 1,
max: 10,
value: 2,
slide: function (event, ui) {
$("#slider-range-max-amount").text(ui.value);
}
});
$("#slider-range-max-amount").text($("#slider-range-max").slider("value"));
// range min
$("#slider-range-min").slider({
isRTL: Metronic.isRTL(),
range: "min",
value: 37,
min: 1,
max: 700,
slide: function (event, ui) {
$("#slider-range-min-amount").text("$" + ui.value);
}
});
$("#slider-range-min-amount").text("$" + $("#slider-range-min").slider("value"));
// vertical slider
$("#slider-vertical").slider({
isRTL: Metronic.isRTL(),
orientation: "vertical",
range: "min",
min: 0,
max: 100,
value: 60,
slide: function (event, ui) {
$("#slider-vertical-amount").text(ui.value);
}
});
$("#slider-vertical-amount").text($("#slider-vertical").slider("value"));
// vertical range sliders
$("#slider-range-vertical").slider({
isRTL: Metronic.isRTL(),
orientation: "vertical",
range: true,
values: [17, 67],
slide: function (event, ui) {
$("#slider-range-vertical-amount").text("$" + ui.values[0] + " - $" + ui.values[1]);
}
});
$("#slider-range-vertical-amount").text("$" + $("#slider-range-vertical").slider("values", 0) + " - $" + $("#slider-range-vertical").slider("values", 1));
}
};
}();

View File

@ -0,0 +1,23 @@
var ComponentsKnobDials = function () {
return {
//main function to initiate the module
init: function () {
//knob does not support ie8 so skip it
if (!jQuery().knob || Metronic.isIE8()) {
return;
}
// general knob
$(".knob").knob({
'dynamicDraw': true,
'thickness': 0.2,
'tickColorizeValues': true,
'skin': 'tron'
});
}
};
}();

View File

@ -0,0 +1,253 @@
var ComponentsNoUiSliders = function() {
var demo1 = function() {
$('#slider_0').noUiSlider({
direction: (Metronic.isRTL() ? "rtl" : "ltr"),
start: 40,
connect: "lower",
range: {
'min': 0,
'max': 100
}
});
}
var demo2 = function() {
$("#slider_1").noUiSlider({
direction: (Metronic.isRTL() ? "rtl" : "ltr"),
start: [20, 80],
range: {
min: 0,
max: 100
},
connect: true,
handles: 2
});
}
var demo3 = function() {
// slider 2
$("#nonlinear").noUiSlider({
connect: true,
behaviour: 'tap',
start: [500, 4000],
range: {
// Starting at 500, step the value by 500,
// until 4000 is reached. From there, step by 1000.
'min': [0],
'10%': [500, 500],
'50%': [4000, 1000],
'max': [10000]
}
});
// Write the CSS 'left' value to a span.
function leftValue(value, handle, slider) {
$(this).text(handle.parent()[0].style.left);
}
// Bind two elements to the lower handle.
// The first item will display the slider value,
// the second shows how far the handle moved
// from the left edge of the slider.
$("#nonlinear").Link('lower').to($('#lower-value'));
$("#nonlinear").Link('lower').to($('#lower-offset'), leftValue);
// Do the same for the upper handle.
$("#nonlinear").Link('upper').to($('#upper-value'));
$("#nonlinear").Link('upper').to($('#upper-offset'), leftValue);
}
var demo4 = function() {
// Store the locked state and slider values.
var lockedState = false,
values = [60, 80],
slider1 = $("#slider1"),
slider2 = $("#slider2");
// When the button is clicked, the locked
// state is inverted.
$("#slider2-btn").click(function() {
lockedState = !lockedState;
$(this).text(lockedState ? 'unlock' : 'lock');
});
function crossUpdate(value, handle, slider) {
// If the sliders aren't interlocked, don't
// cross-update.
if (!lockedState) return;
// Select whether to increase or decrease
// the other slider value.
var lValue = slider1.is(slider) ? 1 : 0,
hValue = lValue ? 0 : 1;
// Modify the slider value.
value -= (values[hValue] - values[lValue]);
// Set the value
$(this).val(value);
}
slider1.noUiSlider({
start: 60,
// Disable animation on value-setting,
// so the sliders respond immediately.
animate: false,
range: {
min: 50,
max: 100
}
});
slider2.noUiSlider({
start: 80,
animate: false,
range: {
min: 50,
max: 100
}
});
$(".slider").on('set', function() {
// The .val() function returns a string,
// but we wan't to do substractions, so
// convert the values to numbers.
values = [
Number(slider1.val()),
Number(slider2.val())
];
});
// The value will be send to the other slider,
// using a custom function as the serialization
// method. The function uses the global 'lockedState'
// variable to decide whether the other slider is updated.
slider1.Link('lower').to(slider2, crossUpdate);
slider1.Link('lower').to($("#slider1-span"));
slider2.Link('lower').to(slider1, crossUpdate);
slider2.Link('lower').to($("#slider2-span"));
}
var demo5 = function() {
function timestamp(str){
return new Date(str).getTime();
}
// Create a list of day and monthnames.
var
weekdays = [
"Sunday", "Monday", "Tuesday",
"Wednesday", "Thursday", "Friday",
"Saturday"
],
months = [
"January", "February", "March",
"April", "May", "June", "July",
"August", "September", "October",
"November", "December"
];
// Append a suffix to dates.
// Example: 23 => 23rd, 1 => 1st.
function nth(d) {
if (d > 3 && d < 21) return 'th';
switch (d % 10) {
case 1:
return "st";
case 2:
return "nd";
case 3:
return "rd";
default:
return "th";
}
}
// Create a string representation of the date.
function formatDate(date) {
return weekdays[date.getDay()] + ", " +
date.getDate() + nth(date.getDate()) + " " +
months[date.getMonth()] + " " +
date.getFullYear();
}
// Write a date as a pretty value.
function setDate(value) {
$(this).html(formatDate(new Date(+value)));
}
$("#slider-date").noUiSlider({
// Create two timestamps to define a range.
range: {
min: timestamp('2010'),
max: timestamp('2016')
},
// Steps of one week
step: 7 * 24 * 60 * 60 * 1000,
// Two more timestamps indicate the handle starting positions.
start: [timestamp('2011'), timestamp('2015')],
// No decimals
format: wNumb({
decimals: 0
})
});
$("#slider-date").Link('lower').to($("#event-start"), setDate);
$("#slider-date").Link('upper').to($("#event-end"), setDate);
}
var demo6 = function() {
$('#soft').noUiSlider({
start: 50,
range: {
min: 0,
max: 100
}
});
$('#soft').noUiSlider_pips({
mode: 'values',
values: [20, 80],
density: 4
});
$('#soft').on('set', function ( event, value ) {
if ( value < 20 ) {
$(this).val(20);
} else if ( value > 80 ) {
$(this).val(80);
}
});
}
return {
//main function to initiate the module
init: function() {
demo1();
demo2();
demo3();
demo4();
demo5();
demo6();
}
};
}();

View File

@ -0,0 +1,223 @@
var ComponentsPickers = function () {
var handleDatePickers = function () {
if (jQuery().datepicker) {
$('.date-picker').datepicker({
rtl: Metronic.isRTL(),
orientation: "left",
autoclose: true
});
//$('body').removeClass("modal-open"); // fix bug when inline picker is used in modal
}
/* Workaround to restrict daterange past date select: http://stackoverflow.com/questions/11933173/how-to-restrict-the-selectable-date-ranges-in-bootstrap-datepicker */
}
var handleTimePickers = function () {
if (jQuery().timepicker) {
$('.timepicker-default').timepicker({
autoclose: true,
showSeconds: true,
minuteStep: 1
});
$('.timepicker-no-seconds').timepicker({
autoclose: true,
minuteStep: 5
});
$('.timepicker-24').timepicker({
autoclose: true,
minuteStep: 5,
showSeconds: false,
showMeridian: false
});
// handle input group button click
$('.timepicker').parent('.input-group').on('click', '.input-group-btn', function(e){
e.preventDefault();
$(this).parent('.input-group').find('.timepicker').timepicker('showWidget');
});
}
}
var handleDateRangePickers = function () {
if (!jQuery().daterangepicker) {
return;
}
$('#defaultrange').daterangepicker({
opens: (Metronic.isRTL() ? 'left' : 'right'),
format: 'MM/DD/YYYY',
separator: ' to ',
startDate: moment().subtract('days', 29),
endDate: moment(),
minDate: '01/01/2012',
maxDate: '12/31/2018',
},
function (start, end) {
$('#defaultrange input').val(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));
}
);
$('#defaultrange_modal').daterangepicker({
opens: (Metronic.isRTL() ? 'left' : 'right'),
format: 'MM/DD/YYYY',
separator: ' to ',
startDate: moment().subtract('days', 29),
endDate: moment(),
minDate: '01/01/2012',
maxDate: '12/31/2018',
},
function (start, end) {
$('#defaultrange_modal input').val(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));
}
);
// this is very important fix when daterangepicker is used in modal. in modal when daterange picker is opened and mouse clicked anywhere bootstrap modal removes the modal-open class from the body element.
// so the below code will fix this issue.
$('#defaultrange_modal').on('click', function(){
if ($('#daterangepicker_modal').is(":visible") && $('body').hasClass("modal-open") == false) {
$('body').addClass("modal-open");
}
});
$('#reportrange').daterangepicker({
opens: (Metronic.isRTL() ? 'left' : 'right'),
startDate: moment().subtract('days', 29),
endDate: moment(),
minDate: '01/01/2012',
maxDate: '12/31/2014',
dateLimit: {
days: 60
},
showDropdowns: true,
showWeekNumbers: true,
timePicker: false,
timePickerIncrement: 1,
timePicker12Hour: true,
ranges: {
'Today': [moment(), moment()],
'Yesterday': [moment().subtract('days', 1), moment().subtract('days', 1)],
'Last 7 Days': [moment().subtract('days', 6), moment()],
'Last 30 Days': [moment().subtract('days', 29), moment()],
'This Month': [moment().startOf('month'), moment().endOf('month')],
'Last Month': [moment().subtract('month', 1).startOf('month'), moment().subtract('month', 1).endOf('month')]
},
buttonClasses: ['btn'],
applyClass: 'green',
cancelClass: 'default',
format: 'MM/DD/YYYY',
separator: ' to ',
locale: {
applyLabel: 'Apply',
fromLabel: 'From',
toLabel: 'To',
customRangeLabel: 'Custom Range',
daysOfWeek: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'],
monthNames: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
firstDay: 1
}
},
function (start, end) {
$('#reportrange span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));
}
);
//Set the initial state of the picker label
$('#reportrange span').html(moment().subtract('days', 29).format('MMMM D, YYYY') + ' - ' + moment().format('MMMM D, YYYY'));
}
var handleDatetimePicker = function () {
if (!jQuery().datetimepicker) {
return;
}
$(".form_datetime").datetimepicker({
autoclose: true,
isRTL: Metronic.isRTL(),
format: "dd MM yyyy - hh:ii",
pickerPosition: (Metronic.isRTL() ? "bottom-right" : "bottom-left")
});
$(".form_advance_datetime").datetimepicker({
isRTL: Metronic.isRTL(),
format: "dd MM yyyy - hh:ii",
autoclose: true,
todayBtn: true,
startDate: "2013-02-14 10:00",
pickerPosition: (Metronic.isRTL() ? "bottom-right" : "bottom-left"),
minuteStep: 10
});
$(".form_meridian_datetime").datetimepicker({
isRTL: Metronic.isRTL(),
format: "dd MM yyyy - HH:ii P",
showMeridian: true,
autoclose: true,
pickerPosition: (Metronic.isRTL() ? "bottom-right" : "bottom-left"),
todayBtn: true
});
$('body').removeClass("modal-open"); // fix bug when inline picker is used in modal
}
var handleClockfaceTimePickers = function () {
if (!jQuery().clockface) {
return;
}
$('.clockface_1').clockface();
$('#clockface_2').clockface({
format: 'HH:mm',
trigger: 'manual'
});
$('#clockface_2_toggle').click(function (e) {
e.stopPropagation();
$('#clockface_2').clockface('toggle');
});
$('#clockface_2_modal').clockface({
format: 'HH:mm',
trigger: 'manual'
});
$('#clockface_2_modal_toggle').click(function (e) {
e.stopPropagation();
$('#clockface_2_modal').clockface('toggle');
});
$('.clockface_3').clockface({
format: 'H:mm'
}).clockface('show', '14:30');
}
var handleColorPicker = function () {
if (!jQuery().colorpicker) {
return;
}
$('.colorpicker-default').colorpicker({
format: 'hex'
});
$('.colorpicker-rgba').colorpicker();
}
return {
//main function to initiate the module
init: function () {
handleDatePickers();
handleTimePickers();
handleDatetimePicker();
handleDateRangePickers();
handleClockfaceTimePickers();
handleColorPicker();
}
};
}();

View File

@ -0,0 +1,27 @@
var ContactUs = function () {
return {
//main function to initiate the module
init: function () {
var map;
$(document).ready(function(){
map = new GMaps({
div: '#map',
lat: -13.004333,
lng: -38.494333
});
var marker = map.addMarker({
lat: -13.004333,
lng: -38.494333,
title: 'Loop, Inc.',
infoWindow: {
content: "<b>Loop, Inc.</b> 795 Park Ave, Suite 120<br>San Francisco, CA 94107"
}
});
marker.infoWindow.open(map, marker);
});
}
};
}();

View File

@ -0,0 +1,33 @@
/**
Custom module for you to write your own javascript functions
**/
var Custom = function () {
// private functions & variables
var myFunc = function(text) {
alert(text);
}
// public functions
return {
//main function
init: function () {
//initialize here something.
},
//some helper function
doSomeStuff: function () {
myFunc();
}
};
}();
/***
Usage
***/
//Custom.init();
//Custom.doSomeStuff();

View File

@ -0,0 +1,242 @@
var EcommerceIndex = function () {
function showTooltip(x, y, labelX, labelY) {
$('<div id="tooltip" class="chart-tooltip">' + (labelY.toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, '$1,')) + 'USD<\/div>').css({
position: 'absolute',
display: 'none',
top: y - 40,
left: x - 60,
border: '0px solid #ccc',
padding: '2px 6px',
'background-color': '#fff'
}).appendTo("body").fadeIn(200);
}
var initChart1 = function () {
var data = [
['01/2013', 4],
['02/2013', 8],
['03/2013', 10],
['04/2013', 12],
['05/2013', 2125],
['06/2013', 324],
['07/2013', 1223],
['08/2013', 1365],
['09/2013', 250],
['10/2013', 999],
['11/2013', 390]
];
var plot_statistics = $.plot(
$("#statistics_1"),
[
{
data:data,
lines: {
fill: 0.6,
lineWidth: 0
},
color: ['#f89f9f']
},
{
data: data,
points: {
show: true,
fill: true,
radius: 5,
fillColor: "#f89f9f",
lineWidth: 3
},
color: '#fff',
shadowSize: 0
}
],
{
xaxis: {
tickLength: 0,
tickDecimals: 0,
mode: "categories",
min: 2,
font: {
lineHeight: 15,
style: "normal",
variant: "small-caps",
color: "#6F7B8A"
}
},
yaxis: {
ticks: 3,
tickDecimals: 0,
tickColor: "#f0f0f0",
font: {
lineHeight: 15,
style: "normal",
variant: "small-caps",
color: "#6F7B8A"
}
},
grid: {
backgroundColor: {
colors: ["#fff", "#fff"]
},
borderWidth: 1,
borderColor: "#f0f0f0",
margin: 0,
minBorderMargin: 0,
labelMargin: 20,
hoverable: true,
clickable: true,
mouseActiveRadius: 6
},
legend: {
show: false
}
}
);
var previousPoint = null;
$("#statistics_1").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.datapoint[0], item.datapoint[1]);
}
} else {
$("#tooltip").remove();
previousPoint = null;
}
});
}
var initChart2 = function() {
var data = [
['01/2013', 10],
['02/2013', 0],
['03/2013', 10],
['04/2013', 12],
['05/2013', 212],
['06/2013', 324],
['07/2013', 122],
['08/2013', 136],
['09/2013', 250],
['10/2013', 99],
['11/2013', 190]
];
var plot_statistics = $.plot(
$("#statistics_2"),
[
{
data:data,
lines: {
fill: 0.6,
lineWidth: 0
},
color: ['#BAD9F5']
},
{
data: data,
points: {
show: true,
fill: true,
radius: 5,
fillColor: "#BAD9F5",
lineWidth: 3
},
color: '#fff',
shadowSize: 0
}
],
{
xaxis: {
tickLength: 0,
tickDecimals: 0,
mode: "categories",
min: 2,
font: {
lineHeight: 14,
style: "normal",
variant: "small-caps",
color: "#6F7B8A"
}
},
yaxis: {
ticks: 3,
tickDecimals: 0,
tickColor: "#f0f0f0",
font: {
lineHeight: 14,
style: "normal",
variant: "small-caps",
color: "#6F7B8A"
}
},
grid: {
backgroundColor: {
colors: ["#fff", "#fff"]
},
borderWidth: 1,
borderColor: "#f0f0f0",
margin: 0,
minBorderMargin: 0,
labelMargin: 20,
hoverable: true,
clickable: true,
mouseActiveRadius: 6
},
legend: {
show: false
}
}
);
var previousPoint = null;
$("#statistics_2").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.datapoint[0], item.datapoint[1]);
}
} else {
$("#tooltip").remove();
previousPoint = null;
}
});
}
return {
//main function
init: function () {
initChart1();
$('#statistics_amounts_tab').on('shown.bs.tab', function (e) {
initChart2();
});
}
};
}();

View File

@ -0,0 +1,233 @@
var EcommerceOrdersView = function () {
var handleInvoices = function () {
var grid = new Datatable();
grid.init({
src: $("#datatable_invoices"),
onSuccess: function (grid) {
// execute some code after table records loaded
},
onError: function (grid) {
// execute some code on network or other general error
},
loadingMessage: 'Loading...',
dataTable: { // here you can define a typical datatable settings from http://datatables.net/usage/options
// Uncomment below line("dom" parameter) to fix the dropdown overflow issue in the datatable cells. The default datatable layout
// setup uses scrollable div(table-scrollable) with overflow:auto to enable vertical scroll(see: assets/global/scripts/datatable.js).
// So when dropdowns used the scrollable div should be removed.
//"dom": "<'row'<'col-md-8 col-sm-12'pli><'col-md-4 col-sm-12'<'table-group-actions pull-right'>>r>t<'row'<'col-md-8 col-sm-12'pli><'col-md-4 col-sm-12'>>",
"lengthMenu": [
[10, 20, 50, 100, 150, -1],
[19, 20, 50, 100, 150, "All"] // change per page values here
],
"pageLength": 10, // default record count per page
"ajax": {
"url": "demo/ecommerce_order_invoices.php", // ajax source
},
"order": [
[1, "asc"]
] // set first column as a default sort by asc
}
});
// handle group actionsubmit button click
grid.getTableWrapper().on('click', '.table-group-action-submit', function (e) {
e.preventDefault();
var action = $(".table-group-action-input", grid.getTableWrapper());
if (action.val() != "" && grid.getSelectedRowsCount() > 0) {
grid.setAjaxParam("customActionType", "group_action");
grid.setAjaxParam("customActionName", action.val());
grid.setAjaxParam("id", grid.getSelectedRows());
grid.getDataTable().ajax.reload();
grid.clearAjaxParams();
} else if (action.val() == "") {
Metronic.alert({
type: 'danger',
icon: 'warning',
message: 'Please select an action',
container: grid.getTableWrapper(),
place: 'prepend'
});
} else if (grid.getSelectedRowsCount() === 0) {
Metronic.alert({
type: 'danger',
icon: 'warning',
message: 'No record selected',
container: grid.getTableWrapper(),
place: 'prepend'
});
}
});
}
var handleCreditMemos = function () {
var grid = new Datatable();
grid.init({
src: $("#datatable_credit_memos"),
onSuccess: function (grid) {
// execute some code after table records loaded
},
onError: function (grid) {
// execute some code on network or other general error
},
loadingMessage: 'Loading...',
dataTable: { // here you can define a typical datatable settings from http://datatables.net/usage/options
// Uncomment below line("dom" parameter) to fix the dropdown overflow issue in the datatable cells. The default datatable layout
// setup uses scrollable div(table-scrollable) with overflow:auto to enable vertical scroll(see: assets/global/scripts/datatable.js).
// So when dropdowns used the scrollable div should be removed.
//"dom": "<'row'<'col-md-8 col-sm-12'pli><'col-md-4 col-sm-12'<'table-group-actions pull-right'>>r>t<'row'<'col-md-8 col-sm-12'pli><'col-md-4 col-sm-12'>>",
"lengthMenu": [
[10, 20, 50, 100, 150, -1],
[10, 20, 50, 100, 150, "All"] // change per page values here
],
"pageLength": 10, // default record count per page
"ajax": {
"url": "demo/ecommerce_order_credit_memos.php", // ajax source
},
"columnDefs": [{ // define columns sorting options(by default all columns are sortable extept the first checkbox column)
'orderable': true,
'targets': [0]
}],
"order": [
[0, "asc"]
] // set first column as a default sort by asc
}
});
}
var handleShipment = function () {
var grid = new Datatable();
grid.init({
src: $("#datatable_shipment"),
onSuccess: function (grid) {
// execute some code after table records loaded
},
onError: function (grid) {
// execute some code on network or other general error
},
loadingMessage: 'Loading...',
dataTable: { // here you can define a typical datatable settings from http://datatables.net/usage/options
"lengthMenu": [
[10, 20, 50, 100, 150, -1],
[10, 20, 50, 100, 150, "All"] // change per page values here
],
"pageLength": 10, // default record count per page
"ajax": {
"url": "demo/ecommerce_order_shipment.php", // ajax source
},
"columnDefs": [{ // define columns sorting options(by default all columns are sortable extept the first checkbox column)
'orderable': true,
'targets': [0]
}],
"order": [
[0, "asc"]
] // set first column as a default sort by asc
}
});
}
var handleHistory = function () {
var grid = new Datatable();
grid.init({
src: $("#datatable_history"),
onSuccess: function (grid) {
// execute some code after table records loaded
},
onError: function (grid) {
// execute some code on network or other general error
},
loadingMessage: 'Loading...',
dataTable: { // here you can define a typical datatable settings from http://datatables.net/usage/options
"lengthMenu": [
[10, 20, 50, 100, 150, -1],
[10, 20, 50, 100, 150, "All"] // change per page values here
],
"pageLength": 10, // default record count per page
"ajax": {
"url": "demo/ecommerce_order_history.php", // ajax source
},
"columnDefs": [{ // define columns sorting options(by default all columns are sortable extept the first checkbox column)
'orderable': true,
'targets': [0]
}],
"order": [
[0, "asc"]
] // set first column as a default sort by asc
}
});
// handle group actionsubmit button click
grid.getTableWrapper().on('click', '.table-group-action-submit', function (e) {
e.preventDefault();
var action = $(".table-group-action-input", grid.getTableWrapper());
if (action.val() != "" && grid.getSelectedRowsCount() > 0) {
grid.setAjaxParam("customActionType", "group_action");
grid.setAjaxParam("customActionName", action.val());
grid.setAjaxParam("id", grid.getSelectedRows());
grid.getDataTable().ajax.reload();
grid.clearAjaxParams();
} else if (action.val() == "") {
Metronic.alert({
type: 'danger',
icon: 'warning',
message: 'Please select an action',
container: grid.getTableWrapper(),
place: 'prepend'
});
} else if (grid.getSelectedRowsCount() === 0) {
Metronic.alert({
type: 'danger',
icon: 'warning',
message: 'No record selected',
container: grid.getTableWrapper(),
place: 'prepend'
});
}
});
}
var initPickers = function () {
//init date pickers
$('.date-picker').datepicker({
rtl: Metronic.isRTL(),
autoclose: true
});
$(".datetime-picker").datetimepicker({
isRTL: Metronic.isRTL(),
autoclose: true,
todayBtn: true,
pickerPosition: (Metronic.isRTL() ? "bottom-right" : "bottom-left"),
minuteStep: 10
});
}
return {
//main function to initiate the module
init: function () {
initPickers();
handleInvoices();
handleCreditMemos();
handleShipment();
handleHistory();
}
};
}();

View File

@ -0,0 +1,86 @@
var EcommerceOrders = function () {
var initPickers = function () {
//init date pickers
$('.date-picker').datepicker({
rtl: Metronic.isRTL(),
autoclose: true
});
}
var handleOrders = function () {
var grid = new Datatable();
grid.init({
src: $("#datatable_orders"),
onSuccess: function (grid) {
// execute some code after table records loaded
},
onError: function (grid) {
// execute some code on network or other general error
},
loadingMessage: 'Loading...',
dataTable: { // here you can define a typical datatable settings from http://datatables.net/usage/options
// Uncomment below line("dom" parameter) to fix the dropdown overflow issue in the datatable cells. The default datatable layout
// setup uses scrollable div(table-scrollable) with overflow:auto to enable vertical scroll(see: assets/global/scripts/datatable.js).
// So when dropdowns used the scrollable div should be removed.
//"dom": "<'row'<'col-md-8 col-sm-12'pli><'col-md-4 col-sm-12'<'table-group-actions pull-right'>>r>t<'row'<'col-md-8 col-sm-12'pli><'col-md-4 col-sm-12'>>",
"lengthMenu": [
[10, 20, 50, 100, 150, -1],
[10, 20, 50, 100, 150, "All"] // change per page values here
],
"pageLength": 10, // default record count per page
"ajax": {
"url": "demo/ecommerce_orders.php", // ajax source
},
"order": [
[1, "asc"]
] // set first column as a default sort by asc
}
});
// handle group actionsubmit button click
grid.getTableWrapper().on('click', '.table-group-action-submit', function (e) {
e.preventDefault();
var action = $(".table-group-action-input", grid.getTableWrapper());
if (action.val() != "" && grid.getSelectedRowsCount() > 0) {
grid.setAjaxParam("customActionType", "group_action");
grid.setAjaxParam("customActionName", action.val());
grid.setAjaxParam("id", grid.getSelectedRows());
grid.getDataTable().ajax.reload();
grid.clearAjaxParams();
} else if (action.val() == "") {
Metronic.alert({
type: 'danger',
icon: 'warning',
message: 'Please select an action',
container: grid.getTableWrapper(),
place: 'prepend'
});
} else if (grid.getSelectedRowsCount() === 0) {
Metronic.alert({
type: 'danger',
icon: 'warning',
message: 'No record selected',
container: grid.getTableWrapper(),
place: 'prepend'
});
}
});
}
return {
//main function to initiate the module
init: function () {
initPickers();
handleOrders();
}
};
}();

View File

@ -0,0 +1,185 @@
var EcommerceProductsEdit = function () {
var handleImages = function() {
// see http://www.plupload.com/
var uploader = new plupload.Uploader({
runtimes : 'html5,flash,silverlight,html4',
browse_button : document.getElementById('tab_images_uploader_pickfiles'), // you can pass in id...
container: document.getElementById('tab_images_uploader_container'), // ... or DOM Element itself
url : "assets/plugins/plupload/examples/upload.php",
filters : {
max_file_size : '10mb',
mime_types: [
{title : "Image files", extensions : "jpg,gif,png"},
{title : "Zip files", extensions : "zip"}
]
},
// Flash settings
flash_swf_url : 'assets/plugins/plupload/js/Moxie.swf',
// Silverlight settings
silverlight_xap_url : 'assets/plugins/plupload/js/Moxie.xap',
init: {
PostInit: function() {
$('#tab_images_uploader_filelist').html("");
$('#tab_images_uploader_uploadfiles').click(function() {
uploader.start();
return false;
});
$('#tab_images_uploader_filelist').on('click', '.added-files .remove', function(){
uploader.removeFile($(this).parent('.added-files').attr("id"));
$(this).parent('.added-files').remove();
});
},
FilesAdded: function(up, files) {
plupload.each(files, function(file) {
$('#tab_images_uploader_filelist').append('<div class="alert alert-warning added-files" id="uploaded_file_' + file.id + '">' + file.name + '(' + plupload.formatSize(file.size) + ') <span class="status label label-info"></span>&nbsp;<a href="javascript:;" style="margin-top:-5px" class="remove pull-right btn btn-sm red"><i class="fa fa-times"></i> remove</a></div>');
});
},
UploadProgress: function(up, file) {
$('#uploaded_file_' + file.id + ' > .status').html(file.percent + '%');
},
FileUploaded: function(up, file, response) {
var response = $.parseJSON(response.response);
if (response.result && response.result == 'OK') {
var id = response.id; // uploaded file's unique name. Here you can collect uploaded file names and submit an jax request to your server side script to process the uploaded files and update the images tabke
$('#uploaded_file_' + file.id + ' > .status').removeClass("label-info").addClass("label-success").html('<i class="fa fa-check"></i> Done'); // set successfull upload
} else {
$('#uploaded_file_' + file.id + ' > .status').removeClass("label-info").addClass("label-danger").html('<i class="fa fa-warning"></i> Failed'); // set failed upload
Metronic.alert({type: 'danger', message: 'One of uploads failed. Please retry.', closeInSeconds: 10, icon: 'warning'});
}
},
Error: function(up, err) {
Metronic.alert({type: 'danger', message: err.message, closeInSeconds: 10, icon: 'warning'});
}
}
});
uploader.init();
}
var handleReviews = function () {
var grid = new Datatable();
grid.init({
src: $("#datatable_reviews"),
onSuccess: function (grid) {
// execute some code after table records loaded
},
onError: function (grid) {
// execute some code on network or other general error
},
loadingMessage: 'Loading...',
dataTable: { // here you can define a typical datatable settings from http://datatables.net/usage/options
// Uncomment below line("dom" parameter) to fix the dropdown overflow issue in the datatable cells. The default datatable layout
// setup uses scrollable div(table-scrollable) with overflow:auto to enable vertical scroll(see: assets/global/scripts/datatable.js).
// So when dropdowns used the scrollable div should be removed.
//"dom": "<'row'<'col-md-8 col-sm-12'pli><'col-md-4 col-sm-12'<'table-group-actions pull-right'>>r>t<'row'<'col-md-8 col-sm-12'pli><'col-md-4 col-sm-12'>>",
"lengthMenu": [
[10, 20, 50, 100, 150, -1],
[10, 20, 50, 100, 150, "All"] // change per page values here
],
"pageLength": 10, // default record count per page
"ajax": {
"url": "demo/ecommerce_product_reviews.php", // ajax source
},
"columnDefs": [{ // define columns sorting options(by default all columns are sortable extept the first checkbox column)
'orderable': true,
'targets': [0]
}],
"order": [
[0, "asc"]
] // set first column as a default sort by asc
}
});
}
var handleHistory = function () {
var grid = new Datatable();
grid.init({
src: $("#datatable_history"),
onSuccess: function (grid) {
// execute some code after table records loaded
},
onError: function (grid) {
// execute some code on network or other general error
},
loadingMessage: 'Loading...',
dataTable: { // here you can define a typical datatable settings from http://datatables.net/usage/options
"lengthMenu": [
[10, 20, 50, 100, 150, -1],
[10, 20, 50, 100, 150, "All"] // change per page values here
],
"pageLength": 10, // default record count per page
"ajax": {
"url": "demo/ecommerce_product_history.php", // ajax source
},
"columnDefs": [{ // define columns sorting options(by default all columns are sortable extept the first checkbox column)
'orderable': true,
'targets': [0]
}],
"order": [
[0, "asc"]
] // set first column as a default sort by asc
}
});
}
var initComponents = function () {
//init datepickers
$('.date-picker').datepicker({
rtl: Metronic.isRTL(),
autoclose: true
});
//init datetimepickers
$(".datetime-picker").datetimepicker({
isRTL: Metronic.isRTL(),
autoclose: true,
todayBtn: true,
pickerPosition: (Metronic.isRTL() ? "bottom-right" : "bottom-left"),
minuteStep: 10
});
//init maxlength handler
$('.maxlength-handler').maxlength({
limitReachedClass: "label label-danger",
alwaysShow: true,
threshold: 5
});
}
return {
//main function to initiate the module
init: function () {
initComponents();
handleImages();
handleReviews();
handleHistory();
}
};
}();

View File

@ -0,0 +1,86 @@
var EcommerceProducts = function () {
var initPickers = function () {
//init date pickers
$('.date-picker').datepicker({
rtl: Metronic.isRTL(),
autoclose: true
});
}
var handleProducts = function() {
var grid = new Datatable();
grid.init({
src: $("#datatable_products"),
onSuccess: function (grid) {
// execute some code after table records loaded
},
onError: function (grid) {
// execute some code on network or other general error
},
loadingMessage: 'Loading...',
dataTable: { // here you can define a typical datatable settings from http://datatables.net/usage/options
// Uncomment below line("dom" parameter) to fix the dropdown overflow issue in the datatable cells. The default datatable layout
// setup uses scrollable div(table-scrollable) with overflow:auto to enable vertical scroll(see: assets/global/scripts/datatable.js).
// So when dropdowns used the scrollable div should be removed.
//"dom": "<'row'<'col-md-8 col-sm-12'pli><'col-md-4 col-sm-12'<'table-group-actions pull-right'>>r>t<'row'<'col-md-8 col-sm-12'pli><'col-md-4 col-sm-12'>>",
"lengthMenu": [
[10, 20, 50, 100, 150],
[10, 20, 50, 100, 150] // change per page values here
],
"pageLength": 10, // default record count per page
"ajax": {
"url": "demo/ecommerce_products.php", // ajax source
},
"order": [
[1, "asc"]
] // set first column as a default sort by asc
}
});
// handle group actionsubmit button click
grid.getTableWrapper().on('click', '.table-group-action-submit', function (e) {
e.preventDefault();
var action = $(".table-group-action-input", grid.getTableWrapper());
if (action.val() != "" && grid.getSelectedRowsCount() > 0) {
grid.setAjaxParam("customActionType", "group_action");
grid.setAjaxParam("customActionName", action.val());
grid.setAjaxParam("id", grid.getSelectedRows());
grid.getDataTable().ajax.reload();
grid.clearAjaxParams();
} else if (action.val() == "") {
Metronic.alert({
type: 'danger',
icon: 'warning',
message: 'Please select an action',
container: grid.getTableWrapper(),
place: 'prepend'
});
} else if (grid.getSelectedRowsCount() === 0) {
Metronic.alert({
type: 'danger',
icon: 'warning',
message: 'No record selected',
container: grid.getTableWrapper(),
place: 'prepend'
});
}
});
}
return {
//main function to initiate the module
init: function () {
handleProducts();
initPickers();
}
};
}();

View File

@ -0,0 +1,36 @@
var FormDropzone = function () {
return {
//main function to initiate the module
init: function () {
Dropzone.options.myDropzone = {
init: function() {
this.on("addedfile", function(file) {
// Create the remove button
var removeButton = Dropzone.createElement("<button class='btn btn-sm btn-block'>Remove file</button>");
// Capture the Dropzone instance as closure.
var _this = this;
// Listen to the click event
removeButton.addEventListener("click", function(e) {
// Make sure the button click doesn't submit the form:
e.preventDefault();
e.stopPropagation();
// Remove the file preview.
_this.removeFile(file);
// If you want to the delete the file on the server as well,
// you can do the AJAX request here.
});
// Add the button to the file preview element.
file.previewElement.appendChild(removeButton);
});
}
}
}
};
}();

View File

@ -0,0 +1,572 @@
var FormEditable = function () {
$.mockjaxSettings.responseTime = 500;
var log = function (settings, response) {
var s = [],
str;
s.push(settings.type.toUpperCase() + ' url = "' + settings.url + '"');
for (var a in settings.data) {
if (settings.data[a] && typeof settings.data[a] === 'object') {
str = [];
for (var j in settings.data[a]) {
str.push(j + ': "' + settings.data[a][j] + '"');
}
str = '{ ' + str.join(', ') + ' }';
} else {
str = '"' + settings.data[a] + '"';
}
s.push(a + ' = ' + str);
}
s.push('RESPONSE: status = ' + response.status);
if (response.responseText) {
if ($.isArray(response.responseText)) {
s.push('[');
$.each(response.responseText, function (i, v) {
s.push('{value: ' + v.value + ', text: "' + v.text + '"}');
});
s.push(']');
} else {
s.push($.trim(response.responseText));
}
}
s.push('--------------------------------------\n');
$('#console').val(s.join('\n') + $('#console').val());
}
var initAjaxMock = function () {
//ajax mocks
$.mockjax({
url: '/post',
response: function (settings) {
log(settings, this);
}
});
$.mockjax({
url: '/error',
status: 400,
statusText: 'Bad Request',
response: function (settings) {
this.responseText = 'Please input correct value';
log(settings, this);
}
});
$.mockjax({
url: '/status',
status: 500,
response: function (settings) {
this.responseText = 'Internal Server Error';
log(settings, this);
}
});
$.mockjax({
url: '/groups',
response: function (settings) {
this.responseText = [{
value: 0,
text: 'Guest'
}, {
value: 1,
text: 'Service'
}, {
value: 2,
text: 'Customer'
}, {
value: 3,
text: 'Operator'
}, {
value: 4,
text: 'Support'
}, {
value: 5,
text: 'Admin'
}
];
log(settings, this);
}
});
}
var initEditables = function () {
//set editable mode based on URL parameter
if (Metronic.getURLParameter('mode') == 'inline') {
$.fn.editable.defaults.mode = 'inline';
$('#inline').attr("checked", true);
jQuery.uniform.update('#inline');
} else {
$('#inline').attr("checked", false);
jQuery.uniform.update('#inline');
}
//global settings
$.fn.editable.defaults.inputclass = 'form-control';
$.fn.editable.defaults.url = '/post';
//editables element samples
$('#username').editable({
url: '/post',
type: 'text',
pk: 1,
name: 'username',
title: 'Enter username'
});
$('#firstname').editable({
validate: function (value) {
if ($.trim(value) == '') return 'This field is required';
}
});
$('#sex').editable({
prepend: "not selected",
inputclass: 'form-control',
source: [{
value: 1,
text: 'Male'
}, {
value: 2,
text: 'Female'
}
],
display: function (value, sourceData) {
var colors = {
"": "gray",
1: "green",
2: "blue"
},
elem = $.grep(sourceData, function (o) {
return o.value == value;
});
if (elem.length) {
$(this).text(elem[0].text).css("color", colors[value]);
} else {
$(this).empty();
}
}
});
$('#status').editable();
$('#group').editable({
showbuttons: false
});
$('#vacation').editable({
rtl : Metronic.isRTL()
});
$('#dob').editable({
inputclass: 'form-control',
});
$('#event').editable({
placement: (Metronic.isRTL() ? 'left' : 'right'),
combodate: {
firstItem: 'name'
}
});
$('#meeting_start').editable({
format: 'yyyy-mm-dd hh:ii',
viewformat: 'dd/mm/yyyy hh:ii',
validate: function (v) {
if (v && v.getDate() == 10) return 'Day cant be 10!';
},
datetimepicker: {
rtl : Metronic.isRTL(),
todayBtn: 'linked',
weekStart: 1
}
});
$('#comments').editable({
showbuttons: 'bottom'
});
$('#note').editable({
showbuttons : (Metronic.isRTL() ? 'left' : 'right')
});
$('#pencil').click(function (e) {
e.stopPropagation();
e.preventDefault();
$('#note').editable('toggle');
});
$('#state').editable({
source: ["Alabama", "Alaska", "Arizona", "Arkansas", "California", "Colorado", "Connecticut", "Delaware", "Florida", "Georgia", "Hawaii", "Idaho", "Illinois", "Indiana", "Iowa", "Kansas", "Kentucky", "Louisiana", "Maine", "Maryland", "Massachusetts", "Michigan", "Minnesota", "Mississippi", "Missouri", "Montana", "Nebraska", "Nevada", "New Hampshire", "New Jersey", "New Mexico", "New York", "North Dakota", "North Carolina", "Ohio", "Oklahoma", "Oregon", "Pennsylvania", "Rhode Island", "South Carolina", "South Dakota", "Tennessee", "Texas", "Utah", "Vermont", "Virginia", "Washington", "West Virginia", "Wisconsin", "Wyoming"]
});
$('#fruits').editable({
pk: 1,
limit: 3,
source: [{
value: 1,
text: 'banana'
}, {
value: 2,
text: 'peach'
}, {
value: 3,
text: 'apple'
}, {
value: 4,
text: 'watermelon'
}, {
value: 5,
text: 'orange'
}
]
});
$('#fruits').on('shown', function(e, reason) {
Metronic.initUniform();
});
$('#tags').editable({
inputclass: 'form-control input-medium',
select2: {
tags: ['html', 'javascript', 'css', 'ajax'],
tokenSeparators: [",", " "]
}
});
var countries = [];
$.each({
"BD": "Bangladesh",
"BE": "Belgium",
"BF": "Burkina Faso",
"BG": "Bulgaria",
"BA": "Bosnia and Herzegovina",
"BB": "Barbados",
"WF": "Wallis and Futuna",
"BL": "Saint Bartelemey",
"BM": "Bermuda",
"BN": "Brunei Darussalam",
"BO": "Bolivia",
"BH": "Bahrain",
"BI": "Burundi",
"BJ": "Benin",
"BT": "Bhutan",
"JM": "Jamaica",
"BV": "Bouvet Island",
"BW": "Botswana",
"WS": "Samoa",
"BR": "Brazil",
"BS": "Bahamas",
"JE": "Jersey",
"BY": "Belarus",
"O1": "Other Country",
"LV": "Latvia",
"RW": "Rwanda",
"RS": "Serbia",
"TL": "Timor-Leste",
"RE": "Reunion",
"LU": "Luxembourg",
"TJ": "Tajikistan",
"RO": "Romania",
"PG": "Papua New Guinea",
"GW": "Guinea-Bissau",
"GU": "Guam",
"GT": "Guatemala",
"GS": "South Georgia and the South Sandwich Islands",
"GR": "Greece",
"GQ": "Equatorial Guinea",
"GP": "Guadeloupe",
"JP": "Japan",
"GY": "Guyana",
"GG": "Guernsey",
"GF": "French Guiana",
"GE": "Georgia",
"GD": "Grenada",
"GB": "United Kingdom",
"GA": "Gabon",
"SV": "El Salvador",
"GN": "Guinea",
"GM": "Gambia",
"GL": "Greenland",
"GI": "Gibraltar",
"GH": "Ghana",
"OM": "Oman",
"TN": "Tunisia",
"JO": "Jordan",
"HR": "Croatia",
"HT": "Haiti",
"HU": "Hungary",
"HK": "Hong Kong",
"HN": "Honduras",
"HM": "Heard Island and McDonald Islands",
"VE": "Venezuela",
"PR": "Puerto Rico",
"PS": "Palestinian Territory",
"PW": "Palau",
"PT": "Portugal",
"SJ": "Svalbard and Jan Mayen",
"PY": "Paraguay",
"IQ": "Iraq",
"PA": "Panama",
"PF": "French Polynesia",
"BZ": "Belize",
"PE": "Peru",
"PK": "Pakistan",
"PH": "Philippines",
"PN": "Pitcairn",
"TM": "Turkmenistan",
"PL": "Poland",
"PM": "Saint Pierre and Miquelon",
"ZM": "Zambia",
"EH": "Western Sahara",
"RU": "Russian Federation",
"EE": "Estonia",
"EG": "Egypt",
"TK": "Tokelau",
"ZA": "South Africa",
"EC": "Ecuador",
"IT": "Italy",
"VN": "Vietnam",
"SB": "Solomon Islands",
"EU": "Europe",
"ET": "Ethiopia",
"SO": "Somalia",
"ZW": "Zimbabwe",
"SA": "Saudi Arabia",
"ES": "Spain",
"ER": "Eritrea",
"ME": "Montenegro",
"MD": "Moldova, Republic of",
"MG": "Madagascar",
"MF": "Saint Martin",
"MA": "Morocco",
"MC": "Monaco",
"UZ": "Uzbekistan",
"MM": "Myanmar",
"ML": "Mali",
"MO": "Macao",
"MN": "Mongolia",
"MH": "Marshall Islands",
"MK": "Macedonia",
"MU": "Mauritius",
"MT": "Malta",
"MW": "Malawi",
"MV": "Maldives",
"MQ": "Martinique",
"MP": "Northern Mariana Islands",
"MS": "Montserrat",
"MR": "Mauritania",
"IM": "Isle of Man",
"UG": "Uganda",
"TZ": "Tanzania, United Republic of",
"MY": "Malaysia",
"MX": "Mexico",
"IL": "Israel",
"FR": "France",
"IO": "British Indian Ocean Territory",
"FX": "France, Metropolitan",
"SH": "Saint Helena",
"FI": "Finland",
"FJ": "Fiji",
"FK": "Falkland Islands (Malvinas)",
"FM": "Micronesia, Federated States of",
"FO": "Faroe Islands",
"NI": "Nicaragua",
"NL": "Netherlands",
"NO": "Norway",
"NA": "Namibia",
"VU": "Vanuatu",
"NC": "New Caledonia",
"NE": "Niger",
"NF": "Norfolk Island",
"NG": "Nigeria",
"NZ": "New Zealand",
"NP": "Nepal",
"NR": "Nauru",
"NU": "Niue",
"CK": "Cook Islands",
"CI": "Cote d'Ivoire",
"CH": "Switzerland",
"CO": "Colombia",
"CN": "China",
"CM": "Cameroon",
"CL": "Chile",
"CC": "Cocos (Keeling) Islands",
"CA": "Canada",
"CG": "Congo",
"CF": "Central African Republic",
"CD": "Congo, The Democratic Republic of the",
"CZ": "Czech Republic",
"CY": "Cyprus",
"CX": "Christmas Island",
"CR": "Costa Rica",
"CV": "Cape Verde",
"CU": "Cuba",
"SZ": "Swaziland",
"SY": "Syrian Arab Republic",
"KG": "Kyrgyzstan",
"KE": "Kenya",
"SR": "Suriname",
"KI": "Kiribati",
"KH": "Cambodia",
"KN": "Saint Kitts and Nevis",
"KM": "Comoros",
"ST": "Sao Tome and Principe",
"SK": "Slovakia",
"KR": "Korea, Republic of",
"SI": "Slovenia",
"KP": "Korea, Democratic People's Republic of",
"KW": "Kuwait",
"SN": "Senegal",
"SM": "San Marino",
"SL": "Sierra Leone",
"SC": "Seychelles",
"KZ": "Kazakhstan",
"KY": "Cayman Islands",
"SG": "Singapore",
"SE": "Sweden",
"SD": "Sudan",
"DO": "Dominican Republic",
"DM": "Dominica",
"DJ": "Djibouti",
"DK": "Denmark",
"VG": "Virgin Islands, British",
"DE": "Germany",
"YE": "Yemen",
"DZ": "Algeria",
"US": "United States",
"UY": "Uruguay",
"YT": "Mayotte",
"UM": "United States Minor Outlying Islands",
"LB": "Lebanon",
"LC": "Saint Lucia",
"LA": "Lao People's Democratic Republic",
"TV": "Tuvalu",
"TW": "Taiwan",
"TT": "Trinidad and Tobago",
"TR": "Turkey",
"LK": "Sri Lanka",
"LI": "Liechtenstein",
"A1": "Anonymous Proxy",
"TO": "Tonga",
"LT": "Lithuania",
"A2": "Satellite Provider",
"LR": "Liberia",
"LS": "Lesotho",
"TH": "Thailand",
"TF": "French Southern Territories",
"TG": "Togo",
"TD": "Chad",
"TC": "Turks and Caicos Islands",
"LY": "Libyan Arab Jamahiriya",
"VA": "Holy See (Vatican City State)",
"VC": "Saint Vincent and the Grenadines",
"AE": "United Arab Emirates",
"AD": "Andorra",
"AG": "Antigua and Barbuda",
"AF": "Afghanistan",
"AI": "Anguilla",
"VI": "Virgin Islands, U.S.",
"IS": "Iceland",
"IR": "Iran, Islamic Republic of",
"AM": "Armenia",
"AL": "Albania",
"AO": "Angola",
"AN": "Netherlands Antilles",
"AQ": "Antarctica",
"AP": "Asia/Pacific Region",
"AS": "American Samoa",
"AR": "Argentina",
"AU": "Australia",
"AT": "Austria",
"AW": "Aruba",
"IN": "India",
"AX": "Aland Islands",
"AZ": "Azerbaijan",
"IE": "Ireland",
"ID": "Indonesia",
"UA": "Ukraine",
"QA": "Qatar",
"MZ": "Mozambique"
}, function (k, v) {
countries.push({
id: k,
text: v
});
});
$('#country').editable({
inputclass: 'form-control input-medium',
source: countries
});
$('#address').editable({
url: '/post',
value: {
city: "San Francisco",
street: "Valencia",
building: "#24"
},
validate: function (value) {
if (value.city == '') return 'city is required!';
},
display: function (value) {
if (!value) {
$(this).empty();
return;
}
var html = '<b>' + $('<div>').text(value.city).html() + '</b>, ' + $('<div>').text(value.street).html() + ' st., bld. ' + $('<div>').text(value.building).html();
$(this).html(html);
}
});
}
return {
//main function to initiate the module
init: function () {
// inii ajax simulation
initAjaxMock();
// init editable elements
initEditables();
// init editable toggler
$('#enable').click(function () {
$('#user .editable').editable('toggleDisabled');
});
// init
$('#inline').on('change', function (e) {
if ($(this).is(':checked')) {
window.location.href = 'form_editable.html?mode=inline';
} else {
window.location.href = 'form_editable.html';
}
});
// handle editable elements on hidden event fired
$('#user .editable').on('hidden', function (e, reason) {
if (reason === 'save' || reason === 'nochange') {
var $next = $(this).closest('tr').next().find('.editable');
if ($('#autoopen').is(':checked')) {
setTimeout(function () {
$next.editable('show');
}, 300);
} else {
$next.focus();
}
}
});
}
};
}();

View File

@ -0,0 +1,59 @@
var FormFileUpload = function () {
return {
//main function to initiate the module
init: function () {
// Initialize the jQuery File Upload widget:
$('#fileupload').fileupload({
disableImageResize: false,
autoUpload: false,
disableImageResize: /Android(?!.*Chrome)|Opera/.test(window.navigator.userAgent),
maxFileSize: 5000000,
acceptFileTypes: /(\.|\/)(gif|jpe?g|png)$/i,
// Uncomment the following to send cross-domain cookies:
//xhrFields: {withCredentials: true},
});
// Enable iframe cross-domain access via redirect option:
$('#fileupload').fileupload(
'option',
'redirect',
window.location.href.replace(
/\/[^\/]*$/,
'/cors/result.html?%s'
)
);
// Upload server status check for browsers with CORS support:
if ($.support.cors) {
$.ajax({
type: 'HEAD'
}).fail(function () {
$('<div class="alert alert-danger"/>')
.text('Upload server currently unavailable - ' +
new Date())
.appendTo('#fileupload');
});
}
// Load & display existing files:
$('#fileupload').addClass('fileupload-processing');
$.ajax({
// Uncomment the following to send cross-domain cookies:
//xhrFields: {withCredentials: true},
url: $('#fileupload').attr("action"),
dataType: 'json',
context: $('#fileupload')[0]
}).always(function () {
$(this).removeClass('fileupload-processing');
}).done(function (result) {
$(this).fileupload('option', 'done')
.call(this, $.Event('done'), {result: result});
});
}
};
}();

View File

@ -0,0 +1,57 @@
var FormiCheck = function () {
return {
//main function to initiate the module
init: function () {
$('.icheck-colors li').click(function() {
var self = $(this);
if (!self.hasClass('active')) {
self.siblings().removeClass('active');
var skin = self.closest('.skin'),
color = self.attr('class') ? '-' + self.attr('class') : '',
colorTmp = skin.data('color') ? '-' + skin.data('color') : '-grey',
colorTmp = (colorTmp === '-black' ? '' : colorTmp);
checkbox_default = 'icheckbox_minimal',
radio_default = 'iradio_minimal',
checkbox = 'icheckbox_minimal' + colorTmp,
radio = 'iradio_minimal' + colorTmp;
if (skin.hasClass('skin-square')) {
checkbox_default = 'icheckbox_square';
radio_default = 'iradio_square';
checkbox = 'icheckbox_square' + colorTmp;
radio = 'iradio_square' + colorTmp;
};
if (skin.hasClass('skin-flat')) {
checkbox_default = 'icheckbox_flat';
radio_default = 'iradio_flat';
checkbox = 'icheckbox_flat' + colorTmp;
radio = 'iradio_flat' + colorTmp;
};
if (skin.hasClass('skin-line')) {
checkbox_default = 'icheckbox_line';
radio_default = 'iradio_line';
checkbox = 'icheckbox_line' + colorTmp;
radio = 'iradio_line' + colorTmp;
};
skin.find('.icheck').each(function() {
var element = $(this).hasClass('state') ? $(this) : $(this).parent();
var element_class = element.attr('class').replace(checkbox, checkbox_default + color).replace(radio, radio_default + color);
element.attr('class', element_class);
});
skin.data('color', self.attr('class') ? self.attr('class') : 'black');
self.addClass('active');
};
});
}
};
}();

View File

@ -0,0 +1,527 @@
var FormImageCrop = function () {
var demo1 = function() {
$('#demo1').Jcrop();
}
var demo2 = function() {
var jcrop_api;
$('#demo2').Jcrop({
onChange: showCoords,
onSelect: showCoords,
onRelease: clearCoords
},function(){
jcrop_api = this;
});
$('#coords').on('change','input',function(e){
var x1 = $('#x1').val(),
x2 = $('#x2').val(),
y1 = $('#y1').val(),
y2 = $('#y2').val();
jcrop_api.setSelect([x1,y1,x2,y2]);
});
// Simple event handler, called from onChange and onSelect
// event handlers, as per the Jcrop invocation above
function showCoords(c)
{
$('#x1').val(c.x);
$('#y1').val(c.y);
$('#x2').val(c.x2);
$('#y2').val(c.y2);
$('#w').val(c.w);
$('#h').val(c.h);
};
function clearCoords()
{
$('#coords input').val('');
};
}
var demo3 = function() {
// Create variables (in this scope) to hold the API and image size
var jcrop_api,
boundx,
boundy,
// Grab some information about the preview pane
$preview = $('#preview-pane'),
$pcnt = $('#preview-pane .preview-container'),
$pimg = $('#preview-pane .preview-container img'),
xsize = $pcnt.width(),
ysize = $pcnt.height();
console.log('init',[xsize,ysize]);
$('#demo3').Jcrop({
onChange: updatePreview,
onSelect: updatePreview,
aspectRatio: xsize / ysize
},function(){
// Use the API to get the real image size
var bounds = this.getBounds();
boundx = bounds[0];
boundy = bounds[1];
// Store the API in the jcrop_api variable
jcrop_api = this;
// Move the preview into the jcrop container for css positioning
$preview.appendTo(jcrop_api.ui.holder);
});
function updatePreview(c)
{
if (parseInt(c.w) > 0)
{
var rx = xsize / c.w;
var ry = ysize / c.h;
$pimg.css({
width: Math.round(rx * boundx) + 'px',
height: Math.round(ry * boundy) + 'px',
marginLeft: '-' + Math.round(rx * c.x) + 'px',
marginTop: '-' + Math.round(ry * c.y) + 'px'
});
}
};
}
var demo4 = function() {
var jcrop_api;
$('#demo4').Jcrop({
bgFade: true,
bgOpacity: .2,
setSelect: [ 60, 70, 540, 330 ]
},function(){
jcrop_api = this;
});
$('#fadetog').change(function(){
jcrop_api.setOptions({
bgFade: this.checked
});
}).attr('checked', true);
Metronic.updateUniform('#fadetog');
$('#shadetog').change(function(){
if (this.checked) $('#shadetxt').slideDown();
else $('#shadetxt').slideUp();
jcrop_api.setOptions({
shade: this.checked
});
}).attr('checked', false);
// Define page sections
var sections = {
bgc_buttons: 'Change bgColor',
bgo_buttons: 'Change bgOpacity',
anim_buttons: 'Animate Selection'
};
// Define animation buttons
var ac = {
anim1: [217,122,382,284],
anim2: [20,20,580,380],
anim3: [24,24,176,376],
anim4: [347,165,550,355],
anim5: [136,55,472,183]
};
// Define bgOpacity buttons
var bgo = {
Low: .2,
Mid: .5,
High: .8,
Full: 1
};
// Define bgColor buttons
var bgc = {
R: '#900',
B: '#4BB6F0',
Y: '#F0B207',
G: '#46B81C',
W: 'white',
K: 'black'
};
// Create fieldset targets for buttons
for(i in sections)
insertSection(i,sections[i]);
function create_btn(c) {
var $o = $('<button />').addClass('btn small');
if (c) $o.append(c);
return $o;
}
var a_count = 1;
// Create animation buttons
for(i in ac) {
$('#anim_buttons .btn-group')
.append(
create_btn(a_count++).click(animHandler(ac[i])),
' '
);
}
$('#anim_buttons .btn-group').append(
create_btn('Bye!').click(function(e){
$(e.target).addClass('active');
jcrop_api.animateTo(
[300,200,300,200],
function(){
this.release();
$(e.target).closest('.btn-group').find('.active').removeClass('active');
}
);
return false;
})
);
// Create bgOpacity buttons
for(i in bgo) {
$('#bgo_buttons .btn-group').append(
create_btn(i).click(setoptHandler('bgOpacity',bgo[i])),
' '
);
}
// Create bgColor buttons
for(i in bgc) {
$('#bgc_buttons .btn-group').append(
create_btn(i).css({
background: bgc[i],
color: ((i == 'K') || (i == 'R'))?'white':'black'
}).click(setoptHandler('bgColor',bgc[i])), ' '
);
}
// Function to insert named sections into interface
function insertSection(k,v) {
$('#interface').prepend(
$('<fieldset></fieldset>').attr('id',k).append(
$('<h4></h4>').append(v),
'<div class="btn-toolbar"><div class="btn-group"></div></div>'
)
);
};
// Handler for option-setting buttons
function setoptHandler(k,v) {
return function(e) {
$(e.target).closest('.btn-group').find('.active').removeClass('active');
$(e.target).addClass('active');
var opt = { };
opt[k] = v;
jcrop_api.setOptions(opt);
return false;
};
};
// Handler for animation buttons
function animHandler(v) {
return function(e) {
$(e.target).addClass('active');
jcrop_api.animateTo(v,function(){
$(e.target).closest('.btn-group').find('.active').removeClass('active');
});
return false;
};
};
$('#bgo_buttons .btn:first,#bgc_buttons .btn:last').addClass('active');
$('#interface').show();
}
var demo5 = function() {
// The variable jcrop_api will hold a reference to the
// Jcrop API once Jcrop is instantiated.
var jcrop_api;
// In this example, since Jcrop may be attached or detached
// at the whim of the user, I've wrapped the call into a function
initJcrop();
// The function is pretty simple
function initJcrop()//{{{
{
// Hide any interface elements that require Jcrop
// (This is for the local user interface portion.)
$('.requiresjcrop').hide();
// Invoke Jcrop in typical fashion
$('#demo5').Jcrop({
onRelease: releaseCheck
},function(){
jcrop_api = this;
jcrop_api.animateTo([100,100,400,300]);
// Setup and dipslay the interface for "enabled"
$('#can_click,#can_move,#can_size').attr('checked','checked');
Metronic.updateUniform('#can_click,#can_move,#can_size');
$('#ar_lock,#size_lock,#bg_swap').attr('checked',false);
Metronic.updateUniform('#ar_lock,#size_lock,#bg_swap');
$('.requiresjcrop').show();
});
};
//}}}
// Use the API to find cropping dimensions
// Then generate a random selection
// This function is used by setSelect and animateTo buttons
// Mainly for demonstration purposes
function getRandom() {
var dim = jcrop_api.getBounds();
return [
Math.round(Math.random() * dim[0]),
Math.round(Math.random() * dim[1]),
Math.round(Math.random() * dim[0]),
Math.round(Math.random() * dim[1])
];
};
// This function is bound to the onRelease handler...
// In certain circumstances (such as if you set minSize
// and aspectRatio together), you can inadvertently lose
// the selection. This callback re-enables creating selections
// in such a case. Although the need to do this is based on a
// buggy behavior, it's recommended that you in some way trap
// the onRelease callback if you use allowSelect: false
function releaseCheck()
{
jcrop_api.setOptions({ allowSelect: true });
$('#can_click').attr('checked',false);
Metronic.updateUniform('#can_click');
};
// Attach interface buttons
// This may appear to be a lot of code but it's simple stuff
$('#setSelect').click(function(e) {
// Sets a random selection
jcrop_api.setSelect(getRandom());
});
$('#animateTo').click(function(e) {
// Animates to a random selection
jcrop_api.animateTo(getRandom());
});
$('#release').click(function(e) {
// Release method clears the selection
jcrop_api.release();
});
$('#disable').click(function(e) {
// Disable Jcrop instance
jcrop_api.disable();
// Update the interface to reflect disabled state
$('#enable').show();
$('.requiresjcrop').hide();
});
$('#enable').click(function(e) {
// Re-enable Jcrop instance
jcrop_api.enable();
// Update the interface to reflect enabled state
$('#enable').hide();
$('.requiresjcrop').show();
});
$('#rehook').click(function(e) {
// This button is visible when Jcrop has been destroyed
// It performs the re-attachment and updates the UI
$('#rehook,#enable').hide();
initJcrop();
$('#unhook,.requiresjcrop').show();
return false;
});
$('#unhook').click(function(e) {
// Destroy Jcrop widget, restore original state
jcrop_api.destroy();
// Update the interface to reflect un-attached state
$('#unhook,#enable,.requiresjcrop').hide();
$('#rehook').show();
return false;
});
// Hook up the three image-swapping buttons
$('#img1').click(function(e) {
$(this).addClass('active').closest('.btn-group')
.find('button.active').not(this).removeClass('active');
jcrop_api.setImage('../../assets/global/plugins/jcrop/demos/demo_files/sago.jpg');
jcrop_api.setOptions({ bgOpacity: .6 });
return false;
});
$('#img2').click(function(e) {
$(this).addClass('active').closest('.btn-group')
.find('button.active').not(this).removeClass('active');
jcrop_api.setImage('../../assets/global/plugins/jcrop/demos/demo_files/pool.jpg');
jcrop_api.setOptions({ bgOpacity: .6 });
return false;
});
$('#img3').click(function(e) {
$(this).addClass('active').closest('.btn-group')
.find('button.active').not(this).removeClass('active');
jcrop_api.setImage('../../assets/global/plugins/jcrop/demos/demo_files/sago.jpg',function(){
this.setOptions({
bgOpacity: 1,
outerImage: '../../assets/global/plugins/jcrop/demos/demo_files/sagomod.jpg'
});
this.animateTo(getRandom());
});
return false;
});
// The checkboxes simply set options based on it's checked value
// Options are changed by passing a new options object
// Also, to prevent strange behavior, they are initially checked
// This matches the default initial state of Jcrop
$('#can_click').change(function(e) {
jcrop_api.setOptions({ allowSelect: !!this.checked });
jcrop_api.focus();
});
$('#can_move').change(function(e) {
jcrop_api.setOptions({ allowMove: !!this.checked });
jcrop_api.focus();
});
$('#can_size').change(function(e) {
jcrop_api.setOptions({ allowResize: !!this.checked });
jcrop_api.focus();
});
$('#ar_lock').change(function(e) {
jcrop_api.setOptions(this.checked?
{ aspectRatio: 4/3 }: { aspectRatio: 0 });
jcrop_api.focus();
});
$('#size_lock').change(function(e) {
jcrop_api.setOptions(this.checked? {
minSize: [ 80, 80 ],
maxSize: [ 350, 350 ]
}: {
minSize: [ 0, 0 ],
maxSize: [ 0, 0 ]
});
jcrop_api.focus();
});
}
var demo6 = function() {
var api;
$('#demo6').Jcrop({
// start off with jcrop-light class
bgOpacity: 0.5,
bgColor: 'white',
addClass: 'jcrop-light'
},function(){
api = this;
api.setSelect([130,65,130+350,65+285]);
api.setOptions({ bgFade: true });
api.ui.selection.addClass('jcrop-selection');
});
$('#buttonbar').on('click','button',function(e){
var $t = $(this), $g = $t.closest('.btn-group');
$g.find('button.active').removeClass('active');
$t.addClass('active');
$g.find('[data-setclass]').each(function(){
var $th = $(this), c = $th.data('setclass'),
a = $th.hasClass('active');
if (a) {
api.ui.holder.addClass(c);
switch(c){
case 'jcrop-light':
api.setOptions({ bgColor: 'white', bgOpacity: 0.5 });
break;
case 'jcrop-dark':
api.setOptions({ bgColor: 'black', bgOpacity: 0.4 });
break;
case 'jcrop-normal':
api.setOptions({
bgColor: $.Jcrop.defaults.bgColor,
bgOpacity: $.Jcrop.defaults.bgOpacity
});
break;
}
}
else api.ui.holder.removeClass(c);
});
});
}
var demo7 = function() {
// I did JSON.stringify(jcrop_api.tellSelect()) on a crop I liked:
var c = {"x":13,"y":7,"x2":487,"y2":107,"w":474,"h":100};
$('#demo7').Jcrop({
bgFade: true,
setSelect: [c.x,c.y,c.x2,c.y2]
});
}
var demo8 = function() {
$('#demo8').Jcrop({
aspectRatio: 1,
onSelect: updateCoords
});
function updateCoords(c)
{
$('#crop_x').val(c.x);
$('#crop_y').val(c.y);
$('#crop_w').val(c.w);
$('#crop_h').val(c.h);
};
$('#demo8_form').submit(function(){
if (parseInt($('#crop_w').val())) return true;
alert('Please select a crop region then press submit.');
return false;
});
}
var handleResponsive = function() {
if ($(window).width() <= 1024 && $(window).width() >= 678) {
$('.responsive-1024').each(function(){
$(this).attr("data-class", $(this).attr("class"));
$(this).attr("class", 'responsive-1024 col-md-12');
});
} else {
$('.responsive-1024').each(function(){
if ($(this).attr("data-class")) {
$(this).attr("class", $(this).attr("data-class"));
$(this).removeAttr("data-class");
}
});
}
}
return {
//main function to initiate the module
init: function () {
if (!jQuery().Jcrop) {;
return;
}
Metronic.addResizeHandler(handleResponsive);
handleResponsive();
demo1();
demo2();
demo3();
demo4();
demo5();
demo6();
demo7();
demo8();
}
};
}();

View File

@ -0,0 +1,49 @@
var FormSamples = function () {
return {
//main function to initiate the module
init: function () {
// use select2 dropdown instead of chosen as select2 works fine with bootstrap on responsive layouts.
$('.select2_category').select2({
placeholder: "Select an option",
allowClear: true
});
$('.select2_sample1').select2({
placeholder: "Select a State",
allowClear: true
});
$(".select2_sample2").select2({
placeholder: "Type to select an option",
allowClear: true,
minimumInputLength: 1,
query: function (query) {
var data = {
results: []
}, i, j, s;
for (i = 1; i < 5; i++) {
s = "";
for (j = 0; j < i; j++) {
s = s + query.term;
}
data.results.push({
id: query.term + i,
text: s
});
}
query.callback(data);
}
});
$(".select2_sample3").select2({
tags: ["red", "green", "blue", "yellow", "pink"]
});
}
};
}();

View File

@ -0,0 +1,341 @@
var FormValidation = function () {
// basic validation
var handleValidation1 = function() {
// for more info visit the official plugin documentation:
// http://docs.jquery.com/Plugins/Validation
var form1 = $('#form_sample_1');
var error1 = $('.alert-danger', form1);
var success1 = $('.alert-success', form1);
form1.validate({
errorElement: 'span', //default input error message container
errorClass: 'help-block help-block-error', // default input error message class
focusInvalid: false, // do not focus the last invalid input
ignore: "", // validate all fields including form hidden input
messages: {
select_multi: {
maxlength: jQuery.validator.format("Max {0} items allowed for selection"),
minlength: jQuery.validator.format("At least {0} items must be selected")
}
},
rules: {
name: {
minlength: 2,
required: true
},
email: {
required: true,
email: true
},
url: {
required: true,
url: true
},
number: {
required: true,
number: true
},
digits: {
required: true,
digits: true
},
creditcard: {
required: true,
creditcard: true
},
occupation: {
minlength: 5,
},
select: {
required: true
},
select_multi: {
required: true,
minlength: 1,
maxlength: 3
}
},
invalidHandler: function (event, validator) { //display error alert on form submit
success1.hide();
error1.show();
Metronic.scrollTo(error1, -200);
},
highlight: function (element) { // hightlight error inputs
$(element)
.closest('.form-group').addClass('has-error'); // set error class to the control group
},
unhighlight: function (element) { // revert the change done by hightlight
$(element)
.closest('.form-group').removeClass('has-error'); // set error class to the control group
},
success: function (label) {
label
.closest('.form-group').removeClass('has-error'); // set success class to the control group
},
submitHandler: function (form) {
success1.show();
error1.hide();
}
});
}
// validation using icons
var handleValidation2 = function() {
// for more info visit the official plugin documentation:
// http://docs.jquery.com/Plugins/Validation
var form2 = $('#form_sample_2');
var error2 = $('.alert-danger', form2);
var success2 = $('.alert-success', form2);
form2.validate({
errorElement: 'span', //default input error message container
errorClass: 'help-block help-block-error', // default input error message class
focusInvalid: false, // do not focus the last invalid input
ignore: "", // validate all fields including form hidden input
rules: {
name: {
minlength: 2,
required: true
},
email: {
required: true,
email: true
},
email: {
required: true,
email: true
},
url: {
required: true,
url: true
},
number: {
required: true,
number: true
},
digits: {
required: true,
digits: true
},
creditcard: {
required: true,
creditcard: true
},
},
invalidHandler: function (event, validator) { //display error alert on form submit
success2.hide();
error2.show();
Metronic.scrollTo(error2, -200);
},
errorPlacement: function (error, element) { // render error placement for each input type
var icon = $(element).parent('.input-icon').children('i');
icon.removeClass('fa-check').addClass("fa-warning");
icon.attr("data-original-title", error.text()).tooltip({'container': 'body'});
},
highlight: function (element) { // hightlight error inputs
$(element)
.closest('.form-group').removeClass("has-success").addClass('has-error'); // set error class to the control group
},
unhighlight: function (element) { // revert the change done by hightlight
},
success: function (label, element) {
var icon = $(element).parent('.input-icon').children('i');
$(element).closest('.form-group').removeClass('has-error').addClass('has-success'); // set success class to the control group
icon.removeClass("fa-warning").addClass("fa-check");
},
submitHandler: function (form) {
success2.show();
error2.hide();
form[0].submit(); // submit the form
}
});
}
// advance validation
var handleValidation3 = function() {
// for more info visit the official plugin documentation:
// http://docs.jquery.com/Plugins/Validation
var form3 = $('#form_sample_3');
var error3 = $('.alert-danger', form3);
var success3 = $('.alert-success', form3);
//IMPORTANT: update CKEDITOR textarea with actual content before submit
form3.on('submit', function() {
for(var instanceName in CKEDITOR.instances) {
CKEDITOR.instances[instanceName].updateElement();
}
})
form3.validate({
errorElement: 'span', //default input error message container
errorClass: 'help-block help-block-error', // default input error message class
focusInvalid: false, // do not focus the last invalid input
ignore: "", // validate all fields including form hidden input
rules: {
name: {
minlength: 2,
required: true
},
email: {
required: true,
email: true
},
options1: {
required: true
},
options2: {
required: true
},
select2tags: {
required: true
},
datepicker: {
required: true
},
occupation: {
minlength: 5,
},
membership: {
required: true
},
service: {
required: true,
minlength: 2
},
markdown: {
required: true
},
editor1: {
required: true
},
editor2: {
required: true
}
},
messages: { // custom messages for radio buttons and checkboxes
membership: {
required: "Please select a Membership type"
},
service: {
required: "Please select at least 2 types of Service",
minlength: jQuery.validator.format("Please select at least {0} types of Service")
}
},
errorPlacement: function (error, element) { // render error placement for each input type
if (element.parent(".input-group").size() > 0) {
error.insertAfter(element.parent(".input-group"));
} else if (element.attr("data-error-container")) {
error.appendTo(element.attr("data-error-container"));
} else if (element.parents('.radio-list').size() > 0) {
error.appendTo(element.parents('.radio-list').attr("data-error-container"));
} else if (element.parents('.radio-inline').size() > 0) {
error.appendTo(element.parents('.radio-inline').attr("data-error-container"));
} else if (element.parents('.checkbox-list').size() > 0) {
error.appendTo(element.parents('.checkbox-list').attr("data-error-container"));
} else if (element.parents('.checkbox-inline').size() > 0) {
error.appendTo(element.parents('.checkbox-inline').attr("data-error-container"));
} else {
error.insertAfter(element); // for other inputs, just perform default behavior
}
},
invalidHandler: function (event, validator) { //display error alert on form submit
success3.hide();
error3.show();
Metronic.scrollTo(error3, -200);
},
highlight: function (element) { // hightlight error inputs
$(element)
.closest('.form-group').addClass('has-error'); // set error class to the control group
},
unhighlight: function (element) { // revert the change done by hightlight
$(element)
.closest('.form-group').removeClass('has-error'); // set error class to the control group
},
success: function (label) {
label
.closest('.form-group').removeClass('has-error'); // set success class to the control group
},
submitHandler: function (form) {
success3.show();
error3.hide();
form[0].submit(); // submit the form
}
});
//apply validation on select2 dropdown value change, this only needed for chosen dropdown integration.
$('.select2me', form3).change(function () {
form3.validate().element($(this)); //revalidate the chosen dropdown value and show error or success message for the input
});
// initialize select2 tags
$("#select2_tags").change(function() {
form3.validate().element($(this)); //revalidate the chosen dropdown value and show error or success message for the input
}).select2({
tags: ["red", "green", "blue", "yellow", "pink"]
});
//initialize datepicker
$('.date-picker').datepicker({
rtl: Metronic.isRTL(),
autoclose: true
});
$('.date-picker .form-control').change(function() {
form3.validate().element($(this)); //revalidate the chosen dropdown value and show error or success message for the input
})
}
var handleWysihtml5 = function() {
if (!jQuery().wysihtml5) {
return;
}
if ($('.wysihtml5').size() > 0) {
$('.wysihtml5').wysihtml5({
"stylesheets": ["../../assets/global/plugins/bootstrap-wysihtml5/wysiwyg-color.css"]
});
}
}
return {
//main function to initiate the module
init: function () {
handleWysihtml5();
handleValidation1();
handleValidation2();
handleValidation3();
}
};
}();

View File

@ -0,0 +1,255 @@
var FormWizard = function () {
return {
//main function to initiate the module
init: function () {
if (!jQuery().bootstrapWizard) {
return;
}
function format(state) {
if (!state.id) return state.text; // optgroup
return "<img class='flag' src='../../assets/global/img/flags/" + state.id.toLowerCase() + ".png'/>&nbsp;&nbsp;" + state.text;
}
$("#country_list").select2({
placeholder: "Select",
allowClear: true,
formatResult: format,
formatSelection: format,
escapeMarkup: function (m) {
return m;
}
});
var form = $('#submit_form');
var error = $('.alert-danger', form);
var success = $('.alert-success', form);
form.validate({
doNotHideMessage: true, //this option enables to show the error/success messages on tab switch.
errorElement: 'span', //default input error message container
errorClass: 'help-block help-block-error', // default input error message class
focusInvalid: false, // do not focus the last invalid input
rules: {
//account
username: {
minlength: 5,
required: true
},
password: {
minlength: 5,
required: true
},
rpassword: {
minlength: 5,
required: true,
equalTo: "#submit_form_password"
},
//profile
fullname: {
required: true
},
email: {
required: true,
email: true
},
phone: {
required: true
},
gender: {
required: true
},
address: {
required: true
},
city: {
required: true
},
country: {
required: true
},
//payment
card_name: {
required: true
},
card_number: {
minlength: 16,
maxlength: 16,
required: true
},
card_cvc: {
digits: true,
required: true,
minlength: 3,
maxlength: 4
},
card_expiry_date: {
required: true
},
'payment[]': {
required: true,
minlength: 1
}
},
messages: { // custom messages for radio buttons and checkboxes
'payment[]': {
required: "Please select at least one option",
minlength: jQuery.validator.format("Please select at least one option")
}
},
errorPlacement: function (error, element) { // render error placement for each input type
if (element.attr("name") == "gender") { // for uniform radio buttons, insert the after the given container
error.insertAfter("#form_gender_error");
} else if (element.attr("name") == "payment[]") { // for uniform checkboxes, insert the after the given container
error.insertAfter("#form_payment_error");
} else {
error.insertAfter(element); // for other inputs, just perform default behavior
}
},
invalidHandler: function (event, validator) { //display error alert on form submit
success.hide();
error.show();
Metronic.scrollTo(error, -200);
},
highlight: function (element) { // hightlight error inputs
$(element)
.closest('.form-group').removeClass('has-success').addClass('has-error'); // set error class to the control group
},
unhighlight: function (element) { // revert the change done by hightlight
$(element)
.closest('.form-group').removeClass('has-error'); // set error class to the control group
},
success: function (label) {
if (label.attr("for") == "gender" || label.attr("for") == "payment[]") { // for checkboxes and radio buttons, no need to show OK icon
label
.closest('.form-group').removeClass('has-error').addClass('has-success');
label.remove(); // remove error label here
} else { // display success icon for other inputs
label
.addClass('valid') // mark the current input as valid and display OK icon
.closest('.form-group').removeClass('has-error').addClass('has-success'); // set success class to the control group
}
},
submitHandler: function (form) {
success.show();
error.hide();
//add here some ajax code to submit your form or just call form.submit() if you want to submit the form without ajax
}
});
var displayConfirm = function() {
$('#tab4 .form-control-static', form).each(function(){
var input = $('[name="'+$(this).attr("data-display")+'"]', form);
if (input.is(":radio")) {
input = $('[name="'+$(this).attr("data-display")+'"]:checked', form);
}
if (input.is(":text") || input.is("textarea")) {
$(this).html(input.val());
} else if (input.is("select")) {
$(this).html(input.find('option:selected').text());
} else if (input.is(":radio") && input.is(":checked")) {
$(this).html(input.attr("data-title"));
} else if ($(this).attr("data-display") == 'payment[]') {
var payment = [];
$('[name="payment[]"]:checked', form).each(function(){
payment.push($(this).attr('data-title'));
});
$(this).html(payment.join("<br>"));
}
});
}
var handleTitle = function(tab, navigation, index) {
var total = navigation.find('li').length;
var current = index + 1;
// set wizard title
$('.step-title', $('#form_wizard_1')).text('Step ' + (index + 1) + ' of ' + total);
// set done steps
jQuery('li', $('#form_wizard_1')).removeClass("done");
var li_list = navigation.find('li');
for (var i = 0; i < index; i++) {
jQuery(li_list[i]).addClass("done");
}
if (current == 1) {
$('#form_wizard_1').find('.button-previous').hide();
} else {
$('#form_wizard_1').find('.button-previous').show();
}
if (current >= total) {
$('#form_wizard_1').find('.button-next').hide();
$('#form_wizard_1').find('.button-submit').show();
displayConfirm();
} else {
$('#form_wizard_1').find('.button-next').show();
$('#form_wizard_1').find('.button-submit').hide();
}
Metronic.scrollTo($('.page-title'));
}
// default form wizard
$('#form_wizard_1').bootstrapWizard({
'nextSelector': '.button-next',
'previousSelector': '.button-previous',
onTabClick: function (tab, navigation, index, clickedIndex) {
return false;
/*
success.hide();
error.hide();
if (form.valid() == false) {
return false;
}
handleTitle(tab, navigation, clickedIndex);
*/
},
onNext: function (tab, navigation, index) {
success.hide();
error.hide();
if (form.valid() == false) {
return false;
}
handleTitle(tab, navigation, index);
},
onPrevious: function (tab, navigation, index) {
success.hide();
error.hide();
handleTitle(tab, navigation, index);
},
onTabShow: function (tab, navigation, index) {
var total = navigation.find('li').length;
var current = index + 1;
var $percent = (current / total) * 100;
$('#form_wizard_1').find('.progress-bar').css({
width: $percent + '%'
});
}
});
$('#form_wizard_1').find('.button-previous').hide();
$('#form_wizard_1 .button-submit').click(function () {
alert('Finished! Hope you like it :)');
}).hide();
//apply validation on select2 dropdown value change, this only needed for chosen dropdown integration.
$('#country_list', form).change(function () {
form.validate().element($(this)); //revalidate the chosen dropdown value and show error or success message for the input
});
}
};
}();

View File

@ -0,0 +1,332 @@
var Inbox = function () {
var content = $('.inbox-content');
var loading = $('.inbox-loading');
var listListing = '';
var loadInbox = function (el, name) {
var url = 'inbox_inbox.html';
var title = $('.inbox-nav > li.' + name + ' a').attr('data-title');
listListing = name;
loading.show();
content.html('');
toggleButton(el);
$.ajax({
type: "GET",
cache: false,
url: url,
dataType: "html",
success: function(res)
{
toggleButton(el);
$('.inbox-nav > li.active').removeClass('active');
$('.inbox-nav > li.' + name).addClass('active');
$('.inbox-header > h1').text(title);
loading.hide();
content.html(res);
if (Layout.fixContentHeight) {
Layout.fixContentHeight();
}
Metronic.initUniform();
},
error: function(xhr, ajaxOptions, thrownError)
{
toggleButton(el);
},
async: false
});
// handle group checkbox:
jQuery('body').on('change', '.mail-group-checkbox', function () {
var set = jQuery('.mail-checkbox');
var checked = jQuery(this).is(":checked");
jQuery(set).each(function () {
$(this).attr("checked", checked);
});
jQuery.uniform.update(set);
});
}
var loadMessage = function (el, name, resetMenu) {
var url = 'inbox_view.html';
loading.show();
content.html('');
toggleButton(el);
var message_id = el.parent('tr').attr("data-messageid");
$.ajax({
type: "GET",
cache: false,
url: url,
dataType: "html",
data: {'message_id': message_id},
success: function(res)
{
toggleButton(el);
if (resetMenu) {
$('.inbox-nav > li.active').removeClass('active');
}
$('.inbox-header > h1').text('View Message');
loading.hide();
content.html(res);
Layout.fixContentHeight();
Metronic.initUniform();
},
error: function(xhr, ajaxOptions, thrownError)
{
toggleButton(el);
},
async: false
});
}
var initWysihtml5 = function () {
$('.inbox-wysihtml5').wysihtml5({
"stylesheets": ["../../assets/global/plugins/bootstrap-wysihtml5/wysiwyg-color.css"]
});
}
var initFileupload = function () {
$('#fileupload').fileupload({
// Uncomment the following to send cross-domain cookies:
//xhrFields: {withCredentials: true},
url: '../../assets/global/plugins/jquery-file-upload/server/php/',
autoUpload: true
});
// Upload server status check for browsers with CORS support:
if ($.support.cors) {
$.ajax({
url: '../../assets/global/plugins/jquery-file-upload/server/php/',
type: 'HEAD'
}).fail(function () {
$('<span class="alert alert-error"/>')
.text('Upload server currently unavailable - ' +
new Date())
.appendTo('#fileupload');
});
}
}
var loadCompose = function (el) {
var url = 'inbox_compose.html';
loading.show();
content.html('');
toggleButton(el);
// load the form via ajax
$.ajax({
type: "GET",
cache: false,
url: url,
dataType: "html",
success: function(res)
{
toggleButton(el);
$('.inbox-nav > li.active').removeClass('active');
$('.inbox-header > h1').text('Compose');
loading.hide();
content.html(res);
initFileupload();
initWysihtml5();
$('.inbox-wysihtml5').focus();
Layout.fixContentHeight();
Metronic.initUniform();
},
error: function(xhr, ajaxOptions, thrownError)
{
toggleButton(el);
},
async: false
});
}
var loadReply = function (el) {
var messageid = $(el).attr("data-messageid");
var url = 'inbox_reply.html?messageid=' + messageid;
loading.show();
content.html('');
toggleButton(el);
// load the form via ajax
$.ajax({
type: "GET",
cache: false,
url: url,
dataType: "html",
success: function(res)
{
toggleButton(el);
$('.inbox-nav > li.active').removeClass('active');
$('.inbox-header > h1').text('Reply');
loading.hide();
content.html(res);
$('[name="message"]').val($('#reply_email_content_body').html());
handleCCInput(); // init "CC" input field
initFileupload();
initWysihtml5();
Layout.fixContentHeight();
Metronic.initUniform();
},
error: function(xhr, ajaxOptions, thrownError)
{
toggleButton(el);
},
async: false
});
}
var loadSearchResults = function (el) {
var url = 'inbox_inbox.html';
loading.show();
content.html('');
toggleButton(el);
$.ajax({
type: "GET",
cache: false,
url: url,
dataType: "html",
success: function(res)
{
toggleButton(el);
$('.inbox-nav > li.active').removeClass('active');
$('.inbox-header > h1').text('Search');
loading.hide();
content.html(res);
Layout.fixContentHeight();
Metronic.initUniform();
},
error: function(xhr, ajaxOptions, thrownError)
{
toggleButton(el);
},
async: false
});
}
var handleCCInput = function () {
var the = $('.inbox-compose .mail-to .inbox-cc');
var input = $('.inbox-compose .input-cc');
the.hide();
input.show();
$('.close', input).click(function () {
input.hide();
the.show();
});
}
var handleBCCInput = function () {
var the = $('.inbox-compose .mail-to .inbox-bcc');
var input = $('.inbox-compose .input-bcc');
the.hide();
input.show();
$('.close', input).click(function () {
input.hide();
the.show();
});
}
var toggleButton = function(el) {
if (typeof el == 'undefined') {
return;
}
if (el.attr("disabled")) {
el.attr("disabled", false);
} else {
el.attr("disabled", true);
}
}
return {
//main function to initiate the module
init: function () {
// handle compose btn click
$('.inbox').on('click', '.compose-btn a', function () {
loadCompose($(this));
});
// handle discard btn
$('.inbox').on('click', '.inbox-discard-btn', function(e) {
e.preventDefault();
loadInbox($(this), listListing);
});
// handle reply and forward button click
$('.inbox').on('click', '.reply-btn', function () {
loadReply($(this));
});
// handle view message
$('.inbox-content').on('click', '.view-message', function () {
loadMessage($(this));
});
// handle inbox listing
$('.inbox-nav > li.inbox > a').click(function () {
loadInbox($(this), 'inbox');
});
// handle sent listing
$('.inbox-nav > li.sent > a').click(function () {
loadInbox($(this), 'sent');
});
// handle draft listing
$('.inbox-nav > li.draft > a').click(function () {
loadInbox($(this), 'draft');
});
// handle trash listing
$('.inbox-nav > li.trash > a').click(function () {
loadInbox($(this), 'trash');
});
//handle compose/reply cc input toggle
$('.inbox-content').on('click', '.mail-to .inbox-cc', function () {
handleCCInput();
});
//handle compose/reply bcc input toggle
$('.inbox-content').on('click', '.mail-to .inbox-bcc', function () {
handleBCCInput();
});
//handle loading content based on URL parameter
if (Metronic.getURLParameter("a") === "view") {
loadMessage();
} else if (Metronic.getURLParameter("a") === "compose") {
loadCompose();
} else {
$('.inbox-nav > li.inbox > a').click();
}
}
};
}();

View File

@ -0,0 +1,630 @@
var Index = function () {
return {
//main function
init: function () {
Metronic.addResizeHandler(function () {
jQuery('.vmaps').each(function () {
var map = jQuery(this);
map.width(map.parent().width());
});
});
},
initJQVMAP: function () {
if (!jQuery().vectorMap) {
return;
}
var showMap = function (name) {
jQuery('.vmaps').hide();
jQuery('#vmap_' + name).show();
}
var setMap = function (name) {
var data = {
map: 'world_en',
backgroundColor: null,
borderColor: '#333333',
borderOpacity: 0.5,
borderWidth: 1,
color: '#c6c6c6',
enableZoom: true,
hoverColor: '#c9dfaf',
hoverOpacity: null,
values: sample_data,
normalizeFunction: 'linear',
scaleColors: ['#b6da93', '#909cae'],
selectedColor: '#c9dfaf',
selectedRegion: null,
showTooltip: true,
onLabelShow: function (event, label, code) {
},
onRegionOver: function (event, code) {
if (code == 'ca') {
event.preventDefault();
}
},
onRegionClick: function (element, code, region) {
var message = 'You clicked "' + region + '" which has the code: ' + code.toUpperCase();
alert(message);
}
};
data.map = name + '_en';
var map = jQuery('#vmap_' + name);
if (!map) {
return;
}
map.width(map.parent().parent().width());
map.show();
map.vectorMap(data);
map.hide();
}
setMap("world");
setMap("usa");
setMap("europe");
setMap("russia");
setMap("germany");
showMap("world");
jQuery('#regional_stat_world').click(function () {
showMap("world");
});
jQuery('#regional_stat_usa').click(function () {
showMap("usa");
});
jQuery('#regional_stat_europe').click(function () {
showMap("europe");
});
jQuery('#regional_stat_russia').click(function () {
showMap("russia");
});
jQuery('#regional_stat_germany').click(function () {
showMap("germany");
});
$('#region_statistics_loading').hide();
$('#region_statistics_content').show();
},
initCalendar: function () {
if (!jQuery().fullCalendar) {
return;
}
var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();
var h = {};
if ($('#calendar').width() <= 400) {
$('#calendar').addClass("mobile");
h = {
left: 'title, prev, next',
center: '',
right: 'today,month,agendaWeek,agendaDay'
};
} else {
$('#calendar').removeClass("mobile");
if (Metronic.isRTL()) {
h = {
right: 'title',
center: '',
left: 'prev,next,today,month,agendaWeek,agendaDay'
};
} else {
h = {
left: 'title',
center: '',
right: 'prev,next,today,month,agendaWeek,agendaDay'
};
}
}
$('#calendar').fullCalendar('destroy'); // destroy the calendar
$('#calendar').fullCalendar({ //re-initialize the calendar
disableDragging : false,
header: h,
editable: true,
events: [{
title: 'All Day',
start: new Date(y, m, 1),
backgroundColor: Metronic.getBrandColor('yellow')
}, {
title: 'Long Event',
start: new Date(y, m, d - 5),
end: new Date(y, m, d - 2),
backgroundColor: Metronic.getBrandColor('blue')
}, {
title: 'Repeating Event',
start: new Date(y, m, d - 3, 16, 0),
allDay: false,
backgroundColor: Metronic.getBrandColor('red')
}, {
title: 'Repeating Event',
start: new Date(y, m, d + 6, 16, 0),
allDay: false,
backgroundColor: Metronic.getBrandColor('green')
}, {
title: 'Meeting',
start: new Date(y, m, d+9, 10, 30),
allDay: false
}, {
title: 'Lunch',
start: new Date(y, m, d, 14, 0),
end: new Date(y, m, d, 14, 0),
backgroundColor: Metronic.getBrandColor('grey'),
allDay: false
}, {
title: 'Birthday',
start: new Date(y, m, d + 1, 19, 0),
end: new Date(y, m, d + 1, 22, 30),
backgroundColor: Metronic.getBrandColor('purple'),
allDay: false
}, {
title: 'Click for Google',
start: new Date(y, m, 28),
end: new Date(y, m, 29),
backgroundColor: Metronic.getBrandColor('yellow'),
url: 'http://google.com/'
}]
});
},
initCharts: function () {
if (!jQuery.plot) {
return;
}
function showChartTooltip(x, y, xValue, yValue) {
$('<div id="tooltip" class="chart-tooltip">' + yValue + '<\/div>').css({
position: 'absolute',
display: 'none',
top: y - 40,
left: x - 40,
border: '0px solid #ccc',
padding: '2px 6px',
'background-color': '#fff'
}).appendTo("body").fadeIn(200);
}
var data = [];
var totalPoints = 250;
// random data generator for plot charts
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;
}
function randValue() {
return (Math.floor(Math.random() * (1 + 50 - 20))) + 10;
}
var visitors = [
['02/2013', 1500],
['03/2013', 2500],
['04/2013', 1700],
['05/2013', 800],
['06/2013', 1500],
['07/2013', 2350],
['08/2013', 1500],
['09/2013', 1300],
['10/2013', 4600]
];
if ($('#site_statistics').size() != 0) {
$('#site_statistics_loading').hide();
$('#site_statistics_content').show();
var plot_statistics = $.plot($("#site_statistics"),
[{
data: visitors,
lines: {
fill: 0.6,
lineWidth: 0
},
color: ['#f89f9f']
}, {
data: visitors,
points: {
show: true,
fill: true,
radius: 5,
fillColor: "#f89f9f",
lineWidth: 3
},
color: '#fff',
shadowSize: 0
}],
{
xaxis: {
tickLength: 0,
tickDecimals: 0,
mode: "categories",
min: 0,
font: {
lineHeight: 14,
style: "normal",
variant: "small-caps",
color: "#6F7B8A"
}
},
yaxis: {
ticks: 5,
tickDecimals: 0,
tickColor: "#eee",
font: {
lineHeight: 14,
style: "normal",
variant: "small-caps",
color: "#6F7B8A"
}
},
grid: {
hoverable: true,
clickable: true,
tickColor: "#eee",
borderColor: "#eee",
borderWidth: 1
}
});
var previousPoint = null;
$("#site_statistics").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);
showChartTooltip(item.pageX, item.pageY, item.datapoint[0], item.datapoint[1] + ' visits');
}
} else {
$("#tooltip").remove();
previousPoint = null;
}
});
}
if ($('#site_activities').size() != 0) {
//site activities
var previousPoint2 = null;
$('#site_activities_loading').hide();
$('#site_activities_content').show();
var data1 = [
['DEC', 300],
['JAN', 600],
['FEB', 1100],
['MAR', 1200],
['APR', 860],
['MAY', 1200],
['JUN', 1450],
['JUL', 1800],
['AUG', 1200],
['SEP', 600]
];
var plot_statistics = $.plot($("#site_activities"),
[{
data: data1,
lines: {
fill: 0.2,
lineWidth: 0,
},
color: ['#BAD9F5']
}, {
data: data1,
points: {
show: true,
fill: true,
radius: 4,
fillColor: "#9ACAE6",
lineWidth: 2
},
color: '#9ACAE6',
shadowSize: 1
}, {
data: data1,
lines: {
show: true,
fill: false,
lineWidth: 3
},
color: '#9ACAE6',
shadowSize: 0
}],
{
xaxis: {
tickLength: 0,
tickDecimals: 0,
mode: "categories",
min: 0,
font: {
lineHeight: 18,
style: "normal",
variant: "small-caps",
color: "#6F7B8A"
}
},
yaxis: {
ticks: 5,
tickDecimals: 0,
tickColor: "#eee",
font: {
lineHeight: 14,
style: "normal",
variant: "small-caps",
color: "#6F7B8A"
}
},
grid: {
hoverable: true,
clickable: true,
tickColor: "#eee",
borderColor: "#eee",
borderWidth: 1
}
});
$("#site_activities").bind("plothover", function (event, pos, item) {
$("#x").text(pos.x.toFixed(2));
$("#y").text(pos.y.toFixed(2));
if (item) {
if (previousPoint2 != item.dataIndex) {
previousPoint2 = item.dataIndex;
$("#tooltip").remove();
var x = item.datapoint[0].toFixed(2),
y = item.datapoint[1].toFixed(2);
showChartTooltip(item.pageX, item.pageY, item.datapoint[0], item.datapoint[1] + 'M$');
}
}
});
$('#site_activities').bind("mouseleave", function () {
$("#tooltip").remove();
});
}
},
initMiniCharts: function () {
if (!jQuery().easyPieChart || !jQuery().sparkline) {
return;
}
// IE8 Fix: function.bind polyfill
if (Metronic.isIE8() && !Function.prototype.bind) {
Function.prototype.bind = function (oThis) {
if (typeof this !== "function") {
// closest thing possible to the ECMAScript 5 internal IsCallable function
throw new TypeError("Function.prototype.bind - what is trying to be bound is not callable");
}
var aArgs = Array.prototype.slice.call(arguments, 1),
fToBind = this,
fNOP = function () {},
fBound = function () {
return fToBind.apply(this instanceof fNOP && oThis ? this : oThis,
aArgs.concat(Array.prototype.slice.call(arguments)));
};
fNOP.prototype = this.prototype;
fBound.prototype = new fNOP();
return fBound;
};
}
$('.easy-pie-chart .number.transactions').easyPieChart({
animate: 1000,
size: 75,
lineWidth: 3,
barColor: Metronic.getBrandColor('yellow')
});
$('.easy-pie-chart .number.visits').easyPieChart({
animate: 1000,
size: 75,
lineWidth: 3,
barColor: Metronic.getBrandColor('green')
});
$('.easy-pie-chart .number.bounce').easyPieChart({
animate: 1000,
size: 75,
lineWidth: 3,
barColor: Metronic.getBrandColor('red')
});
$('.easy-pie-chart-reload').click(function () {
$('.easy-pie-chart .number').each(function () {
var newValue = Math.floor(100 * Math.random());
$(this).data('easyPieChart').update(newValue);
$('span', this).text(newValue);
});
});
$("#sparkline_bar").sparkline([8, 9, 10, 11, 10, 10, 12, 10, 10, 11, 9, 12, 11, 10, 9, 11, 13, 13, 12], {
type: 'bar',
width: '100',
barWidth: 5,
height: '55',
barColor: '#35aa47',
negBarColor: '#e02222'
});
$("#sparkline_bar2").sparkline([9, 11, 12, 13, 12, 13, 10, 14, 13, 11, 11, 12, 11, 11, 10, 12, 11, 10], {
type: 'bar',
width: '100',
barWidth: 5,
height: '55',
barColor: '#ffb848',
negBarColor: '#e02222'
});
$("#sparkline_line").sparkline([9, 10, 9, 10, 10, 11, 12, 10, 10, 11, 11, 12, 11, 10, 12, 11, 10, 12], {
type: 'line',
width: '100',
height: '55',
lineColor: '#ffb848'
});
},
initChat: function () {
var cont = $('#chats');
var list = $('.chats', cont);
var form = $('.chat-form', cont);
var input = $('input', form);
var btn = $('.btn', form);
var handleClick = function (e) {
e.preventDefault();
var text = input.val();
if (text.length == 0) {
return;
}
var time = new Date();
var time_str = (time.getHours() + ':' + time.getMinutes());
var tpl = '';
tpl += '<li class="out">';
tpl += '<img class="avatar" alt="" src="' + Layout.getLayoutImgPath() + 'avatar1.jpg"/>';
tpl += '<div class="message">';
tpl += '<span class="arrow"></span>';
tpl += '<a href="#" class="name">Bob Nilson</a>&nbsp;';
tpl += '<span class="datetime">at ' + time_str + '</span>';
tpl += '<span class="body">';
tpl += text;
tpl += '</span>';
tpl += '</div>';
tpl += '</li>';
var msg = list.append(tpl);
input.val("");
var getLastPostPos = function () {
var height = 0;
cont.find("li.out, li.in").each(function () {
height = height + $(this).outerHeight();
});
return height;
}
cont.find('.scroller').slimScroll({
scrollTo: getLastPostPos()
});
}
$('body').on('click', '.message .name', function (e) {
e.preventDefault(); // prevent click event
var name = $(this).text(); // get clicked user's full name
input.val('@' + name + ':'); // set it into the input field
Metronic.scrollTo(input); // scroll to input if needed
});
btn.click(handleClick);
input.keypress(function (e) {
if (e.which == 13) {
handleClick(e);
return false; //<---- Add this line
}
});
},
initDashboardDaterange: function () {
if (!jQuery().daterangepicker) {
return;
}
$('#dashboard-report-range').daterangepicker({
opens: (Metronic.isRTL() ? 'right' : 'left'),
startDate: moment().subtract('days', 29),
endDate: moment(),
minDate: '01/01/2012',
maxDate: '12/31/2014',
dateLimit: {
days: 60
},
showDropdowns: false,
showWeekNumbers: true,
timePicker: false,
timePickerIncrement: 1,
timePicker12Hour: true,
ranges: {
'Today': [moment(), moment()],
'Yesterday': [moment().subtract('days', 1), moment().subtract('days', 1)],
'Last 7 Days': [moment().subtract('days', 6), moment()],
'Last 30 Days': [moment().subtract('days', 29), moment()],
'This Month': [moment().startOf('month'), moment().endOf('month')],
'Last Month': [moment().subtract('month', 1).startOf('month'), moment().subtract('month', 1).endOf('month')]
},
buttonClasses: ['btn btn-sm'],
applyClass: ' blue',
cancelClass: 'default',
format: 'MM/DD/YYYY',
separator: ' to ',
locale: {
applyLabel: 'Apply',
fromLabel: 'From',
toLabel: 'To',
customRangeLabel: 'Custom Range',
daysOfWeek: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'],
monthNames: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
firstDay: 1
}
},
function (start, end) {
$('#dashboard-report-range span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));
}
);
$('#dashboard-report-range span').html(moment().subtract('days', 29).format('MMMM D, YYYY') + ' - ' + moment().format('MMMM D, YYYY'));
$('#dashboard-report-range').show();
}
};
}();

View File

@ -0,0 +1,197 @@
var Index = function() {
var dashboardMainChart = null;
return {
//main function
init: function() {
Metronic.addResizeHandler(function() {
jQuery('.vmaps').each(function() {
var map = jQuery(this);
map.width(map.parent().width());
});
});
Index.initCharts();
Index.initMiniCharts();
Index.initJQVMAP();
},
initJQVMAP: function() {
if (!jQuery().vectorMap) {
return;
}
var showMap = function(name) {
jQuery('.vmaps').hide();
jQuery('#vmap_' + name).show();
}
var setMap = function(name) {
var data = {
map: 'world_en',
backgroundColor: null,
borderColor: '#333333',
borderOpacity: 0.5,
borderWidth: 1,
color: '#c6c6c6',
enableZoom: true,
hoverColor: '#c9dfaf',
hoverOpacity: null,
values: sample_data,
normalizeFunction: 'linear',
scaleColors: ['#b6da93', '#909cae'],
selectedColor: '#c9dfaf',
selectedRegion: null,
showTooltip: true,
onLabelShow: function(event, label, code) {
},
onRegionOver: function(event, code) {
if (code == 'ca') {
event.preventDefault();
}
},
onRegionClick: function(element, code, region) {
var message = 'You clicked "' + region + '" which has the code: ' + code.toUpperCase();
alert(message);
}
};
data.map = name + '_en';
var map = jQuery('#vmap_' + name);
if (!map) {
return;
}
map.width(map.parent().parent().width());
map.show();
map.vectorMap(data);
map.hide();
}
setMap("world");
setMap("usa");
setMap("europe");
setMap("russia");
setMap("germany");
showMap("world");
jQuery('#regional_stat_world').click(function() {
showMap("world");
});
jQuery('#regional_stat_usa').click(function() {
showMap("usa");
});
jQuery('#regional_stat_europe').click(function() {
showMap("europe");
});
jQuery('#regional_stat_russia').click(function() {
showMap("russia");
});
jQuery('#regional_stat_germany').click(function() {
showMap("germany");
});
$('#region_statistics_loading').hide();
$('#region_statistics_content').show();
},
initCharts: function() {
if (Morris.EventEmitter) {
// Use Morris.Area instead of Morris.Line
dashboardMainChart = Morris.Area({
element: 'sales_statistics',
padding: 0,
behaveLikeLine: false,
gridEnabled: false,
gridLineColor: false,
axes: false,
fillOpacity: 1,
data: [{
period: '2011 Q1',
sales: 1400,
profit: 400
}, {
period: '2011 Q2',
sales: 1100,
profit: 600
}, {
period: '2011 Q3',
sales: 1600,
profit: 500
}, {
period: '2011 Q4',
sales: 1200,
profit: 400
}, {
period: '2012 Q1',
sales: 1550,
profit: 800
}],
lineColors: ['#399a8c', '#92e9dc'],
xkey: 'period',
ykeys: ['sales', 'profit'],
labels: ['Sales', 'Profit'],
pointSize: 0,
lineWidth: 0,
hideHover: 'auto',
resize: true
});
}
},
redrawCharts: function() {
dashboardMainChart.resizeHandler();
},
initMiniCharts: function() {
// IE8 Fix: function.bind polyfill
if (Metronic.isIE8() && !Function.prototype.bind) {
Function.prototype.bind = function(oThis) {
if (typeof this !== "function") {
// closest thing possible to the ECMAScript 5 internal IsCallable function
throw new TypeError("Function.prototype.bind - what is trying to be bound is not callable");
}
var aArgs = Array.prototype.slice.call(arguments, 1),
fToBind = this,
fNOP = function() {},
fBound = function() {
return fToBind.apply(this instanceof fNOP && oThis ? this : oThis,
aArgs.concat(Array.prototype.slice.call(arguments)));
};
fNOP.prototype = this.prototype;
fBound.prototype = new fNOP();
return fBound;
};
}
$("#sparkline_bar").sparkline([8, 9, 10, 11, 10, 10, 12, 10, 10, 11, 9, 12, 11], {
type: 'bar',
width: '100',
barWidth: 6,
height: '45',
barColor: '#F36A5B',
negBarColor: '#e02222'
});
$("#sparkline_bar2").sparkline([9, 11, 12, 13, 12, 13, 10, 14, 13, 11, 11, 12, 11], {
type: 'bar',
width: '100',
barWidth: 6,
height: '45',
barColor: '#5C9BD1',
negBarColor: '#e02222'
});
}
};
}();

View File

@ -0,0 +1,20 @@
var Lock = function () {
return {
//main function to initiate the module
init: function () {
$.backstretch([
"../../assets/admin/pages/media/bg/1.jpg",
"../../assets/admin/pages/media/bg/2.jpg",
"../../assets/admin/pages/media/bg/3.jpg",
"../../assets/admin/pages/media/bg/4.jpg"
], {
fade: 1000,
duration: 8000
});
}
};
}();

View File

@ -0,0 +1,255 @@
var Login = function () {
var handleLogin = function() {
$('.login-form').validate({
errorElement: 'span', //default input error message container
errorClass: 'help-block', // default input error message class
focusInvalid: false, // do not focus the last invalid input
rules: {
username: {
required: true
},
password: {
required: true
},
remember: {
required: false
}
},
messages: {
username: {
required: "Username is required."
},
password: {
required: "Password is required."
}
},
invalidHandler: function (event, validator) { //display error alert on form submit
$('.alert-danger', $('.login-form')).show();
},
highlight: function (element) { // hightlight error inputs
$(element)
.closest('.form-group').addClass('has-error'); // set error class to the control group
},
success: function (label) {
label.closest('.form-group').removeClass('has-error');
label.remove();
},
errorPlacement: function (error, element) {
error.insertAfter(element.closest('.input-icon'));
},
submitHandler: function (form) {
form.submit();
}
});
$('.login-form input').keypress(function (e) {
if (e.which == 13) {
if ($('.login-form').validate().form()) {
$('.login-form').submit();
}
return false;
}
});
}
var handleForgetPassword = function () {
$('.forget-form').validate({
errorElement: 'span', //default input error message container
errorClass: 'help-block', // default input error message class
focusInvalid: false, // do not focus the last invalid input
ignore: "",
rules: {
email: {
required: true,
email: true
}
},
messages: {
email: {
required: "Email is required."
}
},
invalidHandler: function (event, validator) { //display error alert on form submit
},
highlight: function (element) { // hightlight error inputs
$(element)
.closest('.form-group').addClass('has-error'); // set error class to the control group
},
success: function (label) {
label.closest('.form-group').removeClass('has-error');
label.remove();
},
errorPlacement: function (error, element) {
error.insertAfter(element.closest('.input-icon'));
},
submitHandler: function (form) {
form.submit();
}
});
$('.forget-form input').keypress(function (e) {
if (e.which == 13) {
if ($('.forget-form').validate().form()) {
$('.forget-form').submit();
}
return false;
}
});
jQuery('#forget-password').click(function () {
jQuery('.login-form').hide();
jQuery('.forget-form').show();
});
jQuery('#back-btn').click(function () {
jQuery('.login-form').show();
jQuery('.forget-form').hide();
});
}
var handleRegister = function () {
function format(state) {
if (!state.id) return state.text; // optgroup
return "<img class='flag' src='../../assets/global/img/flags/" + state.id.toLowerCase() + ".png'/>&nbsp;&nbsp;" + state.text;
}
$("#select2_sample4").select2({
placeholder: '<i class="fa fa-map-marker"></i>&nbsp;Select a Country',
allowClear: true,
formatResult: format,
formatSelection: format,
escapeMarkup: function (m) {
return m;
}
});
$('#select2_sample4').change(function () {
$('.register-form').validate().element($(this)); //revalidate the chosen dropdown value and show error or success message for the input
});
$('.register-form').validate({
errorElement: 'span', //default input error message container
errorClass: 'help-block', // default input error message class
focusInvalid: false, // do not focus the last invalid input
ignore: "",
rules: {
fullname: {
required: true
},
email: {
required: true,
email: true
},
address: {
required: true
},
city: {
required: true
},
country: {
required: true
},
username: {
required: true
},
password: {
required: true
},
rpassword: {
equalTo: "#register_password"
},
tnc: {
required: true
}
},
messages: { // custom messages for radio buttons and checkboxes
tnc: {
required: "Please accept TNC first."
}
},
invalidHandler: function (event, validator) { //display error alert on form submit
},
highlight: function (element) { // hightlight error inputs
$(element)
.closest('.form-group').addClass('has-error'); // set error class to the control group
},
success: function (label) {
label.closest('.form-group').removeClass('has-error');
label.remove();
},
errorPlacement: function (error, element) {
if (element.attr("name") == "tnc") { // insert checkbox errors after the container
error.insertAfter($('#register_tnc_error'));
} else if (element.closest('.input-icon').size() === 1) {
error.insertAfter(element.closest('.input-icon'));
} else {
error.insertAfter(element);
}
},
submitHandler: function (form) {
form.submit();
}
});
$('.register-form input').keypress(function (e) {
if (e.which == 13) {
if ($('.register-form').validate().form()) {
$('.register-form').submit();
}
return false;
}
});
jQuery('#register-btn').click(function () {
jQuery('.login-form').hide();
jQuery('.register-form').show();
});
jQuery('#register-back-btn').click(function () {
jQuery('.login-form').show();
jQuery('.register-form').hide();
});
}
return {
//main function to initiate the module
init: function () {
handleLogin();
handleForgetPassword();
handleRegister();
}
};
}();

View File

@ -0,0 +1,262 @@
var Login = function() {
var handleLogin = function() {
$('.login-form').validate({
errorElement: 'span', //default input error message container
errorClass: 'help-block', // default input error message class
focusInvalid: false, // do not focus the last invalid input
rules: {
username: {
required: true
},
password: {
required: true
},
remember: {
required: false
}
},
messages: {
username: {
required: "Username is required."
},
password: {
required: "Password is required."
}
},
invalidHandler: function(event, validator) { //display error alert on form submit
$('.alert-danger', $('.login-form')).show();
},
highlight: function(element) { // hightlight error inputs
$(element)
.closest('.form-group').addClass('has-error'); // set error class to the control group
},
success: function(label) {
label.closest('.form-group').removeClass('has-error');
label.remove();
},
errorPlacement: function(error, element) {
error.insertAfter(element.closest('.input-icon'));
},
submitHandler: function(form) {
form.submit(); // form validation success, call ajax form submit
}
});
$('.login-form input').keypress(function(e) {
if (e.which == 13) {
if ($('.login-form').validate().form()) {
$('.login-form').submit(); //form validation success, call ajax form submit
}
return false;
}
});
}
var handleForgetPassword = function() {
$('.forget-form').validate({
errorElement: 'span', //default input error message container
errorClass: 'help-block', // default input error message class
focusInvalid: false, // do not focus the last invalid input
ignore: "",
rules: {
email: {
required: true,
email: true
}
},
messages: {
email: {
required: "Email is required."
}
},
invalidHandler: function(event, validator) { //display error alert on form submit
},
highlight: function(element) { // hightlight error inputs
$(element)
.closest('.form-group').addClass('has-error'); // set error class to the control group
},
success: function(label) {
label.closest('.form-group').removeClass('has-error');
label.remove();
},
errorPlacement: function(error, element) {
error.insertAfter(element.closest('.input-icon'));
},
submitHandler: function(form) {
form.submit();
}
});
$('.forget-form input').keypress(function(e) {
if (e.which == 13) {
if ($('.forget-form').validate().form()) {
$('.forget-form').submit();
}
return false;
}
});
jQuery('#forget-password').click(function() {
jQuery('.login-form').hide();
jQuery('.forget-form').show();
});
jQuery('#back-btn').click(function() {
jQuery('.login-form').show();
jQuery('.forget-form').hide();
});
}
var handleRegister = function() {
function format(state) {
if (!state.id) return state.text; // optgroup
return "<img class='flag' src='../../assets/global/img/flags/" + state.id.toLowerCase() + ".png'/>&nbsp;&nbsp;" + state.text;
}
if (jQuery().select2) {
$("#select2_sample4").select2({
placeholder: '<i class="fa fa-map-marker"></i>&nbsp;Select a Country',
allowClear: true,
formatResult: format,
formatSelection: format,
escapeMarkup: function(m) {
return m;
}
});
$('#select2_sample4').change(function() {
$('.register-form').validate().element($(this)); //revalidate the chosen dropdown value and show error or success message for the input
});
}
$('.register-form').validate({
errorElement: 'span', //default input error message container
errorClass: 'help-block', // default input error message class
focusInvalid: false, // do not focus the last invalid input
ignore: "",
rules: {
firstname: {
required: true
},
lastname: {
required: true
},
email: {
required: true,
email: true
},
phone: {
required: true,
},
address: {
required: true
},
city: {
required: true
},
country: {
required: true
},
username: {
required: true
},
password: {
required: true
},
rpassword: {
equalTo: "#register_password"
},
tnc: {
required: true
}
},
messages: { // custom messages for radio buttons and checkboxes
tnc: {
required: "Please accept TNC first."
}
},
invalidHandler: function(event, validator) { //display error alert on form submit
},
highlight: function(element) { // hightlight error inputs
$(element)
.closest('.form-group').addClass('has-error'); // set error class to the control group
},
success: function(label) {
label.closest('.form-group').removeClass('has-error');
label.remove();
},
errorPlacement: function(error, element) {
if (element.attr("name") == "tnc") { // insert checkbox errors after the container
error.insertAfter($('#register_tnc_error'));
} else if (element.closest('.input-icon').size() === 1) {
error.insertAfter(element.closest('.input-icon'));
} else {
error.insertAfter(element);
}
},
submitHandler: function(form) {
form.submit();
}
});
$('.register-form input').keypress(function(e) {
if (e.which == 13) {
if ($('.register-form').validate().form()) {
$('.register-form').submit();
}
return false;
}
});
jQuery('#register-btn').click(function() {
jQuery('.login-form').hide();
jQuery('.register-form').show();
});
jQuery('#register-back-btn').click(function() {
jQuery('.login-form').show();
jQuery('.register-form').hide();
});
}
return {
//main function to initiate the module
init: function() {
handleLogin();
handleForgetPassword();
handleRegister();
}
};
}();

View File

@ -0,0 +1,203 @@
var MapsGoogle = function () {
var mapBasic = function () {
new GMaps({
div: '#gmap_basic',
lat: -12.043333,
lng: -77.028333
});
}
var mapMarker = function () {
var map = new GMaps({
div: '#gmap_marker',
lat: -51.38739,
lng: -6.187181,
});
map.addMarker({
lat: -51.38739,
lng: -6.187181,
title: 'Lima',
details: {
database_id: 42,
author: 'HPNeo'
},
click: function (e) {
if (console.log) console.log(e);
alert('You clicked in this marker');
}
});
map.addMarker({
lat: -12.042,
lng: -77.028333,
title: 'Marker with InfoWindow',
infoWindow: {
content: '<span style="color:#000">HTML Content!</span>'
}
});
map.setZoom(5);
}
var mapPolylines = function () {
var map = new GMaps({
div: '#gmap_polylines',
lat: -12.043333,
lng: -77.028333,
click: function (e) {
console.log(e);
}
});
path = [
[-12.044012922866312, -77.02470665341184],
[-12.05449279282314, -77.03024273281858],
[-12.055122327623378, -77.03039293652341],
[-12.075917129727586, -77.02764635449216],
[-12.07635776902266, -77.02792530422971],
[-12.076819390363665, -77.02893381481931],
[-12.088527520066453, -77.0241058385925],
[-12.090814532191756, -77.02271108990476]
];
map.drawPolyline({
path: path,
strokeColor: '#131540',
strokeOpacity: 0.6,
strokeWeight: 6
});
}
var mapGeolocation = function () {
var map = new GMaps({
div: '#gmap_geo',
lat: -12.043333,
lng: -77.028333
});
GMaps.geolocate({
success: function (position) {
map.setCenter(position.coords.latitude, position.coords.longitude);
},
error: function (error) {
alert('Geolocation failed: ' + error.message);
},
not_supported: function () {
alert("Your browser does not support geolocation");
},
always: function () {
//alert("Geolocation Done!");
}
});
}
var mapGeocoding = function () {
var map = new GMaps({
div: '#gmap_geocoding',
lat: -12.043333,
lng: -77.028333
});
var handleAction = function () {
var text = $.trim($('#gmap_geocoding_address').val());
GMaps.geocode({
address: text,
callback: function (results, status) {
if (status == 'OK') {
var latlng = results[0].geometry.location;
map.setCenter(latlng.lat(), latlng.lng());
map.addMarker({
lat: latlng.lat(),
lng: latlng.lng()
});
Metronic.scrollTo($('#gmap_geocoding'));
}
}
});
}
$('#gmap_geocoding_btn').click(function (e) {
e.preventDefault();
handleAction();
});
$("#gmap_geocoding_address").keypress(function (e) {
var keycode = (e.keyCode ? e.keyCode : e.which);
if (keycode == '13') {
e.preventDefault();
handleAction();
}
});
}
var mapPolygone = function () {
var map = new GMaps({
div: '#gmap_polygons',
lat: -12.043333,
lng: -77.028333
});
var path = [
[-12.040397656836609, -77.03373871559225],
[-12.040248585302038, -77.03993927003302],
[-12.050047116528843, -77.02448169303511],
[-12.044804866577001, -77.02154422636042]
];
var polygon = map.drawPolygon({
paths: path,
strokeColor: '#BBD8E9',
strokeOpacity: 1,
strokeWeight: 3,
fillColor: '#BBD8E9',
fillOpacity: 0.6
});
}
var mapRoutes = function () {
var map = new GMaps({
div: '#gmap_routes',
lat: -12.043333,
lng: -77.028333
});
$('#gmap_routes_start').click(function (e) {
e.preventDefault();
Metronic.scrollTo($(this), 400);
map.travelRoute({
origin: [-12.044012922866312, -77.02470665341184],
destination: [-12.090814532191756, -77.02271108990476],
travelMode: 'driving',
step: function (e) {
$('#gmap_routes_instructions').append('<li>' + e.instructions + '</li>');
$('#gmap_routes_instructions li:eq(' + e.step_number + ')').delay(800 * e.step_number).fadeIn(500, function () {
map.setCenter(e.end_location.lat(), e.end_location.lng());
map.drawPolyline({
path: e.path,
strokeColor: '#131540',
strokeOpacity: 0.6,
strokeWeight: 6
});
});
}
});
});
}
return {
//main function to initiate map samples
init: function () {
mapBasic();
mapMarker();
mapGeolocation();
mapGeocoding();
mapPolylines();
mapPolygone();
mapRoutes();
}
};
}();

View File

@ -0,0 +1,64 @@
var MapsVector = function () {
var setMap = function (name) {
var data = {
map: 'world_en',
backgroundColor: null,
borderColor: '#333333',
borderOpacity: 0.5,
borderWidth: 1,
color: '#c6c6c6',
enableZoom: true,
hoverColor: '#c9dfaf',
hoverOpacity: null,
values: sample_data,
normalizeFunction: 'linear',
scaleColors: ['#b6da93', '#427d1a'],
selectedColor: '#c9dfaf',
selectedRegion: null,
showTooltip: true,
onRegionOver: function (event, code) {
//sample to interact with map
if (code == 'ca') {
event.preventDefault();
}
},
onRegionClick: function (element, code, region) {
//sample to interact with map
var message = 'You clicked "' + region + '" which has the code: ' + code.toUpperCase();
alert(message);
}
};
data.map = name + '_en';
var map = jQuery('#vmap_' + name);
if (!map) {
return;
}
map.width(map.parent().width());
map.vectorMap(data);
}
return {
//main function to initiate map samples
init: function () {
setMap("world");
setMap("usa");
setMap("europe");
setMap("russia");
setMap("germany");
// redraw maps on window or content resized
Metronic.addResizeHandler(function(){
setMap("world");
setMap("usa");
setMap("europe");
setMap("russia");
setMap("germany");
});
}
};
}();

View File

@ -0,0 +1,45 @@
var MyButtonAction = function () {
var handleButton = function () {
function postJson(data, url){
$.ajax({
type: "POST",
url: url,
data: JSON.stringify(data),// now data come in this function
contentType: "application/json; charset=utf-8",
crossDomain: true,
dataType: "json",
success: function (data, status, jqXHR) {
bootbox.alert("Applied changes record successfully.");
},
error: function (jqXHR, status) {
// error handler
console.log(jqXHR);
a = jqXHR;
bootbox.alert(jqXHR["responseText"]);
}
});
}
$('#delete_domain').click(function (e) {
e.preventDefault();
bootbox.confirm("Are you sure you want to delete this domain?", function(result) {
if (result == true){
var domain = document.getElementById('delete_domain').value;
$.get("/admin/domain/"+ domain +"/delete");
window.location.href = '/';
}
});
});
}
return {
//main function to initiate the module
init: function () {
handleButton();
}
};
}();

View File

@ -0,0 +1,12 @@
var Portfolio = function () {
return {
//main function to initiate the module
init: function () {
$('.mix-grid').mixitup();
}
};
}();

View File

@ -0,0 +1,34 @@
var PortletDraggable = function () {
return {
//main function to initiate the module
init: function () {
if (!jQuery().sortable) {
return;
}
$("#sortable_portlets").sortable({
connectWith: ".portlet",
items: ".portlet",
opacity: 0.8,
handle : '.portlet-title',
coneHelperSize: true,
placeholder: 'portlet-sortable-placeholder',
forcePlaceholderSize: true,
tolerance: "pointer",
helper: "clone",
tolerance: "pointer",
forcePlaceholderSize: !0,
helper: "clone",
cancel: ".portlet-sortable-empty, .portlet-fullscreen", // cancel dragging if portlet is in fullscreen mode
revert: 250, // animation in milliseconds
update: function(b, c) {
if (c.item.prev().hasClass("portlet-sortable-empty")) {
c.item.prev().before(c.item);
}
}
});
}
};
}();

View File

@ -0,0 +1,59 @@
var Profile = function() {
var dashboardMainChart = null;
return {
//main function
init: function() {
Profile.initMiniCharts();
},
initMiniCharts: function() {
// IE8 Fix: function.bind polyfill
if (Metronic.isIE8() && !Function.prototype.bind) {
Function.prototype.bind = function(oThis) {
if (typeof this !== "function") {
// closest thing possible to the ECMAScript 5 internal IsCallable function
throw new TypeError("Function.prototype.bind - what is trying to be bound is not callable");
}
var aArgs = Array.prototype.slice.call(arguments, 1),
fToBind = this,
fNOP = function() {},
fBound = function() {
return fToBind.apply(this instanceof fNOP && oThis ? this : oThis,
aArgs.concat(Array.prototype.slice.call(arguments)));
};
fNOP.prototype = this.prototype;
fBound.prototype = new fNOP();
return fBound;
};
}
$("#sparkline_bar").sparkline([8, 9, 10, 11, 10, 10, 12, 10, 10, 11, 9, 12, 11], {
type: 'bar',
width: '100',
barWidth: 6,
height: '45',
barColor: '#F36A5B',
negBarColor: '#e02222'
});
$("#sparkline_bar2").sparkline([9, 11, 12, 13, 12, 13, 10, 14, 13, 11, 11, 12, 11], {
type: 'bar',
width: '100',
barWidth: 6,
height: '45',
barColor: '#5C9BD1',
negBarColor: '#e02222'
});
}
};
}();

View File

@ -0,0 +1,15 @@
var Search = function () {
return {
//main function to initiate the module
init: function () {
if (jQuery().datepicker) {
$('.date-picker').datepicker();
}
Metronic.initFancybox();
}
};
}();

View File

@ -0,0 +1,443 @@
var TableAdvanced = function () {
var initTable1 = function () {
var table = $('#sample_1');
/* Table tools samples: https://www.datatables.net/release-datatables/extras/TableTools/ */
/* Set tabletools buttons and button container */
$.extend(true, $.fn.DataTable.TableTools.classes, {
"container": "btn-group tabletools-dropdown-on-portlet",
"buttons": {
"normal": "btn btn-sm default",
"disabled": "btn btn-sm default disabled"
},
"collection": {
"container": "DTTT_dropdown dropdown-menu tabletools-dropdown-menu"
}
});
var oTable = table.dataTable({
// Internationalisation. For more info refer to http://datatables.net/manual/i18n
"language": {
"aria": {
"sortAscending": ": activate to sort column ascending",
"sortDescending": ": activate to sort column descending"
},
"emptyTable": "No data available in table",
"info": "Showing _START_ to _END_ of _TOTAL_ entries",
"infoEmpty": "No entries found",
"infoFiltered": "(filtered1 from _MAX_ total entries)",
"lengthMenu": "Show _MENU_ entries",
"search": "Search:",
"zeroRecords": "No matching records found"
},
// Or you can use remote translation file
//"language": {
// url: '//cdn.datatables.net/plug-ins/3cfcc339e89/i18n/Portuguese.json'
//},
"order": [
[0, 'asc']
],
"lengthMenu": [
[5, 15, 20, -1],
[5, 15, 20, "All"] // change per page values here
],
// set the initial value
"pageLength": 10,
"dom": "<'row' <'col-md-12'T>><'row'<'col-md-6 col-sm-12'l><'col-md-6 col-sm-12'f>r><'table-scrollable't><'row'<'col-md-5 col-sm-12'i><'col-md-7 col-sm-12'p>>", // horizobtal scrollable datatable
// Uncomment below line("dom" parameter) to fix the dropdown overflow issue in the datatable cells. The default datatable layout
// setup uses scrollable div(table-scrollable) with overflow:auto to enable vertical scroll(see: assets/global/plugins/datatables/plugins/bootstrap/dataTables.bootstrap.js).
// So when dropdowns used the scrollable div should be removed.
//"dom": "<'row' <'col-md-12'T>><'row'<'col-md-6 col-sm-12'l><'col-md-6 col-sm-12'f>r>t<'row'<'col-md-5 col-sm-12'i><'col-md-7 col-sm-12'p>>",
"tableTools": {
"sSwfPath": "../../assets/global/plugins/datatables/extensions/TableTools/swf/copy_csv_xls_pdf.swf",
"aButtons": [{
"sExtends": "pdf",
"sButtonText": "PDF"
}, {
"sExtends": "csv",
"sButtonText": "CSV"
}, {
"sExtends": "xls",
"sButtonText": "Excel"
}, {
"sExtends": "print",
"sButtonText": "Print",
"sInfo": 'Please press "CTR+P" to print or "ESC" to quit',
"sMessage": "Generated by DataTables"
}]
}
});
var tableWrapper = $('#sample_1_wrapper'); // datatable creates the table wrapper by adding with id {your_table_jd}_wrapper
tableWrapper.find('.dataTables_length select').select2(); // initialize select2 dropdown
}
var initTable2 = function () {
var table = $('#sample_2');
/* Table tools samples: https://www.datatables.net/release-datatables/extras/TableTools/ */
/* Set tabletools buttons and button container */
$.extend(true, $.fn.DataTable.TableTools.classes, {
"container": "btn-group tabletools-btn-group pull-right",
"buttons": {
"normal": "btn btn-sm default",
"disabled": "btn btn-sm default disabled"
}
});
var oTable = table.dataTable({
// Internationalisation. For more info refer to http://datatables.net/manual/i18n
"language": {
"aria": {
"sortAscending": ": activate to sort column ascending",
"sortDescending": ": activate to sort column descending"
},
"emptyTable": "No data available in table",
"info": "Showing _START_ to _END_ of _TOTAL_ entries",
"infoEmpty": "No entries found",
"infoFiltered": "(filtered1 from _MAX_ total entries)",
"lengthMenu": "Show _MENU_ entries",
"search": "Search:",
"zeroRecords": "No matching records found"
},
"order": [
[0, 'asc']
],
"lengthMenu": [
[5, 15, 20, -1],
[5, 15, 20, "All"] // change per page values here
],
// set the initial value
"pageLength": 10,
"dom": "<'row' <'col-md-12'T>><'row'<'col-md-6 col-sm-12'l><'col-md-6 col-sm-12'f>r><'table-scrollable't><'row'<'col-md-5 col-sm-12'i><'col-md-7 col-sm-12'p>>", // horizobtal scrollable datatable
// Uncomment below line("dom" parameter) to fix the dropdown overflow issue in the datatable cells. The default datatable layout
// setup uses scrollable div(table-scrollable) with overflow:auto to enable vertical scroll(see: assets/global/plugins/datatables/plugins/bootstrap/dataTables.bootstrap.js).
// So when dropdowns used the scrollable div should be removed.
//"dom": "<'row' <'col-md-12'T>><'row'<'col-md-6 col-sm-12'l><'col-md-6 col-sm-12'f>r>t<'row'<'col-md-5 col-sm-12'i><'col-md-7 col-sm-12'p>>",
"tableTools": {
"sSwfPath": "../../assets/global/plugins/datatables/extensions/TableTools/swf/copy_csv_xls_pdf.swf",
"aButtons": [{
"sExtends": "pdf",
"sButtonText": "PDF"
}, {
"sExtends": "csv",
"sButtonText": "CSV"
}, {
"sExtends": "xls",
"sButtonText": "Excel"
}, {
"sExtends": "print",
"sButtonText": "Print",
"sInfo": 'Please press "CTRL+P" to print or "ESC" to quit',
"sMessage": "Generated by DataTables"
}, {
"sExtends": "copy",
"sButtonText": "Copy"
}]
}
});
var tableWrapper = $('#sample_2_wrapper'); // datatable creates the table wrapper by adding with id {your_table_jd}_wrapper
tableWrapper.find('.dataTables_length select').select2(); // initialize select2 dropdown
}
var initTable3 = function () {
var table = $('#sample_3');
/* Formatting function for row details */
function fnFormatDetails(oTable, nTr) {
var aData = oTable.fnGetData(nTr);
var sOut = '<table>';
sOut += '<tr><td>Platform(s):</td><td>' + aData[2] + '</td></tr>';
sOut += '<tr><td>Engine version:</td><td>' + aData[3] + '</td></tr>';
sOut += '<tr><td>CSS grade:</td><td>' + aData[4] + '</td></tr>';
sOut += '<tr><td>Others:</td><td>Could provide a link here</td></tr>';
sOut += '</table>';
return sOut;
}
/*
* Insert a 'details' column to the table
*/
var nCloneTh = document.createElement('th');
nCloneTh.className = "table-checkbox";
var nCloneTd = document.createElement('td');
nCloneTd.innerHTML = '<span class="row-details row-details-close"></span>';
table.find('thead tr').each(function () {
this.insertBefore(nCloneTh, this.childNodes[0]);
});
table.find('tbody tr').each(function () {
this.insertBefore(nCloneTd.cloneNode(true), this.childNodes[0]);
});
/*
* Initialize DataTables, with no sorting on the 'details' column
*/
var oTable = table.dataTable({
// Internationalisation. For more info refer to http://datatables.net/manual/i18n
"language": {
"aria": {
"sortAscending": ": activate to sort column ascending",
"sortDescending": ": activate to sort column descending"
},
"emptyTable": "No data available in table",
"info": "Showing _START_ to _END_ of _TOTAL_ entries",
"infoEmpty": "No entries found",
"infoFiltered": "(filtered1 from _MAX_ total entries)",
"lengthMenu": "Show _MENU_ entries",
"search": "Search:",
"zeroRecords": "No matching records found"
},
"columnDefs": [{
"orderable": false,
"targets": [0]
}],
"order": [
[1, 'asc']
],
"lengthMenu": [
[5, 15, 20, -1],
[5, 15, 20, "All"] // change per page values here
],
// set the initial value
"pageLength": 10,
});
var tableWrapper = $('#sample_3_wrapper'); // datatable creates the table wrapper by adding with id {your_table_jd}_wrapper
tableWrapper.find('.dataTables_length select').select2(); // initialize select2 dropdown
/* Add event listener for opening and closing details
* Note that the indicator for showing which row is open is not controlled by DataTables,
* rather it is done here
*/
table.on('click', ' tbody td .row-details', function () {
var nTr = $(this).parents('tr')[0];
if (oTable.fnIsOpen(nTr)) {
/* This row is already open - close it */
$(this).addClass("row-details-close").removeClass("row-details-open");
oTable.fnClose(nTr);
} else {
/* Open this row */
$(this).addClass("row-details-open").removeClass("row-details-close");
oTable.fnOpen(nTr, fnFormatDetails(oTable, nTr), 'details');
}
});
}
var initTable4 = function () {
var table = $('#sample_4');
/* Formatting function for row expanded details */
function fnFormatDetails(oTable, nTr) {
var aData = oTable.fnGetData(nTr);
var sOut = '<table>';
sOut += '<tr><td>Platform(s):</td><td>' + aData[2] + '</td></tr>';
sOut += '<tr><td>Engine version:</td><td>' + aData[3] + '</td></tr>';
sOut += '<tr><td>CSS grade:</td><td>' + aData[4] + '</td></tr>';
sOut += '<tr><td>Others:</td><td>Could provide a link here</td></tr>';
sOut += '</table>';
return sOut;
}
/*
* Insert a 'details' column to the table
*/
var nCloneTh = document.createElement('th');
nCloneTh.className = "table-checkbox";
var nCloneTd = document.createElement('td');
nCloneTd.innerHTML = '<span class="row-details row-details-close"></span>';
table.find('thead tr').each(function () {
this.insertBefore(nCloneTh, this.childNodes[0]);
});
table.find('tbody tr').each(function () {
this.insertBefore(nCloneTd.cloneNode(true), this.childNodes[0]);
});
var oTable = table.dataTable({
// Internationalisation. For more info refer to http://datatables.net/manual/i18n
"language": {
"aria": {
"sortAscending": ": activate to sort column ascending",
"sortDescending": ": activate to sort column descending"
},
"emptyTable": "No data available in table",
"info": "Showing _START_ to _END_ of _TOTAL_ entries",
"infoEmpty": "No entries found",
"infoFiltered": "(filtered1 from _MAX_ total entries)",
"lengthMenu": "Show _MENU_ entries",
"search": "Search:",
"zeroRecords": "No matching records found"
},
"columnDefs": [{
"orderable": false,
"targets": [0]
}],
"order": [
[1, 'asc']
],
"lengthMenu": [
[5, 15, 20, -1],
[5, 15, 20, "All"] // change per page values here
],
// set the initial value
"pageLength": 10,
});
var tableWrapper = $('#sample_4_wrapper'); // datatable creates the table wrapper by adding with id {your_table_jd}_wrapper
var tableColumnToggler = $('#sample_4_column_toggler');
/* modify datatable control inputs */
tableWrapper.find('.dataTables_length select').select2(); // initialize select2 dropdown
/* Add event listener for opening and closing details
* Note that the indicator for showing which row is open is not controlled by DataTables,
* rather it is done here
*/
table.on('click', ' tbody td .row-details', function () {
var nTr = $(this).parents('tr')[0];
if (oTable.fnIsOpen(nTr)) {
/* This row is already open - close it */
$(this).addClass("row-details-close").removeClass("row-details-open");
oTable.fnClose(nTr);
} else {
/* Open this row */
$(this).addClass("row-details-open").removeClass("row-details-close");
oTable.fnOpen(nTr, fnFormatDetails(oTable, nTr), 'details');
}
});
/* handle show/hide columns*/
$('input[type="checkbox"]', tableColumnToggler).change(function () {
/* Get the DataTables object again - this is not a recreation, just a get of the object */
var iCol = parseInt($(this).attr("data-column"));
var bVis = oTable.fnSettings().aoColumns[iCol].bVisible;
oTable.fnSetColumnVis(iCol, (bVis ? false : true));
});
}
var initTable5 = function () {
var table = $('#sample_5');
/* Fixed header extension: http://datatables.net/extensions/scroller/ */
var oTable = table.dataTable({
"dom": "<'row'<'col-md-6 col-sm-12'l><'col-md-6 col-sm-12'f>r>t<'row'<'col-md-5 col-sm-12'i><'col-md-7 col-sm-12'p>>", // datatable layout without horizobtal scroll
"scrollY": "300",
"deferRender": true,
"order": [
[0, 'asc']
],
"lengthMenu": [
[5, 15, 20, -1],
[5, 15, 20, "All"] // change per page values here
],
"pageLength": 10 // set the initial value
});
var tableWrapper = $('#sample_5_wrapper'); // datatable creates the table wrapper by adding with id {your_table_jd}_wrapper
tableWrapper.find('.dataTables_length select').select2(); // initialize select2 dropdown
}
var initTable6 = function () {
var table = $('#sample_6');
/* Fixed header extension: http://datatables.net/extensions/keytable/ */
var oTable = table.dataTable({
// Internationalisation. For more info refer to http://datatables.net/manual/i18n
"language": {
"aria": {
"sortAscending": ": activate to sort column ascending",
"sortDescending": ": activate to sort column descending"
},
"emptyTable": "No data available in table",
"info": "Showing _START_ to _END_ of _TOTAL_ entries",
"infoEmpty": "No entries found",
"infoFiltered": "(filtered1 from _MAX_ total entries)",
"lengthMenu": "Show _MENU_ entries",
"search": "Search:",
"zeroRecords": "No matching records found"
},
"order": [
[0, 'asc']
],
"lengthMenu": [
[5, 15, 20, -1],
[5, 15, 20, "All"] // change per page values here
],
"pageLength": 10, // set the initial value,
"columnDefs": [{ // set default column settings
'orderable': false,
'targets': [0]
}, {
"searchable": false,
"targets": [0]
}],
"order": [
[1, "asc"]
]
});
var oTableColReorder = new $.fn.dataTable.ColReorder( oTable );
var tableWrapper = $('#sample_6_wrapper'); // datatable creates the table wrapper by adding with id {your_table_jd}_wrapper
tableWrapper.find('.dataTables_length select').select2(); // initialize select2 dropdown
}
return {
//main function to initiate the module
init: function () {
if (!jQuery().dataTable) {
return;
}
console.log('me 1');
initTable1();
initTable2();
initTable3();
initTable4();
initTable5();
initTable6();
console.log('me 2');
}
};
}();

View File

@ -0,0 +1,91 @@
var TableAjax = function () {
var initPickers = function () {
//init date pickers
$('.date-picker').datepicker({
rtl: Metronic.isRTL(),
autoclose: true
});
}
var handleRecords = function () {
var grid = new Datatable();
grid.init({
src: $("#datatable_ajax"),
onSuccess: function (grid) {
// execute some code after table records loaded
},
onError: function (grid) {
// execute some code on network or other general error
},
onDataLoad: function(grid) {
// execute some code on ajax data load
},
loadingMessage: 'Loading...',
dataTable: { // here you can define a typical datatable settings from http://datatables.net/usage/options
// Uncomment below line("dom" parameter) to fix the dropdown overflow issue in the datatable cells. The default datatable layout
// setup uses scrollable div(table-scrollable) with overflow:auto to enable vertical scroll(see: assets/global/scripts/datatable.js).
// So when dropdowns used the scrollable div should be removed.
//"dom": "<'row'<'col-md-8 col-sm-12'pli><'col-md-4 col-sm-12'<'table-group-actions pull-right'>>r>t<'row'<'col-md-8 col-sm-12'pli><'col-md-4 col-sm-12'>>",
"bStateSave": true, // save datatable state(pagination, sort, etc) in cookie.
"lengthMenu": [
[10, 20, 50, 100, 150, -1],
[10, 20, 50, 100, 150, "All"] // change per page values here
],
"pageLength": 10, // default record count per page
"ajax": {
"url": "demo/table_ajax.php", // ajax source
},
"order": [
[1, "asc"]
]// set first column as a default sort by asc
}
});
// handle group actionsubmit button click
grid.getTableWrapper().on('click', '.table-group-action-submit', function (e) {
e.preventDefault();
var action = $(".table-group-action-input", grid.getTableWrapper());
if (action.val() != "" && grid.getSelectedRowsCount() > 0) {
grid.setAjaxParam("customActionType", "group_action");
grid.setAjaxParam("customActionName", action.val());
grid.setAjaxParam("id", grid.getSelectedRows());
grid.getDataTable().ajax.reload();
grid.clearAjaxParams();
} else if (action.val() == "") {
Metronic.alert({
type: 'danger',
icon: 'warning',
message: 'Please select an action',
container: grid.getTableWrapper(),
place: 'prepend'
});
} else if (grid.getSelectedRowsCount() === 0) {
Metronic.alert({
type: 'danger',
icon: 'warning',
message: 'No record selected',
container: grid.getTableWrapper(),
place: 'prepend'
});
}
});
}
return {
//main function to initiate the module
init: function () {
initPickers();
handleRecords();
}
};
}();

View File

@ -0,0 +1,305 @@
var TableEditable = function () {
var handleTable = function () {
function restoreRow(oTable, nRow) {
var aData = oTable.fnGetData(nRow);
var jqTds = $('>td', nRow);
for (var i = 0, iLen = jqTds.length; i < iLen; i++) {
oTable.fnUpdate(aData[i], nRow, i, false);
}
oTable.fnDraw();
}
function SelectElement(elementID, valueToSelect)
{
var element = document.getElementById(elementID);
element.value = valueToSelect;
}
function editRow(oTable, nRow) {
var aData = oTable.fnGetData(nRow);
var jqTds = $('>td', nRow);
jqTds[0].innerHTML = '<input type="text" class="form-control input-small" value="' + aData[0] + '">';
//jqTds[1].innerHTML = '<select class="form-control" id="record_type" name="record_type" value="' + aData[1] + '"' + '><option value="A">A</option><option value="AAAA">AAAA</option><option value="NS">NS</option><option value="CNAME">CNAME</option><option value="DNAME">DNAME</option><option value="MR">MR</option><option value="PTR">PTR</option><option value="HINFO">HINFO</option><option value="MX">MX</option><option value="TXT">TXT</option><option value="RP">RP</option><option value="AFSDB">AFSDB</option><option value="SIG">SIG</option><option value="KEY">KEY</option><option value="LOC">LOC</option><option value="SRV">SRV</option><option value="CERT">CERT</option><option value="NAPTR">NAPTR</option><option value="DS">DS</option><option value="SSHFP">SSHFP</option><option value="RRSIG">RRSIG</option><option value="NSEC">NSEC</option><option value="DNSKEY">DNSKEY</option><option value="NSEC3">DSEC3</option><option value="NSEC3PARAM">NSEC3PARAM</option><option value="TLSA">TLSA</option><option value="SPF">SPF</option><option value="DL">DL</option><option value="SOA">SOA</option></select>';
jqTds[1].innerHTML = '<select class="form-control" id="record_type" name="record_type" value="' + aData[1] + '"' + '><option value="A">A</option><option value="AAAA">AAAA</option><option value="CNAME">CNAME</option><option value="PTR">PTR</option><option value="MX">MX</option><option value="TXT">TXT</option><option value="SPF">SPF</option></select>';
jqTds[2].innerHTML = '<select class="form-control" id="record_status" name="record_status" value="' + aData[2] + '"' + '><option value="false">Active</option><option value="true">Disabled</option></select>';
jqTds[3].innerHTML = '<select class="form-control" id="record_ttl" name="record_ttl" value="' + aData[3] + '"' + '><option value="60">1 minute</option><option value="300">5 minutes</option><option value="1800">30 minutes</option><option value="3600">60 minutes</option><option value="86400">24 hours</option></select>';
jqTds[4].innerHTML = '<input type="text" class="form-control input-small advance-data" value="' + aData[4] + '">';
jqTds[5].innerHTML = '<a class="btn default btn-xs green edit" href="">Save</i></a>';
jqTds[6].innerHTML = '<a class="btn default btn-xs green cancel" href="">Cancel</i></a>';
// set current value of dropdows column
if (aData[2] == 'Active'){
isDiable = 'false';
}
else {
isDiable = 'true';
}
SelectElement('record_type', aData[1]);
SelectElement('record_status', isDiable);
SelectElement('record_ttl', aData[3]);
}
function saveRow(oTable, nRow) {
// var jqInputs = $('input', nRow);
// oTable.fnUpdate(jqInputs[0].value, nRow, 0, false);
// oTable.fnUpdate(jqInputs[1].value, nRow, 1, false);
// oTable.fnUpdate(jqInputs[2].value, nRow, 2, false);
// oTable.fnUpdate(jqInputs[3].value, nRow, 3, false);
// oTable.fnUpdate(jqInputs[4].value, nRow, 4, false);
var jqInputs = $('input', nRow);
var jqSelect = $('select', nRow);
if (jqSelect[1].value == 'false'){
status = 'Active';
}
else {
status = 'Disabled';
}
oTable.fnUpdate(jqInputs[0].value, nRow, 0, false);
oTable.fnUpdate(jqSelect[0].value, nRow, 1, false);
oTable.fnUpdate(status, nRow, 2, false);
oTable.fnUpdate(jqSelect[2].value, nRow, 3, false);
oTable.fnUpdate(jqInputs[1].value, nRow, 4, false);
oTable.fnUpdate('<a class="btn default btn-xs purple edit" href="javascript:;"> <i class="fa fa-edit"></i></a>', nRow, 5, false);
oTable.fnUpdate('<a class="btn default btn-xs red delete" href="javascript:;"> <i class="fa fa-trash"></i></a>', nRow, 6, false);
oTable.fnDraw();
}
function cancelEditRow(oTable, nRow) {
var jqInputs = $('input', nRow);
oTable.fnUpdate(jqInputs[0].value, nRow, 0, false);
oTable.fnUpdate(jqInputs[1].value, nRow, 1, false);
oTable.fnUpdate(jqInputs[2].value, nRow, 2, false);
oTable.fnUpdate(jqInputs[3].value, nRow, 3, false);
oTable.fnUpdate(jqInputs[4].value, nRow, 4, false);
oTable.fnUpdate('<a class="btn default btn-xs green edit" href="">Edit</i></a>', nRow, 5, false);
oTable.fnDraw();
}
function getTableData(table) {
var rData = []
// get all table data
rData = table.fnGetData();
// reformat - pretty format
var records = []
rData.forEach(function(r) {
var record = {}
record["record_name"] = r[0].trim();
record["record_type"] = r[1].trim();
record["record_status"] = r[2].trim();
record["record_ttl"] = r[3].trim();
record["record_data"] = r[4].trim();
records.push(record);
});
return records
}
function applyChanges(data, url){
$.ajax({
type: "POST",
url: url,
data: JSON.stringify(data),// now data come in this function
contentType: "application/json; charset=utf-8",
crossDomain: true,
dataType: "json",
success: function (data, status, jqXHR) {
bootbox.alert("Applied changes record successfully.");
},
error: function (jqXHR, status) {
// error handler
console.log(jqXHR);
a = jqXHR;
bootbox.alert(jqXHR["responseText"]);
}
});
}
var table = $('#tbl_record_manage');
var oTable = table.dataTable({
// Uncomment below line("dom" parameter) to fix the dropdown overflow issue in the datatable cells. The default datatable layout
// setup uses scrollable div(table-scrollable) with overflow:auto to enable vertical scroll(see: assets/global/plugins/datatables/plugins/bootstrap/dataTables.bootstrap.js).
// So when dropdowns used the scrollable div should be removed.
//"dom": "<'row'<'col-md-6 col-sm-12'l><'col-md-6 col-sm-12'f>r>t<'row'<'col-md-5 col-sm-12'i><'col-md-7 col-sm-12'p>>",
"lengthMenu": [
[5, 15, 20, -1],
[5, 15, 20, "All"] // change per page values here
],
// Or you can use remote translation file
//"language": {
// url: '//cdn.datatables.net/plug-ins/3cfcc339e89/i18n/Portuguese.json'
//},
// set the initial value
"pageLength": 15,
"language": {
"lengthMenu": " _MENU_ records"
},
"columnDefs": [{ // set default column settings
'orderable': true,
'targets': [0]
}, {
"searchable": true,
"targets": [0]
}],
"order": [
[0, "asc"]
] // set first column as a default sort by asc
});
var tableWrapper = $("#tbl_record_manage_new_wrapper");
tableWrapper.find(".dataTables_length select").select2({
showSearchInput: true //hide search box with special css class
}); // initialize select2 dropdown
var nEditing = null;
var nNew = false;
$('#tbl_record_manage_new').click(function (e) {
e.preventDefault();
if (nNew && nEditing) {
bootbox.alert("Previous record not saved. Please save it before adding more record.")
return;
}
var aiNew = oTable.fnAddData(['', 'A', 'Active', 3600, '', '', '']);
var nRow = oTable.fnGetNodes(aiNew[0]);
editRow(oTable, nRow);
nEditing = nRow;
nNew = true;
});
$('#tbl_record_manage_apply').click(function (e) {
e.preventDefault();
bootbox.confirm("Are you sure you want to apply the new changes?", function(result) {
if (result == true){
var domain = document.getElementById('domainname').value;
var data = getTableData(oTable);
applyChanges(data, '/domain/'+ domain + '/apply');
}
});
});
$('#tbl_record_update_from_master').click(function (e) {
e.preventDefault();
var domain = document.getElementById('domainname').value;
applyChanges({'domain': domain}, '/domain/'+ domain + '/update');
});
table.on('click', '.delete', function (e) {
e.preventDefault();
var nRow = $(this).parents('tr')[0];
bootbox.confirm("Are you sure to delete this record?", function(result) {
if (result == true){
oTable.fnDeleteRow(nRow);
}
});
});
table.on('click', '.cancel', function (e) {
e.preventDefault();
if (nNew) {
oTable.fnDeleteRow(nEditing);
nEditing = null;
nNew = false;
} else {
restoreRow(oTable, nEditing);
nEditing = null;
}
});
table.on('click', '.edit', function (e) {
e.preventDefault();
/* Get the row as a parent of the link that was clicked on */
var nRow = $(this).parents('tr')[0];
if (nEditing !== null && nEditing != nRow) {
/* Currently editing - but not this row - restore the old before continuing to edit mode */
restoreRow(oTable, nEditing);
editRow(oTable, nRow);
nEditing = nRow;
} else if (nEditing == nRow && this.innerHTML == "Save") {
/* Editing this row and want to save it */
saveRow(oTable, nEditing);
nEditing = null;
//alert("Updated! Do not forget to do some ajax to sync with backend :)");
} else {
/* No edit in progress - let's start one */
editRow(oTable, nRow);
nEditing = nRow;
}
});
table.on('click', '.advance-data', function (e) {
e.preventDefault();
var nRow = $(this).parents('tr')[0];
// get record type
var jqSelect = $('select', nRow);
var record_type = jqSelect[0].value;
if (record_type == 'MX'){
// get record data
var jqInputs = $('input', nRow);
var record_data = jqInputs[1].value;
if (record_data){
var record_data = record_data.split(" ");
var mx_priority = record_data[0];
var mx_data = record_data[1];
}
else
{
var mx_priority = "10";
var mx_data = "";
}
bootbox.dialog({
message:'Server: <input id="rdata" class="bootbox-input bootbox-input-text form-control" value="' + mx_data + '"></input><br/>Priority: <input id="rpriority" type="number" class="bootbox-input bootbox-input-text form-control" value="' + mx_priority + '"></input>',
title: "MX Record Data",
value: "makeusabrew",
buttons: {
main: {
label: "Save",
className: "btn-primary",
callback: function() {
var new_record_data = $('#rpriority').val() + " " + $('#rdata').val();
$('.advance-data').val(new_record_data);
}
}
}
});
}
});
}
return {
//main function to initiate the module
init: function () {
handleTable();
}
};
}();

View File

@ -0,0 +1,621 @@
var TableManaged = function () {
var initTableDomain = function () {
var table = $('#tb_domain_list');
// begin first table
table.dataTable({
// Internationalisation. For more info refer to http://datatables.net/manual/i18n
"language": {
"aria": {
"sortAscending": ": activate to sort column ascending",
"sortDescending": ": activate to sort column descending"
},
"emptyTable": "No data available in table",
"info": "Showing _START_ to _END_ of _TOTAL_ domains",
"infoEmpty": "No domains found",
"infoFiltered": "(filtered1 from _MAX_ total domains)",
"lengthMenu": "Show _MENU_ domains",
"search": "Search:",
"zeroRecords": "No matching records found"
},
// Or you can use remote translation file
//"language": {
// url: '//cdn.datatables.net/plug-ins/3cfcc339e89/i18n/Portuguese.json'
//},
// Uncomment below line("dom" parameter) to fix the dropdown overflow issue in the datatable cells. The default datatable layout
// setup uses scrollable div(table-scrollable) with overflow:auto to enable vertical scroll(see: assets/global/plugins/datatables/plugins/bootstrap/dataTables.bootstrap.js).
// So when dropdowns used the scrollable div should be removed.
//"dom": "<'row'<'col-md-6 col-sm-12'l><'col-md-6 col-sm-12'f>r>t<'row'<'col-md-5 col-sm-12'i><'col-md-7 col-sm-12'p>>",
"bStateSave": true, // save datatable state(pagination, sort, etc) in cookie.
"columns": [{
"orderable": true
}, {
"orderable": true
}, {
"orderable": true
}, {
"orderable": true
}, {
"orderable": false
}],
"lengthMenu": [
[5, 15, 20, -1],
[5, 15, 20, "All"] // change per page values here
],
// set the initial value
"pageLength": 5,
"pagingType": "bootstrap_full_number",
"language": {
"search": "My search: ",
"lengthMenu": " _MENU_ records",
"paginate": {
"previous":"Prev",
"next": "Next",
"last": "Last",
"first": "First"
}
},
"columnDefs": [{ // set default column settings
'orderable': false,
'targets': [0]
}, {
"searchable": false,
"targets": [0]
}],
"order": [
[1, "asc"]
] // set first column as a default sort by asc
});
var tableWrapper = jQuery('#tb_domain_list_wrapper');
table.find('.group-checkable').change(function () {
var set = jQuery(this).attr("data-set");
var checked = jQuery(this).is(":checked");
jQuery(set).each(function () {
if (checked) {
$(this).attr("checked", true);
$(this).parents('tr').addClass("active");
} else {
$(this).attr("checked", false);
$(this).parents('tr').removeClass("active");
}
});
jQuery.uniform.update(set);
});
table.on('change', 'tbody tr .checkboxes', function () {
$(this).parents('tr').toggleClass("active");
});
tableWrapper.find('.dataTables_length select').addClass("form-control input-xsmall input-inline"); // modify table per page dropdown
}
var initTableConfig = function () {
var table = $('#tb_config_list');
// begin first table
table.dataTable({
// Internationalisation. For more info refer to http://datatables.net/manual/i18n
"language": {
"aria": {
"sortAscending": ": activate to sort column ascending",
"sortDescending": ": activate to sort column descending"
},
"emptyTable": "No data available in table",
"info": "Showing _START_ to _END_ of _TOTAL_ configs",
"infoEmpty": "No configs found",
"infoFiltered": "(filtered1 from _MAX_ total configs)",
"lengthMenu": "Show _MENU_ configs",
"search": "Search:",
"zeroRecords": "No matching configs found"
},
// Or you can use remote translation file
//"language": {
// url: '//cdn.datatables.net/plug-ins/3cfcc339e89/i18n/Portuguese.json'
//},
// Uncomment below line("dom" parameter) to fix the dropdown overflow issue in the datatable cells. The default datatable layout
// setup uses scrollable div(table-scrollable) with overflow:auto to enable vertical scroll(see: assets/global/plugins/datatables/plugins/bootstrap/dataTables.bootstrap.js).
// So when dropdowns used the scrollable div should be removed.
//"dom": "<'row'<'col-md-6 col-sm-12'l><'col-md-6 col-sm-12'f>r>t<'row'<'col-md-5 col-sm-12'i><'col-md-7 col-sm-12'p>>",
"bStateSave": true, // save datatable state(pagination, sort, etc) in cookie.
"columns": [{
"orderable": false
}, {
"orderable": true
}, {
"orderable": true
}],
"lengthMenu": [
[5, 15, 20, -1],
[5, 15, 20, "All"] // change per page values here
],
// set the initial value
"pageLength": 20,
"pagingType": "bootstrap_full_number",
"language": {
"search": "Search: ",
"lengthMenu": " _MENU_ configs",
"paginate": {
"previous":"Prev",
"next": "Next",
"last": "Last",
"first": "First"
}
},
"columnDefs": [{ // set default column settings
'orderable': false,
'targets': [0]
}, {
"searchable": false,
"targets": [0]
}],
"order": [
[2, "asc"]
] // set first column as a default sort by asc
});
var tableWrapper = jQuery('#tb_config_list_wrapper');
table.find('.group-checkable').change(function () {
var set = jQuery(this).attr("data-set");
var checked = jQuery(this).is(":checked");
jQuery(set).each(function () {
if (checked) {
$(this).attr("checked", true);
$(this).parents('tr').addClass("active");
} else {
$(this).attr("checked", false);
$(this).parents('tr').removeClass("active");
}
});
jQuery.uniform.update(set);
});
table.on('change', 'tbody tr .checkboxes', function () {
$(this).parents('tr').toggleClass("active");
});
tableWrapper.find('.dataTables_length select').addClass("form-control input-xsmall input-inline"); // modify table per page dropdown
}
var initTableStastic = function () {
var table = $('#tb_stastic_list');
// begin first table
table.dataTable({
// Internationalisation. For more info refer to http://datatables.net/manual/i18n
"language": {
"aria": {
"sortAscending": ": activate to sort column ascending",
"sortDescending": ": activate to sort column descending"
},
"emptyTable": "No data available in table",
"info": "Showing _START_ to _END_ of _TOTAL_ stastics",
"infoEmpty": "No stastics found",
"infoFiltered": "(filtered1 from _MAX_ total stastics)",
"lengthMenu": "Show _MENU_ stastics",
"search": "Search:",
"zeroRecords": "No matching stastics found"
},
// Or you can use remote translation file
//"language": {
// url: '//cdn.datatables.net/plug-ins/3cfcc339e89/i18n/Portuguese.json'
//},
// Uncomment below line("dom" parameter) to fix the dropdown overflow issue in the datatable cells. The default datatable layout
// setup uses scrollable div(table-scrollable) with overflow:auto to enable vertical scroll(see: assets/global/plugins/datatables/plugins/bootstrap/dataTables.bootstrap.js).
// So when dropdowns used the scrollable div should be removed.
//"dom": "<'row'<'col-md-6 col-sm-12'l><'col-md-6 col-sm-12'f>r>t<'row'<'col-md-5 col-sm-12'i><'col-md-7 col-sm-12'p>>",
"bStateSave": true, // save datatable state(pagination, sort, etc) in cookie.
"columns": [{
"orderable": false
}, {
"orderable": true
}, {
"orderable": true
}],
"lengthMenu": [
[5, 15, 20, -1],
[5, 15, 20, "All"] // change per page values here
],
// set the initial value
"pageLength": 20,
"pagingType": "bootstrap_full_number",
"language": {
"search": "Search: ",
"lengthMenu": " _MENU_ stastics",
"paginate": {
"previous":"Prev",
"next": "Next",
"last": "Last",
"first": "First"
}
},
"columnDefs": [{ // set default column settings
'orderable': false,
'targets': [0]
}, {
"searchable": false,
"targets": [0]
}],
"order": [
[2, "asc"]
] // set first column as a default sort by asc
});
var tableWrapper = jQuery('#tb_stastic_list_wrapper');
table.find('.group-checkable').change(function () {
var set = jQuery(this).attr("data-set");
var checked = jQuery(this).is(":checked");
jQuery(set).each(function () {
if (checked) {
$(this).attr("checked", true);
$(this).parents('tr').addClass("active");
} else {
$(this).attr("checked", false);
$(this).parents('tr').removeClass("active");
}
});
jQuery.uniform.update(set);
});
table.on('change', 'tbody tr .checkboxes', function () {
$(this).parents('tr').toggleClass("active");
});
tableWrapper.find('.dataTables_length select').addClass("form-control input-xsmall input-inline"); // modify table per page dropdown
}
var initTableUser = function () {
function applyChanges(data, url, showResult){
$.ajax({
type: "POST",
url: url,
data: JSON.stringify(data),// now data come in this function
contentType: "application/json; charset=utf-8",
crossDomain: true,
dataType: "json",
success: function (data, status, jqXHR) {
if (showResult){
bootbox.alert("Applied changes successfully.");
}
else{
console.log("Applied changes successfully.")
}
},
error: function (jqXHR, status) {
// error handler
console.log(jqXHR);
a = jqXHR;
bootbox.alert(jqXHR["responseText"]);
}
});
}
var table = $('#tbl_user_manage');
// begin first table
table.dataTable({
// Internationalisation. For more info refer to http://datatables.net/manual/i18n
"language": {
"aria": {
"sortAscending": ": activate to sort column ascending",
"sortDescending": ": activate to sort column descending"
},
"emptyTable": "No data available in table",
"info": "Showing _START_ to _END_ of _TOTAL_ users",
"infoEmpty": "No users found",
"infoFiltered": "(filtered1 from _MAX_ total users)",
"lengthMenu": "Show _MENU_ users",
"search": "Search:",
"zeroRecords": "No matching users found"
},
// Or you can use remote translation file
//"language": {
// url: '//cdn.datatables.net/plug-ins/3cfcc339e89/i18n/Portuguese.json'
//},
// Uncomment below line("dom" parameter) to fix the dropdown overflow issue in the datatable cells. The default datatable layout
// setup uses scrollable div(table-scrollable) with overflow:auto to enable vertical scroll(see: assets/global/plugins/datatables/plugins/bootstrap/dataTables.bootstrap.js).
// So when dropdowns used the scrollable div should be removed.
//"dom": "<'row'<'col-md-6 col-sm-12'l><'col-md-6 col-sm-12'f>r>t<'row'<'col-md-5 col-sm-12'i><'col-md-7 col-sm-12'p>>",
"bStateSave": true, // save datatable state(pagination, sort, etc) in cookie.
"columns": [{
"orderable": true
}, {
"orderable": true
}, {
"orderable": true
}, {
"orderable": false
}, {
"orderable": false
}, {
"orderable": false
}],
"lengthMenu": [
[5, 15, 20, -1],
[5, 15, 20, "All"] // change per page values here
],
// set the initial value
"pageLength": 5,
"pagingType": "bootstrap_full_number",
"language": {
"search": "Search: ",
"lengthMenu": " _MENU_ users",
"paginate": {
"previous":"Prev",
"next": "Next",
"last": "Last",
"first": "First"
}
},
"columnDefs": [{ // set default column settings
'orderable': false,
'targets': [0]
}, {
"searchable": true,
"targets": [0]
}],
"order": [
[1, "asc"]
] // set first column as a default sort by asc
});
var tableWrapper = jQuery('#tb_user_manage_wrapper');
table.find('.group-checkable').change(function () {
var set = jQuery(this).attr("data-set");
var checked = jQuery(this).is(":checked");
jQuery(set).each(function () {
if (checked) {
$(this).attr("checked", true);
$(this).parents('tr').addClass("active");
} else {
$(this).attr("checked", false);
$(this).parents('tr').removeClass("active");
}
});
jQuery.uniform.update(set);
});
table.on('change', 'tbody tr .checkboxes', function () {
$(this).parents('tr').toggleClass("active");
});
tableWrapper.find('.dataTables_length select').addClass("form-control input-xsmall input-inline"); // modify table per page dropdown
// Buton action handling
table.on('click', '.revoke', function (e) {
e.preventDefault();
var nRow = $(this).parents('tr')[0];
var username = nRow.cells.item(0).innerText;
bootbox.confirm("Are you sure to revoke all " + username+ "'s privileges?. He will not able to access to any domain.", function(result) {
if (result == true){
var postdata = {'action': 'revoke_user_privielges', 'data': username}
applyChanges(postdata, '/admin/manageuser');
}
});
});
table.on('click', '.delete', function (e) {
e.preventDefault();
var nRow = $(this).parents('tr')[0];
var username = nRow.cells.item(0).innerText;
bootbox.confirm("Are you sure to delete user " + username + "?", function(result) {
if (result == true){
var postdata = {'action': 'delete_user', 'data': username}
applyChanges(postdata, '/admin/manageuser');
}
});
});
table.on('change', '.ck_admin', function (e) {
e.preventDefault();
var nRow = $(this).parents('tr')[0];
var username = nRow.cells.item(0).innerText;
var ckadmin = document.getElementById("ck_admin_" + username).checked;
if (ckadmin){
postdata = {'action': 'set_admin', 'data': {'username': username, 'is_admin': true}};
applyChanges(postdata, '/admin/manageuser');
}
else{
postdata = {'action': 'set_admin', 'data': {'username': username, 'is_admin': false}};
applyChanges(postdata, '/admin/manageuser');
}
});
}
var initTableHistory = function () {
function applyChanges(data, url, showResult){
$.ajax({
type: "POST",
url: url,
data: JSON.stringify(data),// now data come in this function
contentType: "application/json; charset=utf-8",
crossDomain: true,
dataType: "json",
success: function (data, status, jqXHR) {
if (showResult){
bootbox.alert("Applied changes successfully.");
}
else{
console.log("Applied changes successfully.")
}
},
error: function (jqXHR, status) {
// error handler
console.log(jqXHR);
a = jqXHR;
bootbox.alert(jqXHR["responseText"]);
}
});
}
var table = $('#tbl_history');
// begin first table
table.dataTable({
// Internationalisation. For more info refer to http://datatables.net/manual/i18n
"language": {
"aria": {
"sortAscending": ": activate to sort column ascending",
"sortDescending": ": activate to sort column descending"
},
"emptyTable": "No data available in table",
"info": "Showing _START_ to _END_ of _TOTAL_ histories",
"infoEmpty": "No histories found",
"infoFiltered": "(filtered1 from _MAX_ total histories)",
"lengthMenu": "Show _MENU_ histories",
"search": "Search:",
"zeroRecords": "No matching histories found"
},
// Or you can use remote translation file
//"language": {
// url: '//cdn.datatables.net/plug-ins/3cfcc339e89/i18n/Portuguese.json'
//},
// Uncomment below line("dom" parameter) to fix the dropdown overflow issue in the datatable cells. The default datatable layout
// setup uses scrollable div(table-scrollable) with overflow:auto to enable vertical scroll(see: assets/global/plugins/datatables/plugins/bootstrap/dataTables.bootstrap.js).
// So when dropdowns used the scrollable div should be removed.
//"dom": "<'row'<'col-md-6 col-sm-12'l><'col-md-6 col-sm-12'f>r>t<'row'<'col-md-5 col-sm-12'i><'col-md-7 col-sm-12'p>>",
"bStateSave": true, // save datatable state(pagination, sort, etc) in cookie.
"columns": [{
"orderable": true
}, {
"orderable": true
}, {
"orderable": true
}, {
"orderable": false
}],
"lengthMenu": [
[5, 15, 20, -1],
[5, 15, 20, "All"] // change per page values here
],
// set the initial value
"pageLength": 20,
"pagingType": "bootstrap_full_number",
"language": {
"search": "Search: ",
"lengthMenu": " _MENU_ histories",
"paginate": {
"previous":"Prev",
"next": "Next",
"last": "Last",
"first": "First"
}
},
"columnDefs": [{ // set default column settings
'orderable': false,
'targets': [0]
}, {
"searchable": true,
"targets": [0]
}],
"order": [
[2 , "desc"]
] // set first time column as a default sort by desc
});
var tableWrapper = jQuery('#tbl_history_wrapper');
table.find('.group-checkable').change(function () {
var set = jQuery(this).attr("data-set");
var checked = jQuery(this).is(":checked");
jQuery(set).each(function () {
if (checked) {
$(this).attr("checked", true);
$(this).parents('tr').addClass("active");
} else {
$(this).attr("checked", false);
$(this).parents('tr').removeClass("active");
}
});
jQuery.uniform.update(set);
});
table.on('change', 'tbody tr .checkboxes', function () {
$(this).parents('tr').toggleClass("active");
});
tableWrapper.find('.dataTables_length select').addClass("form-control input-xsmall input-inline"); // modify table per page dropdown
table.on('click', '.history_detail', function (e) {
e.preventDefault();
var nRow = $(this).parents('tr')[0];
var detail = nRow.cells.item(3).children[0].value;
bootbox.alert(detail);
});
$('#tbl_history_clear').click(function (e) {
e.preventDefault();
bootbox.confirm("Are you sure you want to remove all history?", function(result) {
if (result == true){
applyChanges('', '/admin/history');
location.reload();
}
});
});
}
return {
//main function to initiate the module
init: function () {
if (!jQuery().dataTable) {
return;
}
initTableDomain();
initTableConfig();
initTableStastic();
initTableUser();
initTableHistory();
}
};
}();

View File

@ -0,0 +1,40 @@
var TableTree = function() {
var demo1 = function() {
jQuery('#gtreetable').gtreetable({
'draggable': true,
'source': function(id) {
return {
type: 'GET',
url: 'demo/table_tree.php',
data: {
'id': id
},
dataType: 'json',
error: function(XMLHttpRequest) {
alert(XMLHttpRequest.status + ': ' + XMLHttpRequest.responseText);
}
}
},
'sort': function (a, b) {
var aName = a.name.toLowerCase();
var bName = b.name.toLowerCase();
return ((aName < bName) ? -1 : ((aName > bName) ? 1 : 0));
},
'types': { default: 'glyphicon glyphicon-folder-open', folder: 'glyphicon glyphicon-folder-open'},
'inputWidth': '255px'
});
}
return {
//main function to initiate the module
init: function() {
demo1();
}
};
}();

View File

@ -0,0 +1,19 @@
var Tasks = function () {
return {
//main function to initiate the module
initDashboardWidget: function () {
$('.task-list input[type="checkbox"]').change(function() {
if ($(this).is(':checked')) {
$(this).parents('li').addClass("task-done");
} else {
$(this).parents('li').removeClass("task-done");
}
});
}
};
}();

View File

@ -0,0 +1,35 @@
var Timeline = function () {
var mapPolygone = function () {
var map = new GMaps({
div: '#gmap_polygons',
lat: -12.043333,
lng: -77.028333
});
var path = [
[-12.040397656836609, -77.03373871559225],
[-12.040248585302038, -77.03993927003302],
[-12.050047116528843, -77.02448169303511],
[-12.044804866577001, -77.02154422636042]
];
var polygon = map.drawPolygon({
paths: path,
strokeColor: '#BBD8E9',
strokeOpacity: 1,
strokeWeight: 3,
fillColor: '#BBD8E9',
fillOpacity: 0.6
});
}
return {
//main function to initiate map samples
init: function () {
mapPolygone();
}
};
}();

View File

@ -0,0 +1,46 @@
/**
Todo Module
**/
var Todo = function () {
// private functions & variables
var _initComponents = function() {
// init datepicker
$('.todo-taskbody-due').datepicker({
rtl: Metronic.isRTL(),
orientation: "left",
autoclose: true
});
// init tags
$(".todo-taskbody-tags").select2({
tags: ["Testing", "Important", "Info", "Pending", "Completed", "Requested", "Approved"]
});
}
var _handleProjectListMenu = function() {
if (Metronic.getViewPort().width <= 992) {
$('.todo-project-list-content').addClass("collapse");
} else {
$('.todo-project-list-content').removeClass("collapse").css("height", "auto");
}
}
// public functions
return {
//main function
init: function () {
_initComponents();
_handleProjectListMenu();
Metronic.addResizeHandler(function(){
_handleProjectListMenu();
});
}
};
}();

View File

@ -0,0 +1,97 @@
var UIAlertDialogApi = function () {
var handleDialogs = function() {
$('#demo_1').click(function(){
bootbox.alert("Hello world!");
});
//end #demo_1
$('#demo_2').click(function(){
bootbox.alert("Hello world!", function() {
alert("Hello world callback");
});
});
//end #demo_2
$('#demo_3').click(function(){
bootbox.confirm("Are you sure?", function(result) {
alert("Confirm result: "+result);
});
});
//end #demo_3
$('#demo_4').click(function(){
bootbox.prompt("What is your name?", function(result) {
if (result === null) {
alert("Prompt dismissed");
} else {
alert("Hi <b>"+result+"</b>");
}
});
});
//end #demo_6
$('#demo_5').click(function(){
bootbox.dialog({
message: "I am a custom dialog",
title: "Custom title",
buttons: {
success: {
label: "Success!",
className: "green",
callback: function() {
alert("great success");
}
},
danger: {
label: "Danger!",
className: "red",
callback: function() {
alert("uh oh, look out!");
}
},
main: {
label: "Click ME!",
className: "blue",
callback: function() {
alert("Primary button");
}
}
}
});
});
//end #demo_7
}
var handleAlerts = function() {
$('#alert_show').click(function(){
Metronic.alert({
container: $('#alert_container').val(), // alerts parent container(by default placed after the page breadcrumbs)
place: $('#alert_place').val(), // append or prepent in container
type: $('#alert_type').val(), // alert's type
message: $('#alert_message').val(), // alert's message
close: $('#alert_close').is(":checked"), // make alert closable
reset: $('#alert_reset').is(":checked"), // close all previouse alerts first
focus: $('#alert_focus').is(":checked"), // auto scroll to the alert after shown
closeInSeconds: $('#alert_close_in_seconds').val(), // auto close after defined seconds
icon: $('#alert_icon').val() // put icon before the message
});
});
}
return {
//main function to initiate the module
init: function () {
handleDialogs();
handleAlerts();
}
};
}();

View File

@ -0,0 +1,166 @@
var UIBlockUI = function() {
var handleSample1 = function() {
$('#blockui_sample_1_1').click(function() {
Metronic.blockUI({
target: '#blockui_sample_1_portlet_body'
});
window.setTimeout(function() {
Metronic.unblockUI('#blockui_sample_1_portlet_body');
}, 2000);
});
$('#blockui_sample_1_2').click(function() {
Metronic.blockUI({
target: '#blockui_sample_1_portlet_body',
boxed: true
});
window.setTimeout(function() {
Metronic.unblockUI('#blockui_sample_1_portlet_body');
}, 2000);
});
$('#blockui_sample_1_3').click(function() {
Metronic.blockUI({
target: '#blockui_sample_1_portlet_body',
animate: true
});
window.setTimeout(function() {
Metronic.unblockUI('#blockui_sample_1_portlet_body');
}, 2000);
});
}
var handleSample2 = function() {
$('#blockui_sample_2_1').click(function() {
Metronic.blockUI();
window.setTimeout(function() {
Metronic.unblockUI();
}, 2000);
});
$('#blockui_sample_2_2').click(function() {
Metronic.blockUI({
boxed: true
});
window.setTimeout(function() {
Metronic.unblockUI();
}, 2000);
});
$('#blockui_sample_2_3').click(function() {
Metronic.startPageLoading({message: 'Please wait...'});
window.setTimeout(function() {
Metronic.stopPageLoading();
}, 2000);
});
$('#blockui_sample_2_4').click(function() {
Metronic.startPageLoading({animate: true});
window.setTimeout(function() {
Metronic.stopPageLoading();
}, 2000);
});
}
var handleSample3 = function() {
$('#blockui_sample_3_1_0').click(function() {
Metronic.blockUI({
target: '#basic',
overlayColor: 'none',
cenrerY: true,
animate: true
});
window.setTimeout(function() {
Metronic.unblockUI('#basic');
}, 2000);
});
$('#blockui_sample_3_1').click(function() {
Metronic.blockUI({
target: '#blockui_sample_3_1_element',
overlayColor: 'none',
animate: true
});
});
$('#blockui_sample_3_1_1').click(function() {
Metronic.unblockUI('#blockui_sample_3_1_element');
});
$('#blockui_sample_3_2').click(function() {
Metronic.blockUI({
target: '#blockui_sample_3_2_element',
boxed: true
});
});
$('#blockui_sample_3_2_1').click(function() {
Metronic.unblockUI('#blockui_sample_3_2_element');
});
}
var handleSample4 = function() {
$('#blockui_sample_4_1').click(function() {
Metronic.blockUI({
target: '#blockui_sample_4_portlet_body',
boxed: true,
message: 'Processing...'
});
window.setTimeout(function() {
Metronic.unblockUI('#blockui_sample_4_portlet_body');
}, 2000);
});
$('#blockui_sample_4_2').click(function() {
Metronic.blockUI({
target: '#blockui_sample_4_portlet_body',
iconOnly: true
});
window.setTimeout(function() {
Metronic.unblockUI('#blockui_sample_4_portlet_body');
}, 2000);
});
$('#blockui_sample_4_3').click(function() {
Metronic.blockUI({
target: '#blockui_sample_4_portlet_body',
boxed: true,
textOnly: true
});
window.setTimeout(function() {
Metronic.unblockUI('#blockui_sample_4_portlet_body');
}, 2000);
});
}
return {
//main function to initiate the module
init: function() {
handleSample1();
handleSample2();
handleSample3();
handleSample4();
}
};
}();

View File

@ -0,0 +1,30 @@
var UIBootstrapGrowl = function() {
return {
//main function to initiate the module
init: function() {
$('#bs_growl_show').click(function(event) {
$.bootstrapGrowl($('#growl_text').val(), {
ele: 'body', // which element to append to
type: $('#growl_type').val(), // (null, 'info', 'danger', 'success', 'warning')
offset: {
from: $('#growl_offset').val(),
amount: parseInt($('#growl_offset_val').val())
}, // 'top', or 'bottom'
align: $('#growl_align').val(), // ('left', 'right', or 'center')
width: parseInt($('#growl_width')), // (integer, or 'auto')
delay: $('#growl_delay').val(), // Time while the message will be displayed. It's not equivalent to the *demo* timeOut!
allow_dismiss: $('#glowl_dismiss').is(":checked"), // If true then will display a cross to close the popup.
stackup_spacing: 10 // spacing between consecutively stacked growls.
});
});
}
};
}();

View File

@ -0,0 +1,33 @@
var UIConfirmations = function () {
var handleSample = function () {
$('#bs_confirmation_demo_1').on('confirmed.bs.confirmation', function () {
alert('You confirmed action #1');
});
$('#bs_confirmation_demo_1').on('canceled.bs.confirmation', function () {
alert('You canceled action #1');
});
$('#bs_confirmation_demo_2').on('confirmed.bs.confirmation', function () {
alert('You confirmed action #2');
});
$('#bs_confirmation_demo_2').on('canceled.bs.confirmation', function () {
alert('You canceled action #2');
});
}
return {
//main function to initiate the module
init: function () {
handleSample();
}
};
}();

View File

@ -0,0 +1,32 @@
var UIDatepaginator = function () {
return {
//main function to initiate the module
init: function () {
//sample #1
$('#datepaginator_sample_1').datepaginator();
//sample #2
$('#datepaginator_sample_2').datepaginator({
size: "large"
});
//sample #3
$('#datepaginator_sample_3').datepaginator({
size: "small"
});
//sample #3
$('#datepaginator_sample_4').datepaginator({
onSelectedDateChanged: function(event, date) {
alert("Selected date: " + moment(date).format("Do, MMM YYYY"));
}
});
} // end init
};
}();

View File

@ -0,0 +1,69 @@
var UIExtendedModals = function () {
return {
//main function to initiate the module
init: function () {
// general settings
$.fn.modal.defaults.spinner = $.fn.modalmanager.defaults.spinner =
'<div class="loading-spinner" style="width: 200px; margin-left: -100px;">' +
'<div class="progress progress-striped active">' +
'<div class="progress-bar" style="width: 100%;"></div>' +
'</div>' +
'</div>';
$.fn.modalmanager.defaults.resize = true;
//dynamic demo:
$('.dynamic .demo').click(function(){
var tmpl = [
// tabindex is required for focus
'<div class="modal hide fade" tabindex="-1">',
'<div class="modal-header">',
'<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>',
'<h4 class="modal-title">Modal header</h4>',
'</div>',
'<div class="modal-body">',
'<p>Test</p>',
'</div>',
'<div class="modal-footer">',
'<a href="#" data-dismiss="modal" class="btn btn-default">Close</a>',
'<a href="#" class="btn btn-primary">Save changes</a>',
'</div>',
'</div>'
].join('');
$(tmpl).modal();
});
//ajax demo:
var $modal = $('#ajax-modal');
$('#ajax-demo').on('click', function(){
// create the backdrop and wait for next modal to be triggered
$('body').modalmanager('loading');
setTimeout(function(){
$modal.load('ui_extended_modals_ajax_sample.html', '', function(){
$modal.modal();
});
}, 1000);
});
$modal.on('click', '.update', function(){
$modal.modal('loading');
setTimeout(function(){
$modal
.modal('loading')
.find('.modal-body')
.prepend('<div class="alert alert-info fade in">' +
'Updated!<button type="button" class="close" data-dismiss="alert">&times;</button>' +
'</div>');
}, 1000);
});
}
};
}();

View File

@ -0,0 +1,68 @@
var UIGeneral = function () {
var handlePulsate = function () {
if (!jQuery().pulsate) {
return;
}
if (Metronic.isIE8() == true) {
return; // pulsate plugin does not support IE8 and below
}
if (jQuery().pulsate) {
jQuery('#pulsate-regular').pulsate({
color: "#bf1c56"
});
jQuery('#pulsate-once').click(function () {
$('#pulsate-once-target').pulsate({
color: "#399bc3",
repeat: false
});
});
jQuery('#pulsate-crazy').click(function () {
$('#pulsate-crazy-target').pulsate({
color: "#fdbe41",
reach: 50,
repeat: 10,
speed: 100,
glow: true
});
});
}
}
var handleDynamicPagination = function() {
$('#dynamic_pager_demo1').bootpag({
paginationClass: 'pagination',
next: '<i class="fa fa-angle-right"></i>',
prev: '<i class="fa fa-angle-left"></i>',
total: 6,
page: 1,
}).on("page", function(event, num){
$("#dynamic_pager_content1").html("Page " + num + " content here"); // or some ajax content loading...
});
$('#dynamic_pager_demo2').bootpag({
paginationClass: 'pagination pagination-sm',
next: '<i class="fa fa-angle-right"></i>',
prev: '<i class="fa fa-angle-left"></i>',
total: 24,
page: 1,
maxVisible: 6
}).on('page', function(event, num){
$("#dynamic_pager_content2").html("Page " + num + " content here"); // or some ajax content loading...
});
}
return {
//main function to initiate the module
init: function () {
handlePulsate();
handleDynamicPagination();
}
};
}();

View File

@ -0,0 +1,45 @@
var UIIdleTimeout = function () {
return {
//main function to initiate the module
init: function () {
// cache a reference to the countdown element so we don't have to query the DOM for it on each ping.
var $countdown;
$('body').append('<div class="modal fade" id="idle-timeout-dialog" data-backdrop="static"><div class="modal-dialog modal-small"><div class="modal-content"><div class="modal-header"><h4 class="modal-title">Your session is about to expire.</h4></div><div class="modal-body"><p><i class="fa fa-warning"></i> You session will be locked in <span id="idle-timeout-counter"></span> seconds.</p><p>Do you want to continue your session?</p></div><div class="modal-footer"><button id="idle-timeout-dialog-logout" type="button" class="btn btn-default">No, Logout</button><button id="idle-timeout-dialog-keepalive" type="button" class="btn btn-primary" data-dismiss="modal">Yes, Keep Working</button></div></div></div></div>');
// start the idle timer plugin
$.idleTimeout('#idle-timeout-dialog', '.modal-content button:last', {
idleAfter: 5, // 5 seconds
timeout: 30000, //30 seconds to timeout
pollingInterval: 5, // 5 seconds
keepAliveURL: 'demo/idletimeout_keepalive.php',
serverResponseEquals: 'OK',
onTimeout: function(){
window.location = "extra_lock.html";
},
onIdle: function(){
$('#idle-timeout-dialog').modal('show');
$countdown = $('#idle-timeout-counter');
$('#idle-timeout-dialog-keepalive').on('click', function () {
$('#idle-timeout-dialog').modal('hide');
});
$('#idle-timeout-dialog-logout').on('click', function () {
$('#idle-timeout-dialog').modal('hide');
$.idleTimeout.options.onTimeout.call(this);
});
},
onCountdown: function(counter){
$countdown.html(counter); // update the counter
}
});
}
};
}();

View File

@ -0,0 +1,51 @@
var UINestable = function () {
var updateOutput = function (e) {
var list = e.length ? e : $(e.target),
output = list.data('output');
if (window.JSON) {
output.val(window.JSON.stringify(list.nestable('serialize'))); //, null, 2));
} else {
output.val('JSON browser support required for this demo.');
}
};
return {
//main function to initiate the module
init: function () {
// activate Nestable for list 1
$('#nestable_list_1').nestable({
group: 1
})
.on('change', updateOutput);
// activate Nestable for list 2
$('#nestable_list_2').nestable({
group: 1
})
.on('change', updateOutput);
// output initial serialised data
updateOutput($('#nestable_list_1').data('output', $('#nestable_list_1_output')));
updateOutput($('#nestable_list_2').data('output', $('#nestable_list_2_output')));
$('#nestable_list_menu').on('click', function (e) {
var target = $(e.target),
action = target.data('action');
if (action === 'expand-all') {
$('.dd').nestable('expandAll');
}
if (action === 'collapse-all') {
$('.dd').nestable('collapseAll');
}
});
$('#nestable_list_3').nestable();
}
};
}();

View File

@ -0,0 +1,40 @@
var UINotific8 = function () {
return {
//main function to initiate the module
init: function () {
$('#notific8_show').click(function(event) {
var settings = {
theme: $('#notific8_theme').val(),
sticky: $('#notific8_sticky').is(':checked'),
horizontalEdge: $('#notific8_pos_hor').val(),
verticalEdge: $('#notific8_pos_ver').val()
},
$button = $(this);
if ($.trim($('#notific8_heading').val()) != '') {
settings.heading = $.trim($('#notific8_heading').val());
}
if (!settings.sticky) {
settings.life = $('#notific8_life').val();
}
$.notific8('zindex', 11500);
$.notific8($.trim($('#notific8_text').val()), settings);
$button.attr('disabled', 'disabled');
setTimeout(function() {
$button.removeAttr('disabled');
}, 1000);
});
}
};
}();

View File

@ -0,0 +1,117 @@
var UIToastr = function () {
return {
//main function to initiate the module
init: function () {
var i = -1,
toastCount = 0,
$toastlast,
getMessage = function () {
var msgs = ['Hello, some notification sample goes here',
'<div><input class="form-control input-small" value="textbox"/>&nbsp;<a href="http://themeforest.net/item/metronic-responsive-admin-dashboard-template/4021469?ref=keenthemes" target="_blank">Check this out</a></div><div><button type="button" id="okBtn" class="btn blue">Close me</button><button type="button" id="surpriseBtn" class="btn default" style="margin: 0 8px 0 8px">Surprise me</button></div>',
'Did you like this one ? :)',
'Totally Awesome!!!',
'Yeah, this is the Metronic!',
'Explore the power of Metronic. Purchase it now!'
];
i++;
if (i === msgs.length) {
i = 0;
}
return msgs[i];
};
$('#showtoast').click(function () {
var shortCutFunction = $("#toastTypeGroup input:checked").val();
var msg = $('#message').val();
var title = $('#title').val() || '';
var $showDuration = $('#showDuration');
var $hideDuration = $('#hideDuration');
var $timeOut = $('#timeOut');
var $extendedTimeOut = $('#extendedTimeOut');
var $showEasing = $('#showEasing');
var $hideEasing = $('#hideEasing');
var $showMethod = $('#showMethod');
var $hideMethod = $('#hideMethod');
var toastIndex = toastCount++;
toastr.options = {
closeButton: $('#closeButton').prop('checked'),
debug: $('#debugInfo').prop('checked'),
positionClass: $('#positionGroup input:checked').val() || 'toast-top-right',
onclick: null
};
if ($('#addBehaviorOnToastClick').prop('checked')) {
toastr.options.onclick = function () {
alert('You can perform some custom action after a toast goes away');
};
}
if ($showDuration.val().length) {
toastr.options.showDuration = $showDuration.val();
}
if ($hideDuration.val().length) {
toastr.options.hideDuration = $hideDuration.val();
}
if ($timeOut.val().length) {
toastr.options.timeOut = $timeOut.val();
}
if ($extendedTimeOut.val().length) {
toastr.options.extendedTimeOut = $extendedTimeOut.val();
}
if ($showEasing.val().length) {
toastr.options.showEasing = $showEasing.val();
}
if ($hideEasing.val().length) {
toastr.options.hideEasing = $hideEasing.val();
}
if ($showMethod.val().length) {
toastr.options.showMethod = $showMethod.val();
}
if ($hideMethod.val().length) {
toastr.options.hideMethod = $hideMethod.val();
}
if (!msg) {
msg = getMessage();
}
$("#toastrOptions").text("Command: toastr[" + shortCutFunction + "](\"" + msg + (title ? "\", \"" + title : '') + "\")\n\ntoastr.options = " + JSON.stringify(toastr.options, null, 2));
var $toast = toastr[shortCutFunction](msg, title); // Wire up an event handler to a button in the toast, if it exists
$toastlast = $toast;
if ($toast.find('#okBtn').length) {
$toast.delegate('#okBtn', 'click', function () {
alert('you clicked me. i was toast #' + toastIndex + '. goodbye!');
$toast.remove();
});
}
if ($toast.find('#surpriseBtn').length) {
$toast.delegate('#surpriseBtn', 'click', function () {
alert('Surprise! you clicked me. i was toast #' + toastIndex + '. You could perform an action here.');
});
}
$('#clearlasttoast').click(function () {
toastr.clear($toastlast);
});
});
$('#cleartoasts').click(function () {
toastr.clear();
});
}
};
}();

View File

@ -0,0 +1,196 @@
var UITree = function () {
var handleSample1 = function () {
$('#tree_1').jstree({
"core" : {
"themes" : {
"responsive": false
}
},
"types" : {
"default" : {
"icon" : "fa fa-folder icon-state-warning icon-lg"
},
"file" : {
"icon" : "fa fa-file icon-state-warning icon-lg"
}
},
"plugins": ["types"]
});
// handle link clicks in tree nodes(support target="_blank" as well)
$('#tree_1').on('select_node.jstree', function(e,data) {
var link = $('#' + data.selected).find('a');
if (link.attr("href") != "#" && link.attr("href") != "javascript:;" && link.attr("href") != "") {
if (link.attr("target") == "_blank") {
link.attr("href").target = "_blank";
}
document.location.href = link.attr("href");
return false;
}
});
}
var handleSample2 = function () {
$('#tree_2').jstree({
'plugins': ["wholerow", "checkbox", "types"],
'core': {
"themes" : {
"responsive": false
},
'data': [{
"text": "Same but with checkboxes",
"children": [{
"text": "initially selected",
"state": {
"selected": true
}
}, {
"text": "custom icon",
"icon": "fa fa-warning icon-state-danger"
}, {
"text": "initially open",
"icon" : "fa fa-folder icon-state-default",
"state": {
"opened": true
},
"children": ["Another node"]
}, {
"text": "custom icon",
"icon": "fa fa-warning icon-state-warning"
}, {
"text": "disabled node",
"icon": "fa fa-check icon-state-success",
"state": {
"disabled": true
}
}]
},
"And wholerow selection"
]
},
"types" : {
"default" : {
"icon" : "fa fa-folder icon-state-warning icon-lg"
},
"file" : {
"icon" : "fa fa-file icon-state-warning icon-lg"
}
}
});
}
var contextualMenuSample = function() {
$("#tree_3").jstree({
"core" : {
"themes" : {
"responsive": false
},
// so that create works
"check_callback" : true,
'data': [{
"text": "Parent Node",
"children": [{
"text": "Initially selected",
"state": {
"selected": true
}
}, {
"text": "Custom Icon",
"icon": "fa fa-warning icon-state-danger"
}, {
"text": "Initially open",
"icon" : "fa fa-folder icon-state-success",
"state": {
"opened": true
},
"children": [
{"text": "Another node", "icon" : "fa fa-file icon-state-warning"}
]
}, {
"text": "Another Custom Icon",
"icon": "fa fa-warning icon-state-warning"
}, {
"text": "Disabled Node",
"icon": "fa fa-check icon-state-success",
"state": {
"disabled": true
}
}, {
"text": "Sub Nodes",
"icon": "fa fa-folder icon-state-danger",
"children": [
{"text": "Item 1", "icon" : "fa fa-file icon-state-warning"},
{"text": "Item 2", "icon" : "fa fa-file icon-state-success"},
{"text": "Item 3", "icon" : "fa fa-file icon-state-default"},
{"text": "Item 4", "icon" : "fa fa-file icon-state-danger"},
{"text": "Item 5", "icon" : "fa fa-file icon-state-info"}
]
}]
},
"Another Node"
]
},
"types" : {
"default" : {
"icon" : "fa fa-folder icon-state-warning icon-lg"
},
"file" : {
"icon" : "fa fa-file icon-state-warning icon-lg"
}
},
"state" : { "key" : "demo2" },
"plugins" : [ "contextmenu", "dnd", "state", "types" ]
});
}
var ajaxTreeSample = function() {
$("#tree_4").jstree({
"core" : {
"themes" : {
"responsive": false
},
// so that create works
"check_callback" : true,
'data' : {
'url' : function (node) {
return 'demo/jstree_ajax_data.php';
},
'data' : function (node) {
return { 'parent' : node.id };
}
}
},
"types" : {
"default" : {
"icon" : "fa fa-folder icon-state-warning icon-lg"
},
"file" : {
"icon" : "fa fa-file icon-state-warning icon-lg"
}
},
"state" : { "key" : "demo3" },
"plugins" : [ "dnd", "state", "types" ]
});
}
return {
//main function to initiate the module
init: function () {
handleSample1();
handleSample2();
contextualMenuSample();
ajaxTreeSample();
}
};
}();