Apply to existing select i can't modify

[ParadoxDesign]

Great plugin!

I am trying to implement this on a select that is generated by the formidable form plugin who's I can't modify (and rather not, for plugin updates issues).

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

rogerdudler commented 11 years ago

Do you think about a setting you can set via javascript for example?

ParadoxDesign commented 11 years ago

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.

rogerdudler commented 11 years ago

I will fix that for you and let you know when it's done.

ParadoxDesign commented 11 years ago

Wow thanks!

(love Frontify btw. why did you change the name?)

rogerdudler commented 11 years ago

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.

ParadoxDesign commented 11 years ago

ahh. makes sense.

Casper1131 commented 11 years ago

/**

• dropdown.dot.js *
• A super-flexible and clean JQuery Dropdown Plugin based on dot.js Templates. *

• @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

Casper1131 commented 11 years ago

I am loving this plugin I just found it.

rogerdudler commented 11 years ago

@Casper1131 can you please create a pull request?

Casper1131 commented 11 years ago

Sorry new to github, I just did. Sorry for late response

• © Githubissues.
• Githubissues is a development platform for aggregating issues.

[rogerdudler]

Do you think about a setting you can set via javascript for example?

[ParadoxDesign]

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.

[rogerdudler]

I will fix that for you and let you know when it's done.

[ParadoxDesign]

Wow thanks!

(love Frontify btw. why did you change the name?)

[rogerdudler]

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.

[ParadoxDesign]

ahh. makes sense.

[Casper1131]

/**

• dropdown.dot.js *
• A super-flexible and clean JQuery Dropdown Plugin based on dot.js Templates. *

• @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

[Casper1131]

I am loving this plugin I just found it.

[rogerdudler]

@Casper1131 can you please create a pull request?

[Casper1131]

Sorry new to github, I just did. Sorry for late response