Skip to content
This repository has been archived by the owner on Jun 5, 2020. It is now read-only.

Commit

Permalink
feat: adds support For Font Awesome 5 (#63)
Browse files Browse the repository at this point in the history 
* Adds support for Font Awesome 5, replacing legacy support. Updates Documentation. Updates Demo (index.html)

* The icon list is now generated on the Grunt build pipeline, reading the icons directly from FontAwesome metadata files
  • Loading branch information
@varunsharma27 @itsjavi
varunsharma27 authored and itsjavi committed Mar 19, 2018
1 parent 9107501 commit 13d6909
Show file tree
Hide file tree
Showing 8 changed files with 99 additions and 131 deletions.
4 changes: 3 additions & 1 deletion .gitignore
View file
Expand Up @@ -10,4 +10,6 @@ Thumbs.db
/nbproject/
static_server.js
*.php
.idea/
.idea/
prod/
.icons.temp
78 changes: 73 additions & 5 deletions Gruntfile.js
View file
@@ -1,6 +1,63 @@
'use strict';
module.exports = function(grunt) {
const parsedIconPicker = 'prod/src/js/iconpicker.js';
const tempIconsFile = '.icons.temp';
grunt.initConfig({
download: {
somefile: {
src: ['https://raw.githubusercontent.com/FortAwesome/Font-Awesome/5.0.8/advanced-options/metadata/icons.yml'],
dest: tempIconsFile
},
},
yaml: {
getIcons: {
options: {
space: 2,
disableDest: true,
middleware: function(response, sourceJSON, src, dest) {
let targetJSON = {
icons: []
};
sourceJSON = JSON.parse(sourceJSON);
Object.keys(sourceJSON).forEach(function(key) {
let ele = sourceJSON[key];
let icon = 'fa-' + key;
ele.styles.forEach(function(style) {
style = style.toLowerCase();
if (style.startsWith('brand')) {
targetJSON.icons.push('fab ' + icon);
} else if (style.startsWith('solid')) {
targetJSON.icons.push('fas ' + icon);
} else if (style.startsWith('regular')) {
targetJSON.icons.push('far ' + icon);
} else if (style.startsWith('light')) {
targetJSON.icons.push('fal ' + icon);
}
});
});
grunt.file.write(dest, JSON.stringify(targetJSON));
}
},
files: [{
expand: false,
src: [tempIconsFile],
dest: tempIconsFile
}]
},
},
'string-replace': {
dist: {
files: {
'prod/': ['src/js/iconpicker.js'],
},
options: {
replacements: [{
pattern: '//###REPLACE-WITH-FONT-AWESOME-5-FONTS###',
replacement: "<%= grunt.file.read('" + tempIconsFile + "') %>"
}]
}
}
},
less: {
dist: {
options: {
Expand All @@ -26,7 +83,7 @@ module.exports = function(grunt) {
}
},
jsbeautifier: {
files: ['Gruntfile.js', 'src/js/*.js']
files: ['Gruntfile.js', 'src/js/*.js', parsedIconPicker]
},
uglify: {
distMin: {
Expand All @@ -37,7 +94,7 @@ module.exports = function(grunt) {
files: {
'dist/js/fontawesome-iconpicker.min.js': [
'src/js/jquery.ui.pos.js',
'src/js/iconpicker.js'
parsedIconPicker
]
}
},
Expand All @@ -49,7 +106,7 @@ module.exports = function(grunt) {
files: {
'dist/js/fontawesome-iconpicker.js': [
'src/js/jquery.ui.pos.js',
'src/js/iconpicker.js'
parsedIconPicker
]
}
}
Expand All @@ -72,6 +129,10 @@ module.exports = function(grunt) {
dist: [
'dist/css',
'dist/js/*.js'
],
temp: [
tempIconsFile,
'prod/'
]
}
});
Expand All @@ -82,13 +143,20 @@ module.exports = function(grunt) {
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-less');
grunt.loadNpmTasks('grunt-jsbeautifier');
grunt.loadNpmTasks('grunt-yaml');
grunt.loadNpmTasks('grunt-http-download');
grunt.loadNpmTasks('grunt-string-replace');

// Register tasks
grunt.registerTask('default', [
'clean',
'download',
'yaml',
'string-replace',
'clean:dist',
'less',
'jsbeautifier',
'uglify'
'uglify',
'clean:temp'
]);
grunt.registerTask('dev', [
'watch'
Expand Down
2 changes: 1 addition & 1 deletion README.md
View file
Expand Up @@ -4,7 +4,7 @@ fontawesome-iconpicker
Font Awesome Icon Picker is a fully customizable plugin for Twitter Bootstrap,
with a powerful base API, based on [bootstrap-popover-picker](https://farbelous.github.io/bootstrap-popover-picker/)

You can use Font Awesome or another font icon set of your choice (icon list is totally customizable).
You can use Font Awesome 5 or another font icon set of your choice (icon list is totally customizable).

[View demos](https://farbelous.github.io/fontawesome-iconpicker/)

Expand Down
6 changes: 4 additions & 2 deletions dist/js/fontawesome-iconpicker.js
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion dist/js/fontawesome-iconpicker.min.js
View file

Large diffs are not rendered by default.

15 changes: 9 additions & 6 deletions index.html
View file
Expand Up @@ -4,7 +4,8 @@
<meta charset="utf-8">
<title>Font Awesome Icon Picker plugin for Bootstrap</title>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<!-- <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"> -->
<link href="https://use.fontawesome.com/releases/v5.0.8/css/all.css" rel="stylesheet">
<link href="dist/css/fontawesome-iconpicker.min.css" rel="stylesheet">
<!-- Le HTML5 shim, for IE6-8 support of HTML elements -->
<!--[if lt IE 9]>
Expand Down Expand Up @@ -93,19 +94,19 @@ <h2 class="panel-title">Demos</h2>
<div class="col-md-5">
<div class="form-group">
<label>Default</label>
<input class="form-control icp icp-auto" value="fa-anchor" type="text" />
<input class="form-control icp icp-auto" value="fas fa-anchor" type="text" />
</div>
<div class="form-group">
<label>As a component</label>

<div class="input-group">
<input data-placement="bottomRight" class="form-control icp icp-auto" value="fa-archive" type="text" />
<input data-placement="bottomRight" class="form-control icp icp-auto" value="fas fa-archive" type="text" />
<span class="input-group-addon"></span>
</div>
</div>
<div class="form-group">
<label>With the input as a search box</label>
<input class="form-control icp icp-auto" data-input-search="true" value="fa-plane" type="text" />
<input class="form-control icp icp-auto" data-input-search="true" value="fas fa-plane" type="text" />
</div>
<div class="form-group">
<label>Inside dropdowns</label>
Expand Down Expand Up @@ -142,7 +143,7 @@ <h2 class="panel-title">Demos</h2>
{
//...
title: 'With custom options',
icons: ['fa-github', 'fa-heart', 'fa-html5', 'fa-css3'],
icons: ['fab fa-github', 'fas fa-heart', 'fab fa-html5', 'fab fa-css3'],
selectedCustomClass: 'label label-success',
mustAccept:true,
placement:'bottomRight',
Expand Down Expand Up @@ -213,6 +214,7 @@ <h2 class="panel-title">Demos</h2>

$('.icp-glyphs').iconpicker({
title: 'Prepending glypghicons',
// fontAwesome5: true,
icons: $.merge(['glyphicon-home', 'glyphicon-repeat', 'glyphicon-search',
'glyphicon-arrow-left', 'glyphicon-arrow-right', 'glyphicon-star'], $.iconpicker.defaultOptions.icons),
fullClassFormatter: function(val){
Expand All @@ -225,13 +227,14 @@ <h2 class="panel-title">Demos</h2>
});
$('.icp-opts').iconpicker({
title: 'With custom options',
icons: ['fa-github', 'fa-heart', 'fa-html5', 'fa-css3'],
icons: ['fab fa-github', 'fas fa-heart', 'fab fa-html5', 'fab fa-css3'],
selectedCustomClass: 'label label-success',
mustAccept: true,
placement: 'bottomRight',
showFooter: true,
// note that this is ignored cause we have an accept button:
hideOnSelect: true,
// fontAwesome5: true,
templates: {
footer: '<div class="popover-footer">' +
'<div style="text-align:left; font-size:12px;">Placements: \n\
Expand Down
7 changes: 5 additions & 2 deletions package.json
View file
Expand Up @@ -28,11 +28,14 @@
"devDependencies": {
"grunt": "~0.4.5",
"grunt-contrib-clean": "~0.5.0",
"grunt-contrib-concat": "~0.4.0",
"grunt-contrib-jshint": "~0.10.0",
"grunt-contrib-less": "~0.11.2",
"grunt-contrib-uglify": "~0.5.0",
"grunt-contrib-concat": "~0.4.0",
"grunt-contrib-watch": "~0.6.1",
"grunt-download": "^0.2.0",
"grunt-jsbeautifier": "~0.2.7",
"grunt-contrib-watch": "~0.6.1"
"grunt-string-replace": "^1.3.1",
"grunt-yaml": "^0.4.2"
}
}

0 comments on commit 13d6909

Please sign in to comment.