Commit 568e7d4e authored by Tom Kunze's avatar Tom Kunze
Browse files

server/static/vendor/materialize: Update to 1.0.0

parent 763b0b12
...@@ -2,33 +2,34 @@ ...@@ -2,33 +2,34 @@
<a href="http://materializecss.com/"> <a href="http://materializecss.com/">
<img src="http://materializecss.com/res/materialize.svg" width="150"> <img src="http://materializecss.com/res/materialize.svg" width="150">
</a> </a>
</p>
<h3 align="center">MaterializeCSS</h3> <h3 align="center">MaterializeCSS</h3>
<p align="center"> <p align="center">
Materialize, a CSS Framework based on material design. Materialize, a CSS Framework based on material design.
<br> <br>
<a href="http://materializecss.com/"><strong>-- Browse the docs --</strong></a> <a href="http://materializecss.com/"><strong>-- Browse the docs --</strong></a>
<br> <br>
<br> <br>
<a href="https://travis-ci.org/Dogfalo/materialize"> <a href="https://travis-ci.org/Dogfalo/materialize">
<img src="https://travis-ci.org/Dogfalo/materialize.svg?branch=master" alt="Travis CI badge"> <img src="https://travis-ci.org/Dogfalo/materialize.svg?branch=master" alt="Travis CI badge">
</a> </a>
<a href="https://badge.fury.io/js/materialize-css"> <a href="https://badge.fury.io/js/materialize-css">
<img src="https://badge.fury.io/js/materialize-css.svg" alt="npm version badge"> <img src="https://badge.fury.io/js/materialize-css.svg" alt="npm version badge">
</a> </a>
<a href="https://cdnjs.com/libraries/materialize"> <a href="https://cdnjs.com/libraries/materialize">
<img src="https://img.shields.io/cdnjs/v/materialize.svg" alt="CDNJS version badge"> <img src="https://img.shields.io/cdnjs/v/materialize.svg" alt="CDNJS version badge">
</a> </a>
<a href="https://david-dm.org/Dogfalo/materialize"> <a href="https://david-dm.org/Dogfalo/materialize">
<img src="https://david-dm.org/Dogfalo/materialize/status.svg" alt="dependencies Status badge"> <img src="https://david-dm.org/Dogfalo/materialize/status.svg" alt="dependencies Status badge">
</a>
<a href="https://david-dm.org/Dogfalo/materialize#info=devDependencies">
<img src="https://david-dm.org/Dogfalo/materialize/dev-status.svg" alt="devDependency Status badge">
</a>
<a href="https://gitter.im/Dogfalo/materialize">
<img src="https://badges.gitter.im/Join%20Chat.svg" alt="Gitter badge">
</a> </a>
<a href="https://david-dm.org/Dogfalo/materialize#info=devDependencies">
<img src="https://david-dm.org/Dogfalo/materialize/dev-status.svg" alt="devDependency Status badge">
</a>
<a href="https://gitter.im/Dogfalo/materialize">
<img src="https://badges.gitter.im/Join%20Chat.svg" alt="Gitter badge">
</a>
</p> </p>
## Table of Contents ## Table of Contents
...@@ -43,12 +44,12 @@ ...@@ -43,12 +44,12 @@
## Quickstart: ## Quickstart:
Read the [getting started guide](http://materializecss.com/getting-started.html) for more information on how to use materialize. Read the [getting started guide](http://materializecss.com/getting-started.html) for more information on how to use materialize.
- [Download the latest release](https://github.com/Dogfalo/materialize/releases/latest) of materialize directly from GitHub. - [Download the latest release](https://github.com/Dogfalo/materialize/releases/latest) of materialize directly from GitHub. ([Beta](https://github.com/Dogfalo/materialize/releases/))
- Clone the repo: `git clone https://github.com/Dogfalo/materialize.git` - Clone the repo: `git clone https://github.com/Dogfalo/materialize.git` (Beta: `git clone -b v1-dev https://github.com/Dogfalo/materialize.git`)
- Include the files via [cdnjs](https://cdnjs.com/libraries/materialize). More [here](http://materializecss.com/getting-started.html). - Include the files via [cdnjs](https://cdnjs.com/libraries/materialize). More [here](http://materializecss.com/getting-started.html). ([Beta](https://cdnjs.com/libraries/materialize/1.0.0-beta))
- Install with [npm](https://www.npmjs.com): `npm install materialize-css` - Install with [npm](https://www.npmjs.com): `npm install materialize-css` (Beta: `npm install materialize-css@next`)
- Install with [Bower](https://bower.io): `bower install materialize` ([DEPRECATED](https://bower.io/blog/2017/how-to-migrate-away-from-bower/)) - Install with [Bower](https://bower.io): `bower install materialize` ([DEPRECATED](https://bower.io/blog/2017/how-to-migrate-away-from-bower/))
- Install with [Atmosphere](https://atmospherejs.com): `meteor add materialize:materialize` - Install with [Atmosphere](https://atmospherejs.com): `meteor add materialize:materialize` (Beta: `meteor add materialize:materialize@=1.0.0-beta`)
## Documentation ## Documentation
The documentation can be found at <http://materializecss.com>. To run the documentation locally on your machine, you need [Node.js](https://nodejs.org/en/) installed on your computer. The documentation can be found at <http://materializecss.com>. To run the documentation locally on your machine, you need [Node.js](https://nodejs.org/en/) installed on your computer.
...@@ -87,4 +88,4 @@ We use Jasmine as our testing framework and we're trying to write a robust test ...@@ -87,4 +88,4 @@ We use Jasmine as our testing framework and we're trying to write a robust test
Check out the [CONTRIBUTING document](CONTRIBUTING.md) in the root of the repository to learn how you can contribute. You can also browse the [help-wanted](https://github.com/Dogfalo/materialize/labels/help-wanted) tag in our issue tracker to find things to do. Check out the [CONTRIBUTING document](CONTRIBUTING.md) in the root of the repository to learn how you can contribute. You can also browse the [help-wanted](https://github.com/Dogfalo/materialize/labels/help-wanted) tag in our issue tracker to find things to do.
## Copyright and license ## Copyright and license
Code copyright 2017 Materialize. Code released under the MIT license. Code Copyright 2018 Materialize. Code released under the MIT license.
(function ($) { (function($) {
'use strict'; 'use strict';
let _defaults = { let _defaults = {
...@@ -6,12 +6,12 @@ ...@@ -6,12 +6,12 @@
limit: Infinity, // Limit of results the autocomplete shows limit: Infinity, // Limit of results the autocomplete shows
onAutocomplete: null, // Callback for when autocompleted onAutocomplete: null, // Callback for when autocompleted
minLength: 1, // Min characters before autocomplete starts minLength: 1, // Min characters before autocomplete starts
sortFunction: function (a, b, inputString) { // Sort function for sorting autocomplete results sortFunction: function(a, b, inputString) {
// Sort function for sorting autocomplete results
return a.indexOf(inputString) - b.indexOf(inputString); return a.indexOf(inputString) - b.indexOf(inputString);
} }
}; };
/** /**
* @class * @class
* *
...@@ -49,6 +49,7 @@ ...@@ -49,6 +49,7 @@
this.oldVal; this.oldVal;
this.$inputField = this.$el.closest('.input-field'); this.$inputField = this.$el.closest('.input-field');
this.$active = $(); this.$active = $();
this._mousedown = false;
this._setupDropdown(); this._setupDropdown();
this._setupEventHandlers(); this._setupEventHandlers();
...@@ -86,16 +87,31 @@ ...@@ -86,16 +87,31 @@
this._handleInputBlurBound = this._handleInputBlur.bind(this); this._handleInputBlurBound = this._handleInputBlur.bind(this);
this._handleInputKeyupAndFocusBound = this._handleInputKeyupAndFocus.bind(this); this._handleInputKeyupAndFocusBound = this._handleInputKeyupAndFocus.bind(this);
this._handleInputKeydownBound = this._handleInputKeydown.bind(this); this._handleInputKeydownBound = this._handleInputKeydown.bind(this);
this._handleContainerMousedownAndTouchstartBound = this._handleContainerMousedownAndTouchstart.bind(this); this._handleInputClickBound = this._handleInputClick.bind(this);
this._handleContainerMousedownAndTouchstartBound = this._handleContainerMousedownAndTouchstart.bind(
this
);
this._handleContainerMouseupAndTouchendBound = this._handleContainerMouseupAndTouchend.bind(
this
);
this.el.addEventListener('blur', this._handleInputBlurBound); this.el.addEventListener('blur', this._handleInputBlurBound);
this.el.addEventListener('keyup', this._handleInputKeyupAndFocusBound); this.el.addEventListener('keyup', this._handleInputKeyupAndFocusBound);
this.el.addEventListener('focus', this._handleInputKeyupAndFocusBound); this.el.addEventListener('focus', this._handleInputKeyupAndFocusBound);
this.el.addEventListener('keydown', this._handleInputKeydownBound); this.el.addEventListener('keydown', this._handleInputKeydownBound);
this.container.addEventListener('mousedown', this._handleContainerMousedownAndTouchstartBound); this.el.addEventListener('click', this._handleInputClickBound);
this.container.addEventListener(
'mousedown',
this._handleContainerMousedownAndTouchstartBound
);
this.container.addEventListener('mouseup', this._handleContainerMouseupAndTouchendBound);
if (typeof window.ontouchstart !== 'undefined') { if (typeof window.ontouchstart !== 'undefined') {
this.container.addEventListener('touchstart', this._handleContainerMousedownAndTouchstartBound); this.container.addEventListener(
'touchstart',
this._handleContainerMousedownAndTouchstartBound
);
this.container.addEventListener('touchend', this._handleContainerMouseupAndTouchendBound);
} }
} }
...@@ -107,10 +123,22 @@ ...@@ -107,10 +123,22 @@
this.el.removeEventListener('keyup', this._handleInputKeyupAndFocusBound); this.el.removeEventListener('keyup', this._handleInputKeyupAndFocusBound);
this.el.removeEventListener('focus', this._handleInputKeyupAndFocusBound); this.el.removeEventListener('focus', this._handleInputKeyupAndFocusBound);
this.el.removeEventListener('keydown', this._handleInputKeydownBound); this.el.removeEventListener('keydown', this._handleInputKeydownBound);
this.container.removeEventListener('mousedown', this._handleContainerMousedownAndTouchstartBound); this.el.removeEventListener('click', this._handleInputClickBound);
this.container.removeEventListener(
'mousedown',
this._handleContainerMousedownAndTouchstartBound
);
this.container.removeEventListener('mouseup', this._handleContainerMouseupAndTouchendBound);
if (typeof window.ontouchstart !== 'undefined') { if (typeof window.ontouchstart !== 'undefined') {
this.container.removeEventListener('touchstart', this._handleContainerMousedownAndTouchstartBound); this.container.removeEventListener(
'touchstart',
this._handleContainerMousedownAndTouchstartBound
);
this.container.removeEventListener(
'touchend',
this._handleContainerMouseupAndTouchendBound
);
} }
} }
...@@ -119,8 +147,22 @@ ...@@ -119,8 +147,22 @@
*/ */
_setupDropdown() { _setupDropdown() {
this.container = document.createElement('ul'); this.container = document.createElement('ul');
this.container.id = `autocomplete-options-${M.guid()}`;
$(this.container).addClass('autocomplete-content dropdown-content'); $(this.container).addClass('autocomplete-content dropdown-content');
this.$inputField.append(this.container); this.$inputField.append(this.container);
this.el.setAttribute('data-target', this.container.id);
this.dropdown = M.Dropdown.init(this.el, {
autoFocus: false,
closeOnClick: false,
coverTrigger: false,
onItemClick: (itemEl) => {
this.selectOption($(itemEl));
}
});
// Sketchy removal of dropdown click handler
this.el.removeEventListener('click', this.dropdown._handleClickBound);
} }
/** /**
...@@ -134,7 +176,10 @@ ...@@ -134,7 +176,10 @@
* Handle Input Blur * Handle Input Blur
*/ */
_handleInputBlur() { _handleInputBlur() {
this._removeAutocomplete(); if (!this._mousedown) {
this.close();
this._resetAutocomplete();
}
} }
/** /**
...@@ -150,20 +195,14 @@ ...@@ -150,20 +195,14 @@
let val = this.el.value.toLowerCase(); let val = this.el.value.toLowerCase();
// Don't capture enter or arrow key usage. // Don't capture enter or arrow key usage.
if (e.keyCode === 13 || if (e.keyCode === 13 || e.keyCode === 38 || e.keyCode === 40) {
e.keyCode === 38 ||
e.keyCode === 40) {
return; return;
} }
// Check if the input isn't empty // Check if the input isn't empty
if (this.oldVal !== val) { // Check if focus triggered by tab
this._removeAutocomplete(); if (this.oldVal !== val && (M.tabPressed || e.type !== 'focus')) {
this.open();
if (val.length >= this.options.minLength) {
this.isOpen = true;
this._renderDropdown(this.options.data, val);
}
} }
// Update oldVal // Update oldVal
...@@ -183,8 +222,10 @@ ...@@ -183,8 +222,10 @@
numItems = $(this.container).children('li').length; numItems = $(this.container).children('li').length;
// select element on Enter // select element on Enter
if (keyCode === 13 && this.activeIndex >= 0) { if (keyCode === M.keys.ENTER && this.activeIndex >= 0) {
liElement = $(this.container).children('li').eq(this.activeIndex); liElement = $(this.container)
.children('li')
.eq(this.activeIndex);
if (liElement.length) { if (liElement.length) {
this.selectOption(liElement); this.selectOption(liElement);
e.preventDefault(); e.preventDefault();
...@@ -193,34 +234,49 @@ ...@@ -193,34 +234,49 @@
} }
// Capture up and down key // Capture up and down key
if (keyCode === 38 || keyCode === 40) { if (keyCode === M.keys.ARROW_UP || keyCode === M.keys.ARROW_DOWN) {
e.preventDefault(); e.preventDefault();
if (keyCode === 38 && if (keyCode === M.keys.ARROW_UP && this.activeIndex > 0) {
this.activeIndex > 0) {
this.activeIndex--; this.activeIndex--;
} }
if (keyCode === 40 && if (keyCode === M.keys.ARROW_DOWN && this.activeIndex < numItems - 1) {
this.activeIndex < (numItems - 1)) {
this.activeIndex++; this.activeIndex++;
} }
this.$active.removeClass('active'); this.$active.removeClass('active');
if (this.activeIndex >= 0) { if (this.activeIndex >= 0) {
this.$active = $(this.container).children('li').eq(this.activeIndex); this.$active = $(this.container)
.children('li')
.eq(this.activeIndex);
this.$active.addClass('active'); this.$active.addClass('active');
} }
} }
} }
/**
* Handle Input Click
* @param {Event} e
*/
_handleInputClick(e) {
this.open();
}
/** /**
* Handle Container Mousedown and Touchstart * Handle Container Mousedown and Touchstart
* @param {Event} e * @param {Event} e
*/ */
_handleContainerMousedownAndTouchstart(e) { _handleContainerMousedownAndTouchstart(e) {
let $autocompleteOption = $(e.target).closest('li'); this._mousedown = true;
this.selectOption($autocompleteOption); }
/**
* Handle Container Mouseup and Touchend
* @param {Event} e
*/
_handleContainerMouseupAndTouchend(e) {
this._mousedown = false;
} }
/** /**
...@@ -228,12 +284,17 @@ ...@@ -228,12 +284,17 @@
*/ */
_highlight(string, $el) { _highlight(string, $el) {
let img = $el.find('img'); let img = $el.find('img');
let matchStart = $el.text().toLowerCase().indexOf("" + string.toLowerCase() + ""), let matchStart = $el
.text()
.toLowerCase()
.indexOf('' + string.toLowerCase() + ''),
matchEnd = matchStart + string.length - 1, matchEnd = matchStart + string.length - 1,
beforeMatch = $el.text().slice(0, matchStart), beforeMatch = $el.text().slice(0, matchStart),
matchText = $el.text().slice(matchStart, matchEnd + 1), matchText = $el.text().slice(matchStart, matchEnd + 1),
afterMatch = $el.text().slice(matchEnd + 1); afterMatch = $el.text().slice(matchEnd + 1);
$el.html("<span>" + beforeMatch + "<span class='highlight'>" + matchText + "</span>" + afterMatch + "</span>"); $el.html(
`<span>${beforeMatch}<span class='highlight'>${matchText}</span>${afterMatch}</span>`
);
if (img.length) { if (img.length) {
$el.prepend(img); $el.prepend(img);
} }
...@@ -248,16 +309,14 @@ ...@@ -248,16 +309,14 @@
} }
/** /**
* Remove autocomplete elements * Reset autocomplete elements
*/ */
_removeAutocomplete() { _resetAutocomplete() {
$(this.container).empty(); $(this.container).empty();
this._resetCurrentElement(); this._resetCurrentElement();
this.oldVal = null; this.oldVal = null;
$(this.container).css({
display: ''
});
this.isOpen = false; this.isOpen = false;
this._mousedown = false;
} }
/** /**
...@@ -268,10 +327,11 @@ ...@@ -268,10 +327,11 @@
let text = el.text().trim(); let text = el.text().trim();
this.el.value = text; this.el.value = text;
this.$el.trigger('change'); this.$el.trigger('change');
this._removeAutocomplete(); this._resetAutocomplete();
this.close();
// Handle onAutocomplete callback. // Handle onAutocomplete callback.
if (typeof (this.options.onAutocomplete) === 'function') { if (typeof this.options.onAutocomplete === 'function') {
this.options.onAutocomplete.call(this, text); this.options.onAutocomplete.call(this, text);
} }
} }
...@@ -282,14 +342,13 @@ ...@@ -282,14 +342,13 @@
* @param {String} val current input value * @param {String} val current input value
*/ */
_renderDropdown(data, val) { _renderDropdown(data, val) {
this._removeAutocomplete(); this._resetAutocomplete();
let matchingData = []; let matchingData = [];
// Gather all matching data // Gather all matching data
for (let key in data) { for (let key in data) {
if (data.hasOwnProperty(key) && if (data.hasOwnProperty(key) && key.toLowerCase().indexOf(val) !== -1) {
key.toLowerCase().indexOf(val) !== -1) {
// Break if past limit // Break if past limit
if (this.count >= this.options.limit) { if (this.count >= this.options.limit) {
break; break;
...@@ -306,21 +365,25 @@ ...@@ -306,21 +365,25 @@
} }
// Sort // Sort
let sortFunctionBound = (a, b) => { if (this.options.sortFunction) {
return this.options.sortFunction(a.key.toLowerCase(), b.key.toLowerCase(), val.toLowerCase()); let sortFunctionBound = (a, b) => {
}; return this.options.sortFunction(
matchingData.sort(sortFunctionBound); a.key.toLowerCase(),
b.key.toLowerCase(),
$(this.container).css({ val.toLowerCase()
display: 'block' );
}); };
matchingData.sort(sortFunctionBound);
}
// Render // Render
for (let i = 0; i < matchingData.length; i++) { for (let i = 0; i < matchingData.length; i++) {
let entry = matchingData[i]; let entry = matchingData[i];
let $autocompleteOption = $('<li></li>'); let $autocompleteOption = $('<li></li>');
if (!!entry.data) { if (!!entry.data) {
$autocompleteOption.append('<img src="' + entry.data + '" class="right circle"><span>' + entry.key + '</span>'); $autocompleteOption.append(
`<img src="${entry.data}" class="right circle"><span>${entry.key}</span>`
);
} else { } else {
$autocompleteOption.append('<span>' + entry.key + '</span>'); $autocompleteOption.append('<span>' + entry.key + '</span>');
} }
...@@ -328,7 +391,35 @@ ...@@ -328,7 +391,35 @@
$(this.container).append($autocompleteOption); $(this.container).append($autocompleteOption);
this._highlight(val, $autocompleteOption); this._highlight(val, $autocompleteOption);
} }
}
/**
* Open Autocomplete Dropdown
*/
open() {
let val = this.el.value.toLowerCase();
this._resetAutocomplete();
if (val.length >= this.options.minLength) {
this.isOpen = true;
this._renderDropdown(this.options.data, val);
}
// Open dropdown
if (!this.dropdown.isOpen) {
this.dropdown.open();
} else {
// Recalculate dropdown when its already open
this.dropdown.recalculateDimensions();
}
}
/**
* Close Autocomplete Dropdown
*/
close() {
this.dropdown.close();
} }
/** /**
...@@ -356,5 +447,4 @@ ...@@ -356,5 +447,4 @@
if (M.jQueryLoaded) { if (M.jQueryLoaded) {
M.initializeJqueryWrapper(Autocomplete, 'autocomplete', 'M_Autocomplete'); M.initializeJqueryWrapper(Autocomplete, 'autocomplete', 'M_Autocomplete');
} }
})(cash);
}(cash));