관리-도구

편집 파일: plugin-google-fonts.js

GoogleFontsManager = {
	url: "https://fonts.googleapis.com/css2?display=swap&family=",
	activeFonts: [],

updateFontList: function () {
		let googleFontsLink = $("#google-fonts-link", Vvveb.Builder.frameHead);

if (this.activeFonts.length == 0) {
			googleFontsLink.remove();
			return;
		}

if (googleFontsLink.length < 1) {
			googleFontsLink = $(`<link id="google-fonts-link" href="" rel="stylesheet">`);
			Vvveb.Builder.frameHead.append(googleFontsLink);
		}
		
		googleFontsLink.attr("href", this.url + this.activeFonts.join("&family="));
	},
	
	removeFont: function (fontName) {
		let index = this.activeFonts.indexOf(fontName);
		this.activeFonts.splice(index, 1);
		this.updateFontList();
	},
	
	addFont: function (fontName) {
		this.activeFonts.push(fontName);
		this.updateFontList();
	}
}

Vvveb.FontsManager.addProvider("google", GoogleFontsManager);
	
let googleFonts = {};
let googlefontNames = [];
//load google fonts list and update wyswyg font selector and style tab font-family list
$.ajax({
	url: Vvveb.baseUrl + "../../resources/google-fonts.json",
	cache: true,
	dataType: "json",
	success: function(data) {
		//let json = JSON.parse(data);
		googleFonts = data ;
		//let fontSelect = $("#font-familly");
		
		let fontSelect = $("<optgroup label='Google Fonts'></optgroup>");
		for (font in googleFonts) {
			googlefontNames.push({"text":font, "value":font, "data-provider": "google"});
			let option = new Option(font, font);
			option.dataset.provider = "google";
			//option.style.setProperty("font-family", font);
			fontSelect.append(option);
		}
		$("#font-family").append(fontSelect);

let list = Vvveb.Components.getProperty("_base", "font-family");
		list.onChange = function (node,value, input, component) {
			let option = input.options[input.selectedIndex];
			Vvveb.FontsManager.addFont(option.dataset.provider, value, node);
			return node;
		};
		
		list.data.options.push({optgroup:"Google Fonts"});
		list.data.options = list.data.options.concat(googlefontNames);

Vvveb.Components.updateProperty("_base", "font-family", {data:list.data});
	}
});