123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550 |
- /*!========================================================================
- * File: bootstrap-iconpicker.js v1.10.0 by @victor-valencia
- * https://victor-valencia.github.com/bootstrap-iconpicker
- * ========================================================================
- * Copyright 2013-2018 Victor Valencia Rico.
- * Licensed under MIT license.
- * https://github.com/victor-valencia/bootstrap-iconpicker/blob/master/LICENSE
- * ========================================================================
- */
- ;(function($){ "use strict";
- // ICONPICKER PUBLIC CLASS DEFINITION
- // ==============================
- var Iconpicker = function (element, options) {
- if (typeof $.fn.popover === 'undefined' || typeof $.fn.popover.Constructor.VERSION === 'undefined') {
- throw new TypeError('Bootstrap iconpicker require Bootstrap popover');
- }
- this.$element = $(element);
- this.options = $.extend({}, Iconpicker.DEFAULTS, this.$element.data());
- this.options = $.extend({}, this.options, options);
- };
- // ICONPICKER VERSION
- // ==============================
- Iconpicker.VERSION = '1.10.0';
- // ICONPICKER ICONSET_EMPTY
- // ==============================
- Iconpicker.ICONSET_EMPTY = {
- iconClass: '',
- iconClassFix: '',
- icons: []
- };
- // ICONPICKER ICONSET
- // ==============================
- Iconpicker.ICONSET = {
- _custom: null,
- elusiveicon: $.iconset_elusiveicon || Iconpicker.ICONSET_EMPTY,
- flagicon: $.iconset_flagicon || Iconpicker.ICONSET_EMPTY,
- fontawesome4: $.iconset_fontawesome_4 || Iconpicker.ICONSET_EMPTY,
- fontawesome5: $.iconset_fontawesome_5 || Iconpicker.ICONSET_EMPTY,
- glyphicon: $.iconset_glyphicon || Iconpicker.ICONSET_EMPTY,
- ionicon: $.iconset_ionicon || Iconpicker.ICONSET_EMPTY,
- mapicon: $.iconset_mapicon || Iconpicker.ICONSET_EMPTY,
- materialdesign: $.iconset_materialdesign || Iconpicker.ICONSET_EMPTY,
- octicon: $.iconset_octicon || Iconpicker.ICONSET_EMPTY,
- typicon: $.iconset_typicon || Iconpicker.ICONSET_EMPTY,
- weathericon: $.iconset_weathericon || Iconpicker.ICONSET_EMPTY
- };
- // ICONPICKER DEFAULTS
- // ==============================
- Iconpicker.DEFAULTS = {
- align: 'center',
- arrowClass: 'btn-primary',
- arrowNextIconClass: 'fas fa-arrow-right',
- arrowPrevIconClass: 'fas fa-arrow-left',
- cols: 4,
- icon: '',
- iconset: 'fontawesome5',
- iconsetVersion: 'lastest',
- header: true,
- labelHeader: '{0} / {1}',
- footer: true,
- labelFooter: '{0} - {1} of {2}',
- placement: 'bottom',
- rows: 4,
- search: true,
- searchText: 'Search icon',
- selectedClass: 'btn-warning',
- unselectedClass: 'btn-secondary'
- };
- // ICONPICKER PRIVATE METHODS
- // ==============================
- Iconpicker.prototype.bindEvents = function () {
- var op = this.options;
- var el = this;
- op.table.find('.btn-previous, .btn-next').off('click').on('click', function(e) {
- e.preventDefault();
- if(!$(this).hasClass('disabled')){
- var inc = parseInt($(this).val(), 10);
- el.changeList(op.page + inc);
- }
- });
- op.table.find('.btn-icon').off('click').on('click', function(e) {
- e.preventDefault();
- el.select($(this).val());
- if(op.inline === false){
- el.$element.popover(($.fn.bsVersion() === '3.x') ? 'destroy' : 'dispose');
- }
- else{
- op.table.find("i[class$='" + $(this).val() + "']").parent().addClass(op.selectedClass);
- }
- });
- op.table.find('.search-control').off('keyup').on('keyup', function() {
- el.changeList(1);
- });
- };
- Iconpicker.prototype.changeList = function (page) {
- this.filterIcons();
- this.updateLabels(page);
- this.updateIcons(page);
- this.options.page = page;
- this.bindEvents();
- };
- Iconpicker.prototype.filterIcons = function () {
- var op = this.options;
- var search = op.table.find('.search-control').val();
- var icons = [];
- if(op.iconsetVersion != 'lastest' && typeof Iconpicker.ICONSET[op.iconset].allVersions != 'undefined'){
- $.each(Iconpicker.ICONSET[op.iconset].allVersions, function(i, v){
- if(op.iconsetVersion == v.version){
- icons = v.icons;
- }
- });
- }
- else
- icons = Iconpicker.ICONSET[op.iconset].icons;
- if (search === "") {
- op.icons = icons;
- }
- else {
- var result = [];
- $.each(icons, function(i, v) {
- if (v.toLowerCase().indexOf(search) > -1) {
- result.push(v);
- }
- });
- op.icons = result;
- }
- };
- Iconpicker.prototype.removeAddClass = function (target, remove, add) {
- this.options.table.find(target).removeClass(remove).addClass(add);
- return add;
- };
- Iconpicker.prototype.reset = function () {
- this.updatePicker();
- this.changeList(1);
- };
- Iconpicker.prototype.select = function (icon) {
- var op = this.options;
- var el = this.$element;
- op.selected = $.inArray(icon.replace(op.iconClassFix, ''), op.icons);
- if (op.selected === -1) {
- op.selected = 0;
- icon = op.iconClassFix + op.icons[op.selected];
- }
- if (icon !== '' && op.selected >= 0) {
- op.icon = icon;
- if(op.inline === false){
- el.find('input').val(icon);
- el.find('i').attr('class', '').addClass(op.iconClass).addClass(icon);
- }
- if(icon === op.iconClassFix){
- el.trigger({ type: "change", icon: 'empty' });
- }
- else {
- el.trigger({ type: "change", icon: icon });
- el.find('input').val(icon);
- }
- op.table.find('button.' + op.selectedClass).removeClass(op.selectedClass);
- }
- };
- Iconpicker.prototype.switchPage = function (icon) {
- var op = this.options;
- op.selected = $.inArray(icon.replace(op.iconClassFix, ''), op.icons);
- if(op.selected >= 0) {
- var page = Math.ceil((op.selected + 1) / this.totalIconsPerPage());
- this.changeList(page);
- }
- if(icon === ''){
- //if(op.iconClassFix !== '')
- op.table.find('i.' + op.iconClassFix).parent().addClass(op.selectedClass);
- //else
- }
- else{
- op.table.find('i.' + icon).parent().addClass(op.selectedClass);
- }
- };
- Iconpicker.prototype.totalPages = function () {
- return Math.ceil(this.totalIcons() / this.totalIconsPerPage());
- };
- Iconpicker.prototype.totalIcons = function () {
- return this.options.icons.length;
- };
- Iconpicker.prototype.totalIconsPerPage = function () {
- if(this.options.rows === 0){
- return this.options.icons.length;
- }
- else{
- return this.options.cols * this.options.rows;
- }
- };
- Iconpicker.prototype.updateArrows = function (page) {
- var op = this.options;
- var total_pages = this.totalPages();
- if (page === 1) {
- op.table.find('.btn-previous').addClass('disabled');
- }
- else {
- op.table.find('.btn-previous').removeClass('disabled');
- }
- if (page === total_pages || total_pages === 0) {
- op.table.find('.btn-next').addClass('disabled');
- }
- else {
- op.table.find('.btn-next').removeClass('disabled');
- }
- };
- Iconpicker.prototype.updateIcons = function (page) {
- var op = this.options;
- var tbody = op.table.find('tbody').empty();
- var offset = (page - 1) * this.totalIconsPerPage();
- var length = op.rows;
- if(op.rows === 0){
- length = op.icons.length;
- }
- for (var i = 0; i < length; i++) {
- var tr = $('<tr></tr>');
- for (var j = 0; j < op.cols; j++) {
- var pos = offset + (i * op.cols) + j;
- var btn = $('<button class="btn ' + op.unselectedClass + ' btn-icon"></button>').hide();
- if (pos < op.icons.length) {
- var v = op.iconClassFix + op.icons[pos];
- btn.val(v).attr('title', v).append('<i class="' + op.iconClass + ' ' + v + '"></i>').show();
- if (op.icon === v) {
- btn.addClass(op.selectedClass).addClass('btn-icon-selected');
- }
- }
- tr.append($('<td></td>').append(btn));
- }
- tbody.append(tr);
- }
- };
- Iconpicker.prototype.updateIconsCount = function () {
- var op = this.options;
- if(op.footer === true){
- var icons_count = [
- '<tr>',
- ' <td colspan="' + op.cols + '" class="text-center">',
- ' <span class="icons-count"></span>',
- ' </td>',
- '</tr>'
- ];
- op.table.find('tfoot').empty().append(icons_count.join(''));
- }
- };
- Iconpicker.prototype.updateLabels = function (page) {
- var op = this.options;
- var total_icons = this.totalIcons();
- var total_pages = this.totalPages();
- op.table.find('.page-count').html(op.labelHeader.replace('{0}', (total_pages === 0 ) ? 0 : page).replace('{1}', total_pages));
- var offset = (page - 1) * this.totalIconsPerPage();
- var total = page * this.totalIconsPerPage();
- op.table.find('.icons-count').html(op.labelFooter.replace('{0}', total_icons ? offset + 1 : 0).replace('{1}', (total < total_icons) ? total: total_icons).replace('{2}', total_icons));
- this.updateArrows(page);
- };
- Iconpicker.prototype.updatePagesCount = function () {
- var op = this.options;
- if(op.header === true){
- var tr = $('<tr></tr>');
- for (var i = 0; i < op.cols; i++) {
- var td = $('<td class="text-center"></td>');
- if (i === 0 || i === op.cols - 1) {
- var arrow = [
- '<button class="btn btn-arrow ' + ((i === 0) ? 'btn-previous' : 'btn-next') + ' ' + op.arrowClass + '" value="' + ((i === 0) ? -1 : 1) + '">',
- '<span class="' + ((i === 0) ? op.arrowPrevIconClass : op.arrowNextIconClass) + '"></span>',
- '</button>'
- ];
- td.append(arrow.join(''));
- tr.append(td);
- }
- else if (tr.find('.page-count').length === 0) {
- td.attr('colspan', op.cols - 2).append('<span class="page-count"></span>');
- tr.append(td);
- }
- }
- op.table.find('thead').empty().append(tr);
- }
- };
- Iconpicker.prototype.updatePicker = function () {
- var op = this.options;
- if (op.cols < 4) {
- throw 'Iconpicker => The number of columns must be greater than or equal to 4. [option.cols = ' + op.cols + ']';
- }
- else if (op.rows < 0) {
- throw 'Iconpicker => The number of rows must be greater than or equal to 0. [option.rows = ' + op.rows + ']';
- }
- else {
- this.updatePagesCount();
- this.updateSearch();
- this.updateIconsCount();
- }
- };
- Iconpicker.prototype.updateSearch = function () {
- var op = this.options;
- var search = [
- '<tr>',
- ' <td colspan="' + op.cols + '">',
- ' <input type="text" class="form-control search-control" style="width: ' + op.cols * (($.fn.bsVersion() === '3.x') ? 39 : 41) + 'px;" placeholder="' + op.searchText + '">',
- ' </td>',
- '</tr>'
- ];
- search = $(search.join(''));
- if (op.search === true) {
- search.show();
- }
- else {
- search.hide();
- }
- op.table.find('thead').append(search);
- };
- // ICONPICKER PUBLIC METHODS
- // ==============================
- Iconpicker.prototype.setAlign = function (value) {
- this.$element.removeClass(this.options.align).addClass(value);
- this.options.align = value;
- };
- Iconpicker.prototype.setArrowClass = function (value) {
- this.options.arrowClass = this.removeAddClass('.btn-arrow', this.options.arrowClass, value);
- };
- Iconpicker.prototype.setArrowNextIconClass = function (value) {
- this.options.arrowNextIconClass = this.removeAddClass('.btn-next > span', this.options.arrowNextIconClass, value);
- };
- Iconpicker.prototype.setArrowPrevIconClass = function (value) {
- this.options.arrowPrevIconClass = this.removeAddClass('.btn-previous > span', this.options.arrowPrevIconClass, value);
- };
- Iconpicker.prototype.setCols = function (value) {
- this.options.cols = value;
- this.reset();
- };
- Iconpicker.prototype.setFooter = function (value) {
- var footer = this.options.table.find('tfoot');
- if (value === true) {
- footer.show();
- }
- else {
- footer.hide();
- }
- this.options.footer = value;
- };
- Iconpicker.prototype.setHeader = function (value) {
- var header = this.options.table.find('thead');
- if (value === true) {
- header.show();
- }
- else {
- header.hide();
- }
- this.options.header = value;
- };
- Iconpicker.prototype.setIcon = function (value) {
- this.select(value);
- };
- Iconpicker.prototype.setIconset = function (value) {
- var op = this.options;
- if ($.isPlainObject(value)) {
- Iconpicker.ICONSET._custom = $.extend(Iconpicker.ICONSET_EMPTY, value);
- op.iconset = '_custom';
- }
- else if (!Iconpicker.ICONSET.hasOwnProperty(value)) {
- op.iconset = Iconpicker.DEFAULTS.iconset;
- }
- else {
- op.iconset = value;
- }
- op = $.extend(op, Iconpicker.ICONSET[op.iconset]);
- this.reset();
- this.select(op.icon);
- };
- Iconpicker.prototype.setLabelHeader = function (value) {
- this.options.labelHeader = value;
- this.updateLabels(this.options.page);
- };
- Iconpicker.prototype.setLabelFooter = function (value) {
- this.options.labelFooter = value;
- this.updateLabels(this.options.page);
- };
- Iconpicker.prototype.setPlacement = function (value) {
- this.options.placement = value;
- };
- Iconpicker.prototype.setRows = function (value) {
- this.options.rows = value;
- this.reset();
- };
- Iconpicker.prototype.setSearch = function (value) {
- var search = this.options.table.find('.search-control');
- if (value === true) {
- search.show();
- }
- else {
- search.hide();
- }
- search.val('');
- this.changeList(1);
- this.options.search = value;
- };
- Iconpicker.prototype.setSearchText = function (value) {
- this.options.table.find('.search-control').attr('placeholder', value);
- this.options.searchText = value;
- };
- Iconpicker.prototype.setSelectedClass = function (value) {
- this.options.selectedClass = this.removeAddClass('.btn-icon-selected', this.options.selectedClass, value);
- };
- Iconpicker.prototype.setUnselectedClass = function (value) {
- this.options.unselectedClass = this.removeAddClass('.btn-icon', this.options.unselectedClass, value);
- };
- // ICONPICKER PLUGIN DEFINITION
- // ========================
- var old = $.fn.iconpicker;
- $.fn.iconpicker = function (option, params) {
- return this.each(function () {
- var $this = $(this);
- var data = $this.data('bs.iconpicker');
- var options = typeof option === 'object' && option;
- if (!data) {
- $this.data('bs.iconpicker', (data = new Iconpicker(this, options)));
- }
- if (typeof option === 'string') {
- if (typeof data[option] === 'undefined') {
- throw 'Iconpicker => The "' + option + '" method does not exists.';
- }
- else {
- data[option](params);
- }
- }
- else{
- var op = data.options;
- op = $.extend(op, {
- inline: false,
- page: 1,
- selected: -1,
- table: $('<table class="table-icons"><thead></thead><tbody></tbody><tfoot></tfoot></table>')
- });
- var name = (typeof $this.attr('name') !== 'undefined') ? 'name="' + $this.attr('name') + '"' : '';
- if($this.prop('tagName') === 'BUTTON'){
- $this.empty()
- .append('<i></i>')
- .append('<input type="hidden" ' + name + '></input>')
- .append('<span class="caret"></span>')
- .addClass('iconpicker ' + (($.fn.bsVersion() === '3.x') ? '' : 'dropdown-toggle'));
- data.setIconset(op.iconset);
- $this.on('click', function(e) {
- e.preventDefault();
- $this.popover({
- animation: false,
- trigger: 'manual',
- html: true,
- content: op.table,
- container: 'body',
- placement: op.placement
- }).on('inserted.bs.popover', function() {
- var el = $this.data('bs.popover');
- var tip = ($.fn.bsVersion() === '3.x') ? el.tip() : $(el.getTipElement())
- tip.addClass('iconpicker-popover');
- }).on('shown.bs.popover', function () {
- data.switchPage(op.icon);
- data.bindEvents();
- });
- //console.log($.fn.bsVersion());
- $this.popover('show');
- });
- }
- else{
- op.inline = true;
- data.setIconset(op.iconset);
- $this.empty()
- .append('<input type="hidden" ' + name + '></input>')
- .append(op.table)
- .addClass('iconpicker')
- .addClass(op.align);
- data.switchPage(op.icon);
- data.bindEvents();
- }
- }
- });
- };
- $.fn.iconpicker.Constructor = Iconpicker;
- // ICONPICKER NO CONFLICT
- // ==================
- $.fn.iconpicker.noConflict = function () {
- $.fn.iconpicker = old;
- return this;
- };
- $.fn.bsVersion = function() {
- return $.fn.popover.Constructor.VERSION.substr(0,2) + 'x';
- };
- // ICONPICKER DATA-API
- // ===============
- $(document).on('click', 'body', function (e) {
- $('.iconpicker').each(function () {
- //the 'is' for buttons that trigger popups
- //the 'has' for icons within a button that triggers a popup
- if (!$(this).is(e.target) && $(this).has(e.target).length === 0 && $('.popover').has(e.target).length === 0) {
- $(this).popover(($.fn.bsVersion() === '3.x') ? 'destroy' : 'dispose');
- }
- });
- });
- $('button[role="iconpicker"],div[role="iconpicker"]').iconpicker();
- })(jQuery);
|