npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

filesquash-widget

v0.7.0

Published

Stencil Component Starter

Downloads

11

Readme

Componentes do Filesquash

Este é um conjunto de web componentes criados para interagir com a API do Filesquash.

Instalação

Via tag

  • Adicione o seguinte código antes de fechar a tag <body> de seu site:
<script type="application/javascript">
  var filesquashConfig = {
    projectId: '[seu projectId]',
    token: '[seu token]'
  }
</script>
<script src='https://unpkg.com/[email protected]/dist/filesquash.js'></script>
  • Pronto. Agora você já pode usar os componentes em qualquer lugar no seu template, jsx, html, etc.

NPM

  • Rode npm install filesquash-widget --save
  • Adicione um código similar ao a seguir antes de fechar a tag <body> de seu site:
<script type="application/javascript">
  var filesquashConfig = {
    projectId: '[seu projectId]',
    token: '[seu token]'
  }
</script>
<script src='node_modules/filesquash-widget/dist/filesquash.js'></script>
  • Pronto. Agora você já pode usar os componentes em qualquer lugar no seu template, jsx, html, etc.

Widget de imagens

O widget de imagens do Filesquash permite que você tenha imagens automaticamente responsivas em seu site com o mínimo de esforço possível. Além disso, também é possível aplicar uma grande quantidade de efeitos efeitos, como blur, grayscale, watermark, etc..

Exemplo:

  <img
    data-fs-src="https://mysite.com/images/image.jpg"
    src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8+f9vPQAJZAN2rlRQVAAAAABJRU5ErkJggg=="
  />

Opções

| Atributo | Valor padrão | Valores possíveis | Descrição | |---|:-:|:-:|---| | data-fs-src | | | Este atributo define o endereço URL da imagem ou identificador único de imagem no Filesquash. Esse atributo é obrigatório. | | data-fs-size | "w_auto" | "default", "h_auto", "w_auto" e mais | Este atributo especifica o tamanho desejado da imagem. | | data-fs-filters | | Mais informações | Este atributo define os filtros que serão aplicados a imagem. | | data-fs-progressive | true | true ou false | Este atributo define se a imagem será carregada de forma progressiva usando placeholder de baixa resolução (LQIP). | | data-fs-auto-webp | false | true ou false | Este atributo define se a imagem será carregada no formato webp quando o navegador apresentar suporte. A conversão para webp pode resultar em perda de qualidad das imagens. |


Widget de imagens em background

O widget de imagens do Filesquash também permite que você tenha imagens em background automaticamente responsivas.

Exemplo:

  <div
    data-fs-bg="https://mysite.com/images/image.jpg"
    style="width:100%; height: 500px;"
  ></div>

Opções

| Atributo | Valor padrão | Valores possíveis | Descrição | |---|:-:|:-:|---| | data-fs-bg | | | Este atributo define o endereço URL da imagem ou identificador único de imagem no Filesquash. Esse atributo é obrigatório. | | data-fs-size | "w_auto" | "default", "h_auto", "w_auto" e mais | Este atributo especifica o tamanho desejado da imagem. | | data-fs-filters | | Mais informações | Este atributo define os filtros que serão aplicados a imagem. | | data-fs-progressive | true | true ou false | Este atributo define se a imagem será carregada de forma progressiva usando placeholder de baixa resolução (LQIP). | | data-fs-auto-webp | false | true ou false | Este atributo define se a imagem será carregada no formato webp quando o navegador apresentar suporte. A conversão para webp pode resultar em perda de qualidad das imagens. |


Widget de Upload

Javascript (vanilla):

  <filesquash-widget id="widget"></filesquash-widget>

Para receber a URL de seu arquivo após o upload você deverá criar um listener para o evento uploadCompleted:

  const widget = document.querySelector('widget');
  widget.addEventListener(
    'uploadCompleted',
    data => console.log(data)
  )

Alternativamente você também pode escutar pelo evento filesquash:uploadStarted no document

document.addEventListener('filesquash:uploadCompleted', () => {
	console.log('filesquash:uploadStarted')
});

Caso queira acionar programaticamente o widget de upload do Filesquash, utilize o <filesquash-modal> e chame o método toggleModal() para exibir ou esconder o widget.

<button onclick="showModal()">Exibir modal</button>
<filesquash-modal token="YOUR_TOKEN" id="modal"></filesquash-modal>

<script>
  const modalElm = document.querySelector('#modal');

  function showModal() {
    modalElm.componentOnReady()
      .then(() => {
        modalElm.toggleModal();
      });
  }
</script>

Opções

| Atributo | Valor padrão | Descrição | |---|:-:|---| | multiple | false | Este atributo define se o usuário pode selecionar mais de um arquivo de forma simultânea. | | button-text | "Selecionar arquivos" | Este atributo define o texto do botão de abertura do modal do widget. | | label-text | "Arraste/solte seu arquivo aqui." | Este atributo define o texto da caixa de seleção de arquivos do widget. | | upload-button-text | "Enviar" | Este atributo define o texto do botão que realiza o upload dos arquivos do widget. |

Utilizando o widget de upload com o React:

Para usar o widget de upload no React você precisará criar um wrapper como o apresentado a seguir.

import React, { Component } from 'react'
import kebabCase from 'lodash/kebabCase'

export class UploadWidget extends Component {
  constructor(props) {
    super(props)

    this.onUploadComplete = this.onUploadComplete.bind(this)
  }

  componentDidMount () {
    this.component.addEventListener('uploadCompleted', this.onUploadComplete)
  }

  componentWillUnmount () {
    this.component.removeEventListener('uploadCompleted', this.onUploadComplete)
  }

  onUploadComplete (data) {
    this.props.onComplete(data)
  }

  _handleRef = (component) => {
    this.component = component
  };

  render () {
    const newProps = {
      ...Object.keys(this.props).reduce((accumulator, key) => ({
        ...accumulator,
        [kebabCase(key)]: this.props[key]
      }), {})
    }

    return (
      <filesquash-widget
        {...newProps}
        ref={this._handleRef}
      />
    )
  }
}

Usando o wrapper:

  <UploadWidget
    token={this.state.info.api_token}
    onComplete={(data) => console.log(data)}
    buttonText='Upload new files'
  />

ps.: Em breve disponibilizaremos esse wrapper como um pacote no NPM.