toolbar.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4 <style>
   5         body {
   6                 overflow: hidden;
   7         }
   8         #selector {
   9                 float: left;
  10                 margin-left: 5px;
  11                 margin-right: 6px;
  12         }
  13         #selector #menu {
  14                 -webkit-appearance: none;
  15                 background: inherit;
  16                 border: inherit;
  17                 border-radius: inherit;
  18                 width: 16px;
  19                 height: 16px;
  20                 padding-left: 16px;
  21                 background: url(sort.png) no-repeat;
  22                 outline: none;
  23         }
  24         #selector #tag-selected {
  25                 vertical-align: bottom;
  26                 margin-right: -6px;
  27         }
  28         #selector #selected {
  29                 line-height: 16px;
  30                 vertical-align: bottom;
  31                 font-size: xx-small;
  32         }
  33         .hidden {
  34                 display: none !important;
  35         }
  36         a.bookmark {
  37                 display: block;
  38                 float: left;
  39                 color: rgba(0, 0, 0, 0.796875);
  40                 margin-top: -1px;
  41                 text-decoration: none;
  42                 padding-top: 2px;
  43                 padding-bottom: 2px;
  44                 padding-left: 7px;
  45                 padding-right: 7px;
  46                 cursor: default;
  47         }
  48         a.bookmark:hover {
  49                 color: white;
  50                 background-color: rgba(0, 0, 0, 0.2);
  51                 -webkit-border-radius: 10px;
  52                 text-shadow: rgba(0, 0, 0, 0.398438) 0px 1px 0px;
  53         }
  54 </style>
  55 <script type="text/javascript" src="jquery-1.4.2.min.js"></script>
  56 <script type="text/javascript">
  57         function redrawWindow() {
  58                 $('.bookmark').removeClass('to-be-hidden')
  59                 $('.bookmark').removeClass('hidden');
  60                 $('.bookmark').each(function() {
  61                         if ($(this).offset().top > 10) {
  62                                 $(this).addClass('to-be-hidden');
  63                         }
  64                 });
  65                 $('.to-be-hidden').addClass('hidden').removeClass('to-be-hidden');
  66         };
  67         function reloadBookmarks(username, bookmarks) {
  68                 var output = '';
  69                 for (var i = 0; i < bookmarks.length; i++) {
  70                         var bookmark = bookmarks[i];
  71                         var label = bookmark.name;
  72                         if (label.length > 27) {
  73                                 var firstPart = label.substr(0, 12);
  74                                 var secondPart = label.substr(label.length - 12, 12);
  75                                 label = firstPart + "&hellip;" + secondPart;
  76                         }
  77                         output += '<a class="bookmark" title="' + bookmark.url + '" href="' + bookmark.url + '">' + label + '</a>';
  78                 }
  79                 $('#bookmarks').html(output);
  80                 redrawWindow();
  81         };
  82         function reloadMenu(username, tags, currentTag) {
  83                 var menu = $('#menu');
  84                 menu.empty();
  85                 if (username) {
  86                         menu.append('<option value="home">My Delicious</option>');
  87                         menu.append('<hr />');
  88                         menu.append('<option id="all" value="all">All Bookmarks</option>');
  89                         menu.append('<optgroup id="tags" label="All Bookmarks with Tag"></optgroup>');
  90                         var tagContainer = menu.find('#tags');
  91                         tagContainer.empty();
  92                         for (var i = 0; i < tags.length; i++) {
  93                                 var tag = tags[i];
  94                                 var toAppend = '<option ';
  95                                 if (currentTag && tag.tag == currentTag) {
  96                                         toAppend += 'selected="selected" ';
  97                                 }
  98                                 toAppend += 'value="tag:' + tag.tag + '">' + tag.tag + ' (' + tag.count + ')</option>';
  99                                 tagContainer.append(toAppend);
 100                         }
 101                         menu.append('<hr />');
 102                         if (currentTag) {
 103                                 $('#selected').html(currentTag);
 104                                 $('#tag-selected').removeClass('hidden');
 105                                 $('#selected').removeClass('hidden');
 106                         } else {
 107                                 $('#menu')[0].selectedIndex = 1;
 108                                 $('#tag-selected').addClass('hidden');
 109                                 $('#selected').addClass('hidden');
 110                         }
 111                         $('#selector').removeClass('hidden');
 112                         $('#menu').removeAttr('disabled');
 113                 } else {
 114                         $('#selector').addClass('hidden');
 115                         $('#menu').attr('disabled', 'disabled');
 116                 }
 117                 menu.append('<option value="refresh">Refresh</option>');
 118         };
 119         function refresh(delicious) {
 120                 var username = delicious.username;
 121                 var bookmarks = delicious.bookmarks;
 122                 var currentTag = delicious.currentTag || '';
 123                 var tags = delicious.tags;
 124                 reloadMenu(username, tags, currentTag);
 125                 reloadBookmarks(username, bookmarks);
 126         };
 127         $(function() {
 128                 $(window).resize(redrawWindow);
 129                 $('#menu').change(function(event) {
 130                         if (!event.target.previousIndex) {
 131                                 event.target.previousIndex = event.target.selectedIndex;
 132                         }
 133                         var option = event.target.options[event.target.selectedIndex];
 134                         if (option.value.substr(0, 4) == 'tag:') {
 135                                 var tag = option.value.substr(4);
 136                                 safari.extension.globalPage.contentWindow.Delicious.reloadBookmarksWithTag(tag);
 137                         } else if (option.value == 'all') {
 138                                 safari.extension.globalPage.contentWindow.Delicious.reloadBookmarks();
 139                         } else if (option.value == 'refresh') {
 140                                 refresh(safari.extension.globalPage.contentWindow.Delicious);
 141                                 event.target.selectedIndex = event.target.previousIndex;
 142                         } else if (option.value == 'home') {
 143                                 var tab = safari.application.activeBrowserWindow.openTab();
 144                                 tab.url = 'http://delicious.com/home';
 145                                 event.target.selectedIndex = event.target.previousIndex;
 146                         }
 147                         event.target.previousIndex = event.target.selectedIndex;
 148                 });
 149                 refresh(safari.extension.globalPage.contentWindow.Delicious);
 150         });
 151 </script>
 152 <title>Toolbar</title>
 153 </head>
 154         <body>
 155                 <div id="selector" class="hidden">
 156                         <select name="menu" id="menu" disabled="disabled">
 157                         </select>
 158                         <img id="tag-selected" src="tag-small.png" class="hidden" />
 159                         <span id="selected" class="hidden"></span>
 160                 </div>
 161                 <div id="bookmarks">
 162                 </div>
 163         </body>
 164 </html>