source: trunk/plugins/ImageManager/image-manager.js @ 999

Last change on this file since 999 was 999, checked in by ray, 11 years ago

#1195 Allow to specify an external url to load a plugin from

  • Property svn:keywords set to LastChangedDate LastChangedRevision LastChangedBy HeadURL Id
File size: 7.9 KB
Line 
1/**
2 * The ImageManager plugin javascript.
3 * @author $Author:(local) $
4 * @version $Id:image-manager.js 856M 2007-06-13 18:34:34Z (local) $
5 * @package ImageManager
6 */
7
8/**
9 * To Enable the plug-in add the following line before Xinha is initialised.
10 *
11 * Xinha.loadPlugin("ImageManager");
12 *
13 * Then configure the config.inc.php file, that is all.
14 * For up-to-date documentation, please visit http://www.zhuo.org/htmlarea/
15 */
16
17/**
18 * It is pretty simple, this file over rides the Xinha.prototype._insertImage
19 * function with our own, only difference is the popupDialog url
20 * point that to the php script.
21 */
22
23function ImageManager(editor)
24{
25
26}
27
28ImageManager._pluginInfo = {
29        name          : "ImageManager",
30        version       : "1.0",
31        developer     : "Xiang Wei Zhuo",
32        developer_url : "http://www.zhuo.org/htmlarea/",
33        license       : "htmlArea"
34};
35
36
37// CONFIGURATION README:
38//
39//  It's useful to pass the configuration to the backend through javascript
40//  (this saves editing the backend config itself), this needs to be done
41//  in a trusted/secure manner... here is how to do it..
42//
43//  1. You need to be able to put PHP in your xinha_config setup
44//  2. In step 3 write something like
45//  --------------------------------------------------------------
46//  with (xinha_config.ImageManager)
47//  {
48//    <?php
49//      require_once('/path/to/xinha/contrib/php-xinha.php');
50//      xinha_pass_to_php_backend
51//      (       
52//        array
53//        (
54//         'images_dir' => '/home/your/directory',
55//         'images_url' => '/directory'
56//        )
57//      )
58//    ?>
59//  }
60//  --------------------------------------------------------------
61//
62//  this will work provided you are using normal file-based PHP sessions
63//  (most likely), if not, you may need to modify the php-xinha.php
64//  file to suit your setup.
65
66Xinha.Config.prototype.ImageManager =
67{
68  'backend'    : Xinha.getPluginDir("ImageManager") + '/backend.php?__plugin=ImageManager&',
69  'backend_data' : null,
70 
71  // Deprecated method for passing config, use above instead!
72  //---------------------------------------------------------
73  'backend_config'     : null,
74  'backend_config_hash': null,
75  'backend_config_secret_key_location': 'Xinha:ImageManager'
76  //---------------------------------------------------------
77};
78
79// Over ride the _insertImage function in htmlarea.js.
80// Open up the ImageManger script instead.
81
82Xinha.prototype._insertImage = function(image) {
83
84        var editor = this;      // for nested functions
85        var outparam = null;
86        if (typeof image == "undefined") {
87                image = this.getParentElement();
88                if (image && !/^img$/i.test(image.tagName))
89                        image = null;
90        }
91
92        // the selection will have the absolute url to the image.
93        // coerce it to be relative to the images directory.
94        //
95        // FIXME: we have the correct URL, but how to get it to select?
96        // FIXME: need to do the same for MSIE.
97
98        if ( image )
99                {
100
101                outparam =
102                        {
103                        f_url    : Xinha.is_ie ? image.src : image.src,
104                        f_alt    : image.alt,
105                        f_border : image.style.borderWidth ? image.style.borderWidth : image.border,
106                        f_align  : image.align,
107                        f_padding: image.style.padding,
108                        f_margin : image.style.margin,
109                        f_width  : image.width,
110                        f_height  : image.height,
111      f_backgroundColor: image.style.backgroundColor,
112      f_borderColor: image.style.borderColor
113                        };
114
115    function shortSize(cssSize)
116    {
117      if(/ /.test(cssSize))
118      {
119        var sizes = cssSize.split(' ');
120        var useFirstSize = true;
121        for(var i = 1; i < sizes.length; i++)
122        {
123          if(sizes[0] != sizes[i])
124          {
125            useFirstSize = false;
126            break;
127          }
128        }
129        if(useFirstSize) cssSize = sizes[0];
130      }
131      return cssSize;
132    }
133    outparam.f_border = shortSize(outparam.f_border);
134    outparam.f_padding = shortSize(outparam.f_padding);
135    outparam.f_margin = shortSize(outparam.f_margin);
136   
137    function convertToHex(color) {
138
139      if (typeof color == "string" && /, /.test.color)
140      color = color.replace(/, /, ','); // rgb(a, b) => rgb(a,b)
141
142      if (typeof color == "string" && / /.test.color) { // multiple values
143        var colors = color.split(' ');
144        var colorstring = '';
145        for (var i = 0; i < colors.length; i++) {
146          colorstring += Xinha._colorToRgb(colors[i]);
147          if (i + 1 < colors.length)
148          colorstring += " ";
149        }
150        return colorstring;
151      }
152
153      return Xinha._colorToRgb(color);
154    }
155   
156    outparam.f_backgroundColor = convertToHex(outparam.f_backgroundColor);
157    outparam.f_borderColor = convertToHex(outparam.f_borderColor);
158
159                } // end of if we selected an image before raising the dialog.
160
161        // the "manager" var is legacy code. Should probably reference the
162        // actual config variable in each place .. for now this is good enough.
163
164        // alert( "backend is '" + editor.config.ImageManager.backend + "'" );
165
166        var manager = editor.config.ImageManager.backend + '__function=manager';
167  if(editor.config.ImageManager.backend_config != null)
168  {
169    manager += '&backend_config='
170      + encodeURIComponent(editor.config.ImageManager.backend_config);
171    manager += '&backend_config_hash='
172      + encodeURIComponent(editor.config.ImageManager.backend_config_hash);
173    manager += '&backend_config_secret_key_location='
174      + encodeURIComponent(editor.config.ImageManager.backend_config_secret_key_location);
175  }
176 
177  if(editor.config.ImageManager.backend_data != null)
178  {
179    for ( var i in editor.config.ImageManager.backend_data )
180    {
181      manager += '&' + i + '=' + encodeURIComponent(editor.config.ImageManager.backend_data[i]);
182    }
183  }
184 
185        Dialog(manager, function(param) {
186                if (!param) {   // user must have pressed Cancel
187                        return false;
188                }
189                var img = image;
190                if (!img) {
191                        if (Xinha.is_ie) {
192        var sel = editor._getSelection();
193        var range = editor._createRange(sel);
194        editor._doc.execCommand("insertimage", false, param.f_url);
195                                img = range.parentElement();
196                                // wonder if this works...
197                                if (img.tagName.toLowerCase() != "img") {
198                                        img = img.previousSibling;
199                                }
200                        } else {
201                                img = document.createElement('img');
202        img.src = param.f_url;
203        editor.insertNodeAtSelection(img);
204                        }
205                } else {                       
206                        img.src = param.f_url;
207                }
208               
209                for (field in param) {
210                        var value = param[field];
211                        switch (field) {
212                            case "f_alt"    : img.alt    = value; break;
213                            case "f_border" :
214          if(value.length)
215          {           
216            img.style.borderWidth = /[^0-9]/.test(value) ? value :  (parseInt(value) + 'px');
217            if(img.style.borderWidth && !img.style.borderStyle)
218            {
219              img.style.borderStyle = 'solid';
220            }
221          }
222          else
223          {
224            img.style.borderWidth = '';
225            img.style.borderStyle = '';
226          }
227          break;
228         
229          case "f_borderColor": img.style.borderColor = value; break;
230          case "f_backgroundColor": img.style.backgroundColor = value; break;
231           
232          case "f_padding":
233          {
234            if(value.length)
235            {
236              img.style.padding = /[^0-9]/.test(value) ? value :  (parseInt(value) + 'px');
237            }
238            else
239            {
240              img.style.padding = '';
241            }
242          }
243          break;
244         
245          case "f_margin":
246          {
247            if(value.length)
248            {
249              img.style.margin = /[^0-9]/.test(value) ? value :  (parseInt(value) + 'px');
250            }
251            else
252            {
253              img.style.margin = '';
254            }
255          }
256          break;
257         
258                            case "f_align"  : img.align  = value; break;
259           
260          case "f_width" :
261          {
262            if(!isNaN(parseInt(value))) { img.width  = parseInt(value); } else { img.width = ''; }
263          }
264          break;
265         
266                                  case "f_height":
267          {
268            if(!isNaN(parseInt(value))) { img.height = parseInt(value); } else { img.height = ''; }
269          }
270          break;
271                        }
272
273                }
274               
275               
276        }, outparam);
277};
Note: See TracBrowser for help on using the repository browser.