Andreas Hocevar
409 lines
15 KiB
HTML
409 lines
15 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<!--
|
|
Copyright 2010 The Closure Library Authors. All Rights Reserved.
|
|
|
|
Use of this source code is governed by the Apache License, Version 2.0.
|
|
See the COPYING file for details.
|
|
-->
|
|
<head>
|
|
<title>Popup Emoji Picker</title>
|
|
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
|
|
<script type="text/javascript" src="../base.js"></script>
|
|
<script type="text/javascript">
|
|
goog.require('goog.dom.classlist');
|
|
goog.require('goog.ui.emoji.PopupEmojiPicker');
|
|
goog.require('goog.ui.emoji.EmojiPicker');
|
|
goog.require('goog.ui.emoji.SpriteInfo');
|
|
</script>
|
|
<link rel="stylesheet" href="css/demo.css">
|
|
<link rel="stylesheet" href="css/emojipicker.css">
|
|
<link rel="stylesheet" href="css/emojisprite.css">
|
|
<style type="text/css">
|
|
/* TabPane styles */
|
|
.goog-tabpane {
|
|
background: threedface;
|
|
padding-left: 1px;
|
|
}
|
|
|
|
.goog-tabpane-tabs {
|
|
list-style: none;
|
|
margin: 0px;
|
|
padding: 0px;
|
|
}
|
|
|
|
.goog-tabpane-cont {
|
|
overflow: auto;
|
|
clear: both;
|
|
background: threedface;
|
|
border: 1px solid;
|
|
border-color: threedhighlight threedshadow threedshadow threedhighlight;
|
|
padding: 2px;
|
|
}
|
|
|
|
.goog-tabpane-tab, .goog-tabpane-tab-selected {
|
|
display: block;
|
|
float: left;
|
|
padding: 0px 3ex;
|
|
background: threedface;
|
|
border: 1px solid;
|
|
border-color: threedhighlight threedshadow threedface threedhighlight;
|
|
margin: 0px;
|
|
}
|
|
|
|
.goog-tabpane-tab {
|
|
margin-top: 0px;
|
|
}
|
|
|
|
.goog-tabpane-tab-selected {
|
|
padding-bottom: 2px;
|
|
padding-top: 2px;
|
|
position: relative;
|
|
top: 1px;
|
|
font-weight: bold;
|
|
}
|
|
|
|
/* Emojipicker styles */
|
|
.singlePagePicker .goog-palette {
|
|
border: 1px solid black;
|
|
}
|
|
|
|
.popupButton {
|
|
display: block;
|
|
width: 100px;
|
|
text-align: center;
|
|
padding: 10px;
|
|
font: normal 0.8em verdana,sans-serif;
|
|
border: 1px solid #000;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h3>Popup Emoji Picker Demo</h3>
|
|
This is a demo of popupemojipickers and docked emoji pickers. Selecting an
|
|
emoji inserts a pseudo image tag into the text area with the id of that emoji.
|
|
|
|
<h4>Sprited Emojipicker (contains a mix of sprites and non-sprites):</h4>
|
|
<div id="spriteDock1" class="singlePagePicker"></div>
|
|
|
|
<h4>Sprited Progressively-rendered Emojipicker (contains a mix of sprites and
|
|
non-sprites):</h4>
|
|
<div id="spriteDock2" class="singlePagePicker"></div>
|
|
<h4>Popup Emoji:</h4>
|
|
<a href="javascript:void(0)" class="popupButton" id="button1">Gimme some emoji</a>
|
|
<hr>
|
|
|
|
<h4>Fast-load Progressive Sprited Emojipicker</h4>
|
|
<div id="fastLoad1" class="singlePagePicker"></div>
|
|
|
|
<h4>Fast-load Non-progressive Sprited Emojipicker</h4>
|
|
<div id="fastLoad2" class="singlePagePicker"></div>
|
|
|
|
<div id="spriteDock3" class="singlePagePicker"></div>
|
|
|
|
<h4>Docked emoji:</h4>
|
|
<div id="emojiDock"></div>
|
|
|
|
<h4>Single Page of Emoji</h4>
|
|
<div id="singlePageEmojiPicker" class="singlePagePicker"></div>
|
|
|
|
<h4>Delayed load popup picker:</h4>
|
|
<a href="javascript:void(0)" class="popupButton" id="button2">More emoji</a>
|
|
|
|
<h4>Delayed load docked picker:</h4>
|
|
<a href="javascript:void(0)" id="delayedLoadDockDiv" class="popupButton"
|
|
onclick="loadPicker()">
|
|
Click to load
|
|
</a>
|
|
<div id="delayedLoadDock" class="singlePagePicker"></div>
|
|
|
|
<textarea rows="20" cols="200" id="text">
|
|
|
|
</textarea>
|
|
|
|
<script type="text/javascript">
|
|
var emojiGroup1 = [
|
|
'Emoji 1',
|
|
[
|
|
['emoji/200.gif', 'std.200'],
|
|
['emoji/201.gif', 'std.201'],
|
|
['emoji/202.gif', 'std.202'],
|
|
['emoji/203.gif', 'std.203'],
|
|
['emoji/204.gif', 'std.204'],
|
|
['emoji/205.gif', 'std.205'],
|
|
['emoji/206.gif', 'std.206'],
|
|
['emoji/2BC.gif', 'std.2BC'],
|
|
['emoji/2BD.gif', 'std.2BD'],
|
|
['emoji/2BE.gif', 'std.2BE'],
|
|
['emoji/2BF.gif', 'std.2BF'],
|
|
['emoji/2C0.gif', 'std.2C0'],
|
|
['emoji/2C1.gif', 'std.2C1'],
|
|
['emoji/2C2.gif', 'std.2C2'],
|
|
['emoji/2C3.gif', 'std.2C3'],
|
|
['emoji/2C4.gif', 'std.2C4'],
|
|
['emoji/2C5.gif', 'std.2C5'],
|
|
['emoji/2C6.gif', 'std.2C6'],
|
|
['emoji/2C7.gif', 'std.2C7'],
|
|
['emoji/2C8.gif', 'std.2C8'],
|
|
['emoji/2C9.gif', 'std.2C9'],
|
|
['emoji/2CA.gif', 'std.2CA'],
|
|
['emoji/2CB.gif', 'std.2CB'],
|
|
['emoji/2CC.gif', 'std.2CC'],
|
|
['emoji/2CD.gif', 'std.2CD'],
|
|
['emoji/2CE.gif', 'std.2CE']
|
|
]];
|
|
|
|
var emojiGroup2 = [
|
|
'Emoji 2',
|
|
[
|
|
['emoji/2D0.gif', 'std.2D0'],
|
|
['emoji/2D1.gif', 'std.2D1'],
|
|
['emoji/2D2.gif', 'std.2D2'],
|
|
['emoji/2D3.gif', 'std.2D3'],
|
|
['emoji/2D4.gif', 'std.2D4'],
|
|
['emoji/2D5.gif', 'std.2D5'],
|
|
['emoji/2D6.gif', 'std.2D6'],
|
|
['emoji/2D7.gif', 'std.2D7'],
|
|
['emoji/2D8.gif', 'std.2D8'],
|
|
['emoji/2D9.gif', 'std.2D9'],
|
|
['emoji/2DA.gif', 'std.2DA'],
|
|
['emoji/2DB.gif', 'std.2DB'],
|
|
['emoji/2DC.gif', 'std.2DC'],
|
|
['emoji/2DD.gif', 'std.2DD'],
|
|
['emoji/2DE.gif', 'std.2DE'],
|
|
['emoji/2DF.gif', 'std.2DF'],
|
|
['emoji/2E0.gif', 'std.2E0'],
|
|
['emoji/2E1.gif', 'std.2E1'],
|
|
['emoji/2E2.gif', 'std.2E2'],
|
|
['emoji/2E3.gif', 'std.2E3']
|
|
]];
|
|
|
|
var emojiGroup3 = [
|
|
'Emoji 3',
|
|
[
|
|
['emoji/2E4.gif', 'std.2E4'],
|
|
['emoji/2E5.gif', 'std.2E5'],
|
|
['emoji/2E6.gif', 'std.2E6'],
|
|
['emoji/2E7.gif', 'std.2E7'],
|
|
['emoji/2E8.gif', 'std.2E8'],
|
|
['emoji/2E9.gif', 'std.2E9'],
|
|
['emoji/2EA.gif', 'std.2EA'],
|
|
['emoji/2EB.gif', 'std.2EB'],
|
|
['emoji/2EC.gif', 'std.2EC'],
|
|
['emoji/2ED.gif', 'std.2ED'],
|
|
['emoji/2EE.gif', 'std.2EE'],
|
|
['emoji/2EF.gif', 'std.2EF'],
|
|
['emoji/2F0.gif', 'std.2F0'],
|
|
['emoji/2F1.gif', 'std.2F1'],
|
|
['emoji/2F2.gif', 'std.2F2'],
|
|
['emoji/2F3.gif', 'std.2F3'],
|
|
['emoji/2F4.gif', 'std.2F4'],
|
|
['emoji/2F5.gif', 'std.2F5'],
|
|
['emoji/2F6.gif', 'std.2F6'],
|
|
['emoji/2F7.gif', 'std.2F7']
|
|
]
|
|
];
|
|
|
|
var sprite = 'emoji/sprite.png';
|
|
var sprite2 = 'emoji/sprite2.png';
|
|
|
|
/**
|
|
* Creates a SpriteInfo object with the specified properties. If the image is
|
|
* sprited via CSS, then only the first parameter needs a value. If the image
|
|
* is sprited via metadata, then the first parameter should be left null.
|
|
*
|
|
* @param {?string} cssClass CSS class to properly display the sprited image.
|
|
* @param {string=} opt_url Url of the sprite image.
|
|
* @param {number=} opt_width Width of the image being sprited.
|
|
* @param {number=} opt_height Height of the image being sprited.
|
|
* @param {number=} opt_xOffset Positive x offset of the image being sprited
|
|
* within the sprite.
|
|
* @param {number=} opt_yOffset Positive y offset of the image being sprited
|
|
* within the sprite.
|
|
* @param {boolean=} opt_animated Whether the sprite info is for an animated
|
|
* emoji.
|
|
*/
|
|
function si(cssClass, opt_url, opt_width, opt_height, opt_xOffset,
|
|
opt_yOffset, opt_animated) {
|
|
return new goog.ui.emoji.SpriteInfo(cssClass, opt_url, opt_width,
|
|
opt_height, opt_xOffset, opt_yOffset, opt_animated);
|
|
}
|
|
|
|
// This group contains a mix of sprited emoji via css, sprited emoji via
|
|
// metadata, and non-sprited emoji.
|
|
var spritedEmoji1 = [
|
|
'Emoji 1',
|
|
[
|
|
['emoji/200.gif', 'std.200', si('SPRITE_200')],
|
|
['emoji/201.gif', 'std.201', si('SPRITE_201')],
|
|
['emoji/202.gif', 'std.202', si('SPRITE_202')],
|
|
['emoji/203.gif', 'std.203', si('SPRITE_203')],
|
|
['emoji/204.gif', 'std.204', si('SPRITE_204')],
|
|
['emoji/205.gif', 'std.205', si('SPRITE_205')],
|
|
['emoji/206.gif', 'std.206', si('SPRITE_206')],
|
|
['emoji/2BC.gif', 'std.2BC', si('SPRITE_2BC')],
|
|
['emoji/2BD.gif', 'std.2BD', si('SPRITE_2BD')],
|
|
['emoji/2BE.gif', 'std.2BE', si(null, sprite, 18, 18, 36, 54)],
|
|
['emoji/2BF.gif', 'std.2BF', si(null, sprite, 18, 18, 0, 126)],
|
|
['emoji/2C0.gif', 'std.2C0', si(null, sprite, 18, 18, 18, 305)],
|
|
['emoji/2C1.gif', 'std.2C1', si(null, sprite, 18, 18, 0, 287)],
|
|
['emoji/2C2.gif', 'std.2C2', si(null, sprite, 18, 18, 18, 126)],
|
|
['emoji/2C3.gif', 'std.2C3', si(null, sprite, 18, 18, 36, 234)],
|
|
['emoji/2C4.gif', 'std.2C4', si(null, sprite, 18, 18, 36, 72)],
|
|
['emoji/2C5.gif', 'std.2C5', si(null, sprite, 18, 18, 54, 54)],
|
|
['emoji/2C6.gif', 'std.2C6'],
|
|
['emoji/2C7.gif', 'std.2C7'],
|
|
['emoji/2C8.gif', 'std.2C8'],
|
|
['emoji/2C9.gif', 'std.2C9'],
|
|
['emoji/2CA.gif', 'std.2CA'],
|
|
['emoji/2CB.gif', 'std.2CB'],
|
|
['emoji/2CC.gif', 'std.2CC'],
|
|
['emoji/2CD.gif', 'std.2CD'],
|
|
['emoji/2CE.gif', 'std.2CE']
|
|
]];
|
|
|
|
// This group contains a mix of sprited emoji via css, sprited emoji via
|
|
// metadata, and non-sprited emoji.
|
|
var spritedEmoji2 = [
|
|
'Emoji 1',
|
|
[
|
|
['emoji/200.gif', 'std.200', si('SPRITE_200')],
|
|
['emoji/201.gif', 'std.201', si('SPRITE_201')],
|
|
['emoji/202.gif', 'std.202', si('SPRITE_202')],
|
|
['emoji/203.gif', 'std.203', si('SPRITE_203')],
|
|
['emoji/204.gif', 'std.204', si('SPRITE_204')],
|
|
['emoji/205.gif', 'std.205', si('SPRITE_205')],
|
|
['emoji/206.gif', 'std.206', si('SPRITE_206')],
|
|
['emoji/2BC.gif', 'std.2BC', si('SPRITE_2BC')],
|
|
['emoji/2BD.gif', 'std.2BD', si('SPRITE_2BD')],
|
|
['emoji/2BE.gif', 'std.2BE', si(null, sprite, 18, 18, 36, 54)],
|
|
['emoji/2BF.gif', 'std.2BF', si(null, sprite, 18, 18, 0, 126)],
|
|
['emoji/2C0.gif', 'std.2C0', si(null, sprite, 18, 18, 18, 305)],
|
|
['emoji/2C1.gif', 'std.2C1', si(null, sprite, 18, 18, 0, 287)],
|
|
['emoji/2C2.gif', 'std.2C2', si(null, sprite, 18, 18, 18, 126)],
|
|
['emoji/2C3.gif', 'std.2C3', si(null, sprite, 18, 18, 36, 234)],
|
|
['emoji/2C4.gif', 'std.2C4', si(null, sprite, 18, 18, 36, 72)],
|
|
['emoji/2C5.gif', 'std.2C5', si(null, sprite, 18, 18, 54, 54)],
|
|
['emoji/2C6.gif', 'std.2C6'],
|
|
['emoji/2C7.gif', 'std.2C7'],
|
|
['emoji/2C8.gif', 'std.2C8'],
|
|
['emoji/2C9.gif', 'std.2C9'],
|
|
['emoji/2CA.gif', 'std.2CA', si(null, sprite2, 18, 20, 36, 72, 1)],
|
|
['emoji/2E3.gif', 'std.2E3', si(null, sprite2, 18, 18, 0, 0, 1)],
|
|
['emoji/2EF.gif', 'std.2EF', si(null, sprite2, 18, 20, 0, 300, 1)],
|
|
['emoji/2F1.gif', 'std.2F1', si(null, sprite2, 18, 18, 0, 320, 1)]
|
|
]];
|
|
|
|
var emojiGroups = [emojiGroup1, emojiGroup2, emojiGroup3]
|
|
var defaultImgUrl = 'emoji/none.gif';
|
|
|
|
// Handles clicking on an emoji.
|
|
function onEmojiSelected(e) {
|
|
var text = goog.dom.getElement('text');
|
|
var emoji = this.getSelectedEmoji();
|
|
text.value = text.value + '<img src="' + emoji.getUrl() + '" goomoji="' +
|
|
emoji.getId() + '">\n';
|
|
}
|
|
|
|
/**
|
|
* Creates a new emoji picker according to the desired specifications.
|
|
*
|
|
* @param {boolean} popup Whether the emojipicker should be a popup.
|
|
* @param {Array.<Object>} emojiGroups Emoji groups to add to the picker.
|
|
* @param {string} defaultImgUrl URL of the default image for the picker.
|
|
* @param {string} elementId Id of the element to attach the popup picker to,
|
|
* or to append the docked picker to.
|
|
* @param {boolean=} opt_delayedLoad Whether the emojipicker should use
|
|
* delayed image loading.
|
|
* @param {number=} opt_numRows Optional number of rows to specify for the
|
|
* emojipicker's palette.
|
|
* @param {number=} opt_numCols Optional number of columns to specify for the
|
|
* emojipicker's palette.
|
|
* @param {boolean=} opt_progressiveRender Whether to render the sprited
|
|
* emojipicker progressively.
|
|
* @return {goog.ui.emoji.EmojiPicker|goog.ui.emoji.PopupEmojiPicker} The
|
|
* constructed and rendered emojipicker.
|
|
*/
|
|
function createEmojiPicker(popup, emojiGroups, defaultImgUrl, elementId,
|
|
opt_delayedLoad, opt_numRows, opt_numCols,
|
|
opt_progressiveRender) {
|
|
var picker = popup ? new goog.ui.emoji.PopupEmojiPicker(defaultImgUrl) :
|
|
new goog.ui.emoji.EmojiPicker(defaultImgUrl);
|
|
for (var i = 0; i < emojiGroups.length; i++) {
|
|
picker.addEmojiGroup(emojiGroups[i][0], emojiGroups[i][1]);
|
|
}
|
|
if (!popup) {
|
|
picker.setTabLocation(goog.ui.TabPane.TabLocation.BOTTOM);
|
|
}
|
|
if (opt_delayedLoad) {
|
|
picker.setDelayedLoad(opt_delayedLoad);
|
|
}
|
|
if (opt_numRows) {
|
|
picker.setNumRows(opt_numRows);
|
|
}
|
|
if (opt_numCols) {
|
|
picker.setNumColumns(opt_numCols);
|
|
}
|
|
if (opt_progressiveRender) {
|
|
picker.setProgressiveRender(true);
|
|
}
|
|
picker.render();
|
|
var elem = document.getElementById(elementId);
|
|
if (popup) {
|
|
picker.attach(elem);
|
|
} else {
|
|
elem.appendChild(picker.getElement());
|
|
}
|
|
goog.events.listen(
|
|
picker, goog.ui.Component.EventType.ACTION, onEmojiSelected);
|
|
return picker;
|
|
}
|
|
|
|
// Normal popup non-delayed load emojipicker.
|
|
createEmojiPicker(true, emojiGroups, defaultImgUrl, 'button1');
|
|
|
|
// Docked non-delayed load emojipicker.
|
|
createEmojiPicker(false, emojiGroups, defaultImgUrl, 'emojiDock', false,
|
|
3, 20);
|
|
|
|
// Single page non-delayed load emojipicker.
|
|
createEmojiPicker(false, [emojiGroup1], defaultImgUrl,
|
|
'singlePageEmojiPicker');
|
|
|
|
// Delayed load popup emojipicker.
|
|
var delayedPopupPicker = createEmojiPicker(true, emojiGroups, defaultImgUrl,
|
|
'button2', true);
|
|
delayedPopupPicker.loadImages();
|
|
|
|
// Delayed load single page docked picker. Loaded by clicking on a button.
|
|
var delayedSinglePagePicker = createEmojiPicker(false, [emojiGroup1],
|
|
defaultImgUrl, 'delayedLoadDock', true);
|
|
|
|
// Non-delayed load sprited docked picker.
|
|
var spritedDockedPicker = createEmojiPicker(false, [spritedEmoji1],
|
|
defaultImgUrl, 'spriteDock1', false, 3, 6);
|
|
|
|
// Non-delayed load sprited docked picker.
|
|
var spritedDockedPicker2 = createEmojiPicker(false, [spritedEmoji1],
|
|
defaultImgUrl, 'spriteDock2', false, 2, 10, true);
|
|
|
|
// Fast-loading progressive sprited docked picker.
|
|
var fastLoadPicker1 = createEmojiPicker(false, [spritedEmoji2],
|
|
defaultImgUrl, 'fastLoad1', false, 2, 10, true);
|
|
|
|
// Fast-loading non-progressive sprited docked picker.
|
|
var fastLoadPicker2 = createEmojiPicker(false, [spritedEmoji2],
|
|
defaultImgUrl, 'fastLoad2', false, 2, 10, false);
|
|
|
|
function loadPicker() {
|
|
goog.style.setStyle(document.getElementById('delayedLoadDockDiv'),
|
|
'display',
|
|
'none');
|
|
delayedSinglePagePicker.loadImages();
|
|
goog.dom.classlist.add(delayedSinglePagePicker.getElement(),
|
|
'goog-ui-emojipicker');
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|