icon port wip

MediaMath · Jun 16, 2015 · a29a354 · a29a354
1 parent d89ec60
commit a29a354
Show file tree

Hide file tree

Showing 3 changed files with 75 additions and 52 deletions.
diff --git a/src/mm-icon/index.html b/src/mm-icon/index.html
@@ -41,15 +41,15 @@
 <body>
 	<ul>
 		<li>
-			<mm-icon type="actions" width="32" height="32" primaryColor="#0000FF" hoverColor="#ff0000"></mm-icon>
+			<mm-icon type="actions" width="32" height="32" primary-color="#0000FF" hover-color="#ff0000"></mm-icon>
 			<p>actions</p>
 		</li>
 		<li>
-			<mm-icon type="action" width="32" height="32" primaryColor="#00FF00" hoverColor="#ff0000"></mm-icon>
+			<mm-icon type="action" width="32" height="32" primary-color="#00FF00" hover-color="#ff0000"></mm-icon>
 			<p>action</p>
 		</li>
 		<li>
-			<mm-icon type="alerts" width="32" height="32" primaryColor="#000000" hoverColor="#ff0000"></mm-icon>
+			<mm-icon type="alerts" width="32" height="32" primary-color="#000000" hover-color="#ff0000"></mm-icon>
 			<p>alerts</p>
 		</li>
 		<li>

diff --git a/src/mm-icon/mm-icon.html b/src/mm-icon/mm-icon.html
@@ -7,18 +7,14 @@
 <link rel="import" href="../../bower_components/polymer/polymer.html"/>
 <link rel="import" href="../shared/fonts/fonts.html"/>
 <link rel="import" href="../shared/js/colors.html"/>
-<polymer-element name="mm-icon" attributes="type width height primaryColor hoverColor" constructor="MMIcon">
+<link rel="import" href="../shared/behaviors/stylable.html"/>
+
+<dom-module id="mm-icon">
+	<link rel="import" type="css" href="mm-icon.css"/>
 	<template>
-		<link href="mm-icon.css" rel="stylesheet" type="text/css"/>
-		<style no-shim>
-			._mm_icon.{{uid}} {
-				color: {{primaryColor}};
-			}
-			._mm_icon.{{uid}}:hover {
-				color: {{hoverColor}};
-			}
-		</style>
-		<span id="iconGlyph" class="_mm_icon icon-{{type}} {{uid}}" style="{{ iconStyle | styleObject }}"></span>
+		<style>{{updateInternalStyle(uid, hoverColor,primaryColor)}}</style>
+		<span id="iconGlyph" class$="{{ classList(iconClass) }}" style$="{{ styleList(iconStyle) }}"></span>
 	</template>
-	<script src="mm-icon.js"></script>
-</polymer-element>
+</dom-module>
+
+<script src="mm-icon.js"></script>
diff --git a/src/mm-icon/mm-icon.js b/src/mm-icon/mm-icon.js
@@ -5,50 +5,77 @@
 
 */
 /* test.js */
-Polymer('mm-icon', {
-
-	ver:"<<version>>",
+Polymer({
+	is:"mm-icon",
 
-	publish: {
-		type: { value:"plus", reflect:true },
-		width:28,
-		height:28,
-		primaryColor: Colors.A2,
-		hoverColor: null,
-		uid: null
-	},
-
-	iconStyle: {},
-
-	observe: { "width height type" : "updateStyleJob" },
+	behaviors: [
+		StrandTraits.Stylable
+	],
 
-	ready: function() {
-		// this was added to allow hover color/state, 
-		// while still supporting the established api:
-		this.uid = this.createId();
+	properties: {
+		ver:{
+			type:String,
+			value:"<<version>>",
+		},
+		type: {
+			type:String,
+			value:"plus", 
+			reflectAsAttribute:true 
+		},
+		width:{
+			type:Number, 
+			value: 28
+		},
+		height: {
+			type:Number, 
+			value: 28
+		},
+		primaryColor: {
+			type:String, 
+			value: Colors.A2 
+		},
+		hoverColor: {
+			type:String, 
+			value:null 
+		},
+		iconStyle: {
+			type: Object,
+			computed: "updateStyle(width, height, type)"
+		},	
+		iconClass: {
+			type:Object,
+			computed: "updateClass(uid, type)"
+		},
+		uid: {
+			type: String,
+			value: function() { 
+				var timestamp = new Date().valueOf(),
+					rndNum	= Math.floor((Math.random()*99)+1),
+					id = 'id_' + rndNum + '_' + timestamp;
+				return id;
+			}
+		}
 	},
 
-	attached: function() {
-		this.updateStyleJob();
+	updateClass: function(uid, type) {
+		var o = {};
+		o["icon-"+type] = true;
+		o["_mm_icon"] = true;
+		o[this.uid] = true;
+		return o;
 	},
 
-	updateStyleJob: function() {
-		this.job("style", this.updateStyle, 0);
-	},
-
-	updateStyle: function() {
-		this.iconStyle = {
-			minWidth: this.width + "px",
-			minHeight: this.height + "px", 
-			lineHeight: this.height + "px",
-			fontSize: this.height + "px"
+	updateStyle: function(width, height) {
+		return {
+			minWidth: width + "px",
+			minHeight: height + "px", 
+			lineHeight: height + "px",
+			fontSize: height + "px"
 		};
 	},
 
-	createId: function() {
-		var timestamp = new Date().valueOf(),
-			rndNum	= Math.floor((Math.random()*99)+1),
-			id = 'id_' + rndNum + '_' + timestamp;
-		return id;
+	updateInternalStyle: function(uid, hoverColor, primaryColor) {
+		return "._mm_icon."+uid+" { color: "+primaryColor+";}._mm_icon."+uid+":hover {color: "+hoverColor+";}";
 	}
+
 });