accessibility-developer-tools
Version:
This is a library of accessibility-related testing and utility code.
409 lines (369 loc) • 15.1 kB
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>