forked from jifalops/chat-window
-
Notifications
You must be signed in to change notification settings - Fork 0
/
chat-window.html
171 lines (151 loc) · 4.31 KB
/
chat-window.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
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="chat-messages.html">
<link rel="import" href="chat-input.html">
<!--
`chat-window`
A simple and flexible chat window for listing messages.
```
Style hooks:
--chat-window Applied to the chat-window container.
--chat-window-input Applied to the chat-input element.
```
@demo demo/index.html
-->
<dom-module id="chat-window">
<template>
<style>
:host {
display: block;
}
.container {
@apply --chat-window;
}
chat-messages {
/*@apply --chat-window-messages;*/
}
chat-input {
@apply --chat-window-input;
}
</style>
<div class="container">
<slot name="chat-header"></slot>
<chat-messages
author="[[author]]"
author-icon="[[authorIcon]]"
others-icons="[[othersIcons]]"
default-icon="[[defaultIcon]]"
messages="[[messages]]"
date-format="[[dateFormat]]"
auto-scroll="[[autoScroll]]">
</chat-messages>
<slot name="chat-footer"></slot>
<slot name="chat-input"></slot>
<template is="dom-if" if="[[!_hasCustomInput()]]">
<chat-input
single-line="[[singleLine]]"
icon="[[sendIcon]]"
text="{{inputText}}"
send-on-enter="[[sendOnEnter]]"></chat-input>
</template>
</div>
</template>
<script>
Polymer({
is: 'chat-window',
properties: {
/**
* Whether to allow single line messages only. This option has no effect
* if using a custom input element.
*/
singleLine: {
type: Boolean,
value: false,
reflectToAttribute: true
},
/**
* The value of the input field.
*/
inputText: {
type: String,
notify: true
},
/**
* The messages array. Each element must have three properties:
* * `author`: The message's author
* * `text`: The actual message
* * `created`: The timestamp in millis the message was sent.
*/
messages: {
type: Array,
value: function() { return []; }
},
/**
* The author is compared to each message's author to determine how that
* message should be displayed. If the message's author matches, the
* default is to display it using flexbox's self-end alignment.
*/
author: String,
/**
* The paper-icon-button's `icon` or a URL to use as the paper-icon-button's `src`.
*/
sendIcon: {
type: String,
value: 'send'
},
/**
* Whether to send the message when a user presses `enter` on the keyboard.
* The default behavior is to send-on-enter when in single-line input mode,
* and not send if in multiline input mode.
*/
sendOnEnter: Boolean,
/**
* Whether to scroll to the bottom when the messages change.
*/
autoScroll: {
type: Boolean,
value: true
},
/**
* The date format to use when revealing the actual timestamp.
* The default behavior is to use momentjs's `calendar` function.
* See https://momentjs.com/docs/#/parsing/string-format/
* Examples:
* YYYY-MM-DD HH:mm:ss
* MM/DD/YYYY hh:mm a
* Do of MMM, YYYY at hh:mm a
*/
dateFormat: {
type: String,
// value: 'ddd, MMM D, YYYY h:mm a'
},
/**
* The iron-icon's `icon` or a URL to use as the iron-icon's `src`.
*/
authorIcon: {
type: String,
value: 'account-circle'
},
/**
* Icons for other authors. Maps each author to an icon or URL.
*/
othersIcons: Object,
/**
* The default icon/url to use when one isn't defined for an author.
*/
defaultIcon: {
type: String,
value: 'face'
}
},
_hasCustomInput: function () {
var distributed = Polymer.dom(this).childNodes;
for (var i = 0; i < distributed.length; i++) {
if (distributed[i].slot == 'chat-input') {
return true;
}
}
return false;
}
});
</script>
</dom-module>