atom-message-panel index.coffee

index.coffee

{View, $} = require 'atom'

module.exports = class MessagePaneView extends View

    @content:(params) =>
        @div class: 'am-panel tool-panel panel-bottom', =>
            @div class: 'panel-heading', params.title, =>
                @div click: 'detach', class: 'close', 'X'
            @div outlet:'body', style:'max-height:170px;overflow-y:scroll;',class: 'panel-body padded'

    attach: ->
        atom.workspaceView.prependToBottom @

    detach: ->
        @.remove()

    clear: ->
        @body.empty()

    appendHeader:(text, className) ->
        @body.append $('<h1>', {
            class: className
            text: text
            class: classNamecss:
                cursor: 'pointer'
        })

    appendMessage:(message, className) ->
        @body.append $('<div>', {
            class: 'block ' + className
            text: message
        })

    appendLineMessage:(line, character, message, preview, className) ->
        goToLine = () ->
            atom.workspace.getActiveEditor().cursors[0].setBufferPosition [line - 1, character - 1]

        preview = preview
            .replace(/&/g, '&amp;')
            .replace(/</g, '&lt;')
            .replace(/>/g, '&gt;')

        @body.append [
            $('<div>', {
                class: 'text-subtle inline-block'
                text: 'at line ' + line + ', character ' + character
                click: goToLine
                css:
                    cursor: 'pointer'
            }),
            $('<div>', {
                class: 'inline-block ' + className
                text: message
            }),
            $('<pre>', {
                text: preview
                click: goToLine
                css:
                    cursor: 'pointer'
            })
        ]

The language you choose to write it in isn't a huge deal. Although Coffeescript has the benefit of being Atom's defacto language and has some very helpful features that make cool things like inheritance really easy. (Also I think that the Coffeescript is compiled when you install so speed shouldn't matter).

I do think it's important to write this package using the Spacepen framework (which can still be done in vanilla javascript if you wish), simply because it's already the standard framework for creating DOM elements in Atom, and because it makes extending/customizing Views really easy. Currently, nearly every single DOM element in Atom is created using Spacepen, and I'm sure that's true of most user-created packages too.

If you want widespread adoption, and the ability to allow users to make their own modifications and help contribute it's probably a good idea to stick to the framework we've already been given, instead of doing your own thing.

I see what you are saying but jQuery is a default in Atom and spacepen is compiled to jQuery.

from atom/space-pen "SpacePen is a powerful but minimalistic client-side view framework for CoffeeScript. It combines the "view" and "controller" into a single jQuery object"

I can see some of the write easy things and maybe you are right on the adoption part as well.

I will have this in mind and maybe rewrite to cofeescipt/space-pen some day. but for now I will focus on features.

If you what you are more then welcome to keep rewriting it (at the moment you are also using jQuery) and then make a PR then you are p to date with the original

What do you think of that? I will ofcouse give you credit for the rewriting :D

this is a big dicuss in the forums as well http://discuss.atom.io/t/why-coffeescript/131/6 some are for coffee others are for javsvript:

"Agreed. Collaboration in core would see much higher adoption if in plain JavaScript."

"However, according to the below quote, it might lead to less contributions:"

when all this is said, I have learn that I need to look into coffee script... it will come :)

It would be much more extendable if you could just append subviews into the content area. Then anyone could just define a view for whatever type of messages they wanted to display, and then still use the message-panel to display them in.

I will try and whip up an example.

Okay, I've created what I think is a very nice example of what I meant (and added the 0.3.0 functionality of collapsing the message-pane).
You can see my gist at https://gist.github.com/fangel/9553390.

Basically it allows you to write

{MessagePaneView, PlainMessageView, LineMessageView} = require 'atom-message-pane'
messages = new MessagePaneView()
messages.attach()

messages.add(new PlainMessageView('a message'))
messages.add(new LineMessageView(1, 2, 'a line message', 'with a preview'))

Which I think shows how easily extendable it is. Just pass it another View and give it to the add method, and then you have your own type of messages displayed.