ryan.akbar.0107/simak
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add simak to git repo

Browse Source
This commit is contained in:
ryan
2025-10-10 09:25:05 +07:00
commit dc9b19e59f
2037 changed files with 443491 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/pages/jquery.autocomplete.init.js
+84
View File
@@ -0,0 +1,84 @@
/**
* Theme: Zircos Dashboard
* Author: Coderthemes
* Auto Complete
*/
/*jslint browser: true, white: true, plusplus: true */
/*global $, countries */
$(function () {
'use strict';
var countriesArray = $.map(countries, function (value, key) { return { value: value, data: key }; });
// Setup jQuery ajax mock:
$.mockjax({
url: '*',
responseTime: 2000,
response: function (settings) {
var query = settings.data.query,
queryLowerCase = query.toLowerCase(),
re = new RegExp('\\b' + $.Autocomplete.utils.escapeRegExChars(queryLowerCase), 'gi'),
suggestions = $.grep(countriesArray, function (country) {
// return country.value.toLowerCase().indexOf(queryLowerCase) === 0;
return re.test(country.value);
}),
response = {
query: query,
suggestions: suggestions
};
this.responseText = JSON.stringify(response);
}
});
// Initialize ajax autocomplete:
$('#autocomplete-ajax').autocomplete({
// serviceUrl: '/autosuggest/service/url',
lookup: countriesArray,
lookupFilter: function(suggestion, originalQuery, queryLowerCase) {
var re = new RegExp('\\b' + $.Autocomplete.utils.escapeRegExChars(queryLowerCase), 'gi');
return re.test(suggestion.value);
},
onSelect: function(suggestion) {
$('#selction-ajax').html('You selected: ' + suggestion.value + ', ' + suggestion.data);
},
onHint: function (hint) {
$('#autocomplete-ajax-x').val(hint);
},
onInvalidateSelection: function() {
$('#selction-ajax').html('You selected: none');
}
});
var nhlTeams = ['Anaheim Ducks', 'Atlanta Thrashers', 'Boston Bruins', 'Buffalo Sabres', 'Calgary Flames', 'Carolina Hurricanes', 'Chicago Blackhawks', 'Colorado Avalanche', 'Columbus Blue Jackets', 'Dallas Stars', 'Detroit Red Wings', 'Edmonton OIlers', 'Florida Panthers', 'Los Angeles Kings', 'Minnesota Wild', 'Montreal Canadiens', 'Nashville Predators', 'New Jersey Devils', 'New Rork Islanders', 'New York Rangers', 'Ottawa Senators', 'Philadelphia Flyers', 'Phoenix Coyotes', 'Pittsburgh Penguins', 'Saint Louis Blues', 'San Jose Sharks', 'Tampa Bay Lightning', 'Toronto Maple Leafs', 'Vancouver Canucks', 'Washington Capitals'];
var nbaTeams = ['Atlanta Hawks', 'Boston Celtics', 'Charlotte Bobcats', 'Chicago Bulls', 'Cleveland Cavaliers', 'Dallas Mavericks', 'Denver Nuggets', 'Detroit Pistons', 'Golden State Warriors', 'Houston Rockets', 'Indiana Pacers', 'LA Clippers', 'LA Lakers', 'Memphis Grizzlies', 'Miami Heat', 'Milwaukee Bucks', 'Minnesota Timberwolves', 'New Jersey Nets', 'New Orleans Hornets', 'New York Knicks', 'Oklahoma City Thunder', 'Orlando Magic', 'Philadelphia Sixers', 'Phoenix Suns', 'Portland Trail Blazers', 'Sacramento Kings', 'San Antonio Spurs', 'Toronto Raptors', 'Utah Jazz', 'Washington Wizards'];
var nhl = $.map(nhlTeams, function (team) { return { value: team, data: { category: 'NHL' }}; });
var nba = $.map(nbaTeams, function (team) { return { value: team, data: { category: 'NBA' } }; });
var teams = nhl.concat(nba);
// Initialize autocomplete with local lookup:
$('#autocomplete').devbridgeAutocomplete({
lookup: teams,
minChars: 1,
onSelect: function (suggestion) {
$('#selection').html('You selected: ' + suggestion.value + ', ' + suggestion.data.category);
},
showNoSuggestionNotice: true,
noSuggestionNotice: 'Sorry, no matching results',
groupBy: 'category'
});
// Initialize autocomplete with custom appendTo:
$('#autocomplete-custom-append').autocomplete({
lookup: countriesArray,
appendTo: '#suggestions-container'
});
// Initialize autocomplete with custom appendTo:
$('#autocomplete-dynamic').autocomplete({
lookup: countriesArray
});
});
assets/pages/jquery.blog-add.init.js
+133
View File
@@ -0,0 +1,133 @@
/**
* Theme: Zircos Admin Template
* Author: Coderthemes
* Email: coderthemes@gmail.com
* Blog Add
*/
$(document).ready(function(){
'use-strict';
//Example 1
$("#filer_input1").filer({
limit: null,
maxSize: null,
extensions: null,
changeInput: '<div class="jFiler-input-dragDrop"><div class="jFiler-input-inner"><div class="jFiler-input-icon"><i class="icon-jfi-cloud-up-o"></i></div><div class="jFiler-input-text"><h3>Drag & Drop files here</h3> <span style="display:inline-block; margin: 15px 0">or</span></div><a class="jFiler-input-choose-btn btn btn-custom waves-effect waves-light">Browse Files</a></div></div>',
showThumbs: true,
theme: "dragdropbox",
templates: {
box: '<ul class="jFiler-items-list jFiler-items-grid"></ul>',
item: '<li class="jFiler-item">\
<div class="jFiler-item-container">\
<div class="jFiler-item-inner">\
<div class="jFiler-item-thumb">\
<div class="jFiler-item-status"></div>\
<div class="jFiler-item-info">\
<span class="jFiler-item-title"><b title="{{fi-name}}">{{fi-name | limitTo: 25}}</b></span>\
<span class="jFiler-item-others">{{fi-size2}}</span>\
</div>\
{{fi-image}}\
</div>\
<div class="jFiler-item-assets jFiler-row">\
<ul class="list-inline pull-left">\
<li>{{fi-progressBar}}</li>\
</ul>\
<ul class="list-inline pull-right">\
<li><a class="icon-jfi-trash jFiler-item-trash-action"></a></li>\
</ul>\
</div>\
</div>\
</div>\
</li>',
itemAppend: '<li class="jFiler-item">\
<div class="jFiler-item-container">\
<div class="jFiler-item-inner">\
<div class="jFiler-item-thumb">\
<div class="jFiler-item-status"></div>\
<div class="jFiler-item-info">\
<span class="jFiler-item-title"><b title="{{fi-name}}">{{fi-name | limitTo: 25}}</b></span>\
<span class="jFiler-item-others">{{fi-size2}}</span>\
</div>\
{{fi-image}}\
</div>\
<div class="jFiler-item-assets jFiler-row">\
<ul class="list-inline pull-left">\
<li><span class="jFiler-item-others">{{fi-icon}}</span></li>\
</ul>\
<ul class="list-inline pull-right">\
<li><a class="icon-jfi-trash jFiler-item-trash-action"></a></li>\
</ul>\
</div>\
</div>\
</div>\
</li>',
progressBar: '<div class="bar"></div>',
itemAppendToEnd: false,
removeConfirmation: true,
_selectors: {
list: '.jFiler-items-list',
item: '.jFiler-item',
progressBar: '.bar',
remove: '.jFiler-item-trash-action'
}
},
dragDrop: {
dragEnter: null,
dragLeave: null,
drop: null,
},
uploadFile: {
url: "../plugins/jquery.filer/php/upload.php",
data: null,
type: 'POST',
enctype: 'multipart/form-data',
beforeSend: function(){},
success: function(data, el){
var parent = el.find(".jFiler-jProgressBar").parent();
el.find(".jFiler-jProgressBar").fadeOut("slow", function(){
$("<div class=\"jFiler-item-others text-success\"><i class=\"icon-jfi-check-circle\"></i> Success</div>").hide().appendTo(parent).fadeIn("slow");
});
},
error: function(el){
var parent = el.find(".jFiler-jProgressBar").parent();
el.find(".jFiler-jProgressBar").fadeOut("slow", function(){
$("<div class=\"jFiler-item-others text-error\"><i class=\"icon-jfi-minus-circle\"></i> Error</div>").hide().appendTo(parent).fadeIn("slow");
});
},
statusCode: null,
onProgress: null,
onComplete: null
},
addMore: false,
clipBoardPaste: true,
excludeName: null,
beforeRender: null,
afterRender: null,
beforeShow: null,
beforeSelect: null,
onSelect: null,
afterShow: null,
onRemove: function(itemEl, file, id, listEl, boxEl, newInputEl, inputEl){
var file = file.name;
$.post('../plugins/jquery.filer/php/remove_file.php', {file: file});
},
onEmpty: null,
options: null,
captions: {
button: "Choose Files",
feedback: "Choose files To Upload",
feedback2: "files were chosen",
drop: "Drop file here to Upload",
removeConfirmation: "Are you sure you want to remove this file?",
errors: {
filesLimit: "Only {{fi-limit}} files are allowed to be uploaded.",
filesType: "Only Images are allowed to be uploaded.",
filesSize: "{{fi-name}} is too large! Please upload file up to {{fi-maxSize}} MB.",
filesSizeAll: "Files you've choosed are too large! Please upload files up to {{fi-maxSize}} MB."
}
}
});
});
assets/pages/jquery.blog-dashboard.js
+127
View File
@@ -0,0 +1,127 @@
/**
* Theme: Zircos Admin Template
* Author: Coderthemes
* Blog Dashboard
*/
!function($) {
"use strict";
var BlogDashboard = function() {};
//creates Stacked chart
BlogDashboard.prototype.createStackedChart = function(element, data, xkey, ykeys, labels, lineColors) {
Morris.Bar({
element: element,
data: data,
xkey: xkey,
ykeys: ykeys,
stacked: true,
labels: labels,
hideHover: 'auto',
barSizeRatio: 0.5,
resize: true, //defaulted to true
gridLineColor: '#eeeeee',
barColors: lineColors
});
},
BlogDashboard.prototype.init = function() {
//creating Stacked chart
var $stckedData = [
{ y: 'Jan', a: 45, b: 140 },
{ y: 'Feb', a: 75, b: 65 },
{ y: 'Mar', a: 100, b: 90 },
{ y: 'Apr', a: 75, b: 65 },
{ y: 'May', a: 100, b: 90 },
{ y: 'Jun', a: 75, b: 65 },
{ y: 'Jul', a: 50, b: 40 },
{ y: 'Aug', a: 75, b: 65 },
{ y: 'Sep', a: 50, b: 40 },
{ y: 'Oct', a: 75, b: 65 },
{ y: 'Nov', a: 100, b: 90},
{ y: 'Dec', a: 70, b: 52 }
];
this.createStackedChart('morris-bar-stacked', $stckedData, 'y', ['a', 'b'], ['Page Views', 'Visitors'], ['#26a69a', '#ebeff2']);
},
//init
$.BlogDashboard = new BlogDashboard, $.BlogDashboard.Constructor = BlogDashboard
}(window.jQuery),
//initializing
function($) {
"use strict";
$.BlogDashboard.init();
}(window.jQuery);
! function($) {
"use strict";
var VectorMap = function() {
};
VectorMap.prototype.init = function() {
//various examples
$('#world-map-markers').vectorMap({
map : 'world_mill_en',
scaleColors : ['#4bd396', '#4bd396'],
normalizeFunction : 'polynomial',
hoverOpacity : 0.7,
hoverColor : false,
regionStyle : {
initial : {
fill : '#3ac9d6'
}
},
markerStyle: {
initial: {
r: 9,
'fill': '#f5707a',
'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 : [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'
}]
});
},
//init
$.VectorMap = new VectorMap, $.VectorMap.Constructor =
VectorMap
}(window.jQuery),
//initializing
function($) {
"use strict";
$.VectorMap.init()
}(window.jQuery);
assets/pages/jquery.c3-chart.init.js
+224
View File
@@ -0,0 +1,224 @@
/**
* Theme: Zircos Dashboard
* Author: Coderthemes
* Chart c3 page
*/
!function($) {
"use strict";
var ChartC3 = function() {};
ChartC3.prototype.init = function () {
//generating chart
c3.generate({
bindto: '#chart',
data: {
columns: [
['data1', 30, 20, 50, 40, 60, 50],
['data2', 200, 130, 90, 240, 130, 220],
['data3', 300, 200, 160, 400, 250, 250]
],
type: 'bar',
colors: {
data1: '#ebeff2',
data2: '#4bd396',
data3: '#f5707a'
}
}
});
//combined chart
c3.generate({
bindto: '#combine-chart',
data: {
columns: [
['data1', 30, 20, 50, 40, 60, 50],
['data2', 200, 130, 90, 240, 130, 220],
['data3', 300, 200, 160, 400, 250, 250],
['data4', 200, 130, 90, 240, 130, 220],
['data5', 130, 120, 150, 140, 160, 150]
],
types: {
data1: 'bar',
data2: 'bar',
data3: 'spline',
data4: 'line',
data5: 'bar'
},
colors: {
data1: '#7fc1fc',
data2: '#ebeff2',
data3: '#36404a',
data4: '#fb6d9d',
data5: '#5fbeaa'
},
groups: [
['data1','data2']
]
},
axis: {
x: {
type: 'categorized'
}
}
});
//roated chart
c3.generate({
bindto: '#roated-chart',
data: {
columns: [
['data1', 30, 200, 100, 400, 150, 250],
['data2', 50, 20, 10, 40, 15, 25]
],
types: {
data1: 'bar'
},
colors: {
data1: '#3ac9d6',
data2: '#f06292'
},
},
axis: {
rotated: true,
x: {
type: 'categorized'
}
}
});
//stacked chart
c3.generate({
bindto: '#chart-stacked',
data: {
columns: [
['data1', 30, 20, 50, 40, 60, 50],
['data2', 200, 130, 90, 240, 130, 220]
],
types: {
data1: 'area-spline',
data2: 'area-spline'
// 'line', 'spline', 'step', 'area', 'area-step' are also available to stack
},
colors: {
data1: '#ff9800',
data2: '#8d6e63'
}
}
});
//Donut Chart
c3.generate({
bindto: '#donut-chart',
data: {
columns: [
['data1', 46],
['data2', 24]
],
type : 'donut'
},
donut: {
title: "Candidates",
width: 30,
label: {
show:false
}
},
color: {
pattern: ["#26a69a", "#ebeff2"]
}
});
//Pie Chart
c3.generate({
bindto: '#pie-chart',
data: {
columns: [
['Lulu', 46],
['Olaf', 24],
['Item 3', 30]
],
type : 'pie'
},
color: {
pattern: ["#ebeff2", "#4bd396", "#f5707a"]
},
pie: {
label: {
show: false
}
}
});
//Line regions
c3.generate({
bindto: '#line-regions',
data: {
columns: [
['data1', 30, 200, 100, 400, 150, 250],
['data2', 50, 20, 10, 40, 15, 25]
],
regions: {
'data1': [{'start':1, 'end':2, 'style':'dashed'},{'start':3}], // currently 'dashed' style only
'data2': [{'end':3}]
},
colors: {
data1: '#ff9800',
data2: '#6b5fb5'
},
},
});
//Scatter Plot
c3.generate({
bindto: '#scatter-plot',
data: {
xs: {
setosa: 'setosa_x',
versicolor: 'versicolor_x',
},
// iris data from R
columns: [
["setosa_x", 3.5, 3.0, 3.2, 3.1, 3.6, 3.9, 3.4, 3.4, 2.9, 3.1, 3.7, 3.4, 3.0, 3.0, 4.0, 4.4, 3.9, 3.5, 3.8, 3.8, 3.4, 3.7, 3.6, 3.3, 3.4, 3.0, 3.4, 3.5, 3.4, 3.2, 3.1, 3.4, 4.1, 4.2, 3.1, 3.2, 3.5, 3.6, 3.0, 3.4, 3.5, 2.3, 3.2, 3.5, 3.8, 3.0, 3.8, 3.2, 3.7, 3.3],
["versicolor_x", 3.2, 3.2, 3.1, 2.3, 2.8, 2.8, 3.3, 2.4, 2.9, 2.7, 2.0, 3.0, 2.2, 2.9, 2.9, 3.1, 3.0, 2.7, 2.2, 2.5, 3.2, 2.8, 2.5, 2.8, 2.9, 3.0, 2.8, 3.0, 2.9, 2.6, 2.4, 2.4, 2.7, 2.7, 3.0, 3.4, 3.1, 2.3, 3.0, 2.5, 2.6, 3.0, 2.6, 2.3, 2.7, 3.0, 2.9, 2.9, 2.5, 2.8],
["setosa", 0.2, 0.2, 0.2, 0.2, 0.2, 0.4, 0.3, 0.2, 0.2, 0.1, 0.2, 0.2, 0.1, 0.1, 0.2, 0.4, 0.4, 0.3, 0.3, 0.3, 0.2, 0.4, 0.2, 0.5, 0.2, 0.2, 0.4, 0.2, 0.2, 0.2, 0.2, 0.4, 0.1, 0.2, 0.2, 0.2, 0.2, 0.1, 0.2, 0.2, 0.3, 0.3, 0.2, 0.6, 0.4, 0.3, 0.2, 0.2, 0.2, 0.2],
["versicolor", 1.4, 1.5, 1.5, 1.3, 1.5, 1.3, 1.6, 1.0, 1.3, 1.4, 1.0, 1.5, 1.0, 1.4, 1.3, 1.4, 1.5, 1.0, 1.5, 1.1, 1.8, 1.3, 1.5, 1.2, 1.3, 1.4, 1.4, 1.7, 1.5, 1.0, 1.1, 1.0, 1.2, 1.6, 1.5, 1.6, 1.5, 1.3, 1.3, 1.3, 1.2, 1.4, 1.2, 1.0, 1.3, 1.2, 1.3, 1.3, 1.1, 1.3],
],
type: 'scatter'
},
color: {
pattern: ["#188ae2", "#f5707a", "#3b3e47", "#6b5fb5"]
},
axis: {
x: {
label: 'Sepal.Width',
tick: {
fit: false
}
},
y: {
label: 'Petal.Width'
}
}
});
},
$.ChartC3 = new ChartC3, $.ChartC3.Constructor = ChartC3
}(window.jQuery),
//initializing
function($) {
"use strict";
$.ChartC3.init()
}(window.jQuery);
assets/pages/jquery.chartist.init.js
+857
View File
@@ -0,0 +1,857 @@
/**
* Theme: Zircos Dashboard
* Author: Coderthemes
* Chartist chart
*/
//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 tooltips
new Chartist.Line('#line-chart-tooltips', {
labels: ['1', '2', '3', '4', '5', '6'],
series: [
{
name: 'Fibonacci sequence',
data: [1, 2, 3, 5, 8, 13]
},
{
name: 'Golden section',
data: [1, 1.618, 2.618, 4.236, 6.854, 11.09]
}
]
},
{
plugins: [
Chartist.plugins.tooltip()
]
}
);
var $chart = $('#line-chart-tooltips');
var $toolTip = $chart
.append('<div class="tooltip"></div>')
.find('.tooltip')
.hide();
$chart.on('mouseenter', '.ct-point', function() {
var $point = $(this),
value = $point.attr('ct:value'),
seriesName = $point.parent().attr('ct:series-name');
$toolTip.html(seriesName + '<br>' + value).show();
});
$chart.on('mouseleave', '.ct-point', function() {
$toolTip.hide();
});
$chart.on('mousemove', function(event) {
$toolTip.css({
left: (event.offsetX || event.originalEvent.layerX) - $toolTip.width() / 2 - 10,
top: (event.offsetY || event.originalEvent.layerY) - $toolTip.height() - 40
});
});
//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()
]
});
//Bi-polar Line chart with area only
new Chartist.Line('#bi-polar-line', {
labels: [1, 2, 3, 4, 5, 6, 7, 8],
series: [
[1, 2, 3, 1, -2, 0, 1, 0],
[-2, -1, -2, -1, -2.5, -1, -2, -1],
[0, 0, 0, 1, 2, 2.5, 2, 1],
[2.5, 2, 1, 0.5, 1, 0.5, -1, -2.5]
]
}, {
high: 3,
low: -3,
showArea: true,
showLine: false,
showPoint: false,
fullWidth: true,
axisX: {
showLabel: false,
showGrid: false
},
plugins: [
Chartist.plugins.tooltip()
]
});
//SVG Path animation
var chart = new Chartist.Line('#svg-animation', {
labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
series: [
[1, 5, 2, 5, 4, 3],
[2, 3, 4, 8, 1, 2],
[5, 4, 3, 2, 1, 0.5]
]
}, {
low: 0,
showArea: true,
showPoint: false,
fullWidth: true
});
chart.on('draw', function(data) {
if(data.type === 'line' || data.type === 'area') {
data.element.animate({
d: {
begin: 2000 * data.index,
dur: 2000,
from: data.path.clone().scale(1, 0).translate(0, data.chartRect.height()).stringify(),
to: data.path.clone().stringify(),
easing: Chartist.Svg.Easing.easeOutQuint
}
});
}
});
//Line Interpolation / Smoothing
var chart = new Chartist.Line('#line-smoothing', {
labels: [1, 2, 3, 4, 5],
series: [
[1, 5, 10, 0, 1],
[10, 15, 0, 1, 2]
]
}, {
// Remove this configuration to see that chart rendered with cardinal spline interpolation
// Sometimes, on large jumps in data values, it's better to use simple smoothing.
lineSmooth: Chartist.Interpolation.simple({
divisor: 2
}),
fullWidth: true,
chartPadding: {
right: 20
},
low: 0,
plugins: [
Chartist.plugins.tooltip()
]
});
//Bi-polar bar chart
var data = {
labels: ['W1', 'W2', 'W3', 'W4', 'W5', 'W6', 'W7', 'W8', 'W9', 'W10'],
series: [
[1, 2, 4, 8, 6, -2, -1, -4, -6, -2]
]
};
var options = {
high: 10,
low: -10,
axisX: {
labelInterpolationFnc: function(value, index) {
return index % 2 === 0 ? value : null;
}
},
plugins: [
Chartist.plugins.tooltip()
]
};
new Chartist.Bar('#bi-polar-bar', data, options);
//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);
//Multi-line labels
new Chartist.Bar('#multi-line-chart', {
labels: ['First quarter of the year', 'Second quarter of the year', 'Third quarter of the year', 'Fourth quarter of the year'],
series: [
[60000, 40000, 80000, 70000],
[40000, 30000, 70000, 65000],
[8000, 3000, 10000, 6000]
]
}, {
seriesBarDistance: 10,
axisX: {
offset: 60
},
axisY: {
offset: 80,
labelInterpolationFnc: function(value) {
return value + ' CHF'
},
scaleMinSpace: 15
},
plugins: [
Chartist.plugins.tooltip()
]
});
//Stacked bar chart
new Chartist.Bar('#stacked-bar-chart', {
labels: ['Q1', 'Q2', 'Q3', 'Q4'],
series: [
[800000, 1200000, 1400000, 1300000],
[200000, 400000, 500000, 300000],
[160000, 290000, 410000, 600000]
]
}, {
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'
});
}
});
//Horizontal bar chart
new Chartist.Bar('#horizontal-bar-chart', {
labels: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'],
series: [
[5, 4, 3, 7, 5, 10, 3],
[3, 2, 9, 5, 4, 6, 4]
]
}, {
seriesBarDistance: 10,
reverseData: true,
horizontalBars: true,
axisY: {
offset: 70
},
plugins: [
Chartist.plugins.tooltip()
]
});
// Extreme responsive configuration
new Chartist.Bar('#extreme-chart', {
labels: ['Quarter 1', 'Quarter 2', 'Quarter 3', 'Quarter 4'],
series: [
[5, 4, 3, 7],
[3, 2, 9, 5],
[1, 5, 8, 4],
[2, 3, 4, 6],
[4, 1, 2, 1]
]
}, {
// Default mobile configuration
stackBars: true,
axisX: {
labelInterpolationFnc: function(value) {
return value.split(/\s+/).map(function(word) {
return word[0];
}).join('');
}
},
axisY: {
offset: 20
},
plugins: [
Chartist.plugins.tooltip()
]
}, [
// Options override for media > 400px
['screen and (min-width: 400px)', {
reverseData: true,
horizontalBars: true,
axisX: {
labelInterpolationFnc: Chartist.noop
},
axisY: {
offset: 60
}
}],
// Options override for media > 800px
['screen and (min-width: 800px)', {
stackBars: false,
seriesBarDistance: 10
}],
// Options override for media > 1000px
['screen and (min-width: 1000px)', {
reverseData: false,
horizontalBars: false,
seriesBarDistance: 15
}]
]);
//Distributed series
new Chartist.Bar('#distributed-series', {
labels: ['XS', 'S', 'M', 'L', 'XL', 'XXL', 'XXXL'],
series: [20, 60, 120, 200, 180, 20, 10]
}, {
distributeSeries: true,
plugins: [
Chartist.plugins.tooltip()
]
});
//Label placement
new Chartist.Bar('#label-placement-chart', {
labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
series: [
[5, 4, 3, 7, 5, 10, 3],
[3, 2, 9, 5, 4, 6, 4]
]
}, {
axisX: {
// On the x-axis start means top and end means bottom
position: 'start'
},
axisY: {
// On the y-axis start means left and end means right
position: 'end'
},
plugins: [
Chartist.plugins.tooltip()
]
});
//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) + '%';
}
});
//Pie chart with custom labels
var data = {
labels: ['Bananas', 'Apples', 'Grapes'],
series: [20, 15, 40]
};
var options = {
labelInterpolationFnc: function(value) {
return value[0]
}
};
var responsiveOptions = [
['screen and (min-width: 640px)', {
chartPadding: 30,
labelOffset: 100,
labelDirection: 'explode',
labelInterpolationFnc: function(value) {
return value;
}
}],
['screen and (min-width: 1024px)', {
labelOffset: 80,
chartPadding: 20
}]
];
new Chartist.Pie('#pie-chart', data, options, responsiveOptions);
//Gauge chart
new Chartist.Pie('#gauge-chart', {
series: [20, 10, 30, 40]
}, {
donut: true,
donutWidth: 60,
startAngle: 270,
total: 200,
showLabel: false,
plugins: [
Chartist.plugins.tooltip()
]
});
// Different configuration for different series
var chart = new Chartist.Line('#different-series', {
labels: ['1', '2', '3', '4', '5', '6', '7', '8'],
// Naming the series with the series object array notation
series: [{
name: 'series-1',
data: [5, 2, -4, 2, 0, -2, 5, -3]
}, {
name: 'series-2',
data: [4, 3, 5, 3, 1, 3, 6, 4]
}, {
name: 'series-3',
data: [2, 4, 3, 1, 4, 5, 3, 2]
}]
}, {
fullWidth: true,
// Within the series options you can use the series names
// to specify configuration that will only be used for the
// specific series.
series: {
'series-1': {
lineSmooth: Chartist.Interpolation.step()
},
'series-2': {
lineSmooth: Chartist.Interpolation.simple(),
showArea: true
},
'series-3': {
showPoint: false
}
},
plugins: [
Chartist.plugins.tooltip()
]
}, [
// You can even use responsive configuration overrides to
// customize your series configuration even further!
['screen and (max-width: 320px)', {
series: {
'series-1': {
lineSmooth: Chartist.Interpolation.none()
},
'series-2': {
lineSmooth: Chartist.Interpolation.none(),
showArea: false
},
'series-3': {
lineSmooth: Chartist.Interpolation.none(),
showPoint: true
}
}
}]
]);
//SVG Animations chart
var chart = new Chartist.Line('#svg-dot-animation', {
labels: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
series: [
[12, 4, 2, 8, 5, 4, 6, 2, 3, 3, 4, 6],
[4, 8, 9, 3, 7, 2, 10, 5, 8, 1, 7, 10]
]
}, {
low: 0,
showLine: false,
axisX: {
showLabel: false,
offset: 0
},
axisY: {
showLabel: false,
offset: 0
},
plugins: [
Chartist.plugins.tooltip()
]
});
// Let's put a sequence number aside so we can use it in the event callbacks
var seq = 0;
// 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) {
if(data.type === 'point') {
// 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++ * 80,
// Duration of the animation
dur: 500,
// The value where the animation should start
from: 0,
// The value where it should end
to: 1
},
x1: {
begin: seq++ * 80,
dur: 500,
from: data.x - 100,
to: data.x,
// You can specify an easing function name or use easing functions from Chartist.Svg.Easing directly
easing: Chartist.Svg.Easing.easeOutQuart
}
});
}
});
// 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.__anim0987432598723) {
clearTimeout(window.__anim0987432598723);
window.__anim0987432598723 = null;
}
window.__anim0987432598723 = setTimeout(chart.update.bind(chart), 8000);
});
assets/pages/jquery.chartjs.init.js
+231
View File
@@ -0,0 +1,231 @@
/**
Template Name: Zircos Dashboard
Author: CoderThemes
Email: coderthemes@gmail.com
File: Chartjs
*/
!function($) {
"use strict";
var ChartJs = function() {};
ChartJs.prototype.respChart = function(selector,type,data, options) {
// get selector by context
var ctx = selector.get(0).getContext("2d");
// pointing parent container to make chart js inherit its width
var container = $(selector).parent();
// enable resizing matter
$(window).resize( generateChart );
// this function produce the responsive Chart JS
function generateChart(){
// make chart width fit with its container
var ww = selector.attr('width', $(container).width() );
switch(type){
case 'Line':
new Chart(ctx, {type: 'line', data: data, options: options});
break;
case 'Doughnut':
new Chart(ctx, {type: 'doughnut', data: data, options: options});
break;
case 'Pie':
new Chart(ctx, {type: 'pie', data: data, options: options});
break;
case 'Bar':
new Chart(ctx, {type: 'bar', data: data, options: options});
break;
case 'Radar':
new Chart(ctx, {type: 'radar', data: data, options: options});
break;
case 'PolarArea':
new Chart(ctx, {data: data, type: 'polarArea', options: options});
break;
}
// Initiate new chart or Redraw
};
// run function - render chart at first load
generateChart();
},
//init
ChartJs.prototype.init = function() {
//creating lineChart
var lineChart = {
labels: ["January", "February", "March", "April", "May", "June", "July", "August", "September"],
datasets: [
{
label: "Sales Analytics",
fill: false,
lineTension: 0.1,
backgroundColor: "#f5707a",
borderColor: "#f5707a",
borderCapStyle: 'butt',
borderDash: [],
borderDashOffset: 0.0,
borderJoinStyle: 'miter',
pointBorderColor: "#f5707a",
pointBackgroundColor: "#fff",
pointBorderWidth: 1,
pointHoverRadius: 5,
pointHoverBackgroundColor: "#f5707a",
pointHoverBorderColor: "#eef0f2",
pointHoverBorderWidth: 2,
pointRadius: 1,
pointHitRadius: 10,
data: [65, 59, 80, 81, 56, 55, 40, 35, 30]
}
]
};
var lineOpts = {
scales: {
yAxes: [{
ticks: {
max: 100,
min: 20,
stepSize: 10
}
}]
}
};
this.respChart($("#lineChart"),'Line',lineChart, lineOpts);
//donut chart
var donutChart = {
labels: [
"Desktops",
"Tablets",
"Mobiles"
],
datasets: [
{
data: [300, 50, 100],
backgroundColor: [
"#f9c851",
"#3ac9d6",
"#ebeff2"
],
hoverBackgroundColor: [
"#f9c851",
"#3ac9d6",
"#ebeff2"
],
hoverBorderColor: "#fff"
}]
};
this.respChart($("#doughnut"),'Doughnut',donutChart);
//Pie chart
var pieChart = {
labels: [
"Desktops",
"Tablets",
"Mobiles"
],
datasets: [
{
data: [300, 50, 100],
backgroundColor: [
"#f9c851",
"#3ac9d6",
"#ebeff2"
],
hoverBackgroundColor: [
"#f9c851",
"#3ac9d6",
"#ebeff2"
],
hoverBorderColor: "#fff"
}]
};
this.respChart($("#pie"),'Pie',pieChart);
//barchart
var barChart = {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [
{
label: "Sales Analytics",
backgroundColor: "rgba(127, 193, 252, 0.3)",
borderColor: "#7fc1fc",
borderWidth: 1,
hoverBackgroundColor: "rgba(127, 193, 252, 0.6)",
hoverBorderColor: "#7fc1fc",
data: [65, 59, 80, 81, 56, 55, 40,20]
}
]
};
this.respChart($("#bar"),'Bar',barChart);
//radar chart
var radarChart = {
labels: ["Eating", "Drinking", "Sleeping", "Designing", "Coding", "Cycling", "Running"],
datasets: [
{
label: "Desktops",
backgroundColor: "rgba(179,181,198,0.2)",
borderColor: "rgba(179,181,198,1)",
pointBackgroundColor: "rgba(179,181,198,1)",
pointBorderColor: "#fff",
pointHoverBackgroundColor: "#fff",
pointHoverBorderColor: "rgba(179,181,198,1)",
data: [65, 59, 90, 81, 56, 55, 40]
},
{
label: "Tablets",
backgroundColor: "rgba(255,99,132,0.2)",
borderColor: "rgba(255,99,132,1)",
pointBackgroundColor: "rgba(255,99,132,1)",
pointBorderColor: "#fff",
pointHoverBackgroundColor: "#fff",
pointHoverBorderColor: "rgba(255,99,132,1)",
data: [28, 48, 40, 19, 96, 27, 100]
}
]
};
this.respChart($("#radar"),'Radar',radarChart);
//Polar area chart
var polarChart = {
datasets: [{
data: [
11,
16,
7,
18
],
backgroundColor: [
"#f5707a",
"#188ae2",
"#4bd396",
"#8d6e63"
],
label: 'My dataset', // for legend
hoverBorderColor: "#fff"
}],
labels: [
"Series 1",
"Series 2",
"Series 3",
"Series 4"
]
};
this.respChart($("#polarArea"),'PolarArea',polarChart);
},
$.ChartJs = new ChartJs, $.ChartJs.Constructor = ChartJs
}(window.jQuery),
//initializing
function($) {
"use strict";
$.ChartJs.init()
}(window.jQuery);
assets/pages/jquery.charts-sparkline.js
+151
View File
@@ -0,0 +1,151 @@
/**
* Theme: Zircos Admin Template
* Author: Coderthemes
* Component: Sparkline Chart
*
*/
$( document ).ready(function() {
var DrawSparkline = function() {
$('#sparkline1').sparkline([0, 23, 43, 35, 44, 45, 56, 37, 40], {
type: 'line',
width: $('#sparkline1').width(),
height: '165',
chartRangeMax: 50,
lineColor: '#4bd396',
fillColor: 'rgba(75, 211, 150, 0.3)',
highlightLineColor: 'rgba(0,0,0,.1)',
highlightSpotColor: 'rgba(0,0,0,.2)',
});
$('#sparkline1').sparkline([25, 23, 26, 24, 25, 32, 30, 24, 19], {
type: 'line',
width: $('#sparkline1').width(),
height: '165',
chartRangeMax: 40,
lineColor: '#f5707a',
fillColor: 'rgba(245, 112, 122, 0.3)',
composite: true,
highlightLineColor: 'rgba(0,0,0,.1)',
highlightSpotColor: 'rgba(0,0,0,.2)',
});
$('#sparkline2').sparkline([3, 6, 7, 8, 6, 4, 7, 10, 12, 7, 4, 9, 12, 13, 11, 12], {
type: 'bar',
height: '165',
barWidth: '10',
barSpacing: '3',
barColor: '#26a69a'
});
$('#sparkline3').sparkline([20, 40, 30, 10], {
type: 'pie',
width: '165',
height: '165',
sliceColors: ['#dcdcdc', '#3ac9d6', '#f9c851', '#8d6e63']
});
$('#sparkline4').sparkline([0, 23, 43, 35, 44, 45, 56, 37, 40], {
type: 'line',
width: $('#sparkline1').width(),
height: '165',
chartRangeMax: 50,
lineColor: '#188ae2',
fillColor: 'transparent',
highlightLineColor: 'rgba(0,0,0,.1)',
highlightSpotColor: 'rgba(0,0,0,.2)'
});
$('#sparkline4').sparkline([25, 23, 26, 24, 25, 32, 30, 24, 19], {
type: 'line',
width: $('#sparkline1').width(),
height: '165',
chartRangeMax: 40,
lineColor: '#26a69a',
fillColor: 'transparent',
composite: true,
highlightLineColor: 'rgba(0,0,0,1)',
highlightSpotColor: 'rgba(0,0,0,1)'
});
$('#sparkline6').sparkline([3, 6, 7, 8, 6, 4, 7, 10, 12, 7, 4, 9, 12, 13, 11, 12], {
type: 'line',
width: $('#sparkline1').width(),
height: '165',
lineColor: '#7fc1fc',
fillColor: 'rgba(127,193,292,0.5)',
highlightLineColor: 'rgba(0,0,0,.1)',
highlightSpotColor: 'rgba(0,0,0,.2)'
});
$('#sparkline6').sparkline([3, 6, 7, 8, 6, 4, 7, 10, 12, 7, 4, 9, 12, 13, 11, 12], {
type: 'bar',
height: '165',
barWidth: '10',
barSpacing: '5',
composite: true,
barColor: '#36404e'
});
},
DrawMouseSpeed = function () {
var mrefreshinterval = 500; // update display every 500ms
var lastmousex=-1;
var lastmousey=-1;
var lastmousetime;
var mousetravel = 0;
var mpoints = [];
var mpoints_max = 30;
$('html').mousemove(function(e) {
var mousex = e.pageX;
var mousey = e.pageY;
if (lastmousex > -1) {
mousetravel += Math.max( Math.abs(mousex-lastmousex), Math.abs(mousey-lastmousey) );
}
lastmousex = mousex;
lastmousey = mousey;
});
var mdraw = function() {
var md = new Date();
var timenow = md.getTime();
if (lastmousetime && lastmousetime!=timenow) {
var pps = Math.round(mousetravel / (timenow - lastmousetime) * 1000);
mpoints.push(pps);
if (mpoints.length > mpoints_max)
mpoints.splice(0,1);
mousetravel = 0;
$('#sparkline5').sparkline(mpoints, {
tooltipSuffix: ' pixels per second',
type: 'line',
width: $('#sparkline1').width(),
height: '165',
chartRangeMax: 50,
lineColor: '#f5707a',
fillColor: 'rgba(245, 112, 122, 0.3)',
highlightLineColor: 'rgba(24,147,126,.1)',
highlightSpotColor: 'rgba(24,147,126,.2)',
});
}
lastmousetime = timenow;
setTimeout(mdraw, mrefreshinterval);
}
// We could use setInterval instead, but I prefer to do it this way
setTimeout(mdraw, mrefreshinterval);
};
DrawSparkline();
DrawMouseSpeed();
var resizeChart;
$(window).resize(function(e) {
clearTimeout(resizeChart);
resizeChart = setTimeout(function() {
DrawSparkline();
DrawMouseSpeed();
}, 300);
});
});
assets/pages/jquery.chat.js
+60
View File
@@ -0,0 +1,60 @@
/**
* Theme: Zircos Admin Template
* Author: Coderthemes
* Chat application
*/
!function($) {
"use strict";
var ChatApp = function() {
this.$body = $("body"),
this.$chatInput = $('.chat-input'),
this.$chatList = $('.conversation-list'),
this.$chatSendBtn = $('.chat-send .btn')
};
//saves chat entry - You should send ajax call to server in order to save chat enrty
ChatApp.prototype.save = function() {
var chatText = this.$chatInput.val();
var chatTime = moment().format("h:mm");
if (chatText == "") {
sweetAlert("Oops...", "You forgot to enter your chat message", "error");
this.$chatInput.focus();
} else {
$('<li class="clearfix"><div class="chat-avatar"><img src="assets/images/users/avatar-1.jpg" alt="male"><i>' + chatTime + '</i></div><div class="conversation-text"><div class="ctext-wrap"><i>John Deo</i><p>' + chatText + '</p></div></div></li>').appendTo('.conversation-list');
this.$chatInput.val('');
this.$chatInput.focus();
this.$chatList.scrollTo('100%', '100%', {
easing: 'swing'
});
}
},
ChatApp.prototype.init = function () {
var $this = this;
//binding keypress event on chat input box - on enter we are adding the chat into chat list -
$this.$chatInput.keypress(function (ev) {
var p = ev.which;
if (p == 13) {
$this.save();
return false;
}
});
//binding send button click
$this.$chatSendBtn.click(function (ev) {
$this.save();
return false;
});
},
//init ChatApp
$.ChatApp = new ChatApp, $.ChatApp.Constructor = ChatApp
}(window.jQuery),
//initializing main application module
function($) {
"use strict";
$.ChatApp.init();
}(window.jQuery);
assets/pages/jquery.dashboard.js
+105
View File
@@ -0,0 +1,105 @@
/**
* Theme: Zircos Admin Template
* Author: Coderthemes
* Dashboard
*/
!function($) {
"use strict";
var Dashboard1 = function() {
this.$realData = []
};
//creates Bar chart
Dashboard1.prototype.createBarChart = function(element, data, xkey, ykeys, labels, lineColors) {
Morris.Bar({
element: element,
data: data,
xkey: xkey,
ykeys: ykeys,
labels: labels,
hideHover: 'auto',
resize: true, //defaulted to true
gridLineColor: '#eeeeee',
barSizeRatio: 0.2,
barColors: lineColors,
postUnits: 'k'
});
},
//creates line chart
Dashboard1.prototype.createLineChart = function(element, data, xkey, ykeys, labels, opacity, Pfillcolor, Pstockcolor, lineColors) {
Morris.Line({
element: element,
data: data,
xkey: xkey,
ykeys: ykeys,
labels: labels,
fillOpacity: opacity,
pointFillColors: Pfillcolor,
pointStrokeColors: Pstockcolor,
behaveLikeLine: true,
gridLineColor: '#eef0f2',
hideHover: 'auto',
resize: true, //defaulted to true
pointSize: 0,
lineColors: lineColors,
postUnits: 'k'
});
},
//creates Donut chart
Dashboard1.prototype.createDonutChart = function(element, data, colors) {
Morris.Donut({
element: element,
data: data,
resize: true, //defaulted to true
colors: colors
});
},
Dashboard1.prototype.init = function() {
//creating bar chart
var $barData = [
{ y: '01/16', a: 42 },
{ y: '02/16', a: 75 },
{ y: '03/16', a: 38 },
{ y: '04/16', a: 19 },
{ y: '05/16', a: 93 }
];
this.createBarChart('morris-bar-example', $barData, 'y', ['a'], ['Statistics'], ['#3bafda']);
//create line chart
var $data = [
{ y: '2008', a: 50, b: 0 },
{ y: '2009', a: 75, b: 50 },
{ y: '2010', a: 30, b: 80 },
{ y: '2011', a: 50, b: 50 },
{ y: '2012', a: 75, b: 10 },
{ y: '2013', a: 50, b: 40 },
{ y: '2014', a: 75, b: 50 },
{ y: '2015', a: 100, b: 70 }
];
this.createLineChart('morris-line-example', $data, 'y', ['a','b'], ['Series A','Series B'],['0.9'],['#ffffff'],['#999999'], ['#10c469','#188ae2']);
//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, ['#3ac9d6', '#f5707a', "#4bd396"]);
},
//init
$.Dashboard1 = new Dashboard1, $.Dashboard1.Constructor = Dashboard1
}(window.jQuery),
//initializing
function($) {
"use strict";
$.Dashboard1.init();
}(window.jQuery);
assets/pages/jquery.dashboard_2.js
+190
View File
@@ -0,0 +1,190 @@
/**
* Theme: Zircos Admin Template
* Author: Coderthemes
* Dashboard 2
*/
! function($) {
"use strict";
var FlotChart = function() {
this.$body = $("body")
this.$realData = []
};
//creates plot graph
FlotChart.prototype.createPlotGraph = function(selector, data1, data2, data3, 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]
},{
data : data3,
label : labels[2],
color : colors[2]
}], {
series : {
lines : {
show : true,
fill : true,
lineWidth : 2,
fillColor : {
colors : [{
opacity : 0
}, {
opacity : 0.5
},{
opacity : 0.6
}]
}
},
points : {
show : false
},
shadowSize : 0
},
grid : {
hoverable : true,
clickable : true,
borderColor : borderColor,
tickColor : "#f9f9f9",
borderWidth : 1,
labelMargin : 10,
backgroundColor : bgColor
},
legend : {
position : "ne",
margin : [0, -24],
noColumns : 0,
labelBoxBorderColor : null,
labelFormatter : function(label, series) {
// just add some space to labes
return '' + label + '&nbsp;&nbsp;';
},
width : 30,
height : 2
},
yaxis : {
axisLabel: "Daily Visits",
tickColor : '#f5f5f5',
font : {
color : '#bdbdbd'
}
},
xaxis : {
axisLabel: "Last Days",
tickColor : '#f5f5f5',
font : {
color : '#bdbdbd'
}
},
tooltip : true,
tooltipOpts : {
content : '%s: Value of %x is %y',
shifts : {
x : -60,
y : 25
},
defaultTheme : false
}
});
},
//end plot graph
//creates Donut 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]
}];
var options = {
series : {
pie : {
show : true,
innerRadius : 0.7
}
},
legend : {
show : true,
labelFormatter : function(label, series) {
return '<div style="font-size:14px;">&nbsp;' + 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, 5], [1, 8], [2, 10], [3, 12], [4, 9], [5, 5], [6, 7],[7, 9], [8, 8], [9, 16], [10, 14], [11, 12], [12, 10]];
var downloads = [[0, 2], [1, 4], [2, 7], [3, 9], [4, 6], [5, 3], [6, 10],[7, 8], [8, 5], [9, 14], [10, 10], [11, 10], [12, 8]];
var downloads1 = [[0, 1], [1, 3], [2, 6], [3, 7], [4, 4], [5, 2], [6, 8],[7, 6], [8, 4], [9, 10], [10, 8], [11, 14], [12, 5]];
var plabels = ["Google", "Yahoo","Facebbok"];
var pcolors = ['#4bd396', '#f5707a','#188ae2'];
var borderColor = '#f5f5f5';
var bgColor = '#fff';
this.createPlotGraph("#website-stats", uploads, downloads, downloads1, plabels, pcolors, borderColor, bgColor);
//Donut pie graph data
var donutlabels = ["Series 1", "Series 2", "Series 3", "Series 4"];
var donutdatas = [35, 20, 10, 20];
var donutcolors = ['#ff9800', '#8d6e63', "#26a69a", "#7fc1fc"];
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);
assets/pages/jquery.datatables.editable.init.js
+244
View File
@@ -0,0 +1,244 @@
/**
* Theme: Zircos Admin Template
* Author: Coderthemes
* Component: Editable
*
*/
(function( $ ) {
'use strict';
var EditableTable = {
options: {
addButton: '#addToTable',
table: '#datatable-editable',
dialog: {
wrapper: '#dialog',
cancelButton: '#dialogCancel',
confirmButton: '#dialogConfirm',
}
},
initialize: function() {
this
.setVars()
.build()
.events();
},
setVars: function() {
this.$table = $( this.options.table );
this.$addButton = $( this.options.addButton );
// dialog
this.dialog = {};
this.dialog.$wrapper = $( this.options.dialog.wrapper );
this.dialog.$cancel = $( this.options.dialog.cancelButton );
this.dialog.$confirm = $( this.options.dialog.confirmButton );
return this;
},
build: function() {
this.datatable = this.$table.DataTable({
aoColumns: [
null,
null,
null,
{ "bSortable": false }
]
});
window.dt = this.datatable;
return this;
},
events: function() {
var _self = this;
this.$table
.on('click', 'a.save-row', function( e ) {
e.preventDefault();
_self.rowSave( $(this).closest( 'tr' ) );
})
.on('click', 'a.cancel-row', function( e ) {
e.preventDefault();
_self.rowCancel( $(this).closest( 'tr' ) );
})
.on('click', 'a.edit-row', function( e ) {
e.preventDefault();
_self.rowEdit( $(this).closest( 'tr' ) );
})
.on( 'click', 'a.remove-row', function( e ) {
e.preventDefault();
var $row = $(this).closest( 'tr' );
$.magnificPopup.open({
items: {
src: _self.options.dialog.wrapper,
type: 'inline'
},
preloader: false,
modal: true,
callbacks: {
change: function() {
_self.dialog.$confirm.on( 'click', function( e ) {
e.preventDefault();
_self.rowRemove( $row );
$.magnificPopup.close();
});
},
close: function() {
_self.dialog.$confirm.off( 'click' );
}
}
});
});
this.$addButton.on( 'click', function(e) {
e.preventDefault();
_self.rowAdd();
});
this.dialog.$cancel.on( 'click', function( e ) {
e.preventDefault();
$.magnificPopup.close();
});
return this;
},
// ==========================================================================================
// ROW FUNCTIONS
// ==========================================================================================
rowAdd: function() {
this.$addButton.attr({ 'disabled': 'disabled' });
var actions,
data,
$row;
actions = [
'<a href="#" class="hidden on-editing save-row"><i class="fa fa-save"></i></a>',
'<a href="#" class="hidden on-editing cancel-row"><i class="fa fa-times"></i></a>',
'<a href="#" class="on-default edit-row"><i class="fa fa-pencil"></i></a>',
'<a href="#" class="on-default remove-row"><i class="fa fa-trash-o"></i></a>'
].join(' ');
data = this.datatable.row.add([ '', '', '', actions ]);
$row = this.datatable.row( data[0] ).nodes().to$();
$row
.addClass( 'adding' )
.find( 'td:last' )
.addClass( 'actions' );
this.rowEdit( $row );
this.datatable.order([0,'asc']).draw(); // always show fields
},
rowCancel: function( $row ) {
var _self = this,
$actions,
i,
data;
if ( $row.hasClass('adding') ) {
this.rowRemove( $row );
} else {
data = this.datatable.row( $row.get(0) ).data();
this.datatable.row( $row.get(0) ).data( data );
$actions = $row.find('td.actions');
if ( $actions.get(0) ) {
this.rowSetActionsDefault( $row );
}
this.datatable.draw();
}
},
rowEdit: function( $row ) {
var _self = this,
data;
data = this.datatable.row( $row.get(0) ).data();
$row.children( 'td' ).each(function( i ) {
var $this = $( this );
if ( $this.hasClass('actions') ) {
_self.rowSetActionsEditing( $row );
} else {
$this.html( '<input type="text" class="form-control input-block" value="' + data[i] + '"/>' );
}
});
},
rowSave: function( $row ) {
var _self = this,
$actions,
values = [];
if ( $row.hasClass( 'adding' ) ) {
this.$addButton.removeAttr( 'disabled' );
$row.removeClass( 'adding' );
}
values = $row.find('td').map(function() {
var $this = $(this);
if ( $this.hasClass('actions') ) {
_self.rowSetActionsDefault( $row );
return _self.datatable.cell( this ).data();
} else {
return $.trim( $this.find('input').val() );
}
});
this.datatable.row( $row.get(0) ).data( values );
$actions = $row.find('td.actions');
if ( $actions.get(0) ) {
this.rowSetActionsDefault( $row );
}
this.datatable.draw();
},
rowRemove: function( $row ) {
if ( $row.hasClass('adding') ) {
this.$addButton.removeAttr( 'disabled' );
}
this.datatable.row( $row.get(0) ).remove().draw();
},
rowSetActionsEditing: function( $row ) {
$row.find( '.on-editing' ).removeClass( 'hidden' );
$row.find( '.on-default' ).addClass( 'hidden' );
},
rowSetActionsDefault: function( $row ) {
$row.find( '.on-editing' ).addClass( 'hidden' );
$row.find( '.on-default' ).removeClass( 'hidden' );
}
};
$(function() {
EditableTable.initialize();
});
}).apply( this, [ jQuery ]);
assets/pages/jquery.datatables.init.js
+37
View File
@@ -0,0 +1,37 @@
/**
* Theme: Zircos Admin Template
* Author: Coderthemes
* Component: Datatable
*
*/
var handleDataTableButtons = function() {
"use strict";
0 !== $("#datatable-buttons").length && $("#datatable-buttons").DataTable({
dom: "Bfrtip",
buttons: [{
extend: "copy",
className: "btn-sm"
}, {
extend: "csv",
className: "btn-sm"
}, {
extend: "excel",
className: "btn-sm"
}, {
extend: "pdf",
className: "btn-sm"
}, {
extend: "print",
className: "btn-sm"
}],
responsive: !0
})
},
TableManageButtons = function() {
"use strict";
return {
init: function() {
handleDataTableButtons()
}
}
}();
assets/pages/jquery.fileuploads.init.js
+157
View File
@@ -0,0 +1,157 @@
/**
* Theme: Zircos Admin Template
* Author: Coderthemes
* Email: coderthemes@gmail.com
* File Uploads
*/
$(document).ready(function(){
'use-strict';
//Example 2
$('#filer_input2').filer({
limit: 3,
maxSize: 3,
extensions: ['jpg', 'jpeg', 'png', 'gif', 'psd'],
changeInput: true,
showThumbs: true,
addMore: true
});
//Example 1
$("#filer_input1").filer({
limit: null,
maxSize: null,
extensions: null,
changeInput: '<div class="jFiler-input-dragDrop"><div class="jFiler-input-inner"><div class="jFiler-input-icon"><i class="icon-jfi-cloud-up-o"></i></div><div class="jFiler-input-text"><h3>Drag & Drop files here</h3> <span style="display:inline-block; margin: 15px 0">or</span></div><a class="jFiler-input-choose-btn btn btn-custom waves-effect waves-light">Browse Files</a></div></div>',
showThumbs: true,
theme: "dragdropbox",
templates: {
box: '<ul class="jFiler-items-list jFiler-items-grid"></ul>',
item: '<li class="jFiler-item">\
<div class="jFiler-item-container">\
<div class="jFiler-item-inner">\
<div class="jFiler-item-thumb">\
<div class="jFiler-item-status"></div>\
<div class="jFiler-item-info">\
<span class="jFiler-item-title"><b title="{{fi-name}}">{{fi-name | limitTo: 25}}</b></span>\
<span class="jFiler-item-others">{{fi-size2}}</span>\
</div>\
{{fi-image}}\
</div>\
<div class="jFiler-item-assets jFiler-row">\
<ul class="list-inline pull-left">\
<li>{{fi-progressBar}}</li>\
</ul>\
<ul class="list-inline pull-right">\
<li><a class="icon-jfi-trash jFiler-item-trash-action"></a></li>\
</ul>\
</div>\
</div>\
</div>\
</li>',
itemAppend: '<li class="jFiler-item">\
<div class="jFiler-item-container">\
<div class="jFiler-item-inner">\
<div class="jFiler-item-thumb">\
<div class="jFiler-item-status"></div>\
<div class="jFiler-item-info">\
<span class="jFiler-item-title"><b title="{{fi-name}}">{{fi-name | limitTo: 25}}</b></span>\
<span class="jFiler-item-others">{{fi-size2}}</span>\
</div>\
{{fi-image}}\
</div>\
<div class="jFiler-item-assets jFiler-row">\
<ul class="list-inline pull-left">\
<li><span class="jFiler-item-others">{{fi-icon}}</span></li>\
</ul>\
<ul class="list-inline pull-right">\
<li><a class="icon-jfi-trash jFiler-item-trash-action"></a></li>\
</ul>\
</div>\
</div>\
</div>\
</li>',
progressBar: '<div class="bar"></div>',
itemAppendToEnd: false,
removeConfirmation: true,
_selectors: {
list: '.jFiler-items-list',
item: '.jFiler-item',
progressBar: '.bar',
remove: '.jFiler-item-trash-action'
}
},
dragDrop: {
dragEnter: null,
dragLeave: null,
drop: null,
},
uploadFile: {
url: "../plugins/jquery.filer/php/upload.php",
data: null,
type: 'POST',
enctype: 'multipart/form-data',
beforeSend: function(){},
success: function(data, el){
var parent = el.find(".jFiler-jProgressBar").parent();
el.find(".jFiler-jProgressBar").fadeOut("slow", function(){
$("<div class=\"jFiler-item-others text-success\"><i class=\"icon-jfi-check-circle\"></i> Success</div>").hide().appendTo(parent).fadeIn("slow");
});
},
error: function(el){
var parent = el.find(".jFiler-jProgressBar").parent();
el.find(".jFiler-jProgressBar").fadeOut("slow", function(){
$("<div class=\"jFiler-item-others text-error\"><i class=\"icon-jfi-minus-circle\"></i> Error</div>").hide().appendTo(parent).fadeIn("slow");
});
},
statusCode: null,
onProgress: null,
onComplete: null
},
files: [
{
name: "1.jpg",
size: 145,
type: "image/jpg",
file: "assets/images/small/img-1.jpg"
},
{
name: "2.jpg",
size: 145,
type: "image/jpg",
file: "assets/images/small/img-2.jpg"
}
],
addMore: false,
clipBoardPaste: true,
excludeName: null,
beforeRender: null,
afterRender: null,
beforeShow: null,
beforeSelect: null,
onSelect: null,
afterShow: null,
onRemove: function(itemEl, file, id, listEl, boxEl, newInputEl, inputEl){
var file = file.name;
$.post('../plugins/jquery.filer/php/remove_file.php', {file: file});
},
onEmpty: null,
options: null,
captions: {
button: "Choose Files",
feedback: "Choose files To Upload",
feedback2: "files were chosen",
drop: "Drop file here to Upload",
removeConfirmation: "Are you sure you want to remove this file?",
errors: {
filesLimit: "Only {{fi-limit}} files are allowed to be uploaded.",
filesType: "Only Images are allowed to be uploaded.",
filesSize: "{{fi-name}} is too large! Please upload file up to {{fi-maxSize}} MB.",
filesSizeAll: "Files you've choosed are too large! Please upload files up to {{fi-maxSize}} MB."
}
}
});
});
assets/pages/jquery.flot.init.js
+693
View File
@@ -0,0 +1,693 @@
/**
* Theme: Zircos Admin Template
* Author: Coderthemes
* Module/App: Flot-Chart
*/
! function($) {
"use strict";
var FlotChart = function() {
this.$body = $("body")
this.$realData = []
};
//creates plot graph
FlotChart.prototype.createPlotGraph = function(selector, data1, data2, data3, 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]
},{
data : data3,
label : labels[2],
color : colors[2]
}], {
series : {
lines : {
show : true,
fill : true,
lineWidth : 2,
fillColor : {
colors : [{
opacity : 0
}, {
opacity : 0.5
},{
opacity : 0.6
}]
}
},
points : {
show : false
},
shadowSize : 0
},
grid : {
hoverable : true,
clickable : true,
borderColor : borderColor,
tickColor : "#f9f9f9",
borderWidth : 1,
labelMargin : 10,
backgroundColor : bgColor
},
legend : {
position : "ne",
margin : [0, -24],
noColumns : 0,
labelBoxBorderColor : null,
labelFormatter : function(label, series) {
// just add some space to labes
return '' + label + '&nbsp;&nbsp;';
},
width : 30,
height : 2
},
yaxis : {
axisLabel: "Daily Visits",
tickColor : '#f5f5f5',
font : {
color : '#bdbdbd'
}
},
xaxis : {
axisLabel: "Last Days",
tickColor : '#f5f5f5',
font : {
color : '#bdbdbd'
}
},
tooltip : true,
tooltipOpts : {
content : '%s: Value of %x is %y',
shifts : {
x : -60,
y : 25
},
defaultTheme : false
}
});
},
//end plot graph
//creates plot Dot graph
FlotChart.prototype.createPlotDotGraph = function(selector, data1, data2, labelsDot, colorsDot, borderColorDot, bgColorDot) {
//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 : labelsDot[0],
color : colorsDot[0]
}, {
data : data2,
label : labelsDot[1],
color : colorsDot[1]
}], {
series : {
lines : {
show : true,
fill : true,
lineWidth : 3,
fillColor : {
colors : [{
opacity : 0
}, {
opacity : 0
}]
}
},
points : {
show : true
},
shadowSize : 0
},
grid : {
hoverable : true,
clickable : true,
borderColor : borderColorDot,
tickColor : "#f9f9f9",
borderWidth : 1,
labelMargin : 10,
backgroundColor : bgColorDot
},
legend : {
position : "ne",
margin : [0, -24],
noColumns : 0,
labelBoxBorderColor : null,
labelFormatter : function(label, series) {
// just add some space to labes
return '' + label + '&nbsp;&nbsp;';
},
width : 30,
height : 2
},
yaxis : {
axisLabel: "Gold Price(USD)",
tickColor : '#f5f5f5',
font : {
color : '#bdbdbd'
}
},
xaxis : {
axisLabel: "Numbers",
tickColor : '#f5f5f5',
font : {
color : '#bdbdbd'
}
},
tooltip : true,
tooltipOpts : {
content : '%s: Value of %x is %y',
shifts : {
x : -60,
y : 25
},
defaultTheme : false
}
});
},
//end plot Dot 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]
},{
label : labels[3],
data : datas[3]
}];
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 : {
grow : {
active : false
}, //disable auto grow
shadowSize : 0, // drawing is faster without shadows
lines : {
show : true,
fill : false,
lineWidth : 2,
steps : false
}
},
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 : {
axisLabel: "Response Time (ms)",
min : 0,
max : 100,
tickColor : '#f5f5f5',
color : 'rgba(0,0,0,0.1)'
},
xaxis : {
axisLabel: "Point Value (1000)",
show : true,
tickColor : '#f5f5f5'
}
});
return plot;
},
//creates Donut 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]
}];
var options = {
series : {
pie : {
show : true,
innerRadius : 0.7
}
},
legend : {
show : true,
labelFormatter : function(label, series) {
return '<div style="font-size:14px;">&nbsp;' + 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);
},
//creates Combine Chart
FlotChart.prototype.createStackBarGraph = function(selector, ticks, colors, data) {
var options = {
bars: {
show: true,
barWidth: 0.2,
fill: 1
},
grid: {
show: true,
aboveData: false,
labelMargin: 5,
axisMargin: 0,
borderWidth: 1,
minBorderMargin: 5,
clickable: true,
hoverable: true,
autoHighlight: false,
mouseActiveRadius: 20,
borderColor: '#f5f5f5'
},
series: {
stack: 0
},
legend: {
position: "ne",
margin: [0, -24],
noColumns: 0,
labelBoxBorderColor: null,
labelFormatter: function (label, series) {
// just add some space to labes
return '' + label + '&nbsp;&nbsp;';
},
width: 30,
height: 2
},
yaxis: ticks.y,
xaxis: ticks.x,
colors: colors,
tooltip: true, //activate tooltip
tooltipOpts: {
content: "%s : %y.0",
shifts: {
x: -30,
y: -50
}
}
};
$.plot($(selector), data, options);
},
//creates Combine Chart
FlotChart.prototype.createLineGraph = function(selector, ticks, colors, data) {
var options = {
series: {
lines: {
show: true
},
points: {
show: true
}
},
legend : {
position : "ne",
margin : [0, -24],
noColumns : 0,
labelBoxBorderColor : null,
labelFormatter : function(label, series) {
// just add some space to labes
return '' + label + '&nbsp;&nbsp;';
},
width : 30,
height : 2
},
yaxis: ticks.y,
xaxis: ticks.x,
colors: colors,
grid: {
hoverable: true,
borderColor: '#f5f5f5',
borderWidth: 1,
backgroundColor: '#fff'
},
tooltip: true, //activate tooltip
tooltipOpts: {
content: "%s : %y.0",
shifts: {
x: -30,
y: -50
}
}
};
return $.plot($(selector), data, options);
},
//creates Combine Chart
FlotChart.prototype.createCombineGraph = function(selector, ticks, labels, datas) {
var data = [{
label : labels[0],
data : datas[0],
lines : {
show : true,
fill : true
},
points : {
show : true
}
}, {
label : labels[1],
data : datas[1],
lines : {
show : true
},
points : {
show : true
}
}, {
label : labels[2],
data : datas[2],
bars : {
show : true
}
}];
var options = {
series : {
shadowSize : 0
},
grid : {
hoverable : true,
clickable : true,
tickColor : "#f9f9f9",
borderWidth : 1,
borderColor : "#eeeeee"
},
colors : ['#4bd396', '#f9c851', "#f5707a"],
tooltip : true,
tooltipOpts : {
defaultTheme : false
},
legend : {
position : "ne",
margin : [0, -24],
noColumns : 0,
labelBoxBorderColor : null,
labelFormatter : function(label, series) {
// just add some space to labes
return '' + label + '&nbsp;&nbsp;';
},
width : 30,
height : 2
},
yaxis : {
axisLabel: "Point Value (1000)",
tickColor : '#f5f5f5',
font : {
color : '#bdbdbd'
}
},
xaxis : {
axisLabel: "Daily Hours",
ticks: ticks,
tickColor : '#f5f5f5',
font : {
color : '#bdbdbd'
}
}
};
$.plot($(selector), data, options);
},
//initializing various charts and components
FlotChart.prototype.init = function() {
//plot graph data
var uploads = [[0, 5], [1, 8], [2, 10], [3, 12], [4, 9], [5, 5], [6, 7],[7, 9], [8, 8], [9, 16], [10, 14], [11, 12], [12, 10]];
var downloads = [[0, 2], [1, 4], [2, 7], [3, 9], [4, 6], [5, 3], [6, 10],[7, 8], [8, 5], [9, 14], [10, 10], [11, 10], [12, 8]];
var downloads1 = [[0, 1], [1, 3], [2, 6], [3, 7], [4, 4], [5, 2], [6, 8],[7, 6], [8, 4], [9, 10], [10, 8], [11, 14], [12, 5]];
var plabels = ["Google", "Yahoo","Facebbok"];
var pcolors = ['#4bd396', '#f5707a','#188ae2'];
var borderColor = '#f5f5f5';
var bgColor = '#fff';
this.createPlotGraph("#website-stats", uploads, downloads, downloads1, plabels, pcolors, borderColor, bgColor);
//plot graph Dot data
var uploadsDot = [[0, 2], [1, 4], [2, 7], [3, 9], [4, 6], [5, 3], [6, 10],[7, 8], [8, 5], [9, 14], [10, 10], [11, 10], [12, 8]];
var downloadsDot = [[0, 1], [1, 3], [2, 6], [3, 7], [4, 4], [5, 2], [6, 8],[7, 6], [8, 4], [9, 10], [10, 8], [11, 14], [12, 5]];
var plabelsDot = ["Visits", "Page views"];
var pcolorsDot = ['#4bd396','#f5707a'];
var borderColorDot = '#f5f5f5';
var bgColorDot = '#fff';
this.createPlotDotGraph("#website-stats1", uploadsDot, downloadsDot, plabelsDot, pcolorsDot, borderColorDot, bgColorDot);
//Pie graph data
var pielabels = ["Series 1", "Series 2", "Series 3", "Series 4"];
var datas = [20, 30, 15, 32];
var colors = ['#188ae2', '#4bd396', "#f5707a", "#f9c851"];
this.createPieGraph("#pie-chart #pie-chart-container", pielabels, datas, colors);
//real time data representation
var plot = this.createRealTimeGraph('#flotRealTime', this.randomData(), ['#3ac9d6']);
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') ? 500 : 500);
}
updatePlot();
//Donut pie graph data
var donutlabels = ["Series 1", "Series 2", "Series 3", "Series 4"];
var donutdatas = [35, 20, 10, 20];
var donutcolors = ['#ff9800', '#8d6e63', "#26a69a", "#7fc1fc"];
this.createDonutGraph("#donut-chart #donut-chart-container", donutlabels, donutdatas, donutcolors);
//Combine graph data
var data24Hours = [[0, 201], [1, 520], [2, 337], [3, 261], [4, 157], [5, 95], [6, 200], [7, 250], [8, 320], [9, 500], [10, 152], [11, 214], [12, 364], [13, 449], [14, 558], [15, 282], [16, 379], [17, 429], [18, 518], [19, 470], [20, 330], [21, 245], [22, 358], [23, 74]];
var data48Hours = [[0, 311], [1, 630], [2, 447], [3, 371], [4, 267], [5, 205], [6, 310], [7, 360], [8, 430], [9, 610], [10, 262], [11, 324], [12, 474], [13, 559], [14, 668], [15, 392], [16, 489], [17, 539], [18, 628], [19, 580], [20, 440], [21, 355], [22, 468], [23, 184]];
var dataDifference = [[23, 727], [22, 128], [21, 110], [20, 92], [19, 172], [18, 63], [17, 150], [16, 592], [15, 12], [14, 246], [13, 52], [12, 149], [11, 123], [10, 2], [9, 325], [8, 10], [7, 15], [6, 89], [5, 65], [4, 77], [3, 600], [2, 200], [1, 385], [0, 200]];
var ticks = [[0, "22h"], [1, ""], [2, "00h"], [3, ""], [4, "02h"], [5, ""], [6, "04h"], [7, ""], [8, "06h"], [9, ""], [10, "08h"], [11, ""], [12, "10h"], [13, ""], [14, "12h"], [15, ""], [16, "14h"], [17, ""], [18, "16h"], [19, ""], [20, "18h"], [21, ""], [22, "20h"], [23, ""]];
var combinelabels = ["Last 24 Hours", "Last 48 Hours", "Difference"];
var combinedatas = [data24Hours, data48Hours, dataDifference];
this.createCombineGraph("#combine-chart #combine-chart-container", ticks, combinelabels, combinedatas);
//bar chart = stacked
var stack_ticks = {
y: {
axisLabel: "Sales Value (USD)",
tickColor: '#f5f5f5',
font: {
color: '#bdbdbd'
}
},
x: {
axisLabel: "Last 10 Days",
tickColor: '#f5f5f5',
font: {
color: '#bdbdbd'
}
}
};
//random data
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 ds = new Array();
ds.push({
label: "Series One",
data: d1,
bars: {
order: 3
}
});
ds.push({
label: "Series Two",
data: d2,
bars: {
order: 2
}
});
ds.push({
label: "Series Three",
data: d3,
bars: {
order: 1
}
});
this.createStackBarGraph("#ordered-bars-chart", stack_ticks, ['#26a69a', '#f5707a', "#ebeff2"], ds);
//creating line chart
var line_ticks = {
y: {
min: -1.2,
max: 1.2,
tickColor: '#f5f5f5',
font : {
color : '#bdbdbd'
}
},
x: {
tickColor: '#f5f5f5',
font : {
color : '#bdbdbd'
}
}
};
//sample data
var sin = [],
cos = [];
var offset = 0;
for (var i = 0; i < 12; i += 0.2) {
sin.push([i, Math.sin(i + offset)]);
cos.push([i, Math.cos(i + offset)]);
}
var line_data = [
{
data: sin,
label: "Google",
},
{
data: cos,
label: "Yahoo"
}
];
this.createLineGraph("#line-chart-alt", line_ticks, ["#f5707a", "#188ae2"], line_data);
},
//init flotchart
$.FlotChart = new FlotChart, $.FlotChart.Constructor =
FlotChart
}(window.jQuery),
//initializing flotchart
function($) {
"use strict";
$.FlotChart.init()
}(window.jQuery);
assets/pages/jquery.form-advanced.init.js
+126
View File
@@ -0,0 +1,126 @@
/**
* Theme: Zircos Admin Template
* Author: Coderthemes
* Form Advanced
*/
jQuery(document).ready(function () {
//advance multiselect start
$('#my_multi_select3').multiSelect({
selectableHeader: "<input type='text' class='form-control search-input' autocomplete='off' placeholder='search...'>",
selectionHeader: "<input type='text' class='form-control search-input' autocomplete='off' placeholder='search...'>",
afterInit: function (ms) {
var that = this,
$selectableSearch = that.$selectableUl.prev(),
$selectionSearch = that.$selectionUl.prev(),
selectableSearchString = '#' + that.$container.attr('id') + ' .ms-elem-selectable:not(.ms-selected)',
selectionSearchString = '#' + that.$container.attr('id') + ' .ms-elem-selection.ms-selected';
that.qs1 = $selectableSearch.quicksearch(selectableSearchString)
.on('keydown', function (e) {
if (e.which === 40) {
that.$selectableUl.focus();
return false;
}
});
that.qs2 = $selectionSearch.quicksearch(selectionSearchString)
.on('keydown', function (e) {
if (e.which == 40) {
that.$selectionUl.focus();
return false;
}
});
},
afterSelect: function () {
this.qs1.cache();
this.qs2.cache();
},
afterDeselect: function () {
this.qs1.cache();
this.qs2.cache();
}
});
// Select2
$(".select2").select2();
$(".select2-limiting").select2({
maximumSelectionLength: 2
});
$('.selectpicker').selectpicker();
$(":file").filestyle({input: false});
});
//Bootstrap-TouchSpin
$(".vertical-spin").TouchSpin({
verticalbuttons: true,
verticalupclass: 'ion-plus-round',
verticaldownclass: 'ion-minus-round'
});
$("input[name='demo1']").TouchSpin({
min: 0,
max: 100,
step: 0.1,
decimals: 2,
boostat: 5,
maxboostedstep: 10,
postfix: '%'
});
$("input[name='demo2']").TouchSpin({
min: -1000000000,
max: 1000000000,
stepinterval: 50,
maxboostedstep: 10000000,
prefix: '$'
});
$("input[name='demo3']").TouchSpin();
$("input[name='demo3_21']").TouchSpin({
initval: 40
});
$("input[name='demo3_22']").TouchSpin({
initval: 40
});
$("input[name='demo5']").TouchSpin({
prefix: "pre",
postfix: "post"
});
$("input[name='demo0']").TouchSpin({});
//Bootstrap-MaxLength
$('input#defaultconfig').maxlength()
$('input#thresholdconfig').maxlength({
threshold: 20
});
$('input#moreoptions').maxlength({
alwaysShow: true,
warningClass: "label label-success",
limitReachedClass: "label label-danger"
});
$('input#alloptions').maxlength({
alwaysShow: true,
warningClass: "label label-success",
limitReachedClass: "label label-danger",
separator: ' out of ',
preText: 'You typed ',
postText: ' chars available.',
validate: true
});
$('textarea#textarea').maxlength({
alwaysShow: true
});
$('input#placement').maxlength({
alwaysShow: true,
placement: 'top-left'
});
assets/pages/jquery.form-pickers.init.js
+135
View File
@@ -0,0 +1,135 @@
/**
* Theme: Zircos Admin Template
* Author: Coderthemes
* Form Pickers
*/
jQuery(document).ready(function () {
// Time Picker
jQuery('#timepicker').timepicker({
defaultTIme: false
});
jQuery('#timepicker2').timepicker({
showMeridian: false
});
jQuery('#timepicker3').timepicker({
minuteStep: 15
});
//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
});
//Clock Picker
$('.clockpicker').clockpicker({
donetext: 'Done'
});
$('#single-input').clockpicker({
placement: 'bottom',
align: 'left',
autoclose: true,
'default': 'now'
});
$('#check-minutes').click(function (e) {
// Have to stop propagation here
e.stopPropagation();
$("#single-input").clockpicker('show')
.clockpicker('toggleView', 'minutes');
});
//Date range picker
$('.input-daterange-datepicker').daterangepicker({
buttonClasses: ['btn', 'btn-sm'],
applyClass: 'btn-success',
cancelClass: 'btn-default'
});
$('.input-daterange-timepicker').daterangepicker({
timePicker: true,
timePickerIncrement: 30,
locale: {
format: 'MM/DD/YYYY h:mm A'
},
buttonClasses: ['btn', 'btn-sm'],
applyClass: 'btn-success',
cancelClass: 'btn-default'
});
$('.input-limit-datepicker').daterangepicker({
format: 'MM/DD/YYYY',
minDate: '06/01/2015',
maxDate: '06/30/2015',
buttonClasses: ['btn', 'btn-sm'],
applyClass: 'btn-success',
cancelClass: 'btn-default',
dateLimit: {
days: 6
}
});
$('#reportrange span').html(moment().subtract(29, 'days').format('MMMM D, YYYY') + ' - ' + moment().format('MMMM D, YYYY'));
$('#reportrange').daterangepicker({
format: 'MM/DD/YYYY',
startDate: moment().subtract(29, 'days'),
endDate: moment(),
minDate: '01/01/2012',
maxDate: '12/31/2015',
dateLimit: {
days: 60
},
showDropdowns: true,
showWeekNumbers: true,
timePicker: false,
timePickerIncrement: 1,
timePicker12Hour: true,
ranges: {
'Today': [moment(), moment()],
'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
'Last 7 Days': [moment().subtract(6, 'days'), moment()],
'Last 30 Days': [moment().subtract(29, 'days'), moment()],
'This Month': [moment().startOf('month'), moment().endOf('month')],
'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
},
opens: 'left',
drops: 'down',
buttonClasses: ['btn', 'btn-sm'],
applyClass: 'btn-success',
cancelClass: 'btn-default',
separator: ' to ',
locale: {
applyLabel: 'Submit',
cancelLabel: 'Cancel',
fromLabel: 'From',
toLabel: 'To',
customRangeLabel: 'Custom',
daysOfWeek: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'],
monthNames: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
firstDay: 1
}
}, function (start, end, label) {
console.log(start.toISOString(), end.toISOString(), label);
$('#reportrange span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));
});
});
assets/pages/jquery.fullcalendar.js
+213
View File
@@ -0,0 +1,213 @@
/**
* Theme: Zircos Admin Template
* Author: Coderthemes
* Component: Full-Calendar
*
*/
!function($) {
"use strict";
var CalendarApp = function() {
this.$body = $("body")
this.$modal = $('#event-modal'),
this.$event = ('#external-events div.external-event'),
this.$calendar = $('#calendar'),
this.$saveCategoryBtn = $('.save-category'),
this.$categoryForm = $('#add-category form'),
this.$extEvents = $('#external-events'),
this.$calendarObj = null
};
/* on drop */
CalendarApp.prototype.onDrop = function (eventObj, date) {
var $this = this;
// retrieve the dropped element's stored Event Object
var originalEventObject = eventObj.data('eventObject');
var $categoryClass = eventObj.attr('data-class');
// 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;
if ($categoryClass)
copiedEventObject['className'] = [$categoryClass];
// render the event on the calendar
$this.$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
eventObj.remove();
}
},
/* on click on event */
CalendarApp.prototype.onEventClick = function (calEvent, jsEvent, view) {
var $this = this;
var form = $("<form></form>");
form.append("<label>Change event name</label>");
form.append("<div class='input-group'><input class='form-control' type=text value='" + calEvent.title + "' /><span class='input-group-btn'><button type='submit' class='btn btn-success waves-effect waves-light'><i class='fa fa-check'></i> Save</button></span></div>");
$this.$modal.modal({
backdrop: 'static'
});
$this.$modal.find('.delete-event').show().end().find('.save-event').hide().end().find('.modal-body').empty().prepend(form).end().find('.delete-event').unbind('click').click(function () {
$this.$calendarObj.fullCalendar('removeEvents', function (ev) {
return (ev._id == calEvent._id);
});
$this.$modal.modal('hide');
});
$this.$modal.find('form').on('submit', function () {
calEvent.title = form.find("input[type=text]").val();
$this.$calendarObj.fullCalendar('updateEvent', calEvent);
$this.$modal.modal('hide');
return false;
});
},
/* on select */
CalendarApp.prototype.onSelect = function (start, end, allDay) {
var $this = this;
$this.$modal.modal({
backdrop: 'static'
});
var form = $("<form></form>");
form.append("<div class='row'></div>");
form.find(".row")
.append("<div class='col-md-6'><div class='form-group'><label class='control-label'>Event Name</label><input class='form-control' placeholder='Insert Event Name' type='text' name='title'/></div></div>")
.append("<div class='col-md-6'><div class='form-group'><label class='control-label'>Category</label><select class='form-control' name='category'></select></div></div>")
.find("select[name='category']")
.append("<option value='bg-danger'>Danger</option>")
.append("<option value='bg-success'>Success</option>")
.append("<option value='bg-purple'>Purple</option>")
.append("<option value='bg-primary'>Primary</option>")
.append("<option value='bg-pink'>Pink</option>")
.append("<option value='bg-info'>Info</option>")
.append("<option value='bg-inverse'>Inverse</option>")
.append("<option value='bg-orange'>Orange</option>")
.append("<option value='bg-brown'>Brown</option>")
.append("<option value='bg-teal'>Teal</option>")
.append("<option value='bg-warning'>Warning</option></div></div>");
$this.$modal.find('.delete-event').hide().end().find('.save-event').show().end().find('.modal-body').empty().prepend(form).end().find('.save-event').unbind('click').click(function () {
form.submit();
});
$this.$modal.find('form').on('submit', function () {
var title = form.find("input[name='title']").val();
var beginning = form.find("input[name='beginning']").val();
var ending = form.find("input[name='ending']").val();
var categoryClass = form.find("select[name='category'] option:checked").val();
if (title !== null && title.length != 0) {
$this.$calendarObj.fullCalendar('renderEvent', {
title: title,
start:start,
end: end,
allDay: false,
className: categoryClass
}, true);
$this.$modal.modal('hide');
}
else{
alert('You have to give a title to your event');
}
return false;
});
$this.$calendarObj.fullCalendar('unselect');
},
CalendarApp.prototype.enableDrag = function() {
//init events
$(this.$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
});
});
}
/* Initializing */
CalendarApp.prototype.init = function() {
this.enableDrag();
/* Initialize the calendar */
var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();
var form = '';
var today = new Date($.now());
var defaultEvents = [{
title: 'Hey!',
start: new Date($.now() + 158000000),
className: 'bg-purple'
},
{
title: 'See John Deo',
start: today,
end: today,
className: 'bg-success'
},
{
title: 'Meet John Deo',
start: new Date($.now() + 168000000),
className: 'bg-info'
},
{
title: 'Buy a Theme',
start: new Date($.now() + 338000000),
className: 'bg-primary'
}];
var $this = this;
$this.$calendarObj = $this.$calendar.fullCalendar({
slotDuration: '00:15:00', /* If we want to split day time each 15minutes */
minTime: '08:00:00',
maxTime: '19:00:00',
defaultView: 'month',
handleWindowResize: true,
height: $(window).height() - 200,
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
events: defaultEvents,
editable: true,
droppable: true, // this allows things to be dropped onto the calendar !!!
eventLimit: true, // allow "more" link when too many events
selectable: true,
drop: function(date) { $this.onDrop($(this), date); },
select: function (start, end, allDay) { $this.onSelect(start, end, allDay); },
eventClick: function(calEvent, jsEvent, view) { $this.onEventClick(calEvent, jsEvent, view); }
});
//on new event
this.$saveCategoryBtn.on('click', function(){
var categoryName = $this.$categoryForm.find("input[name='category-name']").val();
var categoryColor = $this.$categoryForm.find("select[name='category-color']").val();
if (categoryName !== null && categoryName.length != 0) {
$this.$extEvents.append('<div class="external-event bg-' + categoryColor + '" data-class="bg-' + categoryColor + '" style="position: relative;"><i class="mdi mdi-checkbox-blank-circle m-r-10 vertical-middle"></i>' + categoryName + '</div>')
$this.enableDrag();
}
});
},
//init CalendarApp
$.CalendarApp = new CalendarApp, $.CalendarApp.Constructor = CalendarApp
}(window.jQuery),
//initializing CalendarApp
function($) {
"use strict";
$.CalendarApp.init()
}(window.jQuery);
assets/pages/jquery.gmaps.js
+226
View File
@@ -0,0 +1,226 @@
/**
* Theme: Zircos Admin Template
* Author: Coderthemes
* Google Maps
*/
!function($) {
"use strict";
var GoogleMap = function() {};
//creates basic map
GoogleMap.prototype.createBasic = function($container) {
return new GMaps({
div: $container,
lat: -12.043333,
lng: -77.028333
});
},
//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 polygone
GoogleMap.prototype.createWithPolygon = function ($container, $path) {
var map = new GMaps({
div: $container,
lat: -12.043333,
lng: -77.028333
});
var polygon = map.drawPolygon({
paths: $path,
strokeColor: '#BBD8E9',
strokeOpacity: 1,
strokeWeight: 3,
fillColor: '#BBD8E9',
fillOpacity: 0.6
});
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
});
},
//Routes
GoogleMap.prototype.createWithRoutes = function ($container, $lat, $lng) {
var map = new GMaps({
div: $container,
lat: $lat,
lng: $lng
});
$('#start_travel').click(function(e){
e.preventDefault();
map.travelRoute({
origin: [-12.044012922866312, -77.02470665341184],
destination: [-12.090814532191756, -77.02271108990476],
travelMode: 'driving',
step: function(e){
$('#instructions').append('<li>'+e.instructions+'</li>');
$('#instructions li:eq('+e.step_number+')').delay(450*e.step_number).fadeIn(200, function(){
map.setCenter(e.end_location.lat(), e.end_location.lng());
map.drawPolyline({
path: e.path,
strokeColor: '#131540',
strokeOpacity: 0.6,
strokeWeight: 6
});
});
}
});
});
return map;
},
//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).ready(function(){
//creating basic map
$this.createBasic('#gmaps-basic'),
//with sample markers
$this.createMarkers('#gmaps-markers');
//polygon
var path = [[-12.040397656836609,-77.03373871559225],
[-12.040248585302038,-77.03993927003302],
[-12.050047116528843,-77.02448169303511],
[-12.044804866577001,-77.02154422636042]];
$this.createWithPolygon('#gmaps-polygons', path);
//overlay
$this.createWithOverlay('#gmaps-overlay');
//street view
$this.createWithStreetview('#panorama', 42.3455, -71.0983);
//routes
$this.createWithRoutes('#gmaps-route',-12.043333, -77.028333);
//types
$this.createMapByType('#gmaps-types', -12.043333, -77.028333);
//statu
$this.createWithMenu('#gmaps-menu', -12.043333, -77.028333);
});
},
//init
$.GoogleMap = new GoogleMap, $.GoogleMap.Constructor = GoogleMap
}(window.jQuery),
//initializing
function($) {
"use strict";
$.GoogleMap.init()
}(window.jQuery);
assets/pages/jquery.google-charts.init.js
+465
View File
@@ -0,0 +1,465 @@
/**
* Theme: Zircos Admin Template
* Author: Coderthemes
* Module/App: Flot-Chart
*/
! function($) {
"use strict";
var GoogleChart = function() {
this.$body = $("body")
};
//creates line graph
GoogleChart.prototype.createLineChart = function(selector, data, axislabel, colors) {
var options = {
fontName: 'Hind Madurai',
height: 340,
curveType: 'function',
fontSize: 14,
chartArea: {
left: '5%',
width: '90%',
height: 300
},
pointSize: 4,
tooltip: {
textStyle: {
fontName: 'Hind Madurai',
fontSize: 14
}
},
vAxis: {
title: axislabel,
titleTextStyle: {
fontSize: 14,
italic: false
},
gridlines:{
color: '#f5f5f5',
count: 10
},
minValue: 0
},
legend: {
position: 'top',
alignment: 'center',
textStyle: {
fontSize: 14
}
},
lineWidth: 3,
colors: colors
};
var google_chart_data = google.visualization.arrayToDataTable(data);
var line_chart = new google.visualization.LineChart(selector);
line_chart.draw(google_chart_data, options);
return line_chart;
},
//creates area graph
GoogleChart.prototype.createAreaChart = function(selector, data, axislabel, colors) {
var options = {
fontName: 'Hind Madurai',
height: 340,
curveType: 'function',
fontSize: 14,
chartArea: {
left: '5%',
width: '90%',
height: 300
},
pointSize: 4,
tooltip: {
textStyle: {
fontName: 'Hind Madurai',
fontSize: 14
}
},
vAxis: {
title: axislabel,
titleTextStyle: {
fontSize: 14,
italic: false
},
gridarea: {
color: '#f5f5f5',
count: 10
},
gridlines: {
color: '#f5f5f5'
},
minValue: 0
},
legend: {
position: 'top',
alignment: 'end',
textStyle: {
fontSize: 14
}
},
lineWidth: 2,
colors: colors
};
var google_chart_data = google.visualization.arrayToDataTable(data);
var area_chart = new google.visualization.AreaChart(selector);
area_chart.draw(google_chart_data, options);
return area_chart;
},
//creates Column graph
GoogleChart.prototype.createColumnChart = function(selector, data, axislabel, colors) {
var options = {
fontName: 'Hind Madurai',
height: 400,
fontSize: 13,
chartArea: {
left: '5%',
width: '90%',
height: 350
},
tooltip: {
textStyle: {
fontName: 'Hind Madurai',
fontSize: 14
}
},
vAxis: {
title: axislabel,
titleTextStyle: {
fontSize: 14,
italic: false
},
gridlines:{
color: '#f5f5f5',
count: 10
},
minValue: 0
},
legend: {
position: 'top',
alignment: 'center',
textStyle: {
fontSize: 13
}
},
colors: colors
};
var google_chart_data = google.visualization.arrayToDataTable(data);
var column_chart = new google.visualization.ColumnChart(selector);
column_chart.draw(google_chart_data, options);
return column_chart;
},
//creates bar graph
GoogleChart.prototype.createBarChart = function(selector, data, colors) {
var options = {
fontName: 'Hind Madurai',
height: 400,
fontSize: 14,
chartArea: {
left: '5%',
width: '90%',
height: 350
},
tooltip: {
textStyle: {
fontName: 'Hind Madurai',
fontSize: 14
}
},
vAxis: {
gridlines:{
color: '#f5f5f5',
count: 10
},
minValue: 0
},
legend: {
position: 'top',
alignment: 'center',
textStyle: {
fontSize: 13
}
},
colors: colors
};
var google_chart_data = google.visualization.arrayToDataTable(data);
var bar_chart = new google.visualization.BarChart(selector);
bar_chart.draw(google_chart_data, options);
return bar_chart;
},
//creates Column Stacked
GoogleChart.prototype.createColumnStackChart = function(selector, data, axislabel, colors) {
var options = {
fontName: 'Hind Madurai',
height: 400,
fontSize: 13,
chartArea: {
left: '5%',
width: '90%',
height: 350
},
isStacked: true,
tooltip: {
textStyle: {
fontName: 'Hind Madurai',
fontSize: 14
}
},
vAxis: {
title: axislabel,
titleTextStyle: {
fontSize: 14,
italic: false
},
gridlines:{
color: '#f5f5f5',
count: 10
},
minValue: 0
},
legend: {
position: 'top',
alignment: 'center',
textStyle: {
fontSize: 13
}
},
colors: colors
};
var google_chart_data = google.visualization.arrayToDataTable(data);
var stackedcolumn_chart = new google.visualization.ColumnChart(selector);
stackedcolumn_chart.draw(google_chart_data, options);
return stackedcolumn_chart;
},
//creates Bar Stacked
GoogleChart.prototype.createBarStackChart = function(selector, data, colors) {
var options = {
fontName: 'Hind Madurai',
height: 400,
fontSize: 13,
chartArea: {
left: '5%',
width: '90%',
height: 350
},
isStacked: true,
tooltip: {
textStyle: {
fontName: 'Hind Madurai',
fontSize: 14
}
},
hAxis: {
gridlines: {
color: '#f5f5f5',
count: 10
},
minValue: 0
},
legend: {
position: 'top',
alignment: 'center',
textStyle: {
fontSize: 13
}
},
colors: colors
};
var google_chart_data = google.visualization.arrayToDataTable(data);
var stackedbar_chart = new google.visualization.BarChart(selector);
stackedbar_chart.draw(google_chart_data, options);
return stackedbar_chart;
},
//creates pie chart
GoogleChart.prototype.createPieChart = function(selector, data, colors, is3D, issliced) {
var options = {
fontName: 'Hind Madurai',
fontSize: 13,
height: 300,
width: 500,
chartArea: {
left: 50,
width: '90%',
height: '90%'
},
colors: colors
};
if(is3D) {
options['is3D'] = true;
}
if(issliced) {
options['is3D'] = true;
options['pieSliceText'] = 'label';
options['slices'] = {
2: {offset: 0.15},
5: {offset: 0.1}
};
}
var google_chart_data = google.visualization.arrayToDataTable(data);
var pie_chart = new google.visualization.PieChart(selector);
pie_chart.draw(google_chart_data, options);
return pie_chart;
},
//creates donut chart
GoogleChart.prototype.createDonutChart = function(selector, data, colors) {
var options = {
fontName: 'Hind Madurai',
fontSize: 13,
height: 300,
pieHole: 0.55,
width: 500,
chartArea: {
left: 50,
width: '90%',
height: '90%'
},
colors: colors
};
var google_chart_data = google.visualization.arrayToDataTable(data);
var pie_chart = new google.visualization.PieChart(selector);
pie_chart.draw(google_chart_data, options);
return pie_chart;
},
//init
GoogleChart.prototype.init = function () {
var $this = this;
//creating line chart
var common_data = [
['Year', 'Sales', 'Expenses'],
['2010', 850, 120],
['2011', 745, 200],
['2012', 852, 180],
['2013', 1000, 400],
['2014', 1170, 460],
['2015', 660, 1120],
['2016', 1030, 540]
];
$this.createLineChart($('#line-chart')[0], common_data, 'Sales and Expenses', ['#4bd396', '#f5707a']);
//creating area chart using same data
$this.createAreaChart($('#area-chart')[0], common_data, 'Sales and Expenses', ['#4bd396', '#f5707a']);
//creating column chart
var column_data = [
['Year', 'Desktop', 'Tablets', 'Mobiles'],
['2010', 850, 120, 200],
['2011', 745, 200, 562],
['2012', 852, 180, 521],
['2013', 1000, 400, 652],
['2014', 1170, 460, 200],
['2015', 660, 1120, 562],
['2016', 1030, 540, 852]
];
$this.createColumnChart($('#column-chart')[0], column_data, 'Sales and Expenses', ['#4bd396', '#f5707a', '#3ac9d6']);
//creating bar chart
var bar_data = [
['Year', 'Sales', 'Expenses'],
['2004', 1000, 400],
['2005', 1170, 460],
['2006', 660, 1120],
['2007', 1030, 540]
];
$this.createBarChart($('#bar-chart')[0], bar_data, ['#4bd396', '#f5707a']);
//creating columns tacked chart
var column_stacked_data = [
['Genre', 'Fantasy & Sci Fi', 'Romance', 'Mystery/Crime', 'General', 'Western', 'Literature', { role: 'annotation' } ],
['2000', 20, 30, 35, 40, 45, 30, ''],
['2005', 14, 20, 25, 30, 48, 30, ''],
['2010', 10, 24, 20, 32, 18, 5, ''],
['2015', 15, 25, 30, 35, 20, 15, ''],
['2020', 16, 22, 23, 30, 16, 9, ''],
['2025', 12, 26, 20, 40, 20, 30, ''],
['2030', 28, 19, 29, 30, 12, 13, '']
];
$this.createColumnStackChart($('#column-stacked-chart')[0], column_stacked_data, 'Sales and Expenses', ['#188ae2', '#4bd396', '#f9c851', '#f5707a', '#6b5fb5', '#3ac9d6']);
//creating bar tacked chart
var bar_stacked_data = [
['Genre', 'Fantasy & Sci Fi', 'Romance', 'Mystery/Crime', 'General', 'Western', 'Literature', { role: 'annotation' } ],
['2000', 20, 30, 35, 40, 45, 30, ''],
['2005', 14, 20, 25, 30, 48, 30, ''],
['2010', 10, 24, 20, 32, 18, 5, ''],
['2015', 15, 25, 30, 35, 20, 15, ''],
['2020', 16, 22, 23, 30, 16, 9, ''],
['2025', 12, 26, 20, 40, 20, 30, ''],
['2030', 28, 19, 29, 30, 12, 13, '']
];
$this.createBarStackChart($('#bar-stacked-chart')[0], bar_stacked_data, ['#188ae2', '#4bd396', '#f9c851', '#f5707a', '#6b5fb5', '#3ac9d6']);
//creating pie chart
var pie_data = [
['Task', 'Hours per Day'],
['Work', 11],
['Eat', 2],
['Commute', 2],
['Watch TV', 2],
['Sleep', 7]
];
$this.createPieChart($('#pie-chart')[0], pie_data, ['#188ae2', '#4bd396', '#f9c851', '#f5707a', '#6b5fb5'], false, false);
//creating donut chart
$this.createDonutChart($('#donut-chart')[0], pie_data, ['#188ae2', '#4bd396', '#f9c851', '#f5707a', '#6b5fb5']);
//creating 3d pie chart
$this.createPieChart($('#pie-3d-chart')[0], pie_data, ['#188ae2', '#4bd396', '#f9c851', '#f5707a', '#6b5fb5'], true, false);
//creating Sliced pie chart
var sliced_Data = [
['Language', 'Speakers (in millions)'],
['Assamese', 13],
['Bengali', 83],
['Gujarati', 46],
['Hindi', 90],
['Kannada', 38],
['Malayalam', 33]
];
$this.createPieChart($('#3d-exploded-chart')[0], sliced_Data, ['#188ae2', '#4bd396', '#f9c851', '#f5707a', '#6b5fb5'], true, true);
//on window resize - redrawing all charts
$(window).on('resize', function() {
$this.createLineChart($('#line-chart')[0], common_data, 'Sales and Expenses', ['#4bd396', '#f5707a']);
$this.createAreaChart($('#area-chart')[0], common_data, 'Sales and Expenses', ['#4bd396', '#f5707a']);
$this.createColumnChart($('#column-chart')[0], column_data, 'Sales and Expenses', ['#4bd396', '#f5707a', '#3ac9d6']);
$this.createBarChart($('#bar-chart')[0], bar_data, ['#4bd396', '#f5707a']);
$this.createColumnStackChart($('#column-stacked-chart')[0], column_stacked_data, 'Sales and Expenses', ['#188ae2', '#4bd396', '#f9c851', '#f5707a', '#6b5fb5', '#3ac9d6']);
$this.createBarStackChart($('#bar-stacked-chart')[0], bar_stacked_data, ['#188ae2', '#4bd396', '#f9c851', '#f5707a', '#6b5fb5', '#3ac9d6']);
$this.createPieChart($('#pie-chart')[0], pie_data, ['#188ae2', '#4bd396', '#f9c851', '#f5707a', '#6b5fb5'], false, false);
$this.createDonutChart($('#donut-chart')[0], pie_data, ['#188ae2', '#4bd396', '#f9c851', '#f5707a', '#6b5fb5']);
$this.createPieChart($('#pie-3d-chart')[0], pie_data, ['#188ae2', '#4bd396', '#f9c851', '#f5707a', '#6b5fb5'], true, false);
$this.createPieChart($('#3d-exploded-chart')[0], sliced_Data, ['#188ae2', '#4bd396', '#f9c851', '#f5707a', '#6b5fb5'], true, true);
});
},
//init GoogleChart
$.GoogleChart = new GoogleChart, $.GoogleChart.Constructor = GoogleChart
}(window.jQuery),
//initializing GoogleChart
function($) {
"use strict";
//loading visualization lib - don't forget to include this
google.load("visualization", "1", {packages:["corechart"]});
//after finished load, calling init method
google.setOnLoadCallback(function() {$.GoogleChart.init();});
}(window.jQuery);
assets/pages/jquery.icons.js
+52
View File
@@ -0,0 +1,52 @@
/**
* Theme: Zircos Admin Template
* Author: Coderthemes
* Icon search
*/
!function($) {
"use strict";
var Icons = function() {
this.$body = $("body"),
this.$searchInput = $("#search-input"),
this.$iconsContainer = $(".icon-list-demo"),
this.noMatchEl = $("#no-matching-result")
};
//searches the icons matching with given name
Icons.prototype.search = function(query_string) {
if(query_string && query_string.length > 0) {
this.$iconsContainer.find(".col-sm-6").hide();
var matching_icons = this.$iconsContainer.find('div:contains("' + query_string + '")');
if(matching_icons.length > 0) {
matching_icons.show();
this.noMatchEl.hide();
} else { //no match
this.noMatchEl.show();
}
} else {
this.$iconsContainer.find(".col-sm-6").show();
this.noMatchEl.hide();
}
},
Icons.prototype.init = function () {
var $this = this;
$this.noMatchEl.hide();
//binding key press event on chat input box - on enter we are adding the chat into chat list -
$this.$searchInput.keyup(function (ev) {
ev.preventDefault();
$this.search($(this).val());
});
},
//init ChatApp
$.Icons = new Icons, $.Icons.Constructor = Icons
}(window.jQuery),
//initializing main application module
function($) {
"use strict";
$.Icons.init();
}(window.jQuery);
assets/pages/jquery.jvectormap.init.js
+215
View File
@@ -0,0 +1,215 @@
/**
* Theme: Zircos Admin Template
* Author: Coderthemes
* VectorMap
*/
! function($) {
"use strict";
var VectorMap = function() {
};
VectorMap.prototype.init = function() {
//various examples
$('#world-map-markers').vectorMap({
map : 'world_mill_en',
scaleColors : ['#4bd396', '#4bd396'],
normalizeFunction : 'polynomial',
hoverOpacity : 0.7,
hoverColor : false,
regionStyle : {
initial : {
fill : '#f5707a'
}
},
markerStyle: {
initial: {
r: 9,
'fill': '#4bd396',
'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 : '#3ac9d6'
}
}
});
$('#india').vectorMap({
map : 'in_mill',
backgroundColor : 'transparent',
regionStyle : {
initial : {
fill : '#4bd396'
}
}
});
$('#uk').vectorMap({
map : 'uk_mill_en',
backgroundColor : 'transparent',
regionStyle : {
initial : {
fill : '#f9c851'
}
}
});
$('#chicago').vectorMap({
map : 'us-il-chicago_mill_en',
backgroundColor : 'transparent',
regionStyle : {
initial : {
fill : '#188ae2'
}
}
});
$('#australia').vectorMap({
map : 'au_mill',
backgroundColor : 'transparent',
regionStyle : {
initial : {
fill : '#6b5fb5'
}
}
});
$('#canada').vectorMap({
map : 'ca_lcc',
backgroundColor : 'transparent',
regionStyle : {
initial : {
fill : '#8d6e63'
}
}
});
$('#germany').vectorMap({
map : 'de_mill',
backgroundColor : 'transparent',
regionStyle : {
initial : {
fill : '#26a69a'
}
}
});
$('#asia').vectorMap({
map : 'asia_mill',
backgroundColor : 'transparent',
regionStyle : {
initial : {
fill : '#ff9800'
}
}
});
},
//init
$.VectorMap = new VectorMap, $.VectorMap.Constructor =
VectorMap
}(window.jQuery),
//initializing
function($) {
"use strict";
$.VectorMap.init()
}(window.jQuery);
assets/pages/jquery.mapael-map.init.js
+315
View File
@@ -0,0 +1,315 @@
/**
* Theme: Zircos Admin Template
* Author: Coderthemes
* Module/App: Mapael Maps
*/
$(function(){
//USA Map
$mapusa = $(".map-usa");
$mapusa.mapael({
map : {
name : "usa_states",
defaultArea: {
attrs: {
fill: "#36404e",
stroke: "#aaa"
},
attrsHover: {
fill: "#4bd396"
}
},
zoom: {
enabled: true,
maxLevel : 10
}
},
legend: {
plot: {
title: "American cities",
slices: [{
size: 24,
attrs: {
fill: "#188ae2"
},
label: "Product One",
sliceValue: "Value 1"
}, {
size: 24,
attrs: {
fill: "#3ac9d6"
},
label: "Product Two",
sliceValue: "Value 2"
}, {
size: 24,
attrs: {
fill: "#f5707a"
},
label: "Product Three",
sliceValue: "Value 3"
}]
}
},
plots: {
'ny': {
latitude: 40.717079,
longitude: -74.00116,
tooltip: {content: "New York"},
value: "Value 3"
},
'an': {
latitude: 61.2108398,
longitude: -149.9019557,
tooltip: {content: "Anchorage"},
value: "Value 3"
},
'sf': {
latitude: 37.792032,
longitude: -122.394613,
tooltip: {content: "San Francisco"},
value: "Value 1"
},
'pa': {
latitude: 19.493204,
longitude: -154.8199569,
tooltip: {content: "Pahoa"},
value: "Value 2"
},
'la': {
latitude: 34.025052,
longitude: -118.192006,
tooltip: {content: "Los Angeles"},
value: "Value 3"
},
'dallas': {
latitude: 32.784881,
longitude: -96.808244,
tooltip: {content: "Dallas"},
value: "Value 2"
},
'miami': {
latitude: 25.789125,
longitude: -80.205674,
tooltip: {content: "Miami"},
value: "Value 3"
},
'washington': {
latitude: 38.905761,
longitude: -77.020746,
tooltip: {content: "Washington"},
value: "Value 2"
},
'seattle': {
latitude: 47.599571,
longitude: -122.319426,
tooltip: {content: "Seattle"},
value: "Value 1"
}
}
});
// Zoom on mousewheel with mousewheel jQuery plugin
$mapusa.on("mousewheel", function(e) {
if (e.deltaY > 0) {
$mapusa.trigger("zoom", $mapusa.data("zoomLevel") + 1);
console.log("zoom");
} else {
$mapusa.trigger("zoom", $mapusa.data("zoomLevel") - 1);
}
return false;
});
$(".mapcontainer").mapael({
map: {
name: "world_countries",
defaultArea: {
attrs: {
fill: "#36404e"
, stroke: "#aaa"
},
attrsHover: {
fill: "#ff9800"
}
}
// Default attributes can be set for all links
, defaultLink: {
factor: 0.4
, attrsHover: {
stroke: "#f06292"
}
}
, defaultPlot: {
text: {
attrs: {
fill: "#ddd"
},
attrsHover: {
fill: "#ddd"
}
}
}
},
plots: {
'paris': {
latitude: 48.86,
longitude: 2.3444,
tooltip: {content: "Paris<br />Population: 500000000"}
},
'newyork': {
latitude: 40.667,
longitude: -73.833,
tooltip: {content: "New york<br />Population: 200001"}
},
'sanfrancisco': {
latitude: 37.792032,
longitude: -122.394613,
tooltip: {content: "San Francisco"}
},
'brasilia': {
latitude: -15.781682,
longitude: -47.924195,
tooltip: {content: "Brasilia<br />Population: 200000001"}
},
'roma': {
latitude: 41.827637,
longitude: 12.462732,
tooltip: {content: "Roma"}
},
'miami': {
latitude: 25.789125,
longitude: -80.205674,
tooltip: {content: "Miami"}
},
// Size=0 in order to make plots invisible
'tokyo': {
latitude: 35.687418,
longitude: 139.692306,
size: 0,
text: {content: 'Tokyo'}
},
'sydney': {
latitude: -33.917,
longitude: 151.167,
size: 0,
text: {content: 'Sydney'}
},
'plot1': {
latitude: 22.906561,
longitude: 86.840170,
size: 0,
text: {content: 'Plot1', position: 'left', margin: 5}
},
'plot2': {
latitude: -0.390553,
longitude: 115.586762,
size: 0,
text: {content: 'Plot2'}
},
'plot3': {
latitude: 44.065626,
longitude: 94.576079,
size: 0,
text: {content: 'Plot3'}
}
},
// Links allow you to connect plots between them
links: {
'link1': {
factor: -0.3
// The source and the destination of the link can be set with a latitude and a longitude or a x and a y ...
, between: [{latitude: 24.708785, longitude: -5.402427}, {x: 560, y: 280}]
, attrs: {
"stroke-width": 2
}
, tooltip: {content: "Link"}
}
, 'parisnewyork': {
// ... Or with IDs of plotted points
factor: -0.3
, between: ['paris', 'newyork']
, attrs: {
"stroke-width": 2
}
, tooltip: {content: "Paris - New-York"}
}
, 'parissanfrancisco': {
// The curve can be inverted by setting a negative factor
factor: -0.5
, between: ['paris', 'sanfrancisco']
, attrs: {
"stroke-width": 4
}
, tooltip: {content: "Paris - San - Francisco"}
}
, 'parisbrasilia': {
factor: -0.8
, between: ['paris', 'brasilia']
, attrs: {
"stroke-width": 1
}
, tooltip: {content: "Paris - Brasilia"}
}
, 'romamiami': {
factor: 0.2
, between: ['roma', 'miami']
, attrs: {
"stroke-width": 4
}
, tooltip: {content: "Roma - Miami"}
}
, 'sydneyplot1': {
factor: -0.2
, between: ['sydney', 'plot1']
, attrs: {
stroke: "#4bd396",
"stroke-width": 3,
"stroke-linecap": "round",
opacity: 0.6
}
, tooltip: {content: "Sydney - Plot1"}
}
, 'sydneyplot2': {
factor: -0.1
, between: ['sydney', 'plot2']
, attrs: {
stroke: "#4bd396",
"stroke-width": 8,
"stroke-linecap": "round",
opacity: 0.6
}
, tooltip: {content: "Sydney - Plot2"}
}
, 'sydneyplot3': {
factor: 0.2
, between: ['sydney', 'plot3']
, attrs: {
stroke: "#4bd396",
"stroke-width": 4,
"stroke-linecap": "round",
opacity: 0.6
}
, tooltip: {content: "Sydney - Plot3"}
}
, 'sydneytokyo': {
factor: 0.2
, between: ['sydney', 'tokyo']
, attrs: {
stroke: "#4bd396",
"stroke-width": 6,
"stroke-linecap": "round",
opacity: 0.6
}
, tooltip: {content: "Sydney - Plot2"}
}
}
});
});
assets/pages/jquery.morris.init.js
+192
View File
@@ -0,0 +1,192 @@
/**
* Theme: Zircos Admin Template
* Author: Coderthemes
* Morris Chart
*/
!function($) {
"use strict";
var MorrisCharts = function() {};
//creates line chart
MorrisCharts.prototype.createLineChart = function(element, data, xkey, ykeys, labels, opacity, Pfillcolor, Pstockcolor, lineColors) {
Morris.Line({
element: element,
data: data,
xkey: xkey,
ykeys: ykeys,
labels: labels,
fillOpacity: opacity,
pointFillColors: Pfillcolor,
pointStrokeColors: Pstockcolor,
behaveLikeLine: true,
gridLineColor: '#eef0f2',
hideHover: 'auto',
lineWidth: '3px',
pointSize: 0,
preUnits: '$',
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: 0,
lineWidth: 0,
data: data,
xkey: xkey,
ykeys: ykeys,
labels: labels,
hideHover: 'auto',
resize: true,
gridLineColor: '#eef0f2',
lineColors: lineColors
});
},
//creates area chart with dotted
MorrisCharts.prototype.createAreaChartDotted = function(element, pointSize, lineWidth, data, xkey, ykeys, labels, Pfillcolor, Pstockcolor, lineColors) {
Morris.Area({
element: element,
pointSize: 3,
lineWidth: 1,
data: data,
xkey: xkey,
ykeys: ykeys,
labels: labels,
hideHover: 'auto',
pointFillColors: Pfillcolor,
pointStrokeColors: Pstockcolor,
resize: true,
smooth: false,
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,
hideHover: 'auto',
resize: true, //defaulted to true
gridLineColor: '#eeeeee',
barSizeRatio: 0.4,
xLabelAngle: 35,
barColors: lineColors
});
},
//creates Stacked chart
MorrisCharts.prototype.createStackedChart = function(element, data, xkey, ykeys, labels, lineColors) {
Morris.Bar({
element: element,
data: data,
xkey: xkey,
ykeys: ykeys,
stacked: true,
labels: labels,
hideHover: 'auto',
resize: true, //defaulted to true
gridLineColor: '#eeeeee',
barColors: lineColors
});
},
//creates Donut chart
MorrisCharts.prototype.createDonutChart = function(element, data, colors) {
Morris.Donut({
element: element,
data: data,
resize: true, //defaulted to true
colors: colors
});
},
MorrisCharts.prototype.init = function() {
//create line chart
var $data = [
{ y: '2008', a: 50, b: 0 },
{ y: '2009', a: 75, b: 50 },
{ y: '2010', a: 30, b: 80 },
{ y: '2011', a: 50, b: 50 },
{ y: '2012', a: 75, b: 10 },
{ y: '2013', a: 50, b: 40 },
{ y: '2014', a: 75, b: 50 },
{ y: '2015', a: 100, b: 70 }
];
this.createLineChart('morris-line-example', $data, 'y', ['a', 'b'], ['Series A', 'Series B'],['0.1'],['#ffffff'],['#999999'], ['#188ae2', '#4bd396']);
//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 }
];
this.createAreaChart('morris-area-example', 0, 0, $areaData, 'y', ['a', 'b'], ['Series A', 'Series B'], ['#8d6e63', "#bdbdbd"]);
//creating area chart with dotted
var $areaDotData = [
{ 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 }
];
this.createAreaChartDotted('morris-area-with-dotted', 0, 0, $areaDotData, 'y', ['a', 'b'], ['Series A', 'Series B'],['#ffffff'],['#999999'], ['#6b5fb5', "#bdbdbd"]);
//creating bar chart
var $barData = [
{ y: '2009', a: 100, b: 90 , c: 40 },
{ y: '2010', a: 75, b: 65 , c: 20 },
{ y: '2011', a: 50, b: 40 , c: 50 },
{ y: '2012', a: 75, b: 65 , c: 95 },
{ y: '2013', a: 50, b: 40 , c: 22 },
{ y: '2014', a: 75, b: 65 , c: 56 },
{ y: '2015', a: 100, b: 90 , c: 60 }
];
this.createBarChart('morris-bar-example', $barData, 'y', ['a', 'b', 'c'], ['Series A', 'Series B', 'Series C'], ['#3ac9d6', '#ff9800', "#f5707a"]);
//creating Stacked chart
var $stckedData = [
{ y: '2005', a: 45, b: 180 },
{ y: '2006', a: 75, b: 65 },
{ y: '2007', a: 100, b: 90 },
{ y: '2008', a: 75, b: 65 },
{ 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 }
];
this.createStackedChart('morris-bar-stacked', $stckedData, 'y', ['a', 'b'], ['Series A', 'Series B'], ['#26a69a', '#ebeff2']);
//creating donut chart
var $donutData = [
{label: "Electricity", value: 12},
{label: "Financial", value: 30},
{label: "Markets", value: 20}
];
this.createDonutChart('morris-donut-example', $donutData, ['#4bd396', '#ebeff2', "#3ac9d6"]);
},
//init
$.MorrisCharts = new MorrisCharts, $.MorrisCharts.Constructor = MorrisCharts
}(window.jQuery),
//initializing
function($) {
"use strict";
$.MorrisCharts.init();
}(window.jQuery);
assets/pages/jquery.nestable.init.js
+59
View File
@@ -0,0 +1,59 @@
/**
* Theme: Zircos Admin Template
* Author: Coderthemes
* Nestable Component
*/
!function($) {
"use strict";
var Nestable = function() {};
Nestable.prototype.updateOutput = function (e) {
var list = e.length ? e : $(e.target),
output = list.data('output');
if (window.JSON) {
output.val(window.JSON.stringify(list.nestable('serialize'))); //, null, 2));
} else {
output.val('JSON browser support required for this demo.');
}
},
//init
Nestable.prototype.init = function() {
// activate Nestable for list 1
$('#nestable_list_1').nestable({
group: 1
}).on('change', this.updateOutput);
// activate Nestable for list 2
$('#nestable_list_2').nestable({
group: 1
}).on('change', this.updateOutput);
// output initial serialised data
this.updateOutput($('#nestable_list_1').data('output', $('#nestable_list_1_output')));
this.updateOutput($('#nestable_list_2').data('output', $('#nestable_list_2_output')));
$('#nestable_list_menu').on('click', function (e) {
var target = $(e.target),
action = target.data('action');
if (action === 'expand-all') {
$('.dd').nestable('expandAll');
}
if (action === 'collapse-all') {
$('.dd').nestable('collapseAll');
}
});
$('#nestable_list_3').nestable();
},
//init
$.Nestable = new Nestable, $.Nestable.Constructor = Nestable
}(window.jQuery),
//initializing
function($) {
"use strict";
$.Nestable.init()
}(window.jQuery);
assets/pages/jquery.property-add.init.js
+133
View File
@@ -0,0 +1,133 @@
/**
* Theme: Zircos Admin Template
* Author: Coderthemes
* Email: coderthemes@gmail.com
* Property Add
*/
$(document).ready(function(){
'use-strict';
//Example 1
$("#filer_input1").filer({
limit: null,
maxSize: null,
extensions: null,
changeInput: '<div class="jFiler-input-dragDrop"><div class="jFiler-input-inner"><div class="jFiler-input-icon"><i class="icon-jfi-cloud-up-o"></i></div><div class="jFiler-input-text"><h3>Drag & Drop files here</h3> <span style="display:inline-block; margin: 15px 0">or</span></div><a class="jFiler-input-choose-btn btn btn-custom waves-effect waves-light">Browse Files</a></div></div>',
showThumbs: true,
theme: "dragdropbox",
templates: {
box: '<ul class="jFiler-items-list jFiler-items-grid"></ul>',
item: '<li class="jFiler-item">\
<div class="jFiler-item-container">\
<div class="jFiler-item-inner">\
<div class="jFiler-item-thumb">\
<div class="jFiler-item-status"></div>\
<div class="jFiler-item-info">\
<span class="jFiler-item-title"><b title="{{fi-name}}">{{fi-name | limitTo: 25}}</b></span>\
<span class="jFiler-item-others">{{fi-size2}}</span>\
</div>\
{{fi-image}}\
</div>\
<div class="jFiler-item-assets jFiler-row">\
<ul class="list-inline pull-left">\
<li>{{fi-progressBar}}</li>\
</ul>\
<ul class="list-inline pull-right">\
<li><a class="icon-jfi-trash jFiler-item-trash-action"></a></li>\
</ul>\
</div>\
</div>\
</div>\
</li>',
itemAppend: '<li class="jFiler-item">\
<div class="jFiler-item-container">\
<div class="jFiler-item-inner">\
<div class="jFiler-item-thumb">\
<div class="jFiler-item-status"></div>\
<div class="jFiler-item-info">\
<span class="jFiler-item-title"><b title="{{fi-name}}">{{fi-name | limitTo: 25}}</b></span>\
<span class="jFiler-item-others">{{fi-size2}}</span>\
</div>\
{{fi-image}}\
</div>\
<div class="jFiler-item-assets jFiler-row">\
<ul class="list-inline pull-left">\
<li><span class="jFiler-item-others">{{fi-icon}}</span></li>\
</ul>\
<ul class="list-inline pull-right">\
<li><a class="icon-jfi-trash jFiler-item-trash-action"></a></li>\
</ul>\
</div>\
</div>\
</div>\
</li>',
progressBar: '<div class="bar"></div>',
itemAppendToEnd: false,
removeConfirmation: true,
_selectors: {
list: '.jFiler-items-list',
item: '.jFiler-item',
progressBar: '.bar',
remove: '.jFiler-item-trash-action'
}
},
dragDrop: {
dragEnter: null,
dragLeave: null,
drop: null,
},
uploadFile: {
url: "../plugins/jquery.filer/php/upload.php",
data: null,
type: 'POST',
enctype: 'multipart/form-data',
beforeSend: function(){},
success: function(data, el){
var parent = el.find(".jFiler-jProgressBar").parent();
el.find(".jFiler-jProgressBar").fadeOut("slow", function(){
$("<div class=\"jFiler-item-others text-success\"><i class=\"icon-jfi-check-circle\"></i> Success</div>").hide().appendTo(parent).fadeIn("slow");
});
},
error: function(el){
var parent = el.find(".jFiler-jProgressBar").parent();
el.find(".jFiler-jProgressBar").fadeOut("slow", function(){
$("<div class=\"jFiler-item-others text-error\"><i class=\"icon-jfi-minus-circle\"></i> Error</div>").hide().appendTo(parent).fadeIn("slow");
});
},
statusCode: null,
onProgress: null,
onComplete: null
},
addMore: false,
clipBoardPaste: true,
excludeName: null,
beforeRender: null,
afterRender: null,
beforeShow: null,
beforeSelect: null,
onSelect: null,
afterShow: null,
onRemove: function(itemEl, file, id, listEl, boxEl, newInputEl, inputEl){
var file = file.name;
$.post('../plugins/jquery.filer/php/remove_file.php', {file: file});
},
onEmpty: null,
options: null,
captions: {
button: "Choose Files",
feedback: "Choose files To Upload",
feedback2: "files were chosen",
drop: "Drop file here to Upload",
removeConfirmation: "Are you sure you want to remove this file?",
errors: {
filesLimit: "Only {{fi-limit}} files are allowed to be uploaded.",
filesType: "Only Images are allowed to be uploaded.",
filesSize: "{{fi-name}} is too large! Please upload file up to {{fi-maxSize}} MB.",
filesSizeAll: "Files you've choosed are too large! Please upload files up to {{fi-maxSize}} MB."
}
}
});
});
assets/pages/jquery.range-sliders.js
+66
View File
@@ -0,0 +1,66 @@
/**
* Theme: Zircos Admin Template
* Author: Coderthemes
* Component: Ion 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
});
});
assets/pages/jquery.rating.js
+195
View File
@@ -0,0 +1,195 @@
/**
* Theme: Zircos Admin Template
* Author: Coderthemes
* Ratings
*/
;(function ($) {
$(function () {
$('#default').raty({
starOff: 'fa fa-star-o text-muted',
starOn: 'fa fa-star text-warning'
});
$('#score').raty({
score: 3,
starOff: 'fa fa-star-o text-muted',
starOn: 'fa fa-star text-danger'
});
$('#score-callback').raty({
score: function () {
return $(this).attr('data-score');
}
});
$('#scoreName').raty({
scoreName: 'entity[score]',
starOff: 'fa fa-star-o text-muted',
starOn: 'fa fa-star text-warning'
});
$('#number').raty({
number: 10,
starOff: 'fa fa-star-o text-muted',
starOn: 'fa fa-star text-danger'
});
$('#number-callback').raty({
number: function () {
return $(this).attr('data-number');
}
});
$('#numberMax').raty({
numberMax: 5,
number: 100,
starOff: 'fa fa-star-o text-muted',
starOn: 'fa fa-star text-purple'
});
$('#readOnly').raty({
readOnly: true,
score: 3,
starOff: 'fa fa-star-o text-muted',
starOn: 'fa fa-star text-success'
});
$('#readOnly-callback').raty({
readOnly: function () {
return 'true becomes readOnly' == 'true becomes readOnly';
}
});
$('#noRatedMsg').raty({
readOnly: true,
noRatedMsg: "I'am readOnly and I haven't rated yet!",
starOff: 'fa fa-star-o text-muted',
starOn: 'fa fa-star text-danger'
});
$('#halfShow-true').raty({
score: 3.26
});
$('#halfShow-false').raty({
halfShow: false,
score: 3.26,
starOff: 'fa fa-star-o text-muted',
starOn: 'fa fa-star text-danger'
});
$('#round').raty({
round: {down: .26, full: .6, up: .76},
score: 3.26,
starOff: 'fa fa-star-o text-muted',
starOn: 'fa fa-star text-pink'
});
$('#half').raty({
half: true
});
$('#starHalf').raty({
half: true,
starHalf: 'fa fa-star-half text-danger',
starOff: 'fa fa-star-o text-muted',
starOn: 'fa fa-star text-danger'
});
$('#click').raty({
click: function (score, evt) {
alert('ID: ' + $(this).attr('id') + "\nscore: " + score + "\nevent: " + evt.type);
}
});
$('#hints').raty({hints: ['a', null, '', undefined, '*_*']});
$('#star-off-and-star-on').raty({
starOff: 'fa fa-bell-o text-muted',
starOn: 'fa fa-bell text-custom'
});
$('#cancel').raty({
cancel: true,
starOff: 'fa fa-star-o text-muted',
starOn: 'fa fa-star text-danger'
});
$('#cancelHint').raty({
cancel: true,
cancelHint: 'My cancel hint!',
starOff: 'fa fa-star-o text-muted',
starOn: 'fa fa-star text-success'
});
$('#cancelPlace').raty({
cancel: true,
cancelPlace: 'right',
starOff: 'fa fa-star-o text-muted',
starOn: 'fa fa-star text-purple'
});
$('#cancel-off-and-cancel-on').raty({
cancel: true,
cancelOff: 'fa fa-minus-square-o text-muted',
cancelOn: 'fa fa-minus-square text-danger'
});
$('#iconRange').raty({
iconRange: [
{range: 1, on: 'fa fa-cloud', off: 'fa fa-circle-o'},
{range: 2, on: 'fa fa-cloud-download', off: 'fa fa-circle-o'},
{range: 3, on: 'fa fa-cloud-upload', off: 'fa fa-circle-o'},
{range: 4, on: 'fa fa-circle', off: 'fa fa-circle-o'},
{range: 5, on: 'fa fa-cogs', off: 'fa fa-circle-o'}
]
});
$('#size-md').raty({
cancel: true,
half: true
});
$('#size-lg').raty({
cancel: true,
half: true
});
$('#target-div').raty({
cancel: true,
target: '#target-div-hint',
starOff: 'fa fa-star-o text-muted',
starOn: 'fa fa-star text-custom'
});
$('#targetType').raty({
cancel: true,
target: '#targetType-hint',
targetType: 'score',
starOff: 'fa fa-star-o text-muted',
starOn: 'fa fa-star text-warning'
});
$('#targetFormat').raty({
target: '#targetFormat-hint',
targetFormat: 'Rating: {score}',
starOff: 'fa fa-star-o text-muted',
starOn: 'fa fa-star text-danger'
});
$('#mouseover').raty({
mouseover: function (score, evt) {
alert('ID: ' + $(this).attr('id') + "\nscore: " + score + "\nevent: " + evt.type);
}
});
$('#mouseout').raty({
width: 150,
mouseout: function (score, evt) {
alert('ID: ' + $(this).attr('id') + "\nscore: " + score + "\nevent: " + evt.type);
}
});
});
})(jQuery);
assets/pages/jquery.real-estate-dashboard.js
+137
View File
@@ -0,0 +1,137 @@
/**
* Theme: Zircos Admin Template
* Author: Coderthemes
* Real Estate Dashboard
*/
! function($) {
"use strict";
var RealEstateDashboard = function() {
this.$body = $("body")
this.$realData = []
};
//creates StackedBar Chart
RealEstateDashboard.prototype.createStackBarGraph = function(selector, ticks, colors, data) {
var options = {
bars: {
show: true,
barWidth: 0.2,
fill: 1
},
grid: {
show: true,
aboveData: false,
labelMargin: 5,
axisMargin: 0,
borderWidth: 1,
minBorderMargin: 5,
clickable: true,
hoverable: true,
autoHighlight: false,
mouseActiveRadius: 20,
borderColor: '#f5f5f5'
},
series: {
stack: 0
},
legend: {
position: "ne",
margin: [0, -24],
noColumns: 0,
labelBoxBorderColor: null,
labelFormatter: function (label, series) {
// just add some space to labes
return '' + label + '&nbsp;&nbsp;';
},
width: 30,
height: 2
},
yaxis: ticks.y,
xaxis: ticks.x,
colors: colors,
tooltip: true, //activate tooltip
tooltipOpts: {
content: "%s : %y.0",
shifts: {
x: -30,
y: -50
}
}
};
$.plot($(selector), data, options);
},
//initializing various charts and components
RealEstateDashboard.prototype.init = function() {
//bar chart = stacked
var stack_ticks = {
y: {
axisLabel: "Sales Value (USD)",
tickColor: '#f5f5f5',
font: {
color: '#bdbdbd'
}
},
x: {
axisLabel: "Last 10 Days",
tickColor: '#f5f5f5',
font: {
color: '#bdbdbd'
}
}
};
//random data
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 ds = new Array();
ds.push({
label: "Revenue",
data: d1,
bars: {
order: 3
}
});
ds.push({
label: "Listed Properties",
data: d2,
bars: {
order: 2
}
});
ds.push({
label: "User Registered",
data: d3,
bars: {
order: 1
}
});
this.createStackBarGraph("#ordered-bars-chart", stack_ticks, ['#26a69a', '#2abfcc', "#ebeff2"], ds);
},
//init RealEstateDashboard
$.RealEstateDashboard = new RealEstateDashboard, $.RealEstateDashboard.Constructor =
RealEstateDashboard
}(window.jQuery),
//initializing RealEstateDashboard
function($) {
"use strict";
$.RealEstateDashboard.init()
}(window.jQuery);
assets/pages/jquery.sweet-alert.init.js
+162
View File
@@ -0,0 +1,162 @@
/**
* Theme: Zircos Admin Template
* Author: Coderthemes
* SweetAlert
*/
!function ($) {
"use strict";
var SweetAlert = function () {
};
//examples
SweetAlert.prototype.init = function () {
//Basic
$('#sa-basic').click(function () {
swal("Here's a message!");
});
//A title with a text under
$('#sa-title').click(function () {
swal("Here's a message!", "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lorem erat, tincidunt vitae ipsum et, pellentesque maximus enim. Mauris eleifend ex semper, lobortis purus sed, pharetra felis")
});
//Success Message
$('#sa-success').click(function () {
swal("Good job!", "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lorem erat, tincidunt vitae ipsum et, pellentesque maximus enim. Mauris eleifend ex semper, lobortis purus sed, pharetra felis", "success")
});
//Warning Message
$('#sa-warning').click(function () {
swal({
title: "Are you sure?",
text: "You will not be able to recover this imaginary file!",
type: "warning",
showCancelButton: true,
confirmButtonClass: 'btn-warning',
confirmButtonText: "Yes, delete it!",
closeOnConfirm: false
}, function () {
swal("Deleted!", "Your imaginary file has been deleted.", "success");
});
});
//Parameter
$('#sa-params').click(function () {
swal({
title: "Are you sure?",
text: "You will not be able to recover this imaginary file!",
type: "warning",
showCancelButton: true,
confirmButtonColor: "#DD6B55",
confirmButtonText: "Yes, delete it!",
cancelButtonText: "No, cancel plx!",
closeOnConfirm: false,
closeOnCancel: false
}, function (isConfirm) {
if (isConfirm) {
swal("Deleted!", "Your imaginary file has been deleted.", "success");
} else {
swal("Cancelled", "Your imaginary file is safe :)", "error");
}
});
});
//Custom Image
$('#sa-image').click(function () {
swal({
title: "Sweet!",
text: "Here's a custom image.",
imageUrl: "../plugins/bootstrap-sweetalert/thumbs-up.jpg"
});
});
//Auto Close Timer
$('#sa-close').click(function () {
swal({
title: "Auto close alert!",
text: "I will close in 2 seconds.",
timer: 2000,
showConfirmButton: false
});
});
//Primary
$('#primary-alert').click(function () {
swal({
title: "Are you sure?",
text: "You will not be able to recover this imaginary file!",
type: "info",
showCancelButton: true,
cancelButtonClass: 'btn-default btn-md waves-effect',
confirmButtonClass: 'btn-primary btn-md waves-effect waves-light',
confirmButtonText: 'Primary!'
});
});
//Info
$('#info-alert').click(function () {
swal({
title: "Are you sure?",
text: "You will not be able to recover this imaginary file!",
type: "info",
showCancelButton: true,
cancelButtonClass: 'btn-default btn-md waves-effect',
confirmButtonClass: 'btn-info btn-md waves-effect waves-light',
confirmButtonText: 'Info!'
});
});
//Success
$('#success-alert').click(function () {
swal({
title: "Are you sure?",
text: "You will not be able to recover this imaginary file!",
type: "success",
showCancelButton: true,
cancelButtonClass: 'btn-default btn-md waves-effect',
confirmButtonClass: 'btn-success btn-md waves-effect waves-light',
confirmButtonText: 'Success!'
});
});
//Warning
$('#warning-alert').click(function () {
swal({
title: "Are you sure?",
text: "You will not be able to recover this imaginary file!",
type: "warning",
showCancelButton: true,
cancelButtonClass: 'btn-default btn-md waves-effect',
confirmButtonClass: 'btn-warning btn-md waves-effect waves-light',
confirmButtonText: 'Warning!'
});
});
//Danger
$('#danger-alert').click(function () {
swal({
title: "Are you sure?",
text: "You will not be able to recover this imaginary file!",
type: "error",
showCancelButton: true,
cancelButtonClass: 'btn-default btn-md waves-effect',
confirmButtonClass: 'btn-danger btn-md waves-effect waves-light',
confirmButtonText: 'Danger!'
});
});
},
//init
$.SweetAlert = new SweetAlert, $.SweetAlert.Constructor = SweetAlert
}(window.jQuery),
//initializing
function ($) {
"use strict";
$.SweetAlert.init()
}(window.jQuery);
assets/pages/jquery.toastr.js
+148
View File
@@ -0,0 +1,148 @@
/**
* Theme: Zircos Admin Template
* Author: Coderthemes
* Toastr js
*/
$(function () {
var i = -1;
var toastCount = 0;
var $toastlast;
var getMessage = function () {
var msgs = ['My name is Inigo Montoya. You killed my father. Prepare to die!',
'Are you the six fingered man?',
'Inconceivable!',
'I do not think that means what you think it means.',
'Have fun storming the castle!'
];
i++;
if (i === msgs.length) {
i = 0;
}
return msgs[i];
};
var getMessageWithClearButton = function (msg) {
msg = msg ? msg : 'Clear itself?';
msg += '<br /><br /><button type="button" class="btn btn-default clear">Yes</button>';
return msg;
};
$('#showtoast').click(function () {
var shortCutFunction = $("#toastTypeGroup input:radio:checked").val();
var msg = $('#message1').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('You can perform some custom action after a toast goes away');
};
}
if ($showDuration.val().length) {
toastr.options.showDuration = $showDuration.val();
}
if ($hideDuration.val().length) {
toastr.options.hideDuration = $hideDuration.val();
}
if ($timeOut.val().length) {
toastr.options.timeOut = 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('Command: toastr["'
+ shortCutFunction
+ '"]("'
+ msg
+ (title ? '", "' + title : '')
+ '")\n\ntoastr.options = '
+ JSON.stringify(toastr.options, null, 2)
);
var $toast = toastr[shortCutFunction](msg, title); // Wire up an event handler to a button in the toast, if it exists
$toastlast = $toast;
if (typeof $toast === 'undefined') {
return;
}
if ($toast.find('#okBtn').length) {
$toast.delegate('#okBtn', 'click', function () {
alert('you clicked me. i was toast #' + toastIndex + '. goodbye!');
$toast.remove();
});
}
if ($toast.find('#surpriseBtn').length) {
$toast.delegate('#surpriseBtn', 'click', function () {
alert('Surprise! you clicked me. i was toast #' + toastIndex + '. You could perform an action here.');
});
}
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();
});
})
assets/pages/jquery.todo.js
+153
View File
@@ -0,0 +1,153 @@
/**
* Theme: Zircos Admin Template
* Author: Coderthemes
* Todos-widget
*/
!function($) {
"use strict";
var TodoApp = function() {
this.$body = $("body"),
this.$todoContainer = $('#todo-container'),
this.$todoMessage = $("#todo-message"),
this.$todoRemaining = $("#todo-remaining"),
this.$todoTotal = $("#todo-total"),
this.$archiveBtn = $("#btn-archive"),
this.$todoList = $("#todo-list"),
this.$todoDonechk = ".todo-done",
this.$todoForm = $("#todo-form"),
this.$todoInput = $("#todo-input-text"),
this.$todoBtn = $("#todo-btn-submit"),
this.$todoData = [
{
'id': '1',
'text': 'Design One page theme',
'done': false
},
{
'id': '2',
'text': 'Build a js based app',
'done': true
},
{
'id': '3',
'text': 'Creating component page',
'done': true
},
{
'id': '4',
'text': 'Testing??',
'done': true
},
{
'id': '5',
'text': 'Hehe!! This is looks cool!',
'done': false
},
{
'id': '6',
'text': 'Build an angular app',
'done': true
}];
this.$todoCompletedData = [];
this.$todoUnCompletedData = [];
};
//mark/unmark - you can use ajax to save data on server side
TodoApp.prototype.markTodo = function(todoId, complete) {
for(var count=0; count<this.$todoData.length;count++) {
if(this.$todoData[count].id == todoId) {
this.$todoData[count].done = complete;
}
}
},
//adds new todo
TodoApp.prototype.addTodo = function(todoText) {
this.$todoData.push({'id': this.$todoData.length, 'text': todoText, 'done': false});
//regenerate list
this.generate();
},
//Archives the completed todos
TodoApp.prototype.archives = function() {
this.$todoUnCompletedData = [];
for(var count=0; count<this.$todoData.length;count++) {
//geretaing html
var todoItem = this.$todoData[count];
if(todoItem.done == true) {
this.$todoCompletedData.push(todoItem);
} else {
this.$todoUnCompletedData.push(todoItem);
}
}
this.$todoData = [];
this.$todoData = [].concat(this.$todoUnCompletedData);
//regenerate todo list
this.generate();
},
//Generates todos
TodoApp.prototype.generate = function() {
//clear list
this.$todoList.html("");
var remaining = 0;
for(var count=0; count<this.$todoData.length;count++) {
//geretaing html
var todoItem = this.$todoData[count];
if(todoItem.done == true)
this.$todoList.prepend('<li class="list-group-item"><div class="checkbox checkbox-primary"><input class="todo-done" id="' + todoItem.id + '" type="checkbox" checked><label for="' + todoItem.id + '">' + todoItem.text + '</label></div></li>');
else {
remaining = remaining + 1;
this.$todoList.prepend('<li class="list-group-item"><div class="checkbox checkbox-primary"><input class="todo-done" id="' + todoItem.id + '" type="checkbox"><label for="' + todoItem.id + '">' + todoItem.text + '</label></div></li>');
}
}
//set total in ui
this.$todoTotal.text(this.$todoData.length);
//set remaining
this.$todoRemaining.text(remaining);
},
//init todo app
TodoApp.prototype.init = function () {
var $this = this;
//generating todo list
this.generate();
//binding archive
this.$archiveBtn.on("click", function(e) {
e.preventDefault();
$this.archives();
return false;
});
//binding todo done chk
$(document).on("change", this.$todoDonechk, function() {
if(this.checked)
$this.markTodo($(this).attr('id'), true);
else
$this.markTodo($(this).attr('id'), false);
//regenerate list
$this.generate();
});
//binding the new todo button
this.$todoBtn.on("click", function() {
if ($this.$todoInput.val() == "" || typeof($this.$todoInput.val()) == 'undefined' || $this.$todoInput.val() == null) {
sweetAlert("Oops...", "You forgot to enter todo text", "error");
$this.$todoInput.focus();
} else {
$this.addTodo($this.$todoInput.val());
}
});
},
//init TodoApp
$.TodoApp = new TodoApp, $.TodoApp.Constructor = TodoApp
}(window.jQuery),
//initializing todo app
function($) {
"use strict";
$.TodoApp.init()
}(window.jQuery);
assets/pages/jquery.tooltipster.js
+68
View File
@@ -0,0 +1,68 @@
/**
* Theme: Zircos Admin Template
* Author: Coderthemes
* Tooltips
*/
(function ($) {
"use strict";
$('#tooltip-hover').tooltipster();
$('#tooltip-events').tooltipster({
trigger: 'click'
});
$('#tooltip-html').tooltipster({
content: $('<img src="assets/images/users/avatar-2.jpg" width="50" height="50" /><p style="text-align:left;"><strong>Soufflé chocolate cake powder.</strong> Applicake lollipop oat cake gingerbread.</p>'),
// setting a same value to minWidth and maxWidth will result in a fixed width
minWidth: 300,
maxWidth: 300,
position: 'right'
});
$('#tooltip-touch').tooltipster({
touchDevices: false
});
$('#tooltip-animation').tooltipster({
animation: 'grow'
});
$('#tooltip-interaction').tooltipster({
contentAsHTML: true,
interactive: true
});
// Multiple tooltips
$('#tooltip-multiple').tooltipster({
animation: 'swing',
content: 'North',
multiple: true,
position: 'top'
});
$('#tooltip-multiple').tooltipster({
content: 'East',
multiple: true,
position: 'right'
});
$('#tooltip-multiple').tooltipster({
animation: 'grow',
content: 'South',
delay: 200,
multiple: true,
position: 'bottom'
});
$('#tooltip-multiple').tooltipster({
animation: 'fall',
content: 'West',
multiple: true,
position: 'left'
});
})(jQuery);
assets/pages/jquery.wizard-init.js
+87
View File
@@ -0,0 +1,87 @@
/**
* Theme: Zircos Admin Template
* Author: Coderthemes
* Form wizard page
*/
!function($) {
"use strict";
var FormWizard = function() {};
FormWizard.prototype.createBasic = function($form_container) {
$form_container.children("div").steps({
headerTag: "h3",
bodyTag: "section",
transitionEffect: "slideLeft",
onFinishing: function (event, currentIndex) {
//NOTE: Here you can do form validation and return true or false based on your validation logic
console.log("Form has been validated!");
return true;
},
onFinished: function (event, currentIndex) {
//NOTE: Submit the form, if all validation passed.
console.log("Form can be submitted using submit method. E.g. $('#basic-form').submit()");
$("#basic-form").submit();
}
});
return $form_container;
},
//creates form with validation
FormWizard.prototype.createValidatorForm = function($form_container) {
$form_container.validate({
errorPlacement: function errorPlacement(error, element) {
element.after(error);
}
});
$form_container.children("div").steps({
headerTag: "h3",
bodyTag: "section",
transitionEffect: "slideLeft",
onStepChanging: function (event, currentIndex, newIndex) {
$form_container.validate().settings.ignore = ":disabled,:hidden";
return $form_container.valid();
},
onFinishing: function (event, currentIndex) {
$form_container.validate().settings.ignore = ":disabled";
return $form_container.valid();
},
onFinished: function (event, currentIndex) {
alert("Submitted!");
}
});
return $form_container;
},
//creates vertical form
FormWizard.prototype.createVertical = function($form_container) {
$form_container.steps({
headerTag: "h3",
bodyTag: "section",
transitionEffect: "fade",
stepsOrientation: "vertical"
});
return $form_container;
},
FormWizard.prototype.init = function() {
//initialzing various forms
//basic form
this.createBasic($("#basic-form"));
//form with validation
this.createValidatorForm($("#wizard-validation-form"));
//vertical form
this.createVertical($("#wizard-vertical"));
},
//init
$.FormWizard = new FormWizard, $.FormWizard.Constructor = FormWizard
}(window.jQuery),
//initializing
function($) {
"use strict";
$.FormWizard.init()
}(window.jQuery);