Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

How do you update the style of an existing element? #433

Open
mrfigg opened this issue Jun 29, 2023 · 0 comments
Open

How do you update the style of an existing element? #433

mrfigg opened this issue Jun 29, 2023 · 0 comments

Comments

@mrfigg
Copy link

mrfigg commented Jun 29, 2023

I'd like to update the style of an existing element after it has been created. I tried the following code but it does not work. (Relevant bit is at the bottom.) I can't seem to find a setStyle or updateStyle function anywhere. Am I missing something, or should I make this issue a feature request?

const blessed = require('blessed')
const screen = blessed.screen({
  smartCSR: true,
  fullUnicode: true,
})

const table = blessed.listtable({
  top: 0,
  left: 'center',
  width: '100%',
  height: '50%',
  align: 'left',
  tags: true,
  keys: true,
  border: 'line',
  scrollbar: {
    ch: ' ',
    track: {
      bg: 'blue',
    },
    style: {
      inverse: true,
    },
  },
  style: {
    // This example is trying to toggle the cell style on focus/blur
    cell: {
      selected: {
        bg: 'blue',
      },
    },
    focus: {
      border: {
        fg: 'blue',
      },
    },
  },
  data: [
    ['Column A', 'Column B'],
    ['1-A', '1-B'],
    ['2-A', '2-B'],
    ['3-A', '3-B'],
    ['4-A', '4-B'],
    ['5-A', '5-B'],
    ['6-A', '6-B'],
    ['7-A', '7-B'],
    ['8-A', '8-B'],
    ['9-A', '9-B'],
  ],
})
screen.append(table)

const logger = blessed.log({
  bottom: 0,
  left: 'center',
  width: '100%',
  height: '50%',
  tags: true,
  keys: true,
  scrollback: 100,
  scrollbar: {
    ch: ' ',
    track: {
      bg: 'blue',
    },
    style: {
      inverse: true,
    },
  },
  border: 'line',
  style: {
    focus: {
      border: {
        fg: 'blue',
      },
    },
  },
})
screen.append(logger)

screen.render()

screen.key(['C-c'], () => {
  screen.destroy()

  return process.exit(0)
})

screen.key(['\u001b[Z', '[Z', '\t', 'tab'], () => {
  if (screen.focused === table) {
    logger.focus()
    screen.render()
  } else if (screen.focused === logger) {
    table.focus()
    logger.setScrollPerc(100)
    screen.render()
  }
})

table.on('focus', () => {
  // Trying to set selected cell style
  // DOES NOT WORK
  table.style.cell = {
    selected: {
      bg: 'blue',
    },
  }
  screen.render()

  logger.log(
    'selected cell bg should be set to blue, press {green-fg}TAB{/} to toggle focused element'
  )
})
table.on('blur', () => {
  // Trying to unset selected cell style
  // DOES NOT WORK
  delete table.style.cell
  screen.render()

  logger.log(
    'selected cell bg should be unset, press {green-fg}TAB{/} to toggle focused element'
  )
})

table.focus()
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant