-
Notifications
You must be signed in to change notification settings - Fork 1
/
post-eso-gen.html
104 lines (74 loc) · 2.29 KB
/
post-eso-gen.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="/interact-wrapper.html">
<link rel="import" href="../paper-button/paper-button.html">
<link rel="import" href="post-eso.html">
<!--
`<post-eso-gen>` es un elemento generador de `<post-eso>`s
Uso:
<body>
<post-eso-gen n-post-esos='3' alert-threshold='5'>¡Genera un nuevo Post-Eso!</post-eso>
### Styling
`<post-eso-gen>` hereda todas las custom properties de `<post-eso>`:
Custom property | Description | Default
----------------|-------------|----------
`--post-eso-gen-width` | Ancho del cuadro | 150px
`--post-eso-gen-height` | Alto del cuadro | 150px
`--post-eso-gen-color` | Color del cuadro | yellow
`--post-eso-gen-font-color` | Color de la fuente | blue
`--post-eso-gen-font-family` | Tipo de fuente | inherit
@demo demo/post-eso-gen-index.html
-->
<dom-module id="post-eso-gen">
<template>
<style>
:host {
--post-eso-width: var(--post-eso-gen-width);
--post-eso-height: var(--post-eso-gen-height);
--post-eso-color: var(--post-eso-gen-color);
--post-eso-font-color: var(--post-eso-gen-font-color);
--post-eso-font-family: var(--post-eso-gen-font-family);
}
:host:before {
}
</style>
<div id="container">
<paper-button id="btn-gen" on-tap="getPostEso" raised><content></content></paper-button>
</div>
</template>
<script>
Polymer({
is: 'post-eso-gen',
properties: {
/**
* Cantidad de `<post-eso>`s creados al inicio
*/
nPostEsos: {
type: Number,
value: '0',
},
/**
* Largo mínimo de texto para cambiar a estado de alerta en Post-Eso
*/
alertThreshold: {
type: Number,
value: '',
},
},
/**
* Genera un nuevo Post-Eso en la misma posición
*
*/
getPostEso: function() {
var el = document.createElement('post-eso'),
parent = this.querySelector('paper-button').parentNode;
el.setAttribute('alert-threshold', this.alertThreshold);
Polymer.dom(parent).appendChild( el );
},
ready: function() {
for (var i = 0; i < parseInt(this.nPostEsos); i++) {
this.getPostEso();
}
}
});
</script>
</dom-module>