{"id":22468586,"url":"https://github.com/projectweekend/angular-skycons","last_synced_at":"2025-08-02T08:32:24.499Z","repository":{"id":15315073,"uuid":"18045054","full_name":"projectweekend/angular-skycons","owner":"projectweekend","description":"An AngularJS directive for Forecast.io animated skycons","archived":false,"fork":false,"pushed_at":"2015-06-28T16:35:48.000Z","size":502,"stargazers_count":23,"open_issues_count":1,"forks_count":8,"subscribers_count":5,"default_branch":"master","last_synced_at":"2024-04-13T11:07:19.789Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/projectweekend.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2014-03-23T22:22:35.000Z","updated_at":"2021-03-19T20:40:06.000Z","dependencies_parsed_at":"2022-08-30T12:11:08.535Z","dependency_job_id":null,"html_url":"https://github.com/projectweekend/angular-skycons","commit_stats":null,"previous_names":[],"tags_count":13,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/projectweekend%2Fangular-skycons","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/projectweekend%2Fangular-skycons/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/projectweekend%2Fangular-skycons/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/projectweekend%2Fangular-skycons/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/projectweekend","download_url":"https://codeload.github.com/projectweekend/angular-skycons/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":228453982,"owners_count":17922585,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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-12-06T11:17:53.809Z","updated_at":"2024-12-06T11:17:54.418Z","avatar_url":"https://github.com/projectweekend.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"This is an [AngularJS](http://angularjs.org/) module that makes it super easy to add [Forecast.io](http://forecast.io/) skycons to your app. [Skycons](http://darkskyapp.github.io/skycons/) is an open-source set of animated weather glyphs that uses JavaScript and the HTML5 canvas element.\n\n![Example Skycons](https://raw.githubusercontent.com/projectweekend/angular-skycons/master/screenshots/example-skycons.png)\nNote: my crappy screen shot image is not animated ;)\n\n## Installation\nThis project, along with all of its dependencies are installed with [Bower](http://bower.io/): `bower install angular-skycons`.\n\n## Set up\nIf you're familar with how to include third-party modules in AngularJS, then you can probably skip this section. If you're new to the framework, this should help.\n\n### Step 1\nInclude the following files before the main app file:\n\n~~~html\n\u003cscript src=\"/bower_components/skycons/skycons.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"/bower_components/angular-skycons/angular-skycons.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"/js/app.js\"\u003e\u003c/script\u003e\n~~~\n\nOr use the minified version. As a convenience, this version has the `skycons.js` dependency included so you only need to include one file.\n\n~~~html\n\u003cscript src=\"/bower_components/angular-skycons/angular-skycons.min.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"/js/app.js\"\u003e\u003c/script\u003e\n~~~\n\n\n### Step 2\nAdd `angular-skycons` to the app requirements (`/js/app.js`).\n~~~javascript\nvar app = angular.module('myApp', [\n    'myApp.controllers',\n    'myApp.filters',\n    'myApp.services',\n    // 3rd party dependencies\n    'angular-skycons'\n]);\n~~~\n\n## Use it\nThis module creates a custom directive (tag) that you can use anywhere in your templates. This directive has four attributes:\n\n* **icon** - This one is **required** since it defines which icon you want to display. It also must be bound to a property of a controller. The accepted values for this attribute correspond to the values returned in the `icon` property of data point objects in the [Forecast.io API](https://developer.forecast.io/docs/v2). The possible options are: `clear-day`, `clear-night`, `rain`, `snow`, `sleet`, `wind`, `fog`, `cloudy`, `partly-cloudy-day`, or `partly-cloudy-night`.\n* **size** - This is optional, but must be bound to a property of a controller. Having this value come from the controller means that you can set it dynamically based on things like `$window.innerWidth`, etc. Since the icon is always a square, you only need to provide a single value. If the `size` attribute is not present, the default is a 64px square.\n* **animated** - This is optional, but must be bound to a property of a controller. Setting the value to `false` or the string `\"false\"` will stop animation of the icon.\n* **color** - This is optional, but must be bound to a property of a controller. If it is not present, the default is `black`.\n* **class** - Use this to set the CSS class if needed.\n\n#### Controller Example\n~~~javascript\nvar cMod = angular.module( 'myApp.controllers', [] );\n\ncMod.controller( 'WeatherCtrl', function ( $scope ) {\n\n    /*\n        This example is over simplified to demonstrate the relationship\n        between the 'controller' and the 'template' with regard to loading\n        the 'icon' value. Hopefully, you will be loading your controller with\n        data from an actual API response. :)\n    */\n\t$scope.CurrentWeather = {\n        forecast: {\n            icon: \"partly-cloudy-night\",\n            iconSize: 100,\n            color: \"blue\",\n            ...\n        }\n    };\n\n} );\n~~~\n\n#### Template Example\n~~~html\n\u003cskycon icon=\"CurrentWeather.forecast.icon\" size=\"CurrentWeather.forecast.iconSize\"\u003e\u003c/skycon\u003e\n\n\u003cskycon icon=\"CurrentWeather.forecast.icon\"\u003e\u003c/skycon\u003e\n\n\u003cskycon icon=\"CurrentWeather.forecast.icon\"\u003e\u003c/skycon\u003e\n~~~\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fprojectweekend%2Fangular-skycons","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fprojectweekend%2Fangular-skycons","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fprojectweekend%2Fangular-skycons/lists"}