Advanced

Documentation of possible form layouts including vertical, multicolumn and inline layout.

Files

app/styles/modules/_forms.scss
app/styles/modules/_calendar.scss
app/scripts/modules/datePicker.js
app/scripts/modules/autocompleteCustom.js
app/scripts/modules/main.js

Input with icon

Inputs and select can have additional icon inside element. To include desired icon you need to wrap input/select in .form-advanced element with additional class .form-advanced-icon. Icon has to be placed after input element as shown on examples below. Position of icon can be set via additional class .form-advanced-left (right is default).

Example:

Code:

<div class="form-advanced form-advanced-icon">
  <input class="input" placeholder="Input" type="text"><i class="icon icon-m">search</i>
</div>

<div class="form-advanced form-advanced-icon">
  <input class="input input-l" placeholder="Input" type="text">
  <i class="icon icon-m">search</i>
</div>

<div class="form-advanced form-advanced-icon">
  <textarea class="input" placeholder="Textarea" type="text" rows="3"></textarea><i class="icon icon-m">search</i>
</div>

<div class="form-advanced form-advanced-icon">
  <select class="js-select"></select>
  <i class="icon icon-m">search</i>
</div>

<div class="form-advanced form-advanced-icon form-advanced-icon-left">
  <input class="input" placeholder="Input" type="text">
  <i class="icon icon-m">search</i>
</div>

<div class="form-advanced form-advanced-icon form-advanced-icon-left">
  <input class="input input-l" placeholder="Input" type="text">
  <i class="icon icon-m">search</i>
</div>

<div class="form-advanced form-advanced-icon form-advanced-icon-left">
  <textarea class="input" placeholder="Textarea" type="text" rows="3"></textarea>
  <i class="icon icon-m">search</i>
</div>

<div class="form-advanced form-advanced-icon form-advanced-icon-left">
  <select class="js-select"></select>
  <i class="icon icon-m">search</i>
</div>

Input with datepicker

Datepicker can by added to input element with additional class .js-datepicker

Javascript dependency

Datepicker component requiresPikaday plugin.

Example:

Code:

<div class="form-advanced form-advanced-icon">
  <input class="input js-datepicker" placeholder="Input with datepicker" type="text">
  <i class="icon icon-m">calendar</i>
</div>

Custom datepicker config

Pickaday config can be passed to [data-datepicker-options] as string encoded JSON object. All static properties of Pikaday config can be used. Example with custom date format is shown below.

Example:

Code:

<div class="form-advanced form-advanced-icon">
  <input class="input js-datepicker" placeholder="Input with datepicker" type="text">
  <i class="icon icon-m">calendar</i>
</div>

Input with autocomplete

Autocomplete can be bind to input element. Examples below show initialization as simple autocomplete, autocomplete with groups, autocomplete with custom row format and timepicker.

Javascript dependency

Datepicker component requiresAjax Autocomplete for jQuery plugin.

Example:

Code:

<script>
  // basic autocomplete
  $('#autocomplete-example').autocomplete({
    orientation: 'auto',
    minChars: 2,
    lookup: function lookup(query, done) {
      var result = { suggestions: [] };

      var entries = ['Pikachu', 'Charizard', 'Bulbasaur', 'Squirtle', 'Cubone', 'Charmander'].map(function(item) {
        return {
          value: item,
          data: item,
        }
      })

      result.suggestions = entries.reduce(function (acc, item) {
        if (item.value.toLowerCase().indexOf(query.toLowerCase()) != -1) {
          acc.push(item);
        }
        return acc;
      }, []);

      done(result);
    }
  });

  // autocomplete groups
  $('#autocomplete-groups-example').autocomplete({
    orientation: 'auto',
    minChars: 2,
    groupBy: 'category',
    lookup: function lookup(query, done) {
      var result = { suggestions: [] };

      var entriesPokemon = ['Pikachu', 'Charizard', 'Bulbasaur', 'Squirtle', 'Cubone', 'Charmander'].map(function(item) {
        return {
          value: item,
          data: { category: 'Pokémon' },
        }
      });

      var entriesFruits = ['Bannana', 'Apple', 'Pinnapple', 'Orange', 'Plum', 'Cherry'].map(function(item) {
        return {
          value: item,
          data: { category: 'Fruits' },
        }
      });

      result.suggestions = [].concat(entriesPokemon, entriesFruits).reduce(function (acc, item) {
        if (item.value.toLowerCase().indexOf(query.toLowerCase()) != -1) {
          acc.push(item);
        }
        return acc;
      }, []);

      done(result);
    }
  });

  // autocomplete with custom row format
  $('#autocomplete-format-example').autocomplete({
    orientation: 'auto',
    minChars: 2,
    groupBy: 'category',
    lookup: function lookup(query, done) {
      var entries = [];
      var result = { suggestions: [] };

      var entries = [
        {
          value: 'Terapeutical Aromatic Masaz',
          data: {
            category: 'Masáž',
            time: '60 min',
            price: '28',
          }
        },
        {
          value: 'Znackova anitstersova Masaz',
          data: {
            category: 'Masáž',
            time: '30 min',
            price: '30',
          }
        },
        {
          value: 'Californian Hair Coloring',
          data: {
            category: 'Hair',
            time: '45 min',
            price: '50',
          }
        },
        {
          value: 'Franch Nails',
          data: {
            category: 'Nails',
            time: '60 min',
            price: '15',
          }
        },
      ];

      result.suggestions = entries.reduce(function (acc, item) {
        if (item.value.toLowerCase().indexOf(query.toLowerCase()) != -1) {
          acc.push(item);
        }
        return acc;
      }, []);

      done(result);
    },
    formatResult: function (suggestion, currentValue) {
      return (
        '<div class="autocomplete-suggestion_label">' +
          suggestion.value +
        '</div>' +
        (suggestion.data.time
          ?
            ('<div class="autocomplete-suggestion_more">' +
              '<i class="icon icon-s">calendar</i>' + suggestion.data.time +
            '</div>')
          : null
        ) +
        (suggestion.data.time
          ?
            ('<div class="autocomplete-suggestion_more">' +
              '<i class="icon icon-s">euro</i>' + suggestion.data.price +
            '</div>')
          : null
        )
      );
    }
  });

  // timepicker
  $('#timepicker-example').autocomplete({
    orientation: 'auto',
    minChars: 0,
    lookup: function lookup(query, done) {
      var entries = [];
      var result = { suggestions: [] };

      for (var i = 0; i < 24; i++) {
        for (var j = 0; j < 4; j++) {
          entries.push({
            value: ('0' + i).slice(-2) + ':' + ('0' + j * 15).slice(-2),
            data: ('0' + i).slice(-2) + ':' + ('0' + j * 15).slice(-2)
          });
        }
      }

      result.suggestions = entries.reduce(function (acc, item) {
        if (item.value.startsWith(query)) {
          acc.push(item);
        }
        return acc;
      }, []);

      done(result);
    }
  });
