Add project files.
This commit is contained in:
52
Content/Panel/js/pages/features/base/dropdown.js
Normal file
52
Content/Panel/js/pages/features/base/dropdown.js
Normal file
@ -0,0 +1,52 @@
|
||||
"use strict";
|
||||
|
||||
// Class definition
|
||||
|
||||
var KTDropdownDemo = function () {
|
||||
|
||||
// Private functions
|
||||
|
||||
// basic demo
|
||||
var demo1 = function () {
|
||||
var output = $('#kt_dropdown_api_output');
|
||||
var dropdown1 = new KTDropdown('kt_dropdown_api_1');
|
||||
var dropdown2 = new KTDropdown('kt_dropdown_api_2');
|
||||
|
||||
dropdown1.on('afterShow', function(dropdown) {
|
||||
output.append('<p>Dropdown 1: afterShow event fired</p>');
|
||||
});
|
||||
dropdown1.on('beforeShow', function(dropdown) {
|
||||
output.append('<p>Dropdown 1: beforeShow event fired</p>');
|
||||
});
|
||||
dropdown1.on('afterHide', function(dropdown) {
|
||||
output.append('<p>Dropdown 1: afterHide event fired</p>');
|
||||
});
|
||||
dropdown1.on('beforeHide', function(dropdown) {
|
||||
output.append('<p>Dropdown 1: beforeHide event fired</p>');
|
||||
});
|
||||
|
||||
dropdown2.on('afterShow', function(dropdown) {
|
||||
output.append('<p>Dropdown 2: afterShow event fired</p>');
|
||||
});
|
||||
dropdown2.on('beforeShow', function(dropdown) {
|
||||
output.append('<p>Dropdown 2: beforeShow event fired</p>');
|
||||
});
|
||||
dropdown2.on('afterHide', function(dropdown) {
|
||||
output.append('<p>Dropdown 2: afterHide event fired</p>');
|
||||
});
|
||||
dropdown2.on('beforeHide', function(dropdown) {
|
||||
output.append('<p>Dropdown 2: beforeHide event fired</p>');
|
||||
});
|
||||
}
|
||||
|
||||
return {
|
||||
// public functions
|
||||
init: function() {
|
||||
demo1();
|
||||
}
|
||||
};
|
||||
}();
|
||||
|
||||
jQuery(document).ready(function() {
|
||||
KTDropdownDemo.init();
|
||||
});
|
||||
182
Content/Panel/js/pages/features/calendar/background-events.js
Normal file
182
Content/Panel/js/pages/features/calendar/background-events.js
Normal file
@ -0,0 +1,182 @@
|
||||
"use strict";
|
||||
|
||||
var KTCalendarBackgroundEvents = function() {
|
||||
|
||||
return {
|
||||
//main function to initiate the module
|
||||
init: function() {
|
||||
var todayDate = moment().startOf('day');
|
||||
var YM = todayDate.format('YYYY-MM');
|
||||
var YESTERDAY = todayDate.clone().subtract(1, 'day').format('YYYY-MM-DD');
|
||||
var TODAY = todayDate.format('YYYY-MM-DD');
|
||||
var TOMORROW = todayDate.clone().add(1, 'day').format('YYYY-MM-DD');
|
||||
|
||||
var calendarEl = document.getElementById('kt_calendar');
|
||||
var calendar = new FullCalendar.Calendar(calendarEl, {
|
||||
plugins: [ 'interaction', 'dayGrid', 'timeGrid', 'list' ],
|
||||
|
||||
isRTL: KTUtil.isRTL(),
|
||||
header: {
|
||||
left: 'prev,next today',
|
||||
center: 'title',
|
||||
right: 'dayGridMonth,timeGridWeek,timeGridDay'
|
||||
},
|
||||
|
||||
height: 800,
|
||||
contentHeight: 780,
|
||||
aspectRatio: 3, // see: https://fullcalendar.io/docs/aspectRatio
|
||||
|
||||
nowIndicator: true,
|
||||
now: TODAY + 'T09:25:00', // just for demo
|
||||
|
||||
views: {
|
||||
dayGridMonth: { buttonText: 'ماه' },
|
||||
timeGridWeek: { buttonText: 'هفته' },
|
||||
timeGridDay: { buttonText: 'روز' }
|
||||
},
|
||||
|
||||
defaultView: 'dayGridMonth',
|
||||
defaultDate: TODAY,
|
||||
|
||||
editable: true,
|
||||
eventLimit: true, // allow "more" link when too many events
|
||||
navLinks: true,
|
||||
businessHours: true, // display business hours
|
||||
events: [
|
||||
{
|
||||
title: 'رویداد یک روز کامل',
|
||||
start: YM + '-01',
|
||||
description: 'این یک متن تستی است برای توضیحات',
|
||||
className: "fc-event-danger fc-event-solid-warning",
|
||||
color: KTApp.getSettings()['colors']['theme']['base']['info'],
|
||||
rendering: 'background'
|
||||
},
|
||||
{
|
||||
title: 'گزارش نویسی',
|
||||
start: YM + '-14T13:30:00',
|
||||
description: 'این یک متن تستی است برای توضیحات',
|
||||
end: YM + '-14',
|
||||
className: "fc-event-success"
|
||||
},
|
||||
{
|
||||
title: 'سفر کاری',
|
||||
start: YM + '-02',
|
||||
description: 'این یک متن تستی است برای توضیحات',
|
||||
end: YM + '-03',
|
||||
className: "fc-event-primary"
|
||||
},
|
||||
{
|
||||
title: 'انتشار محصول',
|
||||
start: YM + '-03',
|
||||
description: 'این یک متن تستی است برای توضیحات',
|
||||
end: YM + '-05',
|
||||
className: "fc-event-light fc-event-solid-primary"
|
||||
},
|
||||
{
|
||||
title: 'شام',
|
||||
start: YM + '-12',
|
||||
description: 'این یک متن تستی است برای توضیحات',
|
||||
end: YM + '-10',
|
||||
color: KTApp.getSettings()['colors']['theme']['base']['info'],
|
||||
rendering: 'background'
|
||||
},
|
||||
{
|
||||
id: 999,
|
||||
title: 'تکرار رویداد',
|
||||
start: YM + '-09T16:00:00',
|
||||
description: 'این یک متن تستی است برای توضیحات',
|
||||
className: "fc-event-danger"
|
||||
},
|
||||
{
|
||||
id: 1000,
|
||||
title: 'تکرار رویداد',
|
||||
description: 'این یک متن تستی است برای توضیحات',
|
||||
start: YM + '-16T16:00:00',
|
||||
color: KTApp.getSettings()['colors']['theme']['base']['warning'],
|
||||
rendering: 'background'
|
||||
},
|
||||
{
|
||||
title: 'کنفرانس',
|
||||
start: YESTERDAY,
|
||||
end: TOMORROW,
|
||||
description: 'این یک متن تستی است برای توضیحات',
|
||||
className: "fc-event-primary"
|
||||
},
|
||||
{
|
||||
title: 'ملاقات',
|
||||
start: TODAY + 'T10:30:00',
|
||||
end: TODAY + 'T12:30:00',
|
||||
description: 'این یک متن تستی است برای توضیحات',
|
||||
color: KTApp.getSettings()['colors']['theme']['base']['danger'],
|
||||
rendering: 'background'
|
||||
},
|
||||
{
|
||||
title: 'ناهار',
|
||||
start: TODAY + 'T12:00:00',
|
||||
className: "fc-event-info",
|
||||
description: 'این یک متن تستی است برای توضیحات',
|
||||
},
|
||||
{
|
||||
title: 'ملاقات',
|
||||
start: TODAY + 'T14:30:00',
|
||||
className: "fc-event-warning",
|
||||
description: 'این یک متن تستی است برای توضیحات',
|
||||
},
|
||||
{
|
||||
title: 'ساعت تولد',
|
||||
start: TODAY + 'T17:30:00',
|
||||
className: "fc-event-info",
|
||||
description: 'این یک متن تستی است برای توضیحات',
|
||||
color: KTApp.getSettings()['colors']['theme']['base']['danger'],
|
||||
rendering: 'background'
|
||||
},
|
||||
{
|
||||
title: 'شام',
|
||||
start: TOMORROW + 'T05:00:00',
|
||||
className: "fc-event-solid-danger fc-event-light",
|
||||
description: 'این یک متن تستی است برای توضیحات',
|
||||
},
|
||||
{
|
||||
title: 'جشن تولد',
|
||||
start: TOMORROW + 'T07:00:00',
|
||||
className: "fc-event-primary",
|
||||
description: 'این یک متن تستی است برای توضیحات',
|
||||
color: KTApp.getSettings()['colors']['theme']['base']['danger'],
|
||||
rendering: 'background'
|
||||
},
|
||||
{
|
||||
title: 'کلیک روی گوگل',
|
||||
url: 'http://google.com/',
|
||||
start: YM + '-28',
|
||||
className: "fc-event-solid-info fc-event-light",
|
||||
description: 'این یک متن تستی است برای توضیحات',
|
||||
color: KTApp.getSettings()['colors']['theme']['base']['success'],
|
||||
rendering: 'background'
|
||||
}
|
||||
],
|
||||
|
||||
eventRender: function(info) {
|
||||
var element = $(info.el);
|
||||
|
||||
if (info.event.extendedProps && info.event.extendedProps.description) {
|
||||
if (element.hasClass('fc-day-grid-event')) {
|
||||
element.data('content', info.event.extendedProps.description);
|
||||
element.data('placement', 'top');
|
||||
KTApp.initPopover(element);
|
||||
} else if (element.hasClass('fc-time-grid-event')) {
|
||||
element.find('.fc-title').append('<div class="fc-description">' + info.event.extendedProps.description + '</div>');
|
||||
} else if (element.find('.fc-list-item-title').lenght !== 0) {
|
||||
element.find('.fc-list-item-title').append('<div class="fc-description">' + info.event.extendedProps.description + '</div>');
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
calendar.render();
|
||||
}
|
||||
};
|
||||
}();
|
||||
|
||||
jQuery(document).ready(function() {
|
||||
KTCalendarBackgroundEvents.init();
|
||||
});
|
||||
169
Content/Panel/js/pages/features/calendar/basic.js
Normal file
169
Content/Panel/js/pages/features/calendar/basic.js
Normal file
@ -0,0 +1,169 @@
|
||||
"use strict";
|
||||
|
||||
var KTCalendarBasic = function() {
|
||||
|
||||
return {
|
||||
//main function to initiate the module
|
||||
init: function() {
|
||||
var todayDate = moment().startOf('day');
|
||||
var YM = todayDate.format('YYYY-MM');
|
||||
var YESTERDAY = todayDate.clone().subtract(1, 'day').format('YYYY-MM-DD');
|
||||
var TODAY = todayDate.format('YYYY-MM-DD');
|
||||
var TOMORROW = todayDate.clone().add(1, 'day').format('YYYY-MM-DD');
|
||||
|
||||
var calendarEl = document.getElementById('kt_calendar');
|
||||
var calendar = new FullCalendar.Calendar(calendarEl, {
|
||||
plugins: [ 'bootstrap', 'interaction', 'dayGrid', 'timeGrid', 'list' ],
|
||||
themeSystem: 'bootstrap',
|
||||
|
||||
isRTL: KTUtil.isRTL(),
|
||||
|
||||
header: {
|
||||
left: 'prev,next today',
|
||||
center: 'title',
|
||||
right: 'dayGridMonth,timeGridWeek,timeGridDay'
|
||||
},
|
||||
|
||||
height: 800,
|
||||
contentHeight: 780,
|
||||
aspectRatio: 3, // see: https://fullcalendar.io/docs/aspectRatio
|
||||
|
||||
nowIndicator: true,
|
||||
now: TODAY + 'T09:25:00', // just for demo
|
||||
|
||||
views: {
|
||||
dayGridMonth: { buttonText: 'ماه' },
|
||||
timeGridWeek: { buttonText: 'هفته' },
|
||||
timeGridDay: { buttonText: 'روز' }
|
||||
},
|
||||
|
||||
defaultView: 'dayGridMonth',
|
||||
defaultDate: TODAY,
|
||||
|
||||
editable: true,
|
||||
eventLimit: true, // allow "more" link when too many events
|
||||
navLinks: true,
|
||||
events: [
|
||||
{
|
||||
title: 'رویداد یک روز کامل',
|
||||
start: YM + '-01',
|
||||
description: 'این یک متن تستی است برای توضیحات',
|
||||
className: "fc-event-danger fc-event-solid-warning"
|
||||
},
|
||||
{
|
||||
title: 'گزارش نویسی',
|
||||
start: YM + '-14T13:30:00',
|
||||
description: 'این یک متن تستی است برای توضیحات',
|
||||
end: YM + '-14',
|
||||
className: "fc-event-success"
|
||||
},
|
||||
{
|
||||
title: 'سفر کاری',
|
||||
start: YM + '-02',
|
||||
description: 'این یک متن تستی است برای توضیحات',
|
||||
end: YM + '-03',
|
||||
className: "fc-event-primary"
|
||||
},
|
||||
{
|
||||
title: 'انتشار محصول',
|
||||
start: YM + '-03',
|
||||
description: 'این یک متن تستی است برای توضیحات',
|
||||
end: YM + '-05',
|
||||
className: "fc-event-light fc-event-solid-primary"
|
||||
},
|
||||
{
|
||||
title: 'شام',
|
||||
start: YM + '-12',
|
||||
description: 'این یک متن تستی است برای توضیحات',
|
||||
end: YM + '-10'
|
||||
},
|
||||
{
|
||||
id: 999,
|
||||
title: 'تکرار رویداد',
|
||||
start: YM + '-09T16:00:00',
|
||||
description: 'این یک متن تستی است برای توضیحات',
|
||||
className: "fc-event-danger"
|
||||
},
|
||||
{
|
||||
id: 1000,
|
||||
title: 'تکرار رویداد',
|
||||
description: 'این یک متن تستی است برای توضیحات',
|
||||
start: YM + '-16T16:00:00'
|
||||
},
|
||||
{
|
||||
title: 'کنفرانس',
|
||||
start: YESTERDAY,
|
||||
end: TOMORROW,
|
||||
description: 'این یک متن تستی است برای توضیحات',
|
||||
className: "fc-event-primary"
|
||||
},
|
||||
{
|
||||
title: 'ملاقات',
|
||||
start: TODAY + 'T10:30:00',
|
||||
end: TODAY + 'T12:30:00',
|
||||
description: 'این یک متن تستی است برای توضیحات',
|
||||
},
|
||||
{
|
||||
title: 'ناهار',
|
||||
start: TODAY + 'T12:00:00',
|
||||
className: "fc-event-info",
|
||||
description: 'این یک متن تستی است برای توضیحات',
|
||||
},
|
||||
{
|
||||
title: 'ملاقات',
|
||||
start: TODAY + 'T14:30:00',
|
||||
className: "fc-event-warning",
|
||||
description: 'این یک متن تستی است برای توضیحات',
|
||||
},
|
||||
{
|
||||
title: 'ساعت تولد',
|
||||
start: TODAY + 'T17:30:00',
|
||||
className: "fc-event-info",
|
||||
description: 'این یک متن تستی است برای توضیحات',
|
||||
},
|
||||
{
|
||||
title: 'شام',
|
||||
start: TOMORROW + 'T05:00:00',
|
||||
className: "fc-event-solid-danger fc-event-light",
|
||||
description: 'این یک متن تستی است برای توضیحات',
|
||||
},
|
||||
{
|
||||
title: 'جشن تولد',
|
||||
start: TOMORROW + 'T07:00:00',
|
||||
className: "fc-event-primary",
|
||||
description: 'این یک متن تستی است برای توضیحات',
|
||||
},
|
||||
{
|
||||
title: 'کلیک روی گوگل',
|
||||
url: 'http://google.com/',
|
||||
start: YM + '-28',
|
||||
className: "fc-event-solid-info fc-event-light",
|
||||
description: 'این یک متن تستی است برای توضیحات',
|
||||
}
|
||||
],
|
||||
|
||||
eventRender: function(info) {
|
||||
var element = $(info.el);
|
||||
|
||||
if (info.event.extendedProps && info.event.extendedProps.description) {
|
||||
if (element.hasClass('fc-day-grid-event')) {
|
||||
element.data('content', info.event.extendedProps.description);
|
||||
element.data('placement', 'top');
|
||||
KTApp.initPopover(element);
|
||||
} else if (element.hasClass('fc-time-grid-event')) {
|
||||
element.find('.fc-title').append('<div class="fc-description">' + info.event.extendedProps.description + '</div>');
|
||||
} else if (element.find('.fc-list-item-title').lenght !== 0) {
|
||||
element.find('.fc-list-item-title').append('<div class="fc-description">' + info.event.extendedProps.description + '</div>');
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
calendar.render();
|
||||
}
|
||||
};
|
||||
}();
|
||||
|
||||
jQuery(document).ready(function() {
|
||||
KTCalendarBasic.init();
|
||||
});
|
||||
204
Content/Panel/js/pages/features/calendar/external-events.js
Normal file
204
Content/Panel/js/pages/features/calendar/external-events.js
Normal file
@ -0,0 +1,204 @@
|
||||
"use strict";
|
||||
|
||||
var KTCalendarExternalEvents = function() {
|
||||
|
||||
var initExternalEvents = function() {
|
||||
$('#kt_calendar_external_events .fc-draggable-handle').each(function() {
|
||||
// store data so the calendar knows to render an event upon drop
|
||||
$(this).data('event', {
|
||||
title: $.trim($(this).text()), // use the element's text as the event title
|
||||
stick: true, // maintain when user navigates (see docs on the renderEvent method)
|
||||
classNames: [$(this).data('color')],
|
||||
description: 'Lorem ipsum dolor eius mod tempor labore'
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
var initCalendar = function() {
|
||||
var todayDate = moment().startOf('day');
|
||||
var YM = todayDate.format('YYYY-MM');
|
||||
var YESTERDAY = todayDate.clone().subtract(1, 'day').format('YYYY-MM-DD');
|
||||
var TODAY = todayDate.format('YYYY-MM-DD');
|
||||
var TOMORROW = todayDate.clone().add(1, 'day').format('YYYY-MM-DD');
|
||||
|
||||
var calendarEl = document.getElementById('kt_calendar');
|
||||
var containerEl = document.getElementById('kt_calendar_external_events');
|
||||
|
||||
var Draggable = FullCalendarInteraction.Draggable;
|
||||
|
||||
new Draggable(containerEl, {
|
||||
itemSelector: '.fc-draggable-handle',
|
||||
eventData: function(eventEl) {
|
||||
return $(eventEl).data('event');
|
||||
}
|
||||
});
|
||||
|
||||
var calendar = new FullCalendar.Calendar(calendarEl, {
|
||||
plugins: [ 'interaction', 'dayGrid', 'timeGrid', 'list' ],
|
||||
|
||||
isRTL: KTUtil.isRTL(),
|
||||
header: {
|
||||
left: 'prev,next today',
|
||||
center: 'title',
|
||||
right: 'dayGridMonth,timeGridWeek,timeGridDay'
|
||||
},
|
||||
|
||||
height: 800,
|
||||
contentHeight: 780,
|
||||
aspectRatio: 3, // see: https://fullcalendar.io/docs/aspectRatio
|
||||
|
||||
nowIndicator: true,
|
||||
now: TODAY + 'T09:25:00', // just for demo
|
||||
|
||||
views: {
|
||||
dayGridMonth: { buttonText: 'ماه' },
|
||||
timeGridWeek: { buttonText: 'هفته' },
|
||||
timeGridDay: { buttonText: 'روز' }
|
||||
},
|
||||
|
||||
defaultView: 'dayGridMonth',
|
||||
defaultDate: TODAY,
|
||||
|
||||
droppable: true, // this allows things to be dropped onto the calendar
|
||||
editable: true,
|
||||
eventLimit: true, // allow "more" link when too many events
|
||||
navLinks: true,
|
||||
events: [
|
||||
{
|
||||
title: 'رویداد یک روز کامل',
|
||||
start: YM + '-01',
|
||||
description: 'این یک متن تستی است برای توضیحات',
|
||||
className: "fc-event-danger fc-event-solid-warning"
|
||||
},
|
||||
{
|
||||
title: 'گزارش نویسی',
|
||||
start: YM + '-14T13:30:00',
|
||||
description: 'این یک متن تستی است برای توضیحات',
|
||||
end: YM + '-14',
|
||||
className: "fc-event-success"
|
||||
},
|
||||
{
|
||||
title: 'سفر کاری',
|
||||
start: YM + '-02',
|
||||
description: 'این یک متن تستی است برای توضیحات',
|
||||
end: YM + '-03',
|
||||
className: "fc-event-primary"
|
||||
},
|
||||
{
|
||||
title: 'انتشار محصول',
|
||||
start: YM + '-03',
|
||||
description: 'این یک متن تستی است برای توضیحات',
|
||||
end: YM + '-05',
|
||||
className: "fc-event-light fc-event-solid-primary"
|
||||
},
|
||||
{
|
||||
title: 'شام',
|
||||
start: YM + '-12',
|
||||
description: 'این یک متن تستی است برای توضیحات',
|
||||
end: YM + '-10'
|
||||
},
|
||||
{
|
||||
id: 999,
|
||||
title: 'تکرار رویداد',
|
||||
start: YM + '-09T16:00:00',
|
||||
description: 'این یک متن تستی است برای توضیحات',
|
||||
className: "fc-event-danger"
|
||||
},
|
||||
{
|
||||
id: 1000,
|
||||
title: 'تکرار رویداد',
|
||||
description: 'این یک متن تستی است برای توضیحات',
|
||||
start: YM + '-16T16:00:00'
|
||||
},
|
||||
{
|
||||
title: 'کنفرانس',
|
||||
start: YESTERDAY,
|
||||
end: TOMORROW,
|
||||
description: 'این یک متن تستی است برای توضیحات',
|
||||
className: "fc-event-primary"
|
||||
},
|
||||
{
|
||||
title: 'ملاقات',
|
||||
start: TODAY + 'T10:30:00',
|
||||
end: TODAY + 'T12:30:00',
|
||||
description: 'این یک متن تستی است برای توضیحات',
|
||||
},
|
||||
{
|
||||
title: 'ناهار',
|
||||
start: TODAY + 'T12:00:00',
|
||||
className: "fc-event-info",
|
||||
description: 'این یک متن تستی است برای توضیحات',
|
||||
},
|
||||
{
|
||||
title: 'ملاقات',
|
||||
start: TODAY + 'T14:30:00',
|
||||
className: "fc-event-warning",
|
||||
description: 'این یک متن تستی است برای توضیحات',
|
||||
},
|
||||
{
|
||||
title: 'ساعت تولد',
|
||||
start: TODAY + 'T17:30:00',
|
||||
className: "fc-event-info",
|
||||
description: 'این یک متن تستی است برای توضیحات',
|
||||
},
|
||||
{
|
||||
title: 'شام',
|
||||
start: TOMORROW + 'T05:00:00',
|
||||
className: "fc-event-solid-danger fc-event-light",
|
||||
description: 'این یک متن تستی است برای توضیحات',
|
||||
},
|
||||
{
|
||||
title: 'جشن تولد',
|
||||
start: TOMORROW + 'T07:00:00',
|
||||
className: "fc-event-primary",
|
||||
description: 'این یک متن تستی است برای توضیحات',
|
||||
},
|
||||
{
|
||||
title: 'کلیک روی گوگل',
|
||||
url: 'http://google.com/',
|
||||
start: YM + '-28',
|
||||
className: "fc-event-solid-info fc-event-light",
|
||||
description: 'این یک متن تستی است برای توضیحات',
|
||||
}
|
||||
],
|
||||
|
||||
drop: function(arg) {
|
||||
// is the "remove after drop" checkbox checked?
|
||||
if ($('#kt_calendar_external_events_remove').is(':checked')) {
|
||||
// if so, remove the element from the "Draggable Events" list
|
||||
$(arg.draggedEl).remove();
|
||||
}
|
||||
},
|
||||
|
||||
eventRender: function(info) {
|
||||
var element = $(info.el);
|
||||
|
||||
if (info.event.extendedProps && info.event.extendedProps.description) {
|
||||
if (element.hasClass('fc-day-grid-event')) {
|
||||
element.data('content', info.event.extendedProps.description);
|
||||
element.data('placement', 'top');
|
||||
KTApp.initPopover(element);
|
||||
} else if (element.hasClass('fc-time-grid-event')) {
|
||||
element.find('.fc-title').append('<div class="fc-description">' + info.event.extendedProps.description + '</div>');
|
||||
} else if (element.find('.fc-list-item-title').lenght !== 0) {
|
||||
element.find('.fc-list-item-title').append('<div class="fc-description">' + info.event.extendedProps.description + '</div>');
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
calendar.render();
|
||||
}
|
||||
|
||||
return {
|
||||
//main function to initiate the module
|
||||
init: function() {
|
||||
initExternalEvents();
|
||||
initCalendar();
|
||||
}
|
||||
};
|
||||
}();
|
||||
|
||||
jQuery(document).ready(function() {
|
||||
KTCalendarExternalEvents.init();
|
||||
});
|
||||
87
Content/Panel/js/pages/features/calendar/google.js
Normal file
87
Content/Panel/js/pages/features/calendar/google.js
Normal file
@ -0,0 +1,87 @@
|
||||
"use strict";
|
||||
|
||||
var KTCalendarGoogle = function() {
|
||||
|
||||
return {
|
||||
//main function to initiate the module
|
||||
init: function() {
|
||||
var calendarEl = document.getElementById('kt_calendar');
|
||||
var calendar = new FullCalendar.Calendar(calendarEl, {
|
||||
plugins: [ 'interaction', 'dayGrid', 'timeGrid', 'list', 'googleCalendar' ],
|
||||
|
||||
isRTL: KTUtil.isRTL(),
|
||||
header: {
|
||||
left: 'prev,next today',
|
||||
center: 'title',
|
||||
right: 'dayGridMonth,timeGridWeek,timeGridDay'
|
||||
},
|
||||
|
||||
displayEventTime: false, // don't show the time column in list view
|
||||
|
||||
height: 800,
|
||||
contentHeight: 780,
|
||||
aspectRatio: 3, // see: https://fullcalendar.io/docs/aspectRatio
|
||||
|
||||
views: {
|
||||
dayGridMonth: { buttonText: 'ماه' },
|
||||
timeGridWeek: { buttonText: 'هفته' },
|
||||
timeGridDay: { buttonText: 'روز' }
|
||||
},
|
||||
|
||||
defaultView: 'dayGridMonth',
|
||||
|
||||
editable: true,
|
||||
eventLimit: true, // allow "more" link when too many events
|
||||
navLinks: true,
|
||||
|
||||
// THIS KEY WON'T WORK IN PRODUCTION!!!
|
||||
// To make your own Google API key, follow the directions here:
|
||||
// http://fullcalendar.io/docs/google_calendar/
|
||||
googleCalendarApiKey: 'AIzaSyDcnW6WejpTOCffshGDDb4neIrXVUA1EAE',
|
||||
|
||||
// US Holidays
|
||||
events: 'en.usa#holiday@group.v.calendar.google.com',
|
||||
|
||||
eventClick: function(event) {
|
||||
// opens events in a popup window
|
||||
window.open(event.url, 'gcalevent', 'width=700,height=600');
|
||||
return false;
|
||||
},
|
||||
|
||||
loading: function(bool) {
|
||||
return;
|
||||
|
||||
/*
|
||||
KTApp.block(portlet.getSelf(), {
|
||||
type: 'loader',
|
||||
state: 'success',
|
||||
message: 'لطفا صبر کنید...'
|
||||
});
|
||||
*/
|
||||
},
|
||||
|
||||
eventRender: function(info) {
|
||||
var element = $(info.el);
|
||||
|
||||
if (info.event.extendedProps && info.event.extendedProps.description) {
|
||||
if (element.hasClass('fc-day-grid-event')) {
|
||||
element.data('content', info.event.extendedProps.description);
|
||||
element.data('placement', 'top');
|
||||
KTApp.initPopover(element);
|
||||
} else if (element.hasClass('fc-time-grid-event')) {
|
||||
element.find('.fc-title').append('<div class="fc-description">' + info.event.extendedProps.description + '</div>');
|
||||
} else if (element.find('.fc-list-item-title').lenght !== 0) {
|
||||
element.find('.fc-list-item-title').append('<div class="fc-description">' + info.event.extendedProps.description + '</div>');
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
calendar.render();
|
||||
}
|
||||
};
|
||||
}();
|
||||
|
||||
jQuery(document).ready(function() {
|
||||
KTCalendarGoogle.init();
|
||||
});
|
||||
166
Content/Panel/js/pages/features/calendar/list-view.js
Normal file
166
Content/Panel/js/pages/features/calendar/list-view.js
Normal file
@ -0,0 +1,166 @@
|
||||
"use strict";
|
||||
|
||||
var KTCalendarListView = function() {
|
||||
|
||||
return {
|
||||
//main function to initiate the module
|
||||
init: function() {
|
||||
var todayDate = moment().startOf('day');
|
||||
var YM = todayDate.format('YYYY-MM');
|
||||
var YESTERDAY = todayDate.clone().subtract(1, 'day').format('YYYY-MM-DD');
|
||||
var TODAY = todayDate.format('YYYY-MM-DD');
|
||||
var TOMORROW = todayDate.clone().add(1, 'day').format('YYYY-MM-DD');
|
||||
|
||||
var calendarEl = document.getElementById('kt_calendar');
|
||||
var calendar = new FullCalendar.Calendar(calendarEl, {
|
||||
plugins: [ 'interaction', 'dayGrid', 'timeGrid', 'list' ],
|
||||
|
||||
isRTL: KTUtil.isRTL(),
|
||||
header: {
|
||||
left: 'prev,next today',
|
||||
center: 'title',
|
||||
right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'
|
||||
},
|
||||
|
||||
height: 800,
|
||||
contentHeight: 750,
|
||||
aspectRatio: 3, // see: https://fullcalendar.io/docs/aspectRatio
|
||||
|
||||
views: {
|
||||
dayGridMonth: { buttonText: 'ماه' },
|
||||
timeGridWeek: { buttonText: 'هفته' },
|
||||
timeGridDay: { buttonText: 'روز' },
|
||||
listDay: { buttonText: 'لیست' },
|
||||
listWeek: { buttonText: 'لیست' }
|
||||
},
|
||||
|
||||
defaultView: 'listWeek',
|
||||
defaultDate: TODAY,
|
||||
|
||||
editable: true,
|
||||
eventLimit: true, // allow "more" link when too many events
|
||||
navLinks: true,
|
||||
events: [
|
||||
{
|
||||
title: 'رویداد یک روز کامل',
|
||||
start: YM + '-01',
|
||||
description: 'این یک متن تستی است برای توضیحات',
|
||||
className: "fc-event-danger fc-event-solid-warning"
|
||||
},
|
||||
{
|
||||
title: 'گزارش نویسی',
|
||||
start: YM + '-14T13:30:00',
|
||||
description: 'این یک متن تستی است برای توضیحات',
|
||||
end: YM + '-14',
|
||||
className: "fc-event-success"
|
||||
},
|
||||
{
|
||||
title: 'سفر کاری',
|
||||
start: YM + '-02',
|
||||
description: 'این یک متن تستی است برای توضیحات',
|
||||
end: YM + '-03',
|
||||
className: "fc-event-primary"
|
||||
},
|
||||
{
|
||||
title: 'انتشار محصول',
|
||||
start: YM + '-03',
|
||||
description: 'این یک متن تستی است برای توضیحات',
|
||||
end: YM + '-05',
|
||||
className: "fc-event-light fc-event-solid-primary"
|
||||
},
|
||||
{
|
||||
title: 'شام',
|
||||
start: YM + '-12',
|
||||
description: 'این یک متن تستی است برای توضیحات',
|
||||
end: YM + '-10'
|
||||
},
|
||||
{
|
||||
id: 999,
|
||||
title: 'تکرار رویداد',
|
||||
start: YM + '-09T16:00:00',
|
||||
description: 'این یک متن تستی است برای توضیحات',
|
||||
className: "fc-event-danger"
|
||||
},
|
||||
{
|
||||
id: 1000,
|
||||
title: 'تکرار رویداد',
|
||||
description: 'این یک متن تستی است برای توضیحات',
|
||||
start: YM + '-16T16:00:00'
|
||||
},
|
||||
{
|
||||
title: 'کنفرانس',
|
||||
start: YESTERDAY,
|
||||
end: TOMORROW,
|
||||
description: 'این یک متن تستی است برای توضیحات',
|
||||
className: "fc-event-primary"
|
||||
},
|
||||
{
|
||||
title: 'ملاقات',
|
||||
start: TODAY + 'T10:30:00',
|
||||
end: TODAY + 'T12:30:00',
|
||||
description: 'این یک متن تستی است برای توضیحات',
|
||||
},
|
||||
{
|
||||
title: 'ناهار',
|
||||
start: TODAY + 'T12:00:00',
|
||||
className: "fc-event-info",
|
||||
description: 'این یک متن تستی است برای توضیحات',
|
||||
},
|
||||
{
|
||||
title: 'ملاقات',
|
||||
start: TODAY + 'T14:30:00',
|
||||
className: "fc-event-warning",
|
||||
description: 'این یک متن تستی است برای توضیحات',
|
||||
},
|
||||
{
|
||||
title: 'ساعت تولد',
|
||||
start: TODAY + 'T17:30:00',
|
||||
className: "fc-event-info",
|
||||
description: 'این یک متن تستی است برای توضیحات',
|
||||
},
|
||||
{
|
||||
title: 'شام',
|
||||
start: TOMORROW + 'T05:00:00',
|
||||
className: "fc-event-solid-danger fc-event-light",
|
||||
description: 'این یک متن تستی است برای توضیحات',
|
||||
},
|
||||
{
|
||||
title: 'جشن تولد',
|
||||
start: TOMORROW + 'T07:00:00',
|
||||
className: "fc-event-primary",
|
||||
description: 'این یک متن تستی است برای توضیحات',
|
||||
},
|
||||
{
|
||||
title: 'کلیک روی گوگل',
|
||||
url: 'http://google.com/',
|
||||
start: YM + '-28',
|
||||
className: "fc-event-solid-info fc-event-light",
|
||||
description: 'این یک متن تستی است برای توضیحات',
|
||||
}
|
||||
],
|
||||
|
||||
eventRender: function(info) {
|
||||
var element = $(info.el);
|
||||
|
||||
if (info.event.extendedProps && info.event.extendedProps.description) {
|
||||
if (element.hasClass('fc-day-grid-event')) {
|
||||
element.data('content', info.event.extendedProps.description);
|
||||
element.data('placement', 'top');
|
||||
KTApp.initPopover(element);
|
||||
} else if (element.hasClass('fc-time-grid-event')) {
|
||||
element.find('.fc-title').append('<div class="fc-description">' + info.event.extendedProps.description + '</div>');
|
||||
} else if (element.find('.fc-list-item-title').lenght !== 0) {
|
||||
element.find('.fc-list-item-title').append('<div class="fc-description">' + info.event.extendedProps.description + '</div>');
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
calendar.render();
|
||||
}
|
||||
};
|
||||
}();
|
||||
|
||||
jQuery(document).ready(function() {
|
||||
KTCalendarListView.init();
|
||||
});
|
||||
29
Content/Panel/js/pages/features/cards/draggable.js
Normal file
29
Content/Panel/js/pages/features/cards/draggable.js
Normal file
@ -0,0 +1,29 @@
|
||||
"use strict";
|
||||
|
||||
var KTCardDraggable = function() {
|
||||
|
||||
return {
|
||||
//main function to initiate the module
|
||||
init: function() {
|
||||
var containers = document.querySelectorAll('.draggable-zone');
|
||||
|
||||
if (containers.length === 0) {
|
||||
return false;
|
||||
}
|
||||
|
||||
var swappable = new Sortable.default(containers, {
|
||||
draggable: '.draggable',
|
||||
handle: '.draggable .draggable-handle',
|
||||
mirror: {
|
||||
//appendTo: selector,
|
||||
appendTo: 'body',
|
||||
constrainDimensions: true
|
||||
}
|
||||
});
|
||||
}
|
||||
};
|
||||
}();
|
||||
|
||||
jQuery(document).ready(function() {
|
||||
KTCardDraggable.init();
|
||||
});
|
||||
323
Content/Panel/js/pages/features/cards/tools.js
Normal file
323
Content/Panel/js/pages/features/cards/tools.js
Normal file
@ -0,0 +1,323 @@
|
||||
"use strict";
|
||||
|
||||
var KTCardTools = function () {
|
||||
// Toastr
|
||||
var initToastr = function() {
|
||||
toastr.options.showDuration = 1000;
|
||||
}
|
||||
|
||||
// Demo 1
|
||||
var demo1 = function() {
|
||||
// This card is lazy initialized using data-card="true" attribute. You can access to the card object as shown below and override its behavior
|
||||
var card = new KTCard('kt_card_1');
|
||||
|
||||
// Toggle event handlers
|
||||
card.on('beforeCollapse', function(card) {
|
||||
setTimeout(function() {
|
||||
toastr.info('قبل از حادثه سقوط اخراج شد!');
|
||||
}, 100);
|
||||
});
|
||||
|
||||
card.on('afterCollapse', function(card) {
|
||||
setTimeout(function() {
|
||||
toastr.warning('قبل از حادثه سقوط اخراج شد!');
|
||||
}, 2000);
|
||||
});
|
||||
|
||||
card.on('beforeExpand', function(card) {
|
||||
setTimeout(function() {
|
||||
toastr.info('قبل از گسترش رویداد اخراج شد!');
|
||||
}, 100);
|
||||
});
|
||||
|
||||
card.on('afterExpand', function(card) {
|
||||
setTimeout(function() {
|
||||
toastr.warning('پس از گسترش رویداد اخراج شد!');
|
||||
}, 2000);
|
||||
});
|
||||
|
||||
// Remove event handlers
|
||||
card.on('beforeRemove', function(card) {
|
||||
toastr.info('قبل از حذف رویداد اخراج!');
|
||||
|
||||
return confirm('مطمئن هستید که این کارت را حذف می کنید؟'); // remove card after user confirmation
|
||||
});
|
||||
|
||||
card.on('afterRemove', function(card) {
|
||||
setTimeout(function() {
|
||||
toastr.warning('پس از حذف رویداد اخراج شد!');
|
||||
}, 2000);
|
||||
});
|
||||
|
||||
// Reload event handlers
|
||||
card.on('reload', function(card) {
|
||||
toastr.info('رویداد لندو اخراج شد!');
|
||||
|
||||
KTApp.block(card.getSelf(), {
|
||||
overlayColor: '#ffffff',
|
||||
type: 'loader',
|
||||
state: 'primary',
|
||||
opacity: 0.3,
|
||||
size: 'lg'
|
||||
});
|
||||
|
||||
// update the content here
|
||||
|
||||
setTimeout(function() {
|
||||
KTApp.unblock(card.getSelf());
|
||||
}, 2000);
|
||||
});
|
||||
}
|
||||
|
||||
// Demo 2
|
||||
var demo2 = function() {
|
||||
// This card is lazy initialized using data-card="true" attribute. You can access to the card object as shown below and override its behavior
|
||||
var card = new KTCard('kt_card_2');
|
||||
|
||||
// Toggle event handlers
|
||||
card.on('beforeCollapse', function(card) {
|
||||
setTimeout(function() {
|
||||
toastr.info('قبل از حادثه سقوط اخراج شد!');
|
||||
}, 100);
|
||||
});
|
||||
|
||||
card.on('afterCollapse', function(card) {
|
||||
setTimeout(function() {
|
||||
toastr.warning('قبل از حادثه سقوط اخراج شد!');
|
||||
}, 2000);
|
||||
});
|
||||
|
||||
card.on('beforeExpand', function(card) {
|
||||
setTimeout(function() {
|
||||
toastr.info('قبل از گسترش رویداد اخراج شد!');
|
||||
}, 100);
|
||||
});
|
||||
|
||||
card.on('afterExpand', function(card) {
|
||||
setTimeout(function() {
|
||||
toastr.warning('پس از گسترش رویداد اخراج شد!');
|
||||
}, 2000);
|
||||
});
|
||||
|
||||
// Remove event handlers
|
||||
card.on('beforeRemove', function(card) {
|
||||
toastr.info('قبل از حذف رویداد اخراج!');
|
||||
|
||||
return confirm('مطمئن هستید که این کارت را حذف می کنید؟'); // remove card after user confirmation
|
||||
});
|
||||
|
||||
card.on('afterRemove', function(card) {
|
||||
setTimeout(function() {
|
||||
toastr.warning('پس از حذف رویداد اخراج شد!');
|
||||
}, 2000);
|
||||
});
|
||||
|
||||
// Reload event handlers
|
||||
card.on('reload', function(card) {
|
||||
toastr.info('رویداد لندو اخراج شد!');
|
||||
|
||||
KTApp.block(card.getSelf(), {
|
||||
overlayColor: '#000000',
|
||||
type: 'spinner',
|
||||
state: 'primary',
|
||||
opacity: 0.05,
|
||||
size: 'lg'
|
||||
});
|
||||
|
||||
// update the content here
|
||||
|
||||
setTimeout(function() {
|
||||
KTApp.unblock(card.getSelf());
|
||||
}, 2000);
|
||||
});
|
||||
}
|
||||
|
||||
// Demo 3
|
||||
var demo3 = function() {
|
||||
// This card is lazy initialized using data-card="true" attribute. You can access to the card object as shown below and override its behavior
|
||||
var card = new KTCard('kt_card_3');
|
||||
|
||||
// Toggle event handlers
|
||||
card.on('beforeCollapse', function(card) {
|
||||
setTimeout(function() {
|
||||
toastr.info('قبل از حادثه سقوط اخراج شد!');
|
||||
}, 100);
|
||||
});
|
||||
|
||||
card.on('afterCollapse', function(card) {
|
||||
setTimeout(function() {
|
||||
toastr.warning('قبل از حادثه سقوط اخراج شد!');
|
||||
}, 2000);
|
||||
});
|
||||
|
||||
card.on('beforeExpand', function(card) {
|
||||
setTimeout(function() {
|
||||
toastr.info('قبل از گسترش رویداد اخراج شد!');
|
||||
}, 100);
|
||||
});
|
||||
|
||||
card.on('afterExpand', function(card) {
|
||||
setTimeout(function() {
|
||||
toastr.warning('پس از گسترش رویداد اخراج شد!');
|
||||
}, 2000);
|
||||
});
|
||||
|
||||
// Remove event handlers
|
||||
card.on('beforeRemove', function(card) {
|
||||
toastr.info('قبل از حذف رویداد اخراج!');
|
||||
|
||||
return confirm('مطمئن هستید که این کارت را حذف می کنید؟'); // remove card after user confirmation
|
||||
});
|
||||
|
||||
card.on('afterRemove', function(card) {
|
||||
setTimeout(function() {
|
||||
toastr.warning('پس از حذف رویداد اخراج شد!');
|
||||
}, 2000);
|
||||
});
|
||||
|
||||
// Reload event handlers
|
||||
card.on('reload', function(card) {
|
||||
toastr.info('رویداد لندو اخراج شد!');
|
||||
|
||||
KTApp.block(card.getSelf(), {
|
||||
type: 'loader',
|
||||
state: 'success',
|
||||
message: 'لطفا صبر کنید...'
|
||||
});
|
||||
|
||||
// update the content here
|
||||
|
||||
setTimeout(function() {
|
||||
KTApp.unblock(card.getSelf());
|
||||
}, 2000);
|
||||
});
|
||||
|
||||
// Reload event handlers
|
||||
card.on('afterFullscreenOn', function(card) {
|
||||
toastr.warning('After fullscreen on event fired!');
|
||||
var scrollable = $(card.getBody()).find('> .kt-scroll');
|
||||
|
||||
if (scrollable) {
|
||||
scrollable.data('original-height', scrollable.css('height'));
|
||||
scrollable.css('height', '100%');
|
||||
|
||||
KTUtil.scrollUpdate(scrollable[0]);
|
||||
}
|
||||
});
|
||||
|
||||
card.on('afterFullscreenOff', function(card) {
|
||||
toastr.warning('After fullscreen off event fired!');
|
||||
var scrollable = $(card.getBody()).find('> .kt-scroll');
|
||||
|
||||
if (scrollable) {
|
||||
var scrollable = $(card.getBody()).find('> .kt-scroll');
|
||||
scrollable.css('height', scrollable.data('original-height'));
|
||||
|
||||
KTUtil.scrollUpdate(scrollable[0]);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Demo 4
|
||||
var demo4 = function() {
|
||||
// This card is lazy initialized using data-card="true" attribute. You can access to the card object as shown below and override its behavior
|
||||
var card = new KTCard('kt_card_4');
|
||||
|
||||
// Toggle event handlers
|
||||
card.on('beforeCollapse', function(card) {
|
||||
setTimeout(function() {
|
||||
toastr.info('قبل از حادثه سقوط اخراج شد!');
|
||||
}, 100);
|
||||
});
|
||||
|
||||
card.on('afterCollapse', function(card) {
|
||||
setTimeout(function() {
|
||||
toastr.warning('قبل از حادثه سقوط اخراج شد!');
|
||||
}, 2000);
|
||||
});
|
||||
|
||||
card.on('beforeExpand', function(card) {
|
||||
setTimeout(function() {
|
||||
toastr.info('قبل از گسترش رویداد اخراج شد!');
|
||||
}, 100);
|
||||
});
|
||||
|
||||
card.on('afterExpand', function(card) {
|
||||
setTimeout(function() {
|
||||
toastr.warning('پس از گسترش رویداد اخراج شد!');
|
||||
}, 2000);
|
||||
});
|
||||
|
||||
// Remove event handlers
|
||||
card.on('beforeRemove', function(card) {
|
||||
toastr.info('قبل از حذف رویداد اخراج!');
|
||||
|
||||
return confirm('مطمئن هستید که این کارت را حذف می کنید؟'); // remove card after user confirmation
|
||||
});
|
||||
|
||||
card.on('afterRemove', function(card) {
|
||||
setTimeout(function() {
|
||||
toastr.warning('پس از حذف رویداد اخراج شد!');
|
||||
}, 2000);
|
||||
});
|
||||
|
||||
// Reload event handlers
|
||||
card.on('reload', function(card) {
|
||||
toastr.info('رویداد لندو اخراج شد!');
|
||||
|
||||
KTApp.block(card.getSelf(), {
|
||||
type: 'loader',
|
||||
state: 'primary',
|
||||
message: 'لطفا صبر کنید...'
|
||||
});
|
||||
|
||||
// update the content here
|
||||
|
||||
setTimeout(function() {
|
||||
KTApp.unblock(card.getSelf());
|
||||
}, 2000);
|
||||
});
|
||||
|
||||
// Reload event handlers
|
||||
card.on('afterFullscreenOn', function(card) {
|
||||
toastr.warning('After fullscreen on event fired!');
|
||||
var scrollable = $(card.getBody()).find('> .kt-scroll');
|
||||
|
||||
if (scrollable) {
|
||||
scrollable.data('original-height', scrollable.css('height'));
|
||||
scrollable.css('height', '100%');
|
||||
|
||||
KTUtil.scrollUpdate(scrollable[0]);
|
||||
}
|
||||
});
|
||||
|
||||
card.on('afterFullscreenOff', function(card) {
|
||||
toastr.warning('After fullscreen off event fired!');
|
||||
var scrollable = $(card.getBody()).find('> .kt-scroll');
|
||||
|
||||
if (scrollable) {
|
||||
var scrollable = $(card.getBody()).find('> .kt-scroll');
|
||||
scrollable.css('height', scrollable.data('original-height'));
|
||||
|
||||
KTUtil.scrollUpdate(scrollable[0]);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
return {
|
||||
//main function to initiate the module
|
||||
init: function () {
|
||||
initToastr();
|
||||
|
||||
// init demos
|
||||
demo1();
|
||||
demo2();
|
||||
demo3();
|
||||
demo4();
|
||||
}
|
||||
};
|
||||
}();
|
||||
|
||||
jQuery(document).ready(function() {
|
||||
KTCardTools.init();
|
||||
});
|
||||
2392
Content/Panel/js/pages/features/charts/amcharts/charts.js
Normal file
2392
Content/Panel/js/pages/features/charts/amcharts/charts.js
Normal file
File diff suppressed because it is too large
Load Diff
1024
Content/Panel/js/pages/features/charts/amcharts/maps.js
Normal file
1024
Content/Panel/js/pages/features/charts/amcharts/maps.js
Normal file
File diff suppressed because it is too large
Load Diff
784
Content/Panel/js/pages/features/charts/amcharts/stock-charts.js
Normal file
784
Content/Panel/js/pages/features/charts/amcharts/stock-charts.js
Normal file
@ -0,0 +1,784 @@
|
||||
"use strict";
|
||||
|
||||
// Class definition
|
||||
var KTamChartsStockChartsDemo = function() {
|
||||
|
||||
// Private functions
|
||||
var demo1 = function() {
|
||||
var chartData1 = [];
|
||||
var chartData2 = [];
|
||||
var chartData3 = [];
|
||||
var chartData4 = [];
|
||||
|
||||
generateChartData();
|
||||
|
||||
function generateChartData() {
|
||||
var firstDate = new Date();
|
||||
firstDate.setDate(firstDate.getDate() - 500);
|
||||
firstDate.setHours(0, 0, 0, 0);
|
||||
|
||||
for (var i = 0; i < 500; i++) {
|
||||
var newDate = new Date(firstDate);
|
||||
newDate.setDate(newDate.getDate() + i);
|
||||
|
||||
var a1 = Math.round(Math.random() * (40 + i)) + 100 + i;
|
||||
var b1 = Math.round(Math.random() * (1000 + i)) + 500 + i * 2;
|
||||
|
||||
var a2 = Math.round(Math.random() * (100 + i)) + 200 + i;
|
||||
var b2 = Math.round(Math.random() * (1000 + i)) + 600 + i * 2;
|
||||
|
||||
var a3 = Math.round(Math.random() * (100 + i)) + 200;
|
||||
var b3 = Math.round(Math.random() * (1000 + i)) + 600 + i * 2;
|
||||
|
||||
var a4 = Math.round(Math.random() * (100 + i)) + 200 + i;
|
||||
var b4 = Math.round(Math.random() * (100 + i)) + 600 + i;
|
||||
|
||||
chartData1.push({
|
||||
"date": newDate,
|
||||
"value": a1,
|
||||
"volume": b1
|
||||
});
|
||||
chartData2.push({
|
||||
"date": newDate,
|
||||
"value": a2,
|
||||
"volume": b2
|
||||
});
|
||||
chartData3.push({
|
||||
"date": newDate,
|
||||
"value": a3,
|
||||
"volume": b3
|
||||
});
|
||||
chartData4.push({
|
||||
"date": newDate,
|
||||
"value": a4,
|
||||
"volume": b4
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
var chart = AmCharts.makeChart("kt_amcharts_1", {
|
||||
"rtl": KTUtil.isRTL(),
|
||||
"type": "stock",
|
||||
"theme": "light",
|
||||
"dataSets": [{
|
||||
"title": "first data set",
|
||||
"fieldMappings": [{
|
||||
"fromField": "value",
|
||||
"toField": "value"
|
||||
}, {
|
||||
"fromField": "volume",
|
||||
"toField": "volume"
|
||||
}],
|
||||
"dataProvider": chartData1,
|
||||
"categoryField": "date"
|
||||
}, {
|
||||
"title": "second data set",
|
||||
"fieldMappings": [{
|
||||
"fromField": "value",
|
||||
"toField": "value"
|
||||
}, {
|
||||
"fromField": "volume",
|
||||
"toField": "volume"
|
||||
}],
|
||||
"dataProvider": chartData2,
|
||||
"categoryField": "date"
|
||||
}, {
|
||||
"title": "third data set",
|
||||
"fieldMappings": [{
|
||||
"fromField": "value",
|
||||
"toField": "value"
|
||||
}, {
|
||||
"fromField": "volume",
|
||||
"toField": "volume"
|
||||
}],
|
||||
"dataProvider": chartData3,
|
||||
"categoryField": "date"
|
||||
}, {
|
||||
"title": "fourth data set",
|
||||
"fieldMappings": [{
|
||||
"fromField": "value",
|
||||
"toField": "value"
|
||||
}, {
|
||||
"fromField": "volume",
|
||||
"toField": "volume"
|
||||
}],
|
||||
"dataProvider": chartData4,
|
||||
"categoryField": "date"
|
||||
}],
|
||||
|
||||
"panels": [{
|
||||
"showCategoryAxis": false,
|
||||
"title": "Value",
|
||||
"percentHeight": 70,
|
||||
"stockGraphs": [{
|
||||
"id": "g1",
|
||||
"valueField": "value",
|
||||
"comparable": true,
|
||||
"compareField": "value",
|
||||
"balloonText": "[[title]]:<b>[[value]]</b>",
|
||||
"compareGraphBalloonText": "[[title]]:<b>[[value]]</b>"
|
||||
}],
|
||||
"stockLegend": {
|
||||
"periodValueTextComparing": "[[percents.value.close]]%",
|
||||
"periodValueTextRegular": "[[value.close]]"
|
||||
}
|
||||
}, {
|
||||
"title": "Volume",
|
||||
"percentHeight": 30,
|
||||
"stockGraphs": [{
|
||||
"valueField": "volume",
|
||||
"type": "column",
|
||||
"showBalloon": false,
|
||||
"fillAlphas": 1
|
||||
}],
|
||||
"stockLegend": {
|
||||
"periodValueTextRegular": "[[value.close]]"
|
||||
}
|
||||
}],
|
||||
|
||||
"chartScrollbarSettings": {
|
||||
"graph": "g1"
|
||||
},
|
||||
|
||||
"chartCursorSettings": {
|
||||
"valueBalloonsEnabled": true,
|
||||
"fullWidth": true,
|
||||
"cursorAlpha": 0.1,
|
||||
"valueLineBalloonEnabled": true,
|
||||
"valueLineEnabled": true,
|
||||
"valueLineAlpha": 0.5
|
||||
},
|
||||
|
||||
"periodSelector": {
|
||||
"position": "left",
|
||||
"periods": [{
|
||||
"period": "MM",
|
||||
"selected": true,
|
||||
"count": 1,
|
||||
"label": "1 month"
|
||||
}, {
|
||||
"period": "YYYY",
|
||||
"count": 1,
|
||||
"label": "1 year"
|
||||
}, {
|
||||
"period": "YTD",
|
||||
"label": "YTD"
|
||||
}, {
|
||||
"period": "MAX",
|
||||
"label": "MAX"
|
||||
}]
|
||||
},
|
||||
|
||||
"dataSetSelector": {
|
||||
"position": "left"
|
||||
},
|
||||
|
||||
"export": {
|
||||
"enabled": true
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
var demo2 = function() {
|
||||
var chartData = [];
|
||||
generateChartData();
|
||||
|
||||
function generateChartData() {
|
||||
var firstDate = new Date(2012, 0, 1);
|
||||
firstDate.setDate(firstDate.getDate() - 500);
|
||||
firstDate.setHours(0, 0, 0, 0);
|
||||
|
||||
for (var i = 0; i < 500; i++) {
|
||||
var newDate = new Date(firstDate);
|
||||
newDate.setDate(newDate.getDate() + i);
|
||||
|
||||
var a = Math.round(Math.random() * (40 + i)) + 100 + i;
|
||||
var b = Math.round(Math.random() * 100000000);
|
||||
|
||||
chartData.push({
|
||||
"date": newDate,
|
||||
"value": a,
|
||||
"volume": b
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
var chart = AmCharts.makeChart("kt_amcharts_2", {
|
||||
"type": "stock",
|
||||
"theme": "light",
|
||||
"dataSets": [{
|
||||
"color": "#b0de09",
|
||||
"fieldMappings": [{
|
||||
"fromField": "value",
|
||||
"toField": "value"
|
||||
}, {
|
||||
"fromField": "volume",
|
||||
"toField": "volume"
|
||||
}],
|
||||
"dataProvider": chartData,
|
||||
"categoryField": "date",
|
||||
// EVENTS
|
||||
"stockEvents": [{
|
||||
"date": new Date(2010, 8, 19),
|
||||
"type": "sign",
|
||||
"backgroundColor": "#85CDE6",
|
||||
"graph": "g1",
|
||||
"text": "S",
|
||||
"description": "This is description of an event"
|
||||
}, {
|
||||
"date": new Date(2010, 10, 19),
|
||||
"type": "flag",
|
||||
"backgroundColor": "#FFFFFF",
|
||||
"backgroundAlpha": 0.5,
|
||||
"graph": "g1",
|
||||
"text": "F",
|
||||
"description": "Some longer\ntext can also\n be added"
|
||||
}, {
|
||||
"date": new Date(2010, 11, 10),
|
||||
"showOnAxis": true,
|
||||
"backgroundColor": "#85CDE6",
|
||||
"type": "pin",
|
||||
"text": "X",
|
||||
"graph": "g1",
|
||||
"description": "This is description of an event"
|
||||
}, {
|
||||
"date": new Date(2010, 11, 26),
|
||||
"showOnAxis": true,
|
||||
"backgroundColor": "#85CDE6",
|
||||
"type": "pin",
|
||||
"text": "Z",
|
||||
"graph": "g1",
|
||||
"description": "This is description of an event"
|
||||
}, {
|
||||
"date": new Date(2011, 0, 3),
|
||||
"type": "sign",
|
||||
"backgroundColor": "#85CDE6",
|
||||
"graph": "g1",
|
||||
"text": "U",
|
||||
"description": "This is description of an event"
|
||||
}, {
|
||||
"date": new Date(2011, 1, 6),
|
||||
"type": "sign",
|
||||
"graph": "g1",
|
||||
"text": "D",
|
||||
"description": "This is description of an event"
|
||||
}, {
|
||||
"date": new Date(2011, 3, 5),
|
||||
"type": "sign",
|
||||
"graph": "g1",
|
||||
"text": "L",
|
||||
"description": "This is description of an event"
|
||||
}, {
|
||||
"date": new Date(2011, 3, 5),
|
||||
"type": "sign",
|
||||
"graph": "g1",
|
||||
"text": "R",
|
||||
"description": "This is description of an event"
|
||||
}, {
|
||||
"date": new Date(2011, 5, 15),
|
||||
"type": "arrowUp",
|
||||
"backgroundColor": "#00CC00",
|
||||
"graph": "g1",
|
||||
"description": "This is description of an event"
|
||||
}, {
|
||||
"date": new Date(2011, 6, 25),
|
||||
"type": "arrowDown",
|
||||
"backgroundColor": "#CC0000",
|
||||
"graph": "g1",
|
||||
"description": "This is description of an event"
|
||||
}, {
|
||||
"date": new Date(2011, 8, 1),
|
||||
"type": "text",
|
||||
"graph": "g1",
|
||||
"text": "Longer text can\nalso be displayed",
|
||||
"description": "This is description of an event"
|
||||
}]
|
||||
}],
|
||||
|
||||
|
||||
"panels": [{
|
||||
"title": "Value",
|
||||
"stockGraphs": [{
|
||||
"id": "g1",
|
||||
"valueField": "value"
|
||||
}],
|
||||
"stockLegend": {
|
||||
"valueTextRegular": " ",
|
||||
"markerType": "none"
|
||||
}
|
||||
}],
|
||||
|
||||
"chartScrollbarSettings": {
|
||||
"graph": "g1"
|
||||
},
|
||||
|
||||
"chartCursorSettings": {
|
||||
"valueBalloonsEnabled": true,
|
||||
"graphBulletSize": 1,
|
||||
"valueLineBalloonEnabled": true,
|
||||
"valueLineEnabled": true,
|
||||
"valueLineAlpha": 0.5
|
||||
},
|
||||
|
||||
"periodSelector": {
|
||||
"periods": [{
|
||||
"period": "DD",
|
||||
"count": 10,
|
||||
"label": "10 days"
|
||||
}, {
|
||||
"period": "MM",
|
||||
"count": 1,
|
||||
"label": "1 month"
|
||||
}, {
|
||||
"period": "YYYY",
|
||||
"count": 1,
|
||||
"label": "1 year"
|
||||
}, {
|
||||
"period": "YTD",
|
||||
"label": "YTD"
|
||||
}, {
|
||||
"period": "MAX",
|
||||
"label": "MAX"
|
||||
}]
|
||||
},
|
||||
|
||||
"panelsSettings": {
|
||||
"usePrefixes": true
|
||||
},
|
||||
"export": {
|
||||
"enabled": true
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
var demo3 = function() {
|
||||
var chartData = generateChartData();
|
||||
|
||||
function generateChartData() {
|
||||
var chartData = [];
|
||||
var firstDate = new Date(2012, 0, 1);
|
||||
firstDate.setDate(firstDate.getDate() - 500);
|
||||
firstDate.setHours(0, 0, 0, 0);
|
||||
|
||||
for (var i = 0; i < 500; i++) {
|
||||
var newDate = new Date(firstDate);
|
||||
newDate.setDate(newDate.getDate() + i);
|
||||
|
||||
var value = Math.round(Math.random() * (40 + i)) + 100 + i;
|
||||
|
||||
chartData.push({
|
||||
"date": newDate,
|
||||
"value": value
|
||||
});
|
||||
}
|
||||
return chartData;
|
||||
}
|
||||
|
||||
|
||||
var chart = AmCharts.makeChart("kt_amcharts_3", {
|
||||
"type": "stock",
|
||||
"theme": "light",
|
||||
"dataSets": [{
|
||||
"color": "#b0de09",
|
||||
"fieldMappings": [{
|
||||
"fromField": "value",
|
||||
"toField": "value"
|
||||
}],
|
||||
"dataProvider": chartData,
|
||||
"categoryField": "date"
|
||||
}],
|
||||
|
||||
"panels": [{
|
||||
"showCategoryAxis": true,
|
||||
"title": "Value",
|
||||
"eraseAll": false,
|
||||
"allLabels": [{
|
||||
"x": 0,
|
||||
"y": 115,
|
||||
"text": "Click on the pencil icon on top-right to start drawing",
|
||||
"align": "center",
|
||||
"size": 16
|
||||
}],
|
||||
|
||||
"stockGraphs": [{
|
||||
"id": "g1",
|
||||
"valueField": "value",
|
||||
"useDataSetColors": false
|
||||
}],
|
||||
|
||||
"stockLegend": {
|
||||
"valueTextRegular": " ",
|
||||
"markerType": "none"
|
||||
},
|
||||
|
||||
"drawingIconsEnabled": true
|
||||
}],
|
||||
|
||||
"chartScrollbarSettings": {
|
||||
"graph": "g1"
|
||||
},
|
||||
"chartCursorSettings": {
|
||||
"valueBalloonsEnabled": true
|
||||
},
|
||||
"periodSelector": {
|
||||
"position": "bottom",
|
||||
"periods": [{
|
||||
"period": "DD",
|
||||
"count": 10,
|
||||
"label": "10 days"
|
||||
}, {
|
||||
"period": "MM",
|
||||
"count": 1,
|
||||
"label": "1 month"
|
||||
}, {
|
||||
"period": "YYYY",
|
||||
"count": 1,
|
||||
"label": "1 year"
|
||||
}, {
|
||||
"period": "YTD",
|
||||
"label": "YTD"
|
||||
}, {
|
||||
"period": "MAX",
|
||||
"label": "MAX"
|
||||
}]
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
var demo4 = function() {
|
||||
var chartData = generateChartData();
|
||||
|
||||
function generateChartData() {
|
||||
var chartData = [];
|
||||
var firstDate = new Date(2012, 0, 1);
|
||||
firstDate.setDate(firstDate.getDate() - 1000);
|
||||
firstDate.setHours(0, 0, 0, 0);
|
||||
|
||||
for (var i = 0; i < 1000; i++) {
|
||||
var newDate = new Date(firstDate);
|
||||
newDate.setHours(0, i, 0, 0);
|
||||
|
||||
var a = Math.round(Math.random() * (40 + i)) + 100 + i;
|
||||
var b = Math.round(Math.random() * 100000000);
|
||||
|
||||
chartData.push({
|
||||
"date": newDate,
|
||||
"value": a,
|
||||
"volume": b
|
||||
});
|
||||
}
|
||||
return chartData;
|
||||
}
|
||||
|
||||
var chart = AmCharts.makeChart("kt_amcharts_4", {
|
||||
"type": "stock",
|
||||
"theme": "light",
|
||||
"categoryAxesSettings": {
|
||||
"minPeriod": "mm"
|
||||
},
|
||||
|
||||
"dataSets": [{
|
||||
"color": "#b0de09",
|
||||
"fieldMappings": [{
|
||||
"fromField": "value",
|
||||
"toField": "value"
|
||||
}, {
|
||||
"fromField": "volume",
|
||||
"toField": "volume"
|
||||
}],
|
||||
|
||||
"dataProvider": chartData,
|
||||
"categoryField": "date"
|
||||
}],
|
||||
|
||||
"panels": [{
|
||||
"showCategoryAxis": false,
|
||||
"title": "Value",
|
||||
"percentHeight": 70,
|
||||
|
||||
"stockGraphs": [{
|
||||
"id": "g1",
|
||||
"valueField": "value",
|
||||
"type": "smoothedLine",
|
||||
"lineThickness": 2,
|
||||
"bullet": "round"
|
||||
}],
|
||||
|
||||
|
||||
"stockLegend": {
|
||||
"valueTextRegular": " ",
|
||||
"markerType": "none"
|
||||
}
|
||||
}, {
|
||||
"title": "Volume",
|
||||
"percentHeight": 30,
|
||||
"stockGraphs": [{
|
||||
"valueField": "volume",
|
||||
"type": "column",
|
||||
"cornerRadiusTop": 2,
|
||||
"fillAlphas": 1
|
||||
}],
|
||||
|
||||
"stockLegend": {
|
||||
"valueTextRegular": " ",
|
||||
"markerType": "none"
|
||||
}
|
||||
}],
|
||||
|
||||
"chartScrollbarSettings": {
|
||||
"graph": "g1",
|
||||
"usePeriod": "10mm",
|
||||
"position": "top"
|
||||
},
|
||||
|
||||
"chartCursorSettings": {
|
||||
"valueBalloonsEnabled": true
|
||||
},
|
||||
|
||||
"periodSelector": {
|
||||
"position": "top",
|
||||
"dateFormat": "YYYY-MM-DD JJ:NN",
|
||||
"inputFieldWidth": 150,
|
||||
"periods": [{
|
||||
"period": "hh",
|
||||
"count": 1,
|
||||
"label": "1 hour",
|
||||
"selected": true
|
||||
}, {
|
||||
"period": "hh",
|
||||
"count": 2,
|
||||
"label": "2 hours"
|
||||
}, {
|
||||
"period": "hh",
|
||||
"count": 5,
|
||||
"label": "5 hour"
|
||||
}, {
|
||||
"period": "hh",
|
||||
"count": 12,
|
||||
"label": "12 hours"
|
||||
}, {
|
||||
"period": "MAX",
|
||||
"label": "MAX"
|
||||
}]
|
||||
},
|
||||
|
||||
"panelsSettings": {
|
||||
"usePrefixes": true
|
||||
},
|
||||
|
||||
"export": {
|
||||
"enabled": true,
|
||||
"position": "bottom-right"
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
var demo5 = function() {
|
||||
var chartData = [];
|
||||
generateChartData();
|
||||
|
||||
|
||||
function generateChartData() {
|
||||
var firstDate = new Date();
|
||||
firstDate.setHours(0, 0, 0, 0);
|
||||
firstDate.setDate(firstDate.getDate() - 2000);
|
||||
|
||||
for (var i = 0; i < 2000; i++) {
|
||||
var newDate = new Date(firstDate);
|
||||
|
||||
newDate.setDate(newDate.getDate() + i);
|
||||
|
||||
var open = Math.round(Math.random() * (30) + 100);
|
||||
var close = open + Math.round(Math.random() * (15) - Math.random() * 10);
|
||||
|
||||
var low;
|
||||
if (open < close) {
|
||||
low = open - Math.round(Math.random() * 5);
|
||||
} else {
|
||||
low = close - Math.round(Math.random() * 5);
|
||||
}
|
||||
|
||||
var high;
|
||||
if (open < close) {
|
||||
high = close + Math.round(Math.random() * 5);
|
||||
} else {
|
||||
high = open + Math.round(Math.random() * 5);
|
||||
}
|
||||
|
||||
var volume = Math.round(Math.random() * (1000 + i)) + 100 + i;
|
||||
var value = Math.round(Math.random() * (30) + 100);
|
||||
|
||||
chartData[i] = ({
|
||||
"date": newDate,
|
||||
"open": open,
|
||||
"close": close,
|
||||
"high": high,
|
||||
"low": low,
|
||||
"volume": volume,
|
||||
"value": value
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
var chart = AmCharts.makeChart("kt_amcharts_5", {
|
||||
"type": "stock",
|
||||
"theme": "light",
|
||||
"dataSets": [{
|
||||
"fieldMappings": [{
|
||||
"fromField": "open",
|
||||
"toField": "open"
|
||||
}, {
|
||||
"fromField": "close",
|
||||
"toField": "close"
|
||||
}, {
|
||||
"fromField": "high",
|
||||
"toField": "high"
|
||||
}, {
|
||||
"fromField": "low",
|
||||
"toField": "low"
|
||||
}, {
|
||||
"fromField": "volume",
|
||||
"toField": "volume"
|
||||
}, {
|
||||
"fromField": "value",
|
||||
"toField": "value"
|
||||
}],
|
||||
"color": "#7f8da9",
|
||||
"dataProvider": chartData,
|
||||
"title": "West Stock",
|
||||
"categoryField": "date"
|
||||
}, {
|
||||
"fieldMappings": [{
|
||||
"fromField": "value",
|
||||
"toField": "value"
|
||||
}],
|
||||
"color": "#fac314",
|
||||
"dataProvider": chartData,
|
||||
"compared": true,
|
||||
"title": "East Stock",
|
||||
"categoryField": "date"
|
||||
}],
|
||||
|
||||
|
||||
"panels": [{
|
||||
"title": "Value",
|
||||
"showCategoryAxis": false,
|
||||
"percentHeight": 70,
|
||||
"valueAxes": [{
|
||||
"id": "v1",
|
||||
"dashLength": 5
|
||||
}],
|
||||
|
||||
"categoryAxis": {
|
||||
"dashLength": 5
|
||||
},
|
||||
|
||||
"stockGraphs": [{
|
||||
"type": "candlestick",
|
||||
"id": "g1",
|
||||
"openField": "open",
|
||||
"closeField": "close",
|
||||
"highField": "high",
|
||||
"lowField": "low",
|
||||
"valueField": "close",
|
||||
"lineColor": "#7f8da9",
|
||||
"fillColors": "#7f8da9",
|
||||
"negativeLineColor": "#db4c3c",
|
||||
"negativeFillColors": "#db4c3c",
|
||||
"fillAlphas": 1,
|
||||
"useDataSetColors": false,
|
||||
"comparable": true,
|
||||
"compareField": "value",
|
||||
"showBalloon": false,
|
||||
"proCandlesticks": true
|
||||
}],
|
||||
|
||||
"stockLegend": {
|
||||
"valueTextRegular": undefined,
|
||||
"periodValueTextComparing": "[[percents.value.close]]%"
|
||||
}
|
||||
},
|
||||
|
||||
{
|
||||
"title": "Volume",
|
||||
"percentHeight": 30,
|
||||
"marginTop": 1,
|
||||
"showCategoryAxis": true,
|
||||
"valueAxes": [{
|
||||
"dashLength": 5
|
||||
}],
|
||||
|
||||
"categoryAxis": {
|
||||
"dashLength": 5
|
||||
},
|
||||
|
||||
"stockGraphs": [{
|
||||
"valueField": "volume",
|
||||
"type": "column",
|
||||
"showBalloon": false,
|
||||
"fillAlphas": 1
|
||||
}],
|
||||
|
||||
"stockLegend": {
|
||||
"markerType": "none",
|
||||
"markerSize": 0,
|
||||
"labelText": "",
|
||||
"periodValueTextRegular": "[[value.close]]"
|
||||
}
|
||||
}
|
||||
],
|
||||
|
||||
"chartScrollbarSettings": {
|
||||
"graph": "g1",
|
||||
"graphType": "line",
|
||||
"usePeriod": "WW"
|
||||
},
|
||||
|
||||
"chartCursorSettings": {
|
||||
"valueLineBalloonEnabled": true,
|
||||
"valueLineEnabled": true
|
||||
},
|
||||
|
||||
"periodSelector": {
|
||||
"position": "bottom",
|
||||
"periods": [{
|
||||
"period": "DD",
|
||||
"count": 10,
|
||||
"label": "10 days"
|
||||
}, {
|
||||
"period": "MM",
|
||||
"selected": true,
|
||||
"count": 1,
|
||||
"label": "1 month"
|
||||
}, {
|
||||
"period": "YYYY",
|
||||
"count": 1,
|
||||
"label": "1 year"
|
||||
}, {
|
||||
"period": "YTD",
|
||||
"label": "YTD"
|
||||
}, {
|
||||
"period": "MAX",
|
||||
"label": "MAX"
|
||||
}]
|
||||
},
|
||||
"export": {
|
||||
"enabled": true
|
||||
}
|
||||
});
|
||||
}
|
||||
return {
|
||||
// public functions
|
||||
init: function() {
|
||||
demo1();
|
||||
demo2();
|
||||
demo3();
|
||||
demo4();
|
||||
demo5();
|
||||
}
|
||||
};
|
||||
}();
|
||||
|
||||
jQuery(document).ready(function() {
|
||||
KTamChartsStockChartsDemo.init();
|
||||
});
|
||||
1088
Content/Panel/js/pages/features/charts/apexcharts.js
Normal file
1088
Content/Panel/js/pages/features/charts/apexcharts.js
Normal file
File diff suppressed because it is too large
Load Diff
718
Content/Panel/js/pages/features/charts/flotcharts.js
Normal file
718
Content/Panel/js/pages/features/charts/flotcharts.js
Normal file
@ -0,0 +1,718 @@
|
||||
"use strict";
|
||||
|
||||
// Class definition
|
||||
var KTFlotchartsDemo = function() {
|
||||
|
||||
// Private functions
|
||||
|
||||
var demo1 = function() {
|
||||
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;
|
||||
}
|
||||
|
||||
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($("#kt_flotcharts_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
|
||||
}], {
|
||||
colors: [KTApp.getSettings()['colors']['theme']['base']["success"], KTApp.getSettings()['colors']['theme']['base']["primary"], KTApp.getSettings()['colors']['theme']['base']["danger"]],
|
||||
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
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
var demo2 = function() {
|
||||
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($("#kt_flotcharts_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: [KTApp.getSettings()['colors']['theme']['base']["primary"], KTApp.getSettings()['colors']['theme']['base']["danger"]],
|
||||
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;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
var demo3 = function() {
|
||||
var sin = [],
|
||||
cos = [];
|
||||
for (var i = 0; i < 14; i += 0.1) {
|
||||
sin.push([i, Math.sin(i)]);
|
||||
cos.push([i, Math.cos(i)]);
|
||||
}
|
||||
|
||||
var plot = $.plot($("#kt_flotcharts_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
|
||||
}], {
|
||||
colors: [KTApp.getSettings()['colors']['theme']['base']["primary"], KTApp.getSettings()['colors']['theme']['base']["warning"]],
|
||||
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 = $("#kt_flotcharts_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)));
|
||||
}
|
||||
}
|
||||
|
||||
$("#kt_flotcharts_3").bind("plothover", function(event, pos, item) {
|
||||
latestPosition = pos;
|
||||
if (!updateLegendTimeout) updateLegendTimeout = setTimeout(updateLegend, 50);
|
||||
});
|
||||
}
|
||||
|
||||
var demo4 = function() {
|
||||
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;
|
||||
}
|
||||
|
||||
//server load
|
||||
var options = {
|
||||
colors: [KTApp.getSettings()['colors']['theme']['base']["danger"], KTApp.getSettings()['colors']['theme']['base']["primary"]],
|
||||
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: [KTApp.getSettings()['colors']['theme']['base']["primary"]],
|
||||
grid: {
|
||||
tickColor: "#eee",
|
||||
borderWidth: 0,
|
||||
}
|
||||
};
|
||||
|
||||
var updateInterval = 30;
|
||||
var plot = $.plot($("#kt_flotcharts_4"), [getRandomData()], options);
|
||||
|
||||
function update() {
|
||||
plot.setData([getRandomData()]);
|
||||
plot.draw();
|
||||
setTimeout(update, updateInterval);
|
||||
}
|
||||
|
||||
update();
|
||||
}
|
||||
|
||||
var demo5 = function() {
|
||||
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($("#kt_flotcharts_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
|
||||
}], {
|
||||
colors: [KTApp.getSettings()['colors']['theme']['base']["danger"], KTApp.getSettings()['colors']['theme']['base']["primary"]],
|
||||
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() == "با استک" ? true : null;
|
||||
plotWithOptions();
|
||||
});
|
||||
|
||||
$(".graphControls input").click(function(e) {
|
||||
e.preventDefault();
|
||||
bars = $(this).val().indexOf("میله ها") != -1;
|
||||
lines = $(this).val().indexOf("خطوط") != -1;
|
||||
steps = $(this).val().indexOf("مراحل") != -1;
|
||||
plotWithOptions();
|
||||
});
|
||||
|
||||
plotWithOptions();
|
||||
}
|
||||
|
||||
var demo6 = function() {
|
||||
// bar chart:
|
||||
var data = GenerateSeries(0);
|
||||
|
||||
function GenerateSeries(added) {
|
||||
var data = [];
|
||||
var start = 100 + added;
|
||||
var end = 200 + added;
|
||||
|
||||
for (var 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 = {
|
||||
colors: [KTApp.getSettings()['colors']['theme']['base']["success"], KTApp.getSettings()['colors']['theme']['base']["primary"]],
|
||||
series: {
|
||||
bars: {
|
||||
show: true
|
||||
}
|
||||
},
|
||||
bars: {
|
||||
barWidth: 0.8,
|
||||
lineWidth: 0, // in pixels
|
||||
shadowSize: 0,
|
||||
align: 'left'
|
||||
},
|
||||
|
||||
grid: {
|
||||
tickColor: "#eee",
|
||||
borderColor: "#eee",
|
||||
borderWidth: 1
|
||||
}
|
||||
};
|
||||
|
||||
$.plot($("#kt_flotcharts_6"), [{
|
||||
data: data,
|
||||
lines: {
|
||||
lineWidth: 1,
|
||||
},
|
||||
shadowSize: 0
|
||||
}], options);
|
||||
}
|
||||
|
||||
var demo7 = function() {
|
||||
// horizontal bar chart:
|
||||
|
||||
var data1 = [
|
||||
[10, 10],
|
||||
[20, 20],
|
||||
[30, 30],
|
||||
[40, 40],
|
||||
[50, 50]
|
||||
];
|
||||
|
||||
var options = {
|
||||
colors: [KTApp.getSettings()['colors']['theme']['base']["primary"]],
|
||||
series: {
|
||||
bars: {
|
||||
show: true
|
||||
}
|
||||
},
|
||||
bars: {
|
||||
horizontal: true,
|
||||
barWidth: 6,
|
||||
lineWidth: 0, // in pixels
|
||||
shadowSize: 0,
|
||||
align: 'left'
|
||||
},
|
||||
grid: {
|
||||
tickColor: "#eee",
|
||||
borderColor: "#eee",
|
||||
borderWidth: 1
|
||||
}
|
||||
};
|
||||
|
||||
$.plot($("#kt_flotcharts_7"), [data1], options);
|
||||
}
|
||||
|
||||
var demo8 = function() {
|
||||
var data = [
|
||||
{label: "سی اس اس", data: 10, color: KTApp.getSettings()['colors']['theme']['base']["primary"]},
|
||||
{label: "اچ تی ام ال", data: 40, color: KTApp.getSettings()['colors']['theme']['base']["success"]},
|
||||
{label: "پی اچ پی", data: 30, color: KTApp.getSettings()['colors']['theme']['base']["danger"]},
|
||||
{label: "انگولار", data: 20, color: KTApp.getSettings()['colors']['theme']['base']["warning"]}
|
||||
];
|
||||
|
||||
$.plot($("#kt_flotcharts_8"), data, {
|
||||
series: {
|
||||
pie: {
|
||||
show: true
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
var demo9 = function() {
|
||||
var data = [
|
||||
{label: "آمریکا", data: 10, color: KTApp.getSettings()['colors']['theme']['base']["primary"]},
|
||||
{label: "آلمان", data: 25, color: KTApp.getSettings()['colors']['theme']['base']["success"]},
|
||||
{label: "نروژ", data: 30, color: KTApp.getSettings()['colors']['theme']['base']["danger"]},
|
||||
{label: "ایران", data: 15, color: KTApp.getSettings()['colors']['theme']['base']["warning"]},
|
||||
{label: "فرانسه", data: 10, color: KTApp.getSettings()['colors']['theme']['base']["info"]}
|
||||
];
|
||||
|
||||
$.plot($("#kt_flotcharts_9"), data, {
|
||||
series: {
|
||||
pie: {
|
||||
show: true
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
show: false
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
var demo10 = function() {
|
||||
var data = [
|
||||
{label: "گوگل", data: 20, color: KTApp.getSettings()['colors']['theme']['base']["primary"]},
|
||||
{label: "توئیتر", data: 35, color: KTApp.getSettings()['colors']['theme']['base']["success"]},
|
||||
{label: "لینکدین", data: 20, color: KTApp.getSettings()['colors']['theme']['base']["danger"]},
|
||||
{label: "اینستاگرام", data: 25, color: KTApp.getSettings()['colors']['theme']['base']["warning"]},
|
||||
{label: "فیس بوک", data: 10, color: KTApp.getSettings()['colors']['theme']['base']["info"]}
|
||||
];
|
||||
|
||||
$.plot($("#kt_flotcharts_10"), 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
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
var demo11 = function() {
|
||||
var data = [
|
||||
{label: "وی یو ای", data: 13, color: KTApp.getSettings()['colors']['theme']['base']["danger"]},
|
||||
{label: "انگولار", data: 25, color: KTApp.getSettings()['colors']['theme']['base']["success"]},
|
||||
{label: "ری اکت", data: 15, color: KTApp.getSettings()['colors']['theme']['base']["primary"]},
|
||||
{label: "ایمبر", data: 10, color: KTApp.getSettings()['colors']['theme']['base']["warning"]},
|
||||
{label: "یک وان", data: 8, color: KTApp.getSettings()['colors']['theme']['base']["info"]}
|
||||
];
|
||||
|
||||
$.plot($("#kt_flotcharts_11"), 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
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
return {
|
||||
// public functions
|
||||
init: function() {
|
||||
// default charts
|
||||
demo1();
|
||||
demo2();
|
||||
demo3();
|
||||
demo4();
|
||||
demo5();
|
||||
demo6();
|
||||
demo7();
|
||||
|
||||
// pie charts
|
||||
demo8();
|
||||
demo9();
|
||||
demo10();
|
||||
demo11();
|
||||
}
|
||||
};
|
||||
}();
|
||||
|
||||
jQuery(document).ready(function() {
|
||||
KTFlotchartsDemo.init();
|
||||
});
|
||||
170
Content/Panel/js/pages/features/charts/google-charts.js
Normal file
170
Content/Panel/js/pages/features/charts/google-charts.js
Normal file
@ -0,0 +1,170 @@
|
||||
"use strict";
|
||||
// Class definition
|
||||
var KTGoogleChartsDemo = function() {
|
||||
|
||||
// Private functions
|
||||
|
||||
var main = function() {
|
||||
// GOOGLE CHARTS INIT
|
||||
google.load('visualization', '1', {
|
||||
packages: ['corechart', 'bar', 'line']
|
||||
});
|
||||
|
||||
google.setOnLoadCallback(function() {
|
||||
KTGoogleChartsDemo.runDemos();
|
||||
});
|
||||
}
|
||||
|
||||
var demoColumnCharts = function() {
|
||||
// COLUMN CHART
|
||||
var data = new google.visualization.DataTable();
|
||||
data.addColumn('timeofday', 'Time of Day');
|
||||
data.addColumn('number', 'Motivation Level');
|
||||
data.addColumn('number', 'Energy Level');
|
||||
|
||||
data.addRows([
|
||||
[{
|
||||
v: [8, 0, 0],
|
||||
f: '8 am'
|
||||
}, 1, .25],
|
||||
[{
|
||||
v: [9, 0, 0],
|
||||
f: '9 am'
|
||||
}, 2, .5],
|
||||
[{
|
||||
v: [10, 0, 0],
|
||||
f: '10 am'
|
||||
}, 3, 1],
|
||||
[{
|
||||
v: [11, 0, 0],
|
||||
f: '11 am'
|
||||
}, 4, 2.25],
|
||||
[{
|
||||
v: [12, 0, 0],
|
||||
f: '12 pm'
|
||||
}, 5, 2.25],
|
||||
[{
|
||||
v: [13, 0, 0],
|
||||
f: '1 pm'
|
||||
}, 6, 3],
|
||||
[{
|
||||
v: [14, 0, 0],
|
||||
f: '2 pm'
|
||||
}, 7, 4],
|
||||
[{
|
||||
v: [15, 0, 0],
|
||||
f: '3 pm'
|
||||
}, 8, 5.25],
|
||||
[{
|
||||
v: [16, 0, 0],
|
||||
f: '4 pm'
|
||||
}, 9, 7.5],
|
||||
[{
|
||||
v: [17, 0, 0],
|
||||
f: '5 pm'
|
||||
}, 10, 10],
|
||||
]);
|
||||
|
||||
var options = {
|
||||
title: 'Motivation and Energy Level Throughout the Day',
|
||||
focusTarget: 'category',
|
||||
hAxis: {
|
||||
title: 'Time of Day',
|
||||
format: 'h:mm a',
|
||||
viewWindow: {
|
||||
min: [7, 30, 0],
|
||||
max: [17, 30, 0]
|
||||
},
|
||||
},
|
||||
vAxis: {
|
||||
title: 'Rating (scale of 1-10)'
|
||||
},
|
||||
colors: ['#6e4ff5', '#fe3995']
|
||||
};
|
||||
|
||||
var chart = new google.visualization.ColumnChart(document.getElementById('kt_gchart_1'));
|
||||
chart.draw(data, options);
|
||||
|
||||
var chart = new google.visualization.ColumnChart(document.getElementById('kt_gchart_2'));
|
||||
chart.draw(data, options);
|
||||
}
|
||||
|
||||
var demoPieCharts = function() {
|
||||
var data = google.visualization.arrayToDataTable([
|
||||
['Task', 'Hours per Day'],
|
||||
['Work', 11],
|
||||
['Eat', 2],
|
||||
['Commute', 2],
|
||||
['Watch TV', 2],
|
||||
['Sleep', 7]
|
||||
]);
|
||||
|
||||
var options = {
|
||||
title: 'My Daily Activities',
|
||||
colors: ['#fe3995', '#f6aa33', '#6e4ff5', '#2abe81', '#c7d2e7', '#593ae1']
|
||||
};
|
||||
|
||||
var chart = new google.visualization.PieChart(document.getElementById('kt_gchart_3'));
|
||||
chart.draw(data, options);
|
||||
|
||||
var options = {
|
||||
pieHole: 0.4,
|
||||
colors: ['#fe3995', '#f6aa33', '#6e4ff5', '#2abe81', '#c7d2e7', '#593ae1']
|
||||
};
|
||||
|
||||
var chart = new google.visualization.PieChart(document.getElementById('kt_gchart_4'));
|
||||
chart.draw(data, options);
|
||||
}
|
||||
|
||||
var demoLineCharts = function() {
|
||||
// LINE CHART
|
||||
var data = new google.visualization.DataTable();
|
||||
data.addColumn('number', 'Day');
|
||||
data.addColumn('number', 'Guardians of the Galaxy');
|
||||
data.addColumn('number', 'The Avengers');
|
||||
data.addColumn('number', 'Transformers: Age of Extinction');
|
||||
|
||||
data.addRows([
|
||||
[1, 37.8, 80.8, 41.8],
|
||||
[2, 30.9, 69.5, 32.4],
|
||||
[3, 25.4, 57, 25.7],
|
||||
[4, 11.7, 18.8, 10.5],
|
||||
[5, 11.9, 17.6, 10.4],
|
||||
[6, 8.8, 13.6, 7.7],
|
||||
[7, 7.6, 12.3, 9.6],
|
||||
[8, 12.3, 29.2, 10.6],
|
||||
[9, 16.9, 42.9, 14.8],
|
||||
[10, 12.8, 30.9, 11.6],
|
||||
[11, 5.3, 7.9, 4.7],
|
||||
[12, 6.6, 8.4, 5.2],
|
||||
[13, 4.8, 6.3, 3.6],
|
||||
[14, 4.2, 6.2, 3.4]
|
||||
]);
|
||||
|
||||
var options = {
|
||||
chart: {
|
||||
title: 'Box Office Earnings in First Two Weeks of Opening',
|
||||
subtitle: 'in millions of dollars (USD)'
|
||||
},
|
||||
colors: ['#6e4ff5', '#f6aa33', '#fe3995']
|
||||
};
|
||||
|
||||
var chart = new google.charts.Line(document.getElementById('kt_gchart_5'));
|
||||
chart.draw(data, options);
|
||||
}
|
||||
|
||||
return {
|
||||
// public functions
|
||||
init: function() {
|
||||
main();
|
||||
},
|
||||
|
||||
runDemos: function() {
|
||||
demoColumnCharts();
|
||||
demoLineCharts();
|
||||
demoPieCharts();
|
||||
}
|
||||
};
|
||||
}();
|
||||
|
||||
KTGoogleChartsDemo.init();
|
||||
74
Content/Panel/js/pages/features/custom/spinners.js
Normal file
74
Content/Panel/js/pages/features/custom/spinners.js
Normal file
@ -0,0 +1,74 @@
|
||||
"use strict";
|
||||
|
||||
// Class definition
|
||||
|
||||
var KTSpinnersDemo = function () {
|
||||
// Private functions
|
||||
|
||||
// Demos
|
||||
var demo1 = function () {
|
||||
// Demo 1
|
||||
var btn = KTUtil.getById("kt_btn_1");
|
||||
|
||||
KTUtil.addEvent(btn, "click", function() {
|
||||
KTUtil.btnWait(btn, "spinner spinner-right spinner-white pr-15", "لطفا صبر کنید");
|
||||
|
||||
setTimeout(function() {
|
||||
KTUtil.btnRelease(btn);
|
||||
}, 1000);
|
||||
});
|
||||
}
|
||||
|
||||
var demo2 = function () {
|
||||
// Demo 2
|
||||
var btn = KTUtil.getById("kt_btn_2");
|
||||
|
||||
KTUtil.addEvent(btn, "click", function() {
|
||||
KTUtil.btnWait(btn, "spinner spinner-dark spinner-right pr-15", "Loading");
|
||||
|
||||
setTimeout(function() {
|
||||
KTUtil.btnRelease(btn);
|
||||
}, 1000);
|
||||
});
|
||||
}
|
||||
|
||||
var demo3 = function () {
|
||||
// Demo 3
|
||||
var btn = KTUtil.getById("kt_btn_3");
|
||||
|
||||
KTUtil.addEvent(btn, "click", function() {
|
||||
KTUtil.btnWait(btn, "spinner spinner-left spinner-darker-success pl-15", "Disabled...");
|
||||
|
||||
setTimeout(function() {
|
||||
KTUtil.btnRelease(btn);
|
||||
}, 1000);
|
||||
});
|
||||
}
|
||||
|
||||
var demo4 = function () {
|
||||
// Demo 4
|
||||
var btn = KTUtil.getById("kt_btn_4");
|
||||
|
||||
KTUtil.addEvent(btn, "click", function() {
|
||||
KTUtil.btnWait(btn, "spinner spinner-left spinner-darker-danger pl-15", "لطفا صبر کنید");
|
||||
|
||||
setTimeout(function() {
|
||||
KTUtil.btnRelease(btn);
|
||||
}, 1000);
|
||||
});
|
||||
}
|
||||
|
||||
return {
|
||||
// public functions
|
||||
init: function() {
|
||||
demo1();
|
||||
demo2();
|
||||
demo3();
|
||||
demo4();
|
||||
}
|
||||
};
|
||||
}();
|
||||
|
||||
jQuery(document).ready(function() {
|
||||
KTSpinnersDemo.init();
|
||||
});
|
||||
223
Content/Panel/js/pages/features/maps/google-maps.js
Normal file
223
Content/Panel/js/pages/features/maps/google-maps.js
Normal file
@ -0,0 +1,223 @@
|
||||
"use strict";
|
||||
|
||||
// Class definition
|
||||
var KTGoogleMapsDemo = function() {
|
||||
|
||||
// Private functions
|
||||
|
||||
var demo1 = function() {
|
||||
var map = new GMaps({
|
||||
div: '#kt_gmap_1',
|
||||
lat: -12.043333,
|
||||
lng: -77.028333
|
||||
});
|
||||
}
|
||||
|
||||
var demo2 = function() {
|
||||
var map = new GMaps({
|
||||
div: '#kt_gmap_2',
|
||||
zoom: 16,
|
||||
lat: -12.043333,
|
||||
lng: -77.028333,
|
||||
click: function(e) {
|
||||
alert('click');
|
||||
},
|
||||
dragend: function(e) {
|
||||
alert('dragend');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
var demo3 = function() {
|
||||
var map = new GMaps({
|
||||
div: '#kt_gmap_3',
|
||||
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 demo4 = function() {
|
||||
var map = new GMaps({
|
||||
div: '#kt_gmap_4',
|
||||
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 demo5 = function() {
|
||||
var map = new GMaps({
|
||||
div: '#kt_gmap_5',
|
||||
lat: -12.043333,
|
||||
lng: -77.028333,
|
||||
click: function(e) {
|
||||
console.log(e);
|
||||
}
|
||||
});
|
||||
|
||||
var 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 demo6 = function() {
|
||||
var map = new GMaps({
|
||||
div: '#kt_gmap_6',
|
||||
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 demo7 = function() {
|
||||
var map = new GMaps({
|
||||
div: '#kt_gmap_7',
|
||||
lat: -12.043333,
|
||||
lng: -77.028333
|
||||
});
|
||||
$('#kt_gmap_7_btn').click(function(e) {
|
||||
e.preventDefault();
|
||||
KTUtil.scrollTo('kt_gmap_7_btn', 400);
|
||||
map.travelRoute({
|
||||
origin: [-12.044012922866312, -77.02470665341184],
|
||||
destination: [-12.090814532191756, -77.02271108990476],
|
||||
travelMode: 'driving',
|
||||
step: function(e) {
|
||||
$('#kt_gmap_7_routes').append('<li>' + e.instructions + '</li>');
|
||||
$('#kt_gmap_7_routes 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
|
||||
});
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
var demo8 = function() {
|
||||
var map = new GMaps({
|
||||
div: '#kt_gmap_8',
|
||||
lat: -12.043333,
|
||||
lng: -77.028333
|
||||
});
|
||||
|
||||
var handleAction = function() {
|
||||
var text = $.trim($('#kt_gmap_8_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()
|
||||
});
|
||||
KTUtil.scrollTo('kt_gmap_8');
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
$('#kt_gmap_8_btn').click(function(e) {
|
||||
e.preventDefault();
|
||||
handleAction();
|
||||
});
|
||||
|
||||
$("#kt_gmap_8_address").keypress(function(e) {
|
||||
var keycode = (e.keyCode ? e.keyCode : e.which);
|
||||
if (keycode == '13') {
|
||||
e.preventDefault();
|
||||
handleAction();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
return {
|
||||
// public functions
|
||||
init: function() {
|
||||
// default charts
|
||||
demo1();
|
||||
demo2();
|
||||
demo3();
|
||||
demo4();
|
||||
demo5();
|
||||
demo6();
|
||||
demo7();
|
||||
demo8();
|
||||
}
|
||||
};
|
||||
}();
|
||||
|
||||
jQuery(document).ready(function() {
|
||||
KTGoogleMapsDemo.init();
|
||||
});
|
||||
250
Content/Panel/js/pages/features/maps/jqvmap.js
Normal file
250
Content/Panel/js/pages/features/maps/jqvmap.js
Normal file
@ -0,0 +1,250 @@
|
||||
"use strict";
|
||||
|
||||
// Class definition
|
||||
var KTjQVMapDemo = function() {
|
||||
|
||||
var sample_data = {
|
||||
"af": "16.63",
|
||||
"al": "11.58",
|
||||
"dz": "158.97",
|
||||
"ao": "85.81",
|
||||
"ag": "1.1",
|
||||
"ar": "351.02",
|
||||
"am": "8.83",
|
||||
"au": "1219.72",
|
||||
"at": "366.26",
|
||||
"az": "52.17",
|
||||
"bs": "7.54",
|
||||
"bh": "21.73",
|
||||
"bd": "105.4",
|
||||
"bb": "3.96",
|
||||
"by": "52.89",
|
||||
"be": "461.33",
|
||||
"bz": "1.43",
|
||||
"bj": "6.49",
|
||||
"bt": "1.4",
|
||||
"bo": "19.18",
|
||||
"ba": "16.2",
|
||||
"bw": "12.5",
|
||||
"br": "2023.53",
|
||||
"bn": "11.96",
|
||||
"bg": "44.84",
|
||||
"bf": "8.67",
|
||||
"bi": "1.47",
|
||||
"kh": "11.36",
|
||||
"cm": "21.88",
|
||||
"ca": "1563.66",
|
||||
"cv": "1.57",
|
||||
"cf": "2.11",
|
||||
"td": "7.59",
|
||||
"cl": "199.18",
|
||||
"cn": "5745.13",
|
||||
"co": "283.11",
|
||||
"km": "0.56",
|
||||
"cd": "12.6",
|
||||
"cg": "11.88",
|
||||
"cr": "35.02",
|
||||
"ci": "22.38",
|
||||
"hr": "59.92",
|
||||
"cy": "22.75",
|
||||
"cz": "195.23",
|
||||
"dk": "304.56",
|
||||
"dj": "1.14",
|
||||
"dm": "0.38",
|
||||
"do": "50.87",
|
||||
"ec": "61.49",
|
||||
"eg": "216.83",
|
||||
"sv": "21.8",
|
||||
"gq": "14.55",
|
||||
"er": "2.25",
|
||||
"ee": "19.22",
|
||||
"et": "30.94",
|
||||
"fj": "3.15",
|
||||
"fi": "231.98",
|
||||
"fr": "2555.44",
|
||||
"ga": "12.56",
|
||||
"gm": "1.04",
|
||||
"ge": "11.23",
|
||||
"de": "3305.9",
|
||||
"gh": "18.06",
|
||||
"gr": "305.01",
|
||||
"gd": "0.65",
|
||||
"gt": "40.77",
|
||||
"gn": "4.34",
|
||||
"gw": "0.83",
|
||||
"gy": "2.2",
|
||||
"ht": "6.5",
|
||||
"hn": "15.34",
|
||||
"hk": "226.49",
|
||||
"hu": "132.28",
|
||||
"is": "12.77",
|
||||
"in": "1430.02",
|
||||
"id": "695.06",
|
||||
"ir": "337.9",
|
||||
"iq": "84.14",
|
||||
"ie": "204.14",
|
||||
"il": "201.25",
|
||||
"it": "2036.69",
|
||||
"jm": "13.74",
|
||||
"jp": "5390.9",
|
||||
"jo": "27.13",
|
||||
"kz": "129.76",
|
||||
"ke": "32.42",
|
||||
"ki": "0.15",
|
||||
"kr": "986.26",
|
||||
"undefined": "5.73",
|
||||
"kw": "117.32",
|
||||
"kg": "4.44",
|
||||
"la": "6.34",
|
||||
"lv": "23.39",
|
||||
"lb": "39.15",
|
||||
"ls": "1.8",
|
||||
"lr": "0.98",
|
||||
"ly": "77.91",
|
||||
"lt": "35.73",
|
||||
"lu": "52.43",
|
||||
"mk": "9.58",
|
||||
"mg": "8.33",
|
||||
"mw": "5.04",
|
||||
"my": "218.95",
|
||||
"mv": "1.43",
|
||||
"ml": "9.08",
|
||||
"mt": "7.8",
|
||||
"mr": "3.49",
|
||||
"mu": "9.43",
|
||||
"mx": "1004.04",
|
||||
"md": "5.36",
|
||||
"mn": "5.81",
|
||||
"me": "3.88",
|
||||
"ma": "91.7",
|
||||
"mz": "10.21",
|
||||
"mm": "35.65",
|
||||
"na": "11.45",
|
||||
"np": "15.11",
|
||||
"nl": "770.31",
|
||||
"nz": "138",
|
||||
"ni": "6.38",
|
||||
"ne": "5.6",
|
||||
"ng": "206.66",
|
||||
"no": "413.51",
|
||||
"om": "53.78",
|
||||
"pk": "174.79",
|
||||
"pa": "27.2",
|
||||
"pg": "8.81",
|
||||
"py": "17.17",
|
||||
"pe": "153.55",
|
||||
"ph": "189.06",
|
||||
"pl": "438.88",
|
||||
"pt": "223.7",
|
||||
"qa": "126.52",
|
||||
"ro": "158.39",
|
||||
"ru": "1476.91",
|
||||
"rw": "5.69",
|
||||
"ws": "0.55",
|
||||
"st": "0.19",
|
||||
"sa": "434.44",
|
||||
"sn": "12.66",
|
||||
"rs": "38.92",
|
||||
"sc": "0.92",
|
||||
"sl": "1.9",
|
||||
"sg": "217.38",
|
||||
"sk": "86.26",
|
||||
"si": "46.44",
|
||||
"sb": "0.67",
|
||||
"za": "354.41",
|
||||
"es": "1374.78",
|
||||
"lk": "48.24",
|
||||
"kn": "0.56",
|
||||
"lc": "1",
|
||||
"vc": "0.58",
|
||||
"sd": "65.93",
|
||||
"sr": "3.3",
|
||||
"sz": "3.17",
|
||||
"se": "444.59",
|
||||
"ch": "522.44",
|
||||
"sy": "59.63",
|
||||
"tw": "426.98",
|
||||
"tj": "5.58",
|
||||
"tz": "22.43",
|
||||
"th": "312.61",
|
||||
"tl": "0.62",
|
||||
"tg": "3.07",
|
||||
"to": "0.3",
|
||||
"tt": "21.2",
|
||||
"tn": "43.86",
|
||||
"tr": "729.05",
|
||||
"tm": 0,
|
||||
"ug": "17.12",
|
||||
"ua": "136.56",
|
||||
"ae": "239.65",
|
||||
"gb": "2258.57",
|
||||
"us": "14624.18",
|
||||
"uy": "40.71",
|
||||
"uz": "37.72",
|
||||
"vu": "0.72",
|
||||
"ve": "285.21",
|
||||
"vn": "101.99",
|
||||
"ye": "30.02",
|
||||
"zm": "15.69",
|
||||
"zw": "5.57"
|
||||
};
|
||||
|
||||
// Private functions
|
||||
|
||||
var setupMap = function(name) {
|
||||
var data = {
|
||||
map: 'world_en',
|
||||
backgroundColor: null,
|
||||
color: '#ffffff',
|
||||
hoverOpacity: 0.7,
|
||||
selectedColor: '#666666',
|
||||
enableZoom: true,
|
||||
showTooltip: true,
|
||||
values: sample_data,
|
||||
scaleColors: ['#C8EEFF', '#006491'],
|
||||
normalizeFunction: 'polynomial',
|
||||
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('#kt_jqvmap_' + name);
|
||||
|
||||
map.width(map.parent().width());
|
||||
map.vectorMap(data);
|
||||
}
|
||||
|
||||
var setupMaps = function() {
|
||||
setupMap("world");
|
||||
setupMap("usa");
|
||||
setupMap("europe");
|
||||
setupMap("russia");
|
||||
setupMap("germany");
|
||||
}
|
||||
|
||||
return {
|
||||
// public functions
|
||||
init: function() {
|
||||
// default charts
|
||||
setupMaps();
|
||||
|
||||
KTUtil.addResizeHandler(function() {
|
||||
setupMaps();
|
||||
});
|
||||
}
|
||||
};
|
||||
}();
|
||||
|
||||
jQuery(document).ready(function() {
|
||||
KTjQVMapDemo.init();
|
||||
});
|
||||
22
Content/Panel/js/pages/features/maps/jvectormap.js
Normal file
22
Content/Panel/js/pages/features/maps/jvectormap.js
Normal file
@ -0,0 +1,22 @@
|
||||
"use strict";
|
||||
|
||||
// Class definition
|
||||
var KTjVectorMap = function() {
|
||||
|
||||
// Private functions
|
||||
|
||||
var demo1 = function() {
|
||||
}
|
||||
|
||||
return {
|
||||
// public functions
|
||||
init: function() {
|
||||
// default charts
|
||||
demo1();
|
||||
}
|
||||
};
|
||||
}();
|
||||
|
||||
jQuery(document).ready(function() {
|
||||
KTjVectorMap.init();
|
||||
});
|
||||
280
Content/Panel/js/pages/features/maps/leaflet.js
Normal file
280
Content/Panel/js/pages/features/maps/leaflet.js
Normal file
@ -0,0 +1,280 @@
|
||||
"use strict";
|
||||
|
||||
// Class definition
|
||||
var KTLeaflet = function () {
|
||||
|
||||
// Private functions
|
||||
var demo1 = function () {
|
||||
// define leaflet
|
||||
var leaflet = L.map('kt_leaflet_1', {
|
||||
center: [-37.8179793, 144.9671293],
|
||||
zoom: 11
|
||||
});
|
||||
|
||||
// set leaflet tile layer
|
||||
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
|
||||
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>'
|
||||
}).addTo(leaflet);
|
||||
|
||||
// set custom SVG icon marker
|
||||
var leafletIcon = L.divIcon({
|
||||
html: `<span class="svg-icon svg-icon-danger svg-icon-3x"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><rect x="0" y="24" width="24" height="0"/><path d="M5,10.5 C5,6 8,3 12.5,3 C17,3 20,6.75 20,10.5 C20,12.8325623 17.8236613,16.03566 13.470984,20.1092932 C12.9154018,20.6292577 12.0585054,20.6508331 11.4774555,20.1594925 C7.15915182,16.5078313 5,13.2880005 5,10.5 Z M12.5,12 C13.8807119,12 15,10.8807119 15,9.5 C15,8.11928813 13.8807119,7 12.5,7 C11.1192881,7 10,8.11928813 10,9.5 C10,10.8807119 11.1192881,12 12.5,12 Z" fill="#000000" fill-rule="nonzero"/></g></svg></span>`,
|
||||
bgPos: [10, 10],
|
||||
iconAnchor: [20, 37],
|
||||
popupAnchor: [0, -37],
|
||||
className: 'leaflet-marker'
|
||||
});
|
||||
|
||||
// bind marker with popup
|
||||
var marker = L.marker([-37.8179793, 144.9671293], { icon: leafletIcon }).addTo(leaflet);
|
||||
marker.bindPopup("<b>Flinder's Station</b><br/>Melbourne, Victoria").openPopup();
|
||||
}
|
||||
|
||||
var demo2 = function () {
|
||||
// define leaflet
|
||||
var leaflet = L.map('kt_leaflet_2', {
|
||||
center: [51.5073219, -0.1276474],
|
||||
zoom: 11
|
||||
})
|
||||
|
||||
// set leaflet tile layer
|
||||
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
|
||||
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>'
|
||||
}).addTo(leaflet);
|
||||
|
||||
// set custom SVG icon marker
|
||||
var leafletIcon = L.divIcon({
|
||||
html: `<span class="svg-icon svg-icon-danger svg-icon-3x"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><rect x="0" y="24" width="24" height="0"/><path d="M5,10.5 C5,6 8,3 12.5,3 C17,3 20,6.75 20,10.5 C20,12.8325623 17.8236613,16.03566 13.470984,20.1092932 C12.9154018,20.6292577 12.0585054,20.6508331 11.4774555,20.1594925 C7.15915182,16.5078313 5,13.2880005 5,10.5 Z M12.5,12 C13.8807119,12 15,10.8807119 15,9.5 C15,8.11928813 13.8807119,7 12.5,7 C11.1192881,7 10,8.11928813 10,9.5 C10,10.8807119 11.1192881,12 12.5,12 Z" fill="#000000" fill-rule="nonzero"/></g></svg></span>`,
|
||||
bgPos: [10, 10],
|
||||
iconAnchor: [20, 37],
|
||||
popupAnchor: [0, -37],
|
||||
className: 'leaflet-marker'
|
||||
});
|
||||
|
||||
// bind marker with popup
|
||||
var marker = L.marker([51.5073219, -0.1276474], { icon: leafletIcon }).addTo(leaflet);
|
||||
marker.bindPopup("<b>City of London</b>").openPopup();
|
||||
|
||||
// set circle polygon
|
||||
var circle = L.circle([51.5073219, -0.1276474], {
|
||||
color: '#4A7DFF',
|
||||
fillColor: '#6993FF',
|
||||
fillOpacity: 0.5,
|
||||
radius: 700
|
||||
}).addTo(leaflet);
|
||||
}
|
||||
|
||||
var demo3 = function () {
|
||||
// define leaflet
|
||||
var leaflet = L.map('kt_leaflet_3', {
|
||||
center: [47.339, 11.602],
|
||||
zoom: 3
|
||||
})
|
||||
|
||||
// set leaflet tile layer
|
||||
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
|
||||
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>'
|
||||
}).addTo(leaflet);
|
||||
|
||||
|
||||
// set custom SVG icon marker
|
||||
var leafletIcon1 = L.divIcon({
|
||||
html: `<span class="svg-icon svg-icon-danger svg-icon-3x"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><rect x="0" y="24" width="24" height="0"/><path d="M5,10.5 C5,6 8,3 12.5,3 C17,3 20,6.75 20,10.5 C20,12.8325623 17.8236613,16.03566 13.470984,20.1092932 C12.9154018,20.6292577 12.0585054,20.6508331 11.4774555,20.1594925 C7.15915182,16.5078313 5,13.2880005 5,10.5 Z M12.5,12 C13.8807119,12 15,10.8807119 15,9.5 C15,8.11928813 13.8807119,7 12.5,7 C11.1192881,7 10,8.11928813 10,9.5 C10,10.8807119 11.1192881,12 12.5,12 Z" fill="#000000" fill-rule="nonzero"/></g></svg></span>`,
|
||||
bgPos: [10, 10],
|
||||
iconAnchor: [20, 37],
|
||||
popupAnchor: [0, -37],
|
||||
className: 'leaflet-marker'
|
||||
});
|
||||
|
||||
var leafletIcon2 = L.divIcon({
|
||||
html: `<span class="svg-icon svg-icon-primary svg-icon-3x"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><rect x="0" y="24" width="24" height="0"/><path d="M5,10.5 C5,6 8,3 12.5,3 C17,3 20,6.75 20,10.5 C20,12.8325623 17.8236613,16.03566 13.470984,20.1092932 C12.9154018,20.6292577 12.0585054,20.6508331 11.4774555,20.1594925 C7.15915182,16.5078313 5,13.2880005 5,10.5 Z M12.5,12 C13.8807119,12 15,10.8807119 15,9.5 C15,8.11928813 13.8807119,7 12.5,7 C11.1192881,7 10,8.11928813 10,9.5 C10,10.8807119 11.1192881,12 12.5,12 Z" fill="#000000" fill-rule="nonzero"/></g></svg></span>`,
|
||||
bgPos: [10, 10],
|
||||
iconAnchor: [20, 37],
|
||||
popupAnchor: [0, -37],
|
||||
className: 'leaflet-marker'
|
||||
});
|
||||
|
||||
var leafletIcon3 = L.divIcon({
|
||||
html: `<span class="svg-icon svg-icon-warning svg-icon-3x"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><rect x="0" y="24" width="24" height="0"/><path d="M5,10.5 C5,6 8,3 12.5,3 C17,3 20,6.75 20,10.5 C20,12.8325623 17.8236613,16.03566 13.470984,20.1092932 C12.9154018,20.6292577 12.0585054,20.6508331 11.4774555,20.1594925 C7.15915182,16.5078313 5,13.2880005 5,10.5 Z M12.5,12 C13.8807119,12 15,10.8807119 15,9.5 C15,8.11928813 13.8807119,7 12.5,7 C11.1192881,7 10,8.11928813 10,9.5 C10,10.8807119 11.1192881,12 12.5,12 Z" fill="#000000" fill-rule="nonzero"/></g></svg></span>`,
|
||||
bgPos: [10, 10],
|
||||
iconAnchor: [20, 37],
|
||||
popupAnchor: [0, -37],
|
||||
className: 'leaflet-marker'
|
||||
});
|
||||
|
||||
var leafletIcon4 = L.divIcon({
|
||||
html: `<span class="svg-icon svg-icon-success svg-icon-3x"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><rect x="0" y="24" width="24" height="0"/><path d="M5,10.5 C5,6 8,3 12.5,3 C17,3 20,6.75 20,10.5 C20,12.8325623 17.8236613,16.03566 13.470984,20.1092932 C12.9154018,20.6292577 12.0585054,20.6508331 11.4774555,20.1594925 C7.15915182,16.5078313 5,13.2880005 5,10.5 Z M12.5,12 C13.8807119,12 15,10.8807119 15,9.5 C15,8.11928813 13.8807119,7 12.5,7 C11.1192881,7 10,8.11928813 10,9.5 C10,10.8807119 11.1192881,12 12.5,12 Z" fill="#000000" fill-rule="nonzero"/></g></svg></span>`,
|
||||
bgPos: [10, 10],
|
||||
iconAnchor: [20, 37],
|
||||
popupAnchor: [0, -37],
|
||||
className: 'leaflet-marker'
|
||||
});
|
||||
|
||||
// bind markers with popup
|
||||
var marker1 = L.marker([39.3262345, -4.8380649], { icon: leafletIcon1 }).addTo(leaflet);
|
||||
var marker2 = L.marker([41.804, 13.843], { icon: leafletIcon2 }).addTo(leaflet);
|
||||
var marker3 = L.marker([51.11, 10.371], { icon: leafletIcon3 }).addTo(leaflet);
|
||||
var marker4 = L.marker([46.74, 2.417], { icon: leafletIcon4 }).addTo(leaflet);
|
||||
|
||||
marker1.bindPopup("Spain", { closeButton: false });
|
||||
marker2.bindPopup("Italy", { closeButton: false });
|
||||
marker3.bindPopup("Germany", { closeButton: false });
|
||||
marker4.bindPopup("France", { closeButton: false });
|
||||
|
||||
L.control.scale().addTo(leaflet);
|
||||
}
|
||||
|
||||
var demo4 = function () {
|
||||
// define leaflet
|
||||
var leaflet = L.map('kt_leaflet_4', {
|
||||
center: [51.505, -0.09],
|
||||
zoom: 13
|
||||
})
|
||||
|
||||
// set leaflet tile layer
|
||||
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
|
||||
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>'
|
||||
}).addTo(leaflet);
|
||||
|
||||
// set custom SVG icon marker
|
||||
var leafletIcon = L.divIcon({
|
||||
html: `<span class="svg-icon svg-icon-danger svg-icon-3x"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><rect x="0" y="24" width="24" height="0"/><path d="M5,10.5 C5,6 8,3 12.5,3 C17,3 20,6.75 20,10.5 C20,12.8325623 17.8236613,16.03566 13.470984,20.1092932 C12.9154018,20.6292577 12.0585054,20.6508331 11.4774555,20.1594925 C7.15915182,16.5078313 5,13.2880005 5,10.5 Z M12.5,12 C13.8807119,12 15,10.8807119 15,9.5 C15,8.11928813 13.8807119,7 12.5,7 C11.1192881,7 10,8.11928813 10,9.5 C10,10.8807119 11.1192881,12 12.5,12 Z" fill="#000000" fill-rule="nonzero"/></g></svg></span>`,
|
||||
bgPos: [10, 10],
|
||||
iconAnchor: [20, 37],
|
||||
popupAnchor: [0, -37],
|
||||
className: 'leaflet-marker'
|
||||
});
|
||||
|
||||
// bind marker with popup
|
||||
var marker = L.marker([51.5, -0.09], { icon: leafletIcon }).addTo(leaflet);
|
||||
|
||||
// set circle polygon
|
||||
var circle = L.circle([51.508, -0.11], {
|
||||
color: '#4A7DFF',
|
||||
fillColor: '#6993FF',
|
||||
fillOpacity: 0.5,
|
||||
radius: 700
|
||||
}).addTo(leaflet);
|
||||
|
||||
// set polygon
|
||||
var polygon = L.polygon([
|
||||
[51.509, -0.08],
|
||||
[51.503, -0.06],
|
||||
[51.51, -0.047]
|
||||
]).addTo(leaflet);
|
||||
}
|
||||
|
||||
var demo5 = function () {
|
||||
// Define Map Location
|
||||
var leaflet = L.map('kt_leaflet_5', {
|
||||
center: [40.725, -73.985],
|
||||
zoom: 13
|
||||
});
|
||||
|
||||
// Init Leaflet Map
|
||||
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
|
||||
attribution: '© <a href="https://osm.org/copyright">OpenStreetMap</a> contributors'
|
||||
}).addTo(leaflet);
|
||||
|
||||
// Set Geocoding
|
||||
var geocodeService;
|
||||
if (typeof L.esri.Geocoding === 'undefined') {
|
||||
geocodeService = L.esri.geocodeService();
|
||||
} else {
|
||||
geocodeService = L.esri.Geocoding.geocodeService();
|
||||
}
|
||||
|
||||
// Define Marker Layer
|
||||
var markerLayer = L.layerGroup().addTo(leaflet);
|
||||
|
||||
// Set Custom SVG icon marker
|
||||
var leafletIcon = L.divIcon({
|
||||
html: `<span class="svg-icon svg-icon-danger svg-icon-3x"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><rect x="0" y="24" width="24" height="0"/><path d="M5,10.5 C5,6 8,3 12.5,3 C17,3 20,6.75 20,10.5 C20,12.8325623 17.8236613,16.03566 13.470984,20.1092932 C12.9154018,20.6292577 12.0585054,20.6508331 11.4774555,20.1594925 C7.15915182,16.5078313 5,13.2880005 5,10.5 Z M12.5,12 C13.8807119,12 15,10.8807119 15,9.5 C15,8.11928813 13.8807119,7 12.5,7 C11.1192881,7 10,8.11928813 10,9.5 C10,10.8807119 11.1192881,12 12.5,12 Z" fill="#000000" fill-rule="nonzero"/></g></svg></span>`,
|
||||
bgPos: [10, 10],
|
||||
iconAnchor: [20, 37],
|
||||
popupAnchor: [0, -37],
|
||||
className: 'leaflet-marker'
|
||||
});
|
||||
|
||||
// Map onClick Action
|
||||
leaflet.on('click', function (e) {
|
||||
geocodeService.reverse().latlng(e.latlng).run(function (error, result) {
|
||||
if (error) {
|
||||
return;
|
||||
}
|
||||
markerLayer.clearLayers(); // remove this line to allow multi-markers on click
|
||||
L.marker(result.latlng, { icon: leafletIcon }).addTo(markerLayer).bindPopup(result.address.Match_addr, { closeButton: false }).openPopup();
|
||||
alert(`You've clicked on the following address: ${result.address.Match_addr}`);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
var demo6 = function () {
|
||||
// add sample location data
|
||||
var data = [
|
||||
{ "loc": [41.575330, 13.102411], "title": "aquamarine" },
|
||||
{ "loc": [41.575730, 13.002411], "title": "black" },
|
||||
{ "loc": [41.807149, 13.162994], "title": "blue" },
|
||||
{ "loc": [41.507149, 13.172994], "title": "chocolate" },
|
||||
{ "loc": [41.847149, 14.132994], "title": "coral" },
|
||||
{ "loc": [41.219190, 13.062145], "title": "cyan" },
|
||||
{ "loc": [41.344190, 13.242145], "title": "darkblue" },
|
||||
{ "loc": [41.679190, 13.122145], "title": "Darkred" },
|
||||
{ "loc": [41.329190, 13.192145], "title": "Darkgray" },
|
||||
{ "loc": [41.379290, 13.122545], "title": "dodgerblue" },
|
||||
{ "loc": [41.409190, 13.362145], "title": "gray" },
|
||||
{ "loc": [41.794008, 12.583884], "title": "green" },
|
||||
{ "loc": [41.805008, 12.982884], "title": "greenyellow" },
|
||||
{ "loc": [41.536175, 13.273590], "title": "red" },
|
||||
{ "loc": [41.516175, 13.373590], "title": "rosybrown" },
|
||||
{ "loc": [41.507175, 13.273690], "title": "royalblue" },
|
||||
{ "loc": [41.836175, 13.673590], "title": "salmon" },
|
||||
{ "loc": [41.796175, 13.570590], "title": "seagreen" },
|
||||
{ "loc": [41.436175, 13.573590], "title": "seashell" },
|
||||
{ "loc": [41.336175, 13.973590], "title": "silver" },
|
||||
{ "loc": [41.236175, 13.273590], "title": "skyblue" },
|
||||
{ "loc": [41.546175, 13.473590], "title": "yellow" },
|
||||
{ "loc": [41.239290, 13.032145], "title": "white" }
|
||||
];
|
||||
|
||||
// init leaflet map
|
||||
var leaflet = new L.Map('kt_leaflet_6', { zoom: 10, center: new L.latLng(data[0].loc) });
|
||||
|
||||
leaflet.addLayer(new L.TileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'));
|
||||
|
||||
// add scale layer
|
||||
L.control.scale().addTo(leaflet);
|
||||
|
||||
// set custom SVG icon marker
|
||||
var leafletIcon = L.divIcon({
|
||||
html: `<span class="svg-icon svg-icon-danger svg-icon-3x"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><rect x="0" y="24" width="24" height="0"/><path d="M5,10.5 C5,6 8,3 12.5,3 C17,3 20,6.75 20,10.5 C20,12.8325623 17.8236613,16.03566 13.470984,20.1092932 C12.9154018,20.6292577 12.0585054,20.6508331 11.4774555,20.1594925 C7.15915182,16.5078313 5,13.2880005 5,10.5 Z M12.5,12 C13.8807119,12 15,10.8807119 15,9.5 C15,8.11928813 13.8807119,7 12.5,7 C11.1192881,7 10,8.11928813 10,9.5 C10,10.8807119 11.1192881,12 12.5,12 Z" fill="#000000" fill-rule="nonzero"/></g></svg></span>`,
|
||||
bgPos: [10, 10],
|
||||
iconAnchor: [20, 37],
|
||||
popupAnchor: [0, -37],
|
||||
className: 'leaflet-marker'
|
||||
});
|
||||
|
||||
// set markers
|
||||
data.forEach(function (item) {
|
||||
var marker = L.marker(item.loc, { icon: leafletIcon }).addTo(leaflet);
|
||||
marker.bindPopup(item.title, { closeButton: false });
|
||||
})
|
||||
}
|
||||
|
||||
return {
|
||||
// public functions
|
||||
init: function () {
|
||||
// default charts
|
||||
demo1();
|
||||
demo2();
|
||||
demo3();
|
||||
demo4();
|
||||
demo5();
|
||||
demo6();
|
||||
}
|
||||
};
|
||||
}();
|
||||
|
||||
jQuery(document).ready(function () {
|
||||
KTLeaflet.init();
|
||||
});
|
||||
258
Content/Panel/js/pages/features/miscellaneous/blockui.js
Normal file
258
Content/Panel/js/pages/features/miscellaneous/blockui.js
Normal file
@ -0,0 +1,258 @@
|
||||
"use strict";
|
||||
// Class definition
|
||||
|
||||
var KTBlockUIDemo = function () {
|
||||
// Private functions
|
||||
// Basic demo
|
||||
var _demo1 = function () {
|
||||
// default
|
||||
$('#kt_blockui_default').click(function() {
|
||||
KTApp.block('#kt_blockui_content', {});
|
||||
|
||||
setTimeout(function() {
|
||||
KTApp.unblock('#kt_blockui_content');
|
||||
}, 2000);
|
||||
});
|
||||
|
||||
$('#kt_blockui_overlay_color').click(function() {
|
||||
KTApp.block('#kt_blockui_content', {
|
||||
overlayColor: 'red',
|
||||
opacity: 0.1,
|
||||
state: 'primary' // a bootstrap color
|
||||
});
|
||||
|
||||
setTimeout(function() {
|
||||
KTApp.unblock('#kt_blockui_content');
|
||||
}, 2000);
|
||||
});
|
||||
|
||||
$('#kt_blockui_custom_spinner').click(function() {
|
||||
KTApp.block('#kt_blockui_content', {
|
||||
overlayColor: '#000000',
|
||||
state: 'warning', // a bootstrap color
|
||||
size: 'lg' //available custom sizes: sm|lg
|
||||
});
|
||||
|
||||
setTimeout(function() {
|
||||
KTApp.unblock('#kt_blockui_content');
|
||||
}, 2000);
|
||||
});
|
||||
|
||||
$('#kt_blockui_custom_text_1').click(function() {
|
||||
KTApp.block('#kt_blockui_content', {
|
||||
overlayColor: '#000000',
|
||||
state: 'danger',
|
||||
message: 'لطفا صبر کنید...'
|
||||
});
|
||||
|
||||
setTimeout(function() {
|
||||
KTApp.unblock('#kt_blockui_content');
|
||||
}, 2000);
|
||||
});
|
||||
|
||||
$('#kt_blockui_custom_text_2').click(function() {
|
||||
KTApp.block('#kt_blockui_content', {
|
||||
overlayColor: '#000000',
|
||||
state: 'primary',
|
||||
message: 'در حال پردازش...'
|
||||
});
|
||||
|
||||
setTimeout(function() {
|
||||
KTApp.unblock('#kt_blockui_content');
|
||||
}, 2000);
|
||||
});
|
||||
}
|
||||
|
||||
// modal blocking
|
||||
var _demo2 = function () {
|
||||
// default
|
||||
$('#kt_blockui_modal_default_btn').click(function() {
|
||||
KTApp.block('#kt_blockui_modal_default .modal-dialog', {});
|
||||
|
||||
setTimeout(function() {
|
||||
KTApp.unblock('#kt_blockui_modal_default .modal-content');
|
||||
}, 2000);
|
||||
});
|
||||
|
||||
$('#kt_blockui_modal_overlay_color_btn').click(function() {
|
||||
KTApp.block('#kt_blockui_modal_overlay_color .modal-content', {
|
||||
overlayColor: 'red',
|
||||
opacity: 0.1,
|
||||
state: 'primary' // a bootstrap color
|
||||
});
|
||||
|
||||
setTimeout(function() {
|
||||
KTApp.unblock('#kt_blockui_modal_overlay_color .modal-content');
|
||||
}, 2000);
|
||||
});
|
||||
|
||||
$('#kt_blockui_modal_custom_spinner_btn').click(function() {
|
||||
KTApp.block('#kt_blockui_modal_custom_spinner .modal-content', {
|
||||
overlayColor: '#000000',
|
||||
state: 'warning', // a bootstrap color
|
||||
size: 'lg' //available custom sizes: sm|lg
|
||||
});
|
||||
|
||||
setTimeout(function() {
|
||||
KTApp.unblock('#kt_blockui_modal_custom_spinner .modal-content');
|
||||
}, 2000);
|
||||
});
|
||||
|
||||
$('#kt_blockui_modal_custom_text_1_btn').click(function() {
|
||||
KTApp.block('#kt_blockui_modal_custom_text_1 .modal-content', {
|
||||
overlayColor: '#000000',
|
||||
state: 'danger',
|
||||
message: 'لطفا صبر کنید...'
|
||||
});
|
||||
|
||||
setTimeout(function() {
|
||||
KTApp.unblock('#kt_blockui_modal_custom_text_1 .modal-content');
|
||||
}, 2000);
|
||||
});
|
||||
|
||||
$('#kt_blockui_modal_custom_text_2_btn').click(function() {
|
||||
KTApp.block('#kt_blockui_modal_custom_text_2 .modal-content', {
|
||||
overlayColor: '#000000',
|
||||
state: 'primary',
|
||||
message: 'در حال پردازش...'
|
||||
});
|
||||
|
||||
setTimeout(function() {
|
||||
KTApp.unblock('#kt_blockui_modal_custom_text_2 .modal-content');
|
||||
}, 2000);
|
||||
});
|
||||
}
|
||||
|
||||
// card blocking
|
||||
var _demo3 = function () {
|
||||
// default
|
||||
$('#kt_blockui_card_default').click(function() {
|
||||
KTApp.block('#kt_blockui_card');
|
||||
|
||||
setTimeout(function() {
|
||||
KTApp.unblock('#kt_blockui_card');
|
||||
}, 2000);
|
||||
});
|
||||
|
||||
$('#kt_blockui_card_overlay_color').click(function() {
|
||||
KTApp.block('#kt_blockui_card', {
|
||||
overlayColor: 'red',
|
||||
opacity: 0.1,
|
||||
state: 'primary' // a bootstrap color
|
||||
});
|
||||
|
||||
setTimeout(function() {
|
||||
KTApp.unblock('#kt_blockui_card');
|
||||
}, 2000);
|
||||
});
|
||||
|
||||
$('#kt_blockui_card_custom_spinner').click(function() {
|
||||
KTApp.block('#kt_blockui_card', {
|
||||
overlayColor: '#000000',
|
||||
state: 'warning', // a bootstrap color
|
||||
size: 'lg' //available custom sizes: sm|lg
|
||||
});
|
||||
|
||||
setTimeout(function() {
|
||||
KTApp.unblock('#kt_blockui_card');
|
||||
}, 2000);
|
||||
});
|
||||
|
||||
$('#kt_blockui_card_custom_text_1').click(function() {
|
||||
KTApp.block('#kt_blockui_card', {
|
||||
overlayColor: '#000000',
|
||||
state: 'danger',
|
||||
message: 'لطفا صبر کنید...'
|
||||
});
|
||||
|
||||
setTimeout(function() {
|
||||
KTApp.unblock('#kt_blockui_card');
|
||||
}, 2000);
|
||||
});
|
||||
|
||||
$('#kt_blockui_card_custom_text_2').click(function() {
|
||||
KTApp.block('#kt_blockui_card', {
|
||||
overlayColor: '#000000',
|
||||
state: 'primary',
|
||||
message: 'در حال پردازش...'
|
||||
});
|
||||
|
||||
setTimeout(function() {
|
||||
KTApp.unblock('#kt_blockui_card');
|
||||
}, 2000);
|
||||
});
|
||||
}
|
||||
|
||||
// page blocking
|
||||
var _demo4 = function () {
|
||||
$('#kt_blockui_page_default').click(function() {
|
||||
KTApp.blockPage();
|
||||
|
||||
setTimeout(function() {
|
||||
KTApp.unblockPage();
|
||||
}, 2000);
|
||||
});
|
||||
|
||||
$('#kt_blockui_page_overlay_color').click(function() {
|
||||
KTApp.blockPage({
|
||||
overlayColor: 'red',
|
||||
opacity: 0.1,
|
||||
state: 'primary' // a bootstrap color
|
||||
});
|
||||
|
||||
setTimeout(function() {
|
||||
KTApp.unblockPage();
|
||||
}, 2000);
|
||||
});
|
||||
|
||||
$('#kt_blockui_page_custom_spinner').click(function() {
|
||||
KTApp.blockPage({
|
||||
overlayColor: '#000000',
|
||||
state: 'warning', // a bootstrap color
|
||||
size: 'lg' //available custom sizes: sm|lg
|
||||
});
|
||||
|
||||
setTimeout(function() {
|
||||
KTApp.unblockPage();
|
||||
}, 2000);
|
||||
});
|
||||
|
||||
$('#kt_blockui_page_custom_text_1').click(function() {
|
||||
KTApp.blockPage({
|
||||
overlayColor: '#000000',
|
||||
state: 'danger',
|
||||
message: 'لطفا صبر کنید...'
|
||||
});
|
||||
|
||||
setTimeout(function() {
|
||||
KTApp.unblockPage();
|
||||
}, 2000);
|
||||
});
|
||||
|
||||
$('#kt_blockui_page_custom_text_2').click(function() {
|
||||
KTApp.blockPage({
|
||||
overlayColor: '#000000',
|
||||
state: 'primary',
|
||||
message: 'در حال پردازش...'
|
||||
});
|
||||
|
||||
setTimeout(function() {
|
||||
KTApp.unblockPage();
|
||||
}, 2000);
|
||||
});
|
||||
}
|
||||
|
||||
return {
|
||||
// public functions
|
||||
init: function() {
|
||||
_demo1();
|
||||
_demo2();
|
||||
_demo3();
|
||||
_demo4();
|
||||
}
|
||||
};
|
||||
}();
|
||||
|
||||
jQuery(document).ready(function() {
|
||||
KTBlockUIDemo.init();
|
||||
});
|
||||
92
Content/Panel/js/pages/features/miscellaneous/bootstrap-notify.js
vendored
Normal file
92
Content/Panel/js/pages/features/miscellaneous/bootstrap-notify.js
vendored
Normal file
@ -0,0 +1,92 @@
|
||||
"use strict";
|
||||
|
||||
// Class definition
|
||||
|
||||
var KTBootstrapNotifyDemo = function () {
|
||||
|
||||
// Private functions
|
||||
|
||||
// basic demo
|
||||
var demo = function () {
|
||||
// init bootstrap switch
|
||||
$('[data-switch=true]').bootstrapSwitch();
|
||||
|
||||
// handle the demo
|
||||
$('#kt_notify_btn').click(function() {
|
||||
var content = {};
|
||||
|
||||
content.message = 'سفارش جدید درج شده است';
|
||||
if ($('#kt_notify_title').prop('checked')) {
|
||||
content.title = 'عنوان نوتیفیکیشن';
|
||||
}
|
||||
if ($('#kt_notify_icon').val() != '') {
|
||||
content.icon = 'icon ' + $('#kt_notify_icon').val();
|
||||
}
|
||||
if ($('#kt_notify_url').prop('checked')) {
|
||||
content.url = 'www.keenthemes.com';
|
||||
content.target = '_blank';
|
||||
}
|
||||
|
||||
var notify = $.notify(content, {
|
||||
type: $('#kt_notify_state').val(),
|
||||
allow_dismiss: $('#kt_notify_dismiss').prop('checked'),
|
||||
newest_on_top: $('#kt_notify_top').prop('checked'),
|
||||
mouse_over: $('#kt_notify_pause').prop('checked'),
|
||||
showProgressbar: $('#kt_notify_progress').prop('checked'),
|
||||
spacing: $('#kt_notify_spacing').val(),
|
||||
timer: $('#kt_notify_timer').val(),
|
||||
placement: {
|
||||
from: $('#kt_notify_placement_from').val(),
|
||||
align: $('#kt_notify_placement_align').val()
|
||||
},
|
||||
offset: {
|
||||
x: $('#kt_notify_offset_x').val(),
|
||||
y: $('#kt_notify_offset_y').val()
|
||||
},
|
||||
delay: $('#kt_notify_delay').val(),
|
||||
z_index: $('#kt_notify_zindex').val(),
|
||||
animate: {
|
||||
enter: 'animate__animated animate__' + $('#kt_notify_animate_enter').val(),
|
||||
exit: 'animate__animated animate__' + $('#kt_notify_animate_exit').val()
|
||||
}
|
||||
});
|
||||
|
||||
if ($('#kt_notify_progress').prop('checked')) {
|
||||
setTimeout(function() {
|
||||
notify.update('message', '<strong>ذخیره سازی</strong> اطلاعات.');
|
||||
notify.update('type', 'primary');
|
||||
notify.update('progress', 20);
|
||||
}, 1000);
|
||||
|
||||
setTimeout(function() {
|
||||
notify.update('message', '<strong>ذخیره سازی</strong> اطلاعات کاربر.');
|
||||
notify.update('type', 'warning');
|
||||
notify.update('progress', 40);
|
||||
}, 2000);
|
||||
|
||||
setTimeout(function() {
|
||||
notify.update('message', '<strong>ذخیره سازی</strong> اطلاعات پروفایل.');
|
||||
notify.update('type', 'danger');
|
||||
notify.update('progress', 65);
|
||||
}, 3000);
|
||||
|
||||
setTimeout(function() {
|
||||
notify.update('message', '<strong>بررسی</strong> خطاها.');
|
||||
notify.update('type', 'success');
|
||||
notify.update('progress', 100);
|
||||
}, 4000);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
return {
|
||||
// public functions
|
||||
init: function() {
|
||||
demo();
|
||||
}
|
||||
};
|
||||
}();
|
||||
|
||||
jQuery(document).ready(function() {
|
||||
KTBootstrapNotifyDemo.init();
|
||||
});
|
||||
124
Content/Panel/js/pages/features/miscellaneous/cropper.js
Normal file
124
Content/Panel/js/pages/features/miscellaneous/cropper.js
Normal file
@ -0,0 +1,124 @@
|
||||
'use strict';
|
||||
|
||||
// Class definition
|
||||
var KTCropperDemo = function() {
|
||||
|
||||
// Private functions
|
||||
var initCropperDemo = function() {
|
||||
var image = document.getElementById('image');
|
||||
|
||||
var options = {
|
||||
crop: function(event) {
|
||||
document.getElementById('dataX').value = Math.round(event.detail.x);
|
||||
document.getElementById('dataY').value = Math.round(event.detail.y);
|
||||
document.getElementById('dataWidth').value = Math.round(event.detail.width);
|
||||
document.getElementById('dataHeight').value = Math.round(event.detail.height);
|
||||
document.getElementById('dataRotate').value = event.detail.rotate;
|
||||
document.getElementById('dataScaleX').value = event.detail.scaleX;
|
||||
document.getElementById('dataScaleY').value = event.detail.scaleY;
|
||||
|
||||
var lg = document.getElementById('cropper-preview-lg');
|
||||
lg.innerHTML = '';
|
||||
lg.appendChild(cropper.getCroppedCanvas({width: 256, height: 160}));
|
||||
|
||||
var md = document.getElementById('cropper-preview-md');
|
||||
md.innerHTML = '';
|
||||
md.appendChild(cropper.getCroppedCanvas({width: 128, height: 80}));
|
||||
|
||||
var sm = document.getElementById('cropper-preview-sm');
|
||||
sm.innerHTML = '';
|
||||
sm.appendChild(cropper.getCroppedCanvas({width: 64, height: 40}));
|
||||
|
||||
var xs = document.getElementById('cropper-preview-xs');
|
||||
xs.innerHTML = '';
|
||||
xs.appendChild(cropper.getCroppedCanvas({width: 32, height: 20}));
|
||||
},
|
||||
};
|
||||
|
||||
var cropper = new Cropper(image, options);
|
||||
|
||||
var buttons = document.getElementById('cropper-buttons');
|
||||
var methods = buttons.querySelectorAll('[data-method]');
|
||||
methods.forEach(function(button) {
|
||||
button.addEventListener('click', function(e) {
|
||||
var method = button.getAttribute('data-method');
|
||||
var option = button.getAttribute('data-option');
|
||||
var option2 = button.getAttribute('data-second-option');
|
||||
|
||||
try {
|
||||
option = JSON.parse(option);
|
||||
}
|
||||
catch (e) {
|
||||
}
|
||||
|
||||
var result;
|
||||
if (!option2) {
|
||||
result = cropper[method](option, option2);
|
||||
}
|
||||
else if (option) {
|
||||
result = cropper[method](option);
|
||||
}
|
||||
else {
|
||||
result = cropper[method]();
|
||||
}
|
||||
|
||||
if (method === 'getCroppedCanvas') {
|
||||
var modal = document.getElementById('getCroppedCanvasModal');
|
||||
var modalBody = modal.querySelector('.modal-body');
|
||||
modalBody.innerHTML = '';
|
||||
modalBody.appendChild(result);
|
||||
}
|
||||
|
||||
var input = document.querySelector('#putData');
|
||||
try {
|
||||
input.value = JSON.stringify(result);
|
||||
}
|
||||
catch (e) {
|
||||
if (!result) {
|
||||
input.value = result;
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// set aspect ratio option buttons
|
||||
var radioOptions = document.getElementById('setAspectRatio').querySelectorAll('[name="aspectRatio"]');
|
||||
radioOptions.forEach(function(button) {
|
||||
button.addEventListener('click', function(e) {
|
||||
cropper.setAspectRatio(e.target.value);
|
||||
});
|
||||
});
|
||||
|
||||
// set view mode
|
||||
var viewModeOptions = document.getElementById('viewMode').querySelectorAll('[name="viewMode"]');
|
||||
viewModeOptions.forEach(function(button) {
|
||||
button.addEventListener('click', function(e) {
|
||||
cropper.destroy();
|
||||
cropper = new Cropper(image, Object.assign({}, options, {viewMode: e.target.value}));
|
||||
});
|
||||
});
|
||||
|
||||
var toggleoptions = document.getElementById('toggleOptionButtons').querySelectorAll('[type="checkbox"]');
|
||||
toggleoptions.forEach(function(checkbox) {
|
||||
checkbox.addEventListener('click', function(e) {
|
||||
var appendOption = {};
|
||||
appendOption[e.target.getAttribute('name')] = e.target.checked;
|
||||
options = Object.assign({}, options, appendOption);
|
||||
cropper.destroy();
|
||||
cropper = new Cropper(image, options);
|
||||
})
|
||||
})
|
||||
|
||||
};
|
||||
|
||||
return {
|
||||
// public functions
|
||||
init: function() {
|
||||
initCropperDemo();
|
||||
},
|
||||
};
|
||||
}();
|
||||
|
||||
jQuery(document).ready(function() {
|
||||
KTCropperDemo.init();
|
||||
});
|
||||
@ -0,0 +1,69 @@
|
||||
'use strict';
|
||||
|
||||
// Class definition
|
||||
var KTDualListbox = function() {
|
||||
// Private functions
|
||||
var initDualListbox = function() {
|
||||
// Dual Listbox
|
||||
var listBoxes = $('.dual-listbox');
|
||||
|
||||
listBoxes.each(function() {
|
||||
var $this = $(this);
|
||||
// get titles
|
||||
var availableTitle = ($this.attr('data-available-title') != null) ? $this.attr('data-available-title') : 'گزینه های موجود';
|
||||
var selectedTitle = ($this.attr('data-selected-title') != null) ? $this.attr('data-selected-title') : 'انتخاب گزینه ها';
|
||||
|
||||
// get button labels
|
||||
var addLabel = ($this.attr('data-add') != null) ? $this.attr('data-add') : 'افزودن';
|
||||
var removeLabel = ($this.attr('data-remove') != null) ? $this.attr('data-remove') : 'حذف';
|
||||
var addAllLabel = ($this.attr('data-add-all') != null) ? $this.attr('data-add-all') : 'افزودن همه';
|
||||
var removeAllLabel = ($this.attr('data-remove-all') != null) ? $this.attr('data-remove-all') : 'حذف همه';
|
||||
|
||||
// get options
|
||||
var options = [];
|
||||
$this.children('option').each(function() {
|
||||
var value = $(this).val();
|
||||
var label = $(this).text();
|
||||
options.push({
|
||||
text: label,
|
||||
value: value
|
||||
});
|
||||
});
|
||||
|
||||
// get search option
|
||||
var search = ($this.attr('data-search') != null) ? $this.attr('data-search') : '';
|
||||
|
||||
// init dual listbox
|
||||
var dualListBox = new DualListbox($this.get(0), {
|
||||
addEvent: function(value) {
|
||||
console.log(value);
|
||||
},
|
||||
removeEvent: function(value) {
|
||||
console.log(value);
|
||||
},
|
||||
availableTitle: availableTitle,
|
||||
selectedTitle: selectedTitle,
|
||||
addButtonText: addLabel,
|
||||
removeButtonText: removeLabel,
|
||||
addAllButtonText: addAllLabel,
|
||||
removeAllButtonText: removeAllLabel,
|
||||
options: options,
|
||||
});
|
||||
|
||||
if (search == 'false') {
|
||||
dualListBox.search.classList.add('dual-listbox__search--hidden');
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
return {
|
||||
// public functions
|
||||
init: function() {
|
||||
initDualListbox();
|
||||
},
|
||||
};
|
||||
}();
|
||||
|
||||
jQuery(document).ready(function() {
|
||||
KTDualListbox.init();
|
||||
});
|
||||
254
Content/Panel/js/pages/features/miscellaneous/idle-timer.js
Normal file
254
Content/Panel/js/pages/features/miscellaneous/idle-timer.js
Normal file
@ -0,0 +1,254 @@
|
||||
"use strict";
|
||||
|
||||
var KTIdleTimerDemo = function() {
|
||||
var _initDemo1 = function() {
|
||||
//Define default
|
||||
var docTimeout = 5000;
|
||||
|
||||
/*
|
||||
Handle raised idle/active events
|
||||
*/
|
||||
$(document).on("idle.idleTimer", function(event, elem, obj) {
|
||||
$("#docStatus")
|
||||
.val(function(i, v) {
|
||||
return v + "Idle @ " + moment().format() + " \n";
|
||||
})
|
||||
.removeClass("alert-success")
|
||||
.addClass("alert-warning")
|
||||
.scrollTop($("#docStatus")[0].scrollHeight);
|
||||
});
|
||||
$(document).on("active.idleTimer", function(event, elem, obj, e) {
|
||||
$("#docStatus")
|
||||
.val(function(i, v) {
|
||||
return v + "Active [" + e.type + "] [" + e.target.nodeName + "] @ " + moment().format() + " \n";
|
||||
})
|
||||
.addClass("alert-success")
|
||||
.removeClass("alert-warning")
|
||||
.scrollTop($("#docStatus")[0].scrollHeight);
|
||||
});
|
||||
|
||||
/*
|
||||
Handle button events
|
||||
*/
|
||||
$("#btPause").click(function() {
|
||||
$(document).idleTimer("pause");
|
||||
$("#docStatus")
|
||||
.val(function(i, v) {
|
||||
return v + "Paused @ " + moment().format() + " \n";
|
||||
})
|
||||
.scrollTop($("#docStatus")[0].scrollHeight);
|
||||
$(this).blur();
|
||||
return false;
|
||||
});
|
||||
$("#btResume").click(function() {
|
||||
$(document).idleTimer("resume");
|
||||
$("#docStatus")
|
||||
.val(function(i, v) {
|
||||
return v + "Resumed @ " + moment().format() + " \n";
|
||||
})
|
||||
.scrollTop($("#docStatus")[0].scrollHeight);
|
||||
$(this).blur();
|
||||
return false;
|
||||
});
|
||||
$("#btElapsed").click(function() {
|
||||
$("#docStatus")
|
||||
.val(function(i, v) {
|
||||
return v + "Elapsed (since becoming active): " + $(document).idleTimer("getElapsedTime") + " \n";
|
||||
})
|
||||
.scrollTop($("#docStatus")[0].scrollHeight);
|
||||
$(this).blur();
|
||||
return false;
|
||||
});
|
||||
$("#btDestroy").click(function() {
|
||||
$(document).idleTimer("destroy");
|
||||
$("#docStatus")
|
||||
.val(function(i, v) {
|
||||
return v + "Destroyed: @ " + moment().format() + " \n";
|
||||
})
|
||||
.removeClass("alert-success")
|
||||
.removeClass("alert-warning")
|
||||
.scrollTop($("#docStatus")[0].scrollHeight);
|
||||
$(this).blur();
|
||||
return false;
|
||||
});
|
||||
$("#btInit").click(function() {
|
||||
// for demo purposes show init with just object
|
||||
$(document).idleTimer({
|
||||
timeout: docTimeout
|
||||
});
|
||||
$("#docStatus")
|
||||
.val(function(i, v) {
|
||||
return v + "Init: @ " + moment().format() + " \n";
|
||||
})
|
||||
.scrollTop($("#docStatus")[0].scrollHeight);
|
||||
|
||||
//Apply classes for default state
|
||||
if ($(document).idleTimer("isIdle")) {
|
||||
$("#docStatus")
|
||||
.removeClass("alert-success")
|
||||
.addClass("alert-warning");
|
||||
} else {
|
||||
$("#docStatus")
|
||||
.addClass("alert-success")
|
||||
.removeClass("alert-warning");
|
||||
}
|
||||
$(this).blur();
|
||||
return false;
|
||||
});
|
||||
|
||||
//Clear old statuses
|
||||
$("#docStatus").val("");
|
||||
|
||||
//Start timeout, passing no options
|
||||
//Same as $.idleTimer(docTimeout, docOptions);
|
||||
$(document).idleTimer(docTimeout);
|
||||
|
||||
//For demo purposes, style based on initial state
|
||||
if ($(document).idleTimer("isIdle")) {
|
||||
$("#docStatus")
|
||||
.val(function(i, v) {
|
||||
return v + "Initial Idle State @ " + moment().format() + " \n";
|
||||
})
|
||||
.removeClass("alert-success")
|
||||
.addClass("alert-warning")
|
||||
.scrollTop($("#docStatus")[0].scrollHeight);
|
||||
} else {
|
||||
$("#docStatus")
|
||||
.val(function(i, v) {
|
||||
return v + "Initial Active State @ " + moment().format() + " \n";
|
||||
})
|
||||
.addClass("alert-success")
|
||||
.removeClass("alert-warning")
|
||||
.scrollTop($("#docStatus")[0].scrollHeight);
|
||||
}
|
||||
|
||||
|
||||
//For demo purposes, display the actual timeout on the page
|
||||
$("#docTimeout").text(docTimeout / 1000);
|
||||
}
|
||||
|
||||
var _initDemo2 = function() {
|
||||
//Define textarea settings
|
||||
var
|
||||
taTimeout = 3000;
|
||||
|
||||
/*
|
||||
Handle raised idle/active events
|
||||
*/
|
||||
$("#elStatus").on("idle.idleTimer", function(event, elem, obj) {
|
||||
//If you dont stop propagation it will bubble up to document event handler
|
||||
event.stopPropagation();
|
||||
|
||||
$("#elStatus")
|
||||
.val(function(i, v) {
|
||||
return v + "Idle @ " + moment().format() + " \n";
|
||||
})
|
||||
.removeClass("alert-success")
|
||||
.addClass("alert-warning")
|
||||
.scrollTop($("#elStatus")[0].scrollHeight);
|
||||
|
||||
});
|
||||
$("#elStatus").on("active.idleTimer", function(event) {
|
||||
//If you dont stop propagation it will bubble up to document event handler
|
||||
event.stopPropagation();
|
||||
|
||||
$("#elStatus")
|
||||
.val(function(i, v) {
|
||||
return v + "Active @ " + moment().format() + " \n";
|
||||
})
|
||||
.addClass("alert-success")
|
||||
.removeClass("alert-warning")
|
||||
.scrollTop($("#elStatus")[0].scrollHeight);
|
||||
});
|
||||
|
||||
/*
|
||||
Handle button events
|
||||
*/
|
||||
$("#btReset").click(function() {
|
||||
$("#elStatus")
|
||||
.idleTimer("reset")
|
||||
.val(function(i, v) {
|
||||
return v + "Reset @ " + moment().format() + " \n";
|
||||
})
|
||||
.scrollTop($("#elStatus")[0].scrollHeight);
|
||||
|
||||
//Apply classes for default state
|
||||
if ($("#elStatus").idleTimer("isIdle")) {
|
||||
$("#elStatus")
|
||||
.removeClass("alert-success")
|
||||
.addClass("alert-warning");
|
||||
} else {
|
||||
$("#elStatus")
|
||||
.addClass("alert-success")
|
||||
.removeClass("alert-warning");
|
||||
}
|
||||
$(this).blur();
|
||||
return false;
|
||||
});
|
||||
$("#btRemaining").click(function() {
|
||||
$("#elStatus")
|
||||
.val(function(i, v) {
|
||||
return v + "Remaining: " + $("#elStatus").idleTimer("getRemainingTime") + " \n";
|
||||
})
|
||||
.scrollTop($("#elStatus")[0].scrollHeight);
|
||||
$(this).blur();
|
||||
return false;
|
||||
});
|
||||
$("#btLastActive").click(function() {
|
||||
$("#elStatus")
|
||||
.val(function(i, v) {
|
||||
return v + "LastActive: " + $("#elStatus").idleTimer("getLastActiveTime") + " \n";
|
||||
})
|
||||
.scrollTop($("#elStatus")[0].scrollHeight);
|
||||
$(this).blur();
|
||||
return false;
|
||||
});
|
||||
$("#btState").click(function() {
|
||||
$("#elStatus")
|
||||
.val(function(i, v) {
|
||||
return v + "State: " + ($("#elStatus").idleTimer("isIdle") ? "idle" : "active") + " \n";
|
||||
})
|
||||
.scrollTop($("#elStatus")[0].scrollHeight);
|
||||
$(this).blur();
|
||||
return false;
|
||||
});
|
||||
|
||||
//Clear value if there was one cached & start time
|
||||
$("#elStatus").val("").idleTimer(taTimeout);
|
||||
|
||||
//For demo purposes, show initial state
|
||||
if ($("#elStatus").idleTimer("isIdle")) {
|
||||
$("#elStatus")
|
||||
.val(function(i, v) {
|
||||
return v + "Initial Idle @ " + moment().format() + " \n";
|
||||
})
|
||||
.removeClass("alert-success")
|
||||
.addClass("alert-warning")
|
||||
.scrollTop($("#elStatus")[0].scrollHeight);
|
||||
} else {
|
||||
$("#elStatus")
|
||||
.val(function(i, v) {
|
||||
return v + "Initial Active @ " + moment().format() + " \n";
|
||||
})
|
||||
.addClass("alert-success")
|
||||
.removeClass("alert-warning")
|
||||
.scrollTop($("#elStatus")[0].scrollHeight);
|
||||
}
|
||||
|
||||
// Display the actual timeout on the page
|
||||
$("#elTimeout").text(taTimeout / 1000);
|
||||
|
||||
}
|
||||
|
||||
return {
|
||||
//main function to initiate the module
|
||||
init: function() {
|
||||
_initDemo1();
|
||||
_initDemo2();
|
||||
}
|
||||
};
|
||||
}();
|
||||
|
||||
jQuery(document).ready(function() {
|
||||
KTIdleTimerDemo.init();
|
||||
});
|
||||
409
Content/Panel/js/pages/features/miscellaneous/kanban-board.js
Normal file
409
Content/Panel/js/pages/features/miscellaneous/kanban-board.js
Normal file
@ -0,0 +1,409 @@
|
||||
"use strict";
|
||||
|
||||
// Class definition
|
||||
|
||||
var KTKanbanBoardDemo = function() {
|
||||
// Private functions
|
||||
var _demo1 = function() {
|
||||
var kanban = new jKanban({
|
||||
element: '#kt_kanban_1',
|
||||
gutter: '0',
|
||||
widthBoard: '250px',
|
||||
boards: [{
|
||||
'id': '_inprocess',
|
||||
'title': 'در جریان',
|
||||
'item': [{
|
||||
'title': '<span class="font-weight-bold">می تونید من رو درگ کنید</span>'
|
||||
},
|
||||
{
|
||||
'title': '<span class="font-weight-bold">خرید</span>'
|
||||
}
|
||||
]
|
||||
}, {
|
||||
'id': '_working',
|
||||
'title': 'کار کردن',
|
||||
'item': [{
|
||||
'title': '<span class="font-weight-bold">کاری بکنید!</span>'
|
||||
},
|
||||
{
|
||||
'title': '<span class="font-weight-bold">اجرا کردن</span>'
|
||||
}
|
||||
]
|
||||
}, {
|
||||
'id': '_done',
|
||||
'title': 'انجام شده',
|
||||
'item': [{
|
||||
'title': '<span class="font-weight-bold">خیلی خوب</span>'
|
||||
},
|
||||
{
|
||||
'title': '<span class="font-weight-bold">اکی</span>'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
});
|
||||
}
|
||||
|
||||
var _demo2 = function() {
|
||||
var kanban = new jKanban({
|
||||
element: '#kt_kanban_2',
|
||||
gutter: '0',
|
||||
widthBoard: '250px',
|
||||
boards: [{
|
||||
'id': '_inprocess',
|
||||
'title': 'در جریان',
|
||||
'class': 'primary',
|
||||
'item': [{
|
||||
'title': '<span class="font-weight-bold">می تونید من رو درگ کنید</span>',
|
||||
'class': 'light-primary',
|
||||
},
|
||||
{
|
||||
'title': '<span class="font-weight-bold">خرید</span>',
|
||||
'class': 'light-primary',
|
||||
}
|
||||
]
|
||||
}, {
|
||||
'id': '_working',
|
||||
'title': 'کار کردن',
|
||||
'class': 'success',
|
||||
'item': [{
|
||||
'title': '<span class="font-weight-bold">کاری بکنید!</span>',
|
||||
'class': 'light-success',
|
||||
},
|
||||
{
|
||||
'title': '<span class="font-weight-bold">اجرا کردن</span>',
|
||||
'class': 'light-success',
|
||||
}
|
||||
]
|
||||
}, {
|
||||
'id': '_done',
|
||||
'title': 'انجام شده',
|
||||
'class': 'danger',
|
||||
'item': [{
|
||||
'title': '<span class="font-weight-bold">خیلی خوب</span>',
|
||||
'class': 'light-danger',
|
||||
},
|
||||
{
|
||||
'title': '<span class="font-weight-bold">اکی</span>',
|
||||
'class': 'light-danger',
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
});
|
||||
}
|
||||
|
||||
var _demo3 = function() {
|
||||
var kanban = new jKanban({
|
||||
element: '#kt_kanban_3',
|
||||
gutter: '0',
|
||||
widthBoard: '250px',
|
||||
click: function(el) {
|
||||
alert(el.innerHTML);
|
||||
},
|
||||
boards: [{
|
||||
'id': '_todo',
|
||||
'title': 'انجام بده',
|
||||
'class': 'light-primary',
|
||||
'dragTo': ['_working'],
|
||||
'item': [{
|
||||
'title': 'انجام وظیفه',
|
||||
'class': 'primary'
|
||||
},
|
||||
{
|
||||
'title': 'خرید',
|
||||
'class': 'primary'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
'id': '_working',
|
||||
'title': 'کار کردن',
|
||||
'class': 'light-warning',
|
||||
'item': [{
|
||||
'title': 'کاری بکنید!',
|
||||
'class': 'warning'
|
||||
},
|
||||
{
|
||||
'title': 'اجرا کردن',
|
||||
'class': 'warning'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
'id': '_done',
|
||||
'title': 'انجام شده',
|
||||
'class': 'light-success',
|
||||
'dragTo': ['_working'],
|
||||
'item': [{
|
||||
'title': 'خیلی خوب',
|
||||
'class': 'success'
|
||||
},
|
||||
{
|
||||
'title': 'اکی',
|
||||
'class': 'success'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
'id': '_notes',
|
||||
'title': 'نکات',
|
||||
'class': 'light-danger',
|
||||
'item': [{
|
||||
'title': 'دست نزن',
|
||||
'class': 'danger'
|
||||
},
|
||||
{
|
||||
'title': 'وارد نشوید',
|
||||
'class': 'danger'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
});
|
||||
}
|
||||
|
||||
var _demo4 = function() {
|
||||
var kanban = new jKanban({
|
||||
element: '#kt_kanban_4',
|
||||
gutter: '0',
|
||||
click: function(el) {
|
||||
alert(el.innerHTML);
|
||||
},
|
||||
boards: [{
|
||||
'id': '_backlog',
|
||||
'title': 'جمع شدن',
|
||||
'class': 'light-dark',
|
||||
'item': [{
|
||||
'title': `
|
||||
<div class="d-flex align-items-center">
|
||||
<div class="symbol symbol-success mr-3">
|
||||
<img alt="Pic" src="assets/media/users/300_24.jpg" />
|
||||
</div>
|
||||
<div class="d-flex flex-column align-items-start">
|
||||
<span class="text-dark-50 font-weight-bold mb-1">بهینه سازی سئو</span>
|
||||
<span class="label label-inline label-light-success font-weight-bold">در حال پردازش</span>
|
||||
</div>
|
||||
</div>
|
||||
`,
|
||||
},
|
||||
{
|
||||
'title': `
|
||||
<div class="d-flex align-items-center">
|
||||
<div class="symbol symbol-success mr-3">
|
||||
<span class="symbol-label font-size-h4">A.D</span>
|
||||
</div>
|
||||
<div class="d-flex flex-column align-items-start">
|
||||
<span class="text-dark-50 font-weight-bold mb-1">حسابرس</span>
|
||||
<span class="label label-inline label-light-danger font-weight-bold">در حال انجام</span>
|
||||
</div>
|
||||
</div>
|
||||
`,
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
'id': '_todo',
|
||||
'title': 'انجام بده',
|
||||
'class': 'light-danger',
|
||||
'item': [{
|
||||
'title': `
|
||||
<div class="d-flex align-items-center">
|
||||
<div class="symbol symbol-success mr-3">
|
||||
<img alt="Pic" src="assets/media/users/300_16.jpg" />
|
||||
</div>
|
||||
<div class="d-flex flex-column align-items-start">
|
||||
<span class="text-dark-50 font-weight-bold mb-1">راه اندازی سرور</span>
|
||||
<span class="label label-inline label-light-dark font-weight-bold">تکمیل شده</span>
|
||||
</div>
|
||||
</div>
|
||||
`,
|
||||
},
|
||||
{
|
||||
'title': `
|
||||
<div class="d-flex align-items-center">
|
||||
<div class="symbol symbol-success mr-3">
|
||||
<img alt="Pic" src="assets/media/users/300_15.jpg" />
|
||||
</div>
|
||||
<div class="d-flex flex-column align-items-start">
|
||||
<span class="text-dark-50 font-weight-bold mb-1">گزارشگر</span>
|
||||
<span class="label label-inline label-light-warning font-weight-bold">خبر</span>
|
||||
</div>
|
||||
</div>
|
||||
`,
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
'id': '_working',
|
||||
'title': 'کار کردن',
|
||||
'class': 'light-primary',
|
||||
'item': [{
|
||||
'title': `
|
||||
<div class="d-flex align-items-center">
|
||||
<div class="symbol symbol-success mr-3">
|
||||
<img alt="Pic" src="assets/media/users/300_24.jpg" />
|
||||
</div>
|
||||
<div class="d-flex flex-column align-items-start">
|
||||
<span class="text-dark-50 font-weight-bold mb-1">بازاریابی</span>
|
||||
<span class="label label-inline label-light-danger font-weight-bold">نقشه ها</span>
|
||||
</div>
|
||||
</div>
|
||||
`,
|
||||
},
|
||||
{
|
||||
'title': `
|
||||
<div class="d-flex align-items-center">
|
||||
<div class="symbol symbol-light-info mr-3">
|
||||
<span class="symbol-label font-size-h4">A.P</span>
|
||||
</div>
|
||||
<div class="d-flex flex-column align-items-start">
|
||||
<span class="text-dark-50 font-weight-bold mb-1">حسابرس</span>
|
||||
<span class="label label-inline label-light-primary font-weight-bold">انجام شده</span>
|
||||
</div>
|
||||
</div>
|
||||
`,
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
'id': '_done',
|
||||
'title': 'انجام شده',
|
||||
'class': 'light-success',
|
||||
'item': [{
|
||||
'title': `
|
||||
<div class="d-flex align-items-center">
|
||||
<div class="symbol symbol-success mr-3">
|
||||
<img alt="Pic" src="assets/media/users/300_11.jpg" />
|
||||
</div>
|
||||
<div class="d-flex flex-column align-items-start">
|
||||
<span class="text-dark-50 font-weight-bold mb-1">بهینه سازی سئو</span>
|
||||
<span class="label label-inline label-light-success font-weight-bold">در حال پردازش</span>
|
||||
</div>
|
||||
</div>
|
||||
`,
|
||||
},
|
||||
{
|
||||
'title': `
|
||||
<div class="d-flex align-items-center">
|
||||
<div class="symbol symbol-success mr-3">
|
||||
<img alt="Pic" src="assets/media/users/300_20.jpg" />
|
||||
</div>
|
||||
<div class="d-flex flex-column align-items-start">
|
||||
<span class="text-dark-50 font-weight-bold mb-1">مدیر تیم</span>
|
||||
<span class="label label-inline label-light-danger font-weight-bold">در حال پردازش</span>
|
||||
</div>
|
||||
</div>
|
||||
`,
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
'id': '_deploy',
|
||||
'title': 'استقرار',
|
||||
'class': 'light-primary',
|
||||
'item': [{
|
||||
'title': `
|
||||
<div class="d-flex align-items-center">
|
||||
<div class="symbol symbol-light-warning mr-3">
|
||||
<span class="symbol-label font-size-h4">D.L</span>
|
||||
</div>
|
||||
<div class="d-flex flex-column align-items-start">
|
||||
<span class="text-dark-50 font-weight-bold mb-1">بهینه سازی سئو</span>
|
||||
<span class="label label-inline label-light-success font-weight-bold">در حال پردازش</span>
|
||||
</div>
|
||||
</div>
|
||||
`,
|
||||
},
|
||||
{
|
||||
'title': `
|
||||
<div class="d-flex align-items-center">
|
||||
<div class="symbol symbol-light-danger mr-3">
|
||||
<span class="symbol-label font-size-h4">E.K</span>
|
||||
</div>
|
||||
<div class="d-flex flex-column align-items-start">
|
||||
<span class="text-dark-50 font-weight-bold mb-1">مطالعه </span>
|
||||
<span class="label label-inline label-light-warning font-weight-bold">برنامه ریزی شده</span>
|
||||
</div>
|
||||
</div>
|
||||
`,
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
var toDoButton = document.getElementById('addToDo');
|
||||
toDoButton.addEventListener('click', function() {
|
||||
kanban.addElement(
|
||||
'_todo', {
|
||||
'title': `
|
||||
<div class="d-flex align-items-center">
|
||||
<div class="symbol symbol-light-primary mr-3">
|
||||
<img alt="Pic" src="assets/media/users/300_14.jpg" />
|
||||
</div>
|
||||
<div class="d-flex flex-column align-items-start">
|
||||
<span class="text-dark-50 font-weight-bold mb-1">مطالعه </span>
|
||||
<span class="label label-inline label-light-success font-weight-bold">برنامه ریزی شده</span>
|
||||
</div>
|
||||
</div>
|
||||
`
|
||||
}
|
||||
);
|
||||
});
|
||||
|
||||
var addBoardDefault = document.getElementById('addDefault');
|
||||
addBoardDefault.addEventListener('click', function() {
|
||||
kanban.addBoards(
|
||||
[{
|
||||
'id': '_default',
|
||||
'title': 'New Board',
|
||||
'class': 'primary-light',
|
||||
'item': [{
|
||||
'title': `
|
||||
<div class="d-flex align-items-center">
|
||||
<div class="symbol symbol-success mr-3">
|
||||
<img alt="Pic" src="assets/media/users/300_13.jpg" />
|
||||
</div>
|
||||
<div class="d-flex flex-column align-items-start">
|
||||
<span class="text-dark-50 font-weight-bold mb-1">Payment Modules</span>
|
||||
<span class="label label-inline label-light-primary font-weight-bold">In development</span>
|
||||
</div>
|
||||
</div>
|
||||
`},{
|
||||
'title': `
|
||||
<div class="d-flex align-items-center">
|
||||
<div class="symbol symbol-success mr-3">
|
||||
<img alt="Pic" src="assets/media/users/300_12.jpg" />
|
||||
</div>
|
||||
<div class="d-flex flex-column align-items-start">
|
||||
<span class="text-dark-50 font-weight-bold mb-1">New Project</span>
|
||||
<span class="label label-inline label-light-danger font-weight-bold">در حال انجام</span>
|
||||
</div>
|
||||
</div>
|
||||
`}
|
||||
]
|
||||
}]
|
||||
)
|
||||
});
|
||||
|
||||
var removeBoard = document.getElementById('removeBoard');
|
||||
removeBoard.addEventListener('click', function() {
|
||||
kanban.removeBoard('_done');
|
||||
});
|
||||
}
|
||||
|
||||
// Public functions
|
||||
return {
|
||||
init: function() {
|
||||
_demo1();
|
||||
_demo2();
|
||||
_demo3();
|
||||
_demo4();
|
||||
}
|
||||
};
|
||||
}();
|
||||
|
||||
jQuery(document).ready(function() {
|
||||
KTKanbanBoardDemo.init();
|
||||
});
|
||||
@ -0,0 +1,22 @@
|
||||
"use strict";
|
||||
|
||||
// Class definition
|
||||
var KTScrollable = function () {
|
||||
|
||||
// Private functions
|
||||
|
||||
// basic demo
|
||||
var demo1 = function () {
|
||||
}
|
||||
|
||||
return {
|
||||
// public functions
|
||||
init: function() {
|
||||
demo1();
|
||||
}
|
||||
};
|
||||
}();
|
||||
|
||||
jQuery(document).ready(function() {
|
||||
KTScrollable.init();
|
||||
});
|
||||
@ -0,0 +1,29 @@
|
||||
"use strict";
|
||||
|
||||
var KTSessionTimeoutDemo = function () {
|
||||
var initDemo = function () {
|
||||
$.sessionTimeout({
|
||||
title: 'اعلان ریدایرکت',
|
||||
message: 'منقضی شدن سشن.',
|
||||
keepAliveUrl: HOST_URL + '/api//session-timeout/keepalive.php',
|
||||
redirUrl: '?p=page_user_lock_1',
|
||||
logoutUrl: '?p=page_user_login_1',
|
||||
warnAfter: 5000, //warn after 5 seconds
|
||||
redirAfter: 15000, //redirect after 15 secons,
|
||||
ignoreUserActivity: true,
|
||||
countdownMessage: 'ریدایرکت {timer} ثانیه.',
|
||||
countdownBar: true
|
||||
});
|
||||
}
|
||||
|
||||
return {
|
||||
//main function to initiate the module
|
||||
init: function () {
|
||||
initDemo();
|
||||
}
|
||||
};
|
||||
}();
|
||||
|
||||
jQuery(document).ready(function() {
|
||||
KTSessionTimeoutDemo.init();
|
||||
});
|
||||
@ -0,0 +1,32 @@
|
||||
"use strict";
|
||||
// Class definition
|
||||
// Based on: https://github.com/rgalus/sticky-js
|
||||
|
||||
var KTStickyPanelsDemo = function () {
|
||||
|
||||
// Private functions
|
||||
|
||||
// Basic demo
|
||||
var demo1 = function () {
|
||||
if (KTLayoutAsideToggle && KTLayoutAsideToggle.onToggle) {
|
||||
var sticky = new Sticky('.sticky');
|
||||
|
||||
KTLayoutAsideToggle.onToggle(function() {
|
||||
setTimeout(function() {
|
||||
sticky.update(); // update sticky positions on aside toggle
|
||||
}, 500);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
// public functions
|
||||
init: function() {
|
||||
demo1();
|
||||
}
|
||||
};
|
||||
}();
|
||||
|
||||
jQuery(document).ready(function() {
|
||||
KTStickyPanelsDemo.init();
|
||||
});
|
||||
177
Content/Panel/js/pages/features/miscellaneous/sweetalert2.js
Normal file
177
Content/Panel/js/pages/features/miscellaneous/sweetalert2.js
Normal file
@ -0,0 +1,177 @@
|
||||
"use strict";
|
||||
|
||||
// Class definition
|
||||
var KTSweetAlert2Demo = function () {
|
||||
var _init = function () {
|
||||
// Sweetalert Demo 1
|
||||
$('#kt_sweetalert_demo_1').click(function (e) {
|
||||
Swal.fire('آفرین!');
|
||||
});
|
||||
|
||||
// Sweetalert Demo 2
|
||||
$('#kt_sweetalert_demo_2').click(function (e) {
|
||||
Swal.fire("عنوان اینجا قرار میگیره", "و اینجا می تونید متن اصلی رو قرار بدید");
|
||||
});
|
||||
|
||||
// Sweetalert Demo 3
|
||||
$('#kt_sweetalert_demo_3_1').click(function (e) {
|
||||
Swal.fire("آفرین!", "کلیک کنید روی دکمه!", "warning");
|
||||
});
|
||||
|
||||
$('#kt_sweetalert_demo_3_2').click(function (e) {
|
||||
Swal.fire("آفرین!", "کلیک کنید روی دکمه!", "error");
|
||||
});
|
||||
|
||||
$('#kt_sweetalert_demo_3_3').click(function (e) {
|
||||
Swal.fire("آفرین!", "کلیک کنید روی دکمه!", "success");
|
||||
});
|
||||
|
||||
$('#kt_sweetalert_demo_3_4').click(function (e) {
|
||||
Swal.fire("آفرین!", "کلیک کنید روی دکمه!", "info");
|
||||
});
|
||||
|
||||
$('#kt_sweetalert_demo_3_5').click(function (e) {
|
||||
Swal.fire("آفرین!", "کلیک کنید روی دکمه!", "question");
|
||||
});
|
||||
|
||||
// Sweetalert Demo 4
|
||||
$("#kt_sweetalert_demo_4").click(function (e) {
|
||||
Swal.fire({
|
||||
title: "آفرین!",
|
||||
text: "کلیک کنید روی دکمه!",
|
||||
icon: "success",
|
||||
buttonsStyling: false,
|
||||
confirmButtonText: "تایید کنید!",
|
||||
customClass: {
|
||||
confirmButton: "btn btn-primary"
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// Sweetalert Demo 5
|
||||
$("#kt_sweetalert_demo_5").click(function (e) {
|
||||
Swal.fire({
|
||||
title: "آفرین!",
|
||||
text: "کلیک کنید روی دکمه!",
|
||||
icon: "success",
|
||||
buttonsStyling: false,
|
||||
confirmButtonText: "<i class='la la-headphones'></i> من هستم!",
|
||||
showCancelButton: true,
|
||||
cancelButtonText: "<i class='la la-thumbs-down'></i>نه ممنون",
|
||||
customClass: {
|
||||
confirmButton: "btn btn-danger",
|
||||
cancelButton: "btn btn-default"
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
$('#kt_sweetalert_demo_6').click(function (e) {
|
||||
Swal.fire({
|
||||
position: 'top-right',
|
||||
icon: 'success',
|
||||
title: 'کار شما ذخیره شده است',
|
||||
showConfirmButton: false,
|
||||
timer: 1500
|
||||
});
|
||||
});
|
||||
|
||||
$('#kt_sweetalert_demo_7').click(function (e) {
|
||||
Swal.fire({
|
||||
title: 'نمونه اچ تی ام ال',
|
||||
showClass: {
|
||||
popup: 'animate__animated animate__wobble'
|
||||
},
|
||||
hideClass: {
|
||||
popup: 'animate__animated animate__swing'
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
$('#kt_sweetalert_demo_8').click(function (e) {
|
||||
Swal.fire({
|
||||
title: 'آیا مطمئن هستید؟',
|
||||
text: "شما نمی توانید این را برگردانید!",
|
||||
icon: 'warning',
|
||||
showCancelButton: true,
|
||||
confirmButtonText: 'بله حذف کن'
|
||||
}).then(function (result) {
|
||||
if (result.value) {
|
||||
Swal.fire(
|
||||
'حذف شد!',
|
||||
'فایل شما با موفقیت حذف شد.',
|
||||
'success'
|
||||
)
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
$('#kt_sweetalert_demo_9').click(function (e) {
|
||||
Swal.fire({
|
||||
title: 'آیا مطمئن هستید؟',
|
||||
text: "شما نمی توانید این را برگردانید!",
|
||||
icon: 'warning',
|
||||
showCancelButton: true,
|
||||
confirmButtonText: 'بله حذف کن',
|
||||
cancelButtonText: 'نه کنسل کن',
|
||||
reverseButtons: true
|
||||
}).then(function (result) {
|
||||
if (result.value) {
|
||||
Swal.fire(
|
||||
'حذف شده!',
|
||||
'فایل شما حذف شد.',
|
||||
'success'
|
||||
)
|
||||
// result.dismiss can be 'cancel', 'overlay',
|
||||
// 'close', and 'timer'
|
||||
} else if (result.dismiss === 'cancel') {
|
||||
Swal.fire(
|
||||
'لغو شده',
|
||||
'فایل شما حذف نشد :)',
|
||||
'error'
|
||||
)
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
$('#kt_sweetalert_demo_10').click(function (e) {
|
||||
Swal.fire({
|
||||
title: 'اسویت!',
|
||||
text: 'با یک عکس سفارشی.',
|
||||
imageUrl: 'https://unsplash.it/400/200',
|
||||
imageWidth: 400,
|
||||
imageHeight: 200,
|
||||
imageAlt: 'Custom image',
|
||||
animation: false
|
||||
});
|
||||
});
|
||||
|
||||
$('#kt_sweetalert_demo_11').click(function (e) {
|
||||
Swal.fire({
|
||||
title: 'بسته شدن خودکار!',
|
||||
text: 'بسته شدن در 5 ثانیه',
|
||||
timer: 5000,
|
||||
onOpen: function () {
|
||||
Swal.showLoading()
|
||||
}
|
||||
}).then(function (result) {
|
||||
if (result.dismiss === 'timer') {
|
||||
console.log('من بسته شدم توسط تایمر خودکار')
|
||||
}
|
||||
})
|
||||
});
|
||||
};
|
||||
|
||||
return {
|
||||
// Init
|
||||
init: function () {
|
||||
_init();
|
||||
},
|
||||
};
|
||||
}();
|
||||
|
||||
// Class Initialization
|
||||
jQuery(document).ready(function () {
|
||||
KTSweetAlert2Demo.init();
|
||||
});
|
||||
165
Content/Panel/js/pages/features/miscellaneous/toastr.js
Normal file
165
Content/Panel/js/pages/features/miscellaneous/toastr.js
Normal file
@ -0,0 +1,165 @@
|
||||
"use strict";
|
||||
|
||||
// Class definition
|
||||
var KTToastrDemo = function() {
|
||||
|
||||
// Private functions
|
||||
|
||||
// basic demo
|
||||
var demo = function() {
|
||||
var i = -1;
|
||||
var toastCount = 0;
|
||||
var $toastlast;
|
||||
|
||||
var getMessage = function () {
|
||||
var msgs = [
|
||||
'یک سفارش جدید دارید.',
|
||||
'آیا مطمئن هستید؟',
|
||||
'چگونه ممکن هست!',
|
||||
'با کمی تامل و فکر می توانید این مشکل را حل کنید!',
|
||||
'از تفریح در قلعه لذت ببرید!'
|
||||
];
|
||||
i++;
|
||||
if (i === msgs.length) {
|
||||
i = 0;
|
||||
}
|
||||
|
||||
return msgs[i];
|
||||
};
|
||||
|
||||
var getMessageWithClearButton = function (msg) {
|
||||
msg = msg ? msg : 'حذف خودش؟';
|
||||
msg += '<br /><br /><button type="button" class="btn btn-outline-light btn-sm--air--wide clear">بله</button>';
|
||||
return msg;
|
||||
};
|
||||
|
||||
$('#showtoast').click(function () {
|
||||
var shortCutFunction = $("#toastTypeGroup input:radio: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++;
|
||||
var addClear = $('#addClear').prop('checked');
|
||||
|
||||
toastr.options = {
|
||||
closeButton: $('#closeButton').prop('checked'),
|
||||
debug: $('#debugInfo').prop('checked'),
|
||||
newestOnTop: $('#newestOnTop').prop('checked'),
|
||||
progressBar: $('#progressBar').prop('checked'),
|
||||
positionClass: $('#positionGroup input:radio:checked').val() || 'toast-top-right',
|
||||
preventDuplicates: $('#preventDuplicates').prop('checked'),
|
||||
onclick: null
|
||||
};
|
||||
|
||||
if ($('#addBehaviorOnToastClick').prop('checked')) {
|
||||
toastr.options.onclick = function () {
|
||||
alert('بعد از حذف توئستر می توانید یک سری عملیات های سفارش را اجرا کنید');
|
||||
};
|
||||
}
|
||||
|
||||
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 = addClear ? 0 : $timeOut.val();
|
||||
}
|
||||
|
||||
if ($extendedTimeOut.val().length) {
|
||||
toastr.options.extendedTimeOut = addClear ? 0 : $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 (addClear) {
|
||||
msg = getMessageWithClearButton(msg);
|
||||
toastr.options.tapToDismiss = false;
|
||||
}
|
||||
if (!msg) {
|
||||
msg = getMessage();
|
||||
}
|
||||
|
||||
$('#toastrOptions').text(
|
||||
'toastr.options = '
|
||||
+ JSON.stringify(toastr.options, null, 2)
|
||||
+ ';'
|
||||
+ '\n\ntoastr.'
|
||||
+ shortCutFunction
|
||||
+ '("'
|
||||
+ msg
|
||||
+ (title ? '", "' + title : '')
|
||||
+ '");'
|
||||
);
|
||||
|
||||
var $toast = toastr[shortCutFunction](msg, title); // Wire up an event handler to a button in the toast, if it exists
|
||||
$toastlast = $toast;
|
||||
|
||||
if(typeof $toast === 'undefined'){
|
||||
return;
|
||||
}
|
||||
|
||||
if ($toast.find('#okBtn').length) {
|
||||
$toast.delegate('#okBtn', 'click', function () {
|
||||
alert('کلیک کنید روی توئستر #' + toastIndex + '. خداحافظ');
|
||||
$toast.remove();
|
||||
});
|
||||
}
|
||||
if ($toast.find('#surpriseBtn').length) {
|
||||
$toast.delegate('#surpriseBtn', 'click', function () {
|
||||
alert('سوپرایز! با کلیک کردن #' + toastIndex + '. می توانید کلیک کنید و مشاهده کنید عملیات را.');
|
||||
});
|
||||
}
|
||||
if ($toast.find('.clear').length) {
|
||||
$toast.delegate('.clear', 'click', function () {
|
||||
toastr.clear($toast, { force: true });
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
function getLastToast(){
|
||||
return $toastlast;
|
||||
}
|
||||
$('#clearlasttoast').click(function () {
|
||||
toastr.clear(getLastToast());
|
||||
});
|
||||
$('#cleartoasts').click(function () {
|
||||
toastr.clear();
|
||||
});
|
||||
}
|
||||
|
||||
return {
|
||||
// public functions
|
||||
init: function() {
|
||||
demo();
|
||||
}
|
||||
};
|
||||
}();
|
||||
|
||||
jQuery(document).ready(function() {
|
||||
KTToastrDemo.init();
|
||||
});
|
||||
281
Content/Panel/js/pages/features/miscellaneous/treeview.js
Normal file
281
Content/Panel/js/pages/features/miscellaneous/treeview.js
Normal file
@ -0,0 +1,281 @@
|
||||
"use strict";
|
||||
|
||||
var KTTreeview = function () {
|
||||
|
||||
var _demo1 = function () {
|
||||
$('#kt_tree_1').jstree({
|
||||
"core" : {
|
||||
"themes" : {
|
||||
"responsive": false
|
||||
}
|
||||
},
|
||||
"types" : {
|
||||
"default" : {
|
||||
"icon" : "fa fa-folder"
|
||||
},
|
||||
"file" : {
|
||||
"icon" : "fa fa-file"
|
||||
}
|
||||
},
|
||||
"plugins": ["types"]
|
||||
});
|
||||
}
|
||||
|
||||
var _demo2 = function () {
|
||||
$('#kt_tree_2').jstree({
|
||||
"core" : {
|
||||
"themes" : {
|
||||
"responsive": false
|
||||
}
|
||||
},
|
||||
"types" : {
|
||||
"default" : {
|
||||
"icon" : "fa fa-folder text-warning"
|
||||
},
|
||||
"file" : {
|
||||
"icon" : "fa fa-file text-warning"
|
||||
}
|
||||
},
|
||||
"plugins": ["types"]
|
||||
});
|
||||
|
||||
// handle link clicks in tree nodes(support target="_blank" as well)
|
||||
$('#kt_tree_2').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 _demo3 = function () {
|
||||
$('#kt_tree_3').jstree({
|
||||
'plugins': ["wholerow", "checkbox", "types"],
|
||||
'core': {
|
||||
"themes" : {
|
||||
"responsive": false
|
||||
},
|
||||
'data': [{
|
||||
"text": "با قابلیت چک باکس",
|
||||
"children": [{
|
||||
"text": "انتخاب شده",
|
||||
"state": {
|
||||
"selected": true
|
||||
}
|
||||
}, {
|
||||
"text": "آیکون سفارشی",
|
||||
"icon": "fa fa-warning text-danger"
|
||||
}, {
|
||||
"text": "باز شده",
|
||||
"icon" : "fa fa-folder text-default",
|
||||
"state": {
|
||||
"opened": true
|
||||
},
|
||||
"children": ["گره دیگر"]
|
||||
}, {
|
||||
"text": "آیکون سفارشی",
|
||||
"icon": "fa fa-warning text-waring"
|
||||
}, {
|
||||
"text": "گره غیرفعال",
|
||||
"icon": "fa fa-check text-success",
|
||||
"state": {
|
||||
"disabled": true
|
||||
}
|
||||
}]
|
||||
},
|
||||
"انتخاب"
|
||||
]
|
||||
},
|
||||
"types" : {
|
||||
"default" : {
|
||||
"icon" : "fa fa-folder text-warning"
|
||||
},
|
||||
"file" : {
|
||||
"icon" : "fa fa-file text-warning"
|
||||
}
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
var _demo4 = function() {
|
||||
$("#kt_tree_4").jstree({
|
||||
"core" : {
|
||||
"themes" : {
|
||||
"responsive": false
|
||||
},
|
||||
// so that create works
|
||||
"check_callback" : true,
|
||||
'data': [{
|
||||
"text": "گره والد",
|
||||
"children": [{
|
||||
"text": "انتخاب شده",
|
||||
"state": {
|
||||
"selected": true
|
||||
}
|
||||
}, {
|
||||
"text": "آیکون سفارشی",
|
||||
"icon": "flaticon2-hourglass-1 text-danger"
|
||||
}, {
|
||||
"text": "باز شده",
|
||||
"icon" : "fa fa-folder text-success",
|
||||
"state": {
|
||||
"opened": true
|
||||
},
|
||||
"children": [
|
||||
{"text": "گره دیگر", "icon" : "fa fa-file text-waring"}
|
||||
]
|
||||
}, {
|
||||
"text": "دیگر آیکون سفارشی",
|
||||
"icon": "flaticon2-drop text-waring"
|
||||
}, {
|
||||
"text": "گره غیرفعال",
|
||||
"icon": "fa fa-check text-success",
|
||||
"state": {
|
||||
"disabled": true
|
||||
}
|
||||
}, {
|
||||
"text": "زیر گره",
|
||||
"icon": "fa fa-folder text-danger",
|
||||
"children": [
|
||||
{"text": "آیتم 1", "icon" : "fa fa-file text-waring"},
|
||||
{"text": "آیتم 2", "icon" : "fa fa-file text-success"},
|
||||
{"text": "آیتم 3", "icon" : "fa fa-file text-default"},
|
||||
{"text": "آیتم 4", "icon" : "fa fa-file text-danger"},
|
||||
{"text": "آیتم 5", "icon" : "fa fa-file text-info"}
|
||||
]
|
||||
}]
|
||||
},
|
||||
"گره دیگر"
|
||||
]
|
||||
},
|
||||
"types" : {
|
||||
"default" : {
|
||||
"icon" : "fa fa-folder text-primary"
|
||||
},
|
||||
"file" : {
|
||||
"icon" : "fa fa-file text-primary"
|
||||
}
|
||||
},
|
||||
"state" : { "key" : "demo2" },
|
||||
"plugins" : [ "contextmenu", "state", "types" ]
|
||||
});
|
||||
}
|
||||
|
||||
var _demo5 = function() {
|
||||
$("#kt_tree_5").jstree({
|
||||
"core" : {
|
||||
"themes" : {
|
||||
"responsive": false
|
||||
},
|
||||
// so that create works
|
||||
"check_callback" : true,
|
||||
'data': [{
|
||||
"text": "گره والد",
|
||||
"children": [{
|
||||
"text": "انتخاب شده",
|
||||
"state": {
|
||||
"selected": true
|
||||
}
|
||||
}, {
|
||||
"text": "آیکون سفارشی",
|
||||
"icon": "flaticon2-warning text-danger"
|
||||
}, {
|
||||
"text": "باز شده",
|
||||
"icon" : "fa fa-folder text-success",
|
||||
"state": {
|
||||
"opened": true
|
||||
},
|
||||
"children": [
|
||||
{"text": "گره دیگر", "icon" : "fa fa-file text-waring"}
|
||||
]
|
||||
}, {
|
||||
"text": "دیگر آیکون سفارشی",
|
||||
"icon": "flaticon2-bell-5 text-waring"
|
||||
}, {
|
||||
"text": "گره غیرفعال",
|
||||
"icon": "fa fa-check text-success",
|
||||
"state": {
|
||||
"disabled": true
|
||||
}
|
||||
}, {
|
||||
"text": "زیر گره",
|
||||
"icon": "fa fa-folder text-danger",
|
||||
"children": [
|
||||
{"text": "آیتم 1", "icon" : "fa fa-file text-waring"},
|
||||
{"text": "آیتم 2", "icon" : "fa fa-file text-success"},
|
||||
{"text": "آیتم 3", "icon" : "fa fa-file text-default"},
|
||||
{"text": "آیتم 4", "icon" : "fa fa-file text-danger"},
|
||||
{"text": "آیتم 5", "icon" : "fa fa-file text-info"}
|
||||
]
|
||||
}]
|
||||
},
|
||||
"گره دیگر"
|
||||
]
|
||||
},
|
||||
"types" : {
|
||||
"default" : {
|
||||
"icon" : "fa fa-folder text-success"
|
||||
},
|
||||
"file" : {
|
||||
"icon" : "fa fa-file text-success"
|
||||
}
|
||||
},
|
||||
"state" : { "key" : "demo2" },
|
||||
"plugins" : [ "dnd", "state", "types" ]
|
||||
});
|
||||
}
|
||||
|
||||
var _demo6 = function() {
|
||||
$("#kt_tree_6").jstree({
|
||||
"core": {
|
||||
"themes": {
|
||||
"responsive": false
|
||||
},
|
||||
// so that create works
|
||||
"check_callback": true,
|
||||
'data': {
|
||||
'url': function(node) {
|
||||
return HOST_URL + '/api//jstree/ajax_data.php';
|
||||
},
|
||||
'data': function(node) {
|
||||
return {
|
||||
'parent': node.id
|
||||
};
|
||||
}
|
||||
}
|
||||
},
|
||||
"types": {
|
||||
"default": {
|
||||
"icon": "fa fa-folder text-primary"
|
||||
},
|
||||
"file": {
|
||||
"icon": "fa fa-file text-primary"
|
||||
}
|
||||
},
|
||||
"state": {
|
||||
"key": "demo3"
|
||||
},
|
||||
"plugins": ["dnd", "state", "types"]
|
||||
});
|
||||
}
|
||||
|
||||
return {
|
||||
//main function to initiate the module
|
||||
init: function () {
|
||||
_demo1();
|
||||
_demo2();
|
||||
_demo3();
|
||||
_demo4();
|
||||
_demo5();
|
||||
_demo6();
|
||||
}
|
||||
};
|
||||
}();
|
||||
|
||||
jQuery(document).ready(function() {
|
||||
KTTreeview.init();
|
||||
});
|
||||
Reference in New Issue
Block a user