Skip to content
This repository has been archived by the owner on Mar 13, 2018. It is now read-only.

Commit

Permalink
use cre-icon in demo; icon now exists on a separate element.
Browse files Browse the repository at this point in the history
  • Loading branch information
sorvell committed Jul 15, 2014
1 parent 6aa34fd commit 9d700c8
Show file tree
Hide file tree
Showing 4 changed files with 48 additions and 74 deletions.
3 changes: 2 additions & 1 deletion bower.json
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@
"private": true,
"dependencies": {
"polymer": "Polymer/polymer#master",
"core-meta": "Polymer/core-meta#master"
"core-meta": "Polymer/core-meta#master",
"core-icon": "Polymer/core-icon#master"
}
}
26 changes: 16 additions & 10 deletions core-iconset.html
Original file line number Diff line number Diff line change
Expand Up @@ -215,18 +215,24 @@
* @param {String} theme (optional) The name of the theme for the icon.
* @param {Number} scale (optional, defaults to 1) A scaling factor
* with which the icon can be magnified.
* @return {Element} The icon element.
*/
applyIcon: function(element, icon, scale) {
var offset = this.getOffset(icon);
scale = scale || 1;
if (element && offset) {
var style = element.style;
style.backgroundImage = 'url(' + this.src + ')';
style.backgroundPosition = (-offset.offsetX * scale + 'px') +
' ' + (-offset.offsetY * scale + 'px');
style.backgroundSize = scale === 1 ? 'auto' :
this.width * scale + 'px';
}
var offset = this.getOffset(icon);
scale = scale || 1;
if (element && offset) {
var icon = element._icon || document.createElement('div');
var style = icon.style;
style.backgroundImage = 'url(' + this.src + ')';
style.backgroundPosition = (-offset.offsetX * scale + 'px') +
' ' + (-offset.offsetY * scale + 'px');
style.backgroundSize = scale === 1 ? 'auto' :
this.width * scale + 'px';
if (icon.parentNode !== element) {
element.appendChild(icon);
}
return icon;
}
}

});
Expand Down
93 changes: 30 additions & 63 deletions demo.html
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@

<script src="../platform/platform.js"></script>
<link rel="import" href="core-iconset.html">
<link rel="import" href="../core-icon/core-icon.html">

</head>
<body unresolved>
Expand All @@ -24,72 +25,38 @@
icons="location place starta stopb bus car train walk">
</core-iconset>

<!--
Create an element that uses an iconset to display an icon.
By using iconset, the element can allow the set of available icons to be
easily changed by the user.
Here we're using the converntion 'iconset:icon' to specify a particular
iconset and an icon name within that set.
-->
<polymer-element name="icon-demo" attributes="icon">

<template>
<style>
:host {
display: inline-block;
margin: 2px;
}
</style>
<core-iconset id="meta"></core-iconset>
<content></content>
</template>

<script>

Polymer('icon-demo', {

iconChanged: function() {
if (!this.icon) {
return;
}
var parts = this.icon.split(':');
var icon = parts.pop();
// find the iconSet for the name given via the icon property
var iconset = this.$.meta.byId(parts.pop());
if (iconset) {
// size the element as needed
this.style.height = this.style.width = iconset.iconSize + 'px';
// use iconset's applyAsBackground method to set the given icon
// as the element's background image.
iconset.applyIcon(this, icon);
}
}

});

</script>

</polymer-element>
<core-iconset id="my-icons-big" src="my-icons-big.png" width="192" iconSize="48"
icons="location place starta stopb bus car train walk">
</core-iconset>

<!-- Now create a bunch of icons using our iconset -->
<icon-demo icon="my-icons:location"></icon-demo>
<icon-demo icon="my-icons:place"></icon-demo>
<icon-demo icon="my-icons:starta"></icon-demo>
<icon-demo icon="my-icons:stopb"></icon-demo>
<icon-demo icon="my-icons:bus"></icon-demo>
<icon-demo icon="my-icons:car"></icon-demo>
<icon-demo icon="my-icons:train"></icon-demo>
<icon-demo icon="my-icons:walk"></icon-demo>
<core-icon icon="my-icons:location"></core-icon>
<core-icon icon="my-icons:place"></core-icon>
<core-icon icon="my-icons:starta"></core-icon>
<core-icon icon="my-icons:stopb"></core-icon>
<core-icon icon="my-icons:bus"></core-icon>
<core-icon icon="my-icons:car"></core-icon>
<core-icon icon="my-icons:train"></core-icon>
<core-icon icon="my-icons:walk"></core-icon>
<br>
<!-- icons may also be specified by index -->
<icon-demo icon="my-icons:0"></icon-demo>
<icon-demo icon="my-icons:1"></icon-demo>
<icon-demo icon="my-icons:2"></icon-demo>
<icon-demo icon="my-icons:3"></icon-demo>
<icon-demo icon="my-icons:4"></icon-demo>
<icon-demo icon="my-icons:5"></icon-demo>
<icon-demo icon="my-icons:6"></icon-demo>
<icon-demo icon="my-icons:7"></icon-demo>
<style>
.embiggen core-icon {
width: 48px;
height: 48px;
}
</style>

<div class="embiggen">
<core-icon icon="my-icons-big:0"></core-icon>
<core-icon icon="my-icons-big:1"></core-icon>
<core-icon icon="my-icons-big:2"></core-icon>
<core-icon icon="my-icons-big:3"></core-icon>
<core-icon icon="my-icons-big:4"></core-icon>
<core-icon icon="my-icons-big:5"></core-icon>
<core-icon icon="my-icons-big:6"></core-icon>
<core-icon icon="my-icons-big:7"></core-icon>
</div>

</body>
</html>
Binary file added my-icons-big.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit 9d700c8

Please sign in to comment.