Open ParadoxDesign opened 11 years ago
Do you think about a setting you can set via javascript for example?
yeah. (if i understood what you meant).
for example, you wrote about your plugin in contrast to dropkick js. with dropkick i just add $('.myclass').dropkick(); and it applies it to the "<select class="myclass"
I was trying to do something similar with your plugin, as I can add a class to the select but not sure how to add the data-template via javascript. if you know how to do that and that would be an easier approche, let me know.
I will fix that for you and let you know when it's done.
Wow thanks!
(love Frontify btw. why did you change the name?)
Nice, glad you like it. Well, we had to change the name because of other products with the same name and some handicaps according to trademark as well as we wanted to represent the vision (to front-end development) a little more.
ahh. makes sense.
/**
@author Roger Dudler roger.dudler@gmail.com */ (function ($) { $.fn.dropdown = function(options) {
// Default settings
var settings = $.extend({
'selected': '.selected',
'items': 'ul',
'item': 'li',
'openClass': 'open',
'changed': function(data) {}
}, options);
return this.each(function() {
var $this = $(this);
// hide select element
$this.hide();
// prepare dropdown template
var template = doT.template($($this.data('template')).text());
var templateSelected = doT.template($($this.data('template') + '-selected').text());
var data = { "selected": null, "items": [], "classes": $this.data('classes') };
var selectedIndex = 0;
// parse data for dropdown items
$.each($this.find('option'), function(key, option) {
var $option = $(option);
var item = {
'value': $option.attr('value'),
'label': $option.text(),
'selected': $option.is(':selected')
};
// read data attributes
var dataAttributes = $option.data();
$.each(dataAttributes, function(name, value) {
item[name] = value;
});
if ($option.is(':selected')) {
data.selected = item;
selectedIndex = key;
}
data.items.push(item);
});
// render dropdown
var $dropdown = $(template(data));
$dropdown.attr({'data-id':$this.attr('id')});
$dropdown.addClass($this.attr('class'));
var $items = $dropdown.find(settings.items);
var $selected = $dropdown.find('> ' + settings.selected);
// handle dropdown toggling
$selected.on('mousedown', function() {
$dropdown.focus();
if ($items.is(':visible')) {
_closeDropdown();
} else {
_openDropdown();
}
return false;
});
$dropdown.on('focus', function() {
$this.addClass('focus');
});
$dropdown.on('blur', function() {
$this.removeClass('focus');
_closeDropdown();
});
$dropdown.on('keydown', function(e) {
var next = null;
switch (e.keyCode) {
case 40: // down
if (!$dropdown.hasClass(settings.openClass)) {
_openDropdown();
next = $items.find('.selected');
} else {
next = $items.find('.hover').next(settings.item).first();
if (!next.length) {
next = $items.find(settings.item).first();
}
}
_selectItem(next, true);
e.preventDefault();
break;
case 38: // up
if (!$dropdown.hasClass(settings.openClass)) {
_openDropdown();
next = $items.find('.selected');
} else {
next = $items.find('.hover').prev(settings.item).first();
if (!next.length) {
next = $items.find(settings.item).last();
}
}
_selectItem(next, true);
e.preventDefault();
break;
case 13:
if (!$dropdown.hasClass(settings.openClass)) {
_openDropdown();
} else {
var item = $items.find('.hover').first();
if (item) {
_chooseItem(item);
}
}
e.preventDefault();
break;
}
});
// hide selected item from list
$items.find('[data-index=' + selectedIndex + ']').addClass('selected');
// handle clicks on items
$items.on('mousedown', settings.item, function() {
_chooseItem(this);
return false;
});
$items.on('mouseover', settings.item, function() {
_selectItem(this, false);
});
function _selectItem(option, reveal) {
var $option = $(option);
$items.find(settings.item).removeClass('hover');
$option.addClass('hover');
if (reveal) {
$option.parent().scrollTop($option.position().top-$option.height());
}
}
function _chooseItem(option) {
var index = $(option).data('index');
var item = data.items[index];
$dropdown.find('> ' + settings.selected).html(templateSelected(item));
$items.find('[data-index=' + selectedIndex + ']').removeClass('selected');
selectedIndex = index;
$(option).addClass('selected');
$this.val(item.value);
settings.changed(item);
_closeDropdown();
}
function _openDropdown() {
$items.show();
$dropdown.addClass(settings.openClass);
}
function _closeDropdown() {
$items.hide();
$dropdown.removeClass(settings.openClass);
}
// insert dropdown into dom tree
return $this.before($dropdown);
});
}; })(jQuery); //I made a small modification placed id in data-id and added classes to dropdown ui
I am loving this plugin I just found it.
@Casper1131 can you please create a pull request?
Sorry new to github, I just did. Sorry for late response
Great plugin!
I am trying to implement this on a select that is generated by the formidable form plugin who's
Do i have to have the data-template="#dropdown" in there? is there another way to implement it by targeting a class or ID?
Thanks