</script>

Autocomplete with special button

Autocomplete can have a special button at the end of the list.

Javascript dependency

Autocomplete with button requires app/scripts/modules/autocompleteCustom.js and app/scripts/modules/main.js. You need to call myApp.autocompleteCustom.autocompleteWithButton(input, searchData, button) function inside function customAutocompletes() {} with your custom parameters.

Example:

Code:

<script>
  function customAutocompletes() {
    /*************************************/
    /** AUTOCOMPLETE FUNCTIONS GO BELOW **/
    /*************************************/


    /*************************************
    custom autocomplete for booking search
    *************************************/
    var input = $('#search-bookings-autocomplete');

    if (input.length > 0) {
      var searchData = [
        {
          value: 'Nail',
          data: {
            category: 'Recent searches',
          }
        },
        {
          value: 'Polish',
          data: {
            category: 'Recent searches',
          }
        },
        {
          value: 'Vartrov',
          data: {
            category: 'Recent searches',
          }
        },
        {
          value: 'Aromasoul',
          data: {
            category: 'Recent searches',
          }
        },
      ];
      var button = '<div class="advanced-search text-color-purple"><div><i class="icon icon-s mrg-10-right">settings</i><span>Advanced search</span></div></div>';
     // call function with arguments
      myApp.autocompleteCustom.autocompleteWithButton(input, searchData, button);
    }
  }
</script>

Form with static text

If you need to incorporate text helpers inside form rows, you can do it with .form-static form element as shown on example below.

Example:

Form label:

This is static text inside form

Form label:

This is static text inside form

Form label:

Charizard

Form label:

Charizard3.5

Code:

<div class="form-control">
  <div class="form-advanced-static">This is static text inside form</div>
</div>

<div class="form-control">
  <div class="form-advanced-static form-advanced-static-l">This is static text inside form</div>
</div>

<div class="form-control">
  <div class="form-advanced-static">
    <span class="chip">
      <span class="chip_label">Charizard</span>
    </span>
  </div>
</div>

<div class="form-control">
  <div class="form-advanced-static form-advanced-static-l">
    <span class="chip chip-l" size="l">
      <span class="chip_avatar">
        <img src="/images/avatar.png">
      </span>
      <span class="chip_label">Charizard</span>
      <span class="chip_more">
        <span class="text-color-theme-300">
          3.5
        </span>
        &nbsp;
        <i class="icon icon-s text-color-yellow">star</i>
      </span>
    </span>
  </div>
</div>

Chips as radio-group

Chips can be used as special radiobuttons as shown on example below.

Example:

Radio 1
Radio 2
Radio 3

Code:

<ul class="list-unstyled list-expanded">
  <li>
    <div class="radio-chip">
      <input class="radio-input" type="radio" name="chips" id="chip-1" checked="checked">
      <label class="radio-chip_label" for="chip-1">
        <span class="chip">...</span>
      </label>
    </div>
  </li>
  <li>
    <div class="radio-chip">
      <input class="radio-input" type="radio" name="chips" id="chip-2">
      <label class="radio-chip_label" for="chip-2">
        <span class="chip">...</span>
      </label>
    </div>
  </li>
  ...
</ul>