From b2a23401362539a9fd55ef2f940134e141d7b54f Mon Sep 17 00:00:00 2001 From: victor-valencia Date: Mon, 20 Jan 2014 17:57:31 -0600 Subject: [PATCH] I added an example of a practical use (Button Builder) --- .../css/bootstrap-iconpicker.css | 4 + .../css/bootstrap-iconpicker.min.css | 5 +- .../js/bootstrap-iconpicker.js | 76 +++++----- .../js/bootstrap-iconpicker.min.js | 2 +- index.html | 143 ++++++++++++++++++ 5 files changed, 192 insertions(+), 38 deletions(-) diff --git a/bootstrap-iconpicker/css/bootstrap-iconpicker.css b/bootstrap-iconpicker/css/bootstrap-iconpicker.css index fff7de3..ef0ec8a 100644 --- a/bootstrap-iconpicker/css/bootstrap-iconpicker.css +++ b/bootstrap-iconpicker/css/bootstrap-iconpicker.css @@ -21,4 +21,8 @@ min-width: 35px; text-align: center; padding: 0; +} + +.popover { + max-width: inherit !important; } \ No newline at end of file diff --git a/bootstrap-iconpicker/css/bootstrap-iconpicker.min.css b/bootstrap-iconpicker/css/bootstrap-iconpicker.min.css index 862aebc..70f04b2 100644 --- a/bootstrap-iconpicker/css/bootstrap-iconpicker.min.css +++ b/bootstrap-iconpicker/css/bootstrap-iconpicker.min.css @@ -6,6 +6,5 @@ * http://www.apache.org/licenses/LICENSE-2.0 * * Designed and built with all the love in the world by @recktoner. - */.iconpicker .caret{margin-left:10px !important} -.iconpicker{min-width:60px} -.table-icons .btn{min-height:30px;min-width:35px;text-align:center;padding:0} \ No newline at end of file + */ +.iconpicker .caret{margin-left:10px!important}.iconpicker{min-width:60px}.table-icons .btn{min-height:30px;min-width:35px;text-align:center;padding:0}.popover{max-width:inherit} \ No newline at end of file diff --git a/bootstrap-iconpicker/js/bootstrap-iconpicker.js b/bootstrap-iconpicker/js/bootstrap-iconpicker.js index 09fb569..a1feb22 100644 --- a/bootstrap-iconpicker/js/bootstrap-iconpicker.js +++ b/bootstrap-iconpicker/js/bootstrap-iconpicker.js @@ -777,48 +777,56 @@ this.bindEvents(); } + Iconpicker.prototype.setIcon = function (icon) { + this.select(icon); + } + // ICONPICKER PLUGIN DEFINITION // ======================== var old = $.fn.iconpicker; - $.fn.iconpicker = function (option) { + $.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))); - var op = data.options; - var ic = (op.iconset == 'fontawesome') ? 'fa' : 'glyphicon'; - op = $.extend(op, { - icons: Iconpicker.ICONSET[ic], - iconClass: ic, - iconClassFix: ic + '-', - page: 1, - selected: -1, - table: $('
') - }); - var name = ( typeof $this.attr('name') != 'undefined' ) ? 'name="' + $this.attr('name') + '"' : ''; - $this.empty() - .append('') - .append('') - .append(''); - $this.addClass('iconpicker'); - data.createButtonBar(); - data.changeList(1); - $this.on('click', function(){ - $this.popover({ - animation: false, - trigger: 'manual', - html: true, - content: data.options.table, - container: 'body', - placement: data.options.placement - }).on('shown.bs.popover', function () { - data.switchPage(op.icon); - data.bindEvents(); - }); - $this.popover('show'); - }); - data.select(op.icon); + if (typeof option == 'string') data[option](params) + else{ + var op = data.options; + var ic = (op.iconset == 'fontawesome') ? 'fa' : 'glyphicon'; + op = $.extend(op, { + icons: Iconpicker.ICONSET[ic], + iconClass: ic, + iconClassFix: ic + '-', + page: 1, + selected: -1, + table: $('
') + }); + var name = ( typeof $this.attr('name') != 'undefined' ) ? 'name="' + $this.attr('name') + '"' : ''; + $this.empty() + .append('') + .append('') + .append(''); + $this.addClass('iconpicker'); + data.createButtonBar(); + data.changeList(1); + $this.on('click', function(e){ + e.preventDefault(); + $this.popover({ + animation: false, + trigger: 'manual', + html: true, + content: data.options.table, + container: 'body', + placement: data.options.placement + }).on('shown.bs.popover', function () { + data.switchPage(op.icon); + data.bindEvents(); + }); + $this.popover('show'); + }); + data.select(op.icon); + } }); }; diff --git a/bootstrap-iconpicker/js/bootstrap-iconpicker.min.js b/bootstrap-iconpicker/js/bootstrap-iconpicker.min.js index ec41411..1639fb4 100644 --- a/bootstrap-iconpicker/js/bootstrap-iconpicker.min.js +++ b/bootstrap-iconpicker/js/bootstrap-iconpicker.min.js @@ -4,4 +4,4 @@ * Copyright 2013 Victor Valencia Rico. * http://www.apache.org/licenses/LICENSE-2.0 */ -+function($){var Iconpicker=function(element,options){this.$element=$(element);this.options=$.extend({},Iconpicker.DEFAULTS,this.$element.data());this.options=$.extend({},this.options,options)};Iconpicker.ICONSET={glyphicon:["adjust","align-center","align-justify","align-left","align-right","arrow-down","arrow-left","arrow-right","arrow-up","asterisk","backward","ban-circle","barcode","bell","bold","book","bookmark","briefcase","bullhorn","calendar","camera","certificate","check","chevron-down","chevron-left","chevron-right","chevron-up","circle-arrow-down","circle-arrow-left","circle-arrow-right","circle-arrow-up","cloud","cloud-download","cloud-upload","cog","collapse-down","collapse-up","comment","compressed","copyright-mark","credit-card","cutlery","dashboard","download","download-alt","earphone","edit","eject","envelope","euro","exclamation-sign","expand","export","eye-close","eye-open","facetime-video","fast-backward","fast-forward","file","film","filter","fire","flag","flash","floppy-disk","floppy-open","floppy-remove","floppy-save","floppy-saved","folder-close","folder-open","font","forward","fullscreen","gbp","gift","glass","globe","hand-down","hand-left","hand-right","hand-up","hd-video","hdd","header","headphones","heart","heart-empty","home","import","inbox","indent-left","indent-right","info-sign","italic","leaf","link","list","list-alt","lock","log-in","log-out","magnet","map-marker","minus","minus-sign","move","music","new-window","off","ok","ok-circle","ok-sign","open","paperclip","pause","pencil","phone","phone-alt","picture","plane","play","play-circle","plus","plus-sign","print","pushpin","qrcode","question-sign","random","record","refresh","registration-mark","remove","remove-circle","remove-sign","repeat","resize-full","resize-horizontal","resize-small","resize-vertical","retweet","road","save","saved","screenshot","sd-video","search","send","share","share-alt","shopping-cart","signal","sort","sort-by-alphabet","sort-by-alphabet-alt","sort-by-attributes","sort-by-attributes-alt","sort-by-order","sort-by-order-alt","sound-5-1","sound-6-1","sound-7-1","sound-dolby","sound-stereo","star","star-empty","stats","step-backward","step-forward","stop","subtitles","tag","tags","tasks","text-height","text-width","th","th-large","th-list","thumbs-down","thumbs-up","time","tint","tower","transfer","trash","tree-conifer","tree-deciduous","unchecked","upload","usd","user","volume-down","volume-off","volume-up","warning-sign","wrench","zoom-in","zoom-out"],fa:["adjust","anchor","archive","asterisk","ban","bar-chart-o","barcode","beer","bell","bell-o","bolt","book","bookmark","bookmark-o","briefcase","bug","bullhorn","bullseye","calendar","calendar-o","camera","camera-retro","caret-square-o-down","caret-square-o-left","caret-square-o-right","caret-square-o-up","certificate","check","check-circle","check-circle-o","check-square","check-square-o","circle","circle-o","clock-o","cloud","cloud-download","cloud-upload","code","code-fork","coffee","cog","cogs","comment","comment-o","comments","comments-o","compass","credit-card","crop","crosshairs","cutlery","dashboard","desktop","dot-circle-o","download","edit","envelope","envelope-o","eraser","exchange","exclamation","exclamation-circle","exclamation-triangle","external-link","external-link-square","eye","eye-slash","female","fighter-jet","film","filter","fire","fire-extinguisher","flag","flag-checkered","flag-o","flash","flask","folder","folder-o","folder-open","folder-open-o","frown-o","gamepad","gavel","gear","gears","gift","glass","globe","group","headphones","heart","heart-o","home","inbox","info","info-circle","key","keyboard-o","laptop","leaf","legal","lemon-o","level-down","level-up","lightbulb-o","location-arrow","lock","magic","magnet","mail-forward","mail-reply","mail-reply-all","male","map-marker","meh-o","microphone","microphone-slash","minus","minus-circle","minus-square","minus-square-o","mobile","mobile-phone","money","moon-o","music","pencil","pencil-square","pencil-square-o","phone","phone-square","picture-o","plane","plus","plus-circle","plus-square","power-off","print","puzzle-piece","qrcode","question","question-circle","quote-left","quote-right","random","refresh","reply","reply-all","retweet","road","rocket","rss","rss-square","search","search-minus","search-plus","share","share-square","share-square-o","shield","shopping-cart","sign-in","sign-out","signal","sitemap","smile-o","sort","sort-alpha-asc","sort-alpha-desc","sort-amount-asc","sort-amount-desc","sort-asc","sort-desc","sort-down","sort-numeric-asc","sort-numeric-desc","sort-up","spinner","square","square-o","star","star-half","star-half-empty","star-half-full","star-half-o","star-o","subscript","suitcase","sun-o","superscript","tablet","tachometer","tag","tags","tasks","terminal","thumb-tack","thumbs-down","thumbs-o-down","thumbs-o-up","thumbs-up","ticket","times","times-circle","times-circle-o","tint","toggle-down","toggle-left","toggle-right","toggle-up","trash-o","trophy","truck","umbrella","unlock","unsorted","upload","user","video-camera","volume-down","volume-off","volume-up","warning","wheelchair","wrench","check-square","check-square-o","circle","circle-o","dot-circle-o","minus-square","minus-square-o","plus-square","square","square-o","bitcoin","btc","cny","dollar","eur","euro","gbp","inr","jpy","krw","money","rmb","rouble","rub","ruble","rupee","try","turkish-lira","usd","won","yen","align-center","align-justify","align-left","align-right","bold","chain","chain-broken","clipboard","columns","copy","cut","dedent","eraser","file","file-o","file-text","file-text-o","files-o","floppy-o","font","indent","italic","link","list","list-alt","list-ol","list-ul","outdent","paperclip","paste","repeat","rotate-left","rotate-right","save","scissors","strikethrough","table","text-height","text-width","th","th-large","th-list","underline","undo","unlink","angle-double-down","angle-double-left","angle-double-right","angle-double-up","angle-down","angle-left","angle-right","angle-up","arrow-circle-down","arrow-circle-left","arrow-circle-o-down","arrow-circle-o-left","arrow-circle-o-right","arrow-circle-o-up","arrow-circle-right","arrow-circle-up","arrow-down","arrow-left","arrow-right","arrow-up","caret-down","caret-left","caret-right","caret-square-o-down","caret-square-o-left","caret-square-o-right","caret-square-o-up","caret-up","chevron-circle-down","chevron-circle-left","chevron-circle-right","chevron-circle-up","chevron-down","chevron-left","chevron-right","chevron-up","hand-o-down","hand-o-left","hand-o-right","hand-o-up","long-arrow-down","long-arrow-left","long-arrow-right","long-arrow-up","toggle-down","toggle-left","toggle-right","toggle-up","backward","eject","fast-backward","fast-forward","forward","pause","play","play-circle","play-circle-o","step-backward","step-forward","stop","youtube-play","adn","android","apple","bitbucket","bitbucket-square","bitcoin","btc","css3","dribbble","dropbox","facebook","facebook-square","flickr","foursquare","github","github-alt","github-square","gittip","google-plus","google-plus-square","html5","instagram","linkedin","linkedin-square","linux","maxcdn","pagelines","pinterest","pinterest-square","renren","skype","stack-exchange","stack-overflow","trello","tumblr","tumblr-square","twitter","twitter-square","vimeo-square","vk","weibo","windows","xing","xing-square","youtube","youtube-play","youtube-square","ambulance","h-square","medkit","plus-square","stethoscope","user-md","wheelchair"]};Iconpicker.DEFAULTS={iconset:"glyphicon",icon:"",rows:4,cols:4,placement:"right"};Iconpicker.prototype.createButtonBar=function(){var op=this.options;var tr=$("");for(var i=0;i');var td=$('');if(i==0||i==op.cols-1){btn.val((i==0)?-1:1);btn.addClass((i==0)?"btn-previous":"btn-next");btn.find("span").addClass((i==0)?"glyphicon-arrow-left":"glyphicon-arrow-right");td.append(btn);tr.append(td)}else{if(tr.find(".page-count").length==0){td.attr("colspan",op.cols-2).append('');tr.append(td)}}}op.table.find("thead").append(tr)};Iconpicker.prototype.updateButtonBar=function(page){var op=this.options;var total_pages=Math.ceil(op.icons.length/(op.cols*op.rows));op.table.find(".page-count").html(page+" / "+total_pages);var btn_prev=op.table.find(".btn-previous");var btn_next=op.table.find(".btn-next");(page==1)?btn_prev.addClass("disabled"):btn_prev.removeClass("disabled");(page==total_pages)?btn_next.addClass("disabled"):btn_next.removeClass("disabled")};Iconpicker.prototype.bindEvents=function(){var op=this.options;var el=this;op.table.find(".btn-previous, .btn-next").off("click").on("click",function(){var inc=parseInt($(this).val());el.changeList(op.page+inc)});op.table.find(".btn-icon").off("click").on("click",function(){el.select($(this).val());el.$element.popover("destroy")})};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;el.find("input").val(icon);el.find("i").attr("class","").addClass(op.iconClass).addClass(icon);el.trigger({type:"change",icon:icon});op.table.find("button.btn-warning").removeClass("btn-warning")}};Iconpicker.prototype.switchPage=function(icon){var op=this.options;op.selected=$.inArray(icon.replace(op.iconClassFix,""),op.icons);if(icon!=""&&op.selected>=0){var page=Math.ceil((op.selected+1)/(op.cols*op.rows));this.changeList(page)}op.table.find("."+icon).parent().addClass("btn-warning")};Iconpicker.prototype.changeList=function(page){var op=this.options;this.updateButtonBar(page);var tbody=op.table.find("tbody").empty();var offset=(page-1)*op.rows*op.cols;for(var i=0;i");for(var j=0;j').hide();if(pos')}var td=$("").append(btn);tr.append(td)}tbody.append(tr)}op.page=page;this.bindEvents()};var old=$.fn.iconpicker;$.fn.iconpicker=function(option){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)))}var op=data.options;var ic=(op.iconset=="fontawesome")?"fa":"glyphicon";op=$.extend(op,{icons:Iconpicker.ICONSET[ic],iconClass:ic,iconClassFix:ic+"-",page:1,selected:-1,table:$('
')});var name=(typeof $this.attr("name")!="undefined")?'name="'+$this.attr("name")+'"':"";$this.empty().append("").append('").append('');$this.addClass("iconpicker");data.createButtonBar();data.changeList(1);$this.on("click",function(){$this.popover({animation:false,trigger:"manual",html:true,content:data.options.table,container:"body",placement:data.options.placement}).on("shown.bs.popover",function(){data.switchPage(op.icon);data.bindEvents()});$this.popover("show")});data.select(op.icon)})};$.fn.iconpicker.Constructor=Iconpicker;$.fn.iconpicker.noConflict=function(){$.fn.iconpicker=old;return this};$("body").on("click",function(e){$(".iconpicker").each(function(){if(!$(this).is(e.target)&&$(this).has(e.target).length===0&&$(".popover").has(e.target).length===0){$(this).popover("destroy")}})});$('button[role="iconpicker"]').iconpicker()}(window.jQuery); \ No newline at end of file ++function(e){"use strict";var t=function(o,r){this.$element=e(o),this.options=e.extend({},t.DEFAULTS,this.$element.data()),this.options=e.extend({},this.options,r)};t.ICONSET={glyphicon:["adjust","align-center","align-justify","align-left","align-right","arrow-down","arrow-left","arrow-right","arrow-up","asterisk","backward","ban-circle","barcode","bell","bold","book","bookmark","briefcase","bullhorn","calendar","camera","certificate","check","chevron-down","chevron-left","chevron-right","chevron-up","circle-arrow-down","circle-arrow-left","circle-arrow-right","circle-arrow-up","cloud","cloud-download","cloud-upload","cog","collapse-down","collapse-up","comment","compressed","copyright-mark","credit-card","cutlery","dashboard","download","download-alt","earphone","edit","eject","envelope","euro","exclamation-sign","expand","export","eye-close","eye-open","facetime-video","fast-backward","fast-forward","file","film","filter","fire","flag","flash","floppy-disk","floppy-open","floppy-remove","floppy-save","floppy-saved","folder-close","folder-open","font","forward","fullscreen","gbp","gift","glass","globe","hand-down","hand-left","hand-right","hand-up","hd-video","hdd","header","headphones","heart","heart-empty","home","import","inbox","indent-left","indent-right","info-sign","italic","leaf","link","list","list-alt","lock","log-in","log-out","magnet","map-marker","minus","minus-sign","move","music","new-window","off","ok","ok-circle","ok-sign","open","paperclip","pause","pencil","phone","phone-alt","picture","plane","play","play-circle","plus","plus-sign","print","pushpin","qrcode","question-sign","random","record","refresh","registration-mark","remove","remove-circle","remove-sign","repeat","resize-full","resize-horizontal","resize-small","resize-vertical","retweet","road","save","saved","screenshot","sd-video","search","send","share","share-alt","shopping-cart","signal","sort","sort-by-alphabet","sort-by-alphabet-alt","sort-by-attributes","sort-by-attributes-alt","sort-by-order","sort-by-order-alt","sound-5-1","sound-6-1","sound-7-1","sound-dolby","sound-stereo","star","star-empty","stats","step-backward","step-forward","stop","subtitles","tag","tags","tasks","text-height","text-width","th","th-large","th-list","thumbs-down","thumbs-up","time","tint","tower","transfer","trash","tree-conifer","tree-deciduous","unchecked","upload","usd","user","volume-down","volume-off","volume-up","warning-sign","wrench","zoom-in","zoom-out"],fa:["adjust","anchor","archive","asterisk","ban","bar-chart-o","barcode","beer","bell","bell-o","bolt","book","bookmark","bookmark-o","briefcase","bug","bullhorn","bullseye","calendar","calendar-o","camera","camera-retro","caret-square-o-down","caret-square-o-left","caret-square-o-right","caret-square-o-up","certificate","check","check-circle","check-circle-o","check-square","check-square-o","circle","circle-o","clock-o","cloud","cloud-download","cloud-upload","code","code-fork","coffee","cog","cogs","comment","comment-o","comments","comments-o","compass","credit-card","crop","crosshairs","cutlery","dashboard","desktop","dot-circle-o","download","edit","envelope","envelope-o","eraser","exchange","exclamation","exclamation-circle","exclamation-triangle","external-link","external-link-square","eye","eye-slash","female","fighter-jet","film","filter","fire","fire-extinguisher","flag","flag-checkered","flag-o","flash","flask","folder","folder-o","folder-open","folder-open-o","frown-o","gamepad","gavel","gear","gears","gift","glass","globe","group","headphones","heart","heart-o","home","inbox","info","info-circle","key","keyboard-o","laptop","leaf","legal","lemon-o","level-down","level-up","lightbulb-o","location-arrow","lock","magic","magnet","mail-forward","mail-reply","mail-reply-all","male","map-marker","meh-o","microphone","microphone-slash","minus","minus-circle","minus-square","minus-square-o","mobile","mobile-phone","money","moon-o","music","pencil","pencil-square","pencil-square-o","phone","phone-square","picture-o","plane","plus","plus-circle","plus-square","power-off","print","puzzle-piece","qrcode","question","question-circle","quote-left","quote-right","random","refresh","reply","reply-all","retweet","road","rocket","rss","rss-square","search","search-minus","search-plus","share","share-square","share-square-o","shield","shopping-cart","sign-in","sign-out","signal","sitemap","smile-o","sort","sort-alpha-asc","sort-alpha-desc","sort-amount-asc","sort-amount-desc","sort-asc","sort-desc","sort-down","sort-numeric-asc","sort-numeric-desc","sort-up","spinner","square","square-o","star","star-half","star-half-empty","star-half-full","star-half-o","star-o","subscript","suitcase","sun-o","superscript","tablet","tachometer","tag","tags","tasks","terminal","thumb-tack","thumbs-down","thumbs-o-down","thumbs-o-up","thumbs-up","ticket","times","times-circle","times-circle-o","tint","toggle-down","toggle-left","toggle-right","toggle-up","trash-o","trophy","truck","umbrella","unlock","unsorted","upload","user","video-camera","volume-down","volume-off","volume-up","warning","wheelchair","wrench","check-square","check-square-o","circle","circle-o","dot-circle-o","minus-square","minus-square-o","plus-square","square","square-o","bitcoin","btc","cny","dollar","eur","euro","gbp","inr","jpy","krw","money","rmb","rouble","rub","ruble","rupee","try","turkish-lira","usd","won","yen","align-center","align-justify","align-left","align-right","bold","chain","chain-broken","clipboard","columns","copy","cut","dedent","eraser","file","file-o","file-text","file-text-o","files-o","floppy-o","font","indent","italic","link","list","list-alt","list-ol","list-ul","outdent","paperclip","paste","repeat","rotate-left","rotate-right","save","scissors","strikethrough","table","text-height","text-width","th","th-large","th-list","underline","undo","unlink","angle-double-down","angle-double-left","angle-double-right","angle-double-up","angle-down","angle-left","angle-right","angle-up","arrow-circle-down","arrow-circle-left","arrow-circle-o-down","arrow-circle-o-left","arrow-circle-o-right","arrow-circle-o-up","arrow-circle-right","arrow-circle-up","arrow-down","arrow-left","arrow-right","arrow-up","caret-down","caret-left","caret-right","caret-square-o-down","caret-square-o-left","caret-square-o-right","caret-square-o-up","caret-up","chevron-circle-down","chevron-circle-left","chevron-circle-right","chevron-circle-up","chevron-down","chevron-left","chevron-right","chevron-up","hand-o-down","hand-o-left","hand-o-right","hand-o-up","long-arrow-down","long-arrow-left","long-arrow-right","long-arrow-up","toggle-down","toggle-left","toggle-right","toggle-up","backward","eject","fast-backward","fast-forward","forward","pause","play","play-circle","play-circle-o","step-backward","step-forward","stop","youtube-play","adn","android","apple","bitbucket","bitbucket-square","bitcoin","btc","css3","dribbble","dropbox","facebook","facebook-square","flickr","foursquare","github","github-alt","github-square","gittip","google-plus","google-plus-square","html5","instagram","linkedin","linkedin-square","linux","maxcdn","pagelines","pinterest","pinterest-square","renren","skype","stack-exchange","stack-overflow","trello","tumblr","tumblr-square","twitter","twitter-square","vimeo-square","vk","weibo","windows","xing","xing-square","youtube","youtube-play","youtube-square","ambulance","h-square","medkit","plus-square","stethoscope","user-md","wheelchair"]},t.DEFAULTS={iconset:"glyphicon",icon:"",rows:4,cols:4,placement:"right"},t.prototype.createButtonBar=function(){for(var t=this.options,o=e(""),r=0;r'),n=e('');0==r||r==t.cols-1?(a.val(0==r?-1:1),a.addClass(0==r?"btn-previous":"btn-next"),a.find("span").addClass(0==r?"glyphicon-arrow-left":"glyphicon-arrow-right"),n.append(a),o.append(n)):0==o.find(".page-count").length&&(n.attr("colspan",t.cols-2).append(''),o.append(n))}t.table.find("thead").append(o)},t.prototype.updateButtonBar=function(e){var t=this.options,o=Math.ceil(t.icons.length/(t.cols*t.rows));t.table.find(".page-count").html(e+" / "+o);var r=t.table.find(".btn-previous"),a=t.table.find(".btn-next");1==e?r.addClass("disabled"):r.removeClass("disabled"),e==o?a.addClass("disabled"):a.removeClass("disabled")},t.prototype.bindEvents=function(){var t=this.options,o=this;t.table.find(".btn-previous, .btn-next").off("click").on("click",function(){var r=parseInt(e(this).val());o.changeList(t.page+r)}),t.table.find(".btn-icon").off("click").on("click",function(){o.select(e(this).val()),o.$element.popover("destroy")})},t.prototype.select=function(t){var o=this.options,r=this.$element;o.selected=e.inArray(t.replace(o.iconClassFix,""),o.icons),-1==o.selected&&(o.selected=0,t=o.iconClassFix+o.icons[o.selected]),""!=t&&o.selected>=0&&(o.icon=t,r.find("input").val(t),r.find("i").attr("class","").addClass(o.iconClass).addClass(t),r.trigger({type:"change",icon:t}),o.table.find("button.btn-warning").removeClass("btn-warning"))},t.prototype.switchPage=function(t){var o=this.options;if(o.selected=e.inArray(t.replace(o.iconClassFix,""),o.icons),""!=t&&o.selected>=0){var r=Math.ceil((o.selected+1)/(o.cols*o.rows));this.changeList(r)}o.table.find("."+t).parent().addClass("btn-warning")},t.prototype.changeList=function(t){var o=this.options;this.updateButtonBar(t);for(var r=o.table.find("tbody").empty(),a=(t-1)*o.rows*o.cols,n=0;n"),s=0;s').hide();if(l')}var d=e("").append(c);i.append(d)}r.append(i)}o.page=t,this.bindEvents()},t.prototype.setIcon=function(e){this.select(e)};var o=e.fn.iconpicker;e.fn.iconpicker=function(o,r){return this.each(function(){var a=e(this),n=a.data("bs.iconpicker"),i="object"==typeof o&&o;if(n||a.data("bs.iconpicker",n=new t(this,i)),"string"==typeof o)n[o](r);else{var s=n.options,l="fontawesome"==s.iconset?"fa":"glyphicon";s=e.extend(s,{icons:t.ICONSET[l],iconClass:l,iconClassFix:l+"-",page:1,selected:-1,table:e('
')});var c="undefined"!=typeof a.attr("name")?'name="'+a.attr("name")+'"':"";a.empty().append("").append('").append(''),a.addClass("iconpicker"),n.createButtonBar(),n.changeList(1),a.on("click",function(e){e.preventDefault(),a.popover({animation:!1,trigger:"manual",html:!0,content:n.options.table,container:"body",placement:n.options.placement}).on("shown.bs.popover",function(){n.switchPage(s.icon),n.bindEvents()}),a.popover("show")}),n.select(s.icon)}})},e.fn.iconpicker.Constructor=t,e.fn.iconpicker.noConflict=function(){return e.fn.iconpicker=o,this},e("body").on("click",function(t){e(".iconpicker").each(function(){e(this).is(t.target)||0!==e(this).has(t.target).length||0!==e(".popover").has(t.target).length||e(this).popover("destroy")})}),e('button[role="iconpicker"]').iconpicker()}(window.jQuery); \ No newline at end of file diff --git a/index.html b/index.html index 60923bb..1d651a2 100644 --- a/index.html +++ b/index.html @@ -232,10 +232,96 @@

Javascript

$('#convert').on('change', function(e) { console.log(e.icon); }); + +$('#convert').iconpicker('setIcon', 'fa-globe'); +

See in action (Bottom Builder)

+
+
+
+
+ Button text +
+
+
+
+
+ +
+ +
+
+
+ +
+
+ + + + + + +
+
+
+
+ +
+
+

+ + + + +

+

+ Full width button +

+
+
+
+
+ +
+ +
+
+
+ +
+
+ + +
+
+
+
+
+
+
+
+ 
+                    
+
+
+
+

Leave your comments or fixes here

@@ -268,6 +354,63 @@

Leave your comments or fixes here

+ + +