patashala/style/cms/js/main.js

552 lines
16 KiB
JavaScript
Raw Normal View History

'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();
});