JavaScript

The Interior JavaScript file bundles a couple of third-party libraries as well as some custom ones.

# Datepicker

Custom plugin to select date and time, induvidually and within a range.

Defaults

$.automileDatePicker({
    // @param {bool} - Show more than one(1) calendar to pick start and end date.
    dateRange: false,
    // @param {bool|Moment.js object}
    date: moment(),
    // @param {bool|Moment.js object} - Show or hide the time picker (takes a Moment.js object if `date` is false).
    time: false,
    // @param {Moment.js object}
    startDate: moment('00:00', 'H:mm'),
    // @param {Moment.js object}
    endDate: moment('23:59', 'H:mm'),
    // @param {Moment.js object}
    minDate: null,
    // @param {Moment.js object}
    maxDate: null,
    // @param {number}
    firstDayOfWeek: moment.localeData().firstDayOfWeek(),
    // @param {number} - Number of calendars to show (when `dateRange` is true).
    calendars: 2,
    // @param {object} - Object with preset date ranges.
    ranges: null,
    // @param {function} - Runs when plugin initialize.
    // @return {Moment.js object|object} - When `dateRange` is true, `date` is an object with `startDate` and `endDate`.
    onInit: function(date) {},
    // @param {function} - Runs when plugin data changes.
    // @return {Moment.js object|object} - When `dateRange` is true, `date` is an object with `startDate` and `endDate`.
    onChange: function(date) {},
    // @param {object} - String localization.
    resources: {
        dateRange: 'Date Range',
        endTime: 'Choose End Time',
        startTime: 'Choose Start Time',
        time: 'Choose Time'
    }
});

Basic examples

Example 1 (Date)

Example 2 (Date/Time)

Example 3 (Time)

<div class="row row--space-between">
    <div class="push--right">
        <div class="label">Example 1 (Date)</div>
        <hr>
        <div class="date-picker-example"></div>
        <hr>
        <div class="date-picker-example-output"></div>
    </div>
    <div class="push--right">
        <div class="label">Example 2 (Date/Time)</div>
        <hr>
        <div class="date-picker-example-with-time"></div>
        <hr>
        <div class="date-picker-example-with-time-output"></div>
    </div>
    <div>
        <div class="label">Example 3 (Time)</div>
        <hr>
        <div class="date-picker-example-no-date"></div>
        <hr>
        <div class="date-picker-example-no-date-output"></div>
    </div>
</div>
<script>
    (function($) {
        // Example 1
        var $out1 = $('.date-picker-example-output');
        $('.date-picker-example').automileDatePicker({
            onInit: function(date) { $out1.text(moment(date).format('LL')); },
            onChange: function(date) { $out1.text(moment(date).format('LL')); }
        });

        // Example 2
        var $out2 = $('.date-picker-example-with-time-output');
        $('.date-picker-example-with-time').automileDatePicker({
            time: true,
            onInit: function(date) { $out2.text(moment(date).format('LLLL')) },
            onChange: function(date) { $out2.text(moment(date).format('LLLL')) }
        });

        // Example 3
        var $out3 = $('.date-picker-example-no-date-output');
        $('.date-picker-example-no-date').automileDatePicker({
            date: false,
            time: moment(),
            onInit: function(date) { $out3.text(moment(date).format('LT')) },
            onChange: function(date) { $out3.text(moment(date).format('LT')) }
        });
    })(jQuery);
</script>

Advanced example

Following example has it all. Date range, time range and predefined date range options, here combined with the Dropdown plugin.

<button class="button button--ghost date-picker-advanced-example">
    <span class="from">/*insert start date from model here*/</span> &ndash;
    <span class="to">/*insert end date from model here*/</span>
    <svg class="shape push-half--left" aria-hidden="true">
        <use xlink:href="#shape-caret-down"></use>
    </svg>
</button>

