{"id":13749643,"url":"https://github.com/FokkeZB/nl.fokkezb.loading","last_synced_at":"2025-05-09T12:33:27.695Z","repository":{"id":57176649,"uuid":"9601974","full_name":"FokkeZB/nl.fokkezb.loading","owner":"FokkeZB","description":"The widget provides a simple loading mask that can be easily styled and configured.","archived":true,"fork":false,"pushed_at":"2018-03-18T12:17:04.000Z","size":233,"stargazers_count":94,"open_issues_count":0,"forks_count":18,"subscribers_count":10,"default_branch":"master","last_synced_at":"2025-04-11T11:19:38.240Z","etag":null,"topics":["alloy","android","appcelerator","archived","axway","ios","titanium"],"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/FokkeZB.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":"2013-04-22T15:19:49.000Z","updated_at":"2025-02-12T06:27:30.000Z","dependencies_parsed_at":"2022-09-04T11:01:58.951Z","dependency_job_id":null,"html_url":"https://github.com/FokkeZB/nl.fokkezb.loading","commit_stats":null,"previous_names":[],"tags_count":16,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FokkeZB%2Fnl.fokkezb.loading","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FokkeZB%2Fnl.fokkezb.loading/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FokkeZB%2Fnl.fokkezb.loading/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FokkeZB%2Fnl.fokkezb.loading/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/FokkeZB","download_url":"https://codeload.github.com/FokkeZB/nl.fokkezb.loading/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253252024,"owners_count":21878620,"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":["alloy","android","appcelerator","archived","axway","ios","titanium"],"created_at":"2024-08-03T07:01:08.620Z","updated_at":"2025-05-09T12:33:27.381Z","avatar_url":"https://github.com/FokkeZB.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"\u003e **ARCHIVED**\n\u003e Contact [mail@fokkezb.nl](mailto:mail@fokkezb.nl) if you'd like to take it over.\n\n# Loading Mask Widget\n\n## Overview\nThis is a widget for the [Alloy](http://projects.appcelerator.com/alloy/docs/Alloy-bootstrap/index.html) MVC framework of [Appcelerator](http://www.appcelerator.com)'s [Titanium](http://www.appcelerator.com/platform) platform.\n\nThe widget provides a simple loading mask that can be easily styled and configured.\n\nBy default it uses the native [ProgressIndicator](http://docs.appcelerator.com/titanium/latest/#!/api/Titanium.UI.Android.ProgressIndicator) for Android but you can easily switch to use the same cross-platform version on both iOS and Android.\n\n## Screenshot\n![Loading Mask](https://raw.github.com/FokkeZB/nl.fokkezb.loading/master/docs/screenshot.png) ![Loading Mask](https://raw.github.com/FokkeZB/nl.fokkezb.loading/master/docs/android.png)\n\n## Features\n* Fully stylable via your `app.tss`.\n* Can be set to be cancelable by user, setting a function to be called in that case.\n* Message and ability to be cancelled can be set every time it's used.\n* Can be via single global instance or local instances.\n* Available as native [ProgressIndicator](http://docs.appcelerator.com/titanium/latest/#!/api/Titanium.UI.Android.ProgressIndicator) (Android), Window and View.\n\n## Quick Start [![gitTio](http://img.shields.io/badge/on-gittio-00B4CC.svg)](http://gitt.io/component/nl.fokkezb.loading) [![npm](http://img.shields.io/npm/v/alloy-widget-nl.fokkezb.loading.svg)](https://www.npmjs.org/package/alloy-widget-nl.fokkezb.loading)\n\n* Use `gittio install nl.fokkezb.loading` to install via [gitTio](http://gitt.io/cli) or `npm i alloy-widget-nl.fokkezb.loading` to install via NPM or:\n\n  * Download the latest [release](https://github.com/FokkeZB/nl.fokkezb.loading/releases) of the widget.\n  * Unzip the folder to your project under `app/widgets/nl.fokkezb.loading`.\n  * Add the widget as a dependency to your `app/config.json` file:\n    ```json\n    \"dependencies\": {\n        \"nl.fokkezb.loading\":\"*\"\n    }\n    ```\n* Create a global instance of the widget in `alloy.js`:\n  ```javascript\n  Alloy.Globals.loading = Alloy.createWidget(\"nl.fokkezb.loading\");\n  ```\n* Show and hide the loading mask when you need it:\n  ```javascript\n  function cancel() {\n      alert('Why?!');\n  }\n      \n  function load() {\n      Alloy.Globals.loading.show('Your message', false);\n          \n      setTimeout(function(){\n          Alloy.Globals.loading.hide();\n      }, 6000);\n  }\n  ```\n    \n* In Titanium 3.3.0 you need to hide the Android Actionbar as [described in this blog](http://www.appcelerator.com/blog/2014/08/hiding-the-android-actionbar/). If you use Titanium 3.3.1 or later the widget automatically requests for a theme with no actionbar.\n\n## Global vs Local\nThe Quick Start shows how to use the global-mode. You only have to create one global widget instance that will (try to) make sure that there's always one loading mask showing. You can also use one of the 3 available types of loading masks directly as a local instance, as we'll see when we look at the types.\n\n### Types\nThe widget exposes different types of loading masks. All types share the same API so you can easily switch between them.\n\n### Native Progress (Android-only)\n\nThe global default for Android is to use [ProgressIndicator](http://docs.appcelerator.com/titanium/latest/#!/api/Titanium.UI.Android.ProgressIndicator). You can disable this by setting the `progress` property of the global widget to `false` or using one of the 2 other types directly in a local instance. The Native Progress type itself can also be used as a local instance:\n\n```javascript\nvar myInstance = Alloy.createWidget('nl.fokkezb.loading', 'progress');\nmyInstance.show('My message', myCancelCallback);\t\n```\n\n### Window\nThe only available global mode for iOS is to show a Window. You can also create a local instance:\n\n```javascript\nvar myInstance = Alloy.createWidget('nl.fokkezb.loading', 'window');\nmyInstance.show('My message', myCancelCallback);\n```\n\n### View\n\nYou can also create the widget as a local view which you can require in any (composite) layout. The typical use case for this is to display the widget over a modal window since the window-type would open behind such a window and be invisible.\n\n**index.xml**\n\n```xml\n\u003cAlloy\u003e\n    \u003cWindow\u003e\n\t\u003cWidget src=\"nl.fokkezb.loading\" name=\"view\" id=\"myInstance\" /\u003e\n    \u003c/Window\u003e\n\u003c/Alloy\u003e\n```\n\n**index.js**\n\n```javascript\n$.myInstance.show('My message', myCancelCallback);\n```\n\n## Public API\nAll types share the same public API:\n\n### Attributes\n|Name|Type|Access|Description|\n|---|---|---|---|\n|`visible`|`boolean`|`read`, `write`|You'll get `true` if the loading mask is currently shown. If set to `true` or `false` it will call `show()` or `hide()`.|\n\n### Widget instantiation params\n\n|Name|Values|Description|\n|---|---|---|\n|`progress` *(global-only)*|`'progress'`, `true`, `false`|Set to `false` to use the cross-platform loading mask for Android instead of the default native [ProgressIndicator](http://docs.appcelerator.com/titanium/latest/#!/api/Titanium.UI.Android.ProgressIndicator).|\n\n### Methods\n\n|Name|Params|Description|\n|---|---|---|\n|`show`|`([message][, cancelable])`|Shows the loading mask or updates the existing, if it's still the top window. If the second argument is a function, the mask is user-cancelable at which event this method would be called.|\n|`update`|`([message][, cancelable])`|Updates the existing message and cancelable function. Not available in global-mode, where you'd simply call `show()` again.|\n|`hide`|`null`|Hides the loading mask.|\n\n## Styling\nYou can style all views from your `app.tss`. The default styles can be found in [window.tss](styles/window.tss). Be aware that the default styles are applied to classses, but to override from your `app.tss` you need to following (identical) IDs:\n\n* `#progressIndicator`: The native Android ProgressIndicator.\n* `#loadingWindow`: The window if using the (default) window mode.\n* `#loadingMask`: The full-screen mask.\n    * Set `images` to `true` to use the `#loadingImages` indicator.\n* `#loadingOuter`: The dark box containing the activityIndicator and message.\n* `#loadingInner`: Wraps arround the activityIndicator and message to provider padding.\n* `#loadingIndicator`: The activityIndicator.\n* `#loadingImages`: The indicator variant using images.\n* `#loadingMessage`: The message.\n\n## Internationalization\nYou can override the default message (`Loading..`) by setting the `loadingMessage` in your `strings.xml` files.\n\n## Changelog\n* 1.8:\n\t* New `view` mode to get the loading mask as a view instead of a window.\n\t* Consistent public API's for all types and modes.\n* 1.7:\n    * Uses native ProgressIndicator for Android\n    * Uses the `theme` property to select a theme with no ActionBar.\n* 1.6: Complete rewrite\n    * Widget creation now only in controller\n    * Styling now only in TSS\n    * Setting message and blocking now only via `show()`\n    * Cancel event replaced by callback as second argument for `show()`\n    * Second `show()` argument now `cancelable`, *reverse* of `blocking` (!!)\n    * On Android, hitting the back button on a non-cancelable loading mask will move app to the background\n* 1.5.2: Fixes empty loading mask on second show on Android\n* 1.5.1: Reverted 1.5 change thanks to `opacity` fix.\n* 1.5: Falls back to `Ti.UI.Android.ProgressIndicator` for Android\n* 1.4: Support for image indicator\n* 1.3: Fully override widget style from `app.tss` and reset to default message upon show.\n* 1.2: View replaced by Window, otherwise won't work in non-absolute layout modes.\n* 1.1: New parameter `show` to automatically show loading mask upon creation.\n* 1.0: Initial version\n\n## License\n\n\u003cpre\u003e\nCopyright 2013-2014 Fokke Zandbergen\n\nLicensed under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License.\nYou may obtain a copy of the License at\n\n   http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software\ndistributed under the License is distributed on an \"AS IS\" BASIS,\nWITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\nSee the License for the specific language governing permissions and\nlimitations under the License.\n\u003c/pre\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FFokkeZB%2Fnl.fokkezb.loading","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FFokkeZB%2Fnl.fokkezb.loading","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FFokkeZB%2Fnl.fokkezb.loading/lists"}