source: trunk/plugins/MootoolsFileManager/mootools-filemanager/Demos/index.html @ 1313

Last change on this file since 1313 was 1313, checked in by gogo, 7 years ago

A few belated patches to Xinha...

Use session_write_close in php-xinha to close the session quicker in order to reduce lock waits
Set the default borders for insert table to no-border
Allow to choose no border style when inserting tables
Skip the "complete" attribute of images when domwalking (think this was firefox or something)
A handful of fixes to the (old) MootoolsFileManager?
Small fix to Stylist
Add .htaccess to ExtendedFileManager? demo_images
Small fix to PasteText?

Trac is down for me right now so no ticket number, will add a ticket to reference this changeset asap.

File size: 5.6 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>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                -moz-box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 2px;
43        }
44       
45        div.content div.example {
46                float: left;
47                clear: both;
48                margin: 10px 0;
49        }
50       
51        button {
52                margin: 5px 0;
53        }
54        </style>
55       
56        <link rel="stylesheet" media="all" type="text/css" href="../Css/FileManager.css" />
57        <link rel="stylesheet" media="all" type="text/css" href="../Css/Additions.css" />
58
59        <script type="text/javascript" src="mootools-core.js"></script>
60        <script type="text/javascript" src="mootools-more.js"></script>
61       
62        <script type="text/javascript" src="../Source/FileManager.js"></script>
63        <script type="text/javascript" src="../Language/Language.en.js"></script>
64        <script type="text/javascript" src="../Language/Language.de.js"></script>
65        <script type="text/javascript" src="../Source/Additions.js"></script>
66       
67        <script type="text/javascript" src="../Source/Uploader/Fx.ProgressBar.js"></script>
68        <script type="text/javascript" src="../Source/Uploader/Swiff.Uploader.js"></script>
69
70        <script type="text/javascript" src="../Source/Uploader.js"></script>
71        <script type="text/javascript" src="../Source/Gallery.js"></script>
72       
73        <script type="text/javascript">
74                window.addEvent('domready', function(){
75                        /* Simple Example */
76                        var manager1 = new FileManager({
77                                url: 'manager.php',
78                                assetBasePath: '../Assets',
79                                language: 'en',
80                                uploadAuthData: {session: 'MySessionId'}
81                        });
82                        document.id('example1').addEvent('click', manager1.show.bind(manager1));
83
84                        /* Select a file */
85                        var el = document.id('example2');
86                        var div, manager2;
87                        var complete = function(path, file){
88                                el.set('value', path);
89                               
90                                if(div) div.destroy();
91                                var icon = new Asset.image(this.options.assetBasePath+'cancel.png', {'class': 'file-cancel', title: this.language.deselect}).addEvent('click', function(e){
92                                        e.stop();
93                                        el.set('value', '');
94                                        var self = this;
95                                        div.fade(0).get('tween').chain(function(){
96                                                div.destroy();
97                                                manager2.tips.hide();
98                                                manager2.tips.detach(self);
99                                        });
100                                });
101                                manager2.tips.attach(icon);
102                               
103                                div = new Element('div', {'class': 'selected-file', text: 'Selected file: '}).adopt(
104                                        new Asset.image(this.options.assetBasePath+'Icons/'+file.icon+'.png', {'class': 'mime-icon'}),
105                                        new Element('span', {text: file.name}),
106                                        icon
107                                ).inject(el, 'after');
108                        };
109                       
110                        manager2 = new FileManager({
111                                url: 'selectImage.php',
112                                assetBasePath: '../Assets',
113                                language: 'en',
114                                selectable: true,
115                                uploadAuthData: {session: 'MySessionId'},
116                                onComplete: complete
117                        });
118                       
119                        el.setStyle('display', 'none');
120                        var val = el.get('value');
121                        if(val) complete.apply(manager2, [val, {
122                                name: val.split('/').getLast(),
123                                icon: val.split('.').getLast()
124                        }]);
125                       
126                        new Element('button', {'class': 'browser', text: 'Select an image'}).addEvent('click', manager2.show.bind(manager2)).inject(el, 'before');
127
128                        /* Localized Example */
129                        var manager3 = new FileManager({
130                                url: 'manager.php',
131                                assetBasePath: '../Assets',
132                                language: 'de',
133                                hideOnClick: true,
134                                uploadAuthData: {session: 'MySessionId'}
135                        });
136                        document.id('example3').addEvent('click', manager3.show.bind(manager3));
137
138
139                        /* Gallery Example */
140                        var global = this;
141                        var example4 = document.id('myGallery');
142                        var manager4 = new FileManager.Gallery({
143                                url: 'selectImage.php',
144                                assetBasePath: '../Assets',
145                                hideOnClick: true,
146                                uploadAuthData: {session: 'MySessionId'},
147                                onShow: function(){
148                                        var obj;
149                                        $try(function(){ obj = JSON.decode(example4.get('value')); });
150                                        this.populate(obj);
151                                },
152                                onComplete: function(serialized){
153                                        example4.set('value', JSON.encode(serialized));
154                                },
155                                onPreview: function(src, caption, li){
156                                        /* Suggestion */
157                                        /*
158                                        if (global.Slimbox) global.Slimbox.open(src, caption || '', {
159                                                onClose: function(){ li.fireEvent('click', [e]); }
160                                        });
161                                        */
162                                }
163                        });
164                        document.id('example4').addEvent('click', manager4.show.bind(manager4));
165                });
166        </script>
167</head>
168<body>
169<div id="content" class="content">
170        <h1>FileManager Demo</h1>
171        <div class="example">
172                <button id="example1" class="BrowseExample">Open File-Manager</button>
173        </div>
174        <div class="example">
175                <input name="BrowseExample2" type="text" id="example2" value="Smile.gif" />
176        </div>
177        <div class="example">
178                <a href="#" id="example3" class="BrowseExample">Open File-Manager from a link (German)</a>
179        </div>
180
181        <div class="example">
182                <button id="example4">Create a Gallery</button>
183                <input name="BrowseExample4" type="text" id="myGallery" value="Gallery output will be stored in here" style="width: 250px;" />
184        </div>
185        <div style="clear: both;"></div>
186</div>
187</body>
188</html>
Note: See TracBrowser for help on using the repository browser.