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 @@
<a href="http://materializecss.com/">
<img src="http://materializecss.com/res/materialize.svg" width="150">
</a>
</p>
<h3 align="center">MaterializeCSS</h3>
<h3 align="center">MaterializeCSS</h3>
<p align="center">
Materialize, a CSS Framework based on material design.
<br>
<a href="http://materializecss.com/"><strong>-- Browse the docs --</strong></a>
<br>
<br>
<a href="https://travis-ci.org/Dogfalo/materialize">
<img src="https://travis-ci.org/Dogfalo/materialize.svg?branch=master" alt="Travis CI badge">
</a>
<a href="https://badge.fury.io/js/materialize-css">
<img src="https://badge.fury.io/js/materialize-css.svg" alt="npm version badge">
</a>
<a href="https://cdnjs.com/libraries/materialize">
<img src="https://img.shields.io/cdnjs/v/materialize.svg" alt="CDNJS version badge">
</a>
<a href="https://david-dm.org/Dogfalo/materialize">
<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">
<p align="center">
Materialize, a CSS Framework based on material design.
<br>
<a href="http://materializecss.com/"><strong>-- Browse the docs --</strong></a>
<br>
<br>
<a href="https://travis-ci.org/Dogfalo/materialize">
<img src="https://travis-ci.org/Dogfalo/materialize.svg?branch=master" alt="Travis CI badge">
</a>
<a href="https://badge.fury.io/js/materialize-css">
<img src="https://badge.fury.io/js/materialize-css.svg" alt="npm version badge">
</a>
<a href="https://cdnjs.com/libraries/materialize">
<img src="https://img.shields.io/cdnjs/v/materialize.svg" alt="CDNJS version badge">
</a>
<a href="https://david-dm.org/Dogfalo/materialize">
<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>
</p>
## Table of Contents
......@@ -43,12 +44,12 @@
## Quickstart:
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.
- Clone the repo: `git clone https://github.com/Dogfalo/materialize.git`
- Include the files via [cdnjs](https://cdnjs.com/libraries/materialize). More [here](http://materializecss.com/getting-started.html).
- Install with [npm](https://www.npmjs.com): `npm install materialize-css`
- [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` (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). ([Beta](https://cdnjs.com/libraries/materialize/1.0.0-beta))
- 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 [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
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
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
Code copyright 2017 Materialize. Code released under the MIT license.
Code Copyright 2018 Materialize. Code released under the MIT license.
(function ($) {
(function($) {
'use strict';
let _defaults = {
......@@ -6,12 +6,12 @@
limit: Infinity, // Limit of results the autocomplete shows
onAutocomplete: null, // Callback for when autocompleted
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);
}
};
/**
* @class
*
......@@ -49,6 +49,7 @@
this.oldVal;
this.$inputField = this.$el.closest('.input-field');
this.$active = $();
this._mousedown = false;
this._setupDropdown();
this._setupEventHandlers();
......@@ -86,16 +87,31 @@
this._handleInputBlurBound = this._handleInputBlur.bind(this);
this._handleInputKeyupAndFocusBound = this._handleInputKeyupAndFocus.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('keyup', this._handleInputKeyupAndFocusBound);
this.el.addEventListener('focus', this._handleInputKeyupAndFocusBound);
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') {
this.container.addEventListener('touchstart', this._handleContainerMousedownAndTouchstartBound);
this.container.addEventListener(
'touchstart',
this._handleContainerMousedownAndTouchstartBound
);
this.container.addEventListener('touchend', this._handleContainerMouseupAndTouchendBound);
}
}
......@@ -107,10 +123,22 @@
this.el.removeEventListener('keyup', this._handleInputKeyupAndFocusBound);
this.el.removeEventListener('focus', this._handleInputKeyupAndFocusBound);
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') {
this.container.removeEventListener('touchstart', this._handleContainerMousedownAndTouchstartBound);
this.container.removeEventListener(
'touchstart',
this._handleContainerMousedownAndTouchstartBound
);
this.container.removeEventListener(
'touchend',
this._handleContainerMouseupAndTouchendBound
);
}
}
......@@ -119,8 +147,22 @@
*/
_setupDropdown() {
this.container = document.createElement('ul');
this.container.id = `autocomplete-options-${M.guid()}`;
$(this.container).addClass('autocomplete-content dropdown-content');
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 @@
* Handle Input Blur
*/
_handleInputBlur() {
this._removeAutocomplete();
if (!this._mousedown) {
this.close();
this._resetAutocomplete();
}
}
/**
......@@ -150,20 +195,14 @@
let val = this.el.value.toLowerCase();
// Don't capture enter or arrow key usage.
if (e.keyCode === 13 ||
e.keyCode === 38 ||
e.keyCode === 40) {
if (e.keyCode === 13 || e.keyCode === 38 || e.keyCode === 40) {
return;
}
// Check if the input isn't empty
if (this.oldVal !== val) {
this._removeAutocomplete();
if (val.length >= this.options.minLength) {
this.isOpen = true;
this._renderDropdown(this.options.data, val);
}
// Check if focus triggered by tab
if (this.oldVal !== val && (M.tabPressed || e.type !== 'focus')) {
this.open();
}
// Update oldVal
......@@ -183,8 +222,10 @@
numItems = $(this.container).children('li').length;
// select element on Enter
if (keyCode === 13 && this.activeIndex >= 0) {
liElement = $(this.container).children('li').eq(this.activeIndex);
if (keyCode === M.keys.ENTER && this.activeIndex >= 0) {
liElement = $(this.container)
.children('li')
.eq(this.activeIndex);
if (liElement.length) {
this.selectOption(liElement);
e.preventDefault();
......@@ -193,34 +234,49 @@
}
// Capture up and down key
if (keyCode === 38 || keyCode === 40) {
if (keyCode === M.keys.ARROW_UP || keyCode === M.keys.ARROW_DOWN) {
e.preventDefault();
if (keyCode === 38 &&
this.activeIndex > 0) {
if (keyCode === M.keys.ARROW_UP && this.activeIndex > 0) {
this.activeIndex--;
}
if (keyCode === 40 &&
this.activeIndex < (numItems - 1)) {
if (keyCode === M.keys.ARROW_DOWN && this.activeIndex < numItems - 1) {
this.activeIndex++;
}
this.$active.removeClass('active');
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');
}
}
}
/**
* Handle Input Click
* @param {Event} e
*/
_handleInputClick(e) {
this.open();
}
/**
* Handle Container Mousedown and Touchstart
* @param {Event} e
*/
_handleContainerMousedownAndTouchstart(e) {
let $autocompleteOption = $(e.target).closest('li');
this.selectOption($autocompleteOption);
this._mousedown = true;
}
/**
* Handle Container Mouseup and Touchend
* @param {Event} e
*/
_handleContainerMouseupAndTouchend(e) {
this._mousedown = false;
}
/**
......@@ -228,12 +284,17 @@
*/
_highlight(string, $el) {
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,
beforeMatch = $el.text().slice(0, matchStart),
matchText = $el.text().slice(matchStart, 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) {
$el.prepend(img);
}
......@@ -248,16 +309,14 @@
}
/**
* Remove autocomplete elements
* Reset autocomplete elements
*/
_removeAutocomplete() {
_resetAutocomplete() {
$(this.container).empty();
this._resetCurrentElement();
this.oldVal = null;
$(this.container).css({
display: ''
});
this.isOpen = false;
this._mousedown = false;
}
/**
......@@ -268,10 +327,11 @@
let text = el.text().trim();
this.el.value = text;
this.$el.trigger('change');
this._removeAutocomplete();
this._resetAutocomplete();
this.close();
// Handle onAutocomplete callback.
if (typeof (this.options.onAutocomplete) === 'function') {
if (typeof this.options.onAutocomplete === 'function') {
this.options.onAutocomplete.call(this, text);
}
}
......@@ -282,14 +342,13 @@
* @param {String} val current input value
*/
_renderDropdown(data, val) {
this._removeAutocomplete();
this._resetAutocomplete();
let matchingData = [];
// Gather all matching data
for (let key in data) {
if (data.hasOwnProperty(key) &&
key.toLowerCase().indexOf(val) !== -1) {
if (data.hasOwnProperty(key) && key.toLowerCase().indexOf(val) !== -1) {
// Break if past limit
if (this.count >= this.options.limit) {
break;
......@@ -306,21 +365,25 @@
}
// Sort
let sortFunctionBound = (a, b) => {
return this.options.sortFunction(a.key.toLowerCase(), b.key.toLowerCase(), val.toLowerCase());
};
matchingData.sort(sortFunctionBound);
$(this.container).css({
display: 'block'
});
if (this.options.sortFunction) {
let sortFunctionBound = (a, b) => {
return this.options.sortFunction(
a.key.toLowerCase(),
b.key.toLowerCase(),
val.toLowerCase()
);
};
matchingData.sort(sortFunctionBound);
}
// Render
for (let i = 0; i < matchingData.length; i++) {
let entry = matchingData[i];
let $autocompleteOption = $('<li></li>');
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 {
$autocompleteOption.append('<span>' + entry.key + '</span>');
}
......@@ -328,7 +391,35 @@
$(this.container).append($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 @@
if (M.jQueryLoaded) {
M.initializeJqueryWrapper(Autocomplete, 'autocomplete', 'M_Autocomplete');
}
}(cash));
})(cash);
(function ($, anim) {
(function($, anim) {
'use strict';
let _defaults = {
......@@ -41,17 +41,15 @@
this.$floatingBtnsReverse = this.$el.find('ul .btn-floating').reverse();
this.offsetY = 0;
this.offsetX = 0;
this.$el.addClass(`direction-${this.options.direction}`);
if (this.options.direction === 'top') {
this.$el.addClass('direction-top');
this.offsetY = 40;
} else if (this.options.direction === 'right') {
this.$el.addClass('direction-right');
this.offsetX = -40;
} else if (this.options.direction === 'bottom') {
this.$el.addClass('direction-bottom');
this.offsetY = -40;
} else {
this.$el.addClass('direction-left');
this.offsetX = 40;
}
this._setupEventHandlers();
......@@ -92,7 +90,6 @@
if (this.options.hoverEnabled && !this.options.toolbarEnabled) {
this.el.addEventListener('mouseenter', this._handleOpenBound);
this.el.addEventListener('mouseleave', this._handleCloseBound);
} else {
this.el.addEventListener('click', this._handleFABClickBound);
}
......@@ -105,7 +102,6 @@
if (this.options.hoverEnabled && !this.options.toolbarEnabled) {
this.el.removeEventListener('mouseenter', this._handleOpenBound);
this.el.removeEventListener('mouseleave', this._handleCloseBound);
} else {
this.el.removeEventListener('click', this._handleFABClickBound);
}
......@@ -117,7 +113,6 @@
_handleFABClick() {
if (this.isOpen) {
this.close();
} else {
this.open();
}
......@@ -178,7 +173,7 @@
anim({
targets: el,
opacity: 1,
scale: [.4, 1],
scale: [0.4, 1],
translateY: [this.offsetY, 0],
translateX: [this.offsetX, 0],
duration: 275,
......@@ -198,7 +193,7 @@
anim({
targets: el,
opacity: 0,
scale: .4,
scale: 0.4,
translateY: this.offsetY,
translateX: this.offsetX,
duration: 175,
......@@ -222,7 +217,7 @@
let fabColor = this.$anchor.css('background-color');
this.$anchor.append(backdrop);
this.offsetX = btnRect.left - (windowWidth / 2) + (btnRect.width / 2);
this.offsetX = btnRect.left - windowWidth / 2 + btnRect.width / 2;
this.offsetY = windowHeight - btnRect.bottom;
scaleFactor = windowWidth / backdrop[0].clientWidth;
this.btnBottom = btnRect.bottom;
......@@ -247,11 +242,11 @@
'background-color': fabColor
});
setTimeout(() => {
this.$el.css({
transform: '',
transition: 'transform .2s cubic-bezier(0.550, 0.085, 0.680, 0.530), background-color 0s linear .2s'
transition:
'transform .2s cubic-bezier(0.550, 0.085, 0.680, 0.530), background-color 0s linear .2s'
});
this.$anchor.css({
overflow: 'visible',
......@@ -268,9 +263,12 @@
transform: 'scale(' + scaleFactor + ')',
transition: 'transform .2s cubic-bezier(0.550, 0.055, 0.675, 0.190)'
});
this.$menu.children('li').children('a').css({
opacity: 1
});
this.$menu
.children('li')
.children('a')
.css({
opacity: 1
});
// Scroll to close.
this._handleDocumentClickBound = this._handleDocumentClick.bind(this);
......@@ -289,7 +287,7 @@
let backdrop = this.$el.find('.fab-backdrop');
let fabColor = this.$anchor.css('background-color');
this.offsetX = this.btnLeft - (windowWidth / 2) + (this.btnWidth / 2);
this.offsetX = this.btnLeft - windowWidth / 2 + this.btnWidth / 2;
this.offsetY = windowHeight - this.btnBottom;
// Hide backdrop
......@@ -305,9 +303,12 @@
transform: 'scale(0)',
'background-color': fabColor
});
this.$menu.children('li').children('a').css({
opacity: ''
});
this.$menu
.children('li')
.children('a')
.css({
opacity: ''
});
setTimeout(() => {
backdrop.remove();
......@@ -344,7 +345,10 @@
M.FloatingActionButton = FloatingActionButton;
if (M.jQueryLoaded) {
M.initializeJqueryWrapper(FloatingActionButton, 'floatingActionButton', 'M_FloatingActionButton');
M.initializeJqueryWrapper(
FloatingActionButton,
'floatingActionButton',