Provide mixin functionality for generated components

MediaMath · Mar 25, 2016 · 2a9777c · 2a9777c
1 parent 0823ec6
commit 2a9777c
Show file tree

Hide file tree

Showing 8 changed files with 252 additions and 97 deletions.
diff --git a/package.json b/package.json
@@ -17,7 +17,8 @@
     "build": "gulp",
     "start": "gulp live",
     "dist": "gulp build:dist",
-    "release": "gulp release:patch"
+    "release": "gulp release:patch",
+    "bower": "bower"
   },
   "devDependencies": {
     "autoprefixer": "^6.1.2",

diff --git a/src/mm-grid/index.html b/src/mm-grid/index.html
@@ -38,6 +38,55 @@
 	</style>
 </head>
 <body>
+	<dom-module id="arbitrary-controller">
+		<template>
+			<mm-grid selectable expandable style="height: 100px; min-height: 20px;" data="{{arbitraryData}}" mixin-findable="{{ref}}" arbitrary-field="{{ref}}">
+				<mm-grid-column width="20%" field="name" sort resize>Name</mm-grid-column>
+				<mm-grid-column width="10%" field="id" sort resize>Id</mm-grid-column>
+				<template preserve-content>
+					<mm-grid-item model="{{model}}" scope="{{scope}}">
+						<div class="expansion">
+							<div class="expansion-row">
+								<div class="expansion-col" on-tap="_echo">
+									<h4>Expanded Content</h4>
+									<span>{{model.name}}</span>
+								</div>
+								<div class="expansion-col">
+									<h4>Expanded Advertiser</h4>
+									<span>{{model.advertiser}}</span>
+								</div>
+								<div class="expansion-col">
+									<h4>Expanded Concept</h4>
+									<span>{{model.concept}}</span>
+								</div>
+							</div>
+						</div>
+					</mm-grid-item>
+				</template>
+			</mm-grid>
+		</template>
+		<style>
+			#unused {
+				display: none;
+			}
+		</style>
+		<script>
+			HTMLImports.whenReady(function() {
+				Polymer(StrandTraits.MixinFindable.prototypeAsMixin({
+					is:"arbitrary-controller",
+					behaviors: [
+						StrandTraits.Refable,
+					],
+
+					_echo: function (ev) {
+						var templateInstance = this;
+						var arbitraryController = this.scope.arbitraryField;
+						console.log("_echo", arbitraryController.is, ev);
+					},
+				}));
+			});
+		</script>
+	</dom-module>
 	<mm-grid id="mmTestGrid" gpu="4d" selectable expandable="false" unresolved>
 		<mm-grid-column width="20%" field="name" sort resize>Name</mm-grid-column>
 		<mm-grid-column width="10%" field="id" sort resize>Id</mm-grid-column>
@@ -47,7 +96,8 @@
 		<mm-grid-column width="10%" field="dimensions">Dimensions</mm-grid-column>
 		<mm-grid-column width="30%" field="actions"></mm-grid-column>
 
-		<template preserve-content>
+		<template preserve-content id="arbitraryIdentifier">
+			<mm-icon type="info" on-click="_customClick" on-track="_customDrag"></mm-icon>
 			<mm-grid-item model="{{model}}" scope="{{scope}}">
 				<div field="actions">
 					<!-- 
@@ -84,30 +134,7 @@
 						value="{{model.value}}">
 					</mm-dropdown>
 					-->
-					<mm-grid selectable expandable style="height: 100px; min-height: 20px;" data="{{model.subdata}}">
-						<mm-grid-column width="20%" field="name" sort resize>Name</mm-grid-column>
-						<mm-grid-column width="10%" field="id" sort resize>Id</mm-grid-column>
-						<template preserve-content>
-							<mm-grid-item model="{{model}}" scope="{{scope}}">
-								<div class="expansion">
-									<div class="expansion-row">
-										<div class="expansion-col">
-											<h4>Expanded Content</h4>
-											<span>{{model.name}}</span>
-										</div>
-										<div class="expansion-col">
-											<h4>Expanded Advertiser</h4>
-											<span>{{model.advertiser}}</span>
-										</div>
-										<div class="expansion-col">
-											<h4>Expanded Concept</h4>
-											<span>{{model.concept}}</span>
-										</div>
-									</div>
-								</div>
-							</mm-grid-item>
-						</template>
-					</mm-grid>
+					<arbitrary-controller id="mixin" arbitrary-data="{{model.subdata}}"></arbitrary-controller>
 				</div>
 				<div field="name">
 					Creative - {{model.name}}
@@ -306,6 +333,20 @@ <h4>Expanded Concept</h4>
 
 		window.addEventListener("WebComponentsReady", function() {
 			app = document.querySelector("#mmTestGrid");
+			app.mixinsForValue = function (value) {
+				if (value.id === "arbitraryIdentifier" &&
+					value instanceof HTMLTemplateElement) {
+					return [{
+						_customClick: function (ev) {
+							console.log("_customClick", ev);
+						},
+					}, {
+						_customDrag: function (ev) {
+							console.log("_customDrag", ev);
+						},
+					}];
+				}
+			};
 			app.data = data;
 
 			// setTimeout(function () {

diff --git a/src/mm-grid/mm-grid.html b/src/mm-grid/mm-grid.html
@@ -6,6 +6,7 @@
 -->
 <link rel="import" href="../../bower_components/polymer/polymer.html">
 <link rel="import" href="../shared/behaviors/resolvable.html">
+<link rel="import" href="../shared/behaviors/mixinfindable.html"/>
 <link rel="import" href="../shared/behaviors/templatefindable.html"/>
 <link rel="import" href="../mm-item-recycler/mm-item-recycler.html">
 <link rel="import" href="../mm-grid-column/mm-grid-column.html">
@@ -18,7 +19,7 @@
 <dom-module id="mm-grid">
 	<link rel="import" type="css" href="mm-grid.css"/>
 	<template>
-		<mm-item-recycler id="viewport" gpu="{{gpu}}" data="{{data}}" scope="{{scope}}" index="{{index}}" template-finder="{{templateFinder}}" template-findable="{{templateFindable}}">
+		<mm-item-recycler id="viewport" gpu="{{gpu}}" data="{{data}}" scope="{{scope}}" index="{{index}}" template-finder="{{templateFinder}}" template-findable="{{templateFindable}}" mixin-findable="{{mixinFindable}}">
 			<div id="header">
 				<div class="_mm_column checkbox" hidden$="{{!selectable}}">
 					<mm-checkbox id="selectAll" on-tap="_toggleAllSelections" state="{{_selectAllState}}"></mm-checkbox>

diff --git a/src/mm-grid/mm-grid.js b/src/mm-grid/mm-grid.js
@@ -70,6 +70,7 @@
 
 		behaviors: [
 			StrandTraits.Resolvable,
+			StrandTraits.MixinFindable,
 			StrandTraits.TemplateFindable,
 			StrandTraits.Refable
 		],

diff --git a/src/mm-item-recycler/mm-item-recycler.html b/src/mm-item-recycler/mm-item-recycler.html
@@ -8,6 +8,7 @@
 <link rel="import" href="../shared/js/recycler.html"/>
 <link rel="import" href="../shared/js/continuum.html"/>
 <link rel="import" href="../shared/behaviors/resolvable.html"/>
+<link rel="import" href="../shared/behaviors/mixinfindable.html"/>
 <link rel="import" href="../shared/behaviors/templatefindable.html"/>
 <link rel="import" href="../shared/behaviors/templatecomponentizable.html"/>
 <link rel="import" href="../shared/behaviors/sizeresponsible.html"/>

diff --git a/src/mm-item-recycler/mm-item-recycler.js b/src/mm-item-recycler/mm-item-recycler.js
@@ -72,10 +72,11 @@ found here: https://github.com/Polymer/core-list
 		behaviors: [
 			StrandTraits.Resolvable,
 			StrandTraits.WindowNotifier,
+			StrandTraits.MixinFindable,
 			StrandTraits.TemplateFindable,
 			StrandTraits.TemplateComponentizable,
 			StrandTraits.SizeResponsible,
-			StrandTraits.Refable
+			StrandTraits.Refable,
 		],
 
 		properties: {
@@ -645,7 +646,7 @@ found here: https://github.com/Polymer/core-list
 				bound.value = new BoundValue(null, this.scope);
 				bound.element = document.createElement("DIV");
 				this.toggleClass("recycler-panel", true, bound.element);
-				bound.instance = this.instantiateTemplate(this._templateFound, 0|!useLightDom);
+				bound.instance = this.instantiateTemplate(this._templateFound, 0|!useLightDom, this);
 
 				bound.instance.set("scope", this.scope);
 				bound.instance.set("model", this.data[young]);

diff --git a/src/shared/behaviors/mixinFindable.html b/src/shared/behaviors/mixinFindable.html
@@ -0,0 +1,54 @@
+<script>
+/**
+ * @license
+ * Copyright (c) 2015 MediaMath Inc. All rights reserved.
+ * This code may only be used under the BSD style license found at http://mediamath.github.io/strand/LICENSE.txt
+
+*/
+(function (scope) {
+
+	var MixinFindable = scope.MixinFindable = {
+
+		properties: {
+			mixinFindable: {
+				type: Object,
+				value: function () {
+					return this;
+				},
+				notify: true,
+			},
+		},
+
+		mixinsForValue: function (value) {
+			return null; // override
+		},
+
+		mixinsForValuePath: function (value, path) {
+			return null; // override
+		},
+
+		prototypeAsMixin: function (prototype) {
+			var mixin = {};
+
+			if (Array.isArray(prototype.behaviors) &&
+				prototype.behaviors.indexOf(MixinFindable) < 0) {
+				prototype.behaviors.push(MixinFindable);
+			} else if (!prototype.behaviors) {
+				prototype.behaviors = [ MixinFindable ];
+			}
+
+			for (var key in prototype) {
+				mixin[key] = prototype[key];
+			}
+
+			prototype.mixinsForValue = function () {
+				return mixin;
+			};
+
+			return prototype;
+		},
+
+	};
+
+})(window.StrandTraits = window.StrandTraits || {}); 
+</script>