Dialogs should be templatized

[njx]

Currently, each different type of dialog we create has a separate chunk of HTML in the main index.html file. We should collapse these into a single chunk that is used by a flexible dialog function that allows the user to specify button labels, etc. We could also use a templating framework to help with this, although it's probably not a requirement.

[njx]

See TODO in brackets.showModalDialog().

[njx]

QRB reviewing. Marking code cleanup--we should at least factor things so we don't have a bunch of different divs with almost the exact same structure in the HTML.

[idflood]

I wanted to give this issue a shot but first I would like to know if what I'm thinking sounds right.

First the showModalDialog needs to be changed so that it accept an additional argument. This argument could be a simple object defining the buttons like {dontsave: "Close (Don't Save)", cancel: "Keep Changes in Editor"}.

Since brackets already use require.js we then can use the text plugin to load additional *.html files just like javascript dependencies : http://requirejs.org/docs/api.html#text

The next step would be to use an existing templating engine like underscore (http://underscorejs.org/#template) or http://handlebarsjs.com/ or any existing library.

What do you think?

[njx]

That sounds right. I think we don't need to go as far as using a real templating library for now--we can just have a single basic dialog structure with defined IDs, and then stuff content into those IDs manually. We could worry about true templating later.

@gruehle -- what do you think about using the RequireJS text plugin to start breaking up our HTML file into separate fragments? Any reasons not to go that route?

Thanks for looking into this!

[gruehle]

Using the RequireJS text plugin sounds like a good approach. With this plugin, the templates can be authored in separate files, but concatenated together (optionally with JavaScript files) for optimization.

[redmunds]

@njx I just ran across the TODO comment in the code for this one. This can be closed, right?

[njx]

No, we haven't actually templatized our dialogs yet--they're still all separate <div>s in main-view.html. (They are using Mustache to fill in the localized strings for the buttons, but the actual dialogs themselves are not templates.) The idea of this bug was to make it so that we could have a single chunk of HTML for all (or most) dialogs, and make it configurable from JS.

[TomMalbran]

Another issue that was fixed by #3086 :)

[njx]

Yay! Closing.