<script>
    (function($) {
        // Grab the click target
        var $target = $('.date-picker-advanced-example');

        // Since this is a `button` element, we probarbly don't want the
        // default behaviour triggering, submitting a surrounding form for example.
        $target.on('click', function(e) { e.preventDefault(); });

        // Set up the drop instance
        var datePicker = new Drop({
            target: $target[0],
            content: '',
            position: 'bottom left',
            openOn: 'click'
        });

        // When the drop opens, grab the context and initialize our
        // datepicker plugin there.
        datePicker.on('open', function() {
            var $container = $(this.drop).find('.drop-content');
            $container
                .addClass('hard--ends hard--right')
                .automileDatePicker({
                    dateRange: true,
                    time: true,
                    startDate: moment('00:00', 'H:mm').subtract(3, 'days'),
                    endDate: moment('23:59', 'H:mm'),
                    maxDate: moment(),
                    ranges: {
                        'Today': {
                            startDate: function startDate(now) {
                                return now;
                            },
                            endDate: function endDate(now) {
                                return now;
                            }
                        },
                        'Yesterday': {
                            startDate: function startDate(now) {
                                return now.add(-1, 'days');
                            },
                            endDate: function endDate(now) {
                                return now.add(-1, 'days');
                            }
                        },
                        'Last 7 Days': {
                            startDate: function startDate(now) {
                                return now.add(-7, 'days');
                            },
                            endDate: function endDate(now) {
                                return now;
                            }
                        },
                        'Last 30 Days': {
                            startDate: function startDate(now) {
                                return now.add(-30, 'days');
                            },
                            endDate: function endDate(now) {
                                return now;
                            }
                        }
                    },
                    onChange: function(date) {
                        // Update the button text to the selected date and time values
                        $target.find('.from').text(moment(date.startDate).format('L LT'));
                        $target.find('.to').text(moment(date.endDate).format('L LT'));
                    }
                });
        });
    })(jQuery);
</script>

Interior bundles, a third-party library called Drop for simple dropdown menus. Drop uses a prositioning library called Tether under the hood.

<div class="drop">
    <a class="button button--hollow dropdown-example">Click me</a>
</div>

<script>
    (function() {
        'use strict';

        var drop = new Drop({
            target: document.querySelector('.dropdown-example'),
            content: 'Hello from the the Upside Down',
            openOn: 'click' // could also be 'hover' or 'always'
        });
    })();
</script>

# Select

Custom plugin to replace native browser <select> inputs. Comes with two different styling options, and multiple select support. Select uses a prositioning library called Tether under the hood.

Defaults

$.automileSelect({
    // @param {bool} - Show chrome around select box.
    chrome: true,
    // @param {bool} - Make select will 100% with of its parent.
    fullWidth: true,
    // @param {bool} - Show filter input.
    search: false,
    // @param {bool} - Show `Select All` option (only viable when `multiple` is true).
    selectAll: false,
    // @param {bool} - If the options should be sorted alphabetically or not.
    sort: false,
    // @param {object} - i18n strings.
    resources: {
        allSelected: 'All Selected',
        nothingMatchedSearch: 'Nothing matched your search terms.',
        nrOfSelected: '{0} of {1} selected',
        placeholder: 'Select...',
        selectAll: 'Select All'
    }
});

Select

