Skip to content

Commit 317b71d

Browse files
Patrik Kullmancristinecula
Patrik Kullman
authored and
cristinecula
committed
fix: drop iron-flex-layout
Dropped the iron-flex-layout dependency and tried redefining missing styles in the proper contexts. A lot of styles seemed unnecessary from the demo- and test standpoint, let's see if it remains so in production/FE. Otherwise we should add tests. Rewrote the demo with haunted since current version failed for me. Upgraded dependencies. Signed-off-by: Patrik Kullman <[email protected]>
1 parent d096a3c commit 317b71d

File tree

8 files changed

+2194
-989
lines changed

8 files changed

+2194
-989
lines changed

‎cosmoz-data-nav.js‎

Lines changed: 11 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,6 @@
11
/* eslint-disable max-lines */
22
import '@webcomponents/shadycss/entrypoints/apply-shim';
33

4-
import '@polymer/iron-flex-layout/iron-flex-layout';
5-
import '@polymer/iron-flex-layout/iron-flex-layout-classes';
64
import '@polymer/paper-icon-button';
75
import '@polymer/paper-spinner/paper-spinner-lite';
86

@@ -82,7 +80,7 @@ Example:
8280
class CosmozDataNav extends hauntedPolymer('__cache', useCache)(translatable(mixinBehaviors([IronResizableBehavior], PolymerElement))) {
8381
static get template() { // eslint-disable-line max-lines-per-function
8482
return html`
85-
<style include="iron-flex iron-positioning">
83+
<style>
8684
:host {
8785
position: relative;
8886
}
@@ -93,10 +91,18 @@ class CosmozDataNav extends hauntedPolymer('__cache', useCache)(translatable(mix
9391
9492
#items,
9593
#items > ::slotted(.animatable){
96-
@apply --layout-fit;
9794
transform: translateX(0px);
9895
}
9996
97+
.fit,
98+
#items,
99+
#items > ::slotted(.animatable) {
100+
position: absolute;
101+
top: 0;
102+
right: 0;
103+
bottom: 0;
104+
left: 0;
105+
}
100106
:host([animating]) #items > ::slotted(.animatable){
101107
transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1) 0s;
102108
backface-visibility: hidden;
@@ -127,7 +133,7 @@ class CosmozDataNav extends hauntedPolymer('__cache', useCache)(translatable(mix
127133
</div>
128134
<template id="incompleteTemplate">
129135
<cosmoz-bottom-bar-view active incomplete class="fit">
130-
<div slot="scroller-content" class="flex layout horizontal center-justified center">
136+
<div slot="scroller-content">
131137
<paper-spinner-lite active></paper-spinner-lite>
132138
<div style="margin-left: 10px">
133139
<h3><span>[[ _('Data is updating', t) ]]</span></h3>

‎demo/demo.js‎

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
import {
2+
component, html, useMemo, useState, useEffect
3+
} from 'haunted';
4+
import '@polymer/paper-input/paper-textarea.js';
5+
import './helpers/cosmoz-demo-view.js';
6+
import '../cosmoz-data-nav.js';
7+
8+
const asyncs = {},
9+
// eslint-disable-next-line max-lines-per-function
10+
DataNavDemo = function () {
11+
12+
const items = useMemo(() => Array(20).fill('').map((e, i) => i.toString()), []),
13+
[selected, setSelected] = useState(),
14+
[selItem, setSelItem] = useState(),
15+
[instance, setInstance] = useState(),
16+
onNeedData = event => {
17+
const id = event.detail.id,
18+
dataNav = event.target;
19+
if (asyncs[id]) {
20+
clearTimeout(asyncs[id]);
21+
asyncs[id] = null;
22+
}
23+
// eslint-disable-next-line no-console
24+
console.log('on need data', event.target, event.srcElement);
25+
asyncs[id] = setTimeout(() => dataNav.setItemById(id, { id }), 500);
26+
},
27+
computeJSON = index => JSON.stringify(items[index]);
28+
29+
useEffect(() => {
30+
if (instance?.dataset == null) {
31+
return;
32+
}
33+
instance.dataset.idx = selected % 3;
34+
}, [instance]);
35+
36+
return html`
37+
<style>
38+
#container {
39+
max-width: 800px;
40+
}
41+
cosmoz-data-nav {
42+
display: block;
43+
height: 400px;
44+
position: relative;
45+
}
46+
cosmoz-demo-view {
47+
display: flex;
48+
flex-direction: column;
49+
}
50+
[data-idx="0"] {
51+
background-color: blue;
52+
}
53+
[data-idx="1"] {
54+
background-color: red;
55+
}
56+
[data-idx="2"] {
57+
background-color: orange;
58+
}
59+
</style>
60+
<cosmoz-data-nav hash-param="tt"
61+
.items="${ items }"
62+
@need-data="${ onNeedData }"
63+
@selected-changed="${ e => setSelected(e?.detail?.value) }"
64+
@selected-item-changed="${ e => setSelItem(e?.detail?.value) }"
65+
@selected-instance-changed="${ e => setInstance(e?.detail?.value) }"
66+
>
67+
<template>
68+
<cosmoz-demo-view
69+
item="{{ item }}" index="[[ index ]]"
70+
prev-disabled="[[ prevDisabled ]]" next-disabled="[[ nextDisabled ]]">
71+
</cosmoz-demo-view>
72+
</template>
73+
</cosmoz-data-nav>
74+
<paper-textarea value="${ computeJSON(selected) }"></paper-textarea>
75+
<div>Selected: ${ JSON.stringify(selItem) }</div>
76+
`;
77+
};
78+
79+
customElements.define('data-nav-demo', component(DataNavDemo));

‎demo/helpers/cosmoz-demo-view.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,4 @@
11
import '@polymer/paper-icon-button/paper-icon-button';
2-
import '@polymer/iron-flex-layout/iron-flex-layout';
3-
import '@polymer/iron-flex-layout/iron-flex-layout-classes';
42
import '@polymer/iron-icons/iron-icons.js';
53

64
import { PolymerElement } from '@polymer/polymer/polymer-element';
@@ -15,12 +13,14 @@ class CosmozDemoView extends dataNavUserMixin(PolymerElement) {
1513
return html`
1614
<style>
1715
.text {
16+
flex: 1;
17+
flex-basis: 0.000000001px;
1818
font-size: 300px;
1919
line-height: 360px;
2020
text-align: center;
2121
}
2222
</style>
23-
<div class="flex text">[[ item.id ]]</div>
23+
<div class="text">[[ item.id ]]</div>
2424
<div>
2525
<paper-icon-button slot="actions" disabled$="[[ prevDisabled ]]" icon="chevron-left" cosmoz-data-nav-select="-1"></paper-icon-button>
2626
<span>[[ index ]]</span>

‎demo/index.html‎

Lines changed: 2 additions & 81 deletions
Original file line numberDiff line numberDiff line change
@@ -5,92 +5,13 @@
55
<meta charset="utf-8">
66
<meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
77
<title>cosmoz-data-nav demo</title>
8+
<script type="module" src="./demo.js"></script>
89
</head>
910

1011
<body unresolved>
1112
<div id="container" class="vertical-section-container centered">
1213
<h3>Basic <code>cosmoz-data-nav</code>.</h3>
13-
<dom-bind id="basic">
14-
<template>
15-
<cosmoz-data-nav items="[[ items ]]" index-as="index" as="item"
16-
on-need-data="onNeedData" selected="{{ selected }}" selected-item="{{ selItem }}" hash-param="tt">
17-
<template>
18-
<cosmoz-demo-view class="fit layout vertical"
19-
item="{{ item }}" index="[[ index ]]" data-idx$="[[ computeColorIndex(index) ]]"
20-
prev-disabled="[[ prevDisabled ]]" next-disabled="[[ nextDisabled ]]">
21-
</cosmoz-demo-view>
22-
</template>
23-
</cosmoz-data-nav>
24-
<paper-textarea value="[[ computeJSON(selected, items.*) ]]">
25-
</paper-textarea>
26-
<div>Selected: [[ toJSON(selItem) ]]</div>
27-
</template>
28-
</dom-bind>
14+
<data-nav-demo></data-nav-demo>
2915
</div>
30-
31-
<script type="module">
32-
import '@polymer/polymer/lib/elements/custom-style.js';
33-
import '@polymer/polymer/lib/elements/dom-bind.js';
34-
import '@polymer/paper-input/paper-textarea.js';
35-
import './helpers/cosmoz-demo-view.js';
36-
import '../cosmoz-data-nav.js';
37-
38-
const container = document.createElement('template');
39-
container.innerHTML = `
40-
<custom-style>
41-
<style include="iron-flex">
42-
#container {
43-
max-width: 800px;
44-
}
45-
cosmoz-data-nav {
46-
display: block;
47-
height: 400px;
48-
position: relative;
49-
}
50-
[data-idx="0"]{
51-
background-color: blue;
52-
}
53-
[data-idx="1"]{
54-
background-color: red;
55-
}
56-
[data-idx="2"]{
57-
background-color: orange;
58-
}
59-
</style>
60-
</custom-style>
61-
`;
62-
document.body.appendChild(container.content);
63-
64-
import { Base } from '@polymer/polymer/polymer-legacy';
65-
66-
let basic = document.getElementById('basic');
67-
const items = Array(20).fill('').map((e, i) => i.toString()),
68-
asyncs = {};
69-
70-
basic = !basic.set ? basic.firstElementChild : basic;
71-
72-
Object.assign(basic, {
73-
computeColorIndex: index => index % 3,
74-
onNeedData: (event, detail) => {
75-
const id = detail.id;
76-
if (asyncs[id]) {
77-
Base.cancelAsync(asyncs[id]);
78-
asyncs[id] = null;
79-
}
80-
// eslint-disable-next-line no-console
81-
console.log('on need data');
82-
asyncs[id] = Base.async(() => {
83-
event.target.setItemById(detail.id, { id: detail.id });
84-
}, 500);
85-
return { id: detail.id };
86-
},
87-
computeJSON(index) {
88-
return JSON.stringify(this.items[index]);
89-
},
90-
toJSON: item => JSON.stringify(item)
91-
});
92-
93-
basic.set('items', items);
94-
</script>
9516
</body>
9617
</html>

0 commit comments

Comments
 (0)