Page 1 of 1
Function prototype > showNodes(n)
Posted: Sat Jan 27, 2007 4:17 pm
by benson
i was editing 'media_upload.tpl' and found:
Code: Select all
//Function prototype inspired by http://molily.de/javascript-nodelist
i just want to know what that script does, i cant fully understand the code, and if the warning below has to do with that script.
Code: Select all
<!-- WARNING: Do not change spacing or breaks below. If you do, the JavaScript childNodes need to be edited. Newlines count as nodes! -->
Re: Function prototype > showNodes(n)
Posted: Mon Jan 29, 2007 9:37 am
by garvinhicking
Hi!
That script is there to clone a subset of a HTML node, namely the file upload form. You can clone it to upload multiple files.
If you change that HTML form, then linespacing will change and the Javascript will no longer work resp. needs to be updated for the new line counts. Best to avoid changing the HTML node form!
Best regards,
Garvin
Posted: Mon Jan 29, 2007 10:10 am
by benson
There is not another way to do that? or there is a way to unable that?
Just i think if there is a feature that dont let you edit or change something its not a feature(unless that the feature about, but this is not that case)
Just a thought
Ale.
Posted: Mon Jan 29, 2007 10:14 am
by garvinhicking
Hi!
benson wrote:There is not another way to do that? or there is a way to unable that?
What exactly do you want to do? You can achieve much of the styling with CSS with no need to shuffle elements.
If you definitely need to change them, you will need to change the contained javascript code as well and change the proper number of element addressing.
So you can edit it. But you must know what you are doing (as usual)
Best regards,
Garvin
Posted: Mon Jan 29, 2007 11:03 am
by benson
hey garvin!
i want to go from this (original)
http://www.photografiko.com.ar/s9y/fromthis.gif
http://www.photografiko.com.ar/s9y/fromthis.htm
to this (edited)
http://www.photografiko.com.ar/s9y/tothis.gif
http://www.photografiko.com.ar/s9y/tothis.htm
see the sourse code.
the original file generated is 13.15kb
while the edited is 4.79kb
yes i took all the javascript going on there, and is not working.
my idea is that the upload interface look like the 2ndo file, is better design with less codding. i just took off all the JS there because i couldnt understand what was going on there.
Posted: Mon Jan 29, 2007 1:02 pm
by garvinhicking
Hi!
Okay. I believe you can do that all via CSS, if you use "display: none" to hide certain stuff.
You have stripped some fields that are important for serendipitys operation. You must use custom javascript to put contents into those fields.
You need the javascript, you cannot simply remove it.
Best regards,
Garvin
Posted: Mon Jan 29, 2007 2:33 pm
by benson
Thanks
ok, yes of course i can do that by display:none but the user y going to get extra code and doesnt seen it. its not a deal.
ill work on it today, ill posting the results in this days.
Posted: Tue Jan 30, 2007 6:16 pm
by benson
Garvin!
I think this is the best choise.
innetHTML is faster than DOM
Reduce the script 52% (and could be shorter just using divs and not tables)
Is cross browser safe (ie,ff,opera)
and is easy to edit for people
This is the form:
Code: Select all
<div id="upload_template_1">
<table style="margin-top: 35px" id="upload_table" class="image_add_local">
<tr>
<td nowrap='nowrap'>{$CONST.ENTER_MEDIA_UPLOAD}</td>
<td><input id="userfile_1" name="serendipity[userfile][1]" onchange="checkInputs();" type="file" /></td>
</tr>
<tr>
<td align="center" colspan="2"><br /></td>
</tr>
<tr>
<td>{$CONST.SAVE_FILE_AS}</td>
<td><input type="text" id="target_filename_1" name="serendipity[target_filename][1]" value="" size="40" /></td>
</tr>
<tr>
<td>{$CONST.STORE_IN_DIRECTORY}</td>
<td>
<select id="target_directory_1" name="serendipity[target_directory][1]">
<option value="">{$CONST.BASE_DIRECTORY}</option>
{foreach from=$media.folders item="folder"}
<option {if $media.only_path == $folder.relpath}selected="selected"{/if} value="{$folder.relpath}">{' '|@str_repeat:$folder.depth*2} {$folder.name}</option>
{/foreach}
</select>
</td>
</tr>
</table>
<div id="ccounter"><input type="hidden" name="serendipity[column_count][1]" id="column_count_1" value="true" /></div>
</div>
<div id="upload_template_2">
</div>
This is the Script:
Code: Select all
var fieldcount = 1;
function addField() {ldelim}
fieldcount++;
nextfieldcount=fieldcount+1;
iNew = document.getElementById('upload_template_' + fieldcount);
iNew.innerHTML='<span id="upload_template_' + fieldcount + '"><table style="margin-top: 35px" id="upload_table" class="image_add_local"><tr><td nowrap="nowrap">{$CONST.ENTER_MEDIA_UPLOAD}</td><td><input id="userfile_' + fieldcount + '" name="serendipity[userfile][' + fieldcount + ']" onchange="checkInputs();" type="file" /></td></tr><tr><td align="center" colspan="2"><br /></td></tr><tr><td>{$CONST.SAVE_FILE_AS}</td><td><input type="text" id="target_filename_' + fieldcount + '" name="serendipity[target_filename][' + fieldcount + ']" value="" size="40" /></td></tr><tr><td>{$CONST.STORE_IN_DIRECTORY}</td><td><select id="target_directory_' + fieldcount + '" name="serendipity[target_directory][' + fieldcount + ']"><option value="">{$CONST.BASE_DIRECTORY}</option>{foreach from=$media.folders item="folder"}<option {if $media.only_path == $folder.relpath}selected="selected"{/if} value="{$folder.relpath}">{' '|@str_repeat:$folder.depth*2} {$folder.name}</option>{/foreach}</select></td></tr></table><div id="ccounter"><input type="hidden" name="serendipity[column_count][' + fieldcount + ']" id="column_count_' + fieldcount + '" value="true" /></div></span><span id="upload_template_' + nextfieldcount + '"></span>'
{rdelim}
Posted: Tue Jan 30, 2007 8:03 pm
by garvinhicking
Hi!
We need fallback code so that the upload form also works when no JavaScript is available -- which is the reason why we went through the DOM trouble, to have a compatible way to make it work without javascript and have improved functionality with javascript...?
Best regards,
Garvin
Posted: Tue Jan 30, 2007 8:22 pm
by benson
Javascript for no Javascript
i thought this was the trick:
<script type="text/javascript">
document.write('<input class="serendipityPrettyButton" type="button" value="{$CONST.IMAGE_MORE_INPUT}" onclick="hideForeign(); addField()"' + '/><br' + '/>');
</script>
so if no JS available, cannot make another form to upload a 2ndo file
i guess you are right. I realy dont know what you are talking about but ill keep my way
thanks for the time
Posted: Tue Jan 30, 2007 8:58 pm
by garvinhicking
Hi!
The important thing is that it works for you.
Best regards,
Garvin
