chao
/
mini_cocopi


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