Rovak / InlineAttachment

Easily paste and upload files/images in plain textareas
http://git.razko.nl/InlineAttachment
MIT License
619 stars 77 forks source link

Problem to get the relevant Instance, Saving the instance #26

Closed hmftw closed 10 years ago

hmftw commented 10 years ago

Hello,

first of all, i would like to thank you for that very good project. That project could take many work off hand :)

I have a special question.

I have a big problem with your lib in combination with the jQ Sortable.

Especially, I have a two layered..

@Attach "One" you can see an overview about the project.

It is a collection of looks.

The unique Looks have a lookposition starting by 1 to N-Numbers of Looks. A new Look can be added by Click to "First" or "Last".

One Look Container will be added by using this function:

function addClonedLookRow(pos) {

    var counter = 0;
    var $container = $('.sortable_looks');
    var $cloneObj = $('.overContent').filter('.clone');

    var $clone = $cloneObj.clone();
        $clone.removeClass('clone');
        $clone.addClass('new');
        $clone.attr('rel', '');

        $clone.find('.imgContainer[modulformat="'+currentInlineUploadMethod+'"]').show();

    if(pos == 'First') { 

        var tmp = {0:1};

        $.each(gl_countLookArticles, function(i,val){

            tmp[parseInt(i)+1] = val;

        }); 
        counter = 1;
        gl_countLookArticles = tmp;

    } else {

        for (i in gl_countLookArticles){counter++;}

        gl_countLookArticles[counter] = 1;

    }

    $clone.show();
    $clone.attr('lookpos',counter);

    if(pos == 'First') {

        $clone.insertBefore($container.children().first());

    } else {

        $clone.appendTo($container);
    }

    attachInlineUploadByLookPos(counter);
    reindexLookPos();

}

The variable "gl_countLookArticles" is a global Variable which contains all existing Looks and the count of articles to each look.

The function attachInlineUploadByLookPos:

function attachInlineUploadByLookPos(lookpos) {

    console.log('Given lookpos:'+lookpos);

    $.each(
        [$(".overContent[lookpos='"+lookpos+"'] .OCone .imgContainer[modulformat='full']") ,
         $(".overContent[lookpos='"+lookpos+"'] .OCone .imgContainer[modulformat='half']")], 
        function(i,val){

            $(val).inlineattach({
                customUploadHandler: c_onReceivedFile,
                uploadUrl: 'index.php?action=DELETED&method=saveInlineImgUpload&s='+$sess,
                uploadFileName: 'imgUpload',
                downloadFieldName: val
            });

        }

}

The Library works, with an own modification like this:

window.inlineAttach.Editor = function(instance) {

    var input = instance;

    return {
        getValue: function() {
            return input.value;
        },
        setValue: function(val) {
            input.value = val;
        },
        targetElement: function() {

            return instance;

        }
    };
};

With my solution, the internal reference to the object is given by itself. I can get the instance @the method: uploadFile using editor.targetElement() ...

The current version depends on the Lookposition... If I click to "First" the position 1 will be overgiven to the function "attachInlineUploadByLookPos" and the next click too... :P In my perception, i have no way to get the "only" correct container which is been affected by using the dropfunction.. or?

I'd like to have a clear and simple solution.. Could I get a advice from you, please?

Is there a way to get the e.originalEvent? :P

one

Rovak commented 10 years ago

Hi hmftw,

If i understand the question correctly then you need the following functionality:

Both references are, as you mentioned, not available right now, this would require a modification in the current hooks.

Hereby my proposal to fix the issue, all events will have additional parameters which contain the instance, and where applicable the originalEvent

{
    /**
     * When a file is received by drag-drop or paste
     *
     * @param {Blob} file
     * @param {Textarea}
     * @param {Event}
     */
    onReceivedFile: function(file, instance, originalEvent) {},

    /**
     * When a file has succesfully been uploaded
     *
     * @param {Object} json JSON data returned from the server
     * @param {Textarea}
     */
    onUploadedFile: function(json, instance) {},

    /**
     * Custom error handler. Runs after removing the placeholder text and before the alert().
     * Return false from this function to prevent the alert dialog.
     *
     * @Param {Textarea}
     * @return {Boolean} when false is returned it will prevent default error behavior
     */
    customErrorHandler: function(instance) { return true; }
}

If you are willing to create a Pull Request then i'll glady accept it. Or i will add this later when i got the time.

Rovak commented 10 years ago

Continuing in #27