skeleton-focal is a Polymer 3 element that provides a focal point for your images.
Allows you to drag the focal point and returns the value in attributes that reflects the selected x and y coordinates in a 0-1 range.
<dom-bind>
<template>
<skeleton-focal
src="https://source.unsplash.com/random/800x400"
x="{{x}}"
y="{{y}}"></skeleton-focal>
<h4>Focal point coordinates</h4>
<ul>
<li><strong>X:</strong> [[x]]</li>
<li><strong>Y:</strong> [[y]]</li>
</ul>
</template>
</dom-bind>Install skeleton-focal with npm
$ npm install FabricElements/skeleton-focal --saveImport it into the <head> of your page
<script type="module" src="node_modules/@fabricelements/skeleton-focal/skeleton-focal.js"></script><skeleton-focal src="image.jpg" x="{{x}}" y="{{y}}"></skeleton-focal>src(string) - The URL of an image.x(number) - attribute that reflects the selected x coordinate in a 0-1 range.y(number) - attribute that reflects the selected y coordinate in a 0-1 range.
loaded(boolean) - Read-only value that is true when the image is loaded.crossorigin(string) - CORS enabled images support: https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_enabled_imageplaceholder(string) - This image will be used as a background/placeholder until the src image has loaded. Use of a data-URI for placeholder is encouraged for instant rendering.preventLoad(boolean) - When true, the image is prevented from loading and any placeholder is shown. This may be useful when a binding to the src property is known to be invalid, to prevent 404 requests.
Please check CONTRIBUTING.
Released under the BSD 3-Clause License.