Hiding a subview


#1

Hello,

I have the following view

{View} = require 'space-pen'
LogView = require './log-view'

module.exports =
class TexliciousView extends View


  @content: ->
    @div class: 'inline-block', tabindex: -1, =>
      @div class: 'btn-group', =>
        @button outlet:'toggleButton', class:'btn', click: 'toggleLogView', =>
      @subview 'logView', new LogView()

  initialize: ->
    @toggleButton.text('Hide')

  destroy: ->
    @close()
    @remove()
    @detach()

  toggleLogView: ->
    # TODO: Set button text to 'hide' or 'show' accordingly.
    if @logView.isVisible?
      @logView.hide()
      @toggleButton.text('Show')
    else
      @logView.show()
      @toggleButton.text('Hide')
  showLogView: (texFile) ->
    @logView.updateLogView(texFile)

Which I am adding to the workspace like so:

atom.workspace.addBottomPanel
      item: @texliciousView

There is a lot floating around the internet on this type of thing. creatElement, jquery, and this space pens. First question is what is the right approach? Second if I use space pens should isVisible work on the space pen view. I am running into a problem with the above code. When I push the toggleLogView button, it indeed hides the subview but now trying to show it again I get that @logView.isVisible? is true. What is going wrong here?


#2

Is there some reason that you don’t want to just remove the panel?


#3

@leedohm Still working out the panel/view concept so I could be asking the wrong question. In the end I would like to keep the toggle button visible at all times and hide/show the logView every time it is pressed.


#4

@leedohm I am really running into all sorts of troubles. The scroll view does not ‘scroll’ as well. I have searched for good MWE but cannot find any.


#5

Searching for ScrollView here turned up this topic:

Also, if you included a mock up of what you’re trying to do, I suspect the smart people here would be able to help you out :grinning: I’ve found that Skitch is really helpful in building quick images for things (if you’re using a Mac, that is).


#6

@leedohm I have seen that and tried the suggestions but to no avail.


#7

@leedohm any idea why @logView.isVisible? returns true even after @logView.hide()?


#8

Nope, but from what I understand visibility and hiddenness are somewhat orthogonal concepts in HTML … has something to do with the display CSS attribute or something. I’m not a CSS guy™ :wink:


#9

@leedohm Ok. Thank you.


#10

In case anyone ever runs into the problem with no scrolling, the solution is to add height: 300px; to the css style of the scroll div in addition to the suggestions made in ScrollView subclass does not scroll