11548 sujets

JavaScript, DOM et API Web HTML5

Bonsoir,

Je suis entrain de modifier un script d'upload.

Ce script ajax liste les fichier est ajouter des fonction en fonction du type de fichier.

Actuellement on peut voir un bouton "Resize this image" pour les image, j'aimerai ajouter un bouton écouter pour les .MP3.

Voici le code JS :
/* Warning, do not modify this file unless you know what you're doing. */

var rowcolor1 = '#F5F5F5'; // color 1 for the rows
var rowcolor2 = '#FBFBFB'; // alternate color for the rows
var rowcolor3 = '#FBFFDF'; // highlight

var arrowUp = '<img src="templates/default2/images/arrowup.gif" alt="" />';
var arrowDown = '<img src="templates/default2/images/arrowdown.gif" alt="" />';
var sortDirection = { 'ext':0, 'name':0, 'size':0, 'date':1 }
var currentSort = '';
var icons_url = 'templates/default2/images/icons/';

addOnLoadFunc ( drawFilesTable );
addOnLoadFunc ( function () { myFilesSort ( 'date' ); } );

function checkFiles ( fileType )
{
    for ( var i = 0; i < files.length; i++ )
    {
        var box = 'mf_checkbox_' + i;

        switch ( fileType )
        {
            case 0 : checkIt ( getObj ( box ), 1 ); break;
            case 1 : checkIt ( getObj ( box ), 0 ); break;
            case 2 : checkIt ( getObj ( box ), ( files[i][9] == 'jpg' || files[i][9] == 'gif' || files[i][9] == 'png' || files[i][9] == 'jpeg' || files[i][9] == 'bmp' ) ); break;
            case 3 : checkIt ( getObj ( box ), ( files[i][9] != 'jpg' && files[i][9] != 'gif' && files[i][9]!= 'png' && files[i][9] != 'jpeg' && files[i][9] != 'bmp' ) ); break;
            case 4 : checkIt ( getObj ( box ), !getObj ( box ).checked ); break;
        }
        highlightRow ( i );
    }
    for ( var i = 0; i < 5; i++ )
    {
        var o = getObj ( 'select_' + i );
        o.className = fileType == i ? 'link_clicked' : 'link';
    }
}

function myFilesSort ( column )
{
    var fsize = function  ( left, right ) { if ( left[10] == right[10] ) return 0; if ( left[10] > right[10] ) return 1; return -1; }
    var fext = function ( left, right ) { if ( left[9] == right[9] ) return 0; if ( left[9] > right[9] ) return 1; return -1; }
    var fdate = function ( left, right ) { if ( left[11] == right[11] ) return 0; if ( left[11] > right[11] ) return 1; return -1; }
    var fname = function ( left, right ) { if ( left[2].toLowerCase() == right[2].toLowerCase() ) return 0; if ( left[2].toLowerCase() > right[2].toLowerCase() ) return 1; return -1; }

    switch ( column )
    {
        case 'ext': currentSort = 'ext'; files.sort ( fext ); if ( sortDirection['ext'] ) files.reverse ( ); sortDirection['ext'] = !sortDirection['ext'];  break;
        case 'name': currentSort = 'name'; files.sort ( fname ); if ( sortDirection['name'] ) files.reverse ( ); sortDirection['name'] = !sortDirection['name'];  break;
        case 'size': currentSort = 'size'; files.sort ( fsize ); if ( sortDirection['size'] ) files.reverse ( ); sortDirection['size'] = !sortDirection['size'];  break;
        case 'date': currentSort = 'date'; files.sort ( fdate ); if ( sortDirection['date'] ) files.reverse ( ); sortDirection['date'] = !sortDirection['date'];  break;
    }
    drawFilesTable ( ); // redraw
}

function myFilesAction ( sAction )
{
    var myFilesForm = getObj ( 'myfiles_form' );

    if ( myFilesForm )
    {
        if ( countCheckedBoxes ( myFilesForm, 'files[]' ) )
        {
            myFilesForm.action.value = sAction;

            if ( sAction == 'delete' )
            {
                var inputFields = myFilesForm.getElementsByTagName ( 'input' );
                var checkedCount = 0;
                var checkedFile = '';

                for ( var i = 0; i < inputFields.length; i++ )
                {
                    if ( inputFields[i].type == 'checkbox' && inputFields[i].checked == true )
                    {
                        checkedCount += 1;
                        checkedFile = unescape ( inputFields[i].value );
                    }
                }
                if ( !confirm ( ( checkedCount > 1 ? 'Are you sure you want to delete the ' + checkedCount + ' selected files?' : 'Are you sure you want to delete the file '+checkedFile+'?' ) ) ) return false;
            }

            myFilesForm.submit ( );
        }
        else help ( 'You did not select any files.' );
    }
    else alert ( 'Unable to locate myfiles_form' );
}

