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

lightenjs

v1.3.0

Published

O pacote possui um `export default`, que exporta uma função que retorna uma nova instância da classe `Lighten`, responsável pelo plugin. A função importada recebe dois parâmetros: - 1. _node:_ Pode ser uma `string` com um seletor `CSS`, igual usamos em `q

Downloads

4

Readme

Documentação para uso da classe Selector

O pacote possui um export default, que exporta uma função que retorna uma nova instância da classe Lighten, responsável pelo plugin. A função importada recebe dois parâmetros:

    1. node: Pode ser uma string com um seletor CSS, igual usamos em querySelector(), um evento (Event, não o EventTarget), ou algum outro objeto do DOM que possa ser manipulado, como wimdow e document;
    1. eventTarget: Se o primero parâmetro for do tipo Event, você pode passar true como segundo parâmetro. Se fizer isso o elemento HTML será extraido do evento com Event.target, se não for informado, será extraido com Event.currentTarget.

Lighten

Contém os utilitários, ou métodos genéricos

Propriedades

nodes

Armazena os nós que foram selecionados na criação do objeto.

Métodos

exec (callback)

Método utilizado para executar uma função em cada um dos nós selecionados. Ele é utilizado quando não se há certeza se a propriedade nodes terá um ou mais de um item, sendo que o método já faz essa verificação. É UTILIZADO SOMENTE DENTRO DE OUTROS MÉTODOS.

each (callback, ...args = undefined)

Executa a função informada em cada um dos nós selecionados. O callback recebera como primeiro parâmetro o elemento atual da iteração, e após ele os argumentos passados na chamada do método. Retorna a instância do objeto.

getter node

É utilizado para retornar a propriedade nodes.

Css

Contém os métodos relacionados com CSS, como alteração de classes e estilos inline.

Métodos

addClass (...cssClasses)

Adiciona as classes informadas aos nós selecionados. Cada classe deve ser informada como um parâmetro separado. Retorna a instância do objeto.

removeClass (...cssClasses)

Funciona como o método addClass, mas ao invés de adcionar, remove as classes informadas. Retorna a instância do objeto.

toggleClass (cssClass)

Alterna o estado da classe informada. Se estiver presente no só selecionado, então ela é removida. Se não estiver presente, ela é adicionada. Retorna a instância do objeto.

hasClass (...cssClass)

Verifica se as classes CSS informadas estão presentes no nó. Os valores devem ser strings, cada uma como um parâmetro. Retorna true ou false, se apenas uma das classes informadas não estiver presente, será retornado false.

style (styles)

Adiciona os estilos informados aos nós selecionados. Os dados devem ser passados em um objeto, sendo que a chave é o nome da propriedade CSS a ser alterada (no formato camel case utilizado pelo JS ou como string no próprio formato do CSS) com seus respectivos valores. Retorna a instância do objeto ou, se o parâmetro passado form uma string, então o valor da propriedade informada será retornado.

removeStyle (styles)

Remove os estilos informados dos nós selecionados. Os dados são passados em um array, sendo que cada item é uma propriedade (no formato camel case utilizado pelo JS ou como string no próprio formato do CSS) que deve ser removida. Retorna a instância do objeto.

Events

Métodos responsáveis por controlar os manipuadores de evento.

Propriedades

events

Armazena os ouvintes de evento para que os mesmos possam ser remevidos em massa, ou seja, informados apenas o evento que deseja remover para remover todos os ouvintes dele.

Métodos

listen (event, callback)

Adiciona um ouvinte de evento aos nós selecionados. Primeiro é passado o nome do evento, seguido pela função que será executada ao disparar o evento. Retorna a instância do objeto.

unlisten (event, callback = undefined)

Remove ouvintes dos nós selecionados. Se for informado o callback, então será removido apenas o callback informado. Se for informado somente o evento, todos os ouvintes desse evento serão removidos. Retorna a instância do objeto.

dispatch (...events)

Dispara os eventos informados em events nos elementos selecionados. Retorna a instância do objeto.

Animation

Executa animações, geralmente em CSS, nos elementos informados.

Métodos

slideHeight (options = undefined)

Aplica efeito de slide vertical. Ele reconhece se o elemento já foi animado, nesse caso, ele oculta o alvo. Sendo assim, é utilizado o mesmo método para exibir/ocultar o slide. Ele aceita um objeto de opções sendo:

  • time: Tempo de duração da animção no formato CSS (1s, .5s), por padrão o valor é .2s;
  • display: Qual valor a propriedade display recebera quando o elemento for exibido pelo slide, sendo que deve ser informado um valor CSS válido da propriedade. Por padrão o valor é block; Retorna a instância do objeto.

slideWidth (options = undefined)

Funciona igual ao método acima slideHeight, a única diferença é que ele faz a animação na horizontal. É possível, por exemplo, exibir o slide com o método slideHeight e depois ocultá-lo com slideWidth.

Observer

Faz uma simples implementação de um observer. Para utilizá-lo, basta executar o método <Lighten import>.observer() que uma instância de LightenObserver será retornada, contendo os métodos e propriedades descritos abaixo.

Propriedades

observables

Armazena os callbacks inscritos através do método subscribe.

Métodos

subscribe (name, callback)

Inscreve novos observers no objeto. O parâmetro name é uma string, utilizada depois se for necessária desincrever a função callback.

unsubscribe (name)

Remove a inscrição do observer informado. O parâmetro name deve ser o mesmo que o informado no método subscribe.

notify (...data)

Notifica os observers para que eles executem suas ações. Ela recebe como parâmetro(s) os dados que serão passados aos observers.

Http

Módulo com métodos responsáveis por gerar, manipular e tratar requisições HTTP e afins.

Métodos

query (key)

Retorna campos presentes na queryString da URL. O parametro pode ser de trÊs tipos:

  • undefined: Retorna objeto com todos os campos;
  • string: Retorna o campo especificado;
  • string[]: Retorna um objeto com os campos especificados. Quando um campo específico não for encontrado, será retornado null. E no caso de não ser solicitado nenhum campo (key === undefined) e não houver queryString, um objeto vazio será retornado.

Dom

Módulo com métodos para manipulação do DOM.

Métodos

data (property, value)

Retorna o valor de um ou mais atributos data- do nó selecionado (só funciona quando há somente um nó selecionado). Pode ser informada uma string contendo o nome de uma única propriedade, ou um array, contendo os nomes da propriedades a serem retornadas. Se for passado um array, então será retornado um objeto onde as chaves são os nomes das propriedades requisitadas com seus respectivos valores. Se o parâmetro value for informado, então property sera setado para o valor recebido em todos os elementos selecionados e será retornado a instância do objeto.

property (property, value)

Retorna o valor de uma ou mais propriedades do elemento selecionado (só funciona quando há somente um elemento selecionado). Pode ser informada uma string contendo o nome de uma única propriedade, ou um array, contendo os nomes da propriedades a serem retornadas. Se for passado um array, então será retornado um objeto onde as chaves são os nomes das propriedades requisitadas com seus respectivos valores. Se o parâmetro value for informado, então property sera setado para o valor recebido em todos os elementos selecionados e será retornado a instância do objeto.

attribute (attribute, value)

Retorna o valor de um ou mais atributos do elemento selecionado (só funciona quando há somente um elemento selecionado). Pode ser informada uma string contendo o nome de um único atributo, ou um array, contendo os nomes dos atributos a serem retornadas. Se for passado um array, então será retornado um objeto onde as chaves são os nomes dos atributos requisitadas com seus respectivos valores. Se o parâmetro value for informado, então attribute sera setado para o valor recebido em todos os elementos selecionados e será retornado a instância do objeto.

removeAttribute (...string)

Remove os atributos informados dos elementos selecionados. Retorna a instância do objeto.