primo upload
This commit is contained in:
claus75a
@@ -0,0 +1,220 @@
|
||||
/*
|
||||
Template Name: Zoogler - Bootstrap 4 Admin Dashboard
|
||||
Author: Mannatthemes
|
||||
Website: www.mannatthemes.com
|
||||
File: Alertify init js
|
||||
*/
|
||||
|
||||
"use strict";
|
||||
|
||||
(function() {
|
||||
|
||||
function $(selector) {
|
||||
return document.querySelector(selector);
|
||||
}
|
||||
|
||||
function reset (ev) {
|
||||
ev.preventDefault();
|
||||
alertify.reset();
|
||||
}
|
||||
|
||||
function logDemo(selector) {
|
||||
(ga || function() { })("send", "event", "button", "click", "demo", selector);
|
||||
}
|
||||
|
||||
function demo(selector, cb) {
|
||||
var el = $(selector);
|
||||
if(el) {
|
||||
el.addEventListener("click", function(ev) {
|
||||
ev.preventDefault();
|
||||
logDemo(selector);
|
||||
cb();
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
var ga = ga || function() {};
|
||||
|
||||
// ==============================
|
||||
// Standard Dialogs
|
||||
demo("#alertify-alert", function (ev) {
|
||||
alertify.alert("This is an alert dialog");
|
||||
return false;
|
||||
});
|
||||
|
||||
demo("#alertify-confirm", function (ev) {
|
||||
alertify.confirm("This is a confirm dialog", function (ev) {
|
||||
ev.preventDefault();
|
||||
alertify.success("You've clicked OK");
|
||||
}, function(ev) {
|
||||
ev.preventDefault();
|
||||
alertify.error("You've clicked Cancel");
|
||||
});
|
||||
});
|
||||
|
||||
demo("#alertify-click-to-close", function (ev) {
|
||||
alertify
|
||||
.closeLogOnClick(true)
|
||||
.log("Click me to close!");
|
||||
});
|
||||
|
||||
demo("#alertify-disable-click-to-close", function (ev) {
|
||||
alertify
|
||||
.closeLogOnClick(true)
|
||||
.log("Click me to close!")
|
||||
.closeLogOnClick(false)
|
||||
.log("You can't click to close this!");
|
||||
});
|
||||
|
||||
demo("#alertify-reset", function (ev) {
|
||||
alertify
|
||||
.okBtn("Go For It!")
|
||||
.reset(ev)
|
||||
.alert("Custom values were reset");
|
||||
});
|
||||
|
||||
demo("#alertify-log-template", function (ev) {
|
||||
alertify
|
||||
.setLogTemplate(function (input) { return 'log message: ' + input; })
|
||||
.log("This is the message");
|
||||
});
|
||||
|
||||
demo("#alertify-max-log-items", function (ev) {
|
||||
alertify
|
||||
.maxLogItems(1)
|
||||
.log("This is the first message");
|
||||
|
||||
// The timeout is just for visual effect.
|
||||
setTimeout(function() {
|
||||
alertify.log("The second message will force the first to close.");
|
||||
}, 1000);
|
||||
});
|
||||
|
||||
demo("#alertify-prompt", function (ev) {
|
||||
alertify
|
||||
.defaultValue("Default value")
|
||||
.prompt("This is a prompt dialog", function (str, ev) {
|
||||
ev.preventDefault();
|
||||
alertify.success("You've clicked OK and typed: " + str);
|
||||
}, function(ev) {
|
||||
ev.preventDefault();
|
||||
alertify.error("You've clicked Cancel");
|
||||
});
|
||||
});
|
||||
|
||||
// ==============================
|
||||
// Ajax
|
||||
demo("#alertify-ajax", function (ev) {
|
||||
alertify.confirm("Confirm?", function(ev) {
|
||||
ev.preventDefault();
|
||||
alertify.alert("Successful AJAX after OK");
|
||||
}, function(ev) {
|
||||
ev.preventDefault();
|
||||
alertify.alert("Successful AJAX after Cancel");
|
||||
});
|
||||
});
|
||||
|
||||
// ==============================
|
||||
// Promise Aware
|
||||
demo("#alertify-promise", function (ev) {
|
||||
if ("function" !== typeof Promise) {
|
||||
alertify.alert("Your browser doesn't support promises");
|
||||
return;
|
||||
}
|
||||
|
||||
alertify.confirm("Confirm?").then(function (resolvedValue) {
|
||||
// The click event is in the
|
||||
// event variable, so you can use
|
||||
// it here.
|
||||
resolvedValue.event.preventDefault();
|
||||
alertify.alert("You clicked the " + resolvedValue.buttonClicked + " button!");
|
||||
});
|
||||
});
|
||||
|
||||
// ==============================
|
||||
// Standard Dialogs
|
||||
demo("#alertify-notification", function (ev) {
|
||||
alertify.log("Standard log message");
|
||||
});
|
||||
|
||||
demo("#alertify-notification-html", function (ev) {
|
||||
alertify.log("<img src='https://placehold.it/256x128'><h3 class='font-18'>This is HTML</h3>");
|
||||
});
|
||||
|
||||
demo("#alertify-notification-callback", function(ev) {
|
||||
alertify.log("Standard log message with callback", function(ev) {
|
||||
ev.preventDefault();
|
||||
alertify.log("You clicked the notification");
|
||||
});
|
||||
});
|
||||
|
||||
demo("#alertify-success", function (ev) {
|
||||
alertify.success("Success log message");
|
||||
});
|
||||
|
||||
demo("#alertify-success-callback", function(ev) {
|
||||
alertify.success("Standard log message with callback", function() {
|
||||
alertify.success("You clicked the notification");
|
||||
});
|
||||
});
|
||||
|
||||
demo("#alertify-error", function (ev) {
|
||||
alertify.error("Error log message");
|
||||
});
|
||||
|
||||
demo("#alertify-error-callback", function(ev) {
|
||||
alertify.error("Standard log message with callback", function(ev) {
|
||||
ev.preventDefault();
|
||||
alertify.error("You clicked the notification");
|
||||
});
|
||||
});
|
||||
|
||||
// ==============================
|
||||
// Custom Properties
|
||||
demo("#alertify-delay", function (ev) {
|
||||
alertify
|
||||
.delay(10000)
|
||||
.log("Hiding in 10 seconds");
|
||||
});
|
||||
|
||||
demo("#alertify-forever", function (ev) {
|
||||
alertify
|
||||
.delay(0)
|
||||
.log("Will stay until clicked");
|
||||
});
|
||||
|
||||
demo("#alertify-labels", function (ev) {
|
||||
alertify
|
||||
.okBtn("Accept")
|
||||
.cancelBtn("Deny")
|
||||
.confirm("Confirm dialog with custom button labels", function (ev) {
|
||||
ev.preventDefault();
|
||||
alertify.success("You've clicked OK");
|
||||
}, function(ev) {
|
||||
ev.preventDefault();
|
||||
alertify.error("You've clicked Cancel");
|
||||
});
|
||||
});
|
||||
|
||||
demo("#alertify-log-position", function() {
|
||||
alertify.delay(1000); // This is just to make the demo go faster.
|
||||
alertify.log("Default bottom left position");
|
||||
setTimeout(function() {
|
||||
alertify.logPosition("top left");
|
||||
alertify.log("top left");
|
||||
}, 1500);
|
||||
setTimeout(function() {
|
||||
alertify.logPosition("top right");
|
||||
alertify.log("top right");
|
||||
}, 3000);
|
||||
setTimeout(function() {
|
||||
alertify.logPosition("bottom right");
|
||||
alertify.log("bottom right");
|
||||
}, 4500);
|
||||
setTimeout(function() {
|
||||
alertify.reset(); // Puts the message back to default position.
|
||||
alertify.log("Back to default");
|
||||
}, 6000);
|
||||
});
|
||||
|
||||
})();
|
||||
@@ -0,0 +1,25 @@
|
||||
/*
|
||||
Template Name: Zoogler - Bootstrap 4 Admin Dashboard
|
||||
Author: Mannatthemes
|
||||
Website: www.mannatthemes.com
|
||||
File: Animation demo js
|
||||
*/
|
||||
|
||||
function testAnim(x) {
|
||||
$('#animationSandbox').removeClass().addClass(x + ' animated').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function() {
|
||||
$(this).removeClass();
|
||||
});
|
||||
};
|
||||
|
||||
$(document).ready(function() {
|
||||
$('.js--triggerAnimation').click(function(e) {
|
||||
e.preventDefault();
|
||||
var anim = $('.js--animations').val();
|
||||
testAnim(anim);
|
||||
});
|
||||
|
||||
$('.js--animations').change(function() {
|
||||
var anim = $(this).val();
|
||||
testAnim(anim);
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,170 @@
|
||||
/*
|
||||
Template Name: Zoogler - Bootstrap 4 Admin Dashboard
|
||||
Author: Mannatthemes
|
||||
Website: www.mannatthemes.com
|
||||
File: C3 Chart init js
|
||||
*/
|
||||
|
||||
!function($) {
|
||||
"use strict";
|
||||
|
||||
var ChartC3 = function() {};
|
||||
|
||||
ChartC3.prototype.init = function () {
|
||||
//generating chart
|
||||
c3.generate({
|
||||
bindto: '#chart',
|
||||
data: {
|
||||
columns: [
|
||||
['Desktop', 150, 80, 70, 152, 250, 95],
|
||||
['Mobile', 200, 130, 90, 240, 130, 220],
|
||||
['Tablet', 300, 200, 160, 400, 250, 250]
|
||||
],
|
||||
type: 'bar',
|
||||
colors: {
|
||||
Desktop: '#b4c39d',
|
||||
Mobile: '#ad85ca',
|
||||
Tablet: '#605daf'
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
//combined chart
|
||||
c3.generate({
|
||||
bindto: '#combine-chart',
|
||||
data: {
|
||||
columns: [
|
||||
['SonyVaio', 30, 20, 50, 40, 60, 50],
|
||||
['iMacs', 200, 130, 90, 240, 130, 220],
|
||||
['Tablets', 300, 200, 160, 400, 250, 250],
|
||||
['iPhones', 200, 130, 90, 240, 130, 220],
|
||||
['Macbooks', 130, 120, 150, 140, 160, 150]
|
||||
],
|
||||
types: {
|
||||
SonyVaio: 'bar',
|
||||
iMacs: 'bar',
|
||||
Tablets: 'spline',
|
||||
iPhones: 'line',
|
||||
Macbooks: 'bar'
|
||||
},
|
||||
colors: {
|
||||
SonyVaio: '#ad85ca',
|
||||
iMacs: '#605daf',
|
||||
Tablets: '#f75d8c',
|
||||
iPhones: '#739bea',
|
||||
Macbooks: '#b4c39d'
|
||||
},
|
||||
groups: [
|
||||
['SonyVaio','iMacs']
|
||||
]
|
||||
},
|
||||
axis: {
|
||||
x: {
|
||||
type: 'categorized'
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
//roated chart
|
||||
c3.generate({
|
||||
bindto: '#roated-chart',
|
||||
data: {
|
||||
columns: [
|
||||
['Revenue', 30, 200, 100, 400, 150, 250],
|
||||
['Pageview', 50, 20, 10, 40, 15, 25]
|
||||
],
|
||||
types: {
|
||||
Revenue: 'bar'
|
||||
},
|
||||
colors: {
|
||||
Revenue: '#605daf',
|
||||
Pageview: '#b4c39d'
|
||||
}
|
||||
},
|
||||
axis: {
|
||||
rotated: true,
|
||||
x: {
|
||||
type: 'categorized'
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
//stacked chart
|
||||
c3.generate({
|
||||
bindto: '#chart-stacked',
|
||||
data: {
|
||||
columns: [
|
||||
['Revenue', 130, 120, 150, 140, 160, 150, 130, 120, 150, 140, 160, 150],
|
||||
['Pageview', 200, 130, 90, 240, 130, 220, 200, 130, 90, 240, 130, 220]
|
||||
],
|
||||
types: {
|
||||
Revenue: 'area-spline',
|
||||
Pageview: 'area-spline'
|
||||
// 'line', 'spline', 'step', 'area', 'area-step' are also available to stack
|
||||
},
|
||||
colors: {
|
||||
Revenue: '#b4c39d',
|
||||
Pageview: '#605daf'
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
//Donut Chart
|
||||
c3.generate({
|
||||
bindto: '#donut-chart',
|
||||
data: {
|
||||
columns: [
|
||||
['Desktops', 78],
|
||||
['Smart Phones', 55],
|
||||
['Mobiles', 40],
|
||||
['Tablets', 25]
|
||||
],
|
||||
type : 'donut'
|
||||
},
|
||||
donut: {
|
||||
title: "Candidates",
|
||||
width: 30,
|
||||
label: {
|
||||
show:false
|
||||
}
|
||||
},
|
||||
color: {
|
||||
pattern: ['#40a4f1', "#ebeff2", '#f5b225', '#ec536c']
|
||||
}
|
||||
});
|
||||
|
||||
//Pie Chart
|
||||
c3.generate({
|
||||
bindto: '#pie-chart',
|
||||
data: {
|
||||
columns: [
|
||||
['Desktops', 78],
|
||||
['Smart Phones', 55],
|
||||
['Mobiles', 40],
|
||||
['Tablets', 25]
|
||||
],
|
||||
type : 'pie'
|
||||
},
|
||||
color: {
|
||||
pattern: ['#40a4f1', "#ebeff2", '#f5b225', '#ec536c']
|
||||
},
|
||||
pie: {
|
||||
label: {
|
||||
show: false
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
},
|
||||
$.ChartC3 = new ChartC3, $.ChartC3.Constructor = ChartC3
|
||||
|
||||
}(window.jQuery),
|
||||
|
||||
//initializing
|
||||
function($) {
|
||||
"use strict";
|
||||
$.ChartC3.init()
|
||||
}(window.jQuery);
|
||||
|
||||
|
||||
|
||||
@@ -0,0 +1,187 @@
|
||||
|
||||
/*
|
||||
Template Name: Zoogler - Bootstrap 4 Admin Dashboard
|
||||
Author: Mannatthemes
|
||||
Website: www.mannatthemes.com
|
||||
File: Calendar init js
|
||||
*/
|
||||
|
||||
!function($) {
|
||||
"use strict";
|
||||
|
||||
var CalendarPage = function() {};
|
||||
|
||||
CalendarPage.prototype.init = function() {
|
||||
|
||||
//checking if plugin is available
|
||||
if ($.isFunction($.fn.fullCalendar)) {
|
||||
/* initialize the external events */
|
||||
$('#external-events .fc-event').each(function() {
|
||||
// create an Event Object (http://arshaw.com/fullcalendar/docs/event_data/Event_Object/)
|
||||
// it doesn't need to have a start or end
|
||||
var eventObject = {
|
||||
title: $.trim($(this).text()) // use the element's text as the event title
|
||||
};
|
||||
|
||||
// store the Event Object in the DOM element so we can get to it later
|
||||
$(this).data('eventObject', eventObject);
|
||||
|
||||
// make the event draggable using jQuery UI
|
||||
$(this).draggable({
|
||||
zIndex: 999,
|
||||
revert: true, // will cause the event to go back to its
|
||||
revertDuration: 0 // original position after the drag
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
/* initialize the calendar */
|
||||
|
||||
var date = new Date();
|
||||
var d = date.getDate();
|
||||
var m = date.getMonth();
|
||||
var y = date.getFullYear();
|
||||
|
||||
$('#calendar').fullCalendar({
|
||||
header: {
|
||||
left: 'prev,next today',
|
||||
center: 'title',
|
||||
right: 'month,basicWeek,basicDay'
|
||||
},
|
||||
editable: true,
|
||||
eventLimit: true, // allow "more" link when too many events
|
||||
droppable: true, // this allows things to be dropped onto the calendar !!!
|
||||
drop: function(date, allDay) { // this function is called when something is dropped
|
||||
|
||||
// retrieve the dropped element's stored Event Object
|
||||
var originalEventObject = $(this).data('eventObject');
|
||||
|
||||
// we need to copy it, so that multiple events don't have a reference to the same object
|
||||
var copiedEventObject = $.extend({}, originalEventObject);
|
||||
|
||||
// assign it the date that was reported
|
||||
copiedEventObject.start = date;
|
||||
copiedEventObject.allDay = allDay;
|
||||
|
||||
// render the event on the calendar
|
||||
// the last `true` argument determines if the event "sticks" (http://arshaw.com/fullcalendar/docs/event_rendering/renderEvent/)
|
||||
$('#calendar').fullCalendar('renderEvent', copiedEventObject, true);
|
||||
|
||||
// is the "remove after drop" checkbox checked?
|
||||
if ($('#drop-remove').is(':checked')) {
|
||||
// if so, remove the element from the "Draggable Events" list
|
||||
$(this).remove();
|
||||
}
|
||||
|
||||
},
|
||||
events: [{
|
||||
title: 'All Day Event',
|
||||
start: new Date(y, m, 1),
|
||||
className: 'bg-gradient2',
|
||||
},
|
||||
{
|
||||
title: 'Long Event',
|
||||
start: new Date(y, m, d-5),
|
||||
end: new Date(y, m, d-2),
|
||||
className: 'bg-gradient1',
|
||||
},
|
||||
{
|
||||
id: 999,
|
||||
title: 'Repeating Event',
|
||||
start: new Date(y, m, d-3, 16, 0),
|
||||
allDay: false,
|
||||
className: 'bg-gradient2',
|
||||
},
|
||||
{
|
||||
id: 999,
|
||||
title: 'Repeating Event',
|
||||
start: new Date(y, m, d+4, 16, 0),
|
||||
allDay: false,
|
||||
className: 'bg-gradient3',
|
||||
},
|
||||
{
|
||||
title: 'Meeting',
|
||||
start: new Date(y, m, d, 10, 30),
|
||||
allDay: false,
|
||||
className: 'bg-gradient1',
|
||||
},
|
||||
{
|
||||
title: 'Lunch',
|
||||
start: new Date(y, m, d, 12, 0),
|
||||
end: new Date(y, m, d, 14, 0),
|
||||
allDay: false,
|
||||
className: 'bg-gradient2',
|
||||
},
|
||||
{
|
||||
title: 'Birthday Party',
|
||||
start: new Date(y, m, d+1, 19, 0),
|
||||
end: new Date(y, m, d+1, 22, 30),
|
||||
allDay: false,
|
||||
className: 'bg-gradient3',
|
||||
},
|
||||
{
|
||||
title: 'Click for Google',
|
||||
start: new Date(y, m, 28),
|
||||
end: new Date(y, m, 29),
|
||||
url: 'http://google.com/',
|
||||
className: 'bg-gradient2',
|
||||
}]
|
||||
});
|
||||
|
||||
/*Add new event*/
|
||||
// Form to add new event
|
||||
|
||||
$("#add_event_form").on('submit', function(ev) {
|
||||
ev.preventDefault();
|
||||
|
||||
var $event = $(this).find('.new-event-form'),
|
||||
event_name = $event.val();
|
||||
|
||||
if (event_name.length >= 3) {
|
||||
|
||||
var newid = "new" + "" + Math.random().toString(36).substring(7);
|
||||
// Create Event Entry
|
||||
$("#external-events").append(
|
||||
'<div id="' + newid + '" class="fc-event">' + event_name + '</div>'
|
||||
);
|
||||
|
||||
|
||||
var eventObject = {
|
||||
title: $.trim($("#" + newid).text()) // use the element's text as the event title
|
||||
};
|
||||
|
||||
// store the Event Object in the DOM element so we can get to it later
|
||||
$("#" + newid).data('eventObject', eventObject);
|
||||
|
||||
// Reset draggable
|
||||
$("#" + newid).draggable({
|
||||
revert: true,
|
||||
revertDuration: 0,
|
||||
zIndex: 999
|
||||
});
|
||||
|
||||
// Reset input
|
||||
$event.val('').focus();
|
||||
} else {
|
||||
$event.focus();
|
||||
}
|
||||
});
|
||||
|
||||
}
|
||||
else {
|
||||
alert("Calendar plugin is not installed");
|
||||
}
|
||||
},
|
||||
//init
|
||||
$.CalendarPage = new CalendarPage, $.CalendarPage.Constructor = CalendarPage
|
||||
}
|
||||
(window.jQuery),
|
||||
|
||||
|
||||
//initializing
|
||||
function($) {
|
||||
"use strict";
|
||||
$.CalendarPage.init()
|
||||
}(window.jQuery);
|
||||
|
||||
|
||||
@@ -0,0 +1,359 @@
|
||||
/*
|
||||
Template Name: Zoogler - Bootstrap 4 Admin Dashboard
|
||||
Author: Mannatthemes
|
||||
Website: www.mannatthemes.com
|
||||
File: Chartist init js
|
||||
*/
|
||||
|
||||
|
||||
//smil-animations Chart
|
||||
|
||||
|
||||
var chart = new Chartist.Line('#smil-animations', {
|
||||
labels: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
|
||||
series: [
|
||||
[12, 9, 7, 8, 5, 4, 6, 2, 3, 3, 4, 6],
|
||||
[4, 5, 3, 7, 3, 5, 5, 3, 4, 4, 5, 5],
|
||||
[5, 3, 4, 5, 6, 3, 3, 4, 5, 6, 3, 4],
|
||||
[3, 4, 5, 6, 7, 6, 4, 5, 6, 7, 6, 3]
|
||||
]
|
||||
}, {
|
||||
low: 0,
|
||||
plugins: [
|
||||
Chartist.plugins.tooltip()
|
||||
]
|
||||
});
|
||||
|
||||
// Let's put a sequence number aside so we can use it in the event callbacks
|
||||
var seq = 0,
|
||||
delays = 80,
|
||||
durations = 500;
|
||||
|
||||
// Once the chart is fully created we reset the sequence
|
||||
chart.on('created', function() {
|
||||
seq = 0;
|
||||
});
|
||||
|
||||
// On each drawn element by Chartist we use the Chartist.Svg API to trigger SMIL animations
|
||||
chart.on('draw', function(data) {
|
||||
seq++;
|
||||
|
||||
if(data.type === 'line') {
|
||||
// If the drawn element is a line we do a simple opacity fade in. This could also be achieved using CSS3 animations.
|
||||
data.element.animate({
|
||||
opacity: {
|
||||
// The delay when we like to start the animation
|
||||
begin: seq * delays + 1000,
|
||||
// Duration of the animation
|
||||
dur: durations,
|
||||
// The value where the animation should start
|
||||
from: 0,
|
||||
// The value where it should end
|
||||
to: 1
|
||||
}
|
||||
});
|
||||
} else if(data.type === 'label' && data.axis === 'x') {
|
||||
data.element.animate({
|
||||
y: {
|
||||
begin: seq * delays,
|
||||
dur: durations,
|
||||
from: data.y + 100,
|
||||
to: data.y,
|
||||
// We can specify an easing function from Chartist.Svg.Easing
|
||||
easing: 'easeOutQuart'
|
||||
}
|
||||
});
|
||||
} else if(data.type === 'label' && data.axis === 'y') {
|
||||
data.element.animate({
|
||||
x: {
|
||||
begin: seq * delays,
|
||||
dur: durations,
|
||||
from: data.x - 100,
|
||||
to: data.x,
|
||||
easing: 'easeOutQuart'
|
||||
}
|
||||
});
|
||||
} else if(data.type === 'point') {
|
||||
data.element.animate({
|
||||
x1: {
|
||||
begin: seq * delays,
|
||||
dur: durations,
|
||||
from: data.x - 10,
|
||||
to: data.x,
|
||||
easing: 'easeOutQuart'
|
||||
},
|
||||
x2: {
|
||||
begin: seq * delays,
|
||||
dur: durations,
|
||||
from: data.x - 10,
|
||||
to: data.x,
|
||||
easing: 'easeOutQuart'
|
||||
},
|
||||
opacity: {
|
||||
begin: seq * delays,
|
||||
dur: durations,
|
||||
from: 0,
|
||||
to: 1,
|
||||
easing: 'easeOutQuart'
|
||||
}
|
||||
});
|
||||
} else if(data.type === 'grid') {
|
||||
// Using data.axis we get x or y which we can use to construct our animation definition objects
|
||||
var pos1Animation = {
|
||||
begin: seq * delays,
|
||||
dur: durations,
|
||||
from: data[data.axis.units.pos + '1'] - 30,
|
||||
to: data[data.axis.units.pos + '1'],
|
||||
easing: 'easeOutQuart'
|
||||
};
|
||||
|
||||
var pos2Animation = {
|
||||
begin: seq * delays,
|
||||
dur: durations,
|
||||
from: data[data.axis.units.pos + '2'] - 100,
|
||||
to: data[data.axis.units.pos + '2'],
|
||||
easing: 'easeOutQuart'
|
||||
};
|
||||
|
||||
var animations = {};
|
||||
animations[data.axis.units.pos + '1'] = pos1Animation;
|
||||
animations[data.axis.units.pos + '2'] = pos2Animation;
|
||||
animations['opacity'] = {
|
||||
begin: seq * delays,
|
||||
dur: durations,
|
||||
from: 0,
|
||||
to: 1,
|
||||
easing: 'easeOutQuart'
|
||||
};
|
||||
|
||||
data.element.animate(animations);
|
||||
}
|
||||
});
|
||||
|
||||
// For the sake of the example we update the chart every time it's created with a delay of 10 seconds
|
||||
chart.on('created', function() {
|
||||
if(window.__exampleAnimateTimeout) {
|
||||
clearTimeout(window.__exampleAnimateTimeout);
|
||||
window.__exampleAnimateTimeout = null;
|
||||
}
|
||||
window.__exampleAnimateTimeout = setTimeout(chart.update.bind(chart), 12000);
|
||||
});
|
||||
|
||||
|
||||
|
||||
//Simple line chart
|
||||
new Chartist.Line('#simple-line-chart', {
|
||||
labels: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday'],
|
||||
series: [
|
||||
[12, 9, 7, 8, 5],
|
||||
[2, 1, 3.5, 7, 3],
|
||||
[1, 3, 4, 5, 6]
|
||||
]
|
||||
}, {
|
||||
fullWidth: true,
|
||||
chartPadding: {
|
||||
right: 40
|
||||
},
|
||||
plugins: [
|
||||
Chartist.plugins.tooltip()
|
||||
]
|
||||
});
|
||||
|
||||
|
||||
|
||||
|
||||
//Line Scatter Diagram
|
||||
var times = function(n) {
|
||||
return Array.apply(null, new Array(n));
|
||||
};
|
||||
|
||||
var data = times(52).map(Math.random).reduce(function(data, rnd, index) {
|
||||
data.labels.push(index + 1);
|
||||
data.series.forEach(function(series) {
|
||||
series.push(Math.random() * 100)
|
||||
});
|
||||
|
||||
return data;
|
||||
}, {
|
||||
labels: [],
|
||||
series: times(4).map(function() { return new Array() })
|
||||
});
|
||||
|
||||
var options = {
|
||||
showLine: false,
|
||||
axisX: {
|
||||
labelInterpolationFnc: function(value, index) {
|
||||
return index % 13 === 0 ? 'W' + value : null;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
var responsiveOptions = [
|
||||
['screen and (min-width: 640px)', {
|
||||
axisX: {
|
||||
labelInterpolationFnc: function(value, index) {
|
||||
return index % 4 === 0 ? 'W' + value : null;
|
||||
}
|
||||
}
|
||||
}]
|
||||
];
|
||||
|
||||
new Chartist.Line('#scatter-diagram', data, options, responsiveOptions);
|
||||
|
||||
|
||||
|
||||
//Line chart with area
|
||||
|
||||
new Chartist.Line('#chart-with-area', {
|
||||
labels: [1, 2, 3, 4, 5, 6, 7, 8],
|
||||
series: [
|
||||
[5, 9, 7, 8, 5, 3, 5, 4]
|
||||
]
|
||||
}, {
|
||||
low: 0,
|
||||
showArea: true,
|
||||
plugins: [
|
||||
Chartist.plugins.tooltip()
|
||||
]
|
||||
});
|
||||
|
||||
|
||||
//Overlapping bars on mobile
|
||||
|
||||
var data = {
|
||||
labels: ['Jan', 'Feb', 'Mar', 'Apr', 'Mai', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
|
||||
series: [
|
||||
[5, 4, 3, 7, 5, 10, 3, 4, 8, 10, 6, 8],
|
||||
[3, 2, 9, 5, 4, 6, 4, 6, 7, 8, 7, 4]
|
||||
]
|
||||
};
|
||||
|
||||
var options = {
|
||||
seriesBarDistance: 10
|
||||
};
|
||||
|
||||
var responsiveOptions = [
|
||||
['screen and (max-width: 640px)', {
|
||||
seriesBarDistance: 5,
|
||||
axisX: {
|
||||
labelInterpolationFnc: function (value) {
|
||||
return value[0];
|
||||
}
|
||||
}
|
||||
}]
|
||||
];
|
||||
|
||||
new Chartist.Bar('#overlapping-bars', data, options, responsiveOptions);
|
||||
|
||||
|
||||
|
||||
|
||||
//Stacked bar chart
|
||||
|
||||
new Chartist.Bar('#stacked-bar-chart', {
|
||||
labels: ['Q1', 'Q2', 'Q3', 'Q4', 'Q5', 'Q6'],
|
||||
series: [
|
||||
[800000, 1200000, 1400000, 1300000, 1520000, 1400000],
|
||||
[200000, 400000, 500000, 300000, 452000, 500000],
|
||||
[160000, 290000, 410000, 600000, 588000, 410000]
|
||||
]
|
||||
}, {
|
||||
stackBars: true,
|
||||
axisY: {
|
||||
labelInterpolationFnc: function(value) {
|
||||
return (value / 1000) + 'k';
|
||||
}
|
||||
},
|
||||
plugins: [
|
||||
Chartist.plugins.tooltip()
|
||||
]
|
||||
}).on('draw', function(data) {
|
||||
if(data.type === 'bar') {
|
||||
data.element.attr({
|
||||
style: 'stroke-width: 30px'
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
//Animating a Donut with Svg.animate
|
||||
|
||||
var chart = new Chartist.Pie('#animating-donut', {
|
||||
series: [10, 20, 50, 20, 5, 50, 15],
|
||||
labels: [1, 2, 3, 4, 5, 6, 7]
|
||||
}, {
|
||||
donut: true,
|
||||
showLabel: false,
|
||||
plugins: [
|
||||
Chartist.plugins.tooltip()
|
||||
]
|
||||
});
|
||||
|
||||
chart.on('draw', function(data) {
|
||||
if(data.type === 'slice') {
|
||||
// Get the total path length in order to use for dash array animation
|
||||
var pathLength = data.element._node.getTotalLength();
|
||||
|
||||
// Set a dasharray that matches the path length as prerequisite to animate dashoffset
|
||||
data.element.attr({
|
||||
'stroke-dasharray': pathLength + 'px ' + pathLength + 'px'
|
||||
});
|
||||
|
||||
// Create animation definition while also assigning an ID to the animation for later sync usage
|
||||
var animationDefinition = {
|
||||
'stroke-dashoffset': {
|
||||
id: 'anim' + data.index,
|
||||
dur: 1000,
|
||||
from: -pathLength + 'px',
|
||||
to: '0px',
|
||||
easing: Chartist.Svg.Easing.easeOutQuint,
|
||||
// We need to use `fill: 'freeze'` otherwise our animation will fall back to initial (not visible)
|
||||
fill: 'freeze'
|
||||
}
|
||||
};
|
||||
|
||||
// If this was not the first slice, we need to time the animation so that it uses the end sync event of the previous animation
|
||||
if(data.index !== 0) {
|
||||
animationDefinition['stroke-dashoffset'].begin = 'anim' + (data.index - 1) + '.end';
|
||||
}
|
||||
|
||||
// We need to set an initial value before the animation starts as we are not in guided mode which would do that for us
|
||||
data.element.attr({
|
||||
'stroke-dashoffset': -pathLength + 'px'
|
||||
});
|
||||
|
||||
// We can't use guided mode as the animations need to rely on setting begin manually
|
||||
// See http://gionkunz.github.io/chartist-js/api-documentation.html#chartistsvg-function-animate
|
||||
data.element.animate(animationDefinition, false);
|
||||
}
|
||||
});
|
||||
|
||||
// For the sake of the example we update the chart every time it's created with a delay of 8 seconds
|
||||
chart.on('created', function() {
|
||||
if(window.__anim21278907124) {
|
||||
clearTimeout(window.__anim21278907124);
|
||||
window.__anim21278907124 = null;
|
||||
}
|
||||
window.__anim21278907124 = setTimeout(chart.update.bind(chart), 10000);
|
||||
});
|
||||
|
||||
|
||||
|
||||
|
||||
//Simple pie chart
|
||||
|
||||
var data = {
|
||||
series: [5, 3, 4]
|
||||
};
|
||||
|
||||
var sum = function(a, b) { return a + b };
|
||||
|
||||
new Chartist.Pie('#simple-pie', data, {
|
||||
labelInterpolationFnc: function(value) {
|
||||
return Math.round(value / data.series.reduce(sum) * 100) + '%';
|
||||
}
|
||||
});
|
||||
|
||||
@@ -0,0 +1,375 @@
|
||||
/*
|
||||
Template Name: Zoogler - Bootstrap 4 Admin Dashboard
|
||||
Author: Mannatthemes
|
||||
Website: www.mannatthemes.com
|
||||
File: Chart js
|
||||
*/
|
||||
|
||||
|
||||
//line-chart
|
||||
var ctx = document.getElementById('lineChart').getContext('2d');
|
||||
|
||||
gradientStroke1 = ctx.createLinearGradient(0, 0, 0, 300);
|
||||
gradientStroke1.addColorStop(0, '#008cff');
|
||||
gradientStroke1.addColorStop(1, 'rgba(22, 195, 233, 0.1)');
|
||||
|
||||
gradientStroke2 = ctx.createLinearGradient(0, 0, 0, 300);
|
||||
gradientStroke2.addColorStop(0, '#ec536c');
|
||||
gradientStroke2.addColorStop(1, 'rgba(222, 15, 23, 0.1)');
|
||||
|
||||
var myChart = new Chart(ctx, {
|
||||
type: 'line',
|
||||
|
||||
data: {
|
||||
labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
|
||||
datasets: [{
|
||||
label: '1-Dataset',
|
||||
data: [3, 30, 10, 10, 22, 12, 5],
|
||||
pointBorderWidth: 0,
|
||||
pointHoverBackgroundColor: gradientStroke1,
|
||||
backgroundColor: gradientStroke1,
|
||||
borderColor: 'transparent',
|
||||
borderWidth: 1
|
||||
},
|
||||
{
|
||||
label: '2-Dataset',
|
||||
data: [5, 15, 12, 25, 5, 7, 5],
|
||||
pointBorderWidth:0,
|
||||
pointHoverBackgroundColor: gradientStroke2,
|
||||
backgroundColor: gradientStroke2,
|
||||
borderColor: 'transparent',
|
||||
borderWidth: 1
|
||||
}],
|
||||
|
||||
},
|
||||
options: {
|
||||
legend: {
|
||||
position: 'bottom',
|
||||
display:true,
|
||||
labels: {
|
||||
boxWidth:12
|
||||
}
|
||||
},
|
||||
tooltips: {
|
||||
displayColors:true,
|
||||
intersect: true,
|
||||
},
|
||||
elements: {
|
||||
point:{
|
||||
radius: 3
|
||||
}
|
||||
},
|
||||
scales: {
|
||||
xAxes: [{
|
||||
ticks: {
|
||||
max: 100,
|
||||
min: 20,
|
||||
stepSize: 10
|
||||
},
|
||||
|
||||
ticks: {
|
||||
display: true,
|
||||
fontFamily: "'Rubik', sans-serif"
|
||||
},
|
||||
|
||||
}],
|
||||
yAxes: [{
|
||||
|
||||
ticks: {
|
||||
display: true,
|
||||
fontFamily: "'Rubik', sans-serif"
|
||||
},
|
||||
|
||||
}]
|
||||
},
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
// Pie
|
||||
var ctx = document.getElementById("dash-pie").getContext('2d');
|
||||
|
||||
var gradientStroke6 = ctx.createLinearGradient(0, 0, 0, 300);
|
||||
gradientStroke6.addColorStop(0, '#00e795');
|
||||
gradientStroke6.addColorStop(1, '#0095e2');
|
||||
|
||||
var gradientStroke7 = ctx.createLinearGradient(0, 0, 0, 300);
|
||||
gradientStroke7.addColorStop(0, '#f6d365');
|
||||
gradientStroke7.addColorStop(1, '#ff7850');
|
||||
|
||||
var gradientStroke8 = ctx.createLinearGradient(0, 0, 0, 300);
|
||||
gradientStroke8.addColorStop(0, '#f56348');
|
||||
gradientStroke8.addColorStop(1, '#f81f8b');
|
||||
|
||||
var myChart = new Chart(ctx, {
|
||||
type: 'pie',
|
||||
data: {
|
||||
labels: ["Completed", "Pending", "Process"],
|
||||
datasets: [{
|
||||
backgroundColor: [
|
||||
gradientStroke6,
|
||||
gradientStroke7,
|
||||
gradientStroke8
|
||||
],
|
||||
|
||||
hoverBackgroundColor: [
|
||||
gradientStroke6,
|
||||
gradientStroke7,
|
||||
gradientStroke8
|
||||
],
|
||||
|
||||
data: [50, 50, 50],
|
||||
borderWidth: [0, 0, 0],
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
legend: {
|
||||
position: 'bottom',
|
||||
display: true,
|
||||
labels: {
|
||||
boxWidth:12
|
||||
}
|
||||
},
|
||||
tooltips: {
|
||||
displayColors:true,
|
||||
},
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
//Doughnut
|
||||
|
||||
var ctx = document.getElementById("doughnut").getContext('2d');
|
||||
|
||||
gradientStroke9 = ctx.createLinearGradient(0, 0, 0, 300);
|
||||
gradientStroke9.addColorStop(0, '#00e795');
|
||||
gradientStroke9.addColorStop(1, '#0095e2');
|
||||
|
||||
gradientStroke10 = ctx.createLinearGradient(0, 0, 0, 300);
|
||||
gradientStroke10.addColorStop(1, '#f6d365');
|
||||
gradientStroke10.addColorStop(0, '#ff7850');
|
||||
|
||||
gradientStroke11 = ctx.createLinearGradient(0, 0, 0, 300);
|
||||
gradientStroke11.addColorStop(0, '#f56348');
|
||||
gradientStroke11.addColorStop(1, '#f81f8b');
|
||||
|
||||
var myChart = new Chart(ctx, {
|
||||
type: 'doughnut',
|
||||
data: {
|
||||
labels: ["Active", "Panding", "Complete"],
|
||||
datasets: [{
|
||||
backgroundColor: [
|
||||
gradientStroke9,
|
||||
gradientStroke10,
|
||||
gradientStroke11,
|
||||
],
|
||||
hoverBackgroundColor: [
|
||||
gradientStroke9,
|
||||
gradientStroke10,
|
||||
gradientStroke11,
|
||||
],
|
||||
data: [22, 25, 25],
|
||||
borderWidth: [.8, .8, .8]
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
cutoutPercentage: 75,
|
||||
legend: {
|
||||
position: 'bottom',
|
||||
display: true,
|
||||
labels: {
|
||||
boxWidth:12
|
||||
}
|
||||
},
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
|
||||
//Bar
|
||||
|
||||
var ctx = document.getElementById("bar-data").getContext('2d');
|
||||
|
||||
|
||||
var gradientStroke12 = ctx.createLinearGradient(0, 0, 0, 300);
|
||||
gradientStroke12.addColorStop(0, '#5ecbf6');
|
||||
gradientStroke12.addColorStop(1, '#8d44ad');
|
||||
|
||||
var cornerRadius = 20;
|
||||
|
||||
var myChart = new Chart(ctx, {
|
||||
type: 'bar',
|
||||
data: {
|
||||
labels: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ,11, 12],
|
||||
datasets: [{
|
||||
label: 'Revenue',
|
||||
data: [72, 75, 72, 77, 78, 74, 71, 72, 71, 69, 72, 75],
|
||||
borderColor: gradientStroke12,
|
||||
backgroundColor: gradientStroke12,
|
||||
hoverBackgroundColor: gradientStroke12,
|
||||
pointRadius: 0,
|
||||
fill: true,
|
||||
borderWidth: 0
|
||||
},]
|
||||
},
|
||||
|
||||
options: {
|
||||
|
||||
legend: {
|
||||
position: 'bottom',
|
||||
display:true,
|
||||
labels: {
|
||||
boxWidth:12
|
||||
}
|
||||
},
|
||||
tooltips: {
|
||||
displayColors:true,
|
||||
intersect: true,
|
||||
},
|
||||
scales: {
|
||||
xAxes: [{
|
||||
ticks: {
|
||||
max: 100,
|
||||
min: 20,
|
||||
stepSize: 10
|
||||
},
|
||||
gridLines: {
|
||||
display: true ,
|
||||
color: "#FFFFFF"
|
||||
},
|
||||
ticks: {
|
||||
display: true,
|
||||
fontFamily: "'Rubik', sans-serif"
|
||||
},
|
||||
|
||||
}],
|
||||
yAxes: [{
|
||||
gridLines: {
|
||||
color: '#fff',
|
||||
display: true ,
|
||||
},
|
||||
ticks: {
|
||||
display: true,
|
||||
fontFamily: "'Rubik', sans-serif"
|
||||
},
|
||||
|
||||
}]
|
||||
},
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
|
||||
|
||||
// Polar
|
||||
var ctx = document.getElementById("polarArea").getContext('2d');
|
||||
|
||||
var gradientStroke13 = ctx.createLinearGradient(0, 0, 0, 300);
|
||||
gradientStroke13.addColorStop(0, '#42e695');
|
||||
gradientStroke13.addColorStop(1, '#3bb2b8');
|
||||
|
||||
var gradientStroke14 = ctx.createLinearGradient(0, 0, 0, 300);
|
||||
gradientStroke14.addColorStop(0, '#4776e6');
|
||||
gradientStroke14.addColorStop(1, '#8e54e9');
|
||||
|
||||
|
||||
var gradientStroke15 = ctx.createLinearGradient(0, 0, 0, 300);
|
||||
gradientStroke15.addColorStop(0, '#ee0979');
|
||||
gradientStroke15.addColorStop(1, '#ff6a00');
|
||||
|
||||
var myChart = new Chart(ctx, {
|
||||
type: 'polarArea',
|
||||
data: {
|
||||
labels: ["Gross Profit", "Revenue", "Expense"],
|
||||
datasets: [{
|
||||
backgroundColor: [
|
||||
gradientStroke13,
|
||||
gradientStroke14,
|
||||
gradientStroke15
|
||||
],
|
||||
|
||||
hoverBackgroundColor: [
|
||||
gradientStroke13,
|
||||
gradientStroke14,
|
||||
gradientStroke15
|
||||
],
|
||||
data: [4, 8, 7]
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
legend: {
|
||||
display: true,
|
||||
position: 'bottom',
|
||||
labels: {
|
||||
boxWidth:12
|
||||
}
|
||||
},
|
||||
|
||||
scale: {
|
||||
gridLines: {
|
||||
color: "rgba(221, 221, 221, 0.9)"
|
||||
},
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
|
||||
// Polar
|
||||
var ctx = document.getElementById("radar").getContext('2d');
|
||||
|
||||
var gradientStroke13 = ctx.createLinearGradient(0, 0, 0, 300);
|
||||
gradientStroke13.addColorStop(0, '#42e695');
|
||||
gradientStroke13.addColorStop(1, '#3bb2b8');
|
||||
|
||||
var gradientStroke14 = ctx.createLinearGradient(0, 0, 0, 300);
|
||||
gradientStroke14.addColorStop(0, '#4776e6');
|
||||
gradientStroke14.addColorStop(1, '#8e54e9');
|
||||
|
||||
|
||||
var gradientStroke15 = ctx.createLinearGradient(0, 0, 0, 300);
|
||||
gradientStroke15.addColorStop(0, '#ee0979');
|
||||
gradientStroke15.addColorStop(1, '#ff6a00');
|
||||
|
||||
var myChart = new Chart(ctx, {
|
||||
type: 'radar',
|
||||
data: {
|
||||
labels: ["Africa", "Asia", "Europe", "Latin America", "North America"],
|
||||
datasets: [
|
||||
{
|
||||
label: "1950",
|
||||
fill: true,
|
||||
backgroundColor: "rgba(251,88,22,0.4)",
|
||||
borderColor: gradientStroke15,
|
||||
pointBorderColor: "rgba(251,88,22,0.9)",
|
||||
pointBackgroundColor: "rgba(251,88,22,0.9)",
|
||||
data: [65, 59, 90, 81, 56, 55, 40],
|
||||
}, {
|
||||
label: "2050",
|
||||
fill: true,
|
||||
backgroundColor: "rgba(119,94,232,0.4)",
|
||||
borderColor: gradientStroke14,
|
||||
pointBorderColor: "rgba(119,94,232,0.8)",
|
||||
pointBackgroundColor: "rgba(119,94,232,0.9)",
|
||||
pointBorderColor: "rgba(119,94,232,0.9)",
|
||||
data: [28, 48, 40, 19, 96, 27, 100],
|
||||
}
|
||||
]
|
||||
},
|
||||
options: {
|
||||
title: {
|
||||
display: true,
|
||||
text: 'Distribution in % of world population'
|
||||
},
|
||||
legend: {
|
||||
display: true,
|
||||
position: 'bottom',
|
||||
labels: {
|
||||
boxWidth:12
|
||||
}
|
||||
},
|
||||
}
|
||||
});
|
||||
@@ -0,0 +1,218 @@
|
||||
|
||||
/*
|
||||
Template Name: Zoogler - Bootstrap 4 Admin Dashboard
|
||||
Author: Mannatthemes
|
||||
Website: www.mannatthemes.com
|
||||
File: Morris init js
|
||||
*/
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
//line-chart
|
||||
var ctx = document.getElementById('lineChart').getContext('2d');
|
||||
|
||||
gradientStroke1 = ctx.createLinearGradient(0, 0, 0, 300);
|
||||
gradientStroke1.addColorStop(0, '#008cff');
|
||||
gradientStroke1.addColorStop(1, 'rgba(22, 195, 233, 0.1)');
|
||||
|
||||
gradientStroke2 = ctx.createLinearGradient(0, 0, 0, 300);
|
||||
gradientStroke2.addColorStop(0, '#ec536c');
|
||||
gradientStroke2.addColorStop(1, 'rgba(222, 15, 23, 0.1)');
|
||||
|
||||
var myChart = new Chart(ctx, {
|
||||
type: 'line',
|
||||
|
||||
data: {
|
||||
labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
|
||||
datasets: [{
|
||||
label: '1-Dataset',
|
||||
data: [3, 30, 10, 10, 22, 12, 5],
|
||||
pointBorderWidth: 0,
|
||||
pointHoverBackgroundColor: gradientStroke1,
|
||||
backgroundColor: gradientStroke1,
|
||||
borderColor: 'transparent',
|
||||
borderWidth: 1
|
||||
},
|
||||
{
|
||||
label: '2-Dataset',
|
||||
data: [5, 15, 12, 25, 5, 7, 5],
|
||||
pointBorderWidth:0,
|
||||
pointHoverBackgroundColor: gradientStroke2,
|
||||
backgroundColor: gradientStroke2,
|
||||
borderColor: 'transparent',
|
||||
borderWidth: 1
|
||||
}],
|
||||
|
||||
},
|
||||
options: {
|
||||
legend: {
|
||||
position: 'bottom',
|
||||
display:false
|
||||
},
|
||||
tooltips: {
|
||||
displayColors:false,
|
||||
intersect: false,
|
||||
},
|
||||
elements: {
|
||||
point:{
|
||||
radius: 0
|
||||
}
|
||||
},
|
||||
scales: {
|
||||
xAxes: [{
|
||||
ticks: {
|
||||
max: 100,
|
||||
min: 20,
|
||||
stepSize: 10
|
||||
},
|
||||
gridLines: {
|
||||
display: false ,
|
||||
color: "#FFFFFF"
|
||||
},
|
||||
ticks: {
|
||||
display: true,
|
||||
fontFamily: "'Rubik', sans-serif"
|
||||
},
|
||||
|
||||
}],
|
||||
yAxes: [{
|
||||
gridLines: {
|
||||
color: '#fff',
|
||||
display: false ,
|
||||
},
|
||||
ticks: {
|
||||
display: false,
|
||||
fontFamily: "'Rubik', sans-serif"
|
||||
},
|
||||
|
||||
}]
|
||||
},
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
|
||||
//Doughnut
|
||||
|
||||
var ctx = document.getElementById("dash-doughnut").getContext('2d');
|
||||
|
||||
gradientStroke1 = ctx.createLinearGradient(0, 0, 0, 300);
|
||||
gradientStroke1.addColorStop(0, '#00e795');
|
||||
gradientStroke1.addColorStop(1, '#0095e2');
|
||||
|
||||
gradientStroke2 = ctx.createLinearGradient(0, 0, 0, 300);
|
||||
gradientStroke2.addColorStop(1, '#f6d365');
|
||||
gradientStroke2.addColorStop(0, '#ff7850');
|
||||
|
||||
gradientStroke3 = ctx.createLinearGradient(0, 0, 0, 300);
|
||||
gradientStroke3.addColorStop(0, '#f56348');
|
||||
gradientStroke3.addColorStop(1, '#f81f8b');
|
||||
|
||||
var myChart = new Chart(ctx, {
|
||||
type: 'doughnut',
|
||||
data: {
|
||||
labels: ["Active", "Panding", "Complete"],
|
||||
datasets: [{
|
||||
backgroundColor: [
|
||||
gradientStroke1,
|
||||
gradientStroke2,
|
||||
gradientStroke3,
|
||||
],
|
||||
hoverBackgroundColor: [
|
||||
gradientStroke1,
|
||||
gradientStroke2,
|
||||
gradientStroke3,
|
||||
],
|
||||
data: [22, 25, 25],
|
||||
borderWidth: [.8, .8, .8]
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
cutoutPercentage: 75,
|
||||
legend: {
|
||||
position: 'bottom',
|
||||
display: false,
|
||||
labels: {
|
||||
boxWidth:12
|
||||
}
|
||||
},
|
||||
}
|
||||
});
|
||||
|
||||
//Bar
|
||||
|
||||
var ctx = document.getElementById("bar-data").getContext('2d');
|
||||
|
||||
|
||||
var gradientStroke1 = ctx.createLinearGradient(0, 0, 0, 300);
|
||||
gradientStroke1.addColorStop(0, '#5ecbf6');
|
||||
gradientStroke1.addColorStop(1, '#8d44ad');
|
||||
|
||||
var cornerRadius = 20;
|
||||
|
||||
var myChart = new Chart(ctx, {
|
||||
type: 'bar',
|
||||
data: {
|
||||
labels: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ,11, 12],
|
||||
datasets: [{
|
||||
label: 'Revenue',
|
||||
data: [72, 75, 72, 77, 78, 74, 71, 72, 71, 69, 72, 75],
|
||||
borderColor: gradientStroke1,
|
||||
backgroundColor: gradientStroke1,
|
||||
hoverBackgroundColor: gradientStroke1,
|
||||
pointRadius: 0,
|
||||
fill: false,
|
||||
borderWidth: 0
|
||||
},]
|
||||
},
|
||||
|
||||
options: {
|
||||
|
||||
legend: {
|
||||
position: 'bottom',
|
||||
display:false
|
||||
},
|
||||
tooltips: {
|
||||
displayColors:false,
|
||||
intersect: false,
|
||||
},
|
||||
scales: {
|
||||
xAxes: [{
|
||||
ticks: {
|
||||
max: 100,
|
||||
min: 20,
|
||||
stepSize: 10
|
||||
},
|
||||
gridLines: {
|
||||
display: false ,
|
||||
color: "#FFFFFF"
|
||||
},
|
||||
ticks: {
|
||||
display: true,
|
||||
fontFamily: "'Rubik', sans-serif"
|
||||
},
|
||||
|
||||
}],
|
||||
yAxes: [{
|
||||
gridLines: {
|
||||
color: '#fff',
|
||||
display: false ,
|
||||
},
|
||||
ticks: {
|
||||
display: false,
|
||||
fontFamily: "'Rubik', sans-serif"
|
||||
},
|
||||
|
||||
}]
|
||||
},
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
$(document).ready(function() {
|
||||
$(".boxscroll").niceScroll({cursorborder:"",cursorcolor:"#eff3f6",boxzoom:true});
|
||||
});
|
||||
|
||||
|
||||
@@ -0,0 +1,23 @@
|
||||
/*
|
||||
Template Name: Zoogler - Bootstrap 4 Admin Dashboard
|
||||
Author: Mannatthemes
|
||||
Website: www.mannatthemes.com
|
||||
File: Datatable js
|
||||
*/
|
||||
|
||||
$(document).ready(function() {
|
||||
$('#datatable').DataTable();
|
||||
|
||||
$(document).ready(function() {
|
||||
$('#datatable2').DataTable();
|
||||
} );
|
||||
|
||||
//Buttons examples
|
||||
var table = $('#datatable-buttons').DataTable({
|
||||
lengthChange: false,
|
||||
buttons: ['copy', 'excel', 'pdf', 'colvis']
|
||||
});
|
||||
|
||||
table.buttons().container()
|
||||
.appendTo('#datatable-buttons_wrapper .col-md-6:eq(0)');
|
||||
} );
|
||||
@@ -0,0 +1,47 @@
|
||||
/*
|
||||
Template Name: Zoogler - Bootstrap 4 Admin Dashboard
|
||||
Author: Mannatthemes
|
||||
Website: www.mannatthemes.com
|
||||
File: dropify js
|
||||
*/
|
||||
|
||||
$(function () {
|
||||
// Basic
|
||||
$('.dropify').dropify();
|
||||
|
||||
// Translated
|
||||
$('.dropify-fr').dropify({
|
||||
messages: {
|
||||
default: 'Glissez-déposez un fichier ici ou cliquez',
|
||||
replace: 'Glissez-déposez un fichier ou cliquez pour remplacer',
|
||||
remove: 'Supprimer',
|
||||
error: 'Désolé, le fichier trop volumineux'
|
||||
}
|
||||
});
|
||||
|
||||
// Used events
|
||||
var drEvent = $('#input-file-events').dropify();
|
||||
|
||||
drEvent.on('dropify.beforeClear', function(event, element){
|
||||
return confirm("Do you really want to delete \"" + element.file.name + "\" ?");
|
||||
});
|
||||
|
||||
drEvent.on('dropify.afterClear', function(event, element){
|
||||
alert('File deleted');
|
||||
});
|
||||
|
||||
drEvent.on('dropify.errors', function(event, element){
|
||||
console.log('Has Errors');
|
||||
});
|
||||
|
||||
var drDestroy = $('#input-file-to-destroy').dropify();
|
||||
drDestroy = drDestroy.data('dropify')
|
||||
$('#toggleDropify').on('click', function(e){
|
||||
e.preventDefault();
|
||||
if (drDestroy.isDropified()) {
|
||||
drDestroy.destroy();
|
||||
} else {
|
||||
drDestroy.init();
|
||||
}
|
||||
})
|
||||
});
|
||||
@@ -0,0 +1,307 @@
|
||||
/*
|
||||
Template Name: Zoogler - Bootstrap 4 Admin Dashboard
|
||||
Author: Mannatthemes
|
||||
Website: www.mannatthemes.com
|
||||
File: Float Js
|
||||
*/
|
||||
|
||||
|
||||
!function($) {
|
||||
"use strict";
|
||||
|
||||
var FlotChart = function() {
|
||||
this.$body = $("body")
|
||||
this.$realData = []
|
||||
};
|
||||
|
||||
//creates plot graph
|
||||
FlotChart.prototype.createPlotGraph = function(selector, data1, data2, labels, colors, borderColor, bgColor) {
|
||||
//shows tooltip
|
||||
function showTooltip(x, y, contents) {
|
||||
$('<div id="tooltip" class="tooltipflot">' + contents + '</div>').css( {
|
||||
position: 'absolute',
|
||||
top: y + 5,
|
||||
left: x + 5
|
||||
}).appendTo("body").fadeIn(200);
|
||||
}
|
||||
|
||||
$.plot($(selector),
|
||||
[ { data: data1,
|
||||
label: labels[0],
|
||||
color: colors[0]
|
||||
},
|
||||
{ data: data2,
|
||||
label: labels[1],
|
||||
color: colors[1]
|
||||
}
|
||||
],
|
||||
{
|
||||
series: {
|
||||
lines: {
|
||||
show: true,
|
||||
fill: true,
|
||||
lineWidth: 2,
|
||||
fillColor: {
|
||||
colors: [{opacity: 0.5},
|
||||
{opacity: 0.5}
|
||||
]
|
||||
}
|
||||
},
|
||||
points: {
|
||||
show: false
|
||||
},
|
||||
shadowSize: 0
|
||||
},
|
||||
legend: {
|
||||
position: 'nw'
|
||||
},
|
||||
grid: {
|
||||
hoverable: true,
|
||||
clickable: true,
|
||||
borderColor: borderColor,
|
||||
borderWidth: 1,
|
||||
labelMargin: 10,
|
||||
backgroundColor: bgColor
|
||||
},
|
||||
yaxis: {
|
||||
min: 0,
|
||||
max: 15,
|
||||
color: 'rgba(0,0,0,0.1)'
|
||||
},
|
||||
xaxis: {
|
||||
color: 'rgba(0,0,0,0.1)'
|
||||
},
|
||||
tooltip: true,
|
||||
tooltipOpts: {
|
||||
content: '%s: Value of %x is %y',
|
||||
shifts: {
|
||||
x: -60,
|
||||
y: 25
|
||||
},
|
||||
defaultTheme: false
|
||||
}
|
||||
});
|
||||
},
|
||||
//end plot graph
|
||||
|
||||
//creates Pie Chart
|
||||
FlotChart.prototype.createPieGraph = function(selector, labels, datas, colors) {
|
||||
var data = [{
|
||||
label: labels[0],
|
||||
data: datas[0]
|
||||
}, {
|
||||
label: labels[1],
|
||||
data: datas[1]
|
||||
}, {
|
||||
label: labels[2],
|
||||
data: datas[2]
|
||||
}];
|
||||
var options = {
|
||||
series: {
|
||||
pie: {
|
||||
show: true
|
||||
}
|
||||
},
|
||||
legend : {
|
||||
show : true
|
||||
},
|
||||
grid : {
|
||||
hoverable : true,
|
||||
clickable : true
|
||||
},
|
||||
colors : colors,
|
||||
tooltip : true,
|
||||
tooltipOpts : {
|
||||
content : "%s, %p.0%"
|
||||
}
|
||||
};
|
||||
|
||||
$.plot($(selector), data, options);
|
||||
},
|
||||
|
||||
//returns some random data
|
||||
FlotChart.prototype.randomData = function() {
|
||||
var totalPoints = 300;
|
||||
if (this.$realData.length > 0)
|
||||
this.$realData = this.$realData.slice(1);
|
||||
|
||||
// Do a random walk
|
||||
while (this.$realData.length < totalPoints) {
|
||||
|
||||
var prev = this.$realData.length > 0 ? this.$realData[this.$realData.length - 1] : 50,
|
||||
y = prev + Math.random() * 10 - 5;
|
||||
|
||||
if (y < 0) {
|
||||
y = 0;
|
||||
} else if (y > 100) {
|
||||
y = 100;
|
||||
}
|
||||
|
||||
this.$realData.push(y);
|
||||
}
|
||||
|
||||
// Zip the generated y values with the x values
|
||||
var res = [];
|
||||
for (var i = 0; i < this.$realData.length; ++i) {
|
||||
res.push([i, this.$realData[i]])
|
||||
}
|
||||
|
||||
return res;
|
||||
},
|
||||
|
||||
FlotChart.prototype.createRealTimeGraph = function(selector, data, colors) {
|
||||
var plot = $.plot(selector, [data], {
|
||||
colors: colors,
|
||||
series: {
|
||||
lines: {
|
||||
show: true,
|
||||
fill: true,
|
||||
lineWidth: 2,
|
||||
fillColor: {
|
||||
colors: [{
|
||||
opacity: 0.45
|
||||
}, {
|
||||
opacity: 0.45
|
||||
}]
|
||||
}
|
||||
},
|
||||
points: {
|
||||
show: false
|
||||
},
|
||||
shadowSize: 0
|
||||
},
|
||||
grid : {
|
||||
show : true,
|
||||
aboveData : false,
|
||||
color : '#dcdcdc',
|
||||
labelMargin : 15,
|
||||
axisMargin : 0,
|
||||
borderWidth : 0,
|
||||
borderColor : null,
|
||||
minBorderMargin : 5,
|
||||
clickable : true,
|
||||
hoverable : true,
|
||||
autoHighlight : false,
|
||||
mouseActiveRadius : 20
|
||||
},
|
||||
tooltip : true, //activate tooltip
|
||||
tooltipOpts : {
|
||||
content : "Value is : %y.0" + "%",
|
||||
shifts : {
|
||||
x : -30,
|
||||
y : -50
|
||||
}
|
||||
},
|
||||
yaxis : {
|
||||
min : 0,
|
||||
max : 100,
|
||||
color : 'rgba(0,0,0,0.1)'
|
||||
},
|
||||
xaxis : {
|
||||
show : false
|
||||
}
|
||||
});
|
||||
|
||||
return plot;
|
||||
},
|
||||
//creates Pie Chart
|
||||
FlotChart.prototype.createDonutGraph = function(selector, labels, datas, colors) {
|
||||
var data = [{
|
||||
label: labels[0],
|
||||
data: datas[0]
|
||||
}, {
|
||||
label: labels[1],
|
||||
data: datas[1]
|
||||
}, {
|
||||
label: labels[2],
|
||||
data: datas[2]
|
||||
},
|
||||
{
|
||||
label: labels[3],
|
||||
data: datas[3]
|
||||
}, {
|
||||
label: labels[4],
|
||||
data: datas[4]
|
||||
}
|
||||
];
|
||||
var options = {
|
||||
series: {
|
||||
pie: {
|
||||
show: true,
|
||||
innerRadius: 0.7
|
||||
}
|
||||
},
|
||||
legend : {
|
||||
show : true,
|
||||
labelFormatter : function(label, series) {
|
||||
return '<div style="font-size:14px;"> ' + label + '</div>'
|
||||
},
|
||||
labelBoxBorderColor : null,
|
||||
margin : 50,
|
||||
width : 20,
|
||||
padding : 1
|
||||
},
|
||||
grid : {
|
||||
hoverable : true,
|
||||
clickable : true
|
||||
},
|
||||
colors : colors,
|
||||
tooltip : true,
|
||||
tooltipOpts : {
|
||||
content : "%s, %p.0%"
|
||||
}
|
||||
};
|
||||
|
||||
$.plot($(selector), data, options);
|
||||
},
|
||||
|
||||
//initializing various charts and components
|
||||
FlotChart.prototype.init = function() {
|
||||
//plot graph data
|
||||
var uploads = [[0, 9], [1, 8], [2, 5], [3, 8], [4, 5], [5, 14], [6, 10]];
|
||||
var downloads = [[0, 5], [1, 12], [2,4], [3, 3], [4, 12], [5, 8], [6, 4]];
|
||||
var plabels = ["Marketplace","Other Market"];
|
||||
var pcolors = ['#44bb9f', '#605daf'];
|
||||
var borderColor = '#f5f5f5';
|
||||
var bgColor = '#fff';
|
||||
this.createPlotGraph("#website-stats", uploads, downloads, plabels, pcolors, borderColor, bgColor);
|
||||
|
||||
//Pie graph data
|
||||
var pielabels = ["Marketplace","Other Market","Direct Sales"];
|
||||
var datas = [20,30, 15];
|
||||
var colors = ['#ffbb44', '#5b6be8', "#f0f1f4"];
|
||||
this.createPieGraph("#pie-chart #pie-chart-container", pielabels , datas, colors);
|
||||
|
||||
|
||||
//real time data representation
|
||||
var plot = this.createRealTimeGraph('#flotRealTime', this.randomData() , ['#605daf']);
|
||||
plot.draw();
|
||||
var $this = this;
|
||||
function updatePlot() {
|
||||
plot.setData([$this.randomData()]);
|
||||
// Since the axes don't change, we don't need to call plot.setupGrid()
|
||||
plot.draw();
|
||||
setTimeout(updatePlot, $( 'html' ).hasClass( 'mobile-device' ) ? 1000 : 1000);
|
||||
}
|
||||
updatePlot();
|
||||
|
||||
//Donut pie graph data
|
||||
var donutlabels = ["Marketplace","Other Market","Direct Sales"];
|
||||
var donutdatas = [29,20, 18];
|
||||
var donutcolors = ['#f32f53', '#0f9cf3', "#f0f1f4"];
|
||||
this.createDonutGraph("#donut-chart #donut-chart-container", donutlabels , donutdatas, donutcolors);
|
||||
},
|
||||
|
||||
//init flotchart
|
||||
$.FlotChart = new FlotChart, $.FlotChart.Constructor = FlotChart
|
||||
|
||||
}(window.jQuery),
|
||||
|
||||
//initializing flotchart
|
||||
function($) {
|
||||
"use strict";
|
||||
$.FlotChart.init()
|
||||
}(window.jQuery);
|
||||
|
||||
|
||||
|
||||
@@ -0,0 +1,190 @@
|
||||
/*
|
||||
Template Name: Zoogler - Bootstrap 4 Admin Dashboards
|
||||
Author: Mannatthemes
|
||||
Website: www.mannatthemes.com
|
||||
File: Form Advanced components
|
||||
*/
|
||||
|
||||
|
||||
!function($) {
|
||||
"use strict";
|
||||
|
||||
var AdvancedForm = function() {};
|
||||
|
||||
AdvancedForm.prototype.init = function() {
|
||||
//creating various controls
|
||||
|
||||
//colorpicker start
|
||||
$('.colorpicker-default').colorpicker({
|
||||
format: 'hex'
|
||||
});
|
||||
$('.colorpicker-rgba').colorpicker();
|
||||
|
||||
// Date Picker
|
||||
jQuery('#datepicker').datepicker();
|
||||
jQuery('#datepicker-autoclose').datepicker({
|
||||
autoclose: true,
|
||||
todayHighlight: true
|
||||
});
|
||||
jQuery('#datepicker-inline').datepicker();
|
||||
jQuery('#datepicker-multiple-date').datepicker({
|
||||
format: "mm/dd/yyyy",
|
||||
clearBtn: true,
|
||||
multidate: true,
|
||||
multidateSeparator: ","
|
||||
});
|
||||
jQuery('#date-range').datepicker({
|
||||
toggleActive: true
|
||||
});
|
||||
|
||||
//Bootstrap-MaxLength
|
||||
$('input#defaultconfig').maxlength({
|
||||
warningClass: "badge badge-info",
|
||||
limitReachedClass: "badge badge-warning"
|
||||
});
|
||||
|
||||
$('input#thresholdconfig').maxlength({
|
||||
threshold: 20,
|
||||
warningClass: "badge badge-info",
|
||||
limitReachedClass: "badge badge-warning"
|
||||
});
|
||||
|
||||
$('input#moreoptions').maxlength({
|
||||
alwaysShow: true,
|
||||
warningClass: "badge badge-success",
|
||||
limitReachedClass: "badge badge-danger"
|
||||
});
|
||||
|
||||
$('input#alloptions').maxlength({
|
||||
alwaysShow: true,
|
||||
warningClass: "badge badge-success",
|
||||
limitReachedClass: "badge badge-danger",
|
||||
separator: ' out of ',
|
||||
preText: 'You typed ',
|
||||
postText: ' chars available.',
|
||||
validate: true
|
||||
});
|
||||
|
||||
$('textarea#textarea').maxlength({
|
||||
alwaysShow: true,
|
||||
warningClass: "badge badge-info",
|
||||
limitReachedClass: "badge badge-warning"
|
||||
});
|
||||
|
||||
$('input#placement').maxlength({
|
||||
alwaysShow: true,
|
||||
placement: 'top-left',
|
||||
warningClass: "badge badge-info",
|
||||
limitReachedClass: "badge badge-warning"
|
||||
});
|
||||
|
||||
//Bootstrap-TouchSpin
|
||||
$(".vertical-spin").TouchSpin({
|
||||
verticalbuttons: true,
|
||||
verticalupclass: 'ion-plus-round',
|
||||
verticaldownclass: 'ion-minus-round',
|
||||
buttondown_class: 'btn btn-primary',
|
||||
buttonup_class: 'btn btn-primary'
|
||||
});
|
||||
|
||||
$("input[name='demo1']").TouchSpin({
|
||||
min: 0,
|
||||
max: 100,
|
||||
step: 0.1,
|
||||
decimals: 2,
|
||||
boostat: 5,
|
||||
maxboostedstep: 10,
|
||||
postfix: '%',
|
||||
buttondown_class: 'btn btn-primary',
|
||||
buttonup_class: 'btn btn-primary'
|
||||
});
|
||||
$("input[name='demo2']").TouchSpin({
|
||||
min: -1000000000,
|
||||
max: 1000000000,
|
||||
stepinterval: 50,
|
||||
maxboostedstep: 10000000,
|
||||
prefix: '$',
|
||||
buttondown_class: 'btn btn-primary',
|
||||
buttonup_class: 'btn btn-primary'
|
||||
});
|
||||
$("input[name='demo3']").TouchSpin({
|
||||
buttondown_class: 'btn btn-primary',
|
||||
buttonup_class: 'btn btn-primary'
|
||||
});
|
||||
$("input[name='demo3_21']").TouchSpin({
|
||||
initval: 40,
|
||||
buttondown_class: 'btn btn-primary',
|
||||
buttonup_class: 'btn btn-primary'
|
||||
});
|
||||
$("input[name='demo3_22']").TouchSpin({
|
||||
initval: 40,
|
||||
buttondown_class: 'btn btn-primary',
|
||||
buttonup_class: 'btn btn-primary'
|
||||
});
|
||||
|
||||
$("input[name='demo5']").TouchSpin({
|
||||
prefix: "pre",
|
||||
postfix: "post",
|
||||
buttondown_class: 'btn btn-primary',
|
||||
buttonup_class: 'btn btn-primary'
|
||||
});
|
||||
$("input[name='demo0']").TouchSpin({
|
||||
buttondown_class: 'btn btn-primary',
|
||||
buttonup_class: 'btn btn-primary'
|
||||
});
|
||||
// MAterial Date picker
|
||||
$('#mdate').bootstrapMaterialDatePicker({
|
||||
weekStart : 0, time: false
|
||||
});
|
||||
$('#timepicker').bootstrapMaterialDatePicker({
|
||||
format : 'HH:mm', time: true, date: false
|
||||
});
|
||||
$('#date-format').bootstrapMaterialDatePicker({
|
||||
format : 'dddd DD MMMM YYYY - HH:mm'
|
||||
});
|
||||
$('#min-date').bootstrapMaterialDatePicker({
|
||||
format : 'DD/MM/YYYY HH:mm', minDate : new Date()
|
||||
});
|
||||
$('#single-input').clockpicker({
|
||||
placement: 'bottom',
|
||||
align: 'left',
|
||||
autoclose: true,
|
||||
'default': 'now'
|
||||
});
|
||||
$('.clockpicker').clockpicker({
|
||||
donetext: 'Done',
|
||||
}).find('input').change(function() {
|
||||
console.log(this.value);
|
||||
});
|
||||
|
||||
$('#check-minutes').click(function(e){
|
||||
// Have to stop propagation here
|
||||
e.stopPropagation();
|
||||
input.clockpicker('show')
|
||||
.clockpicker('toggleView', 'minutes');
|
||||
});
|
||||
|
||||
//colorpicker start
|
||||
$(".colorpicker").asColorPicker();
|
||||
|
||||
$(".gradient-colorpicker").asColorPicker({
|
||||
mode: 'gradient'
|
||||
});
|
||||
|
||||
$(".complex-colorpicker").asColorPicker({
|
||||
mode: 'complex'
|
||||
});
|
||||
// Select2
|
||||
$(".select2").select2({
|
||||
width: '100%'
|
||||
});
|
||||
},
|
||||
//init
|
||||
$.AdvancedForm = new AdvancedForm, $.AdvancedForm.Constructor = AdvancedForm
|
||||
}(window.jQuery),
|
||||
|
||||
//initializing
|
||||
function ($) {
|
||||
"use strict";
|
||||
$.AdvancedForm.init();
|
||||
}(window.jQuery);
|
||||
@@ -0,0 +1,32 @@
|
||||
/*
|
||||
Template Name: Zoogler - Bootstrap 4 Admin Dashboard
|
||||
Author: Mannatthemes
|
||||
Website: www.mannatthemes.com
|
||||
File: form-editor js
|
||||
*/
|
||||
|
||||
|
||||
$(document).ready(function () {
|
||||
if($("#elm1").length > 0){
|
||||
tinymce.init({
|
||||
selector: "textarea#elm1",
|
||||
theme: "modern",
|
||||
height:300,
|
||||
plugins: [
|
||||
"advlist autolink link image lists charmap print preview hr anchor pagebreak spellchecker",
|
||||
"searchreplace wordcount visualblocks visualchars code fullscreen insertdatetime media nonbreaking",
|
||||
"save table contextmenu directionality emoticons template paste textcolor"
|
||||
],
|
||||
toolbar: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | l ink image | print preview media fullpage | forecolor backcolor emoticons",
|
||||
style_formats: [
|
||||
{title: 'Bold text', inline: 'b'},
|
||||
{title: 'Red text', inline: 'span', styles: {color: '#ff0000'}},
|
||||
{title: 'Red header', block: 'h1', styles: {color: '#ff0000'}},
|
||||
{title: 'Example 1', inline: 'span', classes: 'example1'},
|
||||
{title: 'Example 2', inline: 'span', classes: 'example2'},
|
||||
{title: 'Table styles'},
|
||||
{title: 'Table row 1', selector: 'tr', classes: 'tablerow1'}
|
||||
]
|
||||
});
|
||||
}
|
||||
});
|
||||
@@ -0,0 +1,15 @@
|
||||
/*
|
||||
Template Name: Zoogler - Bootstrap 4 Admin Dashboard
|
||||
Author: Mannatthemes
|
||||
Website: www.mannatthemes.com
|
||||
File: form-summernote js
|
||||
*/
|
||||
|
||||
jQuery(document).ready(function(){
|
||||
$('.summernote').summernote({
|
||||
height: 300, // set editor height
|
||||
minHeight: null, // set minimum height of editor
|
||||
maxHeight: null, // set maximum height of editor
|
||||
focus: true // set focus to editable area after initializing summernote
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,158 @@
|
||||
/*
|
||||
Template Name: Zoogler - Bootstrap 4 Admin Dashboard
|
||||
Author: Mannatthemes
|
||||
Website: www.mannatthemes.com
|
||||
File: Google Maps
|
||||
*/
|
||||
|
||||
!function($) {
|
||||
"use strict";
|
||||
|
||||
var GoogleMap = function() {};
|
||||
|
||||
|
||||
//creates map with markers
|
||||
GoogleMap.prototype.createMarkers = function($container) {
|
||||
var map = new GMaps({
|
||||
div: $container,
|
||||
lat: -12.043333,
|
||||
lng: -77.028333
|
||||
});
|
||||
|
||||
//sample markers, but you can pass actual marker data as function parameter
|
||||
map.addMarker({
|
||||
lat: -12.043333,
|
||||
lng: -77.03,
|
||||
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: '<p>HTML Content</p>'
|
||||
}
|
||||
});
|
||||
|
||||
return map;
|
||||
},
|
||||
|
||||
//creates map with overlay
|
||||
GoogleMap.prototype.createWithOverlay = function ($container) {
|
||||
var map = new GMaps({
|
||||
div: $container,
|
||||
lat: -12.043333,
|
||||
lng: -77.028333
|
||||
});
|
||||
map.drawOverlay({
|
||||
lat: map.getCenter().lat(),
|
||||
lng: map.getCenter().lng(),
|
||||
content: '<div class="gmaps-overlay">Our Office!<div class="gmaps-overlay_arrow above"></div></div>',
|
||||
verticalAlign: 'top',
|
||||
horizontalAlign: 'center'
|
||||
});
|
||||
|
||||
return map;
|
||||
},
|
||||
|
||||
//creates map with street view
|
||||
GoogleMap.prototype.createWithStreetview = function ($container, $lat, $lng) {
|
||||
return GMaps.createPanorama({
|
||||
el: $container,
|
||||
lat : $lat,
|
||||
lng : $lng
|
||||
});
|
||||
},
|
||||
//Type
|
||||
GoogleMap.prototype.createMapByType = function ($container, $lat, $lng) {
|
||||
var map = new GMaps({
|
||||
div: $container,
|
||||
lat: $lat,
|
||||
lng: $lng,
|
||||
mapTypeControlOptions: {
|
||||
mapTypeIds : ["hybrid", "roadmap", "satellite", "terrain", "osm", "cloudmade"]
|
||||
}
|
||||
});
|
||||
map.addMapType("osm", {
|
||||
getTileUrl: function(coord, zoom) {
|
||||
return "http://tile.openstreetmap.org/" + zoom + "/" + coord.x + "/" + coord.y + ".png";
|
||||
},
|
||||
tileSize: new google.maps.Size(256, 256),
|
||||
name: "OpenStreetMap",
|
||||
maxZoom: 18
|
||||
});
|
||||
map.addMapType("cloudmade", {
|
||||
getTileUrl: function(coord, zoom) {
|
||||
return "http://b.tile.cloudmade.com/8ee2a50541944fb9bcedded5165f09d9/1/256/" + zoom + "/" + coord.x + "/" + coord.y + ".png";
|
||||
},
|
||||
tileSize: new google.maps.Size(256, 256),
|
||||
name: "CloudMade",
|
||||
maxZoom: 18
|
||||
});
|
||||
map.setMapTypeId("osm");
|
||||
return map;
|
||||
},
|
||||
GoogleMap.prototype.createWithMenu = function ($container, $lat, $lng) {
|
||||
var map = new GMaps({
|
||||
div: $container,
|
||||
lat: $lat,
|
||||
lng: $lng
|
||||
});
|
||||
map.setContextMenu({
|
||||
control: 'map',
|
||||
options: [{
|
||||
title: 'Add marker',
|
||||
name: 'add_marker',
|
||||
action: function(e){
|
||||
this.addMarker({
|
||||
lat: e.latLng.lat(),
|
||||
lng: e.latLng.lng(),
|
||||
title: 'New marker'
|
||||
});
|
||||
this.hideContextMenu();
|
||||
}
|
||||
}, {
|
||||
title: 'Center here',
|
||||
name: 'center_here',
|
||||
action: function(e){
|
||||
this.setCenter(e.latLng.lat(), e.latLng.lng());
|
||||
}
|
||||
}]
|
||||
});
|
||||
},
|
||||
//init
|
||||
GoogleMap.prototype.init = function() {
|
||||
var $this = this;
|
||||
$(document).on('ready', function(){
|
||||
//with sample markers
|
||||
$this.createMarkers('#gmaps-markers');
|
||||
|
||||
//overlay
|
||||
$this.createWithOverlay('#gmaps-overlay');
|
||||
|
||||
//street view
|
||||
$this.createWithStreetview('#panorama', 42.3455, -71.0983);
|
||||
|
||||
//types
|
||||
$this.createMapByType('#gmaps-types', -12.043333, -77.028333);
|
||||
|
||||
});
|
||||
},
|
||||
//init
|
||||
$.GoogleMap = new GoogleMap, $.GoogleMap.Constructor = GoogleMap
|
||||
}(window.jQuery),
|
||||
|
||||
//initializing
|
||||
function($) {
|
||||
"use strict";
|
||||
$.GoogleMap.init()
|
||||
}(window.jQuery);
|
||||
@@ -0,0 +1,158 @@
|
||||
/*
|
||||
Template Name: Zoogler - Bootstrap 4 Admin Dashboard
|
||||
Author: Mannatthemes
|
||||
Website: www.mannatthemes.com
|
||||
File: Vector Maps
|
||||
*/
|
||||
|
||||
!function($) {
|
||||
"use strict";
|
||||
|
||||
var VectorMap = function() {};
|
||||
|
||||
VectorMap.prototype.init = function() {
|
||||
//various examples
|
||||
$('#world-map-markers').vectorMap({
|
||||
map : 'world_mill_en',
|
||||
scaleColors : ['#f75d8c', '#f75d8c'],
|
||||
normalizeFunction : 'polynomial',
|
||||
hoverOpacity : 0.7,
|
||||
hoverColor : false,
|
||||
regionStyle : {
|
||||
initial : {
|
||||
fill : '#605daf'
|
||||
}
|
||||
},
|
||||
markerStyle: {
|
||||
initial: {
|
||||
r: 9,
|
||||
'fill': '#f75d8c',
|
||||
'fill-opacity': 0.9,
|
||||
'stroke': '#fff',
|
||||
'stroke-width' : 7,
|
||||
'stroke-opacity': 0.4
|
||||
},
|
||||
|
||||
hover: {
|
||||
'stroke': '#fff',
|
||||
'fill-opacity': 1,
|
||||
'stroke-width': 1.5
|
||||
}
|
||||
},
|
||||
backgroundColor : 'transparent',
|
||||
markers : [{
|
||||
latLng : [41.90, 12.45],
|
||||
name : 'Vatican City'
|
||||
}, {
|
||||
latLng : [43.73, 7.41],
|
||||
name : 'Monaco'
|
||||
}, {
|
||||
latLng : [-0.52, 166.93],
|
||||
name : 'Nauru'
|
||||
}, {
|
||||
latLng : [-8.51, 179.21],
|
||||
name : 'Tuvalu'
|
||||
}, {
|
||||
latLng : [43.93, 12.46],
|
||||
name : 'San Marino'
|
||||
}, {
|
||||
latLng : [47.14, 9.52],
|
||||
name : 'Liechtenstein'
|
||||
}, {
|
||||
latLng : [7.11, 171.06],
|
||||
name : 'Marshall Islands'
|
||||
}, {
|
||||
latLng : [17.3, -62.73],
|
||||
name : 'Saint Kitts and Nevis'
|
||||
}, {
|
||||
latLng : [3.2, 73.22],
|
||||
name : 'Maldives'
|
||||
}, {
|
||||
latLng : [35.88, 14.5],
|
||||
name : 'Malta'
|
||||
}, {
|
||||
latLng : [12.05, -61.75],
|
||||
name : 'Grenada'
|
||||
}, {
|
||||
latLng : [13.16, -61.23],
|
||||
name : 'Saint Vincent and the Grenadines'
|
||||
}, {
|
||||
latLng : [13.16, -59.55],
|
||||
name : 'Barbados'
|
||||
}, {
|
||||
latLng : [17.11, -61.85],
|
||||
name : 'Antigua and Barbuda'
|
||||
}, {
|
||||
latLng : [-4.61, 55.45],
|
||||
name : 'Seychelles'
|
||||
}, {
|
||||
latLng : [7.35, 134.46],
|
||||
name : 'Palau'
|
||||
}, {
|
||||
latLng : [42.5, 1.51],
|
||||
name : 'Andorra'
|
||||
}, {
|
||||
latLng : [14.01, -60.98],
|
||||
name : 'Saint Lucia'
|
||||
}, {
|
||||
latLng : [6.91, 158.18],
|
||||
name : 'Federated States of Micronesia'
|
||||
}, {
|
||||
latLng : [1.3, 103.8],
|
||||
name : 'Singapore'
|
||||
}, {
|
||||
latLng : [1.46, 173.03],
|
||||
name : 'Kiribati'
|
||||
}, {
|
||||
latLng : [-21.13, -175.2],
|
||||
name : 'Tonga'
|
||||
}, {
|
||||
latLng : [15.3, -61.38],
|
||||
name : 'Dominica'
|
||||
}, {
|
||||
latLng : [-20.2, 57.5],
|
||||
name : 'Mauritius'
|
||||
}, {
|
||||
latLng : [26.02, 50.55],
|
||||
name : 'Bahrain'
|
||||
}, {
|
||||
latLng : [0.33, 6.73],
|
||||
name : 'São Tomé and PrÃncipe'
|
||||
}]
|
||||
});
|
||||
|
||||
$('#usa').vectorMap({map: 'us_aea_en',backgroundColor: 'transparent',
|
||||
regionStyle: {
|
||||
initial: {
|
||||
fill: '#ec7350'
|
||||
}
|
||||
}});
|
||||
$('#canada').vectorMap({map : 'ca_lcc',backgroundColor : 'transparent',
|
||||
regionStyle : {
|
||||
initial : {
|
||||
fill : '#758f23'
|
||||
}
|
||||
}});
|
||||
$('#uk').vectorMap({map: 'uk_mill_en',backgroundColor: 'transparent',
|
||||
regionStyle: {
|
||||
initial: {
|
||||
fill: '#e2ac00'
|
||||
}
|
||||
}});
|
||||
$('#chicago').vectorMap({map: 'us-il-chicago_mill_en',backgroundColor: 'transparent',
|
||||
regionStyle: {
|
||||
initial: {
|
||||
fill: '#9daeb0'
|
||||
}
|
||||
}});
|
||||
|
||||
},
|
||||
//init
|
||||
$.VectorMap = new VectorMap, $.VectorMap.Constructor = VectorMap
|
||||
}(window.jQuery),
|
||||
|
||||
//initializing
|
||||
function($) {
|
||||
"use strict";
|
||||
$.VectorMap.init()
|
||||
}(window.jQuery);
|
||||
@@ -0,0 +1,10 @@
|
||||
/*
|
||||
Template Name: Zoogler - Bootstrap 4 Admin Dashboard
|
||||
Author: Mannatthemes
|
||||
Website: www.mannatthemes.com
|
||||
File: knob.init js
|
||||
*/
|
||||
|
||||
$(function() {
|
||||
$(".knob").knob();
|
||||
});
|
||||
@@ -0,0 +1,134 @@
|
||||
/*
|
||||
Template Name: Zoogler - Bootstrap 4 Admin Dashboard
|
||||
Author: Mannatthemes
|
||||
Website: www.mannatthemes.com
|
||||
File: Lightbox js
|
||||
*/
|
||||
|
||||
(function($) {
|
||||
|
||||
'use strict';
|
||||
|
||||
/*
|
||||
Single Image
|
||||
*/
|
||||
|
||||
$('.image-popup-vertical-fit').magnificPopup({
|
||||
type: 'image',
|
||||
closeOnContentClick: true,
|
||||
mainClass: 'mfp-img-mobile',
|
||||
image: {
|
||||
verticalFit: true
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
$('.image-popup-no-margins').magnificPopup({
|
||||
type: 'image',
|
||||
closeOnContentClick: true,
|
||||
closeBtnInside: false,
|
||||
fixedContentPos: true,
|
||||
mainClass: 'mfp-no-margins mfp-with-zoom', // class to remove default margin from left and right side
|
||||
image: {
|
||||
verticalFit: true
|
||||
},
|
||||
zoom: {
|
||||
enabled: true,
|
||||
duration: 300 // don't foget to change the duration also in CSS
|
||||
}
|
||||
});
|
||||
|
||||
/*
|
||||
Gallery
|
||||
*/
|
||||
$('.popup-gallery').magnificPopup({
|
||||
delegate: 'a',
|
||||
type: 'image',
|
||||
tLoading: 'Loading image #%curr%...',
|
||||
mainClass: 'mfp-img-mobile',
|
||||
gallery: {
|
||||
enabled: true,
|
||||
navigateByImgClick: true,
|
||||
preload: [0,1] // Will preload 0 - before current, and 1 after the current image
|
||||
},
|
||||
image: {
|
||||
tError: '<a href="%url%">The image #%curr%</a> could not be loaded.'
|
||||
}
|
||||
});
|
||||
|
||||
/*
|
||||
Zoom Gallery
|
||||
*/
|
||||
$('.zoom-gallery').magnificPopup({
|
||||
delegate: 'a',
|
||||
type: 'image',
|
||||
closeOnContentClick: false,
|
||||
closeBtnInside: false,
|
||||
mainClass: 'mfp-with-zoom mfp-img-mobile',
|
||||
image: {
|
||||
verticalFit: true,
|
||||
titleSrc: function(item) {
|
||||
return item.el.attr('title') + ' · <a href="'+item.el.attr('data-source')+'" target="_blank">image source</a>';
|
||||
}
|
||||
},
|
||||
gallery: {
|
||||
enabled: true
|
||||
},
|
||||
zoom: {
|
||||
enabled: true,
|
||||
duration: 300, // don't foget to change the duration also in CSS
|
||||
opener: function(element) {
|
||||
return element.find('img');
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
/*
|
||||
Popup with video or map
|
||||
*/
|
||||
$('.popup-youtube, .popup-vimeo, .popup-gmaps').magnificPopup({
|
||||
disableOn: 700,
|
||||
type: 'iframe',
|
||||
mainClass: 'mfp-fade',
|
||||
removalDelay: 160,
|
||||
preloader: false,
|
||||
|
||||
fixedContentPos: false
|
||||
});
|
||||
|
||||
/*
|
||||
Dialog with CSS animation
|
||||
*/
|
||||
$('.popup-with-zoom-anim').magnificPopup({
|
||||
type: 'inline',
|
||||
|
||||
fixedContentPos: false,
|
||||
fixedBgPos: true,
|
||||
|
||||
overflowY: 'auto',
|
||||
|
||||
closeBtnInside: true,
|
||||
preloader: false,
|
||||
|
||||
midClick: true,
|
||||
removalDelay: 300,
|
||||
mainClass: 'my-mfp-zoom-in'
|
||||
});
|
||||
|
||||
$('.popup-with-move-anim').magnificPopup({
|
||||
type: 'inline',
|
||||
|
||||
fixedContentPos: false,
|
||||
fixedBgPos: true,
|
||||
|
||||
overflowY: 'auto',
|
||||
|
||||
closeBtnInside: true,
|
||||
preloader: false,
|
||||
|
||||
midClick: true,
|
||||
removalDelay: 300,
|
||||
mainClass: 'my-mfp-slide-bottom'
|
||||
});
|
||||
|
||||
}).apply(this, [jQuery]);
|
||||
@@ -0,0 +1,11 @@
|
||||
/*
|
||||
Template Name: Zoogler - Bootstrap 4 Admin Dashboard
|
||||
Author: Mannatthemes
|
||||
Website: www.mannatthemes.com
|
||||
File: modal-animation js
|
||||
*/
|
||||
|
||||
$('.btn-animation').on('click', function(br) {
|
||||
//adding animation
|
||||
$('.modal.animation-modal .modal-dialog').attr('class', 'modal-dialog ' + $(this).data("animation") + ' animated');
|
||||
});
|
||||
@@ -0,0 +1,126 @@
|
||||
|
||||
/*
|
||||
Template Name: Zoogler - Bootstrap 4 Admin Dashboard
|
||||
Author: Mannatthemes
|
||||
Website: www.mannatthemes.com
|
||||
File: Morris init js
|
||||
*/
|
||||
|
||||
!function($) {
|
||||
"use strict";
|
||||
|
||||
var MorrisCharts = function() {};
|
||||
|
||||
//creates line chart
|
||||
MorrisCharts.prototype.createLineChart = function(element, data, xkey, ykeys, labels, lineColors) {
|
||||
Morris.Line({
|
||||
element: element,
|
||||
data: data,
|
||||
xkey: xkey,
|
||||
ykeys: ykeys,
|
||||
labels: labels,
|
||||
hideHover: 'auto',
|
||||
gridLineColor: '#eef0f2',
|
||||
resize: true, //defaulted to true
|
||||
lineColors: lineColors
|
||||
});
|
||||
},
|
||||
|
||||
//creates area chart
|
||||
MorrisCharts.prototype.createAreaChart = function(element, pointSize, lineWidth, data, xkey, ykeys, labels, lineColors) {
|
||||
Morris.Area({
|
||||
element: element,
|
||||
pointSize: 3,
|
||||
lineWidth: 2,
|
||||
data: data,
|
||||
xkey: xkey,
|
||||
ykeys: ykeys,
|
||||
labels: labels,
|
||||
resize: true,
|
||||
hideHover: 'auto',
|
||||
gridLineColor: '#eef0f2',
|
||||
lineColors: lineColors
|
||||
});
|
||||
},
|
||||
//creates Bar chart
|
||||
MorrisCharts.prototype.createBarChart = function(element, data, xkey, ykeys, labels, lineColors) {
|
||||
Morris.Bar({
|
||||
element: element,
|
||||
data: data,
|
||||
xkey: xkey,
|
||||
ykeys: ykeys,
|
||||
labels: labels,
|
||||
gridLineColor: '#eef0f2',
|
||||
barSizeRatio: 0.4,
|
||||
resize: true,
|
||||
hideHover: 'auto',
|
||||
barColors: lineColors
|
||||
});
|
||||
},
|
||||
//creates Donut chart
|
||||
MorrisCharts.prototype.createDonutChart = function(element, data, colors) {
|
||||
Morris.Donut({
|
||||
element: element,
|
||||
data: data,
|
||||
resize: true,
|
||||
colors: colors
|
||||
});
|
||||
},
|
||||
|
||||
MorrisCharts.prototype.init = function() {
|
||||
|
||||
//create line chart
|
||||
var $data = [
|
||||
{ y: '2009', a: 3, b: 5 },
|
||||
{ y: '2010', a: 30, b: 15 },
|
||||
{ y: '2011', a: 10, b: 12 },
|
||||
{ y: '2012', a: 10, b: 25 },
|
||||
{ y: '2013', a: 22, b: 5 },
|
||||
{ y: '2014', a: 12, b: 7 },
|
||||
{ y: '2015', a: 5, b: 5 }
|
||||
];
|
||||
this.createLineChart('morris-line-example', $data, 'y', ['a', 'b'], ['Series A', 'Series B'], ['#605daf', '#f75d8c']);
|
||||
|
||||
//creating area chart
|
||||
var $areaData = [
|
||||
{y: '2009', a: 10, b: 20},
|
||||
{y: '2010', a: 75, b: 65},
|
||||
{y: '2011', a: 50, b: 40},
|
||||
{y: '2012', a: 75, b: 65},
|
||||
{y: '2013', a: 50, b: 40},
|
||||
{y: '2014', a: 75, b: 65},
|
||||
{y: '2015', a: 90, b: 60},
|
||||
{y: '2016', a: 90, b: 75}
|
||||
];
|
||||
this.createAreaChart('morris-area-example', 0, 0, $areaData, 'y', ['a', 'b'], ['Series A', 'Series B'], ['#605daf', '#f75d8c']);
|
||||
|
||||
//creating bar chart
|
||||
var $barData = [
|
||||
{y: '2009', a: 100, b: 90},
|
||||
{y: '2010', a: 75, b: 65},
|
||||
{y: '2011', a: 50, b: 40},
|
||||
{y: '2012', a: 75, b: 65},
|
||||
{y: '2013', a: 50, b: 40},
|
||||
{y: '2014', a: 75, b: 65},
|
||||
{y: '2015', a: 100, b: 90},
|
||||
{y: '2016', a: 90, b: 75}
|
||||
];
|
||||
this.createBarChart('morris-bar-example', $barData, 'y', ['a', 'b'], ['Series A', 'Series B'], ['#605daf', '#f75d8c']);
|
||||
|
||||
//creating donut chart
|
||||
var $donutData = [
|
||||
{label: "Download Sales", value: 12},
|
||||
{label: "In-Store Sales", value: 30},
|
||||
{label: "Mail-Order Sales", value: 20}
|
||||
];
|
||||
this.createDonutChart('morris-donut-example', $donutData, ['#fd8a54', '#f63e6b', '#00c1b8']);
|
||||
},
|
||||
//init
|
||||
$.MorrisCharts = new MorrisCharts, $.MorrisCharts.Constructor = MorrisCharts
|
||||
}(window.jQuery),
|
||||
|
||||
//initializing
|
||||
function($) {
|
||||
"use strict";
|
||||
$.MorrisCharts.init();
|
||||
}(window.jQuery);
|
||||
@@ -0,0 +1,127 @@
|
||||
/*
|
||||
Template Name: Zoogler - Bootstrap 4 Admin Dashboard
|
||||
Author: Mannatthemes
|
||||
Website: www.mannatthemes.com
|
||||
File: Range slider
|
||||
*/
|
||||
|
||||
$(document).ready(function () {
|
||||
$("#range_01").ionRangeSlider();
|
||||
|
||||
$("#range_02").ionRangeSlider({
|
||||
min: 100,
|
||||
max: 1000,
|
||||
from: 550
|
||||
});
|
||||
|
||||
$("#range_03").ionRangeSlider({
|
||||
type: "double",
|
||||
grid: true,
|
||||
min: 0,
|
||||
max: 1000,
|
||||
from: 200,
|
||||
to: 800,
|
||||
prefix: "$"
|
||||
});
|
||||
|
||||
$("#range_04").ionRangeSlider({
|
||||
type: "double",
|
||||
grid: true,
|
||||
min: -1000,
|
||||
max: 1000,
|
||||
from: -500,
|
||||
to: 500
|
||||
});
|
||||
|
||||
$("#range_05").ionRangeSlider({
|
||||
type: "double",
|
||||
grid: true,
|
||||
min: -1000,
|
||||
max: 1000,
|
||||
from: -500,
|
||||
to: 500,
|
||||
step: 250
|
||||
});
|
||||
|
||||
$("#range_06").ionRangeSlider({
|
||||
grid: true,
|
||||
from: 3,
|
||||
values: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"]
|
||||
});
|
||||
|
||||
$("#range_07").ionRangeSlider({
|
||||
grid: true,
|
||||
min: 1000,
|
||||
max: 1000000,
|
||||
from: 200000,
|
||||
step: 1000,
|
||||
prettify_enabled: true
|
||||
});
|
||||
|
||||
$("#range_08").ionRangeSlider({
|
||||
min: 100,
|
||||
max: 1000,
|
||||
from: 550,
|
||||
disable: true
|
||||
});
|
||||
$("#range_09").ionRangeSlider({
|
||||
grid: true,
|
||||
min: 18,
|
||||
max: 70,
|
||||
from: 30,
|
||||
prefix: "Age ",
|
||||
max_postfix: "+"
|
||||
});
|
||||
$("#range_10").ionRangeSlider({
|
||||
type: "double",
|
||||
min: 100,
|
||||
max: 200,
|
||||
from: 145,
|
||||
to: 155,
|
||||
prefix: "Weight: ",
|
||||
postfix: " million pounds",
|
||||
decorate_both: true
|
||||
});
|
||||
$("#range_11").ionRangeSlider({
|
||||
type: "single",
|
||||
grid: true,
|
||||
min: -90,
|
||||
max: 90,
|
||||
from: 0,
|
||||
postfix: "°"
|
||||
});
|
||||
$("#range_12").ionRangeSlider({
|
||||
type: "double",
|
||||
min: 1000,
|
||||
max: 2000,
|
||||
from: 1200,
|
||||
to: 1800,
|
||||
hide_min_max: true,
|
||||
hide_from_to: true,
|
||||
grid: true
|
||||
});
|
||||
|
||||
// Step.
|
||||
var stp = document.querySelector('.js-step');
|
||||
var initStp = new Powerange(stp, { start: 50, step: 10 });
|
||||
|
||||
// Min, max, start.
|
||||
var vals = document.querySelector('.js-min-max-start');
|
||||
var initVals = new Powerange(vals, { min: 16, max: 256, start: 128 });
|
||||
|
||||
// Callback.
|
||||
var clbk = document.querySelector('.js-callback');
|
||||
var initClbk = new Powerange(clbk, { callback: displayValue, start: 88 });
|
||||
|
||||
function displayValue() {
|
||||
document.getElementById('js-display-callback').innerHTML = clbk.value;
|
||||
}
|
||||
|
||||
// Hide range.
|
||||
var hide = document.querySelector('.js-hiderange');
|
||||
var initHideRange = new Powerange(hide, { hideRange: true, start: 70 });
|
||||
|
||||
// Vertical.
|
||||
var vert = document.querySelector('.js-vertical');
|
||||
var initVert = new Powerange(vert, { start: 80, vertical: true });
|
||||
});
|
||||
@@ -0,0 +1,49 @@
|
||||
/*
|
||||
Template Name: Zoogler - Bootstrap 4 Admin Dashboard
|
||||
Author: Mannatthemes
|
||||
Website: www.mannatthemes.com
|
||||
File: Rating init
|
||||
*/
|
||||
|
||||
$(function () {
|
||||
$('input.check').on('change', function () {
|
||||
alert('Rating: ' + $(this).val());
|
||||
});
|
||||
$('.rating-tooltip').rating({
|
||||
extendSymbol: function (rate) {
|
||||
$(this).tooltip({
|
||||
container: 'body',
|
||||
placement: 'bottom',
|
||||
title: 'Rate ' + rate
|
||||
});
|
||||
}
|
||||
});
|
||||
$('.rating-tooltip-manual').rating({
|
||||
extendSymbol: function () {
|
||||
var title;
|
||||
$(this).tooltip({
|
||||
container: 'body',
|
||||
placement: 'bottom',
|
||||
trigger: 'manual',
|
||||
title: function () {
|
||||
return title;
|
||||
}
|
||||
});
|
||||
$(this).on('rating.rateenter', function (e, rate) {
|
||||
title = rate;
|
||||
$(this).tooltip('show');
|
||||
})
|
||||
.on('rating.rateleave', function () {
|
||||
$(this).tooltip('hide');
|
||||
});
|
||||
}
|
||||
});
|
||||
$('.rating').each(function () {
|
||||
$('<span class="badge badge-info"></span>')
|
||||
.text($(this).val() || ' ')
|
||||
.insertAfter(this);
|
||||
});
|
||||
$('.rating').on('change', function () {
|
||||
$(this).next('.badge').text($(this).val());
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,284 @@
|
||||
/*
|
||||
Template Name: Zoogler - Bootstrap 4 Admin Dashboard
|
||||
Author: Mannatthemes
|
||||
Website: www.mannatthemes.com
|
||||
File: Sweet Alert init js
|
||||
*/
|
||||
|
||||
!function ($) {
|
||||
"use strict";
|
||||
|
||||
var SweetAlert = function () {
|
||||
};
|
||||
|
||||
//examples
|
||||
//examples
|
||||
SweetAlert.prototype.init = function () {
|
||||
|
||||
//Basic
|
||||
$('#sa-basic').on('click', function () {
|
||||
swal('Any fool can use a computer').catch(swal.noop)
|
||||
});
|
||||
|
||||
//A title with a text under
|
||||
$('#sa-title').click(function () {
|
||||
swal(
|
||||
'The Internet?',
|
||||
'That thing is still around?',
|
||||
'question'
|
||||
)
|
||||
});
|
||||
|
||||
//Success Message
|
||||
$('#sa-success').click(function () {
|
||||
swal(
|
||||
{
|
||||
title: 'Good job!',
|
||||
text: 'You clicked the button!',
|
||||
type: 'success',
|
||||
showCancelButton: true,
|
||||
confirmButtonClass: 'btn btn-success',
|
||||
cancelButtonClass: 'btn btn-danger ml-2'
|
||||
}
|
||||
)
|
||||
});
|
||||
|
||||
//Warning Message
|
||||
$('#sa-warning').click(function () {
|
||||
swal({
|
||||
title: 'Are you sure?',
|
||||
text: "You won't be able to revert this!",
|
||||
type: 'warning',
|
||||
showCancelButton: true,
|
||||
confirmButtonClass: 'btn btn-success',
|
||||
cancelButtonClass: 'btn btn-danger ml-2',
|
||||
confirmButtonText: 'Yes, delete it!'
|
||||
}).then(function () {
|
||||
swal(
|
||||
'Deleted!',
|
||||
'Your file has been deleted.',
|
||||
'success'
|
||||
)
|
||||
})
|
||||
});
|
||||
|
||||
//Custom Position
|
||||
$('#sa-topright-success').click(function () {
|
||||
swal({
|
||||
position: 'top-end',
|
||||
type: 'success',
|
||||
title: 'Your work has been saved',
|
||||
showConfirmButton: false,
|
||||
timer: 1500
|
||||
})
|
||||
});
|
||||
//Custom Animation
|
||||
$('#sa-custom-animation').click(function () {
|
||||
swal({
|
||||
title: 'Custom animation with Animate.css',
|
||||
animation: false,
|
||||
customClass: 'animated tada'
|
||||
})
|
||||
});
|
||||
|
||||
//Parameter
|
||||
$('#sa-params').click(function () {
|
||||
swal({
|
||||
title: 'Are you sure?',
|
||||
text: "You won't be able to revert this!",
|
||||
type: 'warning',
|
||||
showCancelButton: true,
|
||||
confirmButtonText: 'Yes, delete it!',
|
||||
cancelButtonText: 'No, cancel!',
|
||||
confirmButtonClass: 'btn btn-success',
|
||||
cancelButtonClass: 'btn btn-danger ml-2',
|
||||
buttonsStyling: false
|
||||
}).then(function () {
|
||||
swal(
|
||||
'Deleted!',
|
||||
'Your file has been deleted.',
|
||||
'success'
|
||||
)
|
||||
}, function (dismiss) {
|
||||
// dismiss can be 'cancel', 'overlay',
|
||||
// 'close', and 'timer'
|
||||
if (dismiss === 'cancel') {
|
||||
swal(
|
||||
'Cancelled',
|
||||
'Your imaginary file is safe :)',
|
||||
'error'
|
||||
)
|
||||
}
|
||||
})
|
||||
});
|
||||
|
||||
//Custom Image
|
||||
$('#sa-image').click(function () {
|
||||
swal({
|
||||
title: 'Sweet!',
|
||||
text: 'Modal with a custom image.',
|
||||
imageUrl: 'assets/images/logo.png',
|
||||
imageHeight: 30,
|
||||
animation: false
|
||||
})
|
||||
});
|
||||
|
||||
//Auto Close Timer
|
||||
$('#sa-close').click(function () {
|
||||
swal({
|
||||
title: 'Auto close alert!',
|
||||
text: 'I will close in 2 seconds.',
|
||||
timer: 2000
|
||||
}).then(
|
||||
function () {
|
||||
},
|
||||
// handling the promise rejection
|
||||
function (dismiss) {
|
||||
if (dismiss === 'timer') {
|
||||
console.log('I was closed by the timer')
|
||||
}
|
||||
}
|
||||
)
|
||||
});
|
||||
|
||||
//custom html alert
|
||||
$('#custom-html-alert').click(function () {
|
||||
swal({
|
||||
title: '<i>HTML</i> <u>example</u>',
|
||||
type: 'info',
|
||||
html: 'You can use <b>bold text</b>, ' +
|
||||
'<a href="//Mannatthemes.in/">links</a> ' +
|
||||
'and other HTML tags',
|
||||
showCloseButton: true,
|
||||
showCancelButton: true,
|
||||
confirmButtonClass: 'btn btn-success',
|
||||
cancelButtonClass: 'btn btn-danger ml-2',
|
||||
confirmButtonText: '<i class="fa fa-thumbs-up"></i> Great!',
|
||||
cancelButtonText: '<i class="fa fa-thumbs-down"></i>'
|
||||
})
|
||||
});
|
||||
|
||||
//Custom width padding
|
||||
$('#custom-padding-width-alert').click(function () {
|
||||
swal({
|
||||
title: 'Custom width, padding, background.',
|
||||
width: 600,
|
||||
padding: 100,
|
||||
background: '#fff url(//subtlepatterns2015.subtlepatterns.netdna-cdn.com/patterns/geometry.png)'
|
||||
})
|
||||
});
|
||||
|
||||
//Auto Close
|
||||
$('#sa-auto-close').click(function () {
|
||||
swal({
|
||||
title: 'Auto close alert!',
|
||||
text: 'I will close in 2 seconds.',
|
||||
timer: 2000
|
||||
}).then(
|
||||
function () {
|
||||
},
|
||||
// handling the promise rejection
|
||||
function (dismiss) {
|
||||
if (dismiss === 'timer') {
|
||||
console.log('I was closed by the timer')
|
||||
}
|
||||
}
|
||||
)
|
||||
});
|
||||
|
||||
//Ajax
|
||||
$('#ajax-alert').click(function () {
|
||||
swal({
|
||||
title: 'Submit email to run ajax request',
|
||||
input: 'email',
|
||||
showCancelButton: true,
|
||||
confirmButtonText: 'Submit',
|
||||
showLoaderOnConfirm: true,
|
||||
confirmButtonClass: 'btn btn-success',
|
||||
cancelButtonClass: 'btn btn-danger ml-2',
|
||||
preConfirm: function (email) {
|
||||
return new Promise(function (resolve, reject) {
|
||||
setTimeout(function () {
|
||||
if (email === 'taken@example.com') {
|
||||
reject('This email is already taken.')
|
||||
} else {
|
||||
resolve()
|
||||
}
|
||||
}, 2000)
|
||||
})
|
||||
},
|
||||
allowOutsideClick: false
|
||||
}).then(function (email) {
|
||||
swal({
|
||||
type: 'success',
|
||||
title: 'Ajax request finished!',
|
||||
html: 'Submitted email: ' + email
|
||||
})
|
||||
})
|
||||
});
|
||||
|
||||
//chaining modal alert
|
||||
$('#chaining-alert').click(function () {
|
||||
swal.setDefaults({
|
||||
input: 'text',
|
||||
confirmButtonText: 'Next →',
|
||||
showCancelButton: true,
|
||||
animation: false,
|
||||
progressSteps: ['1', '2', '3']
|
||||
})
|
||||
|
||||
var steps = [
|
||||
{
|
||||
title: 'Question 1',
|
||||
text: 'Chaining swal2 modals is easy'
|
||||
},
|
||||
'Question 2',
|
||||
'Question 3'
|
||||
]
|
||||
|
||||
swal.queue(steps).then(function (result) {
|
||||
swal.resetDefaults()
|
||||
swal({
|
||||
title: 'All done!',
|
||||
html: 'Your answers: <pre>' +
|
||||
JSON.stringify(result) +
|
||||
'</pre>',
|
||||
confirmButtonText: 'Lovely!',
|
||||
showCancelButton: false
|
||||
})
|
||||
}, function () {
|
||||
swal.resetDefaults()
|
||||
})
|
||||
});
|
||||
|
||||
//Danger
|
||||
$('#dynamic-alert').click(function () {
|
||||
swal.queue([{
|
||||
title: 'Your public IP',
|
||||
confirmButtonText: 'Show my public IP',
|
||||
text: 'Your public IP will be received ' +
|
||||
'via AJAX request',
|
||||
showLoaderOnConfirm: true,
|
||||
preConfirm: function () {
|
||||
return new Promise(function (resolve) {
|
||||
$.get('https://api.ipify.org?format=json')
|
||||
.done(function (data) {
|
||||
swal.insertQueueStep(data.ip)
|
||||
resolve()
|
||||
})
|
||||
})
|
||||
}
|
||||
}])
|
||||
});
|
||||
|
||||
|
||||
},
|
||||
//init
|
||||
$.SweetAlert = new SweetAlert, $.SweetAlert.Constructor = SweetAlert
|
||||
}(window.jQuery),
|
||||
|
||||
//initializing
|
||||
function ($) {
|
||||
"use strict";
|
||||
$.SweetAlert.init()
|
||||
}(window.jQuery);
|
||||
@@ -0,0 +1,14 @@
|
||||
/*
|
||||
Template Name: Zoogler - Bootstrap 4 Admin Dashboard
|
||||
Author: Mannatthemes
|
||||
Website: www.mannatthemes.com
|
||||
File: table-edit-init js
|
||||
*/
|
||||
|
||||
$('#my-table').Tabledit({
|
||||
columns: {
|
||||
identifier: [0, 'id'],
|
||||
editable: [[1, 'col1'], [2, 'col1'], [3, 'col3']]
|
||||
}
|
||||
});
|
||||
$('#mainTable').editableTableWidget().numericInputExample().find('td:first').focus();
|
||||
@@ -0,0 +1,12 @@
|
||||
/*
|
||||
Template Name: Zoogler - Bootstrap 4 Admin Dashboard
|
||||
Author: Mannatthemes
|
||||
Website: www.mannatthemes.com
|
||||
File: table-responsive-init js
|
||||
*/
|
||||
|
||||
$(function() {
|
||||
$('.table-responsive').responsiveTable({
|
||||
addDisplayAllBtn: 'btn btn-secondary'
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,10 @@
|
||||
/*
|
||||
Template Name: Zoogler - Bootstrap 4 Admin Dashboard
|
||||
Author: Mannatthemes
|
||||
Website: www.mannatthemes.com
|
||||
File: validationinit js
|
||||
*/
|
||||
|
||||
$(document).ready(function() {
|
||||
$('form').parsley();
|
||||
});
|
||||
@@ -0,0 +1,81 @@
|
||||
/*
|
||||
Template Name: Zoogler - Bootstrap 4 Admin Dashboard
|
||||
Author: Mannatthemes
|
||||
Website: www.mannatthemes.com
|
||||
File: Xeditable js
|
||||
*/
|
||||
|
||||
$(function () {
|
||||
|
||||
//modify buttons style
|
||||
$.fn.editableform.buttons =
|
||||
'<button type="submit" class="btn btn-success editable-submit btn-sm waves-effect waves-light"><i class="mdi mdi-check"></i></button>' +
|
||||
'<button type="button" class="btn btn-danger editable-cancel btn-sm waves-effect waves-light"><i class="mdi mdi-close"></i></button>';
|
||||
|
||||
|
||||
//inline
|
||||
|
||||
|
||||
$('#inline-username').editable({
|
||||
type: 'text',
|
||||
pk: 1,
|
||||
name: 'username',
|
||||
title: 'Enter username',
|
||||
mode: 'inline',
|
||||
inputclass: 'form-control-sm'
|
||||
});
|
||||
|
||||
$('#inline-firstname').editable({
|
||||
validate: function (value) {
|
||||
if ($.trim(value) == '') return 'This field is required';
|
||||
},
|
||||
mode: 'inline',
|
||||
inputclass: 'form-control-sm'
|
||||
});
|
||||
|
||||
$('#inline-sex').editable({
|
||||
prepend: "not selected",
|
||||
mode: 'inline',
|
||||
inputclass: 'form-control-sm',
|
||||
source: [
|
||||
{value: 1, text: 'Male'},
|
||||
{value: 2, text: 'Female'}
|
||||
],
|
||||
display: function (value, sourceData) {
|
||||
var colors = {"": "#98a6ad", 1: "#5fbeaa", 2: "#5d9cec"},
|
||||
elem = $.grep(sourceData, function (o) {
|
||||
return o.value == value;
|
||||
});
|
||||
|
||||
if (elem.length) {
|
||||
$(this).text(elem[0].text).css("color", colors[value]);
|
||||
} else {
|
||||
$(this).empty();
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
$('#inline-status').editable({
|
||||
mode: 'inline',
|
||||
inputclass: 'form-control-sm'
|
||||
});
|
||||
|
||||
$('#inline-group').editable({
|
||||
showbuttons: false,
|
||||
mode: 'inline',
|
||||
inputclass: 'form-control-sm'
|
||||
});
|
||||
|
||||
$('#inline-dob').editable({
|
||||
mode: 'inline',
|
||||
inputclass: 'form-control-sm'
|
||||
});
|
||||
|
||||
$('#inline-comments').editable({
|
||||
showbuttons: 'bottom',
|
||||
mode: 'inline',
|
||||
inputclass: 'form-control-sm'
|
||||
});
|
||||
|
||||
|
||||
});
|
||||
Reference in New Issue
Block a user