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
|
// Copyright 2008 The Closure Library Authors. All Rights Reserved.
//
// Licensed under the Apache License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at
//
// http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS-IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.
/**
* @fileoverview Progressive Emoji Palette renderer implementation.
*
*/
goog.provide('goog.ui.emoji.ProgressiveEmojiPaletteRenderer');
goog.require('goog.dom.TagName');
goog.require('goog.style');
goog.require('goog.ui.emoji.EmojiPaletteRenderer');
/**
* Progressively renders an emoji palette. The progressive renderer tries to
* use img tags instead of background-image for sprited emoji, since most
* browsers render img tags progressively (i.e., as the data comes in), while
* only very new browsers render background-image progressively.
*
* @param {string} defaultImgUrl Url of the img that should be used to fill up
* the cells in the emoji table, to prevent jittering. Will be stretched
* to the emoji cell size. A good image is a transparent dot.
* @constructor
* @extends {goog.ui.emoji.EmojiPaletteRenderer}
* @final
*/
goog.ui.emoji.ProgressiveEmojiPaletteRenderer = function(defaultImgUrl) {
goog.ui.emoji.EmojiPaletteRenderer.call(this, defaultImgUrl);
};
goog.inherits(
goog.ui.emoji.ProgressiveEmojiPaletteRenderer,
goog.ui.emoji.EmojiPaletteRenderer);
/** @override */
goog.ui.emoji.ProgressiveEmojiPaletteRenderer.prototype
.buildElementFromSpriteMetadata = function(dom, spriteInfo, displayUrl) {
var width = spriteInfo.getWidthCssValue();
var height = spriteInfo.getHeightCssValue();
var x = spriteInfo.getXOffsetCssValue();
var y = spriteInfo.getYOffsetCssValue();
// Need this extra div for proper vertical centering.
var inner = dom.createDom(goog.dom.TagName.IMG, {'src': displayUrl});
var el = dom.createDom(
goog.dom.TagName.DIV, goog.getCssName('goog-palette-cell-extra'), inner);
goog.style.setStyle(el, {
'width': width,
'height': height,
'overflow': 'hidden',
'position': 'relative'
});
goog.style.setStyle(inner, {'left': x, 'top': y, 'position': 'absolute'});
return el;
};
/** @override */
goog.ui.emoji.ProgressiveEmojiPaletteRenderer.prototype
.updateAnimatedPaletteItem = function(item, animatedImg) {
// Just to be safe, we check for the existence of the img element within this
// palette item before attempting to modify it.
/** @type {!HTMLImageElement|undefined} */
var img;
var el = item.firstChild;
while (el) {
if ('IMG' == /** @type {!Element} */ (el).tagName) {
img = /** @type {!HTMLImageElement} */ (el);
break;
}
el = el.firstChild;
}
if (!img) {
return;
}
img.width = animatedImg.width;
img.height = animatedImg.height;
goog.style.setStyle(img, {'left': 0, 'top': 0});
img.src = animatedImg.src;
};
|
