552 lines
16 KiB
JavaScript
552 lines
16 KiB
JavaScript
|
'use strict';
|
||
|
|
||
|
/*
|
||
|
|
||
|
Main javascript functions to init most of the elements
|
||
|
|
||
|
#1. CHAT APP
|
||
|
#2. CALENDAR INIT
|
||
|
#3. FORM VALIDATION
|
||
|
#4. DATE RANGE PICKER
|
||
|
#5. DATATABLES
|
||
|
#6. EDITABLE TABLES
|
||
|
#7. FORM STEPS FUNCTIONALITY
|
||
|
#8. SELECT 2 ACTIVATION
|
||
|
#9. CKEDITOR ACTIVATION
|
||
|
#10. CHARTJS CHARTS http://www.chartjs.org/
|
||
|
#11. MENU RELATED STUFF
|
||
|
#12. CONTENT SIDE PANEL TOGGLER
|
||
|
#13. EMAIL APP
|
||
|
#14. FULL CHAT APP
|
||
|
#15. CRM PIPELINE
|
||
|
#16. OUR OWN CUSTOM DROPDOWNS
|
||
|
|
||
|
*/
|
||
|
|
||
|
// ------------------------------------
|
||
|
// HELPER FUNCTIONS TO TEST FOR SPECIFIC DISPLAY SIZE (RESPONSIVE HELPERS)
|
||
|
// ------------------------------------
|
||
|
|
||
|
function is_display_type(display_type) {
|
||
|
return $('.display-type').css('content') == display_type || $('.display-type').css('content') == '"' + display_type + '"';
|
||
|
}
|
||
|
function not_display_type(display_type) {
|
||
|
return $('.display-type').css('content') != display_type && $('.display-type').css('content') != '"' + display_type + '"';
|
||
|
}
|
||
|
|
||
|
$(function () {
|
||
|
|
||
|
// #1. CHAT APP
|
||
|
|
||
|
$('.floated-chat-btn, .floated-chat-w .chat-close').on('click', function () {
|
||
|
$('.floated-chat-w').toggleClass('active');
|
||
|
return false;
|
||
|
});
|
||
|
|
||
|
$('.message-input').on('keypress', function (e) {
|
||
|
if (e.which == 13) {
|
||
|
$('.chat-messages').append('<div class="message self"><div class="message-content">' + $(this).val() + '</div></div>');
|
||
|
$(this).val('');
|
||
|
var $messages_w = $('.floated-chat-w .chat-messages');
|
||
|
$messages_w.scrollTop($messages_w.prop("scrollHeight"));
|
||
|
$messages_w.perfectScrollbar('update');
|
||
|
return false;
|
||
|
}
|
||
|
});
|
||
|
|
||
|
$('.floated-chat-w .chat-messages').perfectScrollbar();
|
||
|
|
||
|
// #2. CALENDAR INIT
|
||
|
|
||
|
if ($("#fullCalendar").length) {
|
||
|
var calendar, d, date, m, y;
|
||
|
|
||
|
date = new Date();
|
||
|
|
||
|
d = date.getDate();
|
||
|
|
||
|
m = date.getMonth();
|
||
|
|
||
|
y = date.getFullYear();
|
||
|
|
||
|
calendar = $("#fullCalendar").fullCalendar({
|
||
|
header: {
|
||
|
left: "prev,next today",
|
||
|
center: "title",
|
||
|
right: "month,agendaWeek,agendaDay"
|
||
|
},
|
||
|
selectable: true,
|
||
|
selectHelper: true,
|
||
|
select: function select(start, end, allDay) {
|
||
|
var title;
|
||
|
title = prompt("Event Title:");
|
||
|
if (title) {
|
||
|
calendar.fullCalendar("renderEvent", {
|
||
|
title: title,
|
||
|
start: start,
|
||
|
end: end,
|
||
|
allDay: allDay
|
||
|
}, true);
|
||
|
}
|
||
|
return calendar.fullCalendar("unselect");
|
||
|
},
|
||
|
editable: true,
|
||
|
events: [{
|
||
|
title: "Long Event",
|
||
|
start: new Date(y, m, 3, 12, 0),
|
||
|
end: new Date(y, m, 7, 14, 0)
|
||
|
}, {
|
||
|
title: "Lunch",
|
||
|
start: new Date(y, m, d, 12, 0),
|
||
|
end: new Date(y, m, d + 2, 14, 0),
|
||
|
allDay: false
|
||
|
}, {
|
||
|
title: "Click for Google",
|
||
|
start: new Date(y, m, 28),
|
||
|
end: new Date(y, m, 29),
|
||
|
url: "http://google.com/"
|
||
|
}]
|
||
|
});
|
||
|
}
|
||
|
|
||
|
// #3. FORM VALIDATION
|
||
|
|
||
|
if ($('#formValidate').length) {
|
||
|
$('#formValidate').validator();
|
||
|
}
|
||
|
|
||
|
// #4. DATE RANGE PICKER
|
||
|
|
||
|
$('input.single-daterange').daterangepicker({ "singleDatePicker": true });
|
||
|
$('input.multi-daterange').daterangepicker({ "startDate": "03/28/2017", "endDate": "04/06/2017" });
|
||
|
|
||
|
// #5. DATATABLES
|
||
|
|
||
|
if ($('#formValidate').length) {
|
||
|
$('#formValidate').validator();
|
||
|
}
|
||
|
if ($('#dataTable1').length) {
|
||
|
$('#dataTable1').DataTable({ buttons: ['copy', 'excel', 'pdf'] });
|
||
|
}
|
||
|
// #6. EDITABLE TABLES
|
||
|
|
||
|
if ($('#editableTable').length) {
|
||
|
$('#editableTable').editableTableWidget();
|
||
|
}
|
||
|
|
||
|
// #7. FORM STEPS FUNCTIONALITY
|
||
|
|
||
|
$('.step-trigger-btn').on('click', function () {
|
||
|
var btn_href = $(this).attr('href');
|
||
|
$('.step-trigger[href="' + btn_href + '"]').click();
|
||
|
return false;
|
||
|
});
|
||
|
|
||
|
// FORM STEP CLICK
|
||
|
$('.step-trigger').on('click', function () {
|
||
|
var prev_trigger = $(this).prev('.step-trigger');
|
||
|
if (prev_trigger.length && !prev_trigger.hasClass('active') && !prev_trigger.hasClass('complete')) return false;
|
||
|
var content_id = $(this).attr('href');
|
||
|
$(this).closest('.step-triggers').find('.step-trigger').removeClass('active');
|
||
|
$(this).prev('.step-trigger').addClass('complete');
|
||
|
$(this).addClass('active');
|
||
|
$('.step-content').removeClass('active');
|
||
|
$('.step-content' + content_id).addClass('active');
|
||
|
return false;
|
||
|
});
|
||
|
// END STEPS FUNCTIONALITY
|
||
|
|
||
|
|
||
|
// #8. SELECT 2 ACTIVATION
|
||
|
|
||
|
if ($('.select2').length) {
|
||
|
$('.select2').select2();
|
||
|
}
|
||
|
|
||
|
// #9. CKEDITOR ACTIVATION
|
||
|
|
||
|
if ($('#ckeditor1').length) {
|
||
|
CKEDITOR.replace('ckeditor1');
|
||
|
}
|
||
|
|
||
|
// #10. CHARTJS CHARTS http://www.chartjs.org/
|
||
|
|
||
|
if (typeof Chart !== 'undefined') {
|
||
|
|
||
|
var fontFamily = '"Proxima Nova W01", -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif';
|
||
|
// set defaults
|
||
|
Chart.defaults.global.defaultFontFamily = fontFamily;
|
||
|
Chart.defaults.global.tooltips.titleFontSize = 14;
|
||
|
Chart.defaults.global.tooltips.titleMarginBottom = 4;
|
||
|
Chart.defaults.global.tooltips.displayColors = false;
|
||
|
Chart.defaults.global.tooltips.bodyFontSize = 12;
|
||
|
Chart.defaults.global.tooltips.xPadding = 10;
|
||
|
Chart.defaults.global.tooltips.yPadding = 8;
|
||
|
|
||
|
// init lite line chart if element exists
|
||
|
|
||
|
if ($("#liteLineChart").length) {
|
||
|
var liteLineChart = $("#liteLineChart");
|
||
|
|
||
|
var liteLineGradient = liteLineChart[0].getContext('2d').createLinearGradient(0, 0, 0, 200);
|
||
|
liteLineGradient.addColorStop(0, 'rgba(30,22,170,0.08)');
|
||
|
liteLineGradient.addColorStop(1, 'rgba(30,22,170,0)');
|
||
|
|
||
|
// line chart data
|
||
|
var liteLineData = {
|
||
|
labels: ["January 1", "January 5", "January 10", "January 15", "January 20", "January 25"],
|
||
|
datasets: [{
|
||
|
label: "Sold",
|
||
|
fill: true,
|
||
|
lineTension: 0.4,
|
||
|
backgroundColor: liteLineGradient,
|
||
|
borderColor: "#8f1cad",
|
||
|
borderCapStyle: 'butt',
|
||
|
borderDash: [],
|
||
|
borderDashOffset: 0.0,
|
||
|
borderJoinStyle: 'miter',
|
||
|
pointBorderColor: "#fff",
|
||
|
pointBackgroundColor: "#2a2f37",
|
||
|
pointBorderWidth: 2,
|
||
|
pointHoverRadius: 6,
|
||
|
pointHoverBackgroundColor: "#FC2055",
|
||
|
pointHoverBorderColor: "#fff",
|
||
|
pointHoverBorderWidth: 2,
|
||
|
pointRadius: 4,
|
||
|
pointHitRadius: 5,
|
||
|
data: [13, 28, 19, 24, 43, 49],
|
||
|
spanGaps: false
|
||
|
}]
|
||
|
};
|
||
|
|
||
|
// line chart init
|
||
|
var myLiteLineChart = new Chart(liteLineChart, {
|
||
|
type: 'line',
|
||
|
data: liteLineData,
|
||
|
options: {
|
||
|
legend: {
|
||
|
display: false
|
||
|
},
|
||
|
scales: {
|
||
|
xAxes: [{
|
||
|
display: false,
|
||
|
ticks: {
|
||
|
fontSize: '11',
|
||
|
fontColor: '#969da5'
|
||
|
},
|
||
|
gridLines: {
|
||
|
color: 'rgba(0,0,0,0.0)',
|
||
|
zeroLineColor: 'rgba(0,0,0,0.0)'
|
||
|
}
|
||
|
}],
|
||
|
yAxes: [{
|
||
|
display: false,
|
||
|
ticks: {
|
||
|
beginAtZero: true,
|
||
|
max: 55
|
||
|
}
|
||
|
}]
|
||
|
}
|
||
|
}
|
||
|
});
|
||
|
}
|
||
|
|
||
|
// init line chart if element exists
|
||
|
if ($("#lineChart").length) {
|
||
|
var lineChart = $("#lineChart");
|
||
|
|
||
|
// line chart data
|
||
|
var lineData = {
|
||
|
labels: ["1", "5", "10", "15", "20", "25", "30", "35"],
|
||
|
datasets: [{
|
||
|
label: "Visitors Graph",
|
||
|
fill: false,
|
||
|
lineTension: 0,
|
||
|
backgroundColor: "#fff",
|
||
|
borderColor: "#6896f9",
|
||
|
borderCapStyle: 'butt',
|
||
|
borderDash: [],
|
||
|
borderDashOffset: 0.0,
|
||
|
borderJoinStyle: 'miter',
|
||
|
pointBorderColor: "#fff",
|
||
|
pointBackgroundColor: "#2a2f37",
|
||
|
pointBorderWidth: 3,
|
||
|
pointHoverRadius: 10,
|
||
|
pointHoverBackgroundColor: "#FC2055",
|
||
|
pointHoverBorderColor: "#fff",
|
||
|
pointHoverBorderWidth: 3,
|
||
|
pointRadius: 6,
|
||
|
pointHitRadius: 10,
|
||
|
data: [27, 20, 44, 24, 29, 22, 43, 52],
|
||
|
spanGaps: false
|
||
|
}]
|
||
|
};
|
||
|
|
||
|
// line chart init
|
||
|
var myLineChart = new Chart(lineChart, {
|
||
|
type: 'line',
|
||
|
data: lineData,
|
||
|
options: {
|
||
|
legend: {
|
||
|
display: false
|
||
|
},
|
||
|
scales: {
|
||
|
xAxes: [{
|
||
|
ticks: {
|
||
|
fontSize: '11',
|
||
|
fontColor: '#969da5'
|
||
|
},
|
||
|
gridLines: {
|
||
|
color: 'rgba(0,0,0,0.05)',
|
||
|
zeroLineColor: 'rgba(0,0,0,0.05)'
|
||
|
}
|
||
|
}],
|
||
|
yAxes: [{
|
||
|
display: false,
|
||
|
ticks: {
|
||
|
beginAtZero: true,
|
||
|
max: 65
|
||
|
}
|
||
|
}]
|
||
|
}
|
||
|
}
|
||
|
});
|
||
|
}
|
||
|
|
||
|
// init donut chart if element exists
|
||
|
if ($("#barChart1").length) {
|
||
|
var barChart1 = $("#barChart1");
|
||
|
var barData1 = {
|
||
|
labels: ["January", "February", "March", "April", "May", "June"],
|
||
|
datasets: [{
|
||
|
label: "My First dataset",
|
||
|
backgroundColor: ["#5797FC", "#629FFF", "#6BA4FE", "#74AAFF", "#7AAEFF", '#85B4FF'],
|
||
|
borderColor: ['rgba(255,99,132,0)', 'rgba(54, 162, 235, 0)', 'rgba(255, 206, 86, 0)', 'rgba(75, 192, 192, 0)', 'rgba(153, 102, 255, 0)', 'rgba(255, 159, 64, 0)'],
|
||
|
borderWidth: 1,
|
||
|
data: [24, 42, 18, 34, 56, 28]
|
||
|
}]
|
||
|
};
|
||
|
// -----------------
|
||
|
// init bar chart
|
||
|
// -----------------
|
||
|
new Chart(barChart1, {
|
||
|
type: 'bar',
|
||
|
data: barData1,
|
||
|
options: {
|
||
|
scales: {
|
||
|
xAxes: [{
|
||
|
display: false,
|
||
|
ticks: {
|
||
|
fontSize: '11',
|
||
|
fontColor: '#969da5'
|
||
|
},
|
||
|
gridLines: {
|
||
|
color: 'rgba(0,0,0,0.05)',
|
||
|
zeroLineColor: 'rgba(0,0,0,0.05)'
|
||
|
}
|
||
|
}],
|
||
|
yAxes: [{
|
||
|
ticks: {
|
||
|
beginAtZero: true
|
||
|
},
|
||
|
gridLines: {
|
||
|
color: 'rgba(0,0,0,0.05)',
|
||
|
zeroLineColor: '#6896f9'
|
||
|
}
|
||
|
}]
|
||
|
},
|
||
|
legend: {
|
||
|
display: false
|
||
|
},
|
||
|
animation: {
|
||
|
animateScale: true
|
||
|
}
|
||
|
}
|
||
|
});
|
||
|
}
|
||
|
|
||
|
// init pie chart if element exists
|
||
|
if ($("#pieChart1").length) {
|
||
|
var pieChart1 = $("#pieChart1");
|
||
|
|
||
|
// pie chart data
|
||
|
var pieData1 = {
|
||
|
labels: ["Red", "Blue", "Yellow", "Green", "Purple"],
|
||
|
datasets: [{
|
||
|
data: [300, 50, 100, 30, 70],
|
||
|
backgroundColor: ["#5797fc", "#7e6fff", "#4ecc48", "#ffcc29", "#f37070"],
|
||
|
hoverBackgroundColor: ["#5797fc", "#7e6fff", "#4ecc48", "#ffcc29", "#f37070"],
|
||
|
borderWidth: 0
|
||
|
}]
|
||
|
};
|
||
|
|
||
|
// -----------------
|
||
|
// init pie chart
|
||
|
// -----------------
|
||
|
new Chart(pieChart1, {
|
||
|
type: 'pie',
|
||
|
data: pieData1,
|
||
|
options: {
|
||
|
legend: {
|
||
|
position: 'bottom',
|
||
|
labels: {
|
||
|
boxWidth: 15,
|
||
|
fontColor: '#3e4b5b'
|
||
|
}
|
||
|
},
|
||
|
animation: {
|
||
|
animateScale: true
|
||
|
}
|
||
|
}
|
||
|
});
|
||
|
}
|
||
|
|
||
|
// -----------------
|
||
|
// init donut chart if element exists
|
||
|
// -----------------
|
||
|
if ($("#donutChart").length) {
|
||
|
var donutChart = $("#donutChart");
|
||
|
|
||
|
// donut chart data
|
||
|
var data = {
|
||
|
labels: ["Red", "Blue", "Yellow", "Green", "Purple"],
|
||
|
datasets: [{
|
||
|
data: [300, 50, 100, 30, 70],
|
||
|
backgroundColor: ["#5797fc", "#7e6fff", "#4ecc48", "#ffcc29", "#f37070"],
|
||
|
hoverBackgroundColor: ["#5797fc", "#7e6fff", "#4ecc48", "#ffcc29", "#f37070"],
|
||
|
borderWidth: 0
|
||
|
}]
|
||
|
};
|
||
|
|
||
|
// -----------------
|
||
|
// init donut chart
|
||
|
// -----------------
|
||
|
new Chart(donutChart, {
|
||
|
type: 'doughnut',
|
||
|
data: data,
|
||
|
options: {
|
||
|
legend: {
|
||
|
display: false
|
||
|
},
|
||
|
animation: {
|
||
|
animateScale: true
|
||
|
},
|
||
|
cutoutPercentage: 80
|
||
|
}
|
||
|
});
|
||
|
}
|
||
|
}
|
||
|
|
||
|
// #11. MENU RELATED STUFF
|
||
|
|
||
|
// INIT MOBILE MENU TRIGGER BUTTON
|
||
|
$('.mobile-menu-trigger').on('click', function () {
|
||
|
$('.menu-mobile .menu-and-user').slideToggle(200, 'swing');
|
||
|
return false;
|
||
|
});
|
||
|
|
||
|
// INIT MENU TO ACTIVATE ON HOVER
|
||
|
var menu_timer;
|
||
|
$('.menu-activated-on-hover ul.main-menu > li.has-sub-menu').mouseenter(function () {
|
||
|
var $elem = $(this);
|
||
|
clearTimeout(menu_timer);
|
||
|
$elem.closest('ul').addClass('has-active').find('> li').removeClass('active');
|
||
|
$elem.addClass('active');
|
||
|
});
|
||
|
$('.menu-activated-on-hover ul.main-menu > li.has-sub-menu').mouseleave(function () {
|
||
|
var $elem = $(this);
|
||
|
menu_timer = setTimeout(function () {
|
||
|
$elem.removeClass('active').closest('ul').removeClass('has-active');
|
||
|
}, 200);
|
||
|
});
|
||
|
|
||
|
// INIT MENU TO ACTIVATE ON CLICK
|
||
|
$('.menu-activated-on-click li.has-sub-menu > a').on('click', function (event) {
|
||
|
var $elem = $(this).closest('li');
|
||
|
if ($elem.hasClass('active')) {
|
||
|
$elem.removeClass('active');
|
||
|
} else {
|
||
|
$elem.closest('ul').find('li.active').removeClass('active');
|
||
|
$elem.addClass('active');
|
||
|
}
|
||
|
return false;
|
||
|
});
|
||
|
|
||
|
// #12. CONTENT SIDE PANEL TOGGLER
|
||
|
|
||
|
$('.content-panel-toggler, .content-panel-close, .content-panel-open').on('click', function () {
|
||
|
$('.all-wrapper').toggleClass('content-panel-active');
|
||
|
});
|
||
|
|
||
|
// #13. EMAIL APP
|
||
|
|
||
|
$('.more-messages').on('click', function () {
|
||
|
$(this).hide();
|
||
|
$('.older-pack').slideDown(100);
|
||
|
$('.aec-full-message-w.show-pack').removeClass('show-pack');
|
||
|
return false;
|
||
|
});
|
||
|
|
||
|
// CKEDITOR ACTIVATION FOR MAIL REPLY
|
||
|
|
||
|
if ($('#ckeditorEmail').length) {
|
||
|
CKEDITOR.config.uiColor = '#ffffff';
|
||
|
CKEDITOR.config.toolbar = [['Bold', 'Italic', '-', 'NumberedList', 'BulletedList', '-', 'Link', 'Unlink', '-', 'About']];
|
||
|
CKEDITOR.config.height = 110;
|
||
|
CKEDITOR.replace('ckeditor1');
|
||
|
}
|
||
|
|
||
|
// EMAIL SIDEBAR MENU TOGGLER
|
||
|
$('.ae-side-menu-toggler').on('click', function () {
|
||
|
$('.app-email-w').toggleClass('compact-side-menu');
|
||
|
});
|
||
|
|
||
|
// EMAIL MOBILE SHOW MESSAGE
|
||
|
$('.ae-item').on('click', function () {
|
||
|
$('.app-email-w').addClass('forse-show-content');
|
||
|
});
|
||
|
|
||
|
if ($('.app-email-w').length) {
|
||
|
if (is_display_type('phone') || is_display_type('tablet')) {
|
||
|
$('.app-email-w').addClass('compact-side-menu');
|
||
|
}
|
||
|
}
|
||
|
|
||
|
// #14. FULL CHAT APP
|
||
|
function add_full_chat_message($input) {
|
||
|
$('.chat-content').append('<div class="chat-message self"><div class="chat-message-content-w"><div class="chat-message-content">' + $input.val() + '</div></div><div class="chat-message-date">1:23pm</div><div class="chat-message-avatar"><img alt="" src="img/avatar1.jpg"></div></div>');
|
||
|
$input.val('');
|
||
|
var $messages_w = $('.chat-content-w');
|
||
|
$messages_w.scrollTop($messages_w.prop("scrollHeight"));
|
||
|
$messages_w.perfectScrollbar('update');
|
||
|
}
|
||
|
|
||
|
$('.chat-content-w').perfectScrollbar({ wheelPropagation: true });
|
||
|
|
||
|
// #15. CRM PIPELINE
|
||
|
if ($('.pipeline').length) {
|
||
|
// INIT DRAG AND DROP FOR PIPELINE ITEMS
|
||
|
var dragulaObj = dragula($('.pipeline-body').toArray(), {}).on('drag', function () {}).on('drop', function (el) {}).on('over', function (el, container) {
|
||
|
$(container).closest('.pipeline-body').addClass('over');
|
||
|
}).on('out', function (el, container, source) {
|
||
|
|
||
|
var new_pipeline_body = $(container).closest('.pipeline-body');
|
||
|
new_pipeline_body.removeClass('over');
|
||
|
var old_pipeline_body = $(source).closest('.pipeline-body');
|
||
|
});
|
||
|
}
|
||
|
|
||
|
// #16. OUR OWN CUSTOM DROPDOWNS
|
||
|
$('.os-dropdown-trigger').on('mouseenter', function () {
|
||
|
$(this).addClass('over');
|
||
|
});
|
||
|
$('.os-dropdown-trigger').on('mouseleave', function () {
|
||
|
$(this).removeClass('over');
|
||
|
});
|
||
|
|
||
|
// #17. BOOTSTRAP RELATED JS ACTIVATIONS
|
||
|
|
||
|
// - Activate tooltips
|
||
|
$('[data-toggle="tooltip"]').tooltip();
|
||
|
});
|