I have a web page with an HTML5 canvas that is displaying a number of images. I have made it possible to drag and drop the images around the canvas by using the kineticJS library.
However, I am using a copy of the library that I have downloaded and saved locally, since there were one or two changes that I wanted to make to its functionality. (For example, before I had altered it, when a click was detected on an image on the canvas, anything that had previously been drawn to the canvas by anything other than the Kinetic library would be cleared from the canvas. I removed this call to clear(), since there were a few other things that I had drawn to the canvas which I wanted to remain there.)
Now, I want to add some functionality to my code, so that when a click is detected on one of the images that has been drawn to the canvas, a textual description of the image that has been clicked will appear on the the web page outside the canvas.
I have the following function, which I am using to detect whether a click has been detected on one of the images:
function isClickOnImage(event){
var clickX = event.clientX;
var clickY = event.clientY;
//var imageCheckIteration = 0;
while(imageCheckIteration < sources.length){
if((clickX > sources[imageCheckIteration].x && clickX < sources[imageCheckIteration].x + imageWidth) &&
(clickY > sources[imageCheckIteration].y && clickY < sources[imageCheckIteration].y + imageHeight)){
/*This is where I need to print the variable that holds the text I want to display, but I need to display its contents
outside the canvas, in the <p></p> tags below. */
console.log("Click on image detected");
document.getElementById("tipsParagraph").innerHTML = tips[imageCheckIteration];
} else {
document.getElementById("tipsParagraph").innerHTML = "";
}
}
}
The images displayed on the canvas are all stored in an array called 'sources'. So, the while loop in this section of my code should check whether the x & y coordinates of the click were in a location that has an image drawn to it, starting with the first image in the array, and going all the way through to the last.
If the loop determines that a click was in a position that has an image drawn to it, then the console should log the message "Click on image detected", and the value of my tipsParagraph variable should be updated to the value of whatever is stored in the 'tips' array, at the same position as that of the image that's been clicked on in the images array (the images array has been called 'sources'). (The text stored in each position of the 'tips' array corresponds to the image at the same position in the 'sources' array).
As I said previously, I am using a local copy of the KineticJS library, and I've edited its 'mousedown' function so that it now looks like this:
_mousedown: function(evt) {
this._setUserPosition(evt);
var obj = this.getIntersection(this.getUserPosition());
if(obj && obj.shape) {
var shape = obj.shape;
this.clickStart = true;
shape._handleEvent('mousedown', evt);
isClickOnImage(evt);
}
//init stage drag and drop
if(Kinetic.DD && this.attrs.draggable) {
this._initDrag();
}
}
i.e. I've added a call to my isClickOnImage function.
However, when I click on an image on the canvas, the text in the 'tipsParagraph' section of my page is not updated. The 'tipsParagraph' is simply the ID I've given to a <p> tag displayed below the canvas.
This is the line of code I have for the 'tipsParagraph':
<p id = "tipsParagraph">This is where the text will be displayed. <script>$('#tipsParagraph').text(tips[imageCheckIteration]);</script></p>
I assumed that the JS I've added to this line would ensure that the text displayed is the text from the tips array, at whatever position the value of the variable imageCheckIteration determines. However, for some reason, the tip being displayed on my page is always the first element from the tips array. This is the element displayed as soon as the page loads (i.e. before a click on an image), and it does not change when a click on an image is detected. So it seems to me that my isClickOnImage function is never being called by the mousedown function in the library, but rather that the value of the tipsParagraph is being set straight away when the page loads, and not being changed after that, regardless of user interaction with the page...
Can anyone point out to my why this is? What is it I'm doing wrong, and what do I need to do to get the text displayed to be the text corresponding to the image that the user clicks on?
Taking a look at
function isClickOnImage(event){
var clickX = event.clientX;
var clickY = event.clientY;
//var imageCheckIteration = 0; // <-- why is this 0 commented out?
while(imageCheckIteration < sources.length){ // <-- imageCheckIteration is never incremented, so it never increases, hence the check never occurs
if((clickX > sources[imageCheckIteration].x && clickX < sources[imageCheckIteration].x + imageWidth) &&
(clickY > sources[imageCheckIteration].y && clickY < sources[imageCheckIteration].y + imageHeight)){
/*This is where I need to print the variable that holds the text I want to display, but I need to display its contents
outside the canvas, in the <p></p> tags below. */
console.log("Click on image detected");
document.getElementById("tipsParagraph").innerHTML = tips[imageCheckIteration];
} else {
document.getElementById("tipsParagraph").innerHTML = "";
}
}
}
try something like: the for loop structure to control incrementing:
for( var i=0; i<sources.length; i++){ // this will go through all items in the sources array
if((clickX > sources[i].x ... ) //and other checks
}
Related
This happens only in Firefox.
Important: I am saving the caret's position with rangy.saveSelection():
when click the content editable div
on keyup
when adding an external html element (as a node) to the content editable div
I need the position saved constantly through multiple means to be able to insert html elements on click (I have some tags).
When I click in the contentEditable div and the div is empty (first focus, let's say), I cannot see the caret unless I start typing. If the caret is at the end, I cannot see it either.
Another weird behaviour is that I cannot use the arrows to navigate between the text in the contentEditable div.
If I remove the functions which (constantly) saves the caret's position (on input, click etc.) the caret returns to normal (the caret is visible).
The problem appears when I start saving the position of the caret. Clearly I should be doing some sort of reset or a clear.. but from what I understand, those seem counterproductive (as from my understanding they destroy the saved caret location).
The content editable div
<div class="input__boolean input__boolean--no-focus">
<div
#keydown.enter.prevent
#blur="addPlaceholder"
#keyup="saveCursorLocation($event); fixDelete(); clearHtmlElem($event);"
#input="updateBooleanInput($event); clearHtmlElem($event);"
#paste="pasted"
v-on:click="clearPlaceholder(); saveCursorLocation($event);"
class="input__boolean-content"
ref="divInput"
contenteditable="true">Cuvinte cheie, cautare booleana..</div>
</div>
My methods/functions
inputLength($event){
this.input_length = $event.target.innerText.length;
if(this.input_length == 0)
this.typed = false;
},
addPlaceholder(){
if(this.input_length == 0 && this.typed == false){
this.$refs.divInput.innerHTML = 'Cuvinte cheie, cautare booleana..'
}
},
clearPlaceholder(){
if(this.input_length == 0 && this.typed == false){
this.$refs.divInput.innerHTML = '';
}
},
updateBooleanInput($event){
this.typed = true;
this.inputLength($event);
},
saveCursorLocation($event){
if($event.which != 8){
if(this.saved_sel)
rangy.removeMarkers(this.saved_sel)
this.saved_sel = rangy.saveSelection();
}
// if(this.input_length == 0 && this.typed == false){
// var div = this.$refs.divInput;
// var sel = rangy.getSelection();
// sel.collapse(div, 0);
// }
},
insertNode: function(node){
var selection = rangy.getSelection();
var range = selection.getRangeAt(0);
range.insertNode(node);
range.setStartAfter(node);
range.setEndAfter(node);
selection.removeAllRanges();
selection.addRange(range);
},
addBooleanTag($event){
// return this.$refs.ChatInput.insertEmoji($event.img);
this.$refs.divInput.focus();
console.log(this.input_length);
if(this.typed == false & this.input_length == 0){
this.$refs.divInput.innerHTML = ''
var space = '';
this.typed = true
this.saveCursorLocation($event);
}
rangy.restoreSelection(this.saved_sel);
var node = document.createElement('img');
node.src = $event.img;
node.className = "boolean-button--img boolean-button--no-margin";
node.addEventListener('click', (event) => {
// event.currentTarget.node.setAttribute('contenteditable','false');
this.$refs.divInput.removeChild(node);
})
this.insertNode(node);
this.saveCursorLocation($event);
},
clearHtmlElem($event){
var i = 0;
var temp = $event.target.querySelectorAll("span, br");
if(temp.length > 0){
for(i = 0; i < temp.length; i++){
if(!temp[i].classList.contains('rangySelectionBoundary')){
if (temp[i].tagName == "br"){
temp[i].parentNode.removeChild(temp[i]);
} else {
temp[i].outerHTML = temp[i].innerHTML;
}
}
}
}
},
pasted($event){
$event.preventDefault();
var text = $event.clipboardData.getData('text/plain');
this.insert(document.createTextNode(text));
this.inputLength($event);
this.typed == true;
},
insert(node){
this.$refs.divInput.focus();
this.insertNode(node);
this.saveCursorLocation($event);
},
As you can see in the saveCursorLocation(), I was trying to solve the scenario in which you click in the contentEditable div and there's no caret - which is confusing for the user.
// if(this.input_length == 0 && this.typed == false){
// var div = this.$refs.divInput;
// var sel = rangy.getSelection();
// sel.collapse(div, 0);
// }
It was a dead end - most likely because of my poor understanding of Rangy and how should I use those functions.
Expected behaviour vs actual results on Firefox
When I click on the contentEditable div I expect the caret to appear (while in the background to save my position). When typing, I expect the caret to appear after the last typed character while also on keyup to save my caret's position. Also I expect to be able to navigate the text via left/right arrows and see the caret when doing so.
All of these are generated by
v-on:click="..... saveCursorLocation($event);"
and
#keyup="saveCursorLocation($event);....."
If anybody believes that it would be helpful, I can record the content editable div and its behaviour in Firefox.
EDIT: I managed to isolate the problem and reproduce it into a JSFiddle - https://jsfiddle.net/Darkkz/6Landbj5/13.
What to look for?
Open the fiddle link in Firefox, then press one of the blue buttons (SI, SAU, NU) and then look at the input, the caret is not displayed.
Click the input, the caret is not displayed
While typing in the input,the caret is not displayed. Although, if you click in a word/in between content, the caret will be displayed
Apparently rangy's Selection Save and Restore module can't be used to keep track of the current selection while the user interacts with a contenteditable, like you want.
I digged into it a bit, and the problem is that rangy inserts hidden <span>s as markers, and updates the selection to be after the marker, instead of keeping it inside the #text node the user's editing:
<div contenteditable>
#text [This is something I typed <!-- selection is moved from here -->]
<span class="rangySelectionBoundary"/>
<!-- to here -->
</div>
Firefox has trouble displaying the caret in this scenario (I haven't found a bug about this specific issue, but here's a similar one where the caret is not displayed when the selection is between two <span>s).
Commenting this code out seems to fix the issue with the disappearing caret. It's unclear to me why that code is needed -- it was added before 1.0 in a large commit with its message saying: "Fixes for save/restore problems with control ranges and multiple range selections. Added demos for save/restore and CSS class applier modules." -- so I'm not comfortable to suggest fixing this in rangy (and since it's unmaintained for a few years, I don't have much hope in getting its author's input on this).
So I tried to figure out why you needed this in the first place, to suggest other solutions not involving rangy.saveSelection (for example, rangy's Text Range module provides getSelection().saveCharacterRanges(containerNode) that works without modifying the DOM.
It appears that you have a <div contenteditable> and some "buttons" (<span>s), clicking on which would insert some HTML at the caret position. The problem you were trying to solve was that when the "buttons" were clicked, the selection moved from the contenteditable into the button, and you were unable to detect the insert position.
Instead of storing and restoring the selection, you can instead make the buttons user-select: none - this will keep the caret in the contenteditable.
To test this, I commented out all references to rangy.saveSelection and rangy.restoreSelection and changed the this.$refs.divInput.focus(); call in the "button"'s onclick handler to run only when the contenteditable wasn't already focused by wrapping it in an if (!this.$refs.divInput.contains(document.activeElement)). See how this works in this updated fiddle:
https://jsfiddle.net/fjxsgvm2/
Environment: Safari 110.0.1, OSX (MacOS) 10.12.6
I am working on an image gallery type of display. There's an element that is loaded with an image by the Javascript; I want that element to have functionality on onmouseenter and onmouseout.
It would appear that I can't add those when I'm creating the img element, because the image is not loaded, and I read (somewhere, lol, it's been a long day) that an element has to be loaded before one can attach functions to it. I did try it in the HTML; no joy.
So I have a timer going, and I am trying to attach it there, but that doesn't work either - the functions are never called.
I tried starting the timer after the page is loaded, but, that doesn't work - the over/out functions still don't fire. The timer is definitely running, that's what forces the redraw if the page scaling changes, and that works. You can see what I want to happen with the mouse over/out by clicking the checkmark below the image.
Here's the page, all the HTML and Javascript code is visible there (lower on the page.) Any insight is appreciated.
The best I've been able to do so far is to get the events to attach to a surrounding div by specifying out in the HTML, where they do pretty much the right thing as far as the div is concerned. But when the mouse is over the image, it is out of the div, so the opposite of what I want happens: the onmouseout fires and the thing I want to have happen over the image goes away.
Is there some reason I can't attach these functions during the timer? Here's the timer code:
function mousingover()
{
console.log('over');
if (dismode == 1) return;
show_image_notes('mypic');
}
function mousingaway()
{
console.log('away');
if (dismode == 0) return;
show_image('mypic');
}
function ticker()
{
// var pic = document.getElementById('mypic'); // get (eventually) ready element
// var eltype = pic.nodeName;
// console.log('eltype:',eltype);
// pic.onmouseenter = function() { mousingover(); }
// pic.onmouseout = function() { mousingaway(); }
// console.log(pic.onmouseout);
// When the display is rescaled, the width of this div changes
// This is used to re-fire the calculation of where the notes go:
var myAnchor = document.getElementById('picdiv');
var xd = myAnchor.offsetWidth;
if (working == 0 && xd != xdim)
{
working = 1;
if (dismode == 1) show_image_notes('mypic');
else show_image('mypic');
xdim = xd;
working = 0;
}
tcounter = tcounter + 1;
if (tcounter > 10 || tcounter < 0) // trying to delay so image has time to load
{
var pic = document.getElementById('mypic'); // get (eventually) ready element
pic.onmouseenter = function() { mousingover(); }
pic.onmouseout = function() { mousingaway(); }
tcounter = 0;
}
}
The console confirms that I am finding the IMG with that ID, which is correct, and also that the functions are attached. They just don't fire.
I'm actively working on this, so the code for the timer will change; the page always displays the code that's in use at the moment.
I'm trying to do this with pure Javascript.
I looked at your HTML, and you have a canvas element in there along with the img element. It looks like the canvas overlays the image, yes? If so, the canvas is going to get the mouse events, and the img won't see them.
I have a flash inside and iFrame and i want to click through iFrame but not through flash. I have seen that, we can click through iFrame via "pointer-events: none;" but it passes everything inside iframe. Now I just want to know, that can we enable or check the mouse click in flash?
I have added an sample for my question. black dots are in a flash swf file and its in iFrame. Now when I click on transparent area then it should be clicked on underneath area that is Label buttons in this case. otherwise black dots should be clicked.
I think it doesn't matter if you are in iframe in this case, if I understand correctly you want a pass-through click from Flash to the underlying HTML page, but only if the click doesn't satisfy some condition (in this case, only if it's not over the black spots).
An approach would be to do it collaboratively between the Flash part and some JavaScript part in the iframe:
Intercept the click in Flash, get coordinates and verify if it's over a black circle
If it is, handle the corresponding logic in Flash, else proceed with the following steps
Pass the coordinates to a JavaScript function already defined in the iframe through Flash's external interface
Finally in the JavaScript you can do something along the lines of How to simulate a click by using x,y coordinates in JavaScript?
To do list :
Use the CSS attribute pointer-events: none; on iframe
Create a invisible div with ID="event-eater" that covers the elements.
Add Javascript below (uses jQuery) to recognizance where click happened
It will call actionscript method ClickPosition and based on returned result do 1 of following
If black area was clicked - Do nothing, click event was created in actionscript
If background was clicked - Temporally hide current element, and recreate click in javascript
Javascript
$('#event-eater').click(function(evt) {
var posX = $(this).offset().left, posY = $(this).offset().top;
var x = Math.abs(Math.round(evt.pageX - posX));
var y = Math.abs(Math.round(evt.pageY - posY));
var result = "["+x+", "+y+"]";
if(document['flashInterface'].ClickPosition(result)=="true"){
$('#event-eater').css({display:'none'});
starter = document.elementFromPoint(evt.clientX, evt.clientY);
$(starter).click();
$('#event-eater').css({display:''});
};
});
Actionscript
package
{
import fl.events.ColorPickerEvent;
import flash.display.MovieClip;
import flash.external.ExternalInterface;
public class Main extends MovieClip {
//set this variable true if background was clicked last, false otherwise
var wasBackgroundClickedLast:Boolean = new Boolean(true)
public function Main() {
//allows JavaScript to access the ClickPosition() function.
ExternalInterface.addCallback("ClickPosition", clickPosition);
}
public function clickPosition(value:String):String{
var va= str.split(",");
simulateClick(Number(va[0]),Number(va[1]));
return wasBackgroundClicked.toString();
}
public function simulateClick(x:Number, y:Number):void
{
var objects:Array = stage.getObjectsUnderPoint(new Point(x, y));
var target:DisplayObject;
while(target = objects.pop()){if(target is InteractiveObject){ break; }}
if(target !== null)
{
var local:Point = target.globalToLocal(new Point(x, y));
var e:MouseEvent = new MouseEvent(
MouseEvent.CLICK, true, false, local.x, local.y);
target.dispatchEvent(e);
}
}
}
}
Small demo : Javascript eventeater with button array below it.
I'm writing a vb.net program to automate and manage an online game. I'm using the Awesomium webcontrols to display and manipulate the pages of the game.
There is a point where I need to grab the data that's not shown in the source until the user hovers over a certain element, how can I use javascript (Not jquery please) to hover over it programatically until the data I need becomes available and then grabbed?
I apologise if this has been asked before (Which it has but from the perspective of someone who owns the web page) but I have been searching for hours for a solution and cant find anything.
What I've tried to use but failed is:
function findBpDate(){
document.getElementById('tileDetails').children[1].children[0].children[1].children[0].fireEvent('onmouseover');
return document.getElementsByClassName('text elementText')[0].textContent;
}
This returns "undefined" when it calls back to my application, I'm certain I'm pointing to the right DOM elements though.
This is what I want the javascript to "hover" on:
<span class="a arrow disabled">Send troops</span>
Once this element has been "hovered" on, this elements text changes to the text I need to grab:
<div class="text elementText">Beginners protection until 20/07/13 07:51 am.</div>
I've shown above what the element looks like when the mouse "hovers" on the element I need it to, however this changes a lot depending on which element the user hovers over while playing the game, from what i gather it's where the source keeps the text for each tooltip in the game.
So I need a function that will hover over a certain element and then while it's hovering, grab the text from the tooltip text/"text elementText" element.
Try WebView.InjectMouseMove(x, y).
Something like
public Point GetElementPosition(dynamic element)
{
dynamic rect = element.getBoundingClientRect();
using (rect)
{
return new Point(rect.left, rect.top);
}
}
dynamic element = webView.ExecuteJavascriptWithResult("document.getElementById('id')");
Point pos = GetElementPosition(element);
webView.InjectMouseMove(pos.X, pos.Y);
this is 10x easier with js/dom. http://jsfiddle.net/pA2Vd/
Do this...assuming you can get reference to elements somehow using by Id would have been lot easier.
var elm = document.getElementsByClassName('a arrow disabled')[0];
var txt = document.getElementsByClassName('text elementText')[0];
var evt = new Event('mouseover');
elm.dispatchEvent(evt);
var status = txt.innerText;
(helpfuL stuff down) otherwise you need to capture event, detect who fired it, check if that has this class and tag name. Lot of processing.
var txt,spn,status='';
document.getElementByTagName('span').forEach(function(d){
if (d.tagName=="div" && d.className == 'text elementText'){
var txt = d;
}
}
window.onmouseover = function(e) {
var elm = e.target;
if (elm.tagName=="SPAN" && elm.className == 'a arrow disabled') {
status=txt.innerText;
}
}
I want to drag and drop images into an aloha editable field.
I am looking at the at.tapo.aloha.plugins.Image plugin which seems great.
However, i need to adapt this plugin in order to work with thumbnail. I drag the thumbnail and when I drop it into the aloha editable, the html code is modified on the fly in order to use the real image.
GENTICS.Aloha.EventRegistry.subscribe(GENTICS.Aloha, 'editableCreated', function(event, editable) {
var the_obj = editable.obj;
jQuery(editable.obj).bind('drop', function(event){
var e = event.originalEvent;
var files = e.dataTransfer.files;
var count = files.length;
if (count < 1) {
var node = e.dataTransfer.mozSourceNode;
if (node.tagName === 'IMG') {
var html = '<img ....>'; //build the real image html code
/// The current selection but I want the drop position
var range = GENTICS.Aloha.Selection.getRangeObject();
if (!jQuery.isEmptyObject(range)) {
GENTICS.Utils.Dom.insertIntoDOM(jQuery(html), range, the_obj);
}
return false;
}
return true;
}
}
It works ok when something is selected in the aloha field. I can get a range and insert the html into the DOM at the selection position.
However, I would like to get a range object that correspond to the place where my image is dropped. How to do that?
Thanks in advance for ideas.
There isn't an easy way that I know of to do this in general. You could obtain pixel coordinates for the drop point (possibly from a mousemove event) and then attempt to get a range for that point. For that task, the answer to the following question sums it up nicely:
Creating a collapsed range from a pixel position in FF/Webkit
Tim Down showed me that there is no easy way and I finally used a workaround:
GENTICS.Aloha.EventRegistry.subscribe(GENTICS.Aloha, 'editableCreated', function(event, editable) {
var the_obj = editable.obj;
jQuery(editable.obj).bind('drop', function(event){
setTimeout(function () {
//at this point the html is updated and can be postprocessed
//in order to turn thumbnails into the real image
//force the focus in order to make sure that the editable is activated
//this will cause the deactivated event to be triggered, and the content to be saved
the_obj.focus();
}, 0);
});
});