KaneAI - World’s First E2E Software Testing Agent.Book a Demo Join TestMu Conference

How to use filteredFonts method in wpt

Best JavaScript code snippet using wpt

google-fonts-panel.component.ts

Source:google-fonts-panel.component.ts

1import {Component, EventEmitter, OnInit, Output, ViewEncapsulation} from '@angular/core';2import {HttpCacheClient} from "vebto-client/core/http/http-cache-client";3import {FormControl} from "@angular/forms";4import {BuilderDocument} from "../../../../builder-document.service";5import {debounceTime} from "rxjs/operators/debounceTime";6import {distinctUntilChanged} from "rxjs/operators/distinctUntilChanged";7import {Settings} from "vebto-client/core/services/settings.service";8@Component({9    selector: 'google-fonts-panel',10    templateUrl: './google-fonts-panel.component.html',11    styleUrls: ['./google-fonts-panel.component.scss'],12    encapsulation: ViewEncapsulation.None,13})14export class GoogleFontsPanelComponent implements OnInit {15    public loading = false;16    public originalFonts = [];17    public filteredFonts = [];18    public searchControl = new FormControl();19    /**20     * Current page of google fonts preview panel.21     */22    public fontPage = 0;23    /**24     * Fired when gradient is selected.25     */26    @Output() public selected = new EventEmitter();27    /**28     * Fired when close button is clicked.29     */30    @Output() public closed = new EventEmitter();31    /**32     * GoogleFontsPanelComponent Constructor.33     */34    constructor(35        private http: HttpCacheClient,36        private builderDocument: BuilderDocument,37        private settings: Settings,38    ) {}39    ngOnInit() {40        this.getAll();41        this.bindToSearchQuery();42    }43    /**44     * Emit selected event.45     */46    public emitSelectedEvent(fontFamily: string) {47        this.selected.emit(fontFamily);48    }49    /**50     * Emit closed event.51     */52    public emitClosedEvent() {53        this.closed.emit();54    }55    /**56     * Open next google fonts page.57     */58    public nextPage() {59        const nextPage = this.fontPage+1;60        if (this.filteredFonts.length > nextPage) {61            this.fontPage++;62            this.loadIntoDom();63        }64    }65    /**66     * Open previous google fonts page.67     */68    public previousPage() {69        const previousPage = this.fontPage-1;70        if (previousPage > 0) {71            this.fontPage--;72            this.loadIntoDom();73        }74    }75    public applyFont(fontFamily: string) {76        this.loadIntoDom([fontFamily], this.builderDocument.get().head);77        this.emitSelectedEvent(fontFamily);78    }79    private getAll() {80        let key = this.settings.get('builder.google_fonts_api_key');81        this.http.get('https://www.googleapis.com/webfonts/v1/webfonts?sort=popularity&key='+key)82            .subscribe(response => {83                this.originalFonts = this.createPaginator(response['items']);84                this.filteredFonts = this.originalFonts.slice();85                this.loadIntoDom();86            });87    }88    /**89     * Chunk array into 15 item chunks.90     */91    private createPaginator(fonts: any[]) {92        let paginator = [];93        while (fonts.length > 0) {94            paginator.push(fonts.splice(0, 15));95        }96        return paginator;97    }98    /**99     * Perform a search when user types into search input.100     */101    private bindToSearchQuery() {102        this.searchControl.valueChanges103            .pipe(debounceTime(100), distinctUntilChanged())104            .subscribe(query => {105                if ( ! query) this.filteredFonts = this.originalFonts;106                let filtered = [];107                this.originalFonts.forEach(page => {108                    page.forEach(font => {109                        if (font.family.toLowerCase().indexOf(query) > -1) {110                            filtered.push(font);111                        }112                    });113                });114                this.filteredFonts = this.createPaginator(filtered);115            });116    }117    /**118     * Load given google fonts into the DOM.119     */120    private loadIntoDom(names: any[] = null, context: HTMLHeadElement = null) {121        let head = context || document.head;122        this.loading = true;123        //make a list of fonts to load124        if ( ! names) {125            names = this.filteredFonts[this.fontPage].map(font => font.family);126        }127        //load fonts either to main window or iframe128        if ( ! context) {129            const link = head.querySelector('#dynamic-fonts');130            link && link.remove();131        }132        const gFontsLink = head.querySelector('#dynamic-fonts') as HTMLLinkElement;133        let compiled = names.join('|').replace(/ /g, '+');134        if (gFontsLink) {135            gFontsLink.href += '|' + compiled;136        } else {137            const link = document.createElement('link');138            link.rel = 'stylesheet';139            link.href = 'https://fonts.googleapis.com/css?family='+compiled;140            link.id = 'dynamic-fonts';141            head.appendChild(link);142        }143        this.loading = false;144    }...

App.js

Source:App.js

1import React, { useEffect, useState } from 'react';2import { library } from '@fortawesome/fontawesome-svg-core';3import { faList, faRedo, faPlusCircle, faArrowCircleUp } from '@fortawesome/free-solid-svg-icons';4import Navbar from './components/Navbar/Navbar';5import Toolbar from './components/Toolbar/Toolbar';6import Cards from './components/Cards/Cards';7import ScrollButton from './components/ScrollButton/ScrollButton';8import Footer from './components/Footer/Footer';9import './App.css';10library.add(faList, faRedo, faPlusCircle, faArrowCircleUp);11function App() {12  const [searchText, setSearchText] = useState("");13  const [sampleText, setSampleText] = useState("");14  const [fonts, setFonts] = useState([]);15  const [filteredFonts, setFilteredFonts] = useState([]);16  const [displayedFonts, setDisplayedFonts] = useState([]);17  const [moreFontsToDisplay, setMoreFontsToDisplay] = useState(true);18  const [fontSize, setFontSize] = useState("16px");19  const [hideCards, setHideCards] = useState(false)20  const itemsPerPage = 20;21  useEffect(() => {22    fetch("https://favorite-fonts-backend.herokuapp.com/getdata")23      .then(res => res.json())24      .then(resJson => {25        setFonts(resJson.items);26        setFilteredFonts(resJson.items);27        setDisplayedFonts(filteredFonts.slice(0, itemsPerPage));28      })29      .catch(err => console.log(err))30  }, []);31  const searchFonts = async(query) => {32    setSearchText(query);33    await setHideCards(true);34    const lowerSearchText = query.toLowerCase();35    36    let filteredFonts = fonts;37    if (lowerSearchText !== "") {38      filteredFonts = fonts.filter(font => font.family.toLowerCase().includes(lowerSearchText));39    }40    41    setFilteredFonts(filteredFonts);42    setDisplayedFonts(filteredFonts.slice(0, itemsPerPage));43    setMoreFontsToDisplay(itemsPerPage <= filteredFonts.length);44    setHideCards(false)45  }46  const loadFonts = (page) => {47    if (filteredFonts.length !== 0) {48      setDisplayedFonts(filteredFonts.slice(0, page*itemsPerPage+itemsPerPage));49      setMoreFontsToDisplay(page*itemsPerPage+itemsPerPage <= filteredFonts.length);      50    }51  }52  const resetApp = async () => {53    await fetch("https://favorite-fonts-backend.herokuapp.com/getdata")54      .then(res => res.json())55      .then(resJson => {56        setFonts(resJson.items);57        setFilteredFonts(resJson.items);58        setDisplayedFonts(filteredFonts.slice(0, itemsPerPage));59      })60      .catch(err => console.log(err))61    searchFonts("");62    setSearchText("");63    setSampleText("");64    setFontSize("16px");65  }66  return (67    <div className="App">68      <Navbar />69      <Toolbar 70        searchText={searchText}71        setSearchText={setSearchText}72        sampleText={sampleText}73        setSampleText={setSampleText}74        fontSize={fontSize}75        setFontSize={setFontSize}76        searchFonts={searchFonts}77        resetApp={resetApp}/>78      {hideCards ? null : (79        <Cards 80          fonts={displayedFonts}81          sampleText={sampleText}82          loadFonts={loadFonts}83          hasMoreFonts={moreFontsToDisplay}84          fontSize={fontSize}/>85      )}86      <ScrollButton scrollStepInPx="100" delayInMs="25"/>87      <Footer />88    </div>89  );90}...

index.js

Source:index.js

1import { getBrowserFonts } from './browserFontService';2import GoogleFontService from './googleFontService';3import { getApplicationFonts } from './applicationFontService';4import { sanitizeFont } from './common';5let fontList = [];6const DEFAULT_SEARCH_STR = 'a';7export default {8  // Create combined sorted lists of all fonts9  async initializeFonts(applicationFonts, currentContent) {10    fontList = [11      ...getBrowserFonts(),12      ...(await GoogleFontService.getFontList()),13      ...getApplicationFonts(applicationFonts),14    ].sort((fontA, fontB) => (fontA.text < fontB.text ? -1 : 1));15    GoogleFontService.addStyleSheetInContent(currentContent);16  },17  /**18   * Reload all fonts based on the updatedContent.19   * @param {string} updatedContent20   */21  reinitializeFonts(updatedContent) {22    GoogleFontService.addStyleSheetInContent(updatedContent);23  },24  // Get initial set of fonts to show in font dropdown25  getInitialFonts() {26    const filteredFonts = fontList.filter(27      (font) => font.text.charAt(0).toLowerCase() <= DEFAULT_SEARCH_STR28    );29    if (filteredFonts.length) {30      GoogleFontService.addStyleSheetForFonts(31        filteredFonts.map((font) => sanitizeFont(font.value))32      );33    }34    return filteredFonts;35  },36  // Filter the fonts using the string entered by the user37  async filterFonts(searchStr) {38    const str =39      searchStr && searchStr.length40        ? searchStr.toLowerCase()41        : DEFAULT_SEARCH_STR;42    const filteredFonts = fontList.filter((font) =>43      font.text.toLowerCase().startsWith(str)44    );45    if (filteredFonts.length > 0) {46      await GoogleFontService.addStyleSheetForFontsSync(47        filteredFonts.map((font) => sanitizeFont(font.value))48      );49    }50    return filteredFonts;51  },52  // Check if given font is present in list of fonts53  isFontSupported(fontFamily) {54    const sanitizedFontFamily = sanitizeFont(fontFamily);55    return fontList.filter(56      (font) =>57        font.value === sanitizedFontFamily || font.text === sanitizedFontFamily58    )[0];59  },...

Using AI Code Generation

1var wptexturize = require('wptexturize');2var fonts = wptexturize.filteredFonts();3console.log(fonts);4var wptexturize = require('wptexturize');5var text = "Hello world";6var textWithFont = wptexturize.applyFont(text);7console.log(textWithFont);8var wptexturize = require('wptexturize');9var text = "Hello world";10var textWithFont = wptexturize.applyFont(text);11console.log(textWithFont);12var wptexturize = require('wptexturize');13var text = "Hello world";14var textWithFont = wptexturize.applyFont(text);15console.log(textWithFont);16var wptexturize = require('wptexturize');17var text = "Hello world";18var textWithFont = wptexturize.applyFont(text);19console.log(textWithFont);20var wptexturize = require('wptexturize');21var text = "Hello world";22var textWithFont = wptexturize.applyFont(text);23console.log(textWithFont);24var wptexturize = require('wptexturize');25var text = "Hello world";26var textWithFont = wptexturize.applyFont(text);27console.log(textWithFont);28var wptexturize = require('wptexturize');29var text = "Hello world";30var textWithFont = wptexturize.applyFont(text);31console.log(textWithFont);32var wptexturize = require('w

Using AI Code Generation

1var wptexturize = require('wptexturize');2var filteredFonts = wptexturize.filteredFonts;3var filteredFonts = filteredFonts('Arial,Helvetica,sans-serif');4console.log(filteredFonts);5var wptexturize = require('wptexturize');6var filteredFonts = wptexturize.filteredFonts;7var filteredFonts = filteredFonts('Arial,Helvetica,sans-serif', 'serif');8console.log(filteredFonts);9var wptexturize = require('wptexturize');10var filteredFonts = wptexturize.filteredFonts;11var filteredFonts = filteredFonts('Arial,Helvetica,sans-serif', 'sans-serif');12console.log(filteredFonts);13var wptexturize = require('wptexturize');14var filteredFonts = wptexturize.filteredFonts;15var filteredFonts = filteredFonts('Arial,Helvetica,sans-serif', 'monospace');16console.log(filteredFonts);17var wptexturize = require('wptexturize');18var filteredFonts = wptexturize.filteredFonts;19var filteredFonts = filteredFonts('Arial,Helvetica,sans-serif', 'cursive');20console.log(filteredFonts);21var wptexturize = require('wptexturize');22var filteredFonts = wptexturize.filteredFonts;23var filteredFonts = filteredFonts('Arial,Helvetica,sans-serif', 'fantasy');24console.log(filteredFonts);25var wptexturize = require('wptexturize');26var filteredFonts = wptexturize.filteredFonts;27var filteredFonts = filteredFonts('Arial,Helvetica,sans-serif', 'system-ui');28console.log(filteredFonts

Using AI Code Generation

1var wptools = require("wptools");2var fonts = wptools.filteredFonts();3console.log(fonts);4    var fonts = wptools.filteredFonts();5    console.log(fonts);6    var fonts = wptools.filteredFonts();7    console.log(fonts);8    var fonts = wptools.filteredFonts();9    console.log(fonts);10    var fonts = wptools.filteredFonts();11    console.log(fonts);12    var fonts = wptools.filteredFonts();13    console.log(fonts);14    var fonts = wptools.filteredFonts();15    console.log(fonts);16    var fonts = wptools.filteredFonts();17    console.log(fonts);18    var fonts = wptools.filteredFonts();19    console.log(fonts);

Using AI Code Generation

1var wptools = require('wptools');2var fs = require('fs');3var fonts = wptools.filteredFonts();4var output = JSON.stringify(fonts);5fs.writeFile('output.json', output, function(err) {6    if (err) {7        console.log(err);8    } else {9        console.log("JSON saved to output.json");10    }11});12[{"family":"Arial","style":"Bold","weight":700,"stretch":"normal","italic":false,"monospace":false},{"family":"Arial","style":"Bold Italic","weight":700,"stretch":"normal","italic":true,"monospace":false},{"family":"Arial","style":"Italic","weight":400,"stretch":"normal","italic":true,"monospace":false},{"family":"Arial","style":"Regular","weight":400,"stretch":"normal","italic":false,"monospace":false},{"family":"Courier New","style":"Bold","weight":700,"stretch":"normal","italic":false,"monospace":true},{"family":"Courier New","style":"Bold Italic","weight":700,"stretch":"normal","italic":true,"monospace":true},{"family":"Courier New","style":"Italic","weight":400,"stretch":"normal","italic":true,"monospace":true},{"family":"Courier New","style":"Regular","weight":400,"stretch":"normal","italic":false,"monospace":true},{"family":"Georgia","style":"Bold","weight":700,"stretch":"normal","italic":false,"monospace":false},{"family":"Georgia","style":"Bold Italic","weight":700,"stretch":"normal","italic":true,"monospace":false},{"family":"Georgia","style":"Italic","weight":400,"stretch":"normal","italic":true,"monospace":false},{"family":"Georgia","style":"Regular","weight":400,"stretch":"normal","italic":false,"monospace":false},{"family":"Helvetica","style":"Bold","weight":700,"stretch":"normal","italic":false,"monospace":false},{"family":"Helvetica","style":"Bold Italic","weight":700,"stretch":"normal","italic":true,"monospace":false},{"family":"Helvetica","style":"Italic","weight":400,"stretch":"normal","italic":true,"monospace":false},{"family":"Helvetica","style":"Regular","weight":400,"stretch":"normal","italic":false,"

Using AI Code Generation

1var wptools = require('wptools');2var fonts = wptools.filteredFonts('fonts.json', 'fonts');3console.log(fonts);4{5    {6    },7    {8    },9    {10    },11    {12    },13    {14    },15    {

Using AI Code Generation

1var wptexturize = require('wptexturize');2var text = "This is a string of text";3var filtered = wptexturize.filteredFonts(text);4console.log(filtered);5var wptexturize = require('wptexturize');6var text = "This is a string of text";7var filtered = wptexturize.filteredShortcodes(text);8console.log(filtered);9var wptexturize = require('wptexturize');10var text = "This is a string of text";11var filtered = wptexturize.filteredTags(text);12console.log(filtered);13var wptexturize = require('wptexturize');14var text = "This is a string of text";15var filtered = wptexturize.filteredURLs(text);

Using AI Code Generation

1var texturize = require('wptexturize');2var text = "Hello World, I'm a happy camper";3var result = texturize.filteredFonts(text);4console.log(result);5var texturize = require('wptexturize');6var text = ":-) :-D :-P :-O :-(";7var result = texturize.convertSmilies(text);8console.log(result);9var texturize = require('wptexturize');10var text = "Hello World, I'm a happy camper";11var result = texturize.convertChars(text);12console.log(result);13var texturize = require('wptexturize');14var text = "Hello World, I'm a happy camper";15var result = texturize.convertDashes(text);16console.log(result);17var texturize = require('wptexturize');18var text = "Hello World, I'm a happy camper";19var result = texturize.convertQuotes(text);

Using AI Code Generation

1var filteredFonts = require('wptexturize').filteredFonts;2var fonts = filteredFonts();3console.log(fonts);4var filteredFonts = require('wptexturize').filteredFonts;5var fonts = filteredFonts();6console.log(fonts);

Automation Testing Tutorials

Learn to execute automation testing from scratch with LambdaTest Learning Hub. Right from setting up the prerequisites to run your first automation test, to following best practices and diving deeper into advanced test scenarios. LambdaTest Learning Hubs compile a list of step-by-step guides to help you be proficient with different test automation frameworks i.e. Selenium, Cypress, TestNG etc.