Skip to content

Instantly share code, notes, and snippets.

@nickclaw
Last active August 29, 2015 13:57
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save nickclaw/9538654 to your computer and use it in GitHub Desktop.
Save nickclaw/9538654 to your computer and use it in GitHub Desktop.
atom-message-panel 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'
})
]
@tcarlsen
Copy link

no need to fill the atom forum with our little talk, so lets take it here.

for sort, way is it better in coffeescript ??? it needs to be compiled first, you should mean that it will make the load time longer? or am I totally wrong here?

Im not against coffeescript but personally I don't like reading it. But I guess thats an habituation :)

I like the var panel = new MessageView({title: 'title'})but other then that, I really don't see the benefit ?

@nickclaw
Copy link
Author

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.

@tcarlsen
Copy link

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

@tcarlsen
Copy link

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

@fangel
Copy link

fangel commented Mar 14, 2014

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.

@fangel
Copy link

fangel commented Mar 14, 2014

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment