source: trunk/plugins/ImageManager/manager.php @ 1316

Last change on this file since 1316 was 1192, checked in by gogo, 10 years ago

Discussion in ticket #1478

Creating Sub Classes

Addition of method Xinha.extend. This method provides a means for more "classical" sub classing within javascript. Short story,

    var Vehicle = function() { }
    Vehicle.prototype.horn = function() { alert('Toot'); }
    var Car = function()
	{
		Car.parentConstructor.call(this); // If you want to call it.
	}
    Xinha.extend(Car, Vehicle);
    Car.prototype.horn = function()
	{
		alert('Toot');
		Car.superClass.horn.call(this);  // If you want to call it.
	}

remember the "call" method of javascript is .call(<on-this-object>, arg, arg, arg ..) and that you can also use the "apply" method to pass in arguments as an array which is .apply(<on this object>, [arg, arg, arg]), and that the arguments to your method are in the "arguments" array.

Dialog Modification

Split out the setting of the localizer from the translation of HTML in source:trunk/modules/Dialogs/XinhaDialog.js by introducing a new method Xinha.Dialog::setLocalizer(), Xinha.Dialog::translateHtml() remains compatible, the localizer is optional to it.

.htaccess Security

Further additions to the .htaccess files for the demo_images in ExtendedFileManager? and ImageManager?. I think we should give consideration to just deleting these folders totally, over the last year I've had a number of instances of people coming to me with these folders filled with various malware.

File-Picker on arbitrary fields outside Xinha (ExtendedFileManager?)

Addition of a source:trunk/plugins/ExtendedFileManager/file-picker.js hijacking of the ExtendedFileManager? in the same manner as the existing source:trunk/plugins/ImageManager/image-picker.js within ImageManager?. I'm putting this n there incase somebody finds it useful, but it may need some work as I don't use it myself any more. I am likely to come up with a way to replace both ExtendedFileManager? and ImageManager? with the "Mootools FileManager", this is a very nice file manager with a similar dialog "look" to our new dialogs, and the very VERY important bonus of it being easy to upload multiple files at once with a progress indicator (using a hidden flash component to do the hard work).

ImageManager? to use hspace and vspace attributes instead of margin.

The addition of a config option to ImageManager? "UseHSpaceVSpace" which swaps out the "margin" settings for the hspace and vspace attributes. The reason for this apparent "old fashioned-ness" is that margin is less reliably honoured when the HTML is put into an email.

YouTube and Flickr added to the ImageManager?

The addition of additional data sources (aka backends or choosers) to ImageManager?, specifically "YouTube" and "Flickr".

When one or both is enabled the user can use a selector in the image manager popup to choose from images on the local server, or search for videos on YouTube, or images on Flickr.

YouTube is enabled by setting $IMConfig['YouTube'] = TRUE; when the user selects a video the large format video still is inserted into the Xinha area, with extra information on the query string.

Flickr is enabled by setting $IMConfig['Flickr']['Key'] = 'your flickr api key here';, when the user selects an image, the image is inserted into the Xinha area.

For videos especially there needs to be some extra processing to turn that into a video when the end user sees this HTML, this is done by the "smart-image.js" script in combination with the (included) swfobject. In short, on the page WHERE YOU USE THE HTML (not where you are running Xinha to edit it) you will put this

   <script type="text/javascript" src="/path/to/xinha/plugins/ImageManager/smart-image.js"></script>
   <body onload="SmartImages.replace_all();">

it will replace the still image with the video (provided javascript is on).

Smart-image will also add a little hover attribution to Flickr sourced images (ie, hover over the image an attribution link appears). If you are going to use the Flickr source, then you must make sure you are legally permitted to do so, for one, your site can not be commercial. I've provided you with the tools, just try not to shoot yourself.

New Dialog Types

Added a new Dialog type "DetachedDialog?". This "faked" dialog extends the Xinha.Dialog and is a "drop in" replacement for it, the difference is the DetachedDialog? is not associated to any instance of Xinha. No Xinha needs to be instantiated for a "plugin" to use a DetachedDialog?. Where this is useful is in leveraging off plugins to provide functionality outside of Xinha, see link-picker.js below (in Linker).

