Atom Snippets

# Your snippets
#
# Atom snippets allow you to enter a simple prefix in the editor and hit tab to
# expand the prefix into a larger code block with templated values.
#
# You can create a new snippet in this file by typing "snip" and then hitting
# tab.
#
# An example CoffeeScript snippet to expand log to console.log:
#
# '.source.coffee':
#   'Console log':
#     'prefix': 'log'
#     'body': 'console.log $1'
#
# Each scope (e.g. '.source.coffee' above) can only be declared once.
#
# This file uses CoffeeScript Object Notation (CSON).
# If you are unfamiliar with CSON, you can read more about it in the
# Atom Flight Manual:
# http://flight-manual.atom.io/using-atom/sections/basic-customization/#_cson




'.source.js':
  'Fetch JSON':
    'prefix': 'fetchjson'
    'body': """
      fetch(${1:URL}).then((response) => {
        let contentType = response.headers.get("content-type");
        if(contentType && contentType.includes("application/json")) {
          return response.json();
        }
        throw new TypeError("Not JSON");
      }).then(function(json) {
        ${2:console.log(json)\;}
      })
      .catch((err) => {
        console.log('There has been a problem with Fetch: ' + err.message);
      });
    """

  'Fetch Headers':
    'prefix': 'fetchhead'
    'body': """
      const fetchUrl = ${1:URL};
      let headers = new Headers();
      let init = { method: 'GET',
                   headers: headers,
                   mode: 'cors',
                   cache: 'default',
                   credentials: 'same-origin'/'omit'/'include' };

      let req = new Request(fetchUrl, init);

      //fetch(req).then...
    """




'.source.less':

  'Media Query':
    'prefix': 'mq'
    'body': """
      @media
      ${1:@viewport-tiny\, }
      ${2:@viewport-narrow\, }
      ${3:@viewport-medium\, }
      ${4:@viewport-wide }{
        $5
      }
    """

  'Media Query All':
    'prefix': 'mqa'
    'body': """
      @media
      @viewport-tiny {
        $1
      }
      @viewport-narrow {
        $2
      }
      @viewport-medium {
        $3
      }
      @viewport-wide {
        $4
      }
    """

  'Media Query Tiny':
    'prefix': 'mq1'
    'body': """
      @media @viewport-tiny {
        $1
      }
    """

  'Media Query Narrow':
    'prefix': 'mq2'
    'body': """
      @media @viewport-narrow {
        $1
      }
    """

  'Media Query Medium':
    'prefix': 'mq3'
    'body': """
      @media @viewport-medium {
        $1
      }
    """

  'Media Query Wide':
    'prefix': 'mq4'
    'body': """
      @media @viewport-wide {
        $1
      }
    """

  'Media Query Super Wide':
    'prefix': 'mq5'
    'body': """
      @media @viewport-superwide {
        $1
      }
    """

  'Colours':
    'prefix': 'colours'
    'body': """
      @gold: #e09d00;
      @primary: #383838;
      @secondary: #737373;
      @tertiary: #9e9e9e;
      @error: #e12626;
    """

  'CSS Selection colours':
    'prefix': 'selection'
    'body': """
      ::-moz-selection {
        background: @gold;
        color: @primary;
      }
      ::selection {
        background: @gold;
        color: @primary;
      }
    """

  'Absolute fill':
    'prefix': 'abso'
    'body': """
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
    """