I need to know how to access an event BEFORE adding file preview (not addedfile event because it's actually called after adding file, so does accept event)
I need something like this
myDropzone.on("beforeaddedfile", function(file) {
if(/*some condition*/)
//add file
else
// don't add file
});
I guess you should be able to do almost the same thing with "addedfile" event, like this:
myDropzone.on("addedfile", function(file) {
if(/*some condition*/) {
//continue to do something and add file
} else {
// don't add file
myDropzone.removeFile(file);
}
});
I hope this works for you :)
There is an (currently) undocumented event named addedfiles which gets files as a parameter, which will trigger before the event addedfile:
myDropzone.on("addedfiles", function(files) {
if(/*some condition*/){
// add files
} else{
// don't add files
}
});
Found in the source code: https://gitlab.com/meno/dropzone/blob/master/src/dropzone.js#L114
This helped me getting the total number of added files before addedfile is called.
But note that this is only called once, when adding files to dropzone.
Related
I want to rollback the original dropzone with its message "drop files here" after the success event of dropzone or after the complete event of dropzone.
I don't want to see the preview after success or complete.
This is my dropzone script:
Dropzone.options.myAwesomeDropzone = {
paramName: "file", // The name that will be used to transfer the file
maxFilesize: 2, // MB
parallelUploads: 1,
success: function(file, response) {
var imageSrc = response;
$(".img-responsive").attr('src', imageSrc);
if (imageSrc == '/assets/images/offerfeatimg.jpg') {
$(".removebutton").hide();
} else {
$(".removebutton").show();
}
}
};
Leveraging #kkthxby3 's idea, the innerHTML for the thumbnail can be cleared in the success method using the following code:
success: function (file, response) {
file.previewElement.innerHTML = "";
}
The beauty of this approach is that it clears the thumbnail without firing the removedFile event.
This leaves the following html in the dom where the thumbnail was:
<div class="dz-preview dz-processing dz-image-preview dz-complete"></div>
but as you can see, the div above which is responsible for displaying the thumbnail is now empty.
Another approach is to remove even the enclosing div that wraps the thumbnail along with it's contents. This approach can be accomplished with the following code in the success method and leaves no trace of the thumbnail in the dom:
success: function (file, response) {
file.previewElement.parentNode.removeChild(file.previewElement);
}
Enjoy.
only need call method removeFile in success function
success: function (file, response) {
this.removeFile(file);
}
check doc dropzone
For me the easiest way to make the file preview not appear is with css.
dz-preview and dz-file-preview are a couple classes in the outer div of the preview html generated by the default template.
.dz-preview, .dz-file-preview {
display: none;
}
I also told it to not create thumbnails in the Dropzone.options.
Dropzone.options.myDropzone = {
paramName: "file",
maxFilesize: 2, // MB
url: 'post_image',
createImageThumbnails: false, // NO THUMBS!
init: function () {
this.on('sending', dz_sending),
this.on('success', dz_success),
this.on('error', dz_error),
this.on('complete', dz_complete) // Once it's done...
}
The template still generates all the preview html though. So in my 'complete' function dz_complete I delete it all.
function dz_complete(file) {
$('.dz-preview').remove(); // ...delete the template gen'd html.
}
Just an fyi...
The method 'removeAllFiles' is not necessarily the prime choice. Which is the same as 'removeFile(file)'.
I have an event handler for dropZone's 'removedfile' event... I'm using it to send a server message to delete the respective file from the server (should a user delete the thumbnail after it's been uploaded). Using the method 'removeAllFiles' (as well as the individualized 'removeFile(file)') fires the event 'removedfile' which deletes the uploaded images in addition to clearing the thumbnails.
So one could add some finessing around this but in the reality of it the method is not correct.
Looking through the api for Dropzone I am not seeing an API call to simply reset or clear the thumbnails... The method 'disable()' will clear the stored file names and what not but does not clear the thumbnails... Seems dropzoneJS is actually missing a critical API call to be honest.
My work around is to manually reset the containing div for dropzone:
document.getElementById("divNameWhereDropzoneClassIs").innerHTML = ""
This clears the thumbnails without firing off the event 'removedfile' which is supposed to be used for deleting an image from the server...
The easiest thing is to call the dropzone removeFile() method, using an event listener for the success event.
Dropzone.options.myAwesomeDropzone = {
paramName: "file",
maxFilesize: 2,
parallelUploads: 1,
init: function() {
this.on("success", function(file, response) {
var imageSrc = response;
$(".img-responsive").attr('src', imageSrc);
if(imageSrc == '/assets/images/offerfeatimg.jpg') {
$(".removebutton").hide();
} else {
$(".removebutton").show();
}
this.removeFile(file); // This line removes the preview
})
}
};
I was using file.previewElement.remove(), works fine in Chrome but does not work in IE.
Then I tried this.removeFile(file), but it didn't work for me.
After that i tried file.previewElement.innerHTML = "" which works in both Chrome and IE but it leaves an extra div where the preview elements were.
So this one works better for me...
success: function (file, response) {
file.previewElement.outerHTML = "";
}
If you want to remove an added file from the dropzone, you can call .removeFile(file). This method also triggers the removedfile event.
Here’s an example that would automatically remove a file when it’s finished uploading:
myDropzone.on("complete", function(file) {
myDropzone.removeFile(file);
});
If you want to remove all files, simply use .removeAllFiles(). Files that are in the process of being uploaded won’t be removed. If you want files that are currently uploading to be canceled, call .removeAllFiles(true) which will cancel the uploads.
100% Tested and Working:
$('#preview_image_container .dz-preview .dz-remove').attr('id','removeFile');
document.getElementById("removeFile").click();
I have made some changes to the setup.js settings file that is in the /js/mage/adminhtml/wysiwyg/tiny_mce directory.
Will these changes get lost after an upgrade? Is there a way to duplicate this folder like when creating a frontend theme?
Thanks
Yes,
You can add your custom folder inside JS folder, create your own js and paste Below code , it is overwrite js function, and call it where you need
if (typeof tinyMceWysiwygSetup != 'undefined') {
tinyMceWysiwygSetup.addMethods({
//here is example for you, suppose if you have changed something in below function
initialize: function(htmlId, config)
{
this.id = htmlId;
this.config = config;
varienGlobalEvents.attachEventHandler('tinymceChange', this.onChangeContent.bind(this));
this.notifyFirebug();
if(typeof tinyMceEditors == 'undefined') {
tinyMceEditors = $H({});
}
tinyMceEditors.set(this.id, this);
// Paste here your custom code
}
});
}
May be this help for you.
Example: (werkwijze is custom, i also have the same code with other names like -contact)
$(function() {
$('#activator-werkwijze').click(function(){
$('#overlay-werkwijze').fadeIn('fast',function(){
$('#box-werkwijze').animate({'bottom':'0px'},800);
});
});
$('#boxclose-werkwijze').click(function(){
$('#box-werkwijze').animate({'bottom':'-600px'},800,function(){
$('#overlay-werkwijze').fadeOut('fast');
});
});
});
activator shows the content, boxclose closes the content.
clicking all activators opens all content while it needs to open only one and close the others..
edit got it fixed:
This is the script which works, (the overlay is useless) jsfiddle.net/8y7Sr/126/
You need to provide more information about how you are calling the pop-up script. If you are using jquery, you can just close all and then open one
$('.className').slideDown(200);
$('#specificItem').slideUp(200);
But again, you should explain how you are doing the calls in more detail for a better answer
example, put inside function jQuery
if($('.hide').css('display')=='block'){ $('.hide').slideUp(); }else{ $('.hide').slideDown(); }
$(function() {
$('.activator').each(function(){
$(this).click(function(){
showHideAnimation(clickedObj);
});
});
}
function showHideAnimation(clickedObj)
{
$('.activator').each(function(){
if($(this).id == clickedObj.id) {
$(this).fadeIn('fast',function(){
$(this).animate({'bottom':'0px'},800);
});
} else {
$(this).animate({'bottom':'-600px'},800,function(){
$(this).fadeOut('fast');
});
}
}
}
Please try this if it doesn't work properly then replace $(this) with only this
I'm triyng to build a simple animation jQuery-plugin. The main idea is to take an element and manipulate it in some way repeatedly in a fixed intervall which would be the fps of the animation.
I wanted to accomplish this through events. Instead of using loops like for() or while() I want to repeat certain actions through triggering events. The idea behind this: I eventualy want to be able to call multiple actions on certain events, like starting a second animation when the first is done, or even starting it when one animation-sequence is on a certain frame.
Now I tried the following (very simplified version of the plugin):
(function($) {
$.fn.animation = function() {
obj = this;
pause = 1000 / 12; //-> 12fps
function setup(o) {
o.doSomething().trigger('allSetUp');
}
function doStep(o, dt) {
o.doSomething().delay(dt).trigger('stepDone');
}
function sequenceFinished(o) {
o.trigger('startOver');
}
function checkProgress(o) {
o.on({
'allSetup': function(event) {
console.log(event); //check event
doStep(o, pause);
},
'stepDone': function(event) {
console.log(event); //check event
doStep(o, pause);
},
'startOver': function(event) {
console.log(event); //check event
resetAll(o);
}
});
}
function resetAll(o) {
/*<-
reset stuff here
->*/
//then start over again
setup(o);
}
return this.each(function() {
setup(obj);
checkProgress(obj);
});
};
})(jQuery);
Then i call the animation like this:
$(document).ready(function() {
$('#object').animation();
});
And then – nothing happens. No events get fired. My question: why? Is it not possible to use events like this inside of a jQuery plugin? Do I have to trigger them 'manualy' in $(document).ready() (what I would not prefer, because it would be a completely different thing – controling the animation from outside the plugin. Instead I would like to use the events inside the plugin to have a certain level of 'self-control' inside the plugin).
I feel like I'm missing some fundamental thing about custom events (note: I'm still quite new to this) and how to use them...
Thx for any help.
SOLUTION:
The event handling and triggering actually works, I just had to call the checkProgress function first:
Instead of
return this.each(function() {
setup(obj);
checkProgress(obj);
});
I had to do this:
return this.each(function() {
checkProgress(obj);
setup(obj);
});
So the event listening function has to be called before any event gets triggered, what of course makes perfect sense...
You need set event on your DOM model for instance:
$('#foo').bind('custom', function(event, param1, param2) {
alert('My trigger')
});
$('#foo').on('click', function(){ $(this).trigger('custom');});
You DOM element should know when he should fire your trigger.
Please note that in your plugin you don't call any internal function - ONLY DECLARATION
I'm getting an error when parsing checkboxes in a table that is loaded with AJAX, but I get an error saying the widget with that id is already registered:
"Error('Tried to register widget with id==userListUncheckAll but that id is already registered')"
And I'm guessing this happens because we take out the current table, then replace it with what ever we get back from the AJAX call, and thus the element id's would be the same. Is there a way to "unregister" the widgets or something similar?
I found the answer for this myself, so I'll put it here for others:
If you have a set of id's that you know will need to be "unregistered", create an array of the id names:
try {
dojo.parser.parse();
} catch (e) {
var ids = ['id1', 'id2', 'id3'];
dijit.registry.forEach(function(widget) {
//remove this check if you want to unregister all widgets
if (dojo.indexOf(ids, id) {
widget.destroyRecursive();
}
});
dojo.parser.parse();
}
Works like a charm.
Get the parent node that you are inserting the AJAX content into and parse ONLY this node. You are getting this error because other widgets in your DOM are getting parsed twice. Something like this:
require(["dojo/dom", "dojo/parser", "dojo/_base/xhr"/*, etc */ ],
function(dom, parser, xhr) {
var request = xhr.get({
// your details here
});
request.then(function(data) {
// transform data if necessary
var parentNode = dom.byId("/* parent id */");
parentNode.innerHTML = data;
// This is where the widgets get built!
parser.parse(parentNode); // or parser.parse("/* parent id */");
}, function(err) {
// handle error
});
});
Also, make sure you include the right dojo / dijit modules. A common mistake is to forget to include the modules for the widgets that you are trying to insert. For example, if you are using TabContainer, add "dijit/layout/TabContainer" to the list of required modules.
Within the Dojo Parser documentation is included this code snipet:
dojo.xhrGet({
url: "widgets.html",
load: function(data){
dojo.byId("container").innerHTML = data;
dojo.parser.parse("container");
}
})
I applied in my code and works fine.