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

coherent-gameface-dropdown

v3.5.0

Published

A component for Coherent Labs Gameface.

Downloads

19

Readme

The gameface-dropdown is part of the Gameface custom components suite.

Installation

npm i coherent-gameface-dropdown

Usage with UMD:

<script src="./node_modules/coherent-gameface-dropdown/dist/dropdown.production.min.js"></script>
  • add the gameface-dropdown component to your html:
<gameface-dropdown></gameface-dropdown>

To add options to the dropdown use the dropdown-option custom element:

<gameface-dropdown>
    <dropdown-option>Cat</dropdown-option>
    <dropdown-option>Dog</dropdown-option>
    <dropdown-option>Giraffe</dropdown-option>
    <dropdown-option>Lion</dropdown-option>
</gameface-dropdown>

To manually select an option use the dropdown value setter. For example - to select the Giraffe option from the dropdown above call:

const dropdown = document.getElementById('my-dropdown');
dropdown.value = 'Giraffe';

This is all! Load the file in Gameface to see the gameface-dropdown.

Usage with JavaScript:

If you wish to import the GamefaceDropdown using JavaScript you can remove the script tag and import it like this:

import { GamefaceDropdown } from 'coherent-gameface-dropdown';

or simply

import 'coherent-gameface-dropdown';

Note that this approach requires a module bundler like Webpack or Rollup to resolve the modules from the node_modules folder.

Multiple Select

To enable multiple selection add a multiple attribute to the gameface-dropdown:

<gameface-dropdown class="gameface-dropdown-component" multiple>
    <dropdown-option>Cat1</dropdown-option>
    <dropdown-option>Parrot</dropdown-option>
</gameface-dropdown>

By default the multiple select will have its options list expanded and it won't have a header. If you would like to have a dropdown that looks like a single select, but supports multiple selected elements - add the collapsable attribute along with the multiple attribute:

<gameface-dropdown class="gameface-dropdown-component" multiple collapsable>
    <dropdown-option>Cat1</dropdown-option>
    <dropdown-option>Parrot</dropdown-option>
</gameface-dropdown>

Features and Limitations

This is not a standard HTML select multiple. It is a custom HTML element that enables you to define a list of options.

  • The multiple attribute makes it possible to select more than one option using the Ctrl key and the mouse.
    • All options can be selected with Ctrl + A combination.
  • Set the disabled attribute to gameface-dropdown or a dropdown-option to disable it.
  • Set the selected attribute to any dropdown-option to pre-select it.

These are some of the differences to the standard select that are partially or not yet supported:

  • Selecting multiple options via keyboard - this is possible with Shift + Arrow Up/Left/Down/Right and Shift + Home/End.
  • Selecting a range of elements.

Supported Attributes

You can modify the dropdown and its options using HTML attributes. The gameface-dropdown supports:

  • multiple - makes the dropdown multiple, enabling selecting more than one option
  • collapsable - specifies if the options' list should be always visible
  • disabled - makes the dropdown disabled

Also these options are added as setters to the dropdown so you can runtime change the dropdown using JavaScript. For example:

dropdown.multiple = true;
dropdown.collapsable = true;
dropdown.disabled = false;

The dropdown-option supports:

  • value - sets a custom value to the option different from its text content
  • selected - makes an option selected
  • disabled - disables an option

Note that attempting to remove an attribute from an option that does not have this attribute will have no effect! For example an option could be selected and not have the selected attribute, as selecting an option using the mouse will update only its internal selected property.

To add or remove an attribute use the setAttribute or the removeAttribute method.

Add the Styles

<link rel="stylesheet" href="coherent-gameface-components-theme.css">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="node_modules/coherent-gameface-scrollable-container/style.css">
<link rel="stylesheet" href="node_modules/coherent-gameface-slider/styles/horizontal.css">
<link rel="stylesheet" href="node_modules/coherent-gameface-slider/styles/vertical.css">

To overwrite the default styles, simply create new rules for the class names that you wish to change and include them after the default styles.