I have a GWT widget that I want to embed in a non-GWT application. I am using get-exporter to expose my API and I have the widget appearing in a simple HTML page (which includes my nocache.js) and drawing itself. What it does not do is respond to mouse clicks.
I attach the widget to a div like this (objects are exposed using get-exporter):
controller = new GraphController(MakeGraphConfig.makeGraphConfig());
var element = controller.getGraphPanelElement() ;
document.getElementById('graphPanelId').appendChild(element);
The element 'graph' is a simple div and a direct child of the body element.
<div width="500" height="500" id="graphPaneId" style="border-style: solid; border-width: 11px; "></div>
The widget draws and does not respond to mouse events. What am I missing here?
My solution was to pass the elementId into the controller:
Javascript:
controller = new GraphController("graphPanelId",MakeGraphConfig.makeGraphConfig());
and use :
Java:
RootPanel.get(elementId).add(graphPanel)
Related
I would like to implement elements with a draggable property. You get what you wanted in part. I have several blocks that are built from the response of a web-service.
Use ng-repeat to represent the elements on the screen:
<div class = "declareContainer" ng-repeat = "item in group">
<!-- My Draggable Boxes -->
<div id="{{$index}}" title="{{$index}}" class="col-lg-6" style=" border radius: 15px; padding: 1%; ">
</div>
The loop is controlled by "group" object, however it is obtained by AJAX:
$Http.get (path + "getgroup"). Then (function (response) {
$ Scope.group = response.data;
}, Function (error) {
});
I use the following excerpt in my controller to apply a draggable property to the elements that are in the declareContainer div:
Angular.element (document) .ready (function () {
$ (".declareContainer"). Draggable ();
});
Elements are drawn normally, but lose a draggable property.
I ran tests and noticed that when defining the group object in static or exploit code (ng-repat already gets as object of the object during the construction of the app).
I tried to initialize "group" as null for the loop not toenter code here run while a response is not, but still giving the same problem.
Does anyone know of any way to solve this problem?
I have a carousel that takes a state of {pages: [...], currentPage: 0}. If I set currentPage = 1 I want the carousel to slide left. The same thing should happen if I increase the number again, and it should slide right I decrease it.
I can't work out how this should be done with immutable data. The animation shouldn't be represented in the state object (should it?), but storing a property on the React component removes its "pure" functional nature.
What's the best way to approach this problem?
Just show me an example
This doesn't use Immutable.js, but the current property is just a number, which is immutable in JS, so in some regards it's the same idea:
http://jsbin.com/ligejacolo/edit?js,output
IMO the best option is ReactCSSTransitionGroup
+1 for the unnecessarily snarky reference to ReactCSSTransitionGroup in the comments, if you can use that.
After that, let the browser manage state via CSS transitions
I would store the pages and currentPage as props, regardless of whether the values are Immutable.js instances (props are a stateful part of your UI, just like state, don't let the name fool you!). When they're stored as props, it provides a useful API to the users of your component.
If you're using CSS transitions then at any given moment you should be able to render the markup and classes based on this information.
For example, given the (over-simplified markup):
<div class=container>
<!-- set the class to something like "inner pane2" to go to the second pane -->
<div class=inner>
<span class=pane>...</span>
<span class=pane>...</span>
<span class=pane>...</span>
</div>
</div>
And some CSS like:
.container {
position: relative;
}
.inner {
position: absolute;
left: 0;
transition: left 0.3s ease-in-out;
}
.pane {
width: 100px;
}
.inner.pane2 {
left: -100px;
}
.inner.pane3 {
left: -200px;
}
The browser takes care of mid-transition changes to the properties.
Often times you'll need to know when the animation is done, which you can accomplish with a transitionend listener and isAnimating flag (which I would store in the state, not the props). Set isAnimating when currentPage changes and clear it on transitionend.
You'll also often need to know which direction you're transitioning, which you can accomplish with a previousPage prop.
Finally, if you're just using JavaScript
Keep a reference to the current transition in the state (possibly the jQuery selection used to start the animation, if that's what you're using). When the transition is done, remove the reference. If the currentPage changes mid-transition, call .stop() on the selection (or whatever API you're using).
Can any one tell me how to place my html content on a canvas.And if we can do that, will the properties and events of those elements works or not, and also I have animations drawn on that canvas.
From this article on MDN:
You can't just draw HTML into a canvas. Instead, you need to use an
SVG image containing the content you want to render. To draw HTML
content, you'd use a element containing the HTML, then
draw that SVG image into your canvas.
It than suggest you follow these steps:
The only really tricky thing here—and that's probably an
overstatement—is creating the SVG for your image. All you need to do
is create a string containing the XML for the SVG and construct a Blob
with the following parts.
The MIME media type of the blob should be "image/svg+xml".
The element.
Inside that, the element.
The (well-formed) HTML itself, nested inside the .
By using a object URL as described above, we can inline our HTML
instead of having to load it from an external source. You can, of
course, use an external source if you prefer, as long as the origin is
the same as the originating document.
The following example is provided (you can see more information about this in this blog by Robert O'Callahan):
DEMO
const ctx = document.getElementById("canvas").getContext("2d");
const data = `
<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'>
<foreignObject width='100%' height='100%'>
<div xmlns='http://www.w3.org/1999/xhtml' style='font-size:40px'>
<em>I</em> like <span style='color:white; text-shadow:0 0 2px blue;'>CANVAS</span>
</div>
</foreignObject>
</svg>
`;
const img = new Image();
const svg = new Blob([data], {type: "image/svg+xml;charset=utf-8"});
const url = URL.createObjectURL(svg);
img.onload = function() {
ctx.drawImage(img, 0, 0);
URL.revokeObjectURL(url);
};
img.src = url;
<canvas id="canvas" style="border:2px solid black;" width="200" height="200"></canvas>
This example results in this HTML being rendered to canvas as this:
Will the properties and events of those elements works or not ?
No, everything drawn to a canvas is forgotten as passive pixels - they becomes simply an image.
You will need to provide custom logic that you provide yourselves in order to to handle any such things as clicks, objects, events etc. The logic need to define the areas, objects and anything else.
I'm currently using jQuery Waypoints to highlight nav items as you scroll through sections of the page. All of that works fine; thanks to copying the code from the demo at http://imakewebthings.github.com/jquery-waypoints/.
My demo is: http://www.pandlmedia.com/index.php/index_new
However, I also want to create a waypoint at the #footer div which would trigger an event to change the color of all of the nav links.
$('#footer').bind('waypoint.reached', function(event, direction) {
$('.nav ul a').addClass('white');
});
This doesn't work, as there's nothing telling it to change back once it exits the #footer div. I'm not very experienced in writing jQuery or using this plug-in for that matter. What do I need to add to make this work? Is the fact that there are two levels of waypoints also causing problems?
well, looking closer at the "sticky elements" demo, I was able to modify the example of the disappearing '.top' button to make this work for my own needs described above:
<script type="text/javascript">
$(document).ready(function() {
$('.container .nav ul a').addClass('black');
$.waypoints.settings.scrollThrottle = 30;
$('#footer').waypoint(function(event, direction) {
$('.container .nav ul a').toggleClass('black', direction === "up");
}, {
offset: '50%'
});
});
The key was to add the .black class below the .white class in my css so that it overrides the color parameter properly.
It looks like mouse events will add listeners to canvas elements fine, but keyboard events don't seem to be working for canvas elements.
Example:
http://jsfiddle.net/H8Ese/1/
Browsers:
Chrome 14.0
FF 5.0.1
I know I can use the document level listeners, but I'm trying to get the Canvas element first (so that your keyboard works everywhere else on the page).
Any ideas on how to get key event listening working on canvas elements?
I don't think you can add keyboard event listener directly to the canvas. If you don't want to register event handler on window level then I think you can wrap the canvas inside a div and register keyboard events on the div.
<div id="canvasWrapper" style="border:1px solid; width:600px; height:400px;">
<canvas id="canvas" width="600" height="400" >
Could not create Canvas!
</canvas>
</div>
jQuery("#canvasWrapper").keypress(function(e){
keys[e.keyCode] = true;
alert("key pressed!");
});
Another interesting way is to use tabIndex on the canvas tag and bind keypress on the canvas. I have updated the code at jsfiddle, pasting here too for future references.
<canvas id="my-canvas" tabindex="1"></canvas>
$("#my-canvas").bind({
keydown: function(e) {
var key = e.keyCode;
var elem=document.getElementById("my-canvas");
var context=elem.getContext("2d");
context.font = "bold 20px sans-serif";
context.clearRect(0,0,300,200);
context.fillText("key pressed " + key, 10,29);
},
focusin: function(e) {
$(e.currentTarget).addClass("selected");
},
focusout: function(e) {
$(e.currentTarget).removeClass("selected");
}
});
$("#my-canvas").focus();