Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Review Select component #149

Merged
merged 3 commits into from
Jun 5, 2018
Merged

Review Select component #149

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
bf66973
Review Select component
gesposito Jun 4, 2018
0ebaf2a
Sistemato riferimento a util.js, rimossi riferimenti non usati.
francescozaia Jun 5, 2018
66cbcff
Fix spazi vuoti
francescozaia Jun 5, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 1 addition & 5 deletions src/js/plugins/autocomplete.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,11 +58,7 @@ $.fn.autocomplete = function (options) {
$autocomplete.empty();
}

if (q.length === 0) {
$('.autocomplete-clear').css('visibility', 'hidden');
} else {
$('.autocomplete-clear').css('visibility', 'visible');
}
$('.autocomplete-clear').toggle(q.length !== 0);
});

$autocomplete.on('click', 'li', function () {
Expand Down
2 changes: 1 addition & 1 deletion src/js/plugins/cookiebar.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import $ from 'jquery'
import Util from './util'
import Util from 'node_modules/bootstrap/js/src/util.js'

/**
* --------------------------------------------------------------------------
Expand Down
138 changes: 81 additions & 57 deletions src/js/plugins/custom-select.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,4 @@
import Util from './util'

/**
* --------------------------------------------------------------------------
* Bootstrap (v4.0.0): Select.js
* --------------------------------------------------------------------------
*/
import $ from 'jquery'

const Select = (($) => {

Expand All @@ -15,7 +9,7 @@ const Select = (($) => {
*/

const NAME = 'custom-select'
const DATA_KEY = `bs.custom-select`
const DATA_KEY = 'bs.custom-select'
const VERSION = 'v4.0.0'
const EVENT_KEY = `.${DATA_KEY}`
const DATA_API_KEY = '.data-api'
Expand All @@ -40,7 +34,7 @@ const Select = (($) => {

class Select {

constructor(element, config) {
constructor(element) {

this._elements = []
this._element = element
Expand Down Expand Up @@ -77,16 +71,16 @@ const Select = (($) => {
const uniqueID = this._guid();

var filterQuery = [],

wrapper = $('<div class="select-wrapper"></div>'),

selectChildren = $select.children('option, optgroup'),
selectChildren = $select.children('option, optgroup'),
valuesSelected = [];

this._isMultiple = Boolean($select.attr('multiple'));
this._isSearchable = Boolean($select.attr('searchable'));

this._customElement = $(`<ul id="select-options-${uniqueID}" class="dropdown-menu ${this._isMultiple ? 'multiple-select-dropdown' : ''}"></ul>`)
this._customElement = $(`
<ul id="select-options-${uniqueID}" class="dropdown-menu ${this._isMultiple ? 'multiple-select-dropdown' : ''}"></ul>
`)

var label = $select.find('option:selected').html() || $select.find('option:first').html() || '';

Expand All @@ -106,25 +100,32 @@ const Select = (($) => {

if (selectChildren && selectChildren.length) {
selectChildren.each(function () {
if ($(this).is('option')) {
const $this = $(this);

if ($this.is('option')) {
if (that._isMultiple) {
that._appendOptionWithIcon($select, $(this), 'multiple');
that._appendOptionWithIcon($select, $this, 'multiple');
} else {
that._appendOptionWithIcon($select, $(this));
that._appendOptionWithIcon($select, $this);
}
} else if ($(this).is('optgroup')) {
that._customElement.append($('<li class="optgroup"><span>' + $(this).attr('label') + '</span></li>'));

$(this).children('option').each(function () {
} else if ($this.is('optgroup')) {
that._customElement.append($(`
<li class="optgroup">
<span>${$this.attr('label')}</span>
</li>
`));

$this.children('option').each(function () {
that._appendOptionWithIcon($select, $(this), 'optgroup-option');
});
}
});
}

this._customElement.find('li:not(.optgroup)').each(function (i) {
$(this).click(function (e) {
if (!$(this).hasClass('disabled') && !$(this).hasClass('optgroup')) {
const $this = $(this);
$this.click(function (e) {
if (!$this.hasClass('disabled') && !$this.hasClass('optgroup')) {
var selected = true;

if (that._isMultiple) {
Expand All @@ -134,23 +135,23 @@ const Select = (($) => {
var optgroup = $select.find('optgroup').length
if (that._isSearchable) {
if (optgroup) {
selected = that._toggleEntryFromArray(valuesSelected, $(this).index() - $(this).prevAll('.optgroup').length - 1, $select)
selected = that._toggleEntryFromArray(valuesSelected, $this.index() - $this.prevAll('.optgroup').length - 1, $select)
} else {
selected = that._toggleEntryFromArray(valuesSelected, $(this).index() - 1, $select)
selected = that._toggleEntryFromArray(valuesSelected, $this.index() - 1, $select)
}
} else if (optgroup) {
selected = that._toggleEntryFromArray(valuesSelected, $(this).index() - $(this).prevAll('.optgroup').length, $select)
selected = that._toggleEntryFromArray(valuesSelected, $this.index() - $this.prevAll('.optgroup').length, $select)
} else {
selected = that._toggleEntryFromArray(valuesSelected, $(this).index(), $select)
selected = that._toggleEntryFromArray(valuesSelected, $this.index(), $select)
}
$newSelect.trigger('focus');
} else {
that._customElement.find('li').removeClass('active');
$(this).toggleClass('active');
$newSelect.val($(this).text());
$this.toggleClass('active');
$newSelect.val($this.text());
}

that._activateOption(that._customElement, $(this));
that._activateOption(that._customElement, $this);
$select.find('option').eq(i).prop('selected', selected);
$select.trigger('change');
}
Expand All @@ -168,7 +169,9 @@ const Select = (($) => {

var sanitizedLabelHtml = label.replace(/"/g, '&quot;');

var $newSelect = $('<input type="text" class="dropdown select-dropdown" data-toggle="dropdown" readonly="true" ' + ($select.is(':disabled') ? 'disabled' : '') + ' data-activates="select-options-' + uniqueID + '" value="' + sanitizedLabelHtml + '"/>');
const $newSelect = $(`
<input type="text" class="dropdown select-dropdown" data-toggle="dropdown" readonly="true" ${$select.is(':disabled') ? 'disabled' : ''} data-activates="select-options-${uniqueID}" value="${sanitizedLabelHtml}" />
`);
$select.before($newSelect);
$newSelect.before(dropdownIcon).addClass($select.attr('class').replace('custom-select', ''));

Expand Down Expand Up @@ -209,7 +212,7 @@ const Select = (($) => {
}

$newSelect.on({
focus: function focus(e) {
focus: function focus() {
if ($('ul.select-dropdown').not(that._customElement[0]).is(':visible')) {
$('input.select-dropdown').trigger('close');
}
Expand All @@ -225,24 +228,27 @@ const Select = (($) => {
click: function click(e) {
e.stopPropagation();
},
blur: function blur(e) {
blur: function blur() {
if (!that._isMultiple && !that._isSearchable) {
$(this).trigger('close');
}
that._customElement.find('li.selected').removeClass('selected');
},
keydown: function keydown(e) {
if (e.which == 9) {
// TAB
if (e.which === 9) {
$newSelect.trigger('close');
return;
}

if (e.which == 40 && !that._customElement.is(':visible')) {
// DOWN
if (e.which === 40 && !that._customElement.is(':visible')) {
$newSelect.trigger('open');
return;
}

if (e.which == 13 && !that._customElement.is(':visible')) {
// Enter
if (e.which === 13 && !that._customElement.is(':visible')) {
return;
}

Expand All @@ -263,7 +269,8 @@ const Select = (($) => {
}
}

if (e.which == 13) {
// Enter
if (e.which === 13) {
var activeOption = that._customElement.find('li.selected:not(.disabled)')[0];
if (activeOption) {
$(activeOption).trigger('click');
Expand All @@ -273,18 +280,21 @@ const Select = (($) => {
}
}

if (e.which == 40) {
// DOWN
if (e.which === 40) {
newOption = (that._customElement.find('li.selected').length) ?
that._customElement.find('li.selected').next('li:not(.disabled)')[0] :
that._customElement.find('li:not(.disabled)')[0];
that._activateOption(this._customElement, newOption);
that._activateOption(that._customElement, newOption);
}

if (e.which == 27) {
// Escape
if (e.which === 27) {
$newSelect.trigger('close');
}

if (e.which == 38) {
// UP
if (e.which === 38) {
newOption = that._customElement.find('li.selected').prev('li:not(.disabled)')[0];
if (newOption) {
that._activateOption(that._customElement, newOption);
Expand All @@ -297,7 +307,7 @@ const Select = (($) => {
}
});

$(window).on('click', function (e) {
$(window).on('click', function () {
(that._isMultiple || that._isSearchable) && (that._optionsHover || $newSelect.trigger('close'));
});

Expand All @@ -313,23 +323,29 @@ const Select = (($) => {

_setSearchableOption() {
const $select = $(this._element)
var element = $(`<span class="search-wrap"><input type="text" class="search select-dropdown-search" placeholder="${$select.attr('searchable')}"></span>`)
var element = $(`
<span class="search-wrap">
<input type="text" class="search select-dropdown-search" placeholder="${$select.attr('searchable')}">
</span>
`)
this._customElement.append(element);
element.find('.search').on('keyup', function (e) {
element.find('.search').on('keyup', function () {

var ul = $(this).closest('ul');
var searchValue = $(this).val();
const $this = $(this);
var ul = $this.closest('ul');
var searchValue = $this.val();

ul.find('li').find('span.filtrable').each(function () {
const $this = $(this);
if (typeof this.outerText === 'string') {
var liValue = this.outerText.toLowerCase()

if (liValue.indexOf(searchValue.toLowerCase()) === -1) {
$(this).hide();
$(this).parent().hide()
$this.hide();
$this.parent().hide()
} else {
$(this).show();
$(this).parent().show()
$this.show();
$this.parent().show()
}
}
})
Expand All @@ -345,7 +361,7 @@ const Select = (($) => {
if (icon_url) {
var classString = '';
if (classes) {
classString = ' class="' + classes + '"';
classString = ` class="${classes}"`;
}
var listDOM = (this._isMultiple) ?
`<li class="${disabledClass}">
Expand All @@ -367,9 +383,17 @@ const Select = (($) => {
}

if (this._isMultiple) {
this._customElement.append($('<li class="' + disabledClass + '"><span class="filtrable"><input type="checkbox"' + disabledClass + '/><label></label>' + option.html() + '</span></li>'));
this._customElement.append($(`
<li class="${disabledClass}">
<span class="filtrable"><input type="checkbox"${disabledClass}/><label></label>${option.html()}</span>
</li>
`));
} else {
this._customElement.append($('<li class="' + disabledClass + optgroupClass + '"><span class="filtrable">' + option.html() + '</span></li>'));
this._customElement.append($(`
<li class="${disabledClass}${optgroupClass}">
<span class="filtrable">${option.html()}</span>
</li>
`));
}
}

Expand All @@ -391,7 +415,7 @@ const Select = (($) => {
for (var i = 0, count = entriesArray.length; i < count; i++) {
var text = select.find('option').eq(entriesArray[i]).text();

i === 0 ? value += text : value += ', ' + text;
i === 0 ? value += text : value += `, ${text}`;
}

if (value === '') {
Expand All @@ -408,12 +432,12 @@ const Select = (($) => {
return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
}

return (S4() + S4() + "-" + S4() + "-4" + S4().substr(0, 3) + "-" + S4() + "-" + S4() + S4() + S4()).toLowerCase();
return (`${S4()}${S4()}-${S4()}-4${S4().substr(0, 3)}-${S4()}-${S4()}${S4()}${S4()}`).toLowerCase();
}

// static

static _jQueryInterface(config) {
static _jQueryInterface() {
return this.each(function () {
var $this = $(this)
var data = $this.data(DATA_KEY)
Expand Down Expand Up @@ -450,11 +474,11 @@ const Select = (($) => {
$.fn[NAME].Constructor = Select
$.fn[NAME].noConflict = function () {
$.fn[NAME] = JQUERY_NO_CONFLICT
return Enter._jQueryInterface
return Select._jQueryInterface
}

return Select

})(jQuery)
})($)

export default Select
2 changes: 0 additions & 2 deletions src/js/plugins/date-picker.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,3 @@
import Util from './util'

/**
* --------------------------------------------------------------------------
* Bootstrap (v4.0.0): DatePicker.js
Expand Down
6 changes: 3 additions & 3 deletions src/scss/custom/_forms.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -92,20 +92,20 @@ input[type="date"], input[type="datetime-local"], input[type="email"], input[typ
background-position: center right !important;
background-repeat: no-repeat !important;
background-size: 45px 45% !important;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='#00cc85' viewBox='0 0 192 512'%3E%3Cpath d='M435.848 83.466L172.804 346.51l-96.652-96.652c-4.686-4.686-12.284-4.686-16.971 0l-28.284 28.284c-4.686 4.686-4.686 12.284 0 16.971l133.421 133.421c4.686 4.686 12.284 4.686 16.971 0l299.813-299.813c4.686-4.686 4.686-12.284 0-16.971l-28.284-28.284c-4.686-4.686-12.284-4.686-16.97 0z'/%3E%3C/svg%3E");
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%2300cc85' viewBox='0 0 192 512'%3E%3Cpath d='M435.848 83.466L172.804 346.51l-96.652-96.652c-4.686-4.686-12.284-4.686-16.971 0l-28.284 28.284c-4.686 4.686-4.686 12.284 0 16.971l133.421 133.421c4.686 4.686 12.284 4.686 16.971 0l299.813-299.813c4.686-4.686 4.686-12.284 0-16.971l-28.284-28.284c-4.686-4.686-12.284-4.686-16.97 0z'/%3E%3C/svg%3E");
}
.custom-select.is-invalid, .form-control.is-invalid, .was-validated .custom-select:invalid, .was-validated .form-control:invalid {
background-position: center right !important;
background-repeat: no-repeat !important;
background-size: 45px 45% !important;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='#f73e5a' viewBox='0 0 384 512'%3E%3Cpath d='M231.6 256l130.1-130.1c4.7-4.7 4.7-12.3 0-17l-22.6-22.6c-4.7-4.7-12.3-4.7-17 0L192 216.4 61.9 86.3c-4.7-4.7-12.3-4.7-17 0l-22.6 22.6c-4.7 4.7-4.7 12.3 0 17L152.4 256 22.3 386.1c-4.7 4.7-4.7 12.3 0 17l22.6 22.6c4.7 4.7 12.3 4.7 17 0L192 295.6l130.1 130.1c4.7 4.7 12.3 4.7 17 0l22.6-22.6c4.7-4.7 4.7-12.3 0-17L231.6 256z'/%3E%3C/svg%3E");
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23f73e5a' viewBox='0 0 384 512'%3E%3Cpath d='M231.6 256l130.1-130.1c4.7-4.7 4.7-12.3 0-17l-22.6-22.6c-4.7-4.7-12.3-4.7-17 0L192 216.4 61.9 86.3c-4.7-4.7-12.3-4.7-17 0l-22.6 22.6c-4.7 4.7-4.7 12.3 0 17L152.4 256 22.3 386.1c-4.7 4.7-4.7 12.3 0 17l22.6 22.6c4.7 4.7 12.3 4.7 17 0L192 295.6l130.1 130.1c4.7 4.7 12.3 4.7 17 0l22.6-22.6c4.7-4.7 4.7-12.3 0-17L231.6 256z'/%3E%3C/svg%3E");
}
.custom-select.warning, .form-control.warning {
background-position: center right !important;
background-repeat: no-repeat !important;
background-size: 25px 45% !important;
border-color: #ff9900;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='#ff9900' viewBox='0 0 192 512'%3E%3Cpath d='M176 432c0 44.112-35.888 80-80 80s-80-35.888-80-80 35.888-80 80-80 80 35.888 80 80zM25.26 25.199l13.6 272C39.499 309.972 50.041 320 62.83 320h66.34c12.789 0 23.331-10.028 23.97-22.801l13.6-272C167.425 11.49 156.496 0 142.77 0H49.23C35.504 0 24.575 11.49 25.26 25.199z'/%3E%3C/svg%3E");
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23ff9900' viewBox='0 0 192 512'%3E%3Cpath d='M176 432c0 44.112-35.888 80-80 80s-80-35.888-80-80 35.888-80 80-80 80 35.888 80 80zM25.26 25.199l13.6 272C39.499 309.972 50.041 320 62.83 320h66.34c12.789 0 23.331-10.028 23.97-22.801l13.6-272C167.425 11.49 156.496 0 142.77 0H49.23C35.504 0 24.575 11.49 25.26 25.199z'/%3E%3C/svg%3E");
}
.custom-select.is-valid~.warning-feedback, .form-control.is-valid~.warning-feedback {
display: block;
Expand Down
Loading