Give modal keyboard input and define a custom template for the view


#1

So i finally created a topic to ask it. I couldn’t find anywhere a clear guide on how to do this. I’m trying to make a modal usign the space-pen-views methods to make a fuzzy-finder instance so i can have some user interaction.
I don’t have much experience with atom package development nor coffeescript, so pardon me if I’m doing something absurdly wrong here.

Please, I need guidance, because I’m totally lost. hahaha

This is my main file

AtomGenericNameView = require './atom-genericname-view'
{CompositeDisposable} = require 'atom'

AtomGenericName =
    atomGenericNameView: null
    modalPanel: null
    subscriptions: null

    activate: (state) ->
        @atomGenericNameView = new AtomGenericNameView(state.atomGenericNameViewState)
        @modalPanel = atom.workspace.addModalPanel(item: @atomGenericNameView, visible: false)

        @subscriptions = new CompositeDisposable

        @subscriptions.add atom.commands.add 'atom-workspace', 'atom-genericname:search': => @search()

    deactivate: ->
        @modalPanel.destroy()
        @subscriptions.dispose()
        @atomGenericNameView.destroy()

    serialize: ->
        atomGenericNameViewState: @AtomGenericNameView.serialize()

    search: ->
        console.log 'entered search'

        if @modalPanel.isVisible()
            @modalPanel.hide()
        else
            @modalPanel.show()

module.exports = AtomGenericName

and this is atom-genericname-view file. Also, I would like to know if is there any way I could define a custom preset template for the modal to load upon initialization.

spacePenViews = require 'atom-space-pen-views'
{SelectListView, TextEditorView, $} = spacePenViews

class AtomGenericNameView extends SelectListView
    initialize: ->
        super
        @addClass('overlay from-top')
        @ipt = this[0].childNodes[0];
        @ipt.addEventListener('focus', ((e) ->
            console.log 'focus event works here'
        ).bind(this))
        @setItems(['Hello', 'World'])
        # although, everytime the modal appears, the itens won't show up.
        # I even tried to use the populateList method, but nothing
        @panel ?= atom.workspace.addModalPanel(item: this)
        @panel.show()
        @focusFilterEditor()
        # i thought this would trigger focus on the input element

    viewForItem: (item) ->
        "<li>#{item}</li>"

    getEmptyMessage: ->
        'Sorry, nothing were found matching your criteria. :('

    confirmed: (item) ->
        console.log("#{item} was selected")

    cancelled: ->
        console.log("This view was cancelled")
        @panel.hide()
        # the modal won't close

module.exports = AtomGenericNameView

#2

Looks reasonable to me. Did you base it from one of the many packages that offer something similar like the encoding-selector package?