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

smart-email-field

v1.0.0

Published

Gives your email fields nice autocomplete of common email domains

Downloads

2

Readme

Readme

  • Test in browsers you care about

Todo

  • Add tests
  • Add minified version
  • Add bower and npm, publish
  • Provide examples
  • Write a guide
    • can have multiple elements
    • elements can have whatever styles
    • email fields must have IDs
    • fields on which the plugin is initialized are wrapped in .sef-wrapper class

Smart Email Field

Smart Email Field adds autocompletion of popular email domains to your inputs.
Right arrow autocompletes the suggestion.

Smart Email Field

Demo

http://petarslovic.github.io/ng-post-message/

Dependencies

No dependencies. Vanilla JS.

Install

Get the files

NPM
npm install smart-email-field --save

Bower
bower install smart-email-field --save

Include the files in your app

  <script src="smart-email-field.min.js"></script>

Documentation

Usage

Important - Email fields must have ID attributes, otherwise the plugin won't work as expected.

There are a few ways to instantiate the plugin.
Given a few email fields:

<input type="email" class="email-field">
<input type="email" class="email-field">
<input type="email" id="email-1">

Via selector

var smartEmail = new SmartEmailField('.email-field')

This will make only the first input into a SmartEmailField. SmartEmailField uses document.querySelector if you pass a string.

Via DOM Element

var emailElement = document.querySelector('#email-1');
var smartEmail1 = new SmartEmailField(emailElement);

If you are using jQuery

var $email = $('#emial-1');
var smartEmail1 = new SmartEmailField($email.get(0));
// or
var smartEmail1 = new SmartEmailField($email[0]);

If you have multiple email fields on the page

[].slice.call(document.querySelectorAll('.my-email')).map(el => new SmartEmailField(el));

jQuery:

$('.my-email').each($el => new SmartEmailField($el[0]));

Configuration

To configure SmartEmailField, pass options as the second parameter to constructor:

  var myEmail = new SmartEmailField('#my-email', {
    shadowStyle: {
      color: 'rgba(0, 0, 0, 0.3)'
    }
  })

Options

  • shadowStyle
    Set the style of the shadow element. This affects the background color of the email field, or the color of autocomplete text, or any other property.

How it works

It's pretty simple:

  • we have a email field
  • we wrap it with a div
  • add a shadow div behind
  • copy the styles of email field to shadow div
  • make email field's background transparent, so we can see the shadow field
  • fill shadow filed with suggestion text

Development

  1. git checkout gh-pages
  2. run npm install && bower install
  3. write your code then run grunt
  4. git commit your changes
  5. copy over core files (.js and .css/.less for directives) to master branch
  6. git checkout master
  7. git checkout gh-pages post-message.js post-message.min.js
  8. update README, CHANGELOG, bower.json, and do any other final polishing to prepare for publishing
  9. git commit changes
  10. git tag with the version number, i.e. git tag v1.0.0
  11. create github repo and push
  12. [if remote does not already exist or is incorrect] git remote add origin [github url]
  13. git push origin master --tags (want to push master branch first so it is the default on github)
  14. git checkout gh-pages
  15. git push origin gh-pages
  16. (optional) register bower component
  17. bower register ng-post-message [git repo url]