{"id":19832314,"url":"https://github.com/link2twenty/pull-to-action","last_synced_at":"2025-10-29T19:34:45.738Z","repository":{"id":32106898,"uuid":"35679222","full_name":"Link2Twenty/pull-to-action","owner":"Link2Twenty","description":"Polymer element to trigger javaScript action on pulldown ","archived":false,"fork":false,"pushed_at":"2018-01-29T14:31:30.000Z","size":6626,"stargazers_count":43,"open_issues_count":3,"forks_count":11,"subscribers_count":6,"default_branch":"master","last_synced_at":"2025-02-11T10:21:22.672Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"http://link2twenty.github.io/pull-to-action","language":"HTML","has_issues":false,"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/Link2Twenty.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":"2015-05-15T14:43:02.000Z","updated_at":"2022-08-01T01:34:16.000Z","dependencies_parsed_at":"2022-08-29T08:51:08.026Z","dependency_job_id":null,"html_url":"https://github.com/Link2Twenty/pull-to-action","commit_stats":null,"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Link2Twenty%2Fpull-to-action","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Link2Twenty%2Fpull-to-action/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Link2Twenty%2Fpull-to-action/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Link2Twenty%2Fpull-to-action/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Link2Twenty","download_url":"https://codeload.github.com/Link2Twenty/pull-to-action/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":241191629,"owners_count":19925302,"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-11-12T11:37:22.399Z","updated_at":"2025-10-29T19:34:40.687Z","avatar_url":"https://github.com/Link2Twenty.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"⚠️ DEPRECATED: This project is no longer actively developed ⚠️\r\n\r\n# \u003c pull-to-action \u003e\r\nHave a quick look at the [Component page](http://link2twenty.github.io/pull-to-action) \r\n\r\n## What is it?\r\n\"pull-to-action\" is a polymer element to perform a pull to refresh like animation and action within web apps.\r\n\r\nBefore we get started here is a little example of what it can look like baked into a real app\r\n\r\n![Screenshot](https://media.giphy.com/media/l2JJraDUGjqLQQQyQ/giphy.gif)\r\n\r\n## Getting started\r\n\r\n### Install with bower\r\n\r\nFirst you need bower, [see their site](http://bower.io/) for details \r\n\r\n```\r\nbower install --save pull-to-action\r\n```\r\n\r\n### Attributes\r\n\r\n| Attribute Name | Functionality | Default |\r\n|----------------|-------------|-------------|\r\n| action* | A callback function that for which action should be performed | alert(\"You need to set the action attribute\") |\r\n| container | the container element (if identifing with id start with # and . for class) | body |\r\n| distance | How far the user has to drag the screen | 100 |\r\nrequired*\r\n\r\n### Styling\r\n\r\nCustom property | Description | Default\r\n----------------|-------------|----------\r\n`--pull-icon-color` | Color of refresh icon. | `#ccc`\r\n\r\n### How to use\r\n\r\nIf you are looking at useing other peoples custom polymer elements I am going to guess you have some idea what's going on already. If not have a look at the [polymer site](http://polymer-project.org).\r\n\r\nPut a link to pull to action in your header, it should look something like.\r\n```html\r\n\u003clink rel=\"import\" href=\"bower_components/pull-to-action/pull-to-action.html\"\u003e\r\n\u003cstyle is=\"custom-style\"\u003e\r\n  :root {\r\n    --pull-icon-color: red;\r\n  }\r\n\u003c/style\u003e\r\n```\r\n\r\nNow that you have imported it you can get to using it on your page\r\n```html\r\n\u003cbody\u003e\r\n\u003cdiv id=\"scrollablecontainer\"\u003e\r\n\u003cpull-to-action action=\"location.reload()\" container=\"#scrollablecontainer\"\u003e\u003c/pull-to-action\u003e\r\n\u003ch1\u003eSo much content\u003c/h1\u003e\r\n... \u003cbr\u003e\r\n... \u003cbr\u003e\r\n... \u003cbr\u003e\r\n\u003c/div\u003e\r\n\u003c/body\u003e\r\n```\r\n\r\nNow with very little code we have made a simple red spinning icon to reload the page, in this instance it reload the whole URL but you could easily have a JS function to generate some JSON to repopulate the page, creating a seamless app like experience.\r\n\r\n![example image](https://media.giphy.com/media/3ornk5BJKhkSN6fTbO/giphy.gif)\r\n\r\n##### Running Unit Tests\r\n\r\nMake sure that you have `wct` installed on your local machine. To get more details about `wct`, please look into the [Unit Testing Polymer Elements](https://www.polymer-project.org/0.5/articles/unit-testing-elements.html) article.\r\n\r\n- The unit tests for `pull-to-action` element is in the test folder. You can run the tests by typing the command `wct` from the root folder of the project. \r\n- To add or remove browsers that needs to be tested, look into `wct.conf.js` file. \r\n- You can add more test cases in `test/pull-to-action-tests.js`\r\n\r\n## Advanced\r\n### Using the actionTimer hook\r\nThe actionTimer hook is in place to get the element to keep spinning while you load in your data, it is not needed but makes the app seem more responsive. I will show you a test app twice using iron-ajax and pull-to-action, once with the hook implemented and once without.\r\n\r\nBelow is a simple element called reddit-scan, it uses iron-ajax to create a list of the lastest posts to reddit \r\n\r\n```\r\n\u003cdom-module id=\"reddit-scan\"\u003e\r\n  \u003ctemplate\u003e\r\n    \u003ciron-ajax\r\n      auto id=\"ajaxGet\"\r\n      url=\"https://www.reddit.com/new/.json\"\r\n      handle-as=\"json\"\r\n\t  loading={{loading}}\r\n      last-response=\"{{response}}\"\u003e\u003c/iron-ajax\u003e\r\n\r\n\t  \u003cpaper-material elevation=\"1\"\u003ePage is loading content: \u003cb\u003e{{loading}}\u003c/b\u003e\u003ci\u003e\u003c/i\u003e\u003c/paper-material\u003e\r\n      \u003ctemplate is=\"dom-repeat\" items=\"{{response.data.children}}\"\u003e\r\n          \u003cpaper-material elevation=\"1\"\u003e\r\n            \u003cdiv class=\"header\"\u003e\u003ca href=\"{{item.data.url}}\"\u003e\u003cb\u003e{{item.data.title}}\u003c/b\u003e\u003c/a\u003e\u003c/div\u003e\r\n            \u003cspan class=\"subreddit\"\u003ePosted in \u003ci\u003e{{item.data.subreddit}}\u003c/i\u003e by \u003ci\u003e{{item.data.author}}\u003c/i\u003e\u003c/span\u003e\r\n          \u003c/paper-material\u003e\r\n      \u003c/template\u003e\r\n  \u003c/template\u003e\r\n\u003c/dom-module\u003e\r\n```\r\n\r\n### With actionTimer implemented\r\n\r\nHere is the script section, with actionTrigger implemented\r\n\r\n```\r\nPolymer({\r\n  is: 'reddit-scan',\r\n\tproperties: {\r\n\t\tloading: {\r\n\t\t\ttype: String,\r\n\t\t\tnotify: true,\r\n\t\t\tobserver: '_checkLoading' // This will run _checkLoading when loading changes\r\n\t\t},\r\n\t\terror: {\r\n\t\t\ttype: String,\r\n\t\t\tnotify: true,\r\n\t\t\tobserver: '_checkLoading'\r\n\t\t}\r\n\t},\r\n  doSend: function () {\r\n\t\tthis.$.ajaxGet.generateRequest();\r\n\t\tactionTrigger = 1; \t// This sets actionTrigger to 1 when \"document.querySelector('reddit-scan').doSend()\" \r\n\t\t\t\t\t\t\t\t\t\t\t\t// is called in the main application\r\n\t},\r\n\t_checkLoading: function() {\r\n\t\tif(!this.loading == true) { // When loading is not true\r\n\t\t\tactionTrigger = 0; // Set actionTrigger to 0, making the spinner hide.\r\n\t\t}\r\n\t}\r\n});\r\n```\r\n\r\n![Screenshot](https://media.giphy.com/media/l2JJraDUGjqLQQQyQ/giphy.gif)\r\n\r\n### Without actionTimer implemented\r\nHere we have the same code but without using actionTimer\r\n\r\n```\r\nPolymer({\r\n  is: 'reddit-scan',\r\n  doSend: function () {\r\n\t\tthis.$.ajaxGet.generateRequest();\r\n\t}\r\n});\r\n```\r\nThe code is quite a bit shorter but no matter how long it take to load the data the animation time will be the same. Gif below.\r\n\r\n![Screenshot](https://media.giphy.com/media/l0IpXjo4kJLKcxqdW/giphy.gif)\r\n\r\n## Conclusion\r\nIf you don't feel confident using actionTrigger pull-to-action will work fine without it, but if you do use it, it can make a huge difference to the aesthetics of your app.\r\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flink2twenty%2Fpull-to-action","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flink2twenty%2Fpull-to-action","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flink2twenty%2Fpull-to-action/lists"}