source: extensions/upload_form/upload.tpl @ 4895

Revision 4895, 5.6 KB checked in by plg, 10 years ago (diff)

feature 1438: switch between uploadify and HTML form

feature 1435 related: change the order to display the "who can see these
photos?" options. It's just a test, we're discussing about usability on this
field.

graphical design: distinguish the 3 main fields (category/privacy/files), no
use of the table anymore to have a smaller width. One goal was to see the
"Upload" button when the form opens for the first time in a 1024x768 browser.

Line 
1{known_script id="jquery" src=$ROOT_URL|@cat:"template-common/lib/jquery.packed.js"}
2
3{literal}
4<script>
5$(document).ready(function(){
6
7  $("input[name=category_type]").click(function () {
8    $("[id^=category_type_]").hide();
9    $("#category_type_"+$(this).attr("value")).show();
10  });
11});
12</script>
13{/literal}
14
15{if $upload_mode eq 'html'}
16<script type="text/javascript" src="{$plugin_path}include/upload.js"></script>
17{elseif $upload_mode eq 'multiple'}
18<script type="text/javascript" src="{$plugin_path}uploadify/swfobject.js"></script>
19<script type="text/javascript" src="{$plugin_path}uploadify/jquery.uploadify.v2.1.0.min.js"></script>
20
21<script type="text/javascript">
22var basepath = '{$plugin_path}';
23var upload_id = '{$upload_id}';
24var session_id = '{$session_id}';
25var pwg_token = '{$pwg_token}';
26var buttonText = 'Browse';
27
28{literal}
29jQuery(document).ready(function() {
30  jQuery("#uploadify").uploadify({
31    'uploader'       : basepath + 'uploadify/uploadify.swf',
32    'script'         : basepath + 'uploadify/uploadify.php',
33    'scriptData'     : {
34      'upload_id' : upload_id,
35      'session_id' : session_id,
36      'pwg_token' : pwg_token,
37    },
38    'cancelImg'      : basepath + 'uploadify/cancel.png',
39    'queueID'        : 'fileQueue',
40    'auto'           : false,
41    'displayData'    : 'speed',
42    'buttonText'     : buttonText,
43    'multi'          : true,
44    'onAllComplete'  : function(event, data) {
45      if (data.errors) {
46        return false;
47      }
48      else {
49        $("input[name=submit_upload]").click();
50      }
51    }
52  });
53});
54{/literal}
55</script>
56{/if}
57
58{literal}
59<style>
60#uploadBoxes P {
61  margin:0;
62  margin-bottom:2px;
63  padding:0;
64}
65
66#batchLink {
67  text-align:center;
68}
69
70.category_selection {
71  min-height:65px;
72  margin-top:5px;
73}
74
75.category_selection TABLE {
76  margin:0;
77}
78
79.formField {
80  width:650px;
81  margin:0 auto 20px auto;
82  padding:10px;
83  border: 2px solid #292929;
84}
85
86.formFieldTitle {
87  font-weight:bold;
88  margin-bottom:10px;
89}
90
91.formField P {
92  margin:0;
93}
94</style>
95{/literal}
96
97<div class="titrePage" style="height:0">
98  <h2>{'Upload Form'|@translate}</h2>
99</div>
100
101{if count($setup_errors) > 0}
102<div class="errors">
103  <ul>
104  {foreach from=$setup_errors item=error}
105    <li>{$error}</li>
106  {/foreach}
107  </ul>
108</div>
109{else}
110
111{if !empty($thumbnails)}
112<fieldset>
113  <legend>{'Uploaded Photos'|@translate}</legend>
114  <div>
115  {foreach from=$thumbnails item=thumbnail}
116    <a href="{$thumbnail.link}" onclick="window.open(this.href); return false;">
117      <img src="{$thumbnail.src}" alt="{$thumbnail.file}" title="{$thumbnail.title}" class="thumbnail">
118    </a>
119  {/foreach}
120  </div>
121  <p id="batchLink"><a href="{$batch_link}">{$batch_label}</a></p>
122</fieldset>
123{/if}
124
125
126<form id="uploadForm" enctype="multipart/form-data" method="post" action="{$F_ACTION}" class="properties">
127{if $upload_mode eq 'multiple'}
128<input name="upload_id" value="{$upload_id}" type="hidden">
129{/if}
130  <fieldset>
131    <legend>{'Upload Photos'|@translate}</legend>
132
133    <div class="formField">
134      <div class="formFieldTitle">{'Drop into category'|@translate}</div>
135     
136      <label><input type="radio" name="category_type" value="existing"> {'existing category'|@translate}</label>
137      <label><input type="radio" name="category_type" value="new" checked="checked"> {'create a new category'|@translate}</label>
138
139      <div id="category_type_existing" style="display:none" class="category_selection">
140        <select class="categoryDropDown" name="category">
141          {html_options options=$category_options}
142        </select>
143      </div>
144
145      <div id="category_type_new" class="category_selection">
146        <table>
147          <tr>
148            <td>{'Parent category'|@translate}</td>
149            <td>
150              <select class="categoryDropDown" name="category_parent">
151                <option value="0">------------</option>
152                {html_options options=$category_options}
153              </select>
154            </td>
155          </tr>
156          <tr>
157            <td>{'Category name'|@translate}</td>
158            <td>
159              <input type="text" name="category_name" value="{$F_CATEGORY_NAME}"
160            </td>
161          </tr>
162        </table>
163      </div>
164    </div>
165
166    <div class="formField">
167      <div class="formFieldTitle">{'Who can see these photos?'|@translate}</div>
168
169      <select name="level" size="1">
170        {html_options options=$level_options selected=$level_options_selected}
171      </select>
172    </div>
173
174    <div class="formField">
175      <div class="formFieldTitle">{'Select files'|@translate}</div>
176
177{if $upload_mode eq 'html'}
178    <p><a href="{$switch_url}">{'... or switch to the multiple files form'|@translate}</a></p>
179
180      <p>{'JPEG files or ZIP archives with JPEG files inside please.'|@translate}</p>
181
182      <div id="uploadBoxes">
183        <p><input class="file" type="file" size="60" name="image_upload[]" /></p>
184      </div>
185      <div id="addUploadBox">
186        <a href="javascript: UpdateUploadSlots()">{'+ Add an upload box'|@translate}</a>
187      </div>
188   
189    </div> <!-- formField -->
190
191    <p>
192      <input class="submit" type="submit" name="submit_upload" value="{'Upload'|@translate}" {$TAG_INPUT_ENABLED}/>
193    </p>
194{elseif $upload_mode eq 'multiple'}
195    </table>
196
197    <p>
198      <input type="file" name="uploadify" id="uploadify" />
199    </p>
200
201    <p><a href="{$switch_url}">{'... or switch to the old style form'|@translate}</a></p>
202
203    <div id="fileQueue"></div>
204
205    </div> <!-- formField -->
206    <p>
207      <input class="submit" type="button" value="{'Upload'|@translate}" onclick="javascript:jQuery('#uploadify').uploadifyUpload()"/>
208      <input type="submit" name="submit_upload" style="display:none"/>
209    </p>
210{/if}
211  </fieldset>
212</form>
213{/if}
Note: See TracBrowser for help on using the repository browser.