source: branches/MootoolsFileManager-Update/plugins/MootoolsFileManager/mootools-filemanager/Demos/index.php @ 1302

Last change on this file since 1302 was 1302, checked in by gogo, 9 years ago

Updates to http://www.github.com/sleemanj/mootools-filemanager from GerHoblett?

http://www.github.com/GerHoblett/

Changes to said updates by gogo (sleemanj @ github)

Modifications to MootoolsFileManager? to work with those updates, some courtesy of GerHoblett?, some sleemanj

GerHoblett? provided a large diff which accomplished the goal in a quite different way. It has merit, however I have opted for a less-affecting path in so far as Xinha's "way" is concerned, namely, not splitting the config for a single plugin into several calls to backend config passing functions which seemed a little cumbersome.

Instead I take the option of using POST to send backend data around, at the minor expense of an extra round trip when displaying thumbnails (for each one). This could be reduced by checking for thumbnail existence and returning the thumbnail name directly in "onView" rather than the backend request to generate said thumbnail.

Still to do, is to make the preview pane thumbnail also work.


File size: 10.9 KB
Line 
1<?php
2
3/*
4As AJAX calls cannot set cookies, we set up the session for the authentication demonstration right here; that way, the session cookie
5will travel with every request.
6*/
7if (!session_start()) die('session_start() failed');
8
9/*
10set a 'secret' value to doublecheck the legality of the session: did it originate from here?
11*/
12$_SESSION['FileManager'] = 'DemoMagick';
13
14$_SESSION['UploadAuth'] = 'yes';
15
16$params = session_get_cookie_params();
17
18/* the remainder of the code does not need access to the session data. */
19session_write_close();
20
21// and add a couple other, slightly malicious cookies to check whether Flash will crash on it, or not.
22setcookie("ASP.NET_SessionId", 'ASP.NET: b0rk b0rk b0rk & ... b0rk!', time() + 600,
23    $params['path'], $params['domain'],
24    $params['secure'], $params['httponly']
25);
26setcookie('.1!#$%20X', 'b0rk b0rk b0rk & ... b0rk!', time() + 600,
27    $params['path'], $params['domain'],
28    $params['secure'], $params['httponly']
29);
30
31
32?>
33<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
34"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
35<html xmlns="http://www.w3.org/1999/xhtml">
36<head>
37  <title>MooTools FileManager Testground</title>
38  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
39  <link rel="shortcut icon" href="http://og5.net/christoph/favicon.png" />
40  <style type="text/css">
41  body {
42    font-size: 11px;
43    font-family: Tahoma, sans-serif;
44  }
45
46  h1 {
47    margin: 0 0 10px 0;
48    padding: 0;
49
50    color: #666;
51    font-weight: normal;
52    font-size: 24px;
53    letter-spacing: 1px;
54    word-spacing: 2px;
55    line-height: 22px;
56    min-height: 25px;
57  }
58
59  h1 span {
60    font-size: 11px;
61    letter-spacing: 0;
62    word-spacing: 0;
63    text-shadow: none;
64  }
65
66  .blue { color: #1f52b0; }
67
68  div.content {
69    min-height: 200px;
70    margin: 23px 34px;
71    padding: 10px 17px;
72    border: 1px solid #b2b2b2;
73    background: #fff;
74    box-shadow: rgba(0, 0, 0, 0.3) 0 0 10px;
75  -moz-box-shadow: rgba(0, 0, 0, 0.3) 0 0 10px;
76  -webkit-box-shadow: rgba(0, 0, 0, 0.3) 0 0 10px;
77  }
78
79  div.content div.example {
80    float: left;
81    clear: both;
82    margin: 10px 0;
83  }
84
85  div.selected-file div {
86     padding: 3px;
87
88     line-height: 1.5em;
89  }
90
91  div.selected-file div img.preview {
92     padding: 3px;
93  }
94
95  button {
96    margin: 5px 0;
97  }
98  </style>
99
100  <script type="text/javascript" src="mootools-core.js"></script>
101  <script type="text/javascript" src="mootools-more.js"></script>
102
103  <script type="text/javascript" src="../Source/FileManager.js"></script>
104  <script type="text/javascript" src="../Source/Gallery.js"></script>
105  <script type="text/javascript" src="../Source/Uploader/Fx.ProgressBar.js"></script>
106  <script type="text/javascript" src="../Source/Uploader/Swiff.Uploader.js"></script>
107  <script type="text/javascript" src="../Source/Uploader.js"></script>
108  <script type="text/javascript" src="../Language/Language.en.js"></script>
109  <script type="text/javascript" src="../Language/Language.de.js"></script>
110  <script type="text/javascript" src="dev_support.js"></script>
111
112  <!-- extra, for viewing the gallery and selected picture: -->
113  <script type="text/javascript" src="../Assets/js/milkbox/milkbox.js"></script>
114
115  <script type="text/javascript">
116    window.addEvent('domready', function() {
117
118      /* Simple Example */
119      var manager1 = new FileManager({
120        url: 'manager.php',
121        language: 'en',
122        hideOnClick: true,
123        assetBasePath: '../Assets',
124        uploadAuthData: {
125            session: 'MySessionData'
126        },
127        upload: true,
128        download: true,
129        destroy: true,
130        rename: true,
131        createFolders: true,
132        hideQonDelete: false,     // DO ask 'are you sure' when the user hits the 'delete' button
133        onComplete: function(path, file, mgr) {
134            if (typeof console !== 'undefined' && console.log) console.log('MFM.onComplete: ' + path + ', ' + dump(file) + ', ' + dump(mgr, 0, 1, 60, 'function,string:empty'));
135        },
136        onModify: function(file, json, mode, mgr) {
137            if (typeof console !== 'undefined' && console.log) console.log('MFM.onModify: ' + mode + ', ' + dump(file) + ', ' + dump(json) + ', ' + dump(mgr, 0, 1, 60, 'function,string:empty'));
138        },
139        onShow: function(mgr) {
140            if (typeof console !== 'undefined' && console.log) console.log('MFM.onShow: ' + dump(mgr, 0, 1, 60, 'function,string:empty'));
141        },
142        onHide: function(mgr) {
143            if (typeof console !== 'undefined' && console.log) console.log('MFM.onHide: ' + dump(mgr, 0, 1, 60, 'function,string:empty'));
144        },
145        onScroll: function(e, mgr) {
146            if (typeof console !== 'undefined' && console.log) console.log('MFM.onScroll: ' + dump(e) + ', ' + dump(mgr, 0, 1, 60, 'function,string:empty'));
147        },
148        onPreview: function(src, mgr, el) {
149            if (typeof console !== 'undefined' && console.log) console.log('MFM.onScroll: ' + dump(src) + ', ' + dump(el) + ', ' + dump(mgr, 0, 1, 60, 'function,string:empty'));
150        },
151        onDetails: function(json, mgr) {
152            if (typeof console !== 'undefined' && console.log) console.log('MFM.onDetails: ' + dump(json) + ', ' + dump(mgr, 0, 1, 60, 'function,string:empty'));
153        },
154        onHidePreview: function(mgr) {
155            if (typeof console !== 'undefined' && console.log) console.log('MFM.onDetails: ' + dump(mgr, 0, 1, 60, 'function,string:empty'));
156        },
157        // and a couple of extra user defined parameters sent with EVERY request:
158        propagateData: {
159            origin: 'demo-FM-1'
160        }
161      });
162      $('example1').addEvent('click', manager1.show.bind(manager1));
163
164      /* Select a file */
165      var el = $('example2');
166      var div, manager2;
167      var complete = function(path, file, mgr) {
168        el.set('value', path);
169        if (div) div.destroy();
170        var icon = new Asset.image(
171            mgr.assetBasePath+'Images/cancel.png',
172            {
173                'class': 'file-cancel',
174                title: 'deselect'
175            }).addEvent('click', function(e){
176                e.stop();
177                el.set('value', '');
178                var self = this;
179                div.fade(0).get('tween').chain(function(){
180                    div.destroy();
181                    mgr.tips.hide();
182                    mgr.tips.detach(self);
183                });
184            });
185        mgr.tips.attach(icon);
186
187        var img = null;
188        var mimetype = file.mime;
189        if (mimetype && mimetype.contains('image/'))
190        {
191            img = new Element('div', {
192                    'text': 'Click on the thumbnail to view the image/file in a lightbox (milkbox)'
193                }).adopt(
194                    new Element('br'),
195                    new Element('a', {
196                            'data-milkbox': 'single',
197                            'title': file.name,
198                            'href': encodeURI(path)              // see also:  http://www.javascripter.net/faq/escape.htm
199                        }).adopt(new Element('img', {
200                            'src': (file.thumbnail250 ? file.thumbnail250 : file.icon),
201                            'class': 'preview',
202                            'alt': 'preview (picked)'
203                        }))
204                );
205        }
206
207        div = new Element('div', {'class': 'selected-file', text: 'Selected file: '}).adopt(
208          new Asset.image(file.icon, {'class': 'mime-icon'}),
209          new Element('span', {text: file.name}),
210          icon,
211          img
212        ).inject(el, 'after');
213
214        if (img && typeof milkbox != 'undefined')
215        {
216          milkbox.reloadPageGalleries();
217        }
218      };
219
220      manager2 = new FileManager({
221        url: 'selectImage.php',
222        language: 'en',
223        filter: 'image',
224        hideOnClick: true,
225        assetBasePath: '../Assets',
226        uploadAuthData: {
227            session: 'MySessionData'
228        },
229        selectable: true,
230        upload: true,
231        destroy: true,
232        rename: true,
233        createFolders: true,
234        onComplete: complete,
235        // and a couple of extra user defined parameters sent with EVERY request:
236        propagateData: {
237            origin: 'demo-selectFile'
238        }
239      });
240
241      el.setStyle('display', 'none');
242      var val = el.get('value');
243      if(val) {
244        complete.apply(manager2, [val, {
245            name: val.split('/').getLast(),
246            icon: '../Assets/Images/Icons/'+val.split('.').getLast()+'.png'
247        }, manager2]);
248      }
249
250      new Element('button', {'class': 'browser', text: 'Select an image'}).addEvent('click', manager2.show.bind(manager2)).inject(el, 'before');
251
252      /* Localized Example */
253      var manager3 = new FileManager({
254        url: 'manager.php',
255        language: 'de',
256        hideOnClick: true,
257        assetBasePath: '../Assets',
258        uploadAuthData: {
259            session: 'MySessionData'
260        },
261        upload: true,
262        destroy: true,
263        rename: true,
264        createFolders: true,
265        // and a couple of extra user defined parameters sent with EVERY request:
266        propagateData: {
267            origin: 'demo-clickedLink'
268        }
269      });
270      $('example3').addEvent('click', manager3.show.bind(manager3));
271
272
273      /* Gallery Example */
274      var global = this;
275      var example4 = $('myGallery');
276      var manager4 = new FileManager.Gallery({
277        url: 'selectImage.php?exhibit=A', // 'manager.php', but with a bogus query parameter included: latest FM can cope with such an URI
278        assetBasePath: '../Assets',
279        filter: 'image',
280        hideOnClick: true,
281        uploadAuthData: {
282            session: 'MySessionData'
283        },
284        propagateData: {
285            origin: 'demo-Gallery'
286        },
287        onShow: function(){
288          var obj;
289          Function.attempt(function(){
290            obj = JSON.decode(example4.get('value'));
291          });
292          this.populate(obj);
293        },
294        onComplete: function(serialized){
295          example4.set('value', JSON.encode(serialized));
296        }
297      });
298      $('example4').addEvent('click', manager4.show.bind(manager4));
299    });
300  </script>
301</head>
302<body>
303<div id="content" class="content">
304  <h1>FileManager Demo</h1>
305  <div class="example">
306    <button id="example1" class="BrowseExample">Open File-Manager</button>
307  </div>
308  <div class="example">
309    <input name="BrowseExample2" type="text" id="example2" value="Smile.gif" />
310  </div>
311  <div class="example">
312    <a href="#" id="example3" class="BrowseExample">Open File-Manager from a link (German)</a>
313  </div>
314
315  <div class="example">
316    <a href="tinymce.php">Open File-Manager from TinyMCE (editor) - separate test page</a>
317  </div>
318
319  <div class="example">
320    <button id="example4">Create a Gallery</button>
321    <input name="BrowseExample4" type="text" id="myGallery" value="Gallery output will be stored in here" style="width: 550px;" />
322  </div>
323
324  <div class="example">
325    <a href="test-backend.php">Run tests on the backend of the File-Manager</a>
326  </div>
327
328  <div style="clear: both;"></div>
329</div>
330</body>
331</html>
Note: See TracBrowser for help on using the repository browser.