[elm-discuss] Re: Search Selection widget

[Zeljko Nesic]

Sorry, for being unclear and imprecise. 

I have tried to implement that behavior, but it seems that there is no neat 
way to do it. I have searched elm-discuss, and even though many wanted 
feature that will enable this kind of things, it seems there is no clear 
way to do it.

I can imagine some workarounds, but I believe anything would be wonky with 
out ability to dynamically pass event options. 

Again, sorry for being miss leading :)

-- 
You received this message because you are subscribed to the Google Groups "Elm 
Discuss" group.
To unsubscribe from this group and stop receiving emails from it, send an email 
to elm-discuss+unsubscr...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[elm-discuss] Re: Search Selection widget

[Zeljko Nesic]

I today had a plan of rewriting my dropdown component from Angular to Elm, 
which was inspired by SemanticUI's one. 

Anyway, my solution was handle those keys inside the input field. 

Also, make sure, just to preventDefault, and let propagation fall through. 
== { stopPropagation = False , preventDefault = True }

hope this helps

On Monday, February 15, 2016 at 8:29:59 PM UTC+1, Bernd Meyer wrote:
>
> I'm trying to create a search selection widget like 
> http://semantic-ui.com/modules/dropdown.html#search-selection in elm. I 
> would the user to be able to browse through the options using the arrow 
> keys. In order to avoid scrolling in the browser when an arrow key is 
> pressed I'm using onWithOptions with preventDefault True. This seems to 
> work however, but the input functionality is broken since all keystrokes 
> are consumed by the key handler. Here is the relevant part of the code.
>
> handleKey: List String ->  Int -> Action
>> handleKey options code =
>>   case code of
>> 13 -> Submit (List.head options)
>> 27 -> Close
>> _  -> NoOp
>> 
>> openDropdown : Signal.Address Action -> Model -> List String -> Html
>> openDropdown address model options =
>> div [ attribute "aria-label" "Filter venue"
>> , class "ui search selection dropdown active visible"
>> , onWithOptions "keydown" evOptions keyCode (\code -> 
>> Signal.message address (handleKey options code))
>> ]
>>   [ i [ class "dropdown icon" ] []
>>   , input 
>> [ on "input" targetValue (Signal.message address << Update)
>> , placeholder model.value
>> , tabindex 0] []
>>   , div [ class "text" ] [ text model.inputValue ]
>>   , div [ class "menu transition visible", attribute "style" 
>> "display: block !important;", tabindex -1 ]
>>   (itemsView address model.value filtered)
>>   ]
>
>
>

-- 
You received this message because you are subscribed to the Google Groups "Elm 
Discuss" group.
To unsubscribe from this group and stop receiving emails from it, send an email 
to elm-discuss+unsubscr...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[elm-discuss] Incosistent Port subscription

[Zeljko Nesic]

Hi, 

I have run to weird issue regarding sending data to port. 

*Background*

I am working on Angular app, that I want piece by piece replace with Elm. 
During the transition, ports are really important, so I can communicate 
data back and fourth. 

Now I have some Angular directive [basically a component], who's controller 
after fetching some data, will send it to Elm. Code is something along the 
lines of : 

controller: function($scope, dataservice){
  // $scope.id is unique for each directive, eg. controller
  dataservice.get()
.then (sendToElm($scope.$id)); 
}

function sendToElm (id){
 (data) => elmApp.ports.foo.send([id, data]);
}


Now this works fine if I have one controller, i.e. one directive on the 
page. But problem comes when I have multiple directives, ie, this 
controller function *fires couple of times in short interval. *

*Problem*

So the problem lies in the fact that ports don't accept second *send 
*invocation 
in short burst. 

When I tried to isolate test case, everything worked fine, no matter how 
fast I feed data into Elm.

So I had go back to my Angular app and check what is wrong. 

When I added random timeout, greater that 1s things started to work fine: 

controller: function($scope, dataservice){
  // $scope.id is unique for each directive, eg. controller
  dataservice.get()
.then (sendToElm($scope.$id)); 
}

function sendToElm (id){
 (data) => {
  time = parseInt(Math.random() * 1000);
  setTimeout(() => { 
elmApp.ports.foo.send([id, data]); 
  }, time);
 }
}

But the issue seems to persist if I decrease that 1000 multiplier to 
anything less than 900. 

Now I wonder, can anybody bring any insight into why this is behaving like 
it is. 

Many thanks folks

-- 
You received this message because you are subscribed to the Google Groups "Elm 
Discuss" group.
To unsubscribe from this group and stop receiving emails from it, send an email 
to elm-discuss+unsubscr...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.