javascript - Get GenericSync per Surface or View -

-

i want scroll list bunch of surface images. when click or touch on surface, want surface object being affected , (like change content).

the way setup below have scrollview -> container -> view -> modifier -> surface. don't know if efficient or not (maybe redundant). cannot exact object triggering event in console.log(data) of each sync object.

define(function(require, exports, module) {   var engine = require('famous/core/engine');   var surface = require('famous/core/surface');   var containersurface = require("famous/surfaces/containersurface");   var view             = require('famous/core/view');   var scrollview         = require('famous/views/scrollview');    var transform = require('famous/core/transform');   var modifier   = require("famous/core/modifier");    var genericsync = require("famous/inputs/genericsync");   var mousesync   = require("famous/inputs/mousesync");   var touchsync   = require("famous/inputs/touchsync");    var maincontext = engine.createcontext();    genericsync.register({       "mouse" : mousesync,       "touch" : touchsync   });    var scrollview = new scrollview({});    var listcontainer = [];   var questioncontainer = [];   var imgsurface = [];   var sync = [];    var imgmodifier = new modifier({origin: [0.5, 0.5]});    (var i=0; i<10; i++) {     questioncontainer[i] = new containersurface({       size: [undefined, 300],       properties:{         overflow: 'hidden'       }     });      imgsurface[i] = new surface({       content: '<img width="100%" src="http://placehold.it/400x300">'     });      sync[i] = new genericsync(         ["mouse", "touch"],         {direction : genericsync.direction_x}     );      questioncontainer[i].add(imgmodifier).add(imgsurface[i]);      questioncontainer[i].pipe(sync[i]);     questioncontainer[i].pipe(scrollview);      sync[i].on("end", function(data) {       console.log(data);     });      listcontainer.push(questioncontainer[i]);   }    scrollview.sequencefrom(listcontainer);   maincontext.add(scrollview); });

so how access triggering surface or view in case? hoping data.triggerobject.setcontent() referenced particular surface in array. well, such thing doesn't seem exist...

update 1:

the answer doesn't need follow code above. "high level" goals are:

  1. generate list of surfaces images. data array.

  2. detect click , touch event per surface , surface

basically, tried "advance" version of example https://github.com/famous/examples/blob/master/src/examples/core/view/example.js

so genericsync working aggregator of the sync classes. sync classes give useful information based on simpler events such mousedown , mousemove. means if want more information, going have make mousesync, example, give up.

if not wish write own mousesync class, take @ mousesync emits events. in event handling function, may access original event. can attach whatever wish payload emitted.. take example _handleend in mousesync.js

function _handleend(event) {     if (!this._prevcoord) return;      // added line..     this._payload.origin = event.origin;      this._eventoutput.emit('end', this._payload);     this._prevcoord = undefined;     this._prevtime = undefined; }

if feels strange editing source directly , tracking changes, may want duplicate mousesync different classname eg. mymousesync , make changes file. same logic applies touchsync.

hope helps!

edit updated question:

you can use default events available through famous surfaces. these include origin property in payload.

mousedown, mousemove mouseup, touchstart, touchmove, touchend

surface.on('touchstart',function(e){     touchedsurface = e.origin; });

in of these cases, detect touch modernizr, , apply necessary events. luck!


Comments

Post a Comment

Popular posts from this blog

c++ - OpenCV Error: Assertion failed <scn == 3 ::scn == 4> in unknown function, -

-
i read alot other solution still confused should mine... #include <opencv2/objdetect/objdetect.hpp> #include <opencv2/highgui/highgui.hpp> #include <opencv2/imgproc/imgproc.hpp> #include <iostream> #include <stdio.h> using namespace std; using namespace cv; int main(int argc, const char** argv) { //create cascade classifier object used face detection cascadeclassifier face_cascade; //use haarcascade_frontalface_alt.xml library face_cascade.load("haarcascade_frontalface_alt.xml"); //setup video capture device , link first capture device videocapture capturedevice; capturedevice.open(0); //setup image files used in capture process mat captureframe; mat grayscaleframe; //create window present results namedwindow("outputcapture", 1); //create loop capture , find faces while (true) { //capture new image frame capturedevice >> captureframe; ...
Read more

php - render data via PDO::FETCH_FUNC vs loop -

-
i've been using 2 methods render data. the first one: function name($id,$name){ return '<div id="'.$id.'">'.$name.'</div>'; } echo implode($pdo->query("select id,name user")->fetchall(pdo::fetch_func,'name')); the second one: $users = $pdo->query("select id,name user")->fetchall(pdo::fetch_obj); foreach($users $user){ echo name($user->id,$user->name); } i don't understand how pdo::fetch_func works. tried figure out. however, not well-documented. could please explain fetch mode? , also, 1 performs better? thank you. both methods wrong , have learn how use templates , how separate business logic presentation logic. $users = $pdo->query("select id,name user")->fetchall(pdo::fetch_obj); tpl::assign('users', $users); is code business logic part. then in template <?php foreach $users $row): ?> <div id="<?=$...
Read more

The canvas has been tainted by cross-origin data in chrome only -

-
uncaught securityerror: failed execute 'getimagedata' on 'canvasrenderingcontext2d': canvas has been tainted cross-origin data i getting above error in chrome. code(following) works fine in mozilla. have not corss domain issue. why above error in chrome? var wheel_canvas, wheel_context, can_w, can_h, wheel_grd; var large_radius = 160; var small_radius = 120; var wheel_canvas = document.getelementbyid('wheel_canvas'); var wheel_context = wheel_canvas.getcontext('2d'); var can_w = $(wheel_canvas).width(); var can_h = $(wheel_canvas).height(); var centerx = can_w / 2, centery = can_h / 2; var wheel_grd = null; test('#ff0000'); function test(hex) { $('#clrpicker').css({'left': 210, 'top': 210 }); inverted = hexbw(hex); $('#color_val_show').val(hex); current_color_hex_val_selected = hex; $('#color_val_show').css({'color':inverted,'background':hex}); fillgradient...
Read more