source: branches/MootoolsFileManager-Update/plugins/MootoolsFileManager/mootools-filemanager/Demos/index.html @ 1300

Last change on this file since 1300 was 1300, checked in by gogo, 8 years ago

Update the MootoolsFileManager? to the latest cpojer with some modifications.
Add a demo for the MFM examples/mootools-file-manager.php
Change the default config for ImageManager? and ExtendedFileManager? for added security.

File size: 6.1 KB
Line 
1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
2"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
3<html xmlns="http://www.w3.org/1999/xhtml">
4<head>
5  <title>MooTools FileManager Testground</title>
6  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
7  <link rel="shortcut icon" href="http://og5.net/christoph/favicon.png" />
8  <style type="text/css">
9  body {
10    font-size: 11px;
11    font-family: Tahoma, sans-serif;
12  }
13 
14  h1 {
15    margin: 0 0 10px 0;
16    padding: 0;
17   
18    color: #666;
19    font-weight: normal;
20    font-size: 24px;
21    letter-spacing: 1px;
22    word-spacing: 2px;
23    line-height: 22px;
24    min-height: 25px;
25  }
26
27  h1 span {
28    font-size: 11px;
29    letter-spacing: 0;
30    word-spacing: 0;
31    text-shadow: none;
32  }
33 
34  .blue { color: #1f52b0; }
35 
36  div.content {
37    min-height: 200px;
38    margin: 23px 34px;
39    padding: 10px 17px;
40    border: 1px solid #b2b2b2;
41    background: #fff;
42    box-shadow: rgba(0, 0, 0, 0.3) 0 0 10px;
43  -moz-box-shadow: rgba(0, 0, 0, 0.3) 0 0 10px;
44  -webkit-box-shadow: rgba(0, 0, 0, 0.3) 0 0 10px;
45  }
46 
47  div.content div.example {
48    float: left;
49    clear: both;
50    margin: 10px 0;
51  }
52 
53  button {
54    margin: 5px 0;
55  }
56  </style>
57 
58  <script type="text/javascript" src="mootools-core-1.3.1.js"></script>
59  <script type="text/javascript" src="mootools-more-1.3.1.1.js"></script>
60 
61  <script type="text/javascript" src="../Source/FileManager.js"></script>
62  <script type="text/javascript" src="../Source/Gallery.js"></script>
63  <script type="text/javascript" src="../Source/Uploader/Fx.ProgressBar.js"></script>
64  <script type="text/javascript" src="../Source/Uploader/Swiff.Uploader.js"></script>
65  <script type="text/javascript" src="../Source/Uploader.js"></script>
66  <script type="text/javascript" src="../Language/Language.en.js"></script>
67  <script type="text/javascript" src="../Language/Language.de.js"></script>
68 
69  <script type="text/javascript">
70    window.addEvent('domready', function() {
71     
72      /* Simple Example */
73      var manager1 = new FileManager({
74        url: 'manager.php',
75        language: 'en',
76        hideOnClick: true,
77        assetBasePath: '../Assets',
78        uploadAuthData: {session: 'MySessionId'},
79        upload: true,
80        download: true,
81        destroy: true,
82        rename: true,
83        createFolders: true,
84                hideQonDelete: true     // don't ask 'are you sure' when the user hits the 'delete' button
85      });
86      $('example1').addEvent('click', manager1.show.bind(manager1));
87
88      /* Select a file */
89      var el = $('example2');
90      var div, manager2;
91      var complete = function(path, file) {
92        el.set('value', path);
93        if(div) div.destroy();
94        var icon = new Asset.image(this.assetBasePath+'Images/cancel.png', {'class': 'file-cancel', title: 'deselect'}).addEvent('click', function(e){
95          e.stop();
96          el.set('value', '');
97          var self = this;
98          div.fade(0).get('tween').chain(function(){
99            div.destroy();
100            manager2.tips.hide();
101            manager2.tips.detach(self);
102          });
103        });
104        manager2.tips.attach(icon);
105
106        div = new Element('div', {'class': 'selected-file', text: 'Selected file: '}).adopt(
107          new Asset.image(file.icon, {'class': 'mime-icon'}),
108          new Element('span', {text: file.name}),
109          icon
110        ).inject(el, 'after');
111      };
112     
113      manager2 = new FileManager({
114        url: 'selectImage.php',
115        language: 'en',
116        filter: 'image',
117        hideOnClick: true,
118        assetBasePath: '../Assets',
119        uploadAuthData: {session: 'MySessionId'},
120        selectable: true,
121        upload: true,
122        destroy: true,
123        rename: true,
124        createFolders: true,
125        onComplete: complete
126      });
127     
128      el.setStyle('display', 'none');
129      var val = el.get('value');
130      if(val) complete.apply(manager2, [val, {
131        name: val.split('/').getLast(),
132        icon: '../Assets/Images/Icons/'+val.split('.').getLast()+'.png'
133      }]);
134     
135      new Element('button', {'class': 'browser', text: 'Select an image'}).addEvent('click', manager2.show.bind(manager2)).inject(el, 'before');
136
137      /* Localized Example */
138      var manager3 = new FileManager({
139        url: 'manager.php',
140        language: 'de',
141        hideOnClick: true,
142        assetBasePath: '../Assets',
143        uploadAuthData: {session: 'MySessionId'},
144        upload: true,
145        destroy: true,
146        rename: true,
147        createFolders: true
148      });
149      $('example3').addEvent('click', manager3.show.bind(manager3));
150
151
152      /* Gallery Example */
153      var global = this;
154      var example4 = $('myGallery');
155      var manager4 = new FileManager.Gallery({
156        url: 'selectImage.php',
157        assetBasePath: '../Assets',
158        filter: 'image',
159        hideOnClick: true,
160        uploadAuthData: {session: 'MySessionId'},
161        onShow: function(){
162          var obj;
163          Function.attempt(function(){ obj = JSON.decode(example4.get('value')); });
164          this.populate(obj);
165        },
166        onComplete: function(serialized){
167          example4.set('value', JSON.encode(serialized));
168        }
169      });
170      $('example4').addEvent('click', manager4.show.bind(manager4));
171    });
172  </script>
173</head>
174<body>
175<div id="content" class="content">
176  <h1>FileManager Demo</h1>
177  <div class="example">
178    <button id="example1" class="BrowseExample">Open File-Manager</button>
179  </div>
180  <div class="example">
181    <input name="BrowseExample2" type="text" id="example2" value="Smile.gif" />
182  </div>
183  <div class="example">
184    <a href="#" id="example3" class="BrowseExample">Open File-Manager from a link (German)</a>
185  </div>
186
187  <div class="example">
188    <button id="example4">Create a Gallery</button>
189    <input name="BrowseExample4" type="text" id="myGallery" value="Gallery output will be stored in here" style="width: 550px;" />
190  </div>
191  <div style="clear: both;"></div>
192</div>
193</body>
194</html>
Note: See TracBrowser for help on using the repository browser.