document.querySelector( 'video')

[JoyKrishnaMondal]

what is the "mithril" way of having a reference to a html tag.

I need it for accessing

video = document.querySelector( 'video') video.src = window.webkitURL.createObjectURL (stream)

I tried

videoElm = m ("video",{width:1920,height:1080,autoplay:" "})

but it returns only an object :(

best wishes

[kvanbere]

Hi, you need to use the 'config' function. Sorry for briefness, on phone. On 7 Oct 2014 14:18, "Joy Krishna Mondal" notifications@github.com wrote:

what is the "mithril" way of having a reference to a html tag.

I need it for accessing

video = document.querySelector( 'video') video.src = window.webkitURL.createObjectURL (stream)

I tried

videoElm = m ("video",{width:1920,height:1080,autoplay:" "})

but it returns only an object :(

best wishes

— Reply to this email directly or view it on GitHub https://github.com/lhorie/mithril.js/issues/302.

[JoyKrishnaMondal]

Yep, Thanks ! I actually figured it out due to the amazingly simple documentation. As a mathematician I really love this project !! really good work.

[JoyKrishnaMondal]

I hate to disturb you again but is there a way to acess both canvas and video element within a function call without having to do some "config" hack

Best Wishes

[kvanbere]

Yeah, try putting the config in an element that wraps both of the elements you want to access, then use its handle to find those elements in its children (or just look them up by ID, I think config functions are run from the children upwards?)

[JoyKrishnaMondal]

should i pass the "context" argument into the snapshot function ? doesn't the onclick function already have defined arguments ?

[kvanbere]

@lhorie

[JoyKrishnaMondal]

I already have two references to canvas and video at the top, I was hoping if a function/method exists that I could just call to get access to canvasElm and videoElm

[barneycarroll]

m.prop is ideal for this. You can invoke an m.prop directly in config since the first argument supplied will be the rendered DOM element. I often find myself wanting to bind multiple functions to config, so I use a helper I call multi. This example is in JS (I always get confused by CS's implicit returns), but should be easy enough to convert: http://jsbin.com/virugo/1/

BTW the Google Group might be a better place for this kind of support request / code golf: https://groups.google.com/forum/m/#!forum/mithriljs

[lhorie]

@JoyKrishnaMondal as @kvanberendonck mentioned, you can have a config on parent element and use the DOM API. Typically, the flow of data is that event handlers modify the model layer data, and then the changes cascade down to the view. You can create a config factory if you want to pass this cascaded data into the config and then you can do your reading of videos / drawing of canvas within the config function:

//in the model
var vm = {}
vm.count = 0
vm.tick = function() {
  vm.count++
}

//in the view
m("a[href='javascript']", {onclick: vm.tick})
m("div", {config: draws({count: vm.count})}, [
  m("canvas")
  m("video")
])

function draws(data) {
  return function(el, init, ctx) {
    var canvas = el.firstChild
    var video = canvas.nextSibling
    if (!init) {
      //initialize, only runs once
      ctx.canvasContext = canvas.getContext("2d")
    }
    //draw here, runs every time a redraw happens (e.g. after event handlers)
    console.log(data.count)
  }
}

[JoyKrishnaMondal]

In angularJS i remember there was "angular.element" which returns a pointer/reference to the actual DOM element. Using the DOM API function "firstChild,next sibling" would break if I move the elements around. Is there a way ( perhaps with m.props ) to return a pointer to the DOM element.

Best wishes

[barneycarroll]

@JoyKrishnaMondal why can't you use the video view's own config attribute to capture the element?

var video = m.prop();

// in the view
m( 'video', { config : video } );

video().toString(); // > [object HTMLVideoElement]

[JoyKrishnaMondal]

Yep ! I was just thinking about that !. This is way better than $compile in angular.

Thanks everyone.

[JoyKrishnaMondal]

I am not sure how github works ( pretty new to it ) Does closing it mean ppl cannot comment ?

I think I got the perfect elegant solution I was looking for so I closed the issue, obviously I want to do things the Mithril way so if someone has a more shorter solution I would really like to know it.

Thanks again.

[barneycarroll]

Github issues are best used for bug reports and feature requests, that way issues can be closed when the bug is fixed or the feature is implemented or rejected. For conversation and technical advice the Google group mailing list is more appropriate: https://groups.google.com/forum/m/#!forum/mithriljs

[JoyKrishnaMondal]

Ohh that makes much more sense ! Sorry for adding an extra unwanted issue to an already wonderful project.

Cheers

[thienha1]

Can you make scripts that set a timer to automatically pause/stop on all Youtube embed videos? Like pause a video after X seconds!!?

[orbitbot]

@thienha1 instead of the necrobump, perhaps file a new issue? Although it sounds like your issue isn't really be mithril-related at core...