<div class="row">
    <div class="col">
        <select aria-label="All Vehicles" class="select-example">
            <option value="1">Lorem ipsum dolor sit amet David Paulsson</option>
            <option value="2">Eligendi accusamus</option>
            <option value="3">Reiciendis consequatur</option>
            <option value="4">Distinctio quidem</option>
            <option value="5">Minima sit</option>
            <option value="6">Rerum illo</option>
            <option value="7">Quas excepturi</option>
            <option value="8">Assumenda inventore</option>
            <option value="9">Odio deserunt</option>
            <option value="10">Praesentium aspernatur</option>
            <option value="11">Repellendus labore</option>
            <option value="12">Est saepe</option>
            <option value="13">Delectus dignissimos</option>
            <option value="14">Nemo animi</option>
            <option value="15">Delectus quibusdam</option>
            <option value="16">Error explicabo</option>
            <option value="17">Ullam voluptatum</option>
            <option value="18">Vitae nemo</option>
            <option value="19">Sint explicabo</option>
            <option value="20">Voluptatem quos</option>
        </select>
    </div>
    <div class="col">
        <select aria-label="All Vehicles" class="select-example-ghost">
            <option value="1">Lorem ipsum</option>
            <option value="2">Eligendi accusamus</option>
            <option value="3">Reiciendis consequatur</option>
            <option value="4">Distinctio quidem</option>
            <option value="5">Minima sit</option>
            <option value="6">Rerum illo</option>
            <option value="7">Quas excepturi</option>
            <option value="8">Assumenda inventore</option>
            <option value="9">Odio deserunt</option>
            <option value="10">Praesentium aspernatur</option>
            <option value="11">Repellendus labore</option>
            <option value="12">Est saepe</option>
            <option value="13">Delectus dignissimos</option>
            <option value="14">Nemo animi</option>
            <option value="15">Delectus quibusdam</option>
            <option value="16">Error explicabo</option>
            <option value="17">Ullam voluptatum</option>
            <option value="18">Vitae nemo</option>
            <option value="19">Sint explicabo</option>
            <option value="20">Voluptatem quos</option>
        </select>
    </div>
</div>

<script>
    (function ($) {
        $('.select-example').automileSelect({
            chrome: false,
            fullWidth: false,
            onChange: function(val) {
                console.log(val);
            }
        });

        $('.select-example-ghost').automileSelect({
            sort: true,
            onChange: function(val) {
                console.log(val);
            }
        });
    })(jQuery);
</script>

Multiple Select

To render a multiple select, just add the multiple attribute to the <select> tag.

<select class="multiple-select-example" multiple>
    <option value="1">Lorem ipsum</option>
    <option value="2">Eligendi accusamus</option>
    <option value="3">Vitae nemo</option>
    <option value="4">Est saepe</option>
    <option value="5">Minima sit</option>
</select>

<script>
    (function($) {
        $('.multiple-select-example').automileSelect({
            chrome: false,
            fullWidth: false,
            search: true,
            selectAll: true,
            sort: true,
            resources: {
                placeholder: 'Custom Placeholder Label',
            },
            onChange: function(val) {
                console.log(val);
            }
        });
    })(jQuery);
</script>

# Table

Interior bundles, and provide custom styling, a third-party library called DataTables.

Table Heading 1	Table Heading 2	Table Heading 3
Cell 1	Cell 2	Cell 3
Cell 6	Cell 5	Cell 4
Cell 12	Cell 24	Cell 36
Cell 91	Cell 62	Cell 43

<table class="table datatables-example">
    <thead>
        <tr>
            <th>Table Heading 1</th>
            <th>Table Heading 2</th>
            <th>Table Heading 3</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Cell 1</td>
            <td>Cell 2</td>
            <td>Cell 3</td>
        </tr>
        <tr>
            <td>Cell 6</td>
            <td>Cell 5</td>
            <td>Cell 4</td>
        </tr>
        <tr>
            <td>Cell 12</td>
            <td>Cell 24</td>
            <td>Cell 36</td>
        </tr>
        <tr>
            <td>Cell 91</td>
            <td>Cell 62</td>
            <td>Cell 43</td>
        </tr>
    </tbody>
</table>

<script>
    (function($){
        'use strict';

        /**
         * 1. Remove the "Show X entries" dropdown
         * 2. Speed up rendering by not having Datatables autoresize cols
         * 3. Change how many rows is showing before it paginates (default: 10)
         * 4. Define what parts of Datatables to render
         */

        $('.datatables-example').DataTable({
            'lengthChange': false, /* 1 */
            'autoWidth': false, /* 2 */
            'iDisplayLength': 30, /* 3 */
            'sDom': 'lrtip' /* 4 */
        });
    })(jQuery);
