| <!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> |
