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

Commit

Permalink
fix(icon): Change iconSize param to viewBoxSize.
Browse files Browse the repository at this point in the history
Updates code and docs.
Also removes redundant function names.

Fixes #1679

Closes #3123

BREAKING CHANGE: The API has changed for `md-icon` - `iconSize` has been
changed to `viewBoxSize`
  • Loading branch information
programmist authored and Robert Messerle committed Jun 8, 2015
1 parent 545582d commit f93e117
Showing 1 changed file with 32 additions and 24 deletions.
56 changes: 32 additions & 24 deletions src/components/icon/iconService.js
Original file line number Diff line number Diff line change
Expand Up @@ -74,8 +74,8 @@
* @param {string} id Icon name/id used to register the icon
* @param {string} url specifies the external location for the data file. Used internally by `$http` to load the
* data or as part of the lookup in `$templateCache` if pre-loading was configured.
* @param {string=} iconSize Number indicating the width and height of the icons in the set. All icons
* in the icon set must be the same size. Default size is 24.
* @param {number=} viewBoxSize Sets the width and height the icon's viewBox.
* It is ignored for icons with an existing viewBox. Default size is 24.
*
* @returns {obj} an `$mdIconProvider` reference; used to support method call chains for the API
*
Expand Down Expand Up @@ -104,8 +104,9 @@
* @param {string} id Icon name/id used to register the iconset
* @param {string} url specifies the external location for the data file. Used internally by `$http` to load the
* data or as part of the lookup in `$templateCache` if pre-loading was configured.
* @param {string=} iconSize Number indicating the width and height of the icons in the set. All icons
* in the icon set must be the same size. Default size is 24.
* @param {number=} viewBoxSize Sets the width and height of the viewBox of all icons in the set.
* It is ignored for icons with an existing viewBox. All icons in the icon set should be the same size.
* Default value is 24.
*
* @returns {obj} an `$mdIconProvider` reference; used to support method call chains for the API
*
Expand Down Expand Up @@ -133,8 +134,9 @@
*
* @param {string} url specifies the external location for the data file. Used internally by `$http` to load the
* data or as part of the lookup in `$templateCache` if pre-loading was configured.
* @param {string=} iconSize Number indicating the width and height of the icons in the set. All icons
* in the icon set must be the same size. Default size is 24.
* @param {number=} viewBoxSize Sets the width and height of the viewBox of all icons in the set.
* It is ignored for icons with an existing viewBox. All icons in the icon set should be the same size.
* Default value is 24.
*
* @returns {obj} an `$mdIconProvider` reference; used to support method call chains for the API
*
Expand Down Expand Up @@ -184,15 +186,14 @@

/**
* @ngdoc method
* @name $mdIconProvider#defaultIconSize
* @name $mdIconProvider#defaultViewBoxSize
*
* @description
* While `<md-icon />` markup can also be style with sizing CSS, this method configures
* the default width **and** height used for all icons; unless overridden by specific CSS.
* The default sizing is (24px, 24px).
*
* @param {string} iconSize Number indicating the width and height of the icons in the set. All icons
* in the icon set must be the same size. Default size is 24.
* @param {number=} viewBoxSize Sets the width and height of the viewBox for an icon or an icon set.
* All icons in a set should be the same size. The default value is 24.
*
* @returns {obj} an `$mdIconProvider` reference; used to support method call chains for the API
*
Expand All @@ -203,43 +204,50 @@
* // Configure URLs for icons specified by [set:]id.
*
* $mdIconProvider
* .defaultIconSize(36) // Register a default icon size (width == height)
* .defaultViewBoxSize(36) // Register a default icon size (width == height)
* });
* </hljs>
*
*/

var config = {
defaultIconSize: 24,
defaultViewBoxSize: 24,
defaultFontSet: 'material-icons',
fontSets : [ ]
};

function MdIconProvider() { }

MdIconProvider.prototype = {

icon : function icon(id, url, iconSize) {
icon : function (id, url, viewBoxSize) {
if ( id.indexOf(':') == -1 ) id = '$default:' + id;

config[id] = new ConfigurationItem(url, iconSize );
config[id] = new ConfigurationItem(url, viewBoxSize );
return this;
},
iconSet : function iconSet(id, url, iconSize) {
config[id] = new ConfigurationItem(url, iconSize );

iconSet : function (id, url, viewBoxSize) {
config[id] = new ConfigurationItem(url, viewBoxSize );
return this;
},
defaultIconSet : function defaultIconSet(url, iconSize) {

defaultIconSet : function (url, viewBoxSize) {
var setName = '$default';

if ( !config[setName] ) {
config[setName] = new ConfigurationItem(url, iconSize );
config[setName] = new ConfigurationItem(url, viewBoxSize );
}

config[setName].iconSize = iconSize || config.defaultIconSize;
config[setName].viewBoxSize = viewBoxSize || config.defaultViewBoxSize;

return this;
},

defaultViewBoxSize : function (viewBoxSize) {
config.defaultViewBoxSize = viewBoxSize;
return this;
},

/**
* Register an alias name associated with a font-icon library style ;
*/
Expand Down Expand Up @@ -312,9 +320,9 @@
* Configuration item stored in the Icon registry; used for lookups
* to load if not already cached in the `loaded` cache
*/
function ConfigurationItem(url, iconSize) {
function ConfigurationItem(url, viewBoxSize) {
this.url = url;
this.iconSize = iconSize || config.defaultIconSize;
this.viewBoxSize = viewBoxSize || config.defaultViewBoxSize;
}

/**
Expand Down Expand Up @@ -512,13 +520,13 @@
* loaded iconCache store.
*/
function prepareAndStyle() {
var iconSize = this.config ? this.config.iconSize : config.defaultIconSize;
var viewBoxSize = this.config ? this.config.viewBoxSize : config.defaultViewBoxSize;
angular.forEach({
'fit' : '',
'height': '100%',
'width' : '100%',
'preserveAspectRatio': 'xMidYMid meet',
'viewBox' : this.element.getAttribute('viewBox') || ('0 0 ' + iconSize + ' ' + iconSize)
'viewBox' : this.element.getAttribute('viewBox') || ('0 0 ' + viewBoxSize + ' ' + viewBoxSize)
}, function(val, attr) {
this.element.setAttribute(attr, val);
}, this);
Expand Down

0 comments on commit f93e117

Please sign in to comment.