My javascript file is here. Basically my website is sort of a command prompt style website where I enter commands to do certain functions like file uploading. I also have a "drag & drop" upload function, which looks like this:
$(document).on('dragover', 'body', function(e) {
e.preventDefault();
$("#fileupload").addClass('ishovered');
$(".dragtext").show();
});
$(document).on('dragleave', 'body', function(e) {
$("#fileupload").removeClass('ishovered');
$(".dragtext").hide();
});
$(document).on('drop', 'body', function(e) {
$("#fileupload").removeClass('ishovered');
$(".dragtext").hide();
});
Now this works fine on the website load. But after I run this seemingly unrelated code:
[...]
} else if (value.match("^clear") || value.match("^cls")) {
if ($(".isup").attr("value") == "tr") {
$("#container").append("<span class='code'>" + value + "</span><span class='cmd-cont'>error: please answer yes/no first</span>");
updateScroll();
} else {
$("#container").html(""); /* This is what usually runs, and for some reason breaks the drag & drop upload */
}
}
[...]
function updateScroll() {
var element = document.getElementById("container");
element.scrollTop = element.scrollHeight;
}
For some reason running this code breaks the drag & drop upload, as in the website doesn't respond to files being hovered over after that code has been executed.
Live demo (you can recreate by trying to pull and file in to the website after load, then typing "cls" or "clear" and then try to drag a file in again)
$("#container").html(""); destroys the #fileupload form (because it's a child of #container)
Related
I'm trying to make an extension that selects a shoe size, and hits the add to cart button on page load. I've done the latter, but selecting the shoe size does not work (I've tried selecting the li element). I'm assuming its more complicated than that but I havent been able to figure it out. website
Here's my code:
function addToCart() {
$( "#buyingtools-add-to-cart-button" ).click();
}
function addSize() {
if ($("select[name='skuAndSize']").length) {
$("option[name='skuId']").click()
alert($("option[name='skuId']").val())
}
}
$(document).ready(function() {
addSize();
addToCart();
// alert("HELLO")
}
);
EDIT:
function addSize() {
if ($("select[name='skuAndSize']").length) {
$('div[class*=exp-pdp-size-dropdown-container] > ul > li:nth-child(3)').mouseup();
alert($('div[class*=exp-pdp-size-dropdown-container] > ul > li').html());
}
}
$(document).ready(function() {
addSize();
// addToCart();
// alert("HELLO")
}
);
Edit: (credit to Troy Wray) because you are writing a Chrome extension, you'll need to trigger the mouseup event using vanilla JS like so:
var mouseUpEvent = document.createEvent("MouseEvents");
mouseUpEvent.initEvent("mouseup", true, true);
var el = $("li.nsg-form--drop-down--option:nth-child(4)")[0];
el.dispatchEvent(mouseUpEvent);
======================
Answer below does not apply to Chrome extension:
Fiddled around with it and it looks like the dropdown is listening to the mouseup event as opposed to click event on the li, so you'll want to do something like this:
$(selectedLi).mouseup();
For example, something like this:
$("li.nsg-form--drop-down--option:nth-child(4)").mouseup(); // selects 8.5
I have been working on a https://github.com/wekan/ fork where I try to implement additional drag and drop functionality.
Out of the box wekan already came with labels/member drag and drop where the hover overlay is done via droppable hoverClass:
const selector = $cards.find(itemsSelector);
selector.droppable({
hoverClass: 'draggable-hover-card',
accept: '.js-member,.js-label',
'drop'(evt, ui) {
evt.preventDefault();
evt.stopPropagation();
const cardId = Blaze.getData(this)._id;
const card = Cards.findOne(cardId); //get current card I am hovering
//stuff
},
});
I added attachment drag and drop functionality, which won't work exactly like above code and produces the problem that I cannot add the hoverClass cleanly.
When I implement it as shown below the logic of doing addClass is sound but I get an error:
Exception from Tracker afterFlush function:
debug.js:41 Error: Expected DOM element or View
at Object.Blaze.getData (view.js:757)
at list.js:116
at Object.Tracker._runFlush (tracker.js:511)
at onGlobalMessage (setimmediate.js:102)
My code where I want to get an overlay/hover functionality for a single card that I hover over with a file:
const cardId = Blaze.getData(this)._id;
const card = Cards.findOne(cardId); //get current card I am hovering
selector.on({'': (evt) => { //.droppable as above does not work
evt.preventDefault(); //prevent default browser behavior
evt.stopPropagation();
},
dragover(e) { // pulled out of selector.on() to add/removeClass
e.preventDefault();
e.stopPropagation();
card.addClass('is-selected'); //add overlay on hover
},
dragenter(e) {
e.preventDefault();
e.stopPropagation();
},
dragleave(e) {
e.preventDefault();
e.stopPropagation();
card.removeClass('is-selected');
},
drop(evt, ui) {
card.removeClass('is-selected');
if(!ui){ // prevent complications with other drop events
evt.preventDefault();
evt.stopImmediatePropagation(); // prevent x -times actions
evt.target.files = evt.dataTransfer.files; // working file upload
_.each(evt.dataTransfer.files, (f) => {
const file = new FS.File(f);
file.boardId = card.boardId;
file.cardId = card._id;
Attachments.insert(file);
});}
},
});
When I move
const cardId = Blaze.getData(this)._id;
const card = Cards.findOne(cardId);
back into the drop event like in the first code block and try/test e.g. selector.addClass('') instead, the overlay works, but not correctly(selector basically returns the whole card list instead of a single card).
I am a novice currently in training and I just can't understand what error I am making.
Template.currentData() instead of Blaze.getData() does not work.
When I try selector.droppable() my dropped file isn't accepted and all the other events won't fire either.
After trying different varieties I am pretty sure that Blaze.getData() is the problem here. I don't know how to replace its function though.
The problem was a syntax and logic error on my side. While I knew that this in Blaze.getData() would point to the div I wanted, this.addClass() would throw an error. So I thought I'd need the whole Blaze-Block which then lead to the problem above.
Right Syntax:
$(this).addClass('');
I'm building Yet Another Drag'n'Drop File Uploader. What I'd like to do is highlight the drop area on the page when a drag is started, so the user knows where to move the file to. The interface doesn't make it explicit straight away, which is desired in this case...
Highlighting the dropzone when the user is already over it is fine, but it's the time when the user is dragging but not yet in a droppable area that I'd like to be notified of.
I'm not able to use the dragstart event, since that fires on the HTML Element which is being dragged, and in this case, it's a file from the user's desktop or something. I also tried the following:
$(document.body).on('dragenter', changeTheCSSClass)
.on('dragleave', changeItBackAgain);
However, the enter and leave events fire for every single nested element that the cursor is over, so I get tons of events and the class switches back and forth continuously. Definitely not what I want there.
Any ideas?
As no one posted anything I am posting this, neither stable nor 100% working, but sometimes working.
changeback = 2;
changedback = true;
$(document)
.off('dragenter dragleave')
.on('dragenter', function (e) {
setTimeout(function () {
window.clearTimeout(changeback);
changeback = 0;
console.log('dragenter', e.target);
if (changedback) document.getElementById('nav-askquestion').style.color = '#bc0000';
changedback = false;
}, 10);
})
.on('dragleave', function (e) {
console.log('dragleave', e.target);
if (changeback == 0) {
changeback = window.setTimeout(function () {
console.log('changed back');
document.getElementById('nav-askquestion').style.color = '#FFFFFF';
changedback = true;
}, 15);
}
});
Applied to this page itself. Also you will need to cancel inhouse drags by setting some flag on dragstart.
the names dragenter and dragleave should be actually dragover and dragout it seems :)
How is it going at your end?
You could use angularJS:
<div align="center" class="alert alert-success ng-pristine ng-untouched ng-valid ng-empty"
ngf-select="onPrepareFile($file)" ngf-drop="onPrepareFile($file)" ng-model="vm.file"
name="inputFileStorage"
ngf-pattern="'image/*,application/pdf'"
ngf-accept="'image/*,application/pdf'"
ngf-max-size="10MB">
<a ng-show="!file"><strong>Select or Drop File Here</strong></a>
<a ng-show="file" class="ng-hide"><strong class="ng-binding"> has been Loaded</strong></a>
</div>
In the example I am limiting to a PDF with 10MB max size.
I use TS to code, sorry for the generated code, but can't find original TS...
this.onPrepareFile = function (file) {
if (file) {
var reader = new FileReader();
reader.onloadend = function () {
// yOUR FILE INFO IS IN: reader.result
};
reader.readAsDataURL(file);
}
};
I'm at a bit of a problem with jQuery and an image.
I'm trying to create a simple system where an image changes on hover (which I've successfully made work with jQuery .hover()) however I'm now trying to set it up so if the user clicks on the image, the source is permanently changed to the hover image.
The problem I'm having is when I click, the source changes but when I hover off it changes back to the "off" image! Such a simple problem but I can't find a solution.
The hover code:
$("#image").hover(function () {
$(this).attr("src", getImageSourceOn("image"));
}, function () {
$(this).attr("src", getImageSourceOff("image"));
});
The functions getImageSourceOn / Off simply return a string based on the parameter with the new source.
The onClick code:
var imageSource = $(imageID).attr("src");
var onOff = imageSource.substring((imageSource.length - 5), (imageSource.length - 4));
if (onOff == "F")
{
//alert("Off\nstrID = " + strID);
$(imageID).attr("src", getImageSourceOn(strID));
}
else
{
//alert("On");
$(imageID).attr("src", getImageSourceOff(strID));
}
This code just takes the source and looks for On / Off within the source to put the opposite as the image. I tried using .toggle() instead of this substring method but I couldn't get it to work.
Declare a global variable. Attach a function on the click event:
var clicked = false;
$("#image").click(function(){
if(!clicked)
clicked = true;
else
$(this).attr("src", getImageSourceOff("image"));
});
Then modify you hover code
$("#image").hover(function () {
$(this).attr("src", getImageSourceOn("image"));
}, function () {
if(!clicked)
$(this).attr("src", getImageSourceOff("image"));
});
I'm using YUI to add drag drop support to a div. It also responds to clicks. Unfortunately, the click behavior takes effect even after a drag drop operation. Here's a code snippet:
// Create a DOM object for the group tag.
div = document.createElement('div');
div.className = 'group';
div.onclick = function() { beginEditName(); }
container.appendChild(div);
// Enable drag/drop for the group tag.
dragdrop = new YAHOO.util.DD(div);
dragdrop.scroll = false;
dragdrop.on('dragEvent', function(ev) { onDrag(ev); });
dragdrop.on('endDragEvent', function(ev) { onEndDrag(ev); });
dragdrop.setXConstraint(0,0);
Click is supposed to edit text, while drag drop is supposed to move the tag. However, the onclick event is firing so that text editing begins after the tag is moved.
I could code around the problem, but is there a more direct YUI way of differentiating a simple click from a drag drop?
Michael,
http://ericmiraglia.com/yui/demos/ddclick.php
View the source, and let me know (ericmiraglia at yahoo dot com) if you have any further questions on this.
Modification. I will copy the code here, this way if this guy take off the code from his server people will be able to check the source.
var beingDragged = false;
var dd = new YAHOO.util.DD("drag");
dd.subscribe("mouseDownEvent", function(e){
beingDragged = false;
});
dd.subscribe("startDragEvent", function(e) {
beingDragged = true;
});
dd.subscribe("mouseUpEvent", function(e) {
if(beingDragged) {
alert("dragged")
} else {
alert("clicked");
}
})