| <html> |
| <head> |
| <title>comments-sk demo</title> |
| <meta charset="utf-8"> |
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> |
| <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes"> |
| <script src="/res/common/js/common.js"></script> |
| <script src="/res/imp/bower_components/webcomponentsjs/webcomponents-lite.js"></script> |
| <script type="text/javascript" charset="utf-8"> |
| // Comments to display. |
| var comments = [ |
| { |
| id: 0, |
| user: "user@google.com", |
| time: 15000000, |
| message: "Hi! Check this out: http://www.google.com skia:4253", |
| extraBool: true, |
| extraText: "extra", |
| }, |
| { |
| id: 1, |
| user: "me@google.com", |
| time: 140000, |
| message: "Helloworld", |
| extraBool: true, |
| extraText: "extra", |
| }, |
| { |
| id: 2, |
| user: "user@google.com", |
| time: 1500002330, |
| message: "asdfkl", |
| extraBool: false, |
| extraText: "extra", |
| }, |
| { |
| id: 3, |
| user: "user@google.com", |
| time: 15000000, |
| message: "Hdsfai!", |
| extraBool: true, |
| extraText: "extra", |
| }, |
| { |
| id: 4, |
| user: "user@google.com", |
| time: 15000000, |
| message: "Hi42!", |
| extraBool: false, |
| extraText: "extra", |
| }, |
| { |
| id: 5, |
| user: "user@google.com", |
| time: 15000000, |
| message: "Hiasdkfj24390r8934!", |
| extraBool: true, |
| extraText: "extra", |
| }, |
| { |
| id: 6, |
| user: "user@google.com", |
| time: 15000000, |
| message: "H42094532985439849!", |
| extraBool: true, |
| extraText: "extra", |
| } |
| ]; |
| |
| function updateDemos() { |
| comments = comments.slice(); |
| var commentBoxes = $$("comments-sk"); |
| for (var i = 0; i < commentBoxes.length; i++) { |
| commentBoxes[i].comments = comments; |
| } |
| } |
| |
| function deleteComment(id) { |
| for (var i = 0; i < comments.length; i++) { |
| if (comments[i].id == id) { |
| comments.splice(i, 1); |
| updateDemos(); |
| return true; |
| } |
| } |
| return false; |
| } |
| |
| function addComment(comment) { |
| var maxId = 0; |
| for (var i = 0; i < comments.length; i++) { |
| if (comments[i].id > maxId) { |
| maxId = comments[i].id; |
| } |
| } |
| comment.id = maxId + 1, |
| comment.user = "YOU@google.com", |
| comment.time = 15000000, |
| comment.message = comment.comment, |
| comments.push(comment); |
| |
| updateDemos(); |
| } |
| |
| // Mock out sk.get() to return the login info. |
| sk.get = function(url) { |
| return new Promise(function (resolve, reject) { |
| resolve('{"Email":"user@google.com","LoginURL":"https://accounts.google.com/"}'); |
| }); |
| }; |
| |
| // Mock out sk.post() and sk.delete() to pretend to support adding and |
| // deleting comments. |
| sk.post = function(url, body) { |
| return new Promise(function (resolve, reject) { |
| addComment(JSON.parse(body)); |
| resolve("Added the comment."); |
| }); |
| } |
| |
| sk.delete = function(url) { |
| return new Promise(function (resolve, reject) { |
| var split = url.split("/"); |
| var id = split[split.length - 1]; |
| if (deleteComment(id)) { |
| resolve(""); |
| } else { |
| reject("Failed to delete the comment."); |
| } |
| }); |
| }; |
| </script> |
| <link rel="import" href="comments-sk.html"> |
| <link rel="import" href="error-toast-sk.html"> |
| <link rel="import" href="login.html"> |
| <style> |
| div.demo { |
| background-color: #EEEEEE; |
| padding: 10px; |
| margin: 10px; |
| } |
| comments-sk { |
| width: 100%; |
| } |
| </style> |
| </head> |
| <body> |
| <h1>comments-sk demo</h1> |
| <login-sk style="display:none;"></login-sk> |
| |
| <hr/> |
| <h2>Simple</h2> |
| <comments-sk></comments-sk> |
| |
| <hr/> |
| <h2>Allow Add Comments</h2> |
| <comments-sk allow_add_comment></comments-sk> |
| |
| <hr/> |
| <h2>Allow Delete Comments</h2> |
| <comments-sk allow_delete_comment></comments-sk> |
| |
| <hr/> |
| <h2>Allow Add and Delete</h2> |
| <comments-sk allow_add_comment allow_delete_comment></comments-sk> |
| |
| <hr/> |
| <h2>Collapsible</h2> |
| <comments-sk collapsible></comments-sk> |
| |
| <hr/> |
| <h2>Extra Fields</h2> |
| <comments-sk allow_add_comment extra_fields='[{"name":"extraText","label":"Extra Text","type":"text"},{"name":"extraBool","label":"Extra Bool","type":"bool"}]'></comments-sk> |
| |
| <error-toast-sk></error-toast-sk> |
| <script type="text/javascript" charset="utf-8"> |
| updateDemos(); |
| </script> |
| </body> |
| </html> |
