| OLD | NEW |
|---|
| (Empty) |
| 1 <!-- | |
| 2 This in an HTML Import-able file that contains the definition | |
| 3 of the following elements: | |
| 4 | |
| 5 <pageable-data> | |
| 6 | |
| 7 The pageable-data element allows for easy paging of data from the swarming | |
| 8 server. It displays a button to the user to go fetch more data, which will | |
| 9 be appended to the output, rather than replaced, which is typical in | |
| 10 elements like iron-ajax. | |
| 11 | |
| 12 Typical usage is | |
| 13 | |
| 14 this.$.page.clear(); | |
| 15 this.$.page.load("/api/frobulator?alpha=beta", this.auth_headers, 20); | |
| 16 | |
| 17 which initializes the url to query and goes to fetch the first 20 records | |
| 18 from the api. The user can then click the button to get the next page of | |
| 19 data. This can be done programatically with page(). | |
| 20 | |
| 21 Properties: | |
| 22 // input | |
| 23 label: String, what to label the button to page for more data. | |
| 24 parse: Function, This function takes the JSON object from the server and | |
| 25 returns an array of objects. Preprocessing should be done in this | |
| 26 function, if necessary. | |
| 27 | |
| 28 // output | |
| 29 busy: Boolean, if a request is in flight. Calls to page() while busy will | |
| 30 be ignored. | |
| 31 output: Array<Object> the accumulated values from the server. | |
| 32 | |
| 33 Methods: | |
| 34 clear(): Reset the element, emptying output. page() will not work until | |
| 35 a call to load() has been made. | |
| 36 | |
| 37 load(url, headers, [pageSize]): Initialize the element and make a call to | |
| 38 the server for the first batch of data. If [pageSize] is omitted, the | |
| 39 server default (or those specified in the url) will be used | |
| 40 | |
| 41 page(): Must be called after a call to load(). Fetch the next batch of | |
| 42 data from the server. | |
| 43 | |
| 44 Events: | |
| 45 None. | |
| 46 --> | |
| 47 | |
| 48 <link rel="import" href="/res/imp/common/swarming-app.html"> | |
| 49 | |
| 50 <dom-module id="pageable-data"> | |
| 51 <template> | |
| 52 <style include="swarming-app-style"> | |
| 53 </style> | |
| 54 | |
| 55 <button | |
| 56 on-tap="page" | |
| 57 disabled$="[[_noMore(_cursor)]]"> | |
| 58 [[label]] | |
| 59 </button> | |
| 60 | |
| 61 </template> | |
| 62 <script> | |
| 63 (function(){ | |
| 64 var END = "END"; | |
| 65 Polymer({ | |
| 66 is: 'pageable-data', | |
| 67 | |
| 68 properties: { | |
| 69 // input | |
| 70 label: { | |
| 71 type: String, | |
| 72 value: "Show More", | |
| 73 }, | |
| 74 parse: { | |
| 75 type: Function, | |
| 76 value: function(){ | |
| 77 return function(a){ | |
| 78 return a; | |
| 79 }; | |
| 80 }, | |
| 81 }, | |
| 82 | |
| 83 // output | |
| 84 busy: { | |
| 85 type: Boolean, | |
| 86 value: false, | |
| 87 notify: true, | |
| 88 }, | |
| 89 output: { | |
| 90 type: Array, | |
| 91 notify: true, | |
| 92 }, | |
| 93 | |
| 94 _cursor: { | |
| 95 type: String, | |
| 96 value: null, | |
| 97 }, | |
| 98 _url: { | |
| 99 type: String, | |
| 100 }, | |
| 101 _headers: { | |
| 102 type: Object, | |
| 103 }, | |
| 104 _page_size: { | |
| 105 type: Number, | |
| 106 } | |
| 107 }, | |
| 108 | |
| 109 clear: function() { | |
| 110 this.set("output", []); | |
| 111 this._cursor = null; | |
| 112 this._url = ""; | |
| 113 }, | |
| 114 | |
| 115 load: function(url, headers, pageSize) { | |
| 116 if (!url) { | |
| 117 throw "url can't be blank"; | |
| 118 } | |
| 119 if (url.indexOf("?") === -1) { | |
| 120 url += "?"; | |
| 121 } | |
| 122 this._url = url; | |
| 123 this._headers = headers; | |
| 124 this._page_size = pageSize; | |
| 125 this._cursor = null; | |
| 126 this.page(); | |
| 127 }, | |
| 128 | |
| 129 page: function() { | |
| 130 if (this.busy || this._cursor === END) { | |
| 131 // ignore pages while we are loading or are at the end of the data. | |
| 132 return; | |
| 133 } | |
| 134 if (!this._url) { | |
| 135 throw "You must first call load() before calling page()"; | |
| 136 } | |
| 137 this.set("busy", true); | |
| 138 | |
| 139 var url = this._url; | |
| 140 if (this._page_size) { | |
| 141 url += "&limit=" + this._page_size; | |
| 142 } | |
| 143 if (this._cursor) { | |
| 144 url += "&cursor=" + this._cursor; | |
| 145 } | |
| 146 | |
| 147 sk.request("GET", url, "", this._headers).then(JSON.parse).then(function
(json){ | |
| 148 var vals = this.parse(json); | |
| 149 // !this._cursor means this is our first load and we should empty the | |
| 150 // array | |
| 151 if (!this._cursor || !this.output) { | |
| 152 this.set("output", vals); | |
| 153 } else { | |
| 154 this.push("output", ...vals); | |
| 155 } | |
| 156 this.set("_cursor", json.cursor || END); | |
| 157 this.set("busy", false); | |
| 158 }.bind(this)).catch(function(reason){ | |
| 159 console.log("Reason for failure of request to " + this._url, reason); | |
| 160 sk.errorMessage("Could not get next set of results. Try reloading the
page?", 0); | |
| 161 this.set("busy", false); | |
| 162 }.bind(this)); | |
| 163 }, | |
| 164 | |
| 165 _noMore: function(cursor) { | |
| 166 return cursor === END; | |
| 167 } | |
| 168 }); | |
| 169 })(); | |
| 170 </script> | |
| 171 </dom-module> | |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 2408743002:
Move elements/ to ui/ (Closed)
