443 lines
11 KiB
JavaScript
443 lines
11 KiB
JavaScript
/*************************************************************************************/
|
|
// -->Template Name: Bootstrap Press Admin
|
|
// -->Author: Themedesigner
|
|
// -->Email: niravjoshi87@gmail.com
|
|
// -->File: c3_chart_JS
|
|
/*************************************************************************************/
|
|
|
|
//***********************************//
|
|
//initialization of select2
|
|
//***********************************//
|
|
|
|
//***********************************//
|
|
// For select 2
|
|
//***********************************//
|
|
$(".select2").select2();
|
|
|
|
// Single Select Placeholder
|
|
$("#select2-with-placeholder").select2({
|
|
placeholder: "Select a state",
|
|
allowClear: true,
|
|
});
|
|
|
|
//***********************************//
|
|
// Hiding the search box
|
|
//***********************************//
|
|
$("#select2-search-hide").select2({
|
|
minimumResultsForSearch: Infinity,
|
|
});
|
|
|
|
//***********************************//
|
|
// Select With Icon
|
|
//***********************************//
|
|
$("#select2-with-icons").select2({
|
|
minimumResultsForSearch: Infinity,
|
|
templateResult: iconFormat,
|
|
templateSelection: iconFormat,
|
|
escapeMarkup: function (es) {
|
|
return es;
|
|
},
|
|
});
|
|
|
|
function iconFormat(icon) {
|
|
var originalOption = icon.element;
|
|
if (!icon.id) {
|
|
return icon.text;
|
|
}
|
|
var $icon =
|
|
"<i class='fab fa-" + $(icon.element).data("icon") + "'></i>" + icon.text;
|
|
return $icon;
|
|
}
|
|
|
|
//***********************************//
|
|
// Limiting the number of selections
|
|
//***********************************//
|
|
$("#select2-max-length").select2({
|
|
maximumSelectionLength: 3,
|
|
placeholder: "Select only maximum 3 items",
|
|
});
|
|
|
|
//***********************************//
|
|
//multiple-select2-with-icons
|
|
//***********************************//
|
|
$("#multiple-select2-with-icons").select2({
|
|
minimumResultsForSearch: Infinity,
|
|
templateResult: iconFormat,
|
|
templateSelection: iconFormat,
|
|
escapeMarkup: function (es) {
|
|
return es;
|
|
},
|
|
});
|
|
|
|
function iconFormat(icon) {
|
|
var originalOption = icon.element;
|
|
if (!icon.id) {
|
|
return icon.text;
|
|
}
|
|
var $icon =
|
|
"<i class='fab fa-" + $(icon.element).data("icon") + "'></i>" + icon.text;
|
|
return $icon;
|
|
}
|
|
|
|
//***********************************//
|
|
// DOM Events
|
|
//***********************************//
|
|
var $selectEvent = $(".js-events");
|
|
$selectEvent.select2({
|
|
placeholder: "DOM Events",
|
|
});
|
|
$selectEvent.on("select2:open", function (e) {
|
|
alert("Open Event Fired.");
|
|
});
|
|
$selectEvent.on("select2:close", function (e) {
|
|
alert("Close Event Fired.");
|
|
});
|
|
$selectEvent.on("select2:select", function (e) {
|
|
alert("Select Event Fired.");
|
|
});
|
|
$selectEvent.on("select2:unselect", function (e) {
|
|
alert("Unselect Event Fired.");
|
|
});
|
|
|
|
$selectEvent.on("change", function (e) {
|
|
alert("Change Event Fired.");
|
|
});
|
|
|
|
//***********************************//
|
|
// Programmatic access
|
|
//***********************************//
|
|
var $select = $(".js-programmatic").select2();
|
|
var $selectMulti = $(".js-programmatic-multiple").select2();
|
|
$selectMulti.select2({
|
|
placeholder: "Programmatic Events",
|
|
});
|
|
$(".js-programmatic-set-val").on("click", function () {
|
|
$select.val("NM").trigger("change");
|
|
});
|
|
|
|
$(".js-programmatic-open").on("click", function () {
|
|
$select.select2("open");
|
|
});
|
|
$(".js-programmatic-close").on("click", function () {
|
|
$select.select2("close");
|
|
});
|
|
|
|
$(".js-programmatic-init").on("click", function () {
|
|
$select.select2();
|
|
});
|
|
$(".js-programmatic-destroy").on("click", function () {
|
|
$select.select2("destroy");
|
|
});
|
|
|
|
$(".js-programmatic-multi-set-val").on("click", function () {
|
|
$selectMulti.val(["UT", "NM"]).trigger("change");
|
|
});
|
|
$(".js-programmatic-multi-clear").on("click", function () {
|
|
$selectMulti.val(null).trigger("change");
|
|
});
|
|
|
|
//***********************************//
|
|
// Loading array data
|
|
//***********************************//
|
|
var data = [
|
|
{ id: 0, text: "Web Designer" },
|
|
{ id: 1, text: "Mobile App Developer" },
|
|
{ id: 2, text: "Graphics Designer" },
|
|
{ id: 3, text: "Hacker" },
|
|
{ id: 4, text: "Animation Designer" },
|
|
];
|
|
|
|
$("#select2-data-array").select2({
|
|
data: data,
|
|
});
|
|
|
|
//***********************************//
|
|
// Loading remote data
|
|
//***********************************//
|
|
$(".select2-data-ajax").select2({
|
|
placeholder: "Loading remote data",
|
|
ajax: {
|
|
url: "http://api.github.com/search/repositories",
|
|
dataType: "json",
|
|
delay: 250,
|
|
data: function (params) {
|
|
return {
|
|
q: params.term, // search term
|
|
page: params.page,
|
|
};
|
|
},
|
|
processResults: function (data, params) {
|
|
// parse the results into the format expected by Select2
|
|
// since we are using custom formatting functions we do not need to
|
|
// alter the remote JSON data, except to indicate that infinite
|
|
// scrolling can be used
|
|
params.page = params.page || 1;
|
|
|
|
return {
|
|
results: data.items,
|
|
pagination: {
|
|
more: params.page * 30 < data.total_count,
|
|
},
|
|
};
|
|
},
|
|
cache: true,
|
|
},
|
|
escapeMarkup: function (markup) {
|
|
return markup;
|
|
}, // let our custom formatter work
|
|
minimumInputLength: 1,
|
|
templateResult: formatRepo, // omitted for brevity, see the source of this page
|
|
templateSelection: formatRepoSelection, // omitted for brevity, see the source of this page
|
|
});
|
|
|
|
function formatRepo(repo) {
|
|
if (repo.loading) return repo.text;
|
|
|
|
var markup =
|
|
"<div class='select2-result-repository clearfix'>" +
|
|
"<div class='select2-result-repository__avatar'><img src='" +
|
|
repo.owner.avatar_url +
|
|
"' /></div>" +
|
|
"<div class='select2-result-repository__meta'>" +
|
|
"<div class='select2-result-repository__title'>" +
|
|
repo.full_name +
|
|
"</div>";
|
|
|
|
if (repo.description) {
|
|
markup +=
|
|
"<div class='select2-result-repository__description'>" +
|
|
repo.description +
|
|
"</div>";
|
|
}
|
|
|
|
markup +=
|
|
"<div class='select2-result-repository__statistics'>" +
|
|
"<div class='select2-result-repository__forks'><i class='la la-code-fork mr-0'></i> " +
|
|
repo.forks_count +
|
|
" Forks</div>" +
|
|
"<div class='select2-result-repository__stargazers'><i class='la la-star-o mr-0'></i> " +
|
|
repo.stargazers_count +
|
|
" Stars</div>" +
|
|
"<div class='select2-result-repository__watchers'><i class='la la-eye mr-0'></i> " +
|
|
repo.watchers_count +
|
|
" Watchers</div>" +
|
|
"</div>" +
|
|
"</div></div>";
|
|
|
|
return markup;
|
|
}
|
|
|
|
function formatRepoSelection(repo) {
|
|
return repo.full_name || repo.text;
|
|
}
|
|
|
|
//***********************************//
|
|
// Multiple languages
|
|
//***********************************//
|
|
$("#select2-language").select2({
|
|
language: "es",
|
|
});
|
|
|
|
//***********************************//
|
|
// Theme support
|
|
//***********************************//
|
|
$("#select2-theme").select2({
|
|
placeholder: "Classic Theme",
|
|
theme: "classic",
|
|
});
|
|
|
|
//***********************************//
|
|
//templete with flag icons
|
|
//***********************************//
|
|
$("#template-with-flag-icons").select2({
|
|
minimumResultsForSearch: Infinity,
|
|
templateResult: iconFormat,
|
|
templateSelection: iconFormat,
|
|
escapeMarkup: function (es) {
|
|
return es;
|
|
},
|
|
});
|
|
|
|
function iconFormat(ficon) {
|
|
var originalOption = ficon.element;
|
|
if (!ficon.id) {
|
|
return ficon.text;
|
|
}
|
|
var $ficon =
|
|
"<i class='flag-icon flag-icon-" +
|
|
$(ficon.element).data("flag") +
|
|
"'></i>" +
|
|
ficon.text;
|
|
return $ficon;
|
|
}
|
|
|
|
//***********************************//
|
|
// Tagging support
|
|
//***********************************//
|
|
$("#select2-with-tags").select2({
|
|
tags: true,
|
|
});
|
|
|
|
//***********************************//
|
|
// Automatic tokenization
|
|
//***********************************//
|
|
$("#select2-with-tokenizer").select2({
|
|
tags: true,
|
|
tokenSeparators: [",", " "],
|
|
});
|
|
|
|
//***********************************//
|
|
// RTL support
|
|
//***********************************//
|
|
$("#select2-rtl-multiple").select2({
|
|
placeholder: "RTL Select",
|
|
dir: "rtl",
|
|
});
|
|
|
|
//***********************************//
|
|
// Language Files
|
|
//***********************************//
|
|
$("#select2-transliteration-multiple").select2({
|
|
placeholder: "Type 'aero'",
|
|
});
|
|
|
|
//***********************************//
|
|
// Color Options
|
|
//***********************************//
|
|
|
|
//***********************************//
|
|
// Background Color
|
|
//***********************************//
|
|
$(".select2-with-bg").each(function (i, obj) {
|
|
var variation = "",
|
|
textVariation = "",
|
|
textColor = "";
|
|
var color = $(this).data("bgcolor");
|
|
variation = $(this).data("bgcolor-variation");
|
|
textVariation = $(this).data("text-variation");
|
|
textColor = $(this).data("text-color");
|
|
if (textVariation !== "") {
|
|
textVariation = " " + textVariation;
|
|
}
|
|
if (variation !== "") {
|
|
variation = " bg-" + variation;
|
|
}
|
|
var className =
|
|
"bg-" +
|
|
color +
|
|
variation +
|
|
" " +
|
|
textColor +
|
|
textVariation +
|
|
" border-" +
|
|
color;
|
|
|
|
$(this).select2({
|
|
containerCssClass: className,
|
|
});
|
|
});
|
|
|
|
//***********************************//
|
|
// Menu Background Color
|
|
//***********************************//
|
|
$(".select2-with-menu-bg").each(function (i, obj) {
|
|
var variation = "",
|
|
textVariation = "",
|
|
textColor = "";
|
|
var color = $(this).data("bgcolor");
|
|
variation = $(this).data("bgcolor-variation");
|
|
textVariation = $(this).data("text-variation");
|
|
textColor = $(this).data("text-color");
|
|
if (variation !== "") {
|
|
variation = " bg-" + variation;
|
|
}
|
|
if (textVariation !== "") {
|
|
textVariation = " " + textVariation;
|
|
}
|
|
var className =
|
|
"bg-" +
|
|
color +
|
|
variation +
|
|
" " +
|
|
textColor +
|
|
textVariation +
|
|
" border-" +
|
|
color;
|
|
|
|
$(this).select2({
|
|
dropdownCssClass: className,
|
|
});
|
|
});
|
|
|
|
//***********************************//
|
|
// Full Background Color
|
|
//***********************************//
|
|
$(".select2-with-full-bg").each(function (i, obj) {
|
|
var variation = "",
|
|
textVariation = "",
|
|
textColor = "";
|
|
var color = $(this).data("bgcolor");
|
|
variation = $(this).data("bgcolor-variation");
|
|
textVariation = $(this).data("text-variation");
|
|
textColor = $(this).data("text-color");
|
|
if (variation !== "") {
|
|
variation = " bg-" + variation;
|
|
}
|
|
if (textVariation !== "") {
|
|
textVariation = " " + textVariation;
|
|
}
|
|
var className =
|
|
"bg-" +
|
|
color +
|
|
variation +
|
|
" " +
|
|
textColor +
|
|
textVariation +
|
|
" border-" +
|
|
color;
|
|
|
|
$(this).select2({
|
|
containerCssClass: className,
|
|
dropdownCssClass: className,
|
|
});
|
|
});
|
|
|
|
$("select[data-text-color]").each(function (i, obj) {
|
|
var text = $(this).data("text-color"),
|
|
textVariation;
|
|
textVariation = $(this).data("text-variation");
|
|
if (textVariation !== "") {
|
|
textVariation = " " + textVariation;
|
|
}
|
|
$(this)
|
|
.next(".select2")
|
|
.find(".select2-selection__rendered")
|
|
.addClass(text + textVariation);
|
|
});
|
|
|
|
//***********************************//
|
|
// Border Color
|
|
//***********************************//
|
|
$(".select2-with-border").each(function (i, obj) {
|
|
var variation = "",
|
|
textVariation = "",
|
|
textColor = "";
|
|
var color = $(this).data("border-color");
|
|
textVariation = $(this).data("text-variation");
|
|
variation = $(this).data("border-variation");
|
|
textColor = $(this).data("text-color");
|
|
if (textVariation !== "") {
|
|
textVariation = " " + textVariation;
|
|
}
|
|
if (variation !== "") {
|
|
variation = " border-" + variation;
|
|
}
|
|
|
|
var className =
|
|
"border-" + color + " " + variation + " " + textColor + textVariation;
|
|
|
|
$(this).select2({
|
|
containerCssClass: className,
|
|
});
|
|
});
|