</script>

Interior bundles, a third-party library called Tooltip for simple tooltips. Tooltip uses a prositioning library called Tether under the hood.

Usage

Add data-tooltip (and optionally data-tooltip-position) to any element.

I’m a link
I’m another link

<a href="#" data-tooltip="Foo">I’m a link</a>

<br>

<a href="#" data-tooltip="Bar" data-tooltip-position="right middle">I’m another link</a>

Interior bundles, a third-party library called Vex for modals. You can also use these modals to replace native browser alert, confirm etc.

Alert

<button class="button button--hollow" id="modal-alert-example">Open an alert</button>

<script>
    (function($) {
        'use strict';

        $('#modal-alert-example').on('click', function() {
            vex.dialog.alert('This is going to be awesome.');
        });
    })(jQuery);
</script>

Confirm

Callback value: Null

<button class="button button--hollow" id="modal-confirm-example">Open a confirm</button>

<div class="box box--small box--warning push-half--top">
    <strong>Callback value:</strong> <span>Null</span>
</div>

<script>
    (function($) {
        'use strict';

        var $confirm = $('#modal-confirm-example'),
            $answer = $confirm.next().find('span');

        $confirm.on('click', function() {
            vex.dialog.confirm({
                message: 'Are you absolutely sure you want to destroy the alien planet?',
                callback: function(value) {
                    $answer.html(value ? 'Successfully destroyed the planet.' : 'Chicken.');
                }
            });
        });
    })(jQuery);
</script>

Prompt

Let’s change the button labels as well.

Callback value: Null

<button class="button button--hollow" id="modal-prompt-example">Open a prompt</button>

<div class="box box--small box--warning push-half--top">
    <strong>Callback value:</strong> <span>Null</span>
</div>

<script>
    (function($) {
        'use strict';

        var $prompt = $('#modal-prompt-example');
        var $promptAnswer = $prompt.next().find('span');

        $prompt.on('click', function() {
            vex.dialog.prompt({
                message: 'What planet did the aliens come from?',
                placeholder: 'Planet name',
                buttons: [
                    $.extend({}, vex.dialog.buttons.YES, {
                        text: 'I guess?'
                    }),
                    $.extend({}, vex.dialog.buttons.NO, {
                        text: 'I don\'t know'
                    })
                ],
                callback: function(value) {
                    if (value === false) {
                        return $promptAnswer.text('Cancelled');
                    }

                    $promptAnswer.text(!value.length ? 'No answer' : value);
                }
            });
        });
    })(jQuery);
</script>

Open

With vex.open you can do what ever you’d like in your modal. Here’s an example that adds a class that removes the buttons.

<button class="button button--hollow" id="modal-open-example">Open</button>

<div id="modal-open-example-content" style="display: none;">
    <h1 class="h3">This Is a Headline</h1>
    <p>Lorem ipsum dolor sit amet.</p>
</div>

<script>
    (function($) {
        'use strict';

        $('#modal-open-example').on('click', function() {
            vex.dialog.open({
                message: $('#modal-open-example-content').html(),
                className: 'vex-no-buttons'
            });
        });
    })(jQuery);
</script>

Interior

The CSS toolkit and guidelines that power Automile.

JavaScript

The Interior JavaScript file bundles a couple of third-party libraries as well as some custom ones.

# Datepicker

Defaults

Basic examples

Advanced example

# Select

Defaults

Select

Multiple Select

# Table

# Tooltip

Usage

Alert

Confirm

Prompt

Open

# Datepicker

Defaults

Basic examples

Advanced example

# Dropdown

# Select

Defaults

Select

Multiple Select

# Table

# Tooltip

Usage

# Modal

Alert

Confirm

Prompt

Open

This Is a Headline