├── bower.json ├── package.json ├── LICENSE ├── README.md └── ionic.icon.js /bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "ionic-contrib-icon", 3 | "version": "0.0.3", 4 | "homepage": "https://github.com/antonshevchenko/ionic-contrib-icon", 5 | "authors": [ 6 | "antonshevchenko " 7 | ], 8 | "description": "Automatically display platform-specific icons.", 9 | "moduleType": [ 10 | "node" 11 | ], 12 | "keywords": [ 13 | "ionic", 14 | "icons", 15 | "ionicons" 16 | ], 17 | "license": "MIT", 18 | "ignore": [ 19 | "**/.*", 20 | "node_modules", 21 | "bower_components", 22 | "test", 23 | "tests" 24 | ] 25 | } 26 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "ionic-contrib-icon", 3 | "version": "0.0.3", 4 | "description": "Automatically display platform-specific icons.", 5 | "main": "ionic.icon.js", 6 | "repository": { 7 | "type": "git", 8 | "url": "https://github.com/antonshevchenko/ionic-contrib-icon.git" 9 | }, 10 | "keywords": [ 11 | "ionic", 12 | "icons", 13 | "ionicons" 14 | ], 15 | "author": "Anton Shevchenko", 16 | "license": "MIT", 17 | "bugs": { 18 | "url": "https://github.com/antonshevchenko/ionic-contrib-icon/issues" 19 | }, 20 | "homepage": "https://github.com/antonshevchenko/ionic-contrib-icon" 21 | } 22 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2014 Anton Shevchenko 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | 23 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ionic-contrib-icon 2 | ================== 3 | 4 | _Automatically display platform-specific icons._ 5 | 6 | ## Install 7 | 8 | First install the dependency using either Bower or NPM. 9 | 10 | ### Bower 11 | 12 | ```shell 13 | $ bower install ionic-contrib-icon 14 | ``` 15 | 16 | ### NPM 17 | 18 | ```shell 19 | $ npm install ionic-contrib-icon 20 | ``` 21 | 22 | Include the `ionic.contrib.icon` module in your app's dependencies: 23 | 24 | ```javascript 25 | angular.module('app', ['ionic', 'ionic.contrib.icon']) 26 | ``` 27 | 28 | Use the `icon` directive: 29 | 30 | ```html 31 | 37 | 38 | ``` 39 | 40 | ## Advanced Usage 41 | 42 | ### Integration with Other Icon Libraries 43 | 44 | You can make use of other popular icon libraries such as [Font Awesome](https://fortawesome.github.io/Font-Awesome/) by defining the `type` option in the `$ionicIconConfig` constant: 45 | 46 | ```javascript 47 | app.constant('$ionicIconConfig', { 48 | type: 'fa' 49 | }); 50 | ``` 51 | 52 | _* Note: The icon type corresponds to the appropriate library's icon CSS class. For Font Awesome, it is `fa`, while for Ionicons it is `icon`._ 53 | 54 | ### Define Icon Mappings 55 | 56 | You can map default icons for each platform by defining the `map` option in the `$ionicIconConfig` constant. For instance, you can map the corresponding iOS and Android icon alternatives for the default `ion-heart` Ionicon: 57 | 58 | ```javascript 59 | app.constant('$ionicIconConfig', { 60 | type: 'icon', 61 | map: { 62 | 'ion-heart': { 63 | ios: 'ion-ios-heart', 64 | android: 'ion-android-favorite' 65 | } 66 | } 67 | }) 68 | ``` 69 | 70 | And then simply use the icon directive without having to add the `ios` and `android` attributes: 71 | 72 | ```html 73 | 74 | ``` 75 | 76 | ### Special Cases 77 | 78 | For any special cases, we support adding custom classes for specific icons by providing the `class` attribute: 79 | 80 | ```html 81 | 82 | ``` 83 | 84 | The directive also overrides any defaults when you explictly define icons for specific platforms. 85 | 86 | ## Releases 87 | 88 | - 0.0.3 __(12/07/14)__: 89 | - Addition of iPad and Windows Phone platforms 90 | - 0.0.2 __(12/06/14)__: 91 | - Added support for other icon libraries (such as Font Awesome) 92 | - Added `$ionicIconConfig` constant to pass options 93 | - Can use icon mapping to define which icons get displayed by default for each platform 94 | - Minor bug fixes 95 | - 0.0.1 __(12/06/14)__: 96 | - Initial implementation of `icon` directive 97 | -------------------------------------------------------------------------------- /ionic.icon.js: -------------------------------------------------------------------------------- 1 | (function(ionic) { 2 | 3 | // Define local variables 4 | var defaults = { 5 | type: 'icon', 6 | map: {} 7 | }; 8 | 9 | /** 10 | * isEmpty() checks if the given 11 | * object is empty. 12 | * 13 | * @param {Object} obj 14 | * 15 | * @return {Boolean} 16 | */ 17 | function isEmpty(obj) { 18 | var obj = Object(obj); 19 | 20 | if (Object.keys(obj).length === 0) { 21 | return true 22 | } 23 | 24 | return false; 25 | } 26 | 27 | angular.module('ionic.contrib.icon', ['ionic']) 28 | 29 | /** 30 | * @ngdoc object 31 | * @name $ionicIconConfig 32 | * @module ionic.contrib.icon 33 | * @description 34 | * Sets default behavior of the icon directive. 35 | * 36 | * @param {String} type 37 | * @param {Object} map 38 | * 39 | * @usage 40 | * ```js 41 | * var app = angular.module('app', ['ionic', 'ionic.contrib.icon']) 42 | * app.constant('$ionicIconConfig', { 43 | * type: 'icon', 44 | * map: { 45 | * 'ion-heart': { 46 | * ios: 'ion-ios7-heart', 47 | * android: 'ion-android-heart' 48 | * } 49 | * } 50 | * }); 51 | * ``` 52 | */ 53 | .constant('$ionicIconConfig', defaults) 54 | 55 | /** 56 | * @ngdoc directive 57 | * @name icon 58 | * @module ionic.contrib.icon 59 | * @restrict E 60 | * 61 | * @description 62 | * The icon directive automatically displays platform-specific icons based on passed options 63 | * defined by the $ionicIconConfig constant. 64 | * 65 | * @param {string=} ios 66 | * @param {string=} ipad 67 | * @param {string=} android 68 | * @param {string=} windows 69 | * @param {string=} default Required default icon to use. 70 | */ 71 | .directive('icon', function($ionicIconConfig) { 72 | 73 | return { 74 | restrict: 'E', 75 | scope: { 76 | ios: '@', 77 | ipad: '@', 78 | android: '@', 79 | windows: '@', 80 | default: '@' 81 | }, 82 | link: function($scope, $element, $attrs) { 83 | 84 | var options = $ionicIconConfig; 85 | 86 | function setIcon(icon) { 87 | 88 | // Check if icon is empty 89 | if (isEmpty(icon)) { 90 | icon = {}; 91 | } 92 | 93 | // Set icon depending on device's platform 94 | if (ionic.Platform.isIPad()) { 95 | $scope.platform = ($scope.ipad || icon.ipad); 96 | } else if (ionic.Platform.isIOS()) { 97 | $scope.platform = ($scope.ios || icon.ios); 98 | } else if (ionic.Platform.isAndroid()) { 99 | $scope.platform = ($scope.android || icon.android); 100 | } else if (ionic.Platform.isWindowsPhone()) { 101 | $scope.platform = ($scope.windows || icon.windows); 102 | } 103 | 104 | // By default use the following icon (if iOS or Android not set) 105 | if (!$scope.platform) { 106 | $scope.platform = $scope.default; 107 | } 108 | 109 | } 110 | 111 | // Check if using icon mapping 112 | if (!isEmpty(options.map) && options.map[$scope.default]) { 113 | setIcon(options.map[$scope.default]); 114 | } else { 115 | setIcon(); 116 | } 117 | 118 | // Set icon type (library to use) 119 | $scope.type = $attrs['class']; 120 | 121 | if (!$scope.type) { 122 | $scope.type = (options.type || defaults.type); 123 | } 124 | 125 | }, 126 | template: '' 127 | }; 128 | 129 | }); 130 | 131 | })(window.ionic); 132 | --------------------------------------------------------------------------------