function showFileOptions ( id )
{
    var f = files[id];
    var trgt = getObj ( 'mf_name_' + id );
    if ( trgt.getAttribute ( 'expanded' ) )
    {
        var options = getObj ( 'options_' + id );
        if ( options ) deleteNode ( options );
        trgt.removeAttribute ( 'expanded' );
    }
    else
    {
        trgt.setAttribute ( 'expanded', 1 );
        var options = '<a href="'+f[13]+'" class="link2">Download</a> - <a href="'+f[7]+'" class="link2">Rename</a>';
        if ( f[5] ) options += ' - <a href="'+f[6]+'" class="link2">Resize this image</a>'; 
		if ( f[5] ) options += ' - <a href="'+f[6]+'" class="link2">Resize this image</a>';
        trgt.innerHTML += '<span id="options_'+id+'" style="display:block;margin:4px 0px 1px 22px;">' + options + '</span>';
    }
}

function highlightRow ( num )
{
    var row = getObj ( 'mf_row_' + num );
    var box = getObj ( 'mf_checkbox_' + num );
    if ( row && box )
    {
        row.style.backgroundColor =  box.checked ? rowcolor3 : ( num & 1 ? rowcolor1 : rowcolor2 );
    }
}

function drawFilesTable ( )
{
    var container = getObj ( 'my_files_container' );

    if ( files.length && container )
    {
        var html =
            '<table id="files_table" style="width:100%; text-align:center; color: #404040" cellspacing="0" cellpadding="2" border="0">' +
                '<tr style="background-color:#D0D0D0;line-height:1.7em;color:black;" onmousedown="return false;">' +
                    '<td style="padding-left:23px;text-align:left;width:240px;"><span class="sort" onmousedown="myFilesSort(\'ext\')">Type</span>' + ( currentSort == 'ext' ? ' ' + ( sortDirection.ext ? arrowUp : arrowDown ) : '' ) + ' - <span onmousedown="myFilesSort(\'name\')" class="sort">Name</span>' + ( currentSort == 'name' ? ' '+ ( sortDirection.name ? arrowUp : arrowDown ) : '' ) + '</td>' +
                    '<td style="width:30px;"><span onmousedown="myFilesSort(\'size\')" class="sort">Size</span>'+( currentSort == 'size' ? '&nbsp;'+ ( sortDirection.size ? arrowUp : arrowDown ) : '' )+'</td>' +
                    '<td style="width:100px;"><span onmousedown="myFilesSort(\'date\')" class="sort">Upload Date</span>'+( currentSort == 'date' ? '&nbsp;'+ ( sortDirection.date ? arrowUp : arrowDown ) : '' )+'</td>' +
                    '<td style="width:35px;"></td>' +
                '</tr>\n';

        for ( var i = 0; i < files.length; i++ )
        {
            html +=
                '<tr style="vertical-align:top;background-color:'+(i&1?rowcolor1:rowcolor2)+'" id="mf_row_' + i + '">' +
                    '<td style="text-align:left;" id="mf_name_'+i+'"><img src="' + icons_url + files[i][0] + '" alt="' + files[i][2] + '" class="img1" /> &nbsp;<a href="' + files[i][1] + '">' + files[i][2] + '</a></td>' +
                    '<td style="padding-top:5px;">'+files[i][3]+'</td>' +
                    '<td style="padding-top:5px;">'+files[i][4]+'</td>' +
                    '<td><img src="templates/default2/images/plus.gif" alt="" style="cursor:pointer;" onclick="showFileOptions('+i+'); return false;" /> <input type="checkbox" name="files[]" value="' + files[i][8] + '" id="mf_checkbox_' + i + '" onclick="highlightRow('+i+');" /></td>' +
                '</tr>\n';
        }
        html += '</table>';

        container.innerHTML = html;
    }
}


merci d'avance[/i][/i][/i][/i][/i][/i][/i][/i][/i][/i][/i][/i][/i][/i][/i][/i][/i][/i][/i][/i]