Also added a new Dialog type "DivDialog?". Similar to the DetachedDialog?, except the dialog HTML is written directly into an html element supplied to the dialog. The use of this is similar to the above, providing a means for getting a plugin "away" from Xinha to provide it's services for other things. This Dialog may need some work since it was written before the new Xinha.Dialog was created, in brief test it worked mostly. Worth keeping around as it's a pretty simple example of how a new Dialog type can be constructed by extending the existing one.

Added a "Link Picker" to leverage the Linker plugin for providing a "Browse" button next to normal input fields in order to select a link which is written into the field.

This is the initial usage of the DetachedDialog?, the basic usage of this is described in the comments in that file source:trunk/plugins/Linker/link-picker.js

Hid all dotfiles from the Linker scanner, the linker shouldn't be showing "hidden" files.

CSS fix to dTree in linker, just to make sure it's styles were not getting clobbered.

Stylist Duplicate Stylesheet Fix

Stop the Stylist from possibly adding a duplicate stylesheet into pageStyleSheets, this was creating a subtle problem in certain circumstances.

New Plugin: WysiwygWrap?

Added a new plugin WysiwygWrap, basically this wraps the content of your Xinha with some specific elements you tell it, when in Wysiwyg mode, and strips them out again when you go back to code (or submit). The idea is to make it so that, combined with an appropriate pageStyleSheet(s) you can more easily simulate in Xinha what it will "look like" when that HTML is "published" wherever it's getting published.

It takes a simple configuration of xinha.config.WysiwygWrap = { elements: [ list of the ancestor elements to insert, in order top down ] }
Example:

  xinha.config.WysiwygWrap = { elements: ['div#outer', 'div.inner'] }

will produce this in your Xinha Wysiwyg mode html

	<div id="outer">
		<div class="inner">
			** Original Xinha Content For Editing Here **
		</div>
	</div>

so your pageStyleSheet would just make nice CSS for those outer and inner to make the html in the Wysiwyg mode look closer to how it would look "on the site".

In practice, I'm not sure this works that well, it seemed a good idea at the time, but it can be a bit fragile.

  • Property svn:keywords set to LastChangedDate LastChangedRevision LastChangedBy HeadURL Id
