givanz / VvvebJs

Drag and drop page builder library written in vanilla javascript without dependencies or build tools.
https://www.vvveb.com/vvvebjs/editor.html
Apache License 2.0
6.91k stars 1.59k forks source link

select the font sansserif,list background will be blak for a moment #302

Closed cncbec closed 1 year ago

cncbec commented 1 year ago

font-sansserif

givanz commented 1 year ago

This delay is caused by the large number of items in the select input, there are 1292 google fonts listed, you can either edit the list https://github.com/givanz/VvvebJs/blob/master/resources/google-fonts.json and keep only a small portion of the fonts or you can completely remove google fonts https://github.com/givanz/VvvebJs/blob/master/editor.html#L1617

A better solution is to add a new input in inputs.js a select input that has a lazyload option to load only visibile fonts and then use the new input instead of the default SelectInput https://github.com/givanz/VvvebJs/blob/master/libs/builder/components-common.js#L1090

Or you can simply use https://github.com/select2/select2 To add it to VvvebJs add the https://github.com/select2/select2/blob/develop/dist/js/select2.full.min.js to your project then include in in https://github.com/givanz/VvvebJs/blob/master/editor.html#L1669 and then just initialize the plugin after the page is loaded

$('select').select2();

or


$(document).ready(function() {
    $('select').select2();
});

https://github.com/givanz/VvvebJs/blob/master/editor.html#L1708

cncbec commented 1 year ago

thank you