diff options
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.html | 407 |
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> |