Function prototype > showNodes(n)

[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! -->

[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

[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.

[garvinhicking]

Hi!

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

[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.

[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

[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.

[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}">{'&nbsp;'|@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}">{'&nbsp;'|@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}

[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

[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

[garvinhicking]

Hi!

The important thing is that it works for you.

Best regards,
Garvin