Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Sign In with Google Sign In with OpenID

In admin: add wysiwyg to textarea and create yes/no select list

13»

Comments

  • I'm currently adding a property with ~28 images, so I'm back to thinking about selecting multiple images from the upload dialog. Not having worked with jquery before, I'm not sure how much will be involved to add this. But I'm really not looking forward to popping up a selection dialog 27 times and trying to find an image I haven't added yet from 7 rows of tiny thumbnails.

    Or maybe another approach makes more sense, such as just giving a link to the filemanager page for the current property's folder.

  • Shouldn't be too bad to add since the changes are all client-side.

    I added some more notes to the issue on Github, since the description was a little lacking before, although I'm not sure I'll personally have time to get to this one for a while yet.

    https://github.com/jbroadway/elefant/issues/156

  • I'm willing to take a crack at it but I would love a little more guidance if you have time for that. So if multiple is set, 1) clicking on an image marks it as selected instead of submitting it and 2) the form now gets a submit button.

    I'm not sure how to tell filebrowser to change its behavior for 1)

    For 2), would it make sense use a variable for the form so that we can optionally add to it? For instance,

        var form =
            '<div id="filebrowser-dropzone">' +
                '<form method="post" enctype="multipart/form-data">' +
                    '<div id="filebrowser-upload">' +
                        '<div id="filebrowser-upload-form">' +
                            self.opts.new_file + ': ' +
                            '<input type="file" name="file[]" id="filebrowser-file" multiple="multiple" />' +
                        '</div>' +
                        '<div id="filebrowser-upload-progress">' +
                            '<div id="filebrowser-upload-progress-bar"></div>' +
                            '<div id="filebrowser-upload-progress-text">' + self.opts.uploading_text + '</div>' +
                        '</div>' +
                    '</div>' +
                    '<select id="filebrowser-dirs"><option value="">files</option></select>' +
                    '<div id="filebrowser-list"></div>';
        if (self.opts.multiple) {
            form += '<input type="submit" value="submit">';
        }
        form +=
                '</form>' +
            '</div>';
        $.open_dialog (
            self.opts.title,
            form
        );
    
  • You've got the right idea. I would just add an id attribute to the submit button, so you can easily attach an event to it:

    form += '<input type="submit" id="filebrowser-select" value="Select">';
    

    And the event would be something like:

    $('#filebrowser-select').one ('click', self.select_files);
    

    From there, it looks like you'd have to make a few more changes:

    • add multiple: false to the defaults list
    • add a .filebrowser-selected class to filebrowser.css to add a border or bold it to highlight the selected ones
    • modify self.select_file to check for self.opts.multiple and add to or remove it from the list instead of submitting it, and add/remove the filebrowser-selected class from that file
    • add a self.select_files function to handle returning the list of files, which you could base on self.select_file

    That's all I can think of for now. Let me know how it goes!

  • Thanks! Will do.

  • While I'm at it... how would I make it so all the uploaded files were immediately selected and submitted?

  • That looks like it happens around lines 319-326.

  • I'm thinking of storing the selected files in an array, maybe self.files Make sense?

  • I would add it to the defaults as files: [], then refer to it as self.opts.files everywhere else, but that will automatically reset it on each call to $.filebrowser().

    Users could pass a list of files as a parameter to pre-select existing files, good for edit forms :)

    Eventually, it would be really cool to see the number of files selected (e.g., [Select] (5)) next to the 'Select' button, which could be clicked to show just the selected files, whether they're in the same folder or not.

  • That would be cool. :)

    Should I be returning an array from self.select_files? And should files be prepended to each path?

    I'm struggling with adding the class filebrowser-selected. Would it be something like $('file').addClass ('filebrowser-selected');?

  • I would return an array, and I think self.prefix should be appended to the files as well.

    And it would be:

    if ($(this).hasClass ('filebrowser-selected')) {
        $(this).removeClass ('filebrowser-selected');
    } else {
        $(this).addClass ('filebrowser-selected');
    }
    

    The this variable is a reference to the DOM element that was clicked on.

  • OK, I have something working. Plenty of refinements suggest themselves, but do you want to see it in its current form? If so, is a pull request the best way?

  • Awesome! And pull request is probably easiest.

  • OK, sent.

Sign In or Register to comment.