In famous-angular, is there access to scrollview.sync.on(event)? - famo.us

Right now I have a scrollview with fa-pipe-from from the surfaces in it and that works fine, and I've tried a few ways to listen in on the events from the scrollview.
One way was to add a fa-pipe-to to the scrollview
<fa-scroll-view fa-pipe-from="resultsViewHandler" fa-pipe-to="scrollViewHandler">
pointing to event handler
$scope.scrollViewHandler = new EventHandler();
but no events are coming from this handler
$scope.scrollViewHandler.on("start",function( e ){
console.log( e );
}); // is never called
I've seen in another stackoverflow - link - question which suggested a solution that didn't work:
$famous.find('fa-scroll-view')[0].renderNode.sync.on('start', function(event) {
console.log('start');
});
Any suggestions on how to achieve this?
EDIT: Apparently fa-pipe-to is working as expected, but the scrollview isn't emitting all events. The events that do work are: onEdge, offEdge, settle, pageChange and you can use them by piping the scrollview to an empty event handler like described above and listening to these events on it. The events that don't work are: start, update, end, resize and unfortunately are the ones I need the most.

Hey I answered that question in the link
I gave my scrollview an ID
<fa-scroll-view id="footer-scrollview" fa-pipe-from="footerScrollHandler"></fa-scroll-view>
And was able to listen to the events like so:
var scrollView = $famous.find('#footer-scrollview')[0].renderNode,
scrollViewHandler = scrollView.sync
;
scrollViewHandler.on('start', function(event) {
console.log('start');
});
'update' and 'end' events worked too. I also used a 2nd scrollview somewhere else in the app (w/ a different ID) and using the same strategy and it worked fine

Related

data-dialog created dynamically

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.

Famo.us how to create a Select Surface or something equivalent

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);
}
};

Observe rendering events

Are there events that I can observe, similar to ember-data's events around data loading such as isLoaded/isUpdating, for while view/templates are being rendered?
I have a list of ~1000 elements going into a list, and it takes quite some time to even render (the topic of a whole other question). I'd like to show some indication to the user that rendering work is being done.
There are events at a more microcosmic level such as: http://emberjs.com/api/classes/Ember.View.html#event_willClearRender. I'm curious to know if there are events for when any rendering is being performed.
Ember.Instrumentation provides a general purpose way to instrument code and conveniently, by default, Ember emits instrumentation events anytime something is rendered.
Ember.subscribe is used to setup a listener for before and after-- the events are namespaced with periods so subscribing to "render" will get you all render instrumentation calls, which by default is like "render.boundHandlebars", "render.metamorph", "render.view" ...
Here's a little function to help you get started.. you can paste this into the console and click around your app to check it out (or if you want to see all the rendering from the start paste it somewhere in your code so its loaded after ember but before your app).
If no event is passed to beginInstrumentation it'll default to render ...
beginInstrumentation = function(eventName) {
var styles;
if (eventName == null) {
eventName = "render";
}
styles = {
"render.render.metamorph": "color: #a47701;",
"render.render.boundHandlebars": "color: #0f51fe;",
"render.view": "color: #37be02;"
};
Ember.subscribe(eventName, {
before: function(name, ts, payload) {
console.group(name);
return ts;
},
after: function(name, ts, payload, b_ts) {
var elapsed, style;
style = styles[name] || "";
elapsed = (ts - b_ts).toFixed(4);
console.log("%c" + payload.object + ": " + elapsed + "ms", style);
return console.groupEnd();
}
});
};
beginInstrumentation();
Heres the output in chrome when I paste it into the TodoMVC app and click the all/completed/active filters (should work in firefox/firebug as well)

How change the event in [XTK]

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/

Google Visualization API Geomap: How to handle marker click events?

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.