Web Components

A collection of web components using the Polymer lib.

Because Web Components are the future of the Web (and we want to be part of it).

Installation

$ git clone git://github.com/scopyleft/web-components.git
$ cd web-components
$ git clone git://github.com/Polymer/polymer-all.git --recursive
$ python3 -m http.server 8765
(or $ python -m SimpleHTTPServer 8765)
$ open http://127.0.0.1:8765/

Components

github-repository

Displays a github-like summary for a given repository. Inspired by GitHub-jQuery-Repo-Widget.

Attributes:

• repository (required): a string containing repository owner/repository name
• width (optional, default=500px): a string setting the width of the component with the related unit.

trello-card

Displays a Trello card from a public board.

Attributes:

• cardId (required): a string containing the Trello card id
• trelloKey (required): a string containing the Trello key available for developers
• width (optional, default=500px): a string setting the width of the component with the related unit.

feed-box

Work in progress.

x-map

Displays a Leaflet map.

x-map attributes:

• lat (required): the latitude where to center
• lng (required): the longitude where to center
• zoom (optional, default=12): The zoom level
• width (optional, default=200): The width of the map in pixels
• height (optional, default=200): The height of the map in pixels
• credit (optional): A text (HTML allowed) to insert into the footer of the map.

x-marker

You can also insert markers inside an x-map:

<x-map lat="43.656291" lng="3.89034">
    <x-marker lat="43.610772" lng="3.876715">
        <h1>City of Montpellier</h1>
    </x-marker>
</x-map>

x-marker attributes:

• lat (required): the latitude where to place the marker
• lng (required): the longitude where to place the marker
• open (optional): if specified and the node as a content, the content will be rendered in an open popup.

Note that an x-marker can have an optional content inside its node. It will be rendered as a popup that will open on click (or open on load if the open attribute is specified)