scripts/ckeditor4.1.0/plugins/googlemaps/plugin.js

   1 /**
   2  * Magic3 CKEditorプラグイン
   3  *
   4  * JavaScript 1.5
   5  *
   6  * LICENSE: This source file is licensed under the terms of the GNU General Public License.
   7  *
   8  * @package    Magic3 Framework
   9  * @author     平田直毅(Naoki Hirata) <naoki@aplo.co.jp>
  10  * @copyright  Copyright 2006-2013 Magic3 Project.
  11  * @license    http://www.gnu.org/copyleft/gpl.html  GPL License
  12  * @version    SVN: $Id: plugin.js 6003 2013-05-16 07:33:07Z fishbone $
  13  * @link       http://www.magic3.org
  14  */
  15 (function() {
  16         // デフォルト値
  17         CKEDITOR.config.googlemaps_width = 500;         // マップデ幅
  18         CKEDITOR.config.googlemaps_height = 300;        // マップ高さ
  19 //      CKEDITOR.config.googlemaps_centerLat = 35.594757;               // マップ緯度
  20 //      CKEDITOR.config.googlemaps_centerLon = 139.620739;              // マップ経度
  21 //      CKEDITOR.config.googlemaps_zoom = 11;                                   // ズームレベル
  22
  23         var path = CKEDITOR.plugins.getPath('googlemaps');
  24         //CKEDITOR.scriptLoader.load(CKEDITOR.getUrl(CKEDITOR.plugins.getPath('googlemaps')) + 'dialogs/googlemaps.js');
  25         CKEDITOR.scriptLoader.load(CKEDITOR.getUrl(path) + 'dialogs/googlemaps.js');
  26         CKEDITOR.scriptLoader.load(CKEDITOR.getUrl(path) + 'dialogs/polyline.js');
  27
  28 /*      function createFakeElement(editor, realElement) {
  29                 var fakeElement = editor.createFakeParserElement(realElement, 'cke_script', 'script', false);
  30                 return fakeElement;
  31         }*/
  32
  33         CKEDITOR.plugins.add( 'googlemaps', {
  34                 lang: 'en,ja',
  35                 icons: 'googlemaps',
  36
  37                 init: function(editor){
  38                         // ダイアログ登録
  39                         editor.addCommand('googlemaps', new CKEDITOR.dialogCommand('googlemaps'));
  40                         CKEDITOR.dialog.add('googlemaps', this.path + 'dialogs/main.js');
  41
  42                         // ツールバーボタン登録
  43                         if (editor.ui.addButton){
  44                                 editor.ui.addButton('Googlemaps', {
  45                                         label: editor.lang.googlemaps.toolbar,
  46                                         command: 'googlemaps',
  47                                         toolbar: 'others'
  48                                 });
  49                         }
  50
  51                         // オブジェクトダブルクリック時にダイアログを開く
  52                         editor.on( 'doubleclick', function( evt ) {
  53                                 var element = evt.data.element;
  54                                 var className = element.$.className;
  55                                 if (element.is('img') && element.data('cke-real-element-type') == 'div' && className.lastIndexOf('cke_googlemaps', 0) == 0) evt.data.dialog = 'googlemaps';
  56                         });
  57                 },
  58                 // 初期起動時、ソースモード切替時に呼び出し
  59                 afterInit: function(editor){
  60                         // SCRIPTタグのGoogleマップ情報読み込み
  61                         var div = document.createElement('div');
  62                         div.innerHTML = editor.getData();
  63                         var scripts = div.getElementsByTagName('script');
  64                         for (var i = 0; i < scripts.length; i++) {
  65                                 var content = scripts[i].outerHTML;
  66                                 if (GoogleMapsHandler.detectMapScript(content)){                // マップ情報の場合は保存
  67                                         var mapInfo = GoogleMapsHandler.createNew();
  68                                         mapInfo.parse(content);
  69                                 }
  70                         }
  71 /*                      var jScripts = $(editor.getData()).filter("script");
  72                         jScripts.each(function(index){
  73                                 var content = $(this).get(0).outerHTML;
  74                                 if (GoogleMapsHandler.detectMapScript(content)){                // マップ情報の場合は保存
  75                                         var mapInfo = GoogleMapsHandler.createNew();
  76                                         mapInfo.parse(content);
  77                                 }
  78                         });*/
  79
  80                         var dataProcessor = editor.dataProcessor;
  81                         var dataFilter = dataProcessor && dataProcessor.dataFilter;
  82                         if (dataFilter) {
  83                                 dataFilter.addRules({
  84                                         elements: {
  85                                                 div: function(element){
  86                                                         // Googleマップの埋め込みタグの場合は固定マップ画像を設定
  87                                                         var objectId = element.attributes.id;
  88                                                         var className = element.attributes['class'];
  89                                                         if (className == 'm3googlemaps'){
  90                                                                 // マップ情報取得
  91                                                                 var mapNumber;
  92                                                                 var regExp = /gmap(\d+)/;
  93                                                                 if (regExp.test(objectId)) mapNumber = RegExp.$1;
  94                                                                 var mapInfo = GoogleMapsHandler.getMap(mapNumber);
  95                                                                 if (mapInfo){
  96                                                                         // 幅、高さを設定
  97                                                                         var width, height;
  98                                                                         var style = element.attributes.style;
  99                                                                         if ((/width:\s*(\d+)px/i).test(style)) width = RegExp.$1;
 100                                                                         if ((/height:\s*(\d+)px/i).test(style)) height = RegExp.$1;
 101                                                                         if (!width || !height){
 102                                                                                 width = CKEDITOR.config.googlemaps_width;
 103                                                                                 height = CKEDITOR.config.googlemaps_height;
 104                                                                         }
 105                                                                         mapInfo.setDimensions(width, height);
 106
 107                                                                         // 画像を背景に配置しリサイズ不可にする
 108                                                                         CKEDITOR.addCss(
 109                                                                                 'img.cke_googlemaps' + mapNumber +
 110                                                                                 '{' +
 111                                                                                         'background-image: url(' + mapInfo.generateStaticMap() + ');' +
 112                                                                                         'background-position: center center;' +
 113                                                                                         'background-repeat: no-repeat;' +
 114                                                                                         'border: 0px;' +
 115                                                                                         'width: ' + width + 'px;' +
 116                                                                                         'height: ' + height + 'px;' +
 117                                                                                 '}'
 118                                                                         );
 119                                                                         var fakeImage = editor.createFakeParserElement(element, 'cke_googlemaps' + mapNumber, 'div', false/*リサイズ不可*/);
 120                                                                         return fakeImage;
 121                                                                 } else {                // マップ情報が見つからない場合はダミーの画像を表示
 122                                                                         // 画像を背景に配置しリサイズ不可にする
 123                                                                         CKEDITOR.addCss(
 124                                                                                 'img.cke_googlemaps' + mapNumber +
 125                                                                                 '{' +
 126                                                                                         'background-image: url(' + CKEDITOR.getUrl(CKEDITOR.plugins.getPath('googlemaps')) + 'images/maps_res_logo.png' + ');' +
 127                                                                                         'background-position: center center;' +
 128                                                                                         'background-repeat: no-repeat;' +
 129                                                                                         'border: 1px solid #a9a9a9;' +
 130                                                                                         'width: ' + CKEDITOR.config.googlemaps_width + 'px;' +
 131                                                                                         'height: ' + CKEDITOR.config.googlemaps_height + 'px;' +
 132                                                                                 '}'
 133                                                                         );
 134                                                                         var fakeImage = editor.createFakeParserElement(element, 'cke_googlemaps' + mapNumber, 'div', false/*リサイズ不可*/);
 135                                                                         return fakeImage;
 136                                                                 }
 137                                                         }
 138                                                         return null;
 139                                                 }
 140                                         }
 141                                 }, 5);
 142                         }
 143                 }
 144         });
 145 })();