I want to add an overlay to my editor that will only apply in a given range (e.g. from line 3, column 44 to line 8, column 5).
The problem is that I couldn't come up with any way to find what the current line is in my token() method, since overlays are stateless, so I can't store the current line in the state.
I pored over the extensions in multiplex.js and overlay.js, and tried to grok how nested modes work, but I could not figure out a way to use any of these tools to help me here. Keep in mind I still want this to behave like an overlay, so without disturbing the base mode.
My alternative is to scan elements for the added class and manually modify them, using element.getBoundingClientRect() and cm.coorsChar() to check their position. But this is ugly, needs manual refreshing, and causes bugs when marked elements span across my range boundaries. Any idea on how to solve this properly?
You can't bound an overlay like that. But you also don't have to manually mess with the dom. The markText method provides a more convenient way to style specific pieces of your document.
Related
A line graph is necessary for the purpose of my extension in an web game online.
I want to do something like this:
The intention is that this graph should be OUTSIDE of the DOM/browser, because if I put this inside the game document, they will know that this line has been put into the DOM with a simple call $("#rareLineGraph").length > 0 and they will detect it, and they should not know.
I tried it with frames, but are very uncomfortable (windows)
Some suggestions please ?. Thank you very much
You can in principle draw outside the browser with a separate program operated via Native Messaging, but that would be quite difficult and over-complicated. That is, however, the only approach that fully corresponds to your requirements.
As a suggestion, you can hide your graph from such a simple inspection by using a random ID, or even skipping using an ID and just keeping a reference to the created element in a variable. Also, inserting your node into random places in the document structure and using absolute positioning will obfuscate it further. It will be harder (but not impossible) to detect.
Other than that, I don't think there are many ideas that can help. Chrome renderer looks only at the DOM, and there's no API to create any kind of overlay. DOM can be hidden from the outer document with Shadow DOM techniques, but as far as I know the shadow root element will still be visible to the page.
I'm in the process of making an HTML text parser and I would like to be able to determine when a text node appears as a header (visually, not HTML headers).
One thing that can usually be said about headers are that they are emphasized - usually in one of two ways: Bold font or larger font size.
I could get both corresponding CSS values using getComputedStyle(), but I want to avoid this because the parser needs high performance (has to run smoothly on, for example, Chromebooks) and getComputedStyle() is not particularly fast when looking through hundreds or thousands of nodes.
Figuring out a font size isn't too hard - I can just select the node with range and check its client rects from range.getClientRects().I haven't figured out a smart way to check font weight though, which is why I'm here.
Can anyone think of higher-performance way of doing this than by using getComputedStyle()?
I'm aware this might not be possible - just looking to see if someone can think of an ingenious way to solve this problem.
Edit
This is for a Google Chrome extension only.
What you're aiming to do here is really messy. Since you want to determine if text is bold visually, on some devices, depending on how they render text, the whole system may just break!
A suggestion I have is to use the HTML5 Data atrributes - find out more here - and use it like so:
<div class="header" data-bold="yes">This will appear bold?</div>
Then, using JavaScript you can just go over all div elements with the data-bold attribute.
I hope this helped ;)
I'm looking at Rangy (http://code.google.com/p/rangy/) and it seems it has a bunch of DOM utilities but I don't understand them without examples. So I'm turning to SO with my ideas and hopefully you guys can show me how this can be done:
What I need to do with Rangy is use it to find the position and dimensions of the selection. I want to get the frame or Rect of the selection, whether relative to the document or parent element. Then I can position my callout accordingly.
I believe the demo that comes with Rangy already illustrates what you want. specifically http://rangy.googlecode.com/svn/trunk/demos/position.html inside showSelectionPosition function
Considering the fact that selection may be spread across multiple elements, it'd be best to use the coordinates of either startSelEl or endSelEl to anchor your callout to the beginning or end of a selection.
There is an embryonic, unreleased Rangy module I wrote for getting pixel coordinates of a selection or range. Unfortunately the difficulty of getting this working properly in all browsers and all situations has put me off completing it and I have essentially abandoned it. However, if you add a bit more detail about what you're trying to do I may be able to suggest something.
This is related to SVG, I have a large SVG object made of paths which stays static. With a press of a button, I can create another SVG object inside the larger object. The second object can be dragged with the mousedown.
PROBLEM:
Now I want to add a restriction so that the second object created cannot venture outside of the main object.
I tried using 'mouseup' for restriction but that does not work because the restriction is applied according to the cursor point on the second object, rather than the border of the second object.
Hope someone can help.
UPDATE:
#Phrogz : We have been trying to get Kevin's code to work but are struggling to get any results. We have a function attached to onmouseup to find out the intersected points of the object on the underneath path.
The function is suppose to give the results of the intersection & give an alert that the function has been exected. Its not giving anything in response, leading us to wonder whether the function is being executed at all.
Here is the main code:
var path=svgDoc.getElementById("path");
var str=intersectPathShape(path,DragTarget);
alert(str)
Phrogz, any thoughts on this?
You will need to use an intersection library like this one by Kevin Lindsey to detect when the paths overlap and prevent it. (He also provides demos of his code.)
Depending on how you implement your dragging, you may also need to check the bounding box of the two items to ensure that one is contained in the other (since dragging the child completely outside the parent would cause them not to intersect, but also not be a legal position).
The simplest code would be to store the last position of the child and return it to that position when an intersection is detected. Under fast dragging, though, this might cause the child to stop being dragged at a spot that is not actually touching. For a better user experience, you may want to try a binary search of intermediary offsets between the last known-good position and the current position to find the closest point along that path that is legal.
Kayote,
I think I answered this in another question. The short version is have a look at this github project:
https://github.com/thelonious/js-intersections
In particular, the loadShapes function in this file:
https://github.com/thelonious/js-intersections/blob/master/samples/IntersectionUtilities.js
You will need to instantiate a specific object per node type then pass those to Intersection.intersectShapes.
HTH,
Kevin
I'm prototyping a thin client UI using extjs and am looking for an effect that will simulate a form/pane flipping over to reveal another form/pane. Its for a details view for an object that has two major sets of properties.
I found a flex component that can do this, and can even simulate four different forms on the faces of a cube.
Just a sexier, more fun way of doing what you can already do with tabs.
This particular effect may not be available on a cross-browser basis quite yet. Doing perspective transforms on a given DOM element is only possible in two ways that I know of:
1) Renderer-specific extensions, like Webkit's -webkit-transform
2) Rendering the DOM element inside of a Canvas element and then doing transforms on that
The problem with #1 is that it's clearly not going to be cross-browser. The problem with #2 is that you'd more or less have to write your own complete markup renderer for canvas to really get everything in an arbitrary DOM element in there.
(OTOH, I wouldn't put it past some ambitious and clever JavaScript ninja to have attempted #2, so though I haven't seen it yet, I wouldn't be totally surprised if someone else can point towards something like it...)
I would stick with the tab solution if you want to get your project done within a reasonable time. This does not exist for ExtJS - the one in Flex does a 3D effect. The only solution close is to just have content in 4 cells of a table that slides into view (according to the direction of the arrow you used), within a DIV, and have the overflow property set to hide, so you can mask out the other cells and show one cell at a time. Then use the animation (fx) functions to slide the content in and out of view, perhaps with some arrows you hover over or click.