{"id":20117816,"url":"https://github.com/beldar/tfl-status","last_synced_at":"2026-04-20T19:33:14.415Z","repository":{"id":15211813,"uuid":"17940261","full_name":"beldar/tfl-status","owner":"beldar","description":"A Polymer Web Component that fetches the Tube Line Status","archived":false,"fork":false,"pushed_at":"2015-09-17T20:07:19.000Z","size":628,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"master","last_synced_at":"2026-02-27T23:52:52.021Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/beldar.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2014-03-20T11:37:10.000Z","updated_at":"2014-03-27T17:20:17.000Z","dependencies_parsed_at":"2022-09-10T17:42:10.936Z","dependency_job_id":null,"html_url":"https://github.com/beldar/tfl-status","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/beldar/tfl-status","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/beldar%2Ftfl-status","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/beldar%2Ftfl-status/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/beldar%2Ftfl-status/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/beldar%2Ftfl-status/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/beldar","download_url":"https://codeload.github.com/beldar/tfl-status/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/beldar%2Ftfl-status/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32062510,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-20T11:35:06.609Z","status":"ssl_error","status_checked_at":"2026-04-20T11:34:48.899Z","response_time":94,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-13T19:08:19.318Z","updated_at":"2026-04-20T19:33:14.393Z","avatar_url":"https://github.com/beldar.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# TFL Status Component\n-------\n\nThis is a Web Component that uses [Polymer](http://www.polymer-project.org/) to create it and to provide a fallback in case the browser doesn't suppoer web components.\n\nIt provides a component that fetches the Tube Status updates with everything necessary encapsulated on one place.\n\nIt uses a YQL url to fetch the data XML, so it can be real time fetched with javascript.\n\nYou can find a working demo here: http://beldar.github.io/tfl-status/\n\nTo know more about web components [there](http://www.html5rocks.com/en/tutorials/webcomponents/customelements/) [are](http://www.html5rocks.com/en/tutorials/webcomponents/shadowdom/) [tons](http://css-tricks.com/modular-future-web-components/) of [resources](https://www.google.co.uk/search?q=web+components) available.\n\n\n# Installation\n\nDependencies\n------------\n\nYou have to have installed [bower](http://bower.io/), and [compass](http://compass-style.org/install/). To install the first two you'll need [node](http://nodejs.org/) too.\n\nInstall\n-------\n\nOnce you have all those and cloned the repo, go to the root of the project and run:\n\n    bower install\n    \nThat will download all the js and css dependencies of the project.\n\nThen run:\n\n    npm install\n    \nThis will download all the node dependencies (including grunt)\n\nFinally you can launch the demo running:\n\n    grunt serve\n    \nYou can build the project ready for production like this:\n\n    grunt build\n    \nThat will leave everything ready on the `/dist` folder\n\n# How to use\n\nThere's an example/demo on the index.html of this project, but basically, you first need to include the platform.js:\n\n    \u003cscript src=\"bower_components/platform/platform.js\"\u003e\u003c/script\u003e\n    \nThen, just below import the html of the element:\n\n    \u003clink rel=\"import\" href=\"elements/tfl-status.html\"\u003e\n    \nAnd finally place the element where you want it using the attributes that you need:\n\n    \u003cpolymer-tfl-status refresh=\"5000\"\u003e\u003c/polymer-tfl-status\u003e\n    \nThe refresh attribute defines how often the element should refresh the data feed in miliseconds. \n\nYou can also define a with and height:\n\n    \u003cpolymer-tfl-status refresh=\"5000\" width=\"300px\" height=\"500px\"\u003e\u003c/polymer-tfl-status\u003e\n    \nAttributes summary\n-----------\n\n| Attribute | Functionality                        | Default        |\n|-----------|--------------------------------------|----------------|\n| refresh   | Defines the rate of the data refresh | 3000ms         |\n| width     | Defines the component width          | 100%           |\n| height    | Defines the component height         | auto           |\n\nEvents and API\n------------\nThe components fires an event called `line-clicked` when the user clicks a Tube line and returns the data from the line, there's an example of how to use this on the index.html, which is:\n\n    \u003cscript\u003e\n        document.addEventListener('WebComponentsReady', function() {\n            var el = document.getElementsByTagName('polymer-tfl-status')[0];\n            el.addEventListener('line-clicked', function(e){\n                console.log(e.type, e.detail.line);\n            });\n        });\n    \u003c/script\u003e\n    \nFor now the element has only one method api which is `stop()` that stops the refreshing of the component and it stops requesting for more data:\n\n    var el = document.getElementsByTagName('polymer-tfl-status')[0];\n    el.stop();","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbeldar%2Ftfl-status","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbeldar%2Ftfl-status","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbeldar%2Ftfl-status/lists"}