scripts/fckeditor2.6.6/editor/plugins/Emoji/emoji.js

   1 /*\r
   2  * FCKEmojiCommand\r
   3  *\r
   4  * LICENSE: This source file is licensed under the terms of the GNU General Public License.\r
   5  *\r
   6  * @package    Magic3 Framework\r
   7  * @author     平田直毅(Naoki Hirata) <naoki@aplo.co.jp>\r
   8  * @copyright  Copyright 2006-2008 Magic3 Project.\r
   9  * @license    http://www.gnu.org/copyleft/gpl.html  GPL License\r
  10  * @version    SVN: $Id: emoji.js 3480 2010-08-16 09:27:01Z fishbone $\r
  11  * @link       http://www.magic3.org\r
  12  */\r
  13 var editorObj = window.parent.InnerDialogLoaded();\r
  14 var FCK                 = editorObj.FCK;\r
  15 var FCKLang             = editorObj.FCKLang;\r
  16 var FCKConfig   = editorObj.FCKConfig;\r
  17 var FCKTools    = editorObj.FCKTools;\r
  18 \r
  19 // スクリプト読み込み\r
  20 function Import(aSrc) {\r
  21    document.write('<scr'+'ipt type="text/javascript" src="' + aSrc + '"></sc' + 'ript>');\r
  22 }\r
  23 Import(FCKConfig.FullBasePath + 'dialog/common/fck_dialog_common.js');\r
  24 Import('../../../../m3/emoji.js');\r
  25 \r
  26 // 画像パス設定\r
  27 var imageDir = '../../../../../images/system/emoji/';\r
  28 \r
  29 function OnLoad()\r
  30 {\r
  31         // 各言語対応の変換\r
  32         editorObj.FCKLanguageManager.TranslatePage(document);\r
  33 \r
  34         // 設定データ読み込み\r
  35         LoadSelection();\r
  36         \r
  37         // ボタンの設定\r
  38         window.parent.SetOkButton(true);\r
  39         window.parent.SetAutoSize(true);\r
  40 }\r
  41 \r
  42 function Ok()\r
  43 {\r
  44         var image = GetE('sel_image');\r
  45         if (image && image.src){\r
  46                 var imgObj = editorObj.FCK.InsertElement('img');\r
  47                 imgObj.src = GetE('sel_image').src;\r
  48         }\r
  49         return true;\r
  50 }\r
  51 // 絵文字プレビュー表示\r
  52 function showEmojiPreview(code)\r
  53 {\r
  54         var name = m3EojiImages[code]['name'];\r
  55         \r
  56         // プレビュー絵文字の名前\r
  57         GetE('previewimagetext').innerHTML = name;\r
  58         \r
  59         var filenameI = m3EojiImages[code]['i'];                // i-mode画像\r
  60         var filenameE = m3EojiImages[code]['e'];                // ez-web画像\r
  61         var filenameS = m3EojiImages[code]['s'];                // softbank画像\r
  62         \r
  63         var imgPathI = imageDir + filenameI + '.gif';\r
  64         imageI = GetE('image_i');\r
  65         imageI.src = imgPathI;\r
  66         imageI.style.display = '';      // 画像を表示\r
  67 }\r
  68 // 絵文字を選択したときの処理\r
  69 function selectEmoji(code)\r
  70 {\r
  71         var name = m3EojiImages[code]['name'];\r
  72         \r
  73         // 選択絵文字の名前\r
  74         GetE('selimagetext').innerHTML = name;\r
  75         \r
  76         var filenameI = m3EojiImages[code]['i'];                // i-mode画像\r
  77         \r
  78         var imgPathI = imageDir + filenameI + '.gif?code=' + code;\r
  79         image = GetE('sel_image');\r
  80         image.src = imgPathI;\r
  81         image.style.display = '';       // 画像を表示\r
  82 }\r
  83 // 設定値読み込み\r
  84 function LoadSelection()\r
  85 {\r
  86         // 絵文字を選択している場合は取得\r
  87         var imgObj = FCK.Selection.GetSelectedElement() ;\r
  88         if (imgObj && imgObj.tagName != 'IMG' && !(imgObj.tagName == 'INPUT' && imgObj.type == 'image')) imgObj = null;\r
  89         if (!imgObj) return;\r
  90 \r
  91         var image = GetE('sel_image');\r
  92         if (image){\r
  93                 image.src = GetAttribute(imgObj, 'src', '');\r
  94                 image.style.display = '';       // 画像を表示\r
  95         }\r
  96 }\r
  97 \r
  98 function create_emojimap()\r
  99 {\r
 100         var imageWidth = 400;\r
 101         var imageHeight = 260;\r
 102         var iconSize = 20;              // 個別のアイコンの高さ、幅\r
 103         var data = '';\r
 104         data += '<table border="0" cellspacing="0" cellpadding="0" width="100%" height="100%" >';\r
 105         data += '<tr>';\r
 106         data += '<td>';\r
 107         data += '<img id="emojiimg" src="emoji_icons.gif" usemap="#emojimap" border="1" width="' + imageWidth + '" height="' + imageHeight + '">';\r
 108         data += "<map name='emojimap'>";\r
 109 \r
 110         // 画像へのクリックマップを作成\r
 111         var px1 = 0; //左上のx座標\r
 112         var py1 = 0; //左上のy座標\r
 113         var px2 = px1 + iconSize; //右下のx座標\r
 114         var py2 = py1 + iconSize; //右下のy座標\r
 115 \r
 116         // 基本絵文字176文字を設定\r
 117         for (var i = 0; i < 176; i++){\r
 118                 var code = i;\r
 119                 var tip = m3EojiImages[i]['name'];\r
 120                 \r
 121                 // タグを出力\r
 122                 data += '<area shape="rect" onmouseover="showEmojiPreview(\'' + code + '\');" coords="' + px1 +',' + py1 + ',' + px2 + ',' + py2 + '" alt="' + tip + '" href="javascript:selectEmoji(\'' + code + '\');">';\r
 123 \r
 124                 // 座標を更新\r
 125                 px1 += iconSize;\r
 126                 px2 = px1 + iconSize;\r
 127 \r
 128                 // マップの右端に到達すると改行\r
 129                 if (px2 > imageWidth){\r
 130                         px1 = 0;\r
 131                         py1 += iconSize;\r
 132                         px2 = px1 + iconSize;\r
 133                         py2 = py1 + iconSize;\r
 134                 }\r
 135         }\r
 136 \r
 137         // 拡張絵文字を設定\r
 138         for (var i = 0; i < 76; i++){\r
 139                 var code = i + 176;\r
 140                 var tip = m3EojiImages[i + 176]['name'];\r
 141                 \r
 142                 // タグを出力\r
 143                 data += '<area shape="rect" onmouseover="showEmojiPreview(\'' + code + '\');" coords="' + px1 + ',' + py1 + ',' + px2 + ',' + py2 + '" alt="' + tip + '" href="javascript:selectEmoji(\'' + code + '\');">';\r
 144 \r
 145                 // 座標を更新\r
 146                 px1 += iconSize;\r
 147                 px2 = px1 + iconSize;\r
 148 \r
 149                 // マップの右端に到達すると改行\r
 150                 if (px2 > imageWidth){\r
 151                         px1 = 0;\r
 152                         py1 += iconSize;\r
 153                         px2 = px1 + iconSize;\r
 154                         py2 = py1 + iconSize;\r
 155                 }\r
 156         }\r
 157         data += "</map>";\r
 158 //      data += '<br>';\r
 159         data += '</td>';\r
 160         data += '</tr>';\r
 161         data += '</table>';\r
 162         return data;\r
 163 }\r
 164 \r