Atom | touchbar-utility | configuration.js | html | php | wordpress | acf | bootstrap

configuration.js

const { dispatchAction } = require('./dispatchAction');

exports.configuration = [{
  type: 'button',
  label: '#',
  insertString: '#',
  backgroundColor: '#803FF6'
}, {
  type: 'button',
  label: '#FFF',
  insertString: '#FFFFFF',
  backgroundColor: '#FFFFFF'
}, {
  type: 'popover',
  pathOfIcon: '/Users/username/Dropbox/atom/icons/[email protected]',
  items: [{
      type: 'button',
      label: '<p>',
      insertString: '<p></p>',
      backgroundColor: '#E2F0BC'
  }, {
      type: 'button',
      label: '<img>',
      insertString: '<img src="images/" class="classes" alt="alt">',
      backgroundColor: '#93D7A7'
  }, {
      type: 'button',
      label: '<a>',
      insertString: '<a class="class" href="#" title="title">link</a>',
      backgroundColor: '#00B1AA'
  }, {
      type: 'button',
      label: '<ul>',
      insertString: '<ul>\n'+
      '\xa0\xa0'+'<li>list item</li>\n'+
      '</ul>',
      backgroundColor: '#4A7C84'
  }, {
      type: 'button',
      label: '<h3>',
      insertString: '<h3>Heading three</h3>',
      backgroundColor: '#5D5151'
  }, {
      type: 'button',
      label: '<h4>',
      insertString: '<h4>Heading four</h4>',
      backgroundColor: '#5D5151'
  }, {
      type: 'button',
      label: '<h5>',
      insertString: '<h5>Heading five</h5>',
      backgroundColor: '#5D5151'
  }, {
      type: 'button',
      label: '<h6>',
      insertString: '<h6>Heading six</h6>',
      backgroundColor: '#5D5151'
  }]
}, {
  type: 'popover',
  pathOfIcon: '/Users/username/Dropbox/atom/icons/[email protected]',
  items: [{
      type: 'label',
      label: 'Bootstrap'
  }, {
      type: 'button',
      label: 'container',
      insertString: '<div class="container-fluid">\n'+
      '</div>',
      backgroundColor: '#492A69'
  }, {
      type: 'button',
      label: 'grid',
      insertString: '<div class="container">\n'+
      '\xa0\xa0'+'<div class="row">\n'+
      '\xa0\xa0\xa0\xa0'+'<div class="col-md"></div>\n'+
      '\xa0\xa0'+'</div>\n'+
      '</div>',
      backgroundColor: '#7D58A8'
  }, {
      type: 'button',
      label: 'card',
      insertString: '<div class="card">\n'+
      '\xa0\xa0'+'<img class="card-img-top" src="/images/image.svg" alt="Card image cap">\n'+
      '\xa0\xa0'+'<div class="card-body">\n'+
      '\xa0\xa0\xa0\xa0'+'<h3 class="card-title">Card title</h3>\n'+
      '\xa0\xa0\xa0\xa0'+'<p class="card-text">Card content.</p>\n'+
      '\xa0\xa0\xa0\xa0'+'<a href="#" class="btn btn-primary">Go somewhere</a>\n'+
      '\xa0\xa0'+'</div>\n'+
      '</div>',
      backgroundColor: '#82C7A7'
  }, {
      type: 'button',
      label: 'button',
      insertString: '<a class="btn btn-primary" href="#" role="button">Link</a>',
      backgroundColor: '#FCE1AE'
  }, {
      type: 'button',
      label: 'nav',
      insertString: '<ul class="nav">\n'+
      '\xa0\xa0'+'<li class="nav-item"><a class="nav-link active" href="#">Active</a></li>\n'+
      '\xa0\xa0'+'<li class="nav-item"><a class="nav-link" href="#">Link</a></li>\n'+
      '\xa0\xa0'+'<li class="nav-item"><a class="nav-link disabled" href="#">Disabled</a></li>\n'+
      '</ul>',
      backgroundColor: '#FF8353'
  }]
}, {
  type: 'popover',
  pathOfIcon: '/Users/username/Dropbox/atom/icons/[email protected]',
  items: [{
      type: 'label',
      label: 'php'
  }, {
      type: 'button',
      label: '<?php ?>',
      insertString: '<?php ?>',
      backgroundColor: '#34D5EA'
  }, {
      type: 'button',
      label: 'echo',
      insertString: '<?php echo $var; ?>',
      backgroundColor: '#99DDDC'
  }, {
      type: 'button',
      label: 'if',
      insertString: '<?php if ( $var ) { ?>\n'+
      '<?php } ?>',
      backgroundColor: '#DFE5C9'
  }, {
      type: 'button',
      label: 'if else',
      insertString: '<?php if ( $var ) { ?>\n'+
      '\xa0\xa0\xa0\xa0'+'<?php } else { ?>\n'+
      '<?php } ?>',
      backgroundColor: '#FF8000'
  }, {
      type: 'button',
      label: 'ternary',
      insertString: '<?php echo ( $var ? $var : \'no var so this\'); ?>',
      backgroundColor: '#FF5D00'
  }]
}, {
  type: 'popover',
  pathOfIcon: '/Users/username/Dropbox/atom/icons/[email protected]',
  items: [{
      type: 'label',
      label: 'WordPress'
  }, {
      type: 'button',
      label: 'is_front_page',
      insertString: '<?php if ( is_front_page() ) { ?>\n'+
      '<?php } ?>',
      backgroundColor: '#00669c'
  }, {
      type: 'button',
      label: 'get_posts',
      insertString: '<?php\n'+
      '$args = array(\n'+
      '\xa0\xa0\xa0\xa0'+'\'posts_per_page\' => 5,\n'+
      '\xa0\xa0\xa0\xa0'+'\'orderby\' => \'date\',\n'+
      '\xa0\xa0\xa0\xa0'+'\'order\' => \'ASC\',\n'+
      '\xa0\xa0\xa0\xa0'+'\'post_type\' => \'post\'\n'+
      ');\n'+
      '$posts_array = get_posts( $args );\n'+
      'if ( $posts_array ) { ?>\n'+
      '\xa0\xa0\xa0\xa0'+'<ul>\n'+
      '\xa0\xa0\xa0\xa0'+'<?php foreach ( $posts_array as $post ) : setup_postdata( $post ); ?>\n'+
      '\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0'+'<li><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></li>\n'+
      '\xa0\xa0\xa0\xa0'+'<?php endforeach;\n'+
      '\xa0\xa0\xa0\xa0'+'wp_reset_postdata(); ?>\n'+
      '\xa0\xa0\xa0\xa0'+'</ul>\n'+
      '<?php } ?>',
      backgroundColor: '#0073aa'
  }, {
      type: 'button',
      label: 'get_the_title',
      insertString: '<?php $page_title = get_the_title(); ?>',
      backgroundColor: '#2580b9'
  }, {
      type: 'button',
      label: 'get_post_type',
      insertString: '<?php\n'+
      'if ( get_post_type() == \'post-type\' ) { ?>\n'+
      '<?php } ?>',
      backgroundColor: '#C7E8CA'
  }, {
      type: 'button',
      label: 'include',
      insertString: '<?php include get_template_directory() . \'/includes/include.php\'; ?>',
      backgroundColor: '#d54e21'
  }]
}, {
  type: 'popover',
  pathOfIcon: '/Users/username/Dropbox/atom/icons/[email protected]',
  items: [{
      type: 'label',
      label: 'ACF'
  }, {
      type: 'button',
      label: 'field',
      insertString: '<?php $variable = get_field(\'field_name\'); ?>',
      backgroundColor: '#00dab4'
  }, {
      type: 'button',
      label: 'image',
      insertString: '<?php\n'+
      '$image = get_field(\'image\');\n'+
      'if( !empty($image) ):\n'+
      '\xa0\xa0\xa0\xa0'+'$thumbnail = $image[\'sizes\'][\'thumbnail\'];\n'+
      '\xa0\xa0\xa0\xa0'+'?>\n'+
      '\xa0\xa0\xa0\xa0'+'<img src="<?php echo $thumbnail; ?>" alt="alt" />\n'+
      '<?php endif; ?>',
      backgroundColor: '#2ea2d4'
  }, {
      type: 'button',
      label: 'repeater',
      insertString: '<?php if( have_rows(\'repeater_field_name\') ): ?>\n'+
      '\xa0\xa0\xa0\xa0'+'<ul>\n'+
      '\xa0\xa0\xa0\xa0'+'<?php while( have_rows(\'repeater_field_name\') ): the_row(); ?>\n'+
      '\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0'+'<?php $description = get_sub_field(\'description\'); ?>\n'+
      '\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0'+'<li><?php echo $description; ?></li>\n'+
      '\xa0\xa0\xa0\xa0'+'<?php endwhile; ?>\n'+
      '\xa0\xa0\xa0\xa0'+'</ul>\n'+
      '<?php endif; ?>',
      backgroundColor: '#4d5cf1'
  }, {
      type: 'button',
      label: 'option',
      insertString: '<?php $variable = get_field(\'field_name\', \'option\'); ?>',
      backgroundColor: '#ba36ff'
  }, {
      type: 'button',
      label: 'select',
      insertString: '<?php\n'+
      '$field = get_field_object(\'color\');\n'+
      '$value = $field[\'value\'];\n'+
      '$label = $field[\'choices\'][ $value ];\n'+
      '?>\n'+
      '<span class="color-<?php echo $value; ?>"><?php echo $label; ?></span>',
      backgroundColor: '#f370e5'
  }]
}]

Atom touchbar

Using inakineitor's wonderful touchbar-utility you can create your own touchbar buttons.

This is my own configuration file, which is probably useful to any front end developers.