Inheritance of customized polymer element in version 1.0 -
i have 2 polymer elements have similar characteristics. i'm trying "merge" 2 1 element. see in documentation custom elements can not inherited in polymer 1.0.
it starts here:
<div title="{{tile.description}}" class="flex-item"> <template is='dom-if' if='{{typeissingle}}'> <single-item-tile tile='{{tile}}'></single-item-tile> </template> <template is='dom-if' if='{{typeisgrouped}}'> <multiple-items-tile tile='{{tile}}'></multiple-items-tile> </template> ... and here 2 similar elements:
<dom-module id="single-item-tile"> <style> .big { --iron-icon-width: 96px; --iron-icon-height: 96px; } </style> <template> <paper-button on-click="navigateto"> <iron-icon class="big" icon="{{icon}}"></iron-icon> <h4>{{tile.label}}</h4> </paper-button> </template> <script> polymer({ is: 'single-item-tile', properties: { label: string, icon: { type: string, value: "check-box-outline-blank" }, tile: object }, navigateto: function () { window.open(this.tile.url + "?id=" + this.tile.landingpagequestionnaireitems[0].id); } }); </script> </dom-module> and:
<dom-module id="multiple-items-tile"> <style> .big { --iron-icon-width: 96px; --iron-icon-height: 96px; } paper-dialog.size-position { position: relative; top: -180px; left: 20px; min-width: 200px; min-height: 150px; background: #fff; } .questionnaireitemtochoose:hover { background-color: #e3e3e3; } </style> <template> <paper-button on-click="showgroupeditems"> <iron-icon class="big" icon="{{icon}}"></iron-icon> <h4>{{tile.label}}</h4> </paper-button> <paper-dialog id="questionnaire-selector" class="big size-position" heading="questionnaires" > <iron-selector> <template is='dom-repeat' items='{{tile.landingpagequestionnaireitems}}'> <div id="{{item.id}}" class="questionnaireitemtochoose" on-click="handleclick">{{item.label}}</div> </template> </iron-selector> </paper-dialog> </template> <script> polymer({ is: 'multiple-items-tile', properties: { label: string, icon: { type: string, value: "content-copy" }, tile: object }, showgroupeditems: function (e) { var dialog = document.getelementbyid('questionnaire-selector'); if (dialog) { dialog.open(); } }, handleclick: function(e) { var dialog = document.getelementbyid('questionnaire-selector'); dialog.close(); window.open(this.tile.url + "?id=" + e.currenttarget.id); } }); </script> </dom-module>
the current workaround lack of inheritance in polymer 1.0 shared behaviors.
you can try extract common behavior of both custom elements separate behavior implement in both of custom elements:
tile-behavior.html:
<script> titebehavior = { properties: { label: string, icon: { type: string, value: "content-copy" }, tile: object }, commonfunction: function() { }, .... }; </script> <dom-module id="multiple-items-tile"> ... <script> polymer({ is: 'multiple-items-tile', behaviors: [tilebehavior], }); </script> </dom-mdoule> <dom-module id="single-item-tile"> ... <script> polymer({ is: 'single-item-tile', behaviors: [tilebehavior], }); </script> </dom-mdoule>
Comments
Post a Comment