twitter flight + twitter bootstrap

[Jorge Sanchez]

Hello,

just a short question, did anybody had any sort of issues with Twitter Bootstrap. I am now using flight.js and I am not sure how does it play with Twitter Bootstrap. 

BTW: Team from Angular made a rewrite of Bootstrap to Angular directives (see below). As both flight and bootstrap are sort of inhouse from Twitter I would imagine that there could be some better integration . 

http://angular-ui.github.io/bootstrap/

Thanks,

Jorge Sanchez

[Tom Ashworth]

Hi Jorge,

I think Flight and Bootstrap should play just fine together — Flight's pretty unobtrusive and should complement Bootstrap by helping you structure your overall application. If you have any specific questions, don't hesitate to ask!

--

Tom

[Giuseppe Gurgone]

I assume that you are talking about Bootstrap's jQuery plugins (bootstrap.js):

in that case you'd have either port the plugins to flight components OR

since they Bootstrap provides custom events for most plugins' unique actions you can wrap them in flight components.

I did that once for twitter's typeahead

[Giuseppe Gurgone]

apologies for the typos, I didn't read the message before posting it :)

[Jorge Sanchez]

Bon giorno Giuseppe,

yes that's right - we are using the popover.js and related tooltip.js from Bootstrap heavily so this is the only concern. 

Can I ask you for more details about the twitter typeahead integration ? I have seen the twitter's and tweetdec implementation but I am not sure if I understand that correclty. Seems to me that they (twitter and td) are not using the typeahead.js at all and they rewrote it to flight.js completely. 

Cao,

Jorge

Dne čtvrtek, 18. prosince 2014 9:52:53 UTC-6 Giuseppe Gurgone napsal(a):

[Giuseppe Gurgone]

Buon giorno Jorge ;)

Yeah I believe that Twitter and TweetDeck have their own implementation of typeahead.

It made sense to me to write mixins that you can use to create specific typeaheads (components) like: cities typeahead, people typeahead, animals typeahead etc.

So I wrote two mixins to integrate Twitter's typeahead.js into my Flight App.

withBaseTypeahead

Base wrapper for the plugin.

• It requires typeahead.js
  
• defines the defaultAttrs (a copy of typeahead's options + few custom options)
  
• exposes a destroy method (called on before teardown using advice)
  
• binds the jQuery plugin to this.$input which is this.$node when the typeahead is not global (see the next mixin)
• listens for typeahead:autocompleted to add hidden input field(s) to your form with the selected value (optional)

withGlobalTypeahead

It depends on withBaseTypeahead and defines a mixin to create a shared typeahead across a bunch of forms on the same page.

We had a list of items (forms) where a user could add countries using an input field with typeahead,

plus the page had infinite scrolling so we really needed a shared (global) typeahead for this thing (performances + avoid rebindings).

Each form had a normal text input. Every time an input would get focus we would link the typeahead to that input.

• around initialize it creates this.$inputGlobalContainer and this.$input both jQuery elements (objects)
  
• append them to this.$node which now is the global container - usually the closest shared parent but it may as well be document.body or your page wrapper 
  
• defines an activate method that moves (using jQuery's insertAfter) the global typeahead next to the target input field and hides the text input so that you can only see the typeahead's one - a sort of replace basically
  
• listens for the focusin event on your text inputs using event delegation to invoke the activate function
  

Defining components

Each component is basically an extra layer where we set the typeahead API endpoint, customise the typeahead settings and define the hidden inputs names that we want get on typeahead:autocompleted (an array used by withBaseTypeahead)

module.exports = defineComponent(catsNamesTypeahead, withBaseTypeahead/*, withGlobalTypeahead */);

Bottom line it should be pretty straight forward to wrap Bootstrap plugins if you read its event API docs.

Unfortunately I don't have the source code for those mixins and now I work for a different company but I hope that this helps :)

Il giorno venerdì 12 dicembre 2014 07:37:55 UTC+1, Jorge Sanchez ha scritto: