Hello,
I wonder how do I change my mouse event
because I would like to X.Caption activates only when I right-clicked on it.
thank you very much
If I'm correct ( other contributors, don't be afraid to correct me ), you might have to edit the internals of XTK for your needs. XTK has the "controls" defined in X.event.js for it's event such as HoverEvent and PanEvent which are acquired from the Google Closure Library. You can look into the Google Closure Library more as I haven't completely reviewed it, but X.caption is mostly derived from Goog.ui.Tooltip which can be used with the events from Goog.ui.Popup, Goog.ui.PopupBase, and Goog.events. You can try to include Goog.events into your Javascript and define your own click event or something related to that and look through the Google Closure Library some more.
If what I just wrote in the small paragraph above is not completely correct or anything like that, there are of course basic Javascript DOM Events for clicking. I'm not quite sure how those would work with XTK because XTK uses WebGL for rendering. You can review the basic events at http://www.w3schools.com/jsref/dom_obj_event.asp. If you find any solution for yourself, you are more than welcome to contribute it to XTK.
I think there are too ways no ? Change the xtk source code and compile your own version or something like this :
window.onload = function() {
myrenderer.config.HOVERING_ENABLED = false; // disabling show caption on mousehover
var mouse_x, mouse_y;
myrenderer.interactor.onMouseMove = function(event) {
mouse_x = event.offsetX;
mouse_y = event.offsetY;
}
myrenderer.interactor.onMouseDown = function(left,middle, right) {
if (right) {
var picked_id = myrenderer.pick(mouse_x, mouse_y);
if (picked_id==-1) throw new Error("No object");
var picked_object = myrenderer.get(picked_id);
var mycontainer = myrenderer.container;
var caption = new X.caption(mycontainer,mycontainer.offsetLeft + mouse_x + 10, mycontainer.offsetTop + mouse_y + 10,myrenderer.interactor);
caption.setHtml(picked_object.caption);
// use settimeout or something else to destroy the caption
}
}
}
The following JSFiddle shows how to do that. To actually display a tooltip etc. you can use any JS Library like jQuery UI.
http://jsfiddle.net/haehn/ZpX34/
Related
I'm using polymer 1.0.
I'm trying to open a with on a clic on an element created dynamically with template repeat.
Here is the code :
<paper-button
data-dialog="modal"
on-click="dialogClick">
Click
</paper-button>
and the script (from doc) :
dialogClick: function(e) {
var button = e.target;
while (!button.hasAttribute('data-dialog') && button !== document.body) {
button = button.parentElement;
}
if (!button.hasAttribute('data-dialog')) {
return;
}
var id = button.getAttribute('data-dialog');
var dialog = document.getElementById(id);
alert(dialog);
if (dialog) {
dialog.open();
}
}
This work only if the value of data-dialog is simple text. If I want to change it by data-dialog="{{item.dialogName}}" for instance, it doesn't work. It is not found by the while loop and exit with the if. in the source code of the page, there is no data-dialog in the paper-button.
Any idea ?
I've ran into a similar problem when using data attributes on custom elements. You might want to subscribe to this polymer issue.
As a workaround, place the data attribute in a standard element that is a parent of the button and search for that one instead.
Also, you might want to consider using var button = Polymer.dom(e).localTarget instead of directly accessing e.target, since the later will give you an element deeper in the dom tree under shady dom.
I need a select box with options and an on select / on change so i can populate a second select box.
My first instinct was to just create one using a surface with a click event and a renderController / scrollview to make my drop down appear. This works wonderfully except that if I leave and come back to the page the zindex of the scrollview breaks and it scrolls over the container size.
Its a bug I need to deal with but my other problem is that with the small Iphone screen size conventional drop downs just eat to much screen real-estate.
This stackoverflow famo.us: how to handle textbox.onchange events had some great hints on how to edit an InputSurface. I thought using that and looking at the code for a Surface I could do it but no luck.
Any Ideas on how to deal with the lack of a select surface?
You can access the value property from inside the callback function:
function SelectSurface(options) {
Surface.apply(this, arguments);
this.onchange = options.onchange;
this._superDeploy = Surface.prototype.deploy;
SelectSurface.prototype.elementType = 'select';
}
SelectSurface.prototype = Object.create(Surface.prototype);
SelectSurface.prototype.constructor = SelectSurface;
SelectSurface.prototype.deploy = function deploy(target) {
target.onchange = this.onchange;
this._superDeploy(target);
};
var regionSelector = new SelectSurface({
size:[140,40],
onchange: regionSelect(),
content: '<option disabled selected style="display:none;">REGION</option><option value="central">CENTRAL</option><option value="northern">NORTHERN</option><option value="pacific">PACIFIC</option><option value="southern">SOUTHERN</option><option value="western">WESTERN</option>',
});
var regionSelect = function(){
return function() {
alert(this.value);
}
};
The problem is very elemental.
If you go to http://flexigrid.info/ with IE9, and explore the 'example 2' section, and the columns resize over the visible place, that it will activate the horizontal scrollbar. And you hover the rows, you experience growing up the Flexigrid size. I don't experience IE7 and IE8, only IE9. This problem has by height: auto configurate. I didn't find solution yet. Please help me!
Actually, the solution that #Szenti posted will only work for 1 flexigrid on the page, if there are multiple, it will only takes the height value of the 1st bDiv it founds and apply the fix to all.
My revised version I think will apply to situations where there are many flexigrids on the page at one time.
ie9Fix: function() {
var bDivH = $(this.bDiv).height();
var bDivTH = $('table', this.bDiv).height();
if(bDivH != bDivTH && p.height=='auto') {
$(".bDiv").css({height: bDivTH + 18});
}
},
I had this same issue. Thanks #Szenti for the Answer, however, once this was in place I then had flexigrid resize issue when the results in the table where regenerated via AJAX. This occured in latest Chrome, Firefox and IE7/8.
So I added a (some would say dirty) browser sniff into the mix.
Global var:
var ie9 = false;
if ($.browser.msie && parseInt($.browser.version, 10) == 9) {
ie9 = true;
}
Then where #Szanti's method is called I just wrap it in:
if (ie9) {
this.ie9Fix();
}
Now works a treat in all browsers.
The solution:
You have to edit the flexigrid js. Append the g object with this:
ie9Fix: function() {
if($(".bDiv").height() != $(".bDiv table").height() && p.height=='auto') {
$(".bDiv").css({height: $(".bDiv table").height() + 18});
}
},
You have to call ie9Fix function in 2 places
In the g.dragEnd() function last row (this.ie9Fix();)
In the g.addRowProp() you have to write a new event:
.mouseleave(function(){
g.ie9Fix();
})
That's it!
I initially have the Google Visualization API Geomap on a world view (options['dataMode'] = 'regions') and I capture the 'regionClick' event when a country is clicked like so:
google.visualization.events.addListener(
geomap, 'regionClick', function (e) {
var rowindex = data.getFilteredRows([{column: 0, value: e['region']}]);
var location = data.getValue(rowindex[0], 3);
location.href = "?ISO=" + e['region'] + "&Location=" + location;
});
I then draw the map zoomed into the country in markers mode (options['dataMode'] = 'markers'). However, I can't seem to capture any events when the markers themselves are clicked.
The documentation ( http://code.google.com/apis/visualization/documentation/gallery/geomap.html#Events ) only refers to 'select' and 'regionClick' events neither of which are fired in this case. (Tested using Chrome 9, and IE 8.)
Has anybody had any success in doing this?
Many thanks.
According to http://groups.google.com/group/google-visualization-api/browse_thread/thread/2bcb89a1eb3c647d it's not currently supported.
I have it working on IE 8 and Chrome. First off, note the warning in the documentation if you are running this locally as file://
If that's not the case, make sure your google.visualization.GeoMap variable (the first argument to addListener) is indeed named geomap . If it is, add an alert() as the first line of code in the event handler and see if that fires. Lastly, note that unless the variable data is global, it will be out of scope if you try to access it from the event handler as you are doing.
When you insert a flash object into the CKeditor the editor window will show this symbol:
I was wondering. Is it possible to do something similar when users inserts this tag into the editor (using regex {formbuilder=(\d+)}/ ):
{formbuilder=2}
If so, could someone please explain how to? :)
UPDATE:
I've been looking at the PageBreak plugin to try and understand what the hell is going on. The big difference between this plugin and mine is the way the HTML is inserted into the editor.
CKEDITOR.plugins.add('formbuilder',
{
init: function(editor)
{
var pluginName = 'formbuilder';
var windowObjectReference = null;
editor.ui.addButton('Formbuilder',
{
label : editor.lang.common.form,
command: pluginName,
icon: 'http://' + top.location.host + '/publish/ckeditor/images/formbuilder.png',
click: function (editor)
{
if (windowObjectReference == null || windowObjectReference.closed){
var siteid = $('#siteid').val();
windowObjectReference = window.open('/publish/formbuilder/index.php?siteid='+siteid,'Formbuilder','scrollbars=0,width=974,height=650');
} else {
windowObjectReference.focus();
}
}
});
}
});
As you can see, my plugin opens a new window and the tag is inserted with:
function InsertForm(form_id)
{
// Get the editor instance that we want to interact with.
var oEditor = CKEDITOR.instances.page_content;
// Check the active editing mode.
if ( oEditor.mode == 'wysiwyg' )
{
// Insert the desired HTML.
oEditor.insertHtml( '{formbuilder='+form_id+'}' );
}
else
alert( 'You must be on WYSIWYG mode!' );
}
The PageBreak plugin does everything when you click on the toolbar icon. This makes it possible to make the fakeImage inside the plugin file. For me on ther other hand, I don't see how this is possible :\
I'm looking to solve a similar issue, except that all my stuff looks like XML. So like, <cms:include page="whatever" />. In your case, you would be able to copy the placeholder plugin and change the placeholder regex to match your tags. In my case, looks like I'll be modifying the iframe plugin or something, and hopefully figuring out how to add each of my tags as self-closing...