github.com/olivere/camlistore@v0.0.0-20140121221811-1b7ac2da0199/clients/chrome/clip-it-good/options.html (about)

     1  <!doctype html>
     2  <html>
     3  <head>
     4    <title>Clip It Good: Configure options</title>
     5    <link rel="stylesheet" href="jquery-ui-1.8.5.custom.css" type="text/css" charset="utf-8">
     6    <script type="text/javascript" src="jquery-1.4.2.min.js"></script>
     7    <script type="text/javascript" src="json2.js"></script>
     8    <script type="text/javascript" src="jquery-ui-1.8.5.custom.min.js"></script>
     9    <script type="text/javascript" src="chrome_ex_oauthsimple.js"></script>
    10    <script type="text/javascript" src="chrome_ex_oauth.js"></script>
    11  
    12    <style type="text/css">
    13      body {
    14        font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
    15      }
    16  
    17      #about {
    18        max-width: 400px;
    19      }
    20  
    21      /* Pop-up album selection */
    22      .album-type {
    23        margin-bottom: 1em;
    24      }
    25  
    26      .album-list {
    27        height: 250px;
    28        overflow-y: auto;
    29        overflow-x: hidden;
    30        list-style-type: none;
    31        margin: 0;
    32        padding: 0;
    33        border: 1px solid #555;
    34      }
    35      .album-list .ui-selecting {
    36        background: #FECA40;
    37      }
    38      .album-list .ui-selected {
    39        background: #F39814;
    40        color: #FFFFFF;
    41      }
    42      .album-list li {
    43        margin: 0;
    44        padding: 5px;
    45        border-top: 1px solid #DDD;
    46        border-bottom: 1px solid #BBB;
    47        background-color: #EEE;
    48        font-size: 0.8em;
    49        cursor: pointer;
    50      }
    51  
    52      .album-controls {
    53        margin-top: 1em;
    54      }
    55  
    56      /* Connected albums view */
    57      .album-type-picasa {
    58        
    59      }
    60      .album-section-title {
    61        
    62      }
    63      .add-album-control {
    64        margin-top: 2em;
    65      }
    66  
    67      /* other */
    68      .security-detail {
    69        max-width: 400px;
    70      }
    71  
    72    </style>
    73  
    74    <script type="text/javascript" charset="utf-8">
    75  
    76    var BG = chrome.extension.getBackgroundPage();
    77  
    78    // Generic album listing
    79    function removeAlbum(albumType, albumId) {
    80      delete BG.ALBUM_CONFIG[albumType][albumId];
    81      if ($.isEmptyObject(BG.ALBUM_CONFIG[albumType])) {
    82        delete BG.ALBUM_CONFIG[albumType];
    83      }
    84    }
    85  
    86    function populateAlbumList() {
    87      var connectedAlbums = $('#connected-list');
    88      connectedAlbums.contents().remove();
    89  
    90      BG.loadAlbumConfig();
    91      if ($.isEmptyObject(BG.ALBUM_CONFIG)) {
    92        connectedAlbums.text('No albums connected.');
    93        return;
    94      }
    95  
    96      $.each(BG.ALBUM_CONFIG, function(albumType, albumIdNameDict) {
    97        var albumSectionTitle = $('<h3 class="album-section-title">');
    98        albumSectionTitle.text(BG.ALBUM_TYPE_STRING[albumType]);
    99        connectedAlbums.append(albumSectionTitle);
   100  
   101        var albumSection = $('<ul class="album-section">');
   102        albumSection.addClass('album-type-' + albumType);
   103  
   104        $.each(BG.getSortedAlbums(albumIdNameDict), function(index, albumDict) {
   105          var album = $('<li class="connected-album">');
   106          album.attr('album-id', albumDict['id']);
   107          album.text(albumDict['name'] + ' ');
   108          var removeLink = $('<a href="">').text('(Remove)');
   109          removeLink.click(function(event) {
   110            removeAlbum(albumType, albumDict['id']);
   111            BG.saveAlbumConfig();
   112            populateAlbumList();
   113            BG.setupMenus();
   114  
   115            event.preventDefault();
   116            return false;
   117          });
   118          album.append(removeLink);
   119          albumSection.append(album);
   120        });
   121  
   122        connectedAlbums.append(albumSection);
   123      });
   124    }
   125  
   126    // Generic album selection
   127    function renderAlbumSelector(albumIdToName, albumType) {
   128      var selectAlbumDiv = $('#select-album');
   129      selectAlbumDiv.children('.album-type')
   130          .text(BG.ALBUM_TYPE_STRING[albumType]);
   131  
   132      var albumList = selectAlbumDiv.children('.album-list');
   133      albumList.contents().remove();
   134      $.each(albumIdToName, function(albumId, albumName) {
   135        var albumEntry = $('<li>');
   136        albumEntry.attr('album-id', albumId);
   137        albumEntry.text(albumName);
   138        albumList.append(albumEntry);
   139      });
   140      albumList.selectable();
   141  
   142      selectAlbumDiv.dialog({
   143        modal: true,
   144        resizable: false,
   145        width: 550,
   146        title: 'Connect an album',
   147        buttons: {
   148          'Add': function() {
   149            var selectedAlbums = $('#select-album>.album-list>.ui-selected');
   150            $.each(selectedAlbums, function(index, item) {
   151              if (!BG.ALBUM_CONFIG[albumType]) {
   152                BG.ALBUM_CONFIG[albumType] = {};
   153              }
   154              BG.ALBUM_CONFIG[albumType][$(item).attr('album-id')] =
   155                  $(item).text();
   156            });
   157            BG.saveAlbumConfig();
   158            populateAlbumList();
   159            BG.setupMenus();
   160            $(this).dialog('close');
   161          },
   162          'Cancel': function() {
   163            $(this).dialog('close');
   164          }
   165        }
   166      });
   167    }
   168  
   169    // Picasa-specific album selection
   170    function picasaListAlbumsDone(jsonData) {
   171      var albumIdToName = {};
   172      $.each(jsonData.feed.entry, function(index, entryData) {
   173        albumIdToName[entryData['gphoto$id']['$t']] = entryData.title['$t'];
   174      });
   175      renderAlbumSelector(albumIdToName, BG.PICASA);
   176    }
   177  
   178    function addPicasaAlbum() {
   179      BG.OAUTH.authorize(function() {
   180        BG.OAUTH.sendSignedRequest(
   181          'http://picasaweb.google.com/data/feed/api/user/default',
   182          function(resp, xhr) {
   183            if (!(xhr.status >= 200 && xhr.status <= 299)) {
   184              alert('Error: Response status = ' + xhr.status +
   185                    ', response body = "' + xhr.responseText + '"');
   186              return;
   187            }
   188            var jsonResponse = $.parseJSON(resp);
   189            picasaListAlbumsDone(jsonResponse);
   190          },
   191          {method: 'GET', parameters: {'alt': 'json'}})
   192      });
   193    }
   194  
   195    function addCamlistoreServer() {
   196      var camliServerDiv = $('#camliserver-config');
   197  
   198      function clearInputs() {
   199        camliServerDiv.find('input').val('');
   200      }
   201  
   202      camliServerDiv.dialog({
   203        modal: true,
   204        resizable: false,
   205        width: 550,
   206        title: 'Connect a Camlistore Server',
   207        buttons: {
   208          'Add': function() {
   209            var urlInput = $('#camliserver-url');
   210            var nameInput = $('#camliserver-name');
   211            var usernameInput = $('#camliserver-username');
   212            var passwordInput = $('#camliserver-password');
   213  
   214            if (!BG.ALBUM_CONFIG[BG.CAMLISTORE]) {
   215              BG.ALBUM_CONFIG[BG.CAMLISTORE] = {};
   216            }
   217            if (!BG.ALBUM_OPTIONS[BG.CAMLISTORE]) {
   218              BG.ALBUM_OPTIONS[BG.CAMLISTORE] = {};
   219            }
   220            var albumId = urlInput.val();
   221            BG.ALBUM_CONFIG[BG.CAMLISTORE][albumId] = nameInput.val();
   222            BG.ALBUM_OPTIONS[BG.CAMLISTORE][albumId] = {
   223              'username': usernameInput.val(),
   224              'password': passwordInput.val()
   225            };
   226  
   227            BG.saveAlbumConfig();
   228            populateAlbumList();
   229            BG.setupMenus();
   230            clearInputs();
   231            $(this).dialog('close');
   232          },
   233          'Cancel': function() {
   234            clearInputs();
   235            $(this).dialog('close');
   236          }
   237        }
   238      });
   239    }
   240  
   241    $(document).ready(function() {
   242      $('#add-picasa').click(addPicasaAlbum);
   243      $('#add-camlistore').click(addCamlistoreServer);
   244      populateAlbumList();
   245    });
   246    </script>
   247  </head>
   248  <body>
   249  
   250  <h1>Clip It Good: Configure options</h1>
   251  
   252  <div id="connected-list">
   253    Loading...
   254  </div>
   255  
   256  <div class="add-album-control">
   257    <button id="add-picasa" type="button">Add Picasa Web Album</button>
   258    <button id="add-camlistore" type="button">Add Camlistore Server</button>
   259  </div>
   260  
   261  <h2>Security information</h2>
   262  <div class="security-detail">
   263  Connecting an album to <em>Clip It Good</em> will require giving this extension permission to access your albums even when you are <strong>not logged into your account</strong>. At any time you may revoke access to this extension by using the authorized access control panel for each photo hosting provider: <a href="https://www.google.com/accounts/IssuedAuthSubTokens">Google Accounts</a>
   264  </div>
   265  
   266  <h2>About</h2>
   267  <div id="about">
   268    <img src="icon128.png"/>
   269    <p>
   270       Brett Slatkin, &copy;2010
   271       <br>
   272      <a href="http://www.google.com/profiles/bslatkin/contactme">Email</a>
   273    </p>
   274    <p>
   275      Extension and source licensed under the
   276      <a href="http://www.apache.org/licenses/LICENSE-2.0">Apache License,
   277      Version 2.0</a>. Uses <a href="http://jqueryui.com/">jQuery UI</a> (MIT/GPL), 
   278      <a href="http://www.json.org/js.html">json2 parser</a> (public domain),
   279      <a href="http://code.google.com/p/javascriptbase64/">Fred Palmer's Base64</a>
   280      (BSD compat), and <a href="http://code.google.com/p/crypto-js/">Jeff
   281      Mott's SHA1</a> (BSD compat).
   282    </p>
   283  </div>
   284  
   285  <!-- hidden divs used by interactive stuff -->
   286  <div id="select-album" style="display: none;">
   287    <div class="album-type"></div>
   288    <ol class="album-list"></ol>
   289    <div class="album-controls">Drag to select multiple or click while holding Control/&#x2318; for specific items.</div>
   290  </div>
   291  
   292  <div id="camliserver-config" style="display: none;">
   293    <table width="100%" border="0">
   294      <tr>
   295        <td><label for="camliserver-url">Blobserver&nbsp;URL:</label></td>
   296        <td><input type="text" id="camliserver-url" size="30"></td>
   297      </tr>
   298      <tr>
   299        <td><label for="camliserver-name">Pretty&nbsp;name:</label></td>
   300        <td><input type="text" id="camliserver-name" size="30"></td>
   301      </tr>
   302      <tr>
   303        <td><label for="camliserver-username">Username:</label></td>
   304        <td><input type="text" id="camliserver-username" size="30"></td>
   305      </tr>
   306      <tr>
   307        <td><label for="camliserver-password">Password:</label></td>
   308        <td><input type="text" id="camliserver-password" size="30"></td>
   309      </tr>
   310    </table>
   311  </div>
   312  
   313  </body>
   314  </html>