OLD | NEW |
(Empty) | |
| 1 <!DOCTYPE HTML> |
| 2 <title>Bookmark View</title> |
| 3 <style> |
| 4 |
| 5 .bookmark { |
| 6 margin-left: 5px; |
| 7 padding: 2px; |
| 8 } |
| 9 |
| 10 .bookmark_title { |
| 11 display: inline; |
| 12 border: 1px solid white; |
| 13 padding: 0px 3px; |
| 14 } |
| 15 |
| 16 .bookmark_title:hover { |
| 17 background-color: silver; |
| 18 border: 1px solid black; |
| 19 } |
| 20 |
| 21 .event-log { |
| 22 font-family: monospace; |
| 23 } |
| 24 |
| 25 </style> |
| 26 <script> |
| 27 // XXX Hack: When you call window.open('chrome-extension://...'), the window is |
| 28 // first navigated to about:blank, and then to the final URL. This confuses the |
| 29 // code that sets up our v8 extensions, and we don't end up with them running. |
| 30 // |
| 31 // If we noticed this happened, reload ourselves, which should fix it. |
| 32 if (!chromium.bookmarks) |
| 33 location.reload(); |
| 34 |
| 35 var logEvent = function(name, data) { |
| 36 var log = document.getElementById("event-log"); |
| 37 log.innerHTML = name + "<br>" + log.innerHTML; |
| 38 console.log("got event: " + name); |
| 39 } |
| 40 |
| 41 chromium.bookmarks.onBookmarkAdded.addListener(function(data) { |
| 42 logEvent("onBookmarkAdded", data); |
| 43 }); |
| 44 |
| 45 chromium.bookmarks.onBookmarkRemoved.addListener(function(data) { |
| 46 logEvent("onBookmarkRemoved", data); |
| 47 }); |
| 48 |
| 49 chromium.bookmarks.onBookmarkChanged.addListener(function(data) { |
| 50 logEvent("onBookmarkChanged", data); |
| 51 }); |
| 52 |
| 53 chromium.bookmarks.onBookmarkMoved.addListener(function(data) { |
| 54 logEvent("onBookmarkMoved", data); |
| 55 }); |
| 56 |
| 57 chromium.bookmarks.onBookmarkChildrenReordered.addListener(function(data) { |
| 58 logEvent("onBookmarkChildrenReordered", data); |
| 59 }); |
| 60 |
| 61 var prefix = "bookmark_"; |
| 62 |
| 63 var toggleBookmark = function(event) { |
| 64 event.stopPropagation(); |
| 65 var node = event.currentTarget; |
| 66 var id_str = node.id; |
| 67 if (id_str < prefix.length) |
| 68 return; |
| 69 var id = parseInt(id_str.substring(prefix.length)); |
| 70 if (id == NaN) |
| 71 return; |
| 72 console.log("toggle: " + id); |
| 73 //console.dir(event); |
| 74 chromium.bookmarks.get([id], function(bookmark) { |
| 75 //console.log("toggle get"); |
| 76 console.dir(bookmark[0]); |
| 77 if (bookmark[0].childrenIds && bookmark[0].childrenIds.length) { |
| 78 if (node.childNodes.length != 1) { |
| 79 //console.log("toggle collapse"); |
| 80 node.removeChild(node.childNodes[1]); |
| 81 } else { |
| 82 //console.log("before"); |
| 83 chromium.bookmarks.get(bookmark[0].childrenIds, function(children) { |
| 84 //console.log("toggle expand"); |
| 85 if (children && children.length) { |
| 86 console.dir(children); |
| 87 addBookmarks(children, node); |
| 88 } |
| 89 }); |
| 90 } |
| 91 } |
| 92 }); |
| 93 }; |
| 94 |
| 95 var addBookmark = function(bookmark, parent) { |
| 96 //console.log("addBookmark " + bookmark.id); |
| 97 var child = document.createElement('li'); |
| 98 child.className = 'bookmark'; |
| 99 child.id = prefix + bookmark.id; |
| 100 child.addEventListener('click', toggleBookmark, false); |
| 101 if (bookmark.url && bookmark.url.length) { |
| 102 var link = document.createElement('a'); |
| 103 link.href = bookmark.url; |
| 104 link.innerHTML = bookmark.title; |
| 105 link.className = 'bookmark_title'; |
| 106 child.appendChild(link); |
| 107 } else { |
| 108 var title = document.createElement('div'); |
| 109 title.innerHTML = bookmark.title; |
| 110 title.className = 'bookmark_title'; |
| 111 child.appendChild(title); |
| 112 } |
| 113 parent.appendChild(child); |
| 114 }; |
| 115 |
| 116 var addBookmarks = function(bookmarks, parent) { |
| 117 console.log("addBookmarks " + parent.id); |
| 118 var list = document.createElement("ul"); |
| 119 parent.appendChild(list); |
| 120 bookmarks.forEach(function(bookmark) { addBookmark(bookmark, list); }); |
| 121 }; |
| 122 |
| 123 var loadBookmarks = function() { |
| 124 var container = document.getElementById('container'); |
| 125 chromium.bookmarks.get([], function(results) { |
| 126 var root = results[0]; |
| 127 console.dir(root); |
| 128 var rootElement = document.createElement("div"); |
| 129 rootElement.id = prefix + root.id; |
| 130 // root element is empty / invisible, just an id to be looked up |
| 131 container.appendChild(rootElement); |
| 132 chromium.bookmarks.get(root.childrenIds, function(children) { |
| 133 addBookmarks(children, rootElement); |
| 134 }); |
| 135 }); |
| 136 }; |
| 137 |
| 138 </script> |
| 139 <body onload="loadBookmarks()"> |
| 140 <div id="container"> |
| 141 </div> |
| 142 <div id="event-log"></div> |
| 143 </body> |
OLD | NEW |