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
172
173
174
175
176
177
178
|
// Collection of HashOver message element related functions (messages.js)
HashOver.prototype.messages = {
timeouts: {},
// Gets a computed element style by property
computeStyle: function (element, proterty, type)
{
// Check for modern browser support (Mozilla Firefox, Google Chrome)
if (window.getComputedStyle !== undefined) {
// If found, get the computed styles for the element
var computedStyle = window.getComputedStyle (element, null);
// And get the specific property
computedStyle = computedStyle.getPropertyValue (proterty);
} else {
// Otherwise, assume we're in IE
var computedStyle = element.currentStyle[proterty];
}
// Cast value to specified type
switch (type) {
case 'int': {
computedStyle = computedStyle.replace (/px|em/, '');
computedStyle = parseInt (computedStyle) || 0;
break;
}
case 'float': {
computedStyle = computedStyle.replace (/px|em/, '');
computedStyle = parseFloat (computedStyle) || 0.0;
break;
}
}
return computedStyle;
},
// Gets the client height of a message element
getHeight: function (element, setChild)
{
setChild = setChild || false;
var firstChild = element.children[0];
var maxHeight = 80;
// If so, set max-height style to initial
firstChild.style.maxHeight = 'initial';
// Get various computed styles
var borderTop = this.computeStyle (firstChild, 'border-top-width', 'int');
var borderBottom = this.computeStyle (firstChild, 'border-bottom-width', 'int');
var marginBottom = this.computeStyle (firstChild, 'margin-bottom', 'int');
var border = borderTop + borderBottom;
// Calculate its client height
maxHeight = firstChild.clientHeight + border + marginBottom;
// Set its max-height style as well if told to
if (setChild === true) {
firstChild.style.maxHeight = maxHeight + 'px';
} else {
firstChild.style.maxHeight = '';
}
return maxHeight;
},
// Open a message element
open: function (element)
{
// Add classes to indicate message element is open
this.parent.classes.remove (element, 'hashover-message-animated');
this.parent.classes.add (element, 'hashover-message-open');
var maxHeight = this.getHeight (element);
var firstChild = element.children[0];
// Reference to the parent object
var parent = this.parent;
// Remove class indicating message element is open
this.parent.classes.remove (element, 'hashover-message-open');
setTimeout (function () {
// Add class to indicate message element is open
parent.classes.add (element, 'hashover-message-open');
parent.classes.add (element, 'hashover-message-animated');
// Set max-height styles
element.style.maxHeight = maxHeight + 'px';
firstChild.style.maxHeight = maxHeight + 'px';
// Set max-height style to initial after transition
setTimeout (function () {
element.style.maxHeight = 'initial';
firstChild.style.maxHeight = 'initial';
}, 150);
}, 150);
},
// Close a message element
close: function (element)
{
// Set max-height style to specific height before transition
element.style.maxHeight = this.getHeight (element, true) + 'px';
// Reference to the parent object
var parent = this.parent;
setTimeout (function () {
// Remove max-height style from message elements
element.children[0].style.maxHeight = '';
element.style.maxHeight = '';
// Remove classes indicating message element is open
parent.classes.remove (element, 'hashover-message-open');
parent.classes.remove (element, 'hashover-message-error');
}, 150);
},
// Handle message element(s)
show: function (messageText, type, permalink, error, isReply, isEdit)
{
type = type || 'main';
permalink = permalink || '';
error = error || false;
isReply = isReply || false;
isEdit = isEdit || false;
// Reference to this object
var messages = this;
// Decide which message element to use
if (isEdit === true) {
// An edit form message
var container = this.parent.elements.get ('edit-message-container-' + permalink, true);
var message = this.parent.elements.get ('edit-message-' + permalink, true);
} else {
if (isReply !== true) {
// The primary comment form message
var container = this.parent.elements.get ('message-container', true);
var message = this.parent.elements.get ('message', true);
} else {
// Of a reply form message
var container = this.parent.elements.get ('reply-message-container-' + permalink, true);
var message = this.parent.elements.get ('reply-message-' + permalink, true);
}
}
if (messageText !== undefined && messageText !== '') {
// Add message text to element
message.textContent = messageText;
// Add class to indicate message is an error if set
if (error === true) {
this.parent.classes.add (container, 'hashover-message-error');
}
}
// Add class to indicate message element is open
this.open (container);
// Add the comment to message counts
if (this.timeouts[permalink] === undefined) {
this.timeouts[permalink] = {};
}
// Clear necessary timeout
if (this.timeouts[permalink][type] !== undefined) {
clearTimeout (this.timeouts[permalink][type]);
}
// Add timeout to close message element after 10 seconds
this.timeouts[permalink][type] = setTimeout (function () {
messages.close (container);
}, 10000);
}
};
|
