How would I programmatically select a font with the Fontselect jQuery plugin?

Question

I'm using the Fontselect jQuery plugin, and it is working great, but I'd like to select a font from the drop down programmatically anytime I want in my code. It looks like it's using a prototype function, but I can't seem to get access to to it correctly and call it's functions.

The plugin is located here: https://github.com/tommoor/fontselect-jquery-plugin

Answer 1

Because there is no method in order to select a font from the plugin a way to solve it is based on simulating the click and mouse events...

function selectFontAndApplyToEle(fontName, callback) {
    $('div.font-select').find('.fs-results li').removeClass('active');
    var dropEle = $('div.font-select').find('.fs-drop');
    var fontToSelect = $('div.font-select').find('.fs-results li:contains(' + fontName + ')');
    dropEle.addClass('fs-drop-op');
    var posFont = fontToSelect.offset().top
    var posFontOffset = $('div.font-select').find('.fs-results li:first').offset().top
    $('div.font-select').find('.fs-results').scrollTop(posFont - posFontOffset);
    fontToSelect.addClass('active').trigger('click');
    setTimeout(function () {
        $('div.font-select a div').trigger('click');
        dropEle.removeClass('fs-drop-op');
        callback && callback(fontToSelect.data('value').replace(/\+/g, ' '));
    }, 500);
}

$(function () {
    //
    // Init the fontselect plugin
    //
    $('input.fonts').fontselect({
        style: 'font-select',
        placeholder: 'Select a font',
        lookahead: 2
    }).on('change', function(e) {
        var fontFamily = $(this).val().replace(/\+/g, ' ');
        $('p').css('font-family', fontFamily);
    });


    selectFontAndApplyToEle('Anton', function(fontFamily) {
        $('p').css('font-family', fontFamily);
        setTimeout(function() {
          selectFontAndApplyToEle('Anonymous Pro', function(fontFamily) {
              $('p').css('font-family', fontFamily);
          });
       }, 1000);
    });
});

.fs-drop-op {
    opacity: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://rawgit.com/tommoor/fontselect-jquery-plugin/master/fontselect.css">
<script src="https://rawgit.com/tommoor/fontselect-jquery-plugin/master/jquery.fontselect.js"></script>


<input type="text" class="fonts">

<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.
    Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
    when an unknown printer took a galley of type and scrambled it to make a type
    specimen book. It has survived not only five centuries, but also the leap into
    electronic typesetting, remaining essentially unchanged. It was popularised
    in the 1960s with the release of Letraset sheets containing Lorem Ipsum
    passages, and more recently with desktop publishing software like Aldus
    PageMaker including versions of Lorem Ipsum.</p>

An alternative way to achieve your goal can be:

function setFontToEle(ele, fontname) {
    //
    // select the font by name in fontselect plugin list
    //
    var font = $('div.font-select').find('.fs-results li:contains(' + fontname + ')').data('value');
    if (font === undefined) {
        return;
    }
    //
    // include the css if not yet included
    //
    var link = '//fonts.googleapis.com/css?family=' + font;
    if ($("link[href*='" + font + "']").length === 0){
        $('link:last').after('<link href="' + link + '" rel="stylesheet" type="text/css">');
    }
    //
    // apply the font to the element
    //
    ele.css('font-family', font.replace(/\+/g, ' '));
}

$(function () {

    //
    // Init the fontselect plugin
    //
    $('input.fonts').fontselect({
        style: 'font-select',
        placeholder: 'Select a font',
        lookahead: 2
    });

    //
    // hide the font select if not necessary
    //
    $('.font-select').hide();


    //
    // set font to element
    //
    setFontToEle($('p'), 'Anton');

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://rawgit.com/tommoor/fontselect-jquery-plugin/master/fontselect.css">
<script src="https://rawgit.com/tommoor/fontselect-jquery-plugin/master/jquery.fontselect.js"></script>


<input type="text" class="fonts">

<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.
    Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
    when an unknown printer took a galley of type and scrambled it to make a type
    specimen book. It has survived not only five centuries, but also the leap into
    electronic typesetting, remaining essentially unchanged. It was popularised
    in the 1960s with the release of Letraset sheets containing Lorem Ipsum
    passages, and more recently with desktop publishing software like Aldus
    PageMaker including versions of Lorem Ipsum.</p>