Skip to content

Commit

Permalink
Merge pull request #50 from plumelo/feature/NEOV-198-template-support
Browse files Browse the repository at this point in the history
Cosmoz tabbed template behavior
  • Loading branch information
nomego authored May 24, 2018
2 parents b0c567e + e6ffcdb commit ff3db59
Show file tree
Hide file tree
Showing 20 changed files with 2,567 additions and 1,550 deletions.
8 changes: 7 additions & 1 deletion .eslintrc.json
Original file line number Diff line number Diff line change
Expand Up @@ -88,7 +88,13 @@
"no-use-before-define": "error",
"no-useless-call": "error",
"no-useless-concat": "error",
"one-var": "error",
"one-var": [
"error",
{
"var": "always",
"let": "always"
}
],
"one-var-declaration-per-line": [
"error",
"always"
Expand Down
2 changes: 2 additions & 0 deletions bower.json
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@
"main": "cosmoz-tabs.html",
"dependencies": {
"polymer": "Polymer/polymer#1.9 - 2",
"cosmoz-templatize": "Neovici/cosmoz-templatize#^1.0.0",
"cosmoz-page-router": "Neovici/cosmoz-page-router#^1.0.0",
"iron-resizable-behavior": "PolymerElements/iron-resizable-behavior#1 - 2",
"iron-flex-layout": "PolymerElements/iron-flex-layout#1 - 2",
Expand Down Expand Up @@ -32,6 +33,7 @@
"1.x": {
"dependencies": {
"polymer": "Polymer/polymer#^1.9",
"cosmoz-templatize": "Neovici/cosmoz-templatize#^1.0.0",
"cosmoz-page-router": "Neovici/cosmoz-page-router#^1.0.0",
"iron-resizable-behavior": "PolymerElements/iron-resizable-behavior#^1.0.6",
"iron-flex-layout": "PolymerElements/iron-flex-layout#^1.3.7",
Expand Down
1 change: 1 addition & 0 deletions cosmoz-tab.html
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@

<link rel="import" href="cosmoz-tabbable-behavior.html">
<link rel="import" href="cosmoz-tabbed-behavior.html">
<link rel="import" href="cosmoz-tabbed-template-behavior.html">
<link rel="import" href="cosmoz-tab-card.html">
<link rel="import" href="cosmoz-tabs-styles.html">
<!--
Expand Down
6 changes: 4 additions & 2 deletions cosmoz-tab.js
Original file line number Diff line number Diff line change
Expand Up @@ -56,7 +56,8 @@

behaviors: [
Cosmoz.TabbedBehavior,
Cosmoz.TabbableBehavior
Cosmoz.TabbableBehavior,
Cosmoz.TabbedTemplateBehavior
],

observers: [
Expand All @@ -67,7 +68,8 @@
],

listeners: {
'iron-resize': '_onResize'
'iron-resize': '_onResize',
'tab-first-select': 'render'
},

/**
Expand Down
108 changes: 108 additions & 0 deletions cosmoz-tabbed-template-behavior.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,108 @@
<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../cosmoz-templatize/cosmoz-templatize.html">

<script>
/**
`Cosmoz.TabbedTemplateBehavior`
*/
(function () {
'use strict';

window.Cosmoz = window.Cosmoz || {};

/**
* @polymerBehavior Cosmoz.TabbedTemplateBehavior
*/
Cosmoz.TabbedTemplateBehaviorImpl = {
properties: {

/**
* Set to true to render the template with a small delay even if the tab has never been selected.
*/
prerender: {
type: Boolean,
value: false,
observer: '_prerenderChanged'
}
},

created() {
this._pendingProps = {};
},

attached() {
this._observer = Polymer.dom(this).observeNodes(this._onNodesChanged);
},

detached() {
if (this._observer) {
Polymer.dom(this).unobserveNodes(this._observer);
this._observer = null;
}
this._templateInstance = null;
},

_onNodesChanged() {
if (this._userTemplate) {
return;
}
const template = this.queryEffectiveChildren('template');
if (!template) {
return;
}
this._userTemplate = template;
this._instanceCtor = Cosmoz.Templatize.templatize(template, this, {
instanceProps: {},
parentModel: true,
forwardParentProp: this._forwardHostProp,
forwardHostProp: this._forwardHostProp
});
if (!this.prerender && !this._shouldRender) {
return;
}
this.render();
},

render() {
this._shouldRender = true;
if (!this._userTemplate || this._templateInstance) {
return;
}
this.debounce('_createInstance', this._createInstance, 16);
},

_prerenderChanged(prerender) {
if (!prerender) {
return;
}
this.render();
},

_createInstance() {
if (this._templateInstance || !this._instanceCtor) {
return;
}
const instance = new this._instanceCtor(this._pendingProps || {});
this._templateInstance = instance;
Polymer.dom(this).appendChild(instance.root);
if (instance._flushProperties) {
instance._flushProperties(true);
}
},

_forwardHostProp(prop, value) {
const instance = this._templateInstance;
if (!instance) {
this._pendingProps[prop] = value;
return;
}
if (instance.forwardHostProp) {
instance.forwardHostProp(prop, value);
return;
}
instance[prop] = value;
}
};
Cosmoz.TabbedTemplateBehavior = [Cosmoz.TabbedTemplateBehaviorImpl];
})();
</script>
27 changes: 12 additions & 15 deletions cosmoz-tabs.js
Original file line number Diff line number Diff line change
Expand Up @@ -68,7 +68,7 @@
* @param {HTMLElement} tab The tab to compute icon for
* @return {String} The icon to be used
*/
_computeIcon: function (tab) {
_computeIcon(tab) {
return tab.getIcon();
},

Expand All @@ -78,7 +78,7 @@
* @param {HTMLElement} tab The tab to compute icon style for
* @return {String} The CSS style for the color of the tab
*/
_computeIconStyle: function (tab) {
_computeIconStyle(tab) {
return tab.getIconStyle();
},

Expand All @@ -90,7 +90,7 @@
* @param {type} attrForSelected The `attrForSelected` value
* @return {String} The computed attribute
*/
_computeItemTabAttribute: function (item, index, attrForSelected) {
_computeItemTabAttribute(item, index, attrForSelected) {
return attrForSelected ? item[Polymer.CaseMap.dashToCamelCase(this.attrForSelected)] || item.getAttribute(attrForSelected) : index;
},

Expand All @@ -101,7 +101,7 @@
* @param {Object} hashParam The `hashParam` property
* @return {String} The computed link
*/
_computeItemLink: function (item, hashParam) {
_computeItemLink(item, hashParam) {
if (!hashParam) {
return;
}
Expand All @@ -122,7 +122,7 @@
* @param {String} items The `items` property
* @return {void}
*/
_routeHashParamsChanged: function (changes, hashParam, items) {
_routeHashParamsChanged(changes, hashParam, items) {
if (!(changes && hashParam && items.length) || this._hashReady) {
return;
}
Expand All @@ -146,7 +146,7 @@
* @param {Object} hashParam The hash param
* @return {void}
*/
_selectedItemChanged: function (selected, hashParam) {
_selectedItemChanged(selected, hashParam) {
if (!(hashParam && this._routeHashParams && this.items.length) || !this._hashReady) {
return;
}
Expand All @@ -169,17 +169,14 @@
* @param {Array} items The items property
* @returns {void}
*/
_updateFallbackSelection: function (attr, items) {
var selection = this._selection.get(),
fallback = this.fallbackSelection,
expected;

_updateFallbackSelection(attr, items) {
const selection = this._selection.get();
if (selection && selection.length || !items.length) {
return;
}

expected = attr ? this._valueForItem(items[0]) : '0';

const expected = attr ? this._valueForItem(items[0]) : '0',
fallback = this.fallbackSelection;
if (fallback == null || fallback !== expected && fallback !== '') {
this.fallbackSelection = expected;
}
Expand All @@ -195,7 +192,7 @@
* @param {Event} e.detail.value The new value of the changed property
* @return {void}
*/
_tabPropertyChanged: function (e) {
_tabPropertyChanged(e) {
e.stopPropagation();

if (this.accordion || !(this.items && this.items.length)) {
Expand All @@ -217,7 +214,7 @@
this._updateInvalidSelection(item);
},

_updateInvalidSelection: function (item) {
_updateInvalidSelection(item) {
if (!item || !this.fallbackSelection) {
return;
}
Expand Down
12 changes: 6 additions & 6 deletions demo/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -272,19 +272,19 @@ <h3>explicitly sized <code>cosmoz-tabs</code> with overflowing tab content shows
</div>
<script type="text/javascript">
(function () {
window.addEventListener('WebComponentsReady', function () {
(function () {
var basic = document.getElementById('basic');
window.addEventListener('WebComponentsReady', () => {
(() => {
let basic = document.getElementById('basic');
basic = !basic.set ? basic.firstElementChild : basic;
basic.stringify = function (values) {
basic.stringify = values => {
return JSON.stringify(values);
};
})();

(function () {
(() => {
var hashParam = document.getElementById('hashParam');
hashParam = !hashParam.set ? hashParam.firstElementChild : hashParam;
hashParam.stringify = function (values) {
hashParam.stringify = values => {
return JSON.stringify(values);
};
})();
Expand Down
42 changes: 38 additions & 4 deletions demo/tab.html
Original file line number Diff line number Diff line change
Expand Up @@ -325,19 +325,53 @@ <h3><code>tab-select</code> and <code>tab-first-select</code> events in <code>ac
</template>
</demo-snippet>

<h3><code>cosmoz-tab</code> with <code>template</code> </h3>
<demo-snippet>
<template>
<cosmoz-tabs selected="tab1">
<cosmoz-tab heading="Tab1" name="tab1">
<template>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum massa ante,
maximus in consectetur non, imperdiet ullamcorper risus. Donec vulputate justo nibh.
</p>
</template>
</cosmoz-tab>
<cosmoz-tab heading="Tab2" name="tab2">
<template>
<p>
Fusce consectetur nisi at felis finibus rutrum. Vestibulum fermentum pharetra sem,
vitae tincidunt est mattis tristique. Donec blandit nulla non tellus tincidunt pretium.
Phasellus et purus id dolor venenatis mollis.
</p>
</template>
</cosmoz-tab>
<cosmoz-tab heading="Tab3" name="tab3">
<template>
<p>
Etiam ante dolor, commodo non vestibulum vel, malesuada a nunc. Vestibulum accumsan,
sapien eu gravida consectetur, purus felis lobortis massa, id consequat eros lacus sit amet quam.
Nunc bibendum elit turpis.
</p>
</template>
</cosmoz-tab>
</cosmoz-tabs>
</template>
</demo-snippet>

</div>

<script type="text/javascript">
(function () {
var onSelect = function (e) {
const onSelect = e => {
this.push('items', {event: e.type, heading: e.target.heading, style: e.type === 'tab-select' ? 'color: red' : 'color: green'});
};
window.addEventListener('WebComponentsReady', function () {
window.addEventListener('WebComponentsReady', () => {
[
'events',
'events-accordion'
].forEach(function (id) {
var events = document.getElementById(id);
].forEach(id => {
let events = document.getElementById(id);
events = !events.set ? events.firstElementChild : events;

events.set('items', []);
Expand Down
Loading

0 comments on commit ff3db59

Please sign in to comment.