/juicy-highlight

Custom Element that highlights a DOM element on screen using a SVG overlay and/or border

Primary LanguageHTMLMIT LicenseMIT

<juicy-highlight>

<juicy-highlight> is a Custom Element that highlights a DOM element on screen using a SVG overlay and/or border

Demo

Check it live!

Usage

  1. Install the component using Bower:

    $ bower install juicy-highlight --save

  2. Import Custom Element:

    <link rel="import" href="bower_components/juicy-highlight/juicy-highlight.html">

  3. Start using it!

    <juicy-highlight id="border" strokeWidth="2" strokeColor="#222222" strokeOffset="4"></juicy-highlight>
<script>
	document.addEventListener("DOMContentLoaded", function() {
		setTimeout(function() {
			document.querySelector("#border").show(document.querySelectorAll("li"));
		}, 100);
	});
</script>

Attributes

Attribute Type Default Description
overlay Boolean false Whether the overlay should be displayed
strokeWidth Number 1 Border width in px
strokeColor String #000000 Border color
strokeOffset Number 1 Border offset (distance from the element) in px
fill Color none Color to fill selected area. Accepts HEX #FFFF00, RGB rgb(255,255,0), RGBA rgba(255,255,0,0.5), and color name yellow.

Private properties

Property Type Description
overlayRect SVG The overlay SVG element.
focusRect SVG The focus SVG element.

Methods

Name Param name Type Description
show Highlight element(s) 
               | elements   | *null*, *Element*, *Array* or *NodeList* | DOM element or array of those to highlight. If no elements are specified, only overlay will be shown (if applicable)

hide | | | Hide current highlight

Contributing

  1. Fork it!
  2. Create your feature branch: git checkout -b my-new-feature
  3. Commit your changes: git commit -m 'Add some feature'
  4. Push to the branch: git push origin my-new-feature
  5. Submit a pull request :D

License

MIT