Home | History | Annotate | Download | only in stylizr 
      1 // Copyright (c) 2012 The Chromium Authors. All rights reserved.
      2 // Use of this source code is governed by a BSD-style license that can be
      3 // found in the LICENSE file.
      4 
      5 // Store CSS data in the "local" storage area.
      6 //
      7 // Usually we try to store settings in the "sync" area since a lot of the time
      8 // it will be a better user experience for settings to automatically sync
      9 // between browsers.
     10 //
     11 // However, "sync" is expensive with a strict quota (both in storage space and
     12 // bandwidth) so data that may be as large and updated as frequently as the CSS
     13 // may not be suitable.
     14 var storage = chrome.storage.local;
     15 
     16 // Get at the DOM controls used in the sample.
     17 var resetButton = document.querySelector('button.reset');
     18 var submitButton = document.querySelector('button.submit');
     19 var textarea = document.querySelector('textarea');
     20 
     21 // Load any CSS that may have previously been saved.
     22 loadChanges();
     23 
     24 submitButton.addEventListener('click', saveChanges);
     25 resetButton.addEventListener('click', reset);
     26 
     27 function saveChanges() {
     28   // Get the current CSS snippet from the form.
     29   var cssCode = textarea.value;
     30   // Check that there's some code there.
     31   if (!cssCode) {
     32     message('Error: No CSS specified');
     33     return;
     34   }
     35   // Save it using the Chrome extension storage API.
     36   storage.set({'css': cssCode}, function() {
     37     // Notify that we saved.
     38     message('Settings saved');
     39   });
     40 }
     41 
     42 function loadChanges() {
     43   storage.get('css', function(items) {
     44     // To avoid checking items.css we could specify storage.get({css: ''}) to
     45     // return a default value of '' if there is no css value yet.
     46     if (items.css) {
     47       textarea.value = items.css;
     48       message('Loaded saved CSS.');
     49     }
     50   });
     51 }
     52 
     53 function reset() {
     54   // Remove the saved value from storage. storage.clear would achieve the same
     55   // thing.
     56   storage.remove('css', function(items) {
     57     message('Reset stored CSS');
     58   });
     59   // Refresh the text area.
     60   textarea.value = '';
     61 }
     62 
     63 function message(msg) {
     64   var message = document.querySelector('.message');
     65   message.innerText = msg;
     66   setTimeout(function() {
     67     message.innerText = '';
     68   }, 3000);
     69 }
     70