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

kolorfield

v0.2.0

Published

A tiny, dependency-free, color input field helper that utilizes the native color picker.

Downloads

2

Readme

kolorfield

npm package version Travis build status npm package downloads code style license

A tiny, dependency-free, color input field helper that utilizes the native color picker.

Demo

Visit https://kolorfield.js.org

Installation

Manual Download

Download the latest version of kolorfield and then place the following HTML in your page's head element:

<script type="text/javascript" src="dist/kolorfield.min.js"></script>
<link rel="stylesheet" href="dist/kolorfield.min.css" />

CDN (Courtesy of jsDelivr)

Place the following HTML in your page's head element (check to make sure the version in the URLs are the version you want):

<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/kodie/[email protected]/dist/kolorfield.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/kodie/[email protected]/dist/kolorfield.min.css" />

NPM

npm install kolorfield --save
// ES6
import kolorfield from 'kolorfield'

// CommonJS
const kolorfield = require('kolorfield')

GPM

gpm install kodie/kolorfield --save

Bower

bower install kodie/kolorfield --save

Usage

Basic HTML Structure

<div class="kolorfield">
  <input type="color" id="main-color" value="#5185b3">
  <button type="button" class="kolorfield-open kolorfield-value" data-kolorfield-style-prop="background-color"></button>
</div>

The kolorfield Function

Initiates kolorfield on any element that has the kolorfield class. This should be a container around your color input.

Example

window.addEventListener('load', function () {
  kolorfield()
})

Attributes/Classes

  • The kolorfield-input class - Any input element with this class will have it's value set to the selected color any time the color is changed. The color will also be set to any value that is entered into this input field.

  • The kolorfield-open class - Any element with this class will open the color picker when clicked.

  • The kolorfield-value class - Any element with this class will have it's text content set to the color when the color is changed. If this element is an input, it's value will be updated instead of text content.

  • The data-kolorfield-style-prop attribute - Set this attribute to a style property (like background or color) on an element to have it's style updated when the color is changed. Multiple style properties can be defined by separating them with a comma (ie. background,color).

JavaScript Methods

The containing kolorfield element (the element with the kolorfield class) will have the following methods attached to it available for use:

var color = document.querySelector('.color')

color.open() // Opens the color picker

color.set('#00ff00') // Sets the color

var currentColor = color.get() // Gets the current color

// The `change` event bubbles up to the containing element so you can detect changes like so:
color.addEventListener('change', function () {
  document.body.style.setProperty('--color', event.target.value)
})

Related

  • minitaur - The ultimate, dependency-free, easy to use, JavaScript plugin for creating and managing modals.

  • filebokz - A tiny, dependency-free, highly customizable and configurable, easy to use file input with some pretty sweet features.

  • hashjump - A tiny, dependency-free JavaScript module for handling anchor links and scrolling elements into view.

  • vanishing-fields - A dependency-free, easy to use, JavaScript plugin for hiding and showing fields.

License

MIT. See the license file for more info.