mm-footer port to 1.0

MediaMath · Jun 16, 2015 · 9868f9c · 9868f9c
1 parent 3a06770
commit 9868f9c
Show file tree

Hide file tree

Showing 3 changed files with 51 additions and 30 deletions.
diff --git a/src/mm-footer/index.html b/src/mm-footer/index.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html>
 	<head>
-	<script language="javascript" src="../../bower_components/webcomponentsjs/webcomponents.js"></script>
+	<script language="javascript" src="../../bower_components/webcomponentsjs/webcomponents-lite.js"></script>
 	<link rel="import" href="../mm-action/mm-action.html">
 	<link rel="import" href="../mm-button/mm-button.html">
 	<link rel="import" href="../mm-checkbox/mm-checkbox.html">
@@ -88,26 +88,20 @@
 				display: block;
 				float: left;
 			}
-
-			mm-footer[unresolved]{
-				display: none;
-			}
-
-			mm-footer {}
 		</style>
 	</head>
 	<body>
 
 		<div class="col cX">
 			<p><span class="bold">Footer:</span> Default</p>
-				<mm-footer unresolved>
+				<mm-footer>
 					<mm-button>
 						<label>Save</label>
 					</mm-button>
 				</mm-footer>
 			<hr/>
 			<p><span class="bold">Footer:</span> Display Message / Multiple Buttons</p>
-				<mm-footer id="tf1" unresolved>
+				<mm-footer id="tf1">
 					<mm-action id="closeLink" underline="true">
 						<label>Close</label>
 					</mm-action>
@@ -120,7 +114,14 @@
 				</mm-footer>
 			<hr/>
 			<p><span class="bold">Footer:</span> Default</p>
-				<mm-footer id="tf2" unresolved>
+				<mm-footer id="tf2" message="Some message content" message-visible="true">
+					<mm-button>
+						<label>Close</label>
+					</mm-button>
+				</mm-footer>
+			<hr/>
+			<p><span class="bold">Footer:</span> Default</p>
+				<mm-footer id="tf2">
 					<mm-checkbox class="left">
 						<label>Don't show again</label>
 					</mm-checkbox>
@@ -138,7 +139,7 @@
 				saveAndClose,
 				saveAndAdd;
 
-			window.addEventListener("polymer-ready", function() {
+			window.addEventListener("WebComponentsReady", function() {
 				tf1 = document.querySelector("#tf1");
 				tf2 = document.querySelector("#tf2");
 

diff --git a/src/mm-footer/mm-footer.html b/src/mm-footer/mm-footer.html
@@ -6,12 +6,13 @@
 -->
 <link rel="import" href="../../bower_components/polymer/polymer.html">
 <link rel="import" href="../mm-inline-box/mm-inline-box.html">
-<polymer-element name="mm-footer" attributes="message type fit" constructor="MMFooter">
+
+<dom-module id="mm-footer">
+	<link rel="import" type="css" href="mm-footer.css"/>
 	<template>
-		<link href="mm-footer.css" rel="stylesheet" type="text/css"/>
 		<div class="footer">
 			<div class="left-box">
-				<template if="{{messageVisible}}">
+				<template is="dom-if" if="{{messageVisible}}">
 					<mm-inline-box id="messageBox" type="{{type}}" layout="message">{{message}}</mm-inline-box>
 				</template>
 				<content select=".left"></content>
@@ -21,5 +22,6 @@
 			</div>
 		</div>
 	</template>
-	<script src="mm-footer.js"></script>
-</polymer-element>
+</dom-module>
+
+<script src="mm-footer.js"></script>
diff --git a/src/mm-footer/mm-footer.js b/src/mm-footer/mm-footer.js
@@ -4,20 +4,38 @@
  * This code may only be used under the BSD style license found at http://mediamath.github.io/strand/LICENSE.txt
 
 */
-Polymer('mm-footer', {
-	ver:"<<version>>",
-	publish: {
-		message: null,
-		type: "info",
-		messageVisible: false
-	},
+(function(scope) {
 
-	showMessage: function() {
-		this.messageVisible = true;
-	},
+	scope.Footer = Polymer({
+		is: 'mm-footer',
 
-	hideMessage: function() {
-		this.messageVisible = false;
-	}
+		properties: {
+			ver: {
+				type: String,
+				value: "<<version>>",
+			},
+			message: {
+				type: String,
+				value: null
+			},
+			type: {
+				type: String,
+				value: "info"
+			},
+			messageVisible: {
+				type: Boolean,
+				value: false
+			}
+		},
 
-});
+		showMessage: function() {
+			this.messageVisible = true;
+		},
+
+		hideMessage: function() {
+			this.messageVisible = false;
+		}
+
+	});
+
+})(window.Strand = window.Strand || {});