File size: 12.5 KB
Line 
1<?php
2/**
3 * The main GUI for the ImageManager.
4 * @author $Author:ray $
5 * @version $Id:manager.php 987 2008-04-12 12:39:04Z ray $
6 * @package ImageManager
7 */
8
9        require_once('config.inc.php');
10        require_once('ddt.php');
11        require_once('Classes/ImageManager.php');
12       
13        $manager = new ImageManager($IMConfig);
14        $dirs = $manager->getDirs();
15
16?>
17<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
18
19<html>
20<head>
21        <title>Insert Image</title>
22  <script type="text/javascript">
23    // temporary. An ImageManager rewrite will take care of this kludge.
24    _backend_url = "<?php print $IMConfig['backend_url']; ?>";
25    _resized_prefix = "<?php echo $IMConfig['resized_prefix']; ?>";
26    _resized_dir = "<?php echo $IMConfig['resized_dir']; ?>";
27  </script>
28  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
29 <link href="<?php print $IMConfig['base_url'];?>assets/manager.css" rel="stylesheet" type="text/css" />
30<script type="text/javascript" src="../../popups/popup.js"></script>
31<script type="text/javascript" src="assets/popup.js"></script>
32<script type="text/javascript" src="../../modules/ColorPicker/ColorPicker.js"></script>
33<script type="text/javascript" src="<?php print $IMConfig['base_url'];?>assets/dialog.js"></script>
34<script type="text/javascript">
35/*<![CDATA[*/
36        if(window.opener)
37                Xinha = HTMLArea = window.opener.Xinha;
38
39        var thumbdir = "<?php echo $IMConfig['thumbnail_dir']; ?>";
40        var base_url = "<?php echo $manager->getImagesURL(); ?>";
41/*]]>*/
42</script>
43<script type="text/javascript" src="<?php print $IMConfig['base_url'];?>assets/manager.js"></script>
44<?php
45  if(!$IMConfig['show_full_options'])
46  {
47    ?>
48    <style type="text/css">
49      .fullOptions { visibility:hidden; }
50    </style>
51    <?php
52  }
53?>
54
55<script type="text/javascript">
56  function switchChooser(toChooserPanel)
57  {
58    var ourPanel =  document.getElementById(toChooserPanel);
59    if(!ourPanel) return false; // Can't change, doesn't exist.
60   
61    // hide all panels
62    var d = document.getElementById('chooserFieldset').getElementsByTagName('div');
63    for(i = 0; i < d.length; i++)
64    {
65      if(d[i].className.match(/chooserPanel/))
66        d[i].style.display = 'none';     
67    }
68   
69    // show ours
70    ourPanel.style.display = 'block';
71  }
72</script>
73</head>
74<body>
75
76<form action="<?php print $IMConfig['backend_url'] ?>" id="uploadForm" method="post" enctype="multipart/form-data">
77
78<input type="hidden" name="__plugin" value="ImageManager" />
79<input type="hidden" name="__function" value="images" />
80
81<fieldset id="chooserFieldset">
82  <legend>
83    Choose From:
84    <select onchange="switchChooser(this.options[this.selectedIndex].value)">
85    <?php
86      if($IMConfig['Local'])
87      {
88        ?>
89        <option value="picturesChooser">This Server</option>
90        <?php
91      }
92    ?>
93   
94    <?php
95      if($IMConfig['YouTube'])
96      {
97        ?>
98        <option value="youtubeChooser">YouTube Videos</option>
99        <?php
100      }
101    ?>
102   
103    <?php
104      if($IMConfig['Flickr'])
105      {
106        ?>
107        <option value="flickrChooser">Flickr Pictures</option>
108        <?php
109      }
110    ?>
111    </select>
112  </legend>
113   
114  <?php
115    if($IMConfig['Local'])
116    {
117      ?>
118  <div id="picturesChooser" class="chooserPanel">
119  <table width="100%">
120    <tr>
121      <th><label for="dirPath">Directory</label></th>
122      <td>
123        <select name="dir" class="dirWidth" id="dirPath" onchange="updateDir(this)">
124          <option value="/">/</option>
125          <?php
126            foreach($dirs as $relative=>$fullpath)
127            {
128              ?>
129              <option value="<?php echo rawurlencode($relative); ?>"><?php echo $relative; ?></option>
130              <?php
131            }
132          ?>
133        </select>
134      </td>
135      <td>
136        <a href="#" onclick="javascript: goUpDir();" title="Directory Up"><img src="<?php print $IMConfig['base_url']; ?>img/btnFolderUp.gif" height="15" width="15" alt="Directory Up" /></a>
137
138        <?php
139          if($IMConfig['safe_mode'] == false && $IMConfig['allow_new_dir'])
140          {
141            ?>
142            <a href="#" onclick="newFolder();" title="New Folder"><img src="<?php print $IMConfig['base_url']; ?>img/btnFolderNew.gif" height="15" width="15" alt="New Folder" /></a>
143            <?php
144          }
145          ?>
146      </td>
147    </tr>
148    <?php
149      if($IMConfig['allow_upload'] == TRUE)
150      {
151        ?>
152        <tr>
153          <th style="text-align: left;">Upload:</th>
154          <td colspan="2">
155            <input type="file" name="upload" id="upload" />
156            <input name="Upload" type="submit" id="Upload" value="Upload" onclick="doUpload();" />
157          </td>
158        </tr>
159        <?php
160      }
161    ?>
162
163  </table>
164
165  <div id="messages" style="display: none;"><span id="message"></span><img src="<?php print $IMConfig['base_url']; ?>img/dots.gif" width="22" height="12" alt="..." /></div>
166
167  <iframe src="<?php print $IMConfig['backend_url']; ?>__function=images" name="imgManager" id="imgManager" class="imageFrame" scrolling="auto" title="Image Selection" frameborder="0"></iframe>
168  </div>
169  <?php
170    }
171  ?>
172 
173  <?php
174    if($IMConfig['YouTube'])
175    {
176      ?>
177      <div id="youtubeChooser" style="display:none" class="chooserPanel">
178           
179        <table width="100%">
180          <tr>
181            <th><labelfor="ytUsername">YouTube Username</label></th>
182            <td>
183              <input type="text" name="ytUsername" id="ytUsername" />
184            </td>
185           
186            <th><labelfor="ytSearch">Keyword</label></th>
187            <td>
188              <input type="text" name="ytSearch" id="ytSearch" />
189            </td>     
190            <td>
191              <input type="button" value="Search" onclick="document.getElementById('ytManager').src='<?php print $IMConfig['backend_url']; ?>__function=youtube&ytSearch='+document.getElementById('ytSearch').value+'&ytUsername='+document.getElementById('ytUsername').value;" />
192            </td>
193          </tr>   
194        </table>
195     
196        <div id="messages" style="display: none;"><span id="message"></span><img SRC="<?php print $IMConfig['base_url']; ?>img/dots.gif" width="22" height="12" alt="..." /></div>
197     
198        <iframe src="<?php print $IMConfig['backend_url']; ?>__function=youtube" name="ytManager" id="ytManager" class="imageFrame" scrolling="auto" title="YouTube Selection" frameborder="0"></iframe>
199   
200      </div>
201      <?php
202    }
203  ?>
204   
205  <?php
206    if($IMConfig['Flickr'])
207    {
208      require_once('Classes/Flickr.php');
209      $lics = flickr_get_license_id_by_usage();
210      ?>
211      <div id="flickrChooser" style="display:none" class="chooserPanel">
212        <script type="text/javascript">
213          function flickr_go()
214          {
215            var u = '<?php print $IMConfig['backend_url']; ?>__function=flickr';
216            u += '&flkSearch='  + encodeURIComponent(document.getElementById('flkSearch').value);
217            u += '&flkUsername='+ encodeURIComponent(document.getElementById('flkUsername').value);
218            u += '&flkLicense=' + encodeURIComponent( document.getElementById('flkLicense').options[document.getElementById('flkLicense').selectedIndex].value );
219           
220            document.getElementById('flkManager').src= u;           
221          }
222        </script>
223        <table width="100%">
224          <tr>
225            <th><labelfor="ytUsername">Flickr Username/Email</label></th>
226            <td>
227              <input type="text" name="flkUsername" id="flkUsername" />
228            </td>
229           
230            <th><labelfor="ytSearch">Keyword</label></th>
231            <td>
232              <input type="text" name="flkSearch" id="flkSearch" />
233            </td>     
234            <td>
235              <input type="button" value="Search" onclick="flickr_go();" />
236            </td>
237          </tr>   
238          <tr>
239            <th>Usage Restriction:</th>
240            <td colspan="3">
241              <select name="flkLicense" id="flkLicense"  onchange="flickr_go();">
242                <?php
243                  foreach($lics as $usage => $licid)
244                  {
245                    ?>
246                    <option value="<?php echo $licid ?>" <?php if(flickr_is_default_license($licid)) echo 'selected="selected"' ?>> <?php echo $licid ?> <?php echo htmlspecialchars($usage) ?></li>
247                    <?php
248                  }
249                ?>
250              </select>
251            </td>         
252            <td><a href="http://flickr.com/" target="_blank">flickr.com</a></td>
253          </tr>
254        </table>
255     
256        <div id="messages" style="display: none;"><span id="message"></span><img SRC="<?php print $IMConfig['base_url']; ?>img/dots.gif" width="22" height="12" alt="..." /></div>
257     
258        <iframe src="<?php print $IMConfig['backend_url']; ?>__function=flickr" name="flkManager" id="flkManager" class="imageFrame" scrolling="auto" title="Flickr Selection" frameborder="0"></iframe>
259   
260      </div>
261      <?php
262    }
263  ?>
264</fieldset>
265
266<!-- image properties -->
267
268<table  border="0" cellspacing="0" cellpadding="0" width="100%">
269  <tr>
270    <th style="text-align: left;">Description:</th>
271    <td colspan="6">
272      <input type="text" id="f_alt" style="width:95%"/>
273    </td>
274    <td rowspan="4" width="100" height="100" style="vertical-align: middle;" style="padding:4px;background-color:#CCC;border:1px inset;">
275      <img src="" id="f_preview" />
276    </td>
277  </tr>
278
279  <tr>
280    <th style="text-align: left;">Width:</th>
281    <td >
282      <input id="f_width" type="text" name="f_width" size="4" onchange="javascript:checkConstrains('width');" />
283    </td>
284    <td rowspan="2">
285      <div  style="position:relative">
286        <img src="<?php print $IMConfig['base_url']; ?>img/locked.gif" id="imgLock" width="25" height="32" alt="Constrained Proportions" style="vertical-align: middle;" /><input type="checkbox" id="constrain_prop" checked="checked" onclick="javascript:toggleConstrains(this);" style="position:absolute;top:8px;left:0px;" value="on" />
287      </div>
288    </td>
289    <th style="text-align: left;" class="fullOptions">Margin:</th>
290    <td colspan="3" class="fullOptions">
291    <?php
292      if(@$IMConfig['UseHSpaceVSpace'])
293      {
294        ?>
295          <input name="f_hspace" type="text" id="f_hspace" size="3" />
296        x <input name="f_vspace" type="text" id="f_vspace" size="3" />
297        <?php
298      }
299      else
300      {
301        ?>
302        <input name="f_margin" type="text" id="f_margin" size="3" />
303        <?php
304      }
305    ?>     
306      px </td>
307  </tr>
308
309  <tr>
310    <th style="text-align: left;">Height:</th>
311    <td>
312      <input name="f_height" type="text" id="f_height" size="4" />
313    </td>
314    <th style="text-align: left;" class="fullOptions">Padding:</th>
315    <td  class="fullOptions">
316      <input name="f_padding" type="text" id="f_padding" size="3" />
317      px </td>
318    <th style="text-align: left;" class="fullOptions">Color:</th>
319    <td  class="fullOptions">
320      <input name="f_backgroundColor" type="text" id="f_backgroundColor" size="7" />
321     
322    </td>
323  </tr>
324
325
326  <tr class="fullOptions">
327    <th style="text-align: left;">Alignment:</th>
328    <td colspan="2">
329      <select size="1" id="f_align" title="Positioning of this image">
330        <option value=""                             >Not set</option>
331        <option value="left"                         >Left</option>
332        <option value="right"                        >Right</option>
333        <option value="texttop"                      >Texttop</option>
334        <option value="absmiddle"                    >Absmiddle</option>
335        <option value="baseline" selected="selected" >Baseline</option>
336        <option value="absbottom"                    >Absbottom</option>
337        <option value="bottom"                       >Bottom</option>
338        <option value="middle"                       >Middle</option>
339        <option value="top"                          >Top</option>
340      </select>
341    </td>
342    <th style="text-align: left;">Border:</th>
343    <td>
344      <input name="f_border" type="text" id="f_border" size="3" />
345      px </td>
346    <th style="text-align: left;">Color:</th>
347    <td>
348      <input name="f_borderColor" type="text" id="f_borderColor" size="7" />
349     
350    </td>
351  </tr>
352
353</table>
354
355<div style="text-align: right;">
356  <hr />
357  <button type="button" class="buttons" onclick="return refresh();">Refresh</button>
358  <button type="button" class="buttons" onclick="return onOK();">OK</button>
359  <button type="button" class="buttons" onclick="return onCancel();">Cancel</button>
360</div>
361
362<!--// image properties -->
363<input type="hidden" id="orginal_width" />
364<input type="hidden" id="orginal_height" />
365<input type="hidden" id="f_url" class="largelWidth" value="" />
366</form>
367</body>
368</html>
Note: See TracBrowser for help on using the repository browser.