Skip to content
This repository has been archived by the owner on Dec 7, 2021. It is now read-only.

Commit

Permalink
v1.0.3
Browse files Browse the repository at this point in the history
  • Loading branch information
Mobius1 committed Oct 10, 2016
1 parent 2dbb058 commit d577fde
Show file tree
Hide file tree
Showing 2 changed files with 85 additions and 89 deletions.
170 changes: 83 additions & 87 deletions selectr.js
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
/*!
* Selectr 1.0.2
* Selectr 1.0.3
* http://mobiuswebdesign.co.uk/plugins/selectr
*
* Released under the MIT license
Expand Down Expand Up @@ -115,9 +115,6 @@ String.prototype.includes||(String.prototype.includes=function(a,b){"use strict"
this.activeIdx = 0;
this.remote = false;

this.scrollX = window.scrollX || window.pageXOffset;
this.scrollY = window.scrollY || window.pageYOffset;

this.options = extend(defaults, opts);

this.hasTemplate = this.options.hasOwnProperty('render') && typeof this.options.render === 'function';
Expand Down Expand Up @@ -313,7 +310,8 @@ String.prototype.includes||(String.prototype.includes=function(a,b){"use strict"

// Set the placeholder
var placeholder = this.options.placeholder || this.elem.getAttribute('placeholder') || 'Choose...';
_append(this.selected, _newElement('div', { class: 'selectr-placeholder', html: placeholder}));
this.placeElem = _newElement('div', { class: 'selectr-placeholder', html: placeholder});
_append(this.selected, this.placeElem);

if ( (!this.elem.multiple && !!this.elem.value.length) || (this.elem.multiple && !!this.txt.children.length) ) {
_addClass(this.container, 'has-selected');
Expand Down Expand Up @@ -374,90 +372,107 @@ String.prototype.includes||(String.prototype.includes=function(a,b){"use strict"
{
var _this = this;

// Prevent text selection
_addListener(_this.selected, 'mousedown', function(e){ e.preventDefault(); });
_addListener(_this.optsOptions, 'mousedown', function(e){ e.preventDefault(); });
this.handleClickEvents = this.handleEvents.bind(this);
this.handleDismiss = this.dismiss.bind(this);
this.handleNavigate = this.navigate.bind(this);

_addListener(_this.selected, 'click', _this.toggleOptions.bind(_this));
_addListener(_this.optsOptions, 'click', function(event) {
_this.selectOption(event);
});
// Global listener
_addListener(this.container, 'click', this.handleClickEvents);

if ( _this.elem.multiple ) {
_addListener(_this.txt, 'click', _this.removeTags.bind(_this));
}
// Prevent text selection
_addListener(this.selected, 'mousedown', function(e){ e.preventDefault(); });
_addListener(this.optsOptions, 'mousedown', function(e){ e.preventDefault(); });

if ( _this.options.searchable ) {
_addListener(_this.input, 'keyup', _this.search.bind(_this));
_addListener(_this.clear, 'click', _this.clearOptions.bind(_this));
if ( this.options.searchable ) {
_addListener(this.input, 'keyup', this.search.bind(this));
_addListener(this.clear, 'click', this.clearOptions.bind(this));
}

_addListener(document, 'click', this.handleDismiss);
_addListener(document, 'keydown', this.handleNavigate);

_this.handleDismiss = _this.dismiss.bind(_this);
_this.handleNavigate = _this.navigate.bind(_this);
this.update = _debounce(function() {
_this.setDimensions();
}, 50);

_addListener(document, 'click', _this.handleDismiss);
_addListener(document, 'keydown', _this.handleNavigate);
_addListener(window, 'resize', this.update);
_addListener(window, 'scroll', this.update);
},

_this.resize = _debounce(function() {
_this.setDimensions();
}, 100);
handleEvents: function(e)
{
e = e || window.event;

var target = e.target;

// Click on placeholder or selected text
if ( target === this.txt || target === this.placeElem ) {
target = this.placeElem.parentNode;
}

// Open / close dropdown
if ( target === this.selected ) {
if ( !this.disabled ) {
this.toggleOptions();
}
}

_addListener(window, 'resize', _this.resize);
// Select option
if ( _hasClass(target, 'selectr-option') ) {
this.selectOption(e);
}

// Remove tag button
if ( _hasClass(target, 'selectr-tag-remove') ) {
this.removeTags(e);
}

_addListener(window, 'scroll', _this.resize);
e.preventDefault();
},

navigate: function(event)
navigate: function(e)
{
event = event || window.event;
e = e || window.e;

var _this = this, keyCode = event.keyCode;
var _this = this, keyCode = e.keyCode;

// Filter out the keys we don't want
if ( !_this.opened || (keyCode !== 13 && keyCode !== 38 && keyCode !== 40) ) return;

event.preventDefault();
e.preventDefault();

var list = this.searching ? this.searchList : this.list, dir;

switch (keyCode) {
case 13: // select option
_this.selectOption(event);
return;
break;
case 38: // Scroll up options
dir = 'up';
if ( _this.activeIdx > 0 ) {
_this.activeIdx--;
}
break;
case 40: // scroll down options
dir = 'down';
if ( _this.activeIdx < list.length - 1 ) {
_this.activeIdx++;
};
case 13:
return void _this.selectOption(e);
case 38:
dir = "up", _this.activeIdx > 0 && _this.activeIdx--;
break;
case 40:
dir = "down", _this.activeIdx < list.length - 1 && _this.activeIdx++
}

var nextElem = list[_this.activeIdx];
var nextRect = nextElem.getBoundingClientRect();
var optsTop = _this.optsOptions.scrollTop;
var scrollY = window.scrollY || window.pageYOffset;
var offset = _this.optsRect.top + scrollY;

if ( dir === 'up' ) {
var currentOffset = _this.optsRect.top;
var nextTop = nextRect.top + _this.scrollY;
var nextOffset = _this.optsOptions.scrollTop + (nextTop - currentOffset);
var currentOffset = offset;
var nextTop = nextRect.top + scrollY;
var nextOffset = optsTop + (nextTop - currentOffset);

if (_this.activeIdx === 0) {
_this.optsOptions.scrollTop = 0;
} else if (nextTop - currentOffset < 0) {
_this.optsOptions.scrollTop = nextOffset;
}
} else {
var currentOffset = _this.optsRect.top +
_this.optsOptions.offsetHeight;
var nextBottom = nextRect.top + _this.scrollY + nextElem.offsetHeight;
var nextOffset = _this.optsOptions.scrollTop + nextBottom - currentOffset;
var currentOffset = offset + _this.optsRect.height;
var nextBottom = nextRect.top + scrollY + nextRect.height;
var nextOffset = optsTop + nextBottom - currentOffset;

if (_this.activeIdx === 0) {
_this.optsOptions.scrollTop = 0;
Expand All @@ -466,23 +481,16 @@ String.prototype.includes||(String.prototype.includes=function(a,b){"use strict"
}
}


// Set the class for highlighting
forEach(list, function(i, opt) {
if ( i === _this.activeIdx ) {
_addClass(opt, 'active');
} else {
_removeClass(opt, 'active');
}
});
_removeClass(_this.optsOptions.getElementsByClassName('active')[0], 'active');
_addClass(list[_this.activeIdx], 'active');
},

search: function(event)
search: function(e)
{
var _this = this;
var value = _this.input.value;
var len = value.length;
var navigating = event.keyCode === 38 || event.keyCode === 40;
var navigating = e.keyCode === 38 || e.keyCode === 40;

if ( ( len < this.options.minChars && len >= this.lastLen ) || navigating ) return;

Expand Down Expand Up @@ -533,15 +541,13 @@ String.prototype.includes||(String.prototype.includes=function(a,b){"use strict"
this.lastLen = this.input.value.length;
},

selectOption: function(event)
selectOption: function(e)
{
event = event || window.event;

var _this = this;
var selected = event.target;
var selected = e.target;
var list = this.searching ? this.searchList : this.list;

if ( event.type === 'keydown' ) {
if ( e.type === 'keydown' ) {
selected = list[_this.activeIdx];
}

Expand Down Expand Up @@ -811,21 +817,14 @@ String.prototype.includes||(String.prototype.includes=function(a,b){"use strict"

},

removeTags: function(event)
removeTags: function(e)
{
if ( this.disabled ) return;

event = event || window.event;

var target = event.target;
var nodeName = target.nodeName;

if ( nodeName !== 'BUTTON' ) return;
e.preventDefault();
e.stopPropagation();

event.preventDefault();
event.stopPropagation();

this.removeTag(target.parentNode);
this.removeTag(e.target.parentNode);
},

removeTag: function(tag)
Expand Down Expand Up @@ -859,8 +858,6 @@ String.prototype.includes||(String.prototype.includes=function(a,b){"use strict"
{
var _this = this, open = this.container.classList.contains('open');

if ( this.disabled ) return;

if ( open ) {
this.close()
} else {
Expand Down Expand Up @@ -1042,22 +1039,21 @@ String.prototype.includes||(String.prototype.includes=function(a,b){"use strict"
w += 'px';
}

this.container.style.cssText += 'width: '+w+'; ';

this.scrollX = window.scrollX || window.pageXOffset;
this.scrollY = window.scrollY || window.pageYOffset;

if ( this.opened ) {
this.elemRect = this.elem.getBoundingClientRect();
var bottom = this.elemRect.top + this.elemRect.height + 230;
var wh = window.innerHeight;

this.close();

if ( bottom > wh ) {
_addClass(this.container, 'inverted');
} else {
_removeClass(this.container, 'inverted');
}
}

this.container.style.cssText += 'width: '+w+'; ';
},

emit: function(event)
Expand Down
Loading

0 comments on commit d577fde

Please sign in to comment.