aboutsummaryrefslogtreecommitdiff
path: root/contexts/data/lib/closure-library/closure/goog/demos/popupemojipicker.html
diff options
context:
space:
mode:
Diffstat (limited to 'contexts/data/lib/closure-library/closure/goog/demos/popupemojipicker.html')
-rw-r--r--contexts/data/lib/closure-library/closure/goog/demos/popupemojipicker.html407
1 files changed, 0 insertions, 407 deletions
diff --git a/contexts/data/lib/closure-library/closure/goog/demos/popupemojipicker.html b/contexts/data/lib/closure-library/closure/goog/demos/popupemojipicker.html
deleted file mode 100644
index 486fd5e..0000000
--- a/contexts/data/lib/closure-library/closure/goog/demos/popupemojipicker.html
+++ /dev/null
@@ -1,407 +0,0 @@
-<!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.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.classes.add(delayedSinglePagePicker.getElement(),
- 'goog-ui-emojipicker');
- }
-</script>
-</body>
-</html>