UI/UX + Google Apps Script.

Не отпускает тема UI/UX. Предлагаю проверить, насколько удобно работать с полученным в предыдущей статье интерфейсом в разрезе использования данных. В качестве источника данных используем таблицу на Google Drive. Раздавать данные будем с помощью Content Service.





Создаем таблицу, вводим тестовые данные.

Создаем скрипт, пишем код.

function doGet(e) {
  var ssId = '0AkYcK5KeNe1tdGttSUwwZGIxNzdzZExQTXc3YlVseUE'; // ID таблицы
  var shName = 'journal'; // имя листа
  var data = SpreadsheetApp.openById(ssId).getSheetByName(shName).getDataRange().getValues();
  var headers = data[0];
  var res = [];
  for (var i=1; i<data.length; i++) {
    var obj = {};
    for (var j=0; j<data[0].length; j++) {
      obj[data[0][j]] = data[i][j];
    }
    res.push(obj);
  }
  
  return ContentService.createTextOutput(
    e.parameters.prefix + '(' + JSON.stringify(res) + ')')
    .setMimeType(ContentService.MimeType.JAVASCRIPT);
}

Сохраняем версию скрипта, публикуем.

Удаляем данные блока journal (весь код - в предыдущей статье).

<div id="journal">     
     <img id = "journal_image" />     
     <div id="journal_text">
      <div id="journal_text_header"></div>      
      <div id="journal_text_copyright"></div>      
      <div id="journal_text_published"></div>      
      <div id="journal_text_edited"></div>
      <div id="journal_text_rank"></div>
      <div id="journal_text_impact"></div>
     </div>
    </div>

Добавляем в скрипт интерфейса код, который будет получать данные сразу после загрузки интерфейса и обновлять их в блоке journal каждые 5 секунд. Для реальных условий - слишком часто, а для демонстрации - вполне.

<script type="text/javascript">
   $(document).ready(function() {
    getItems();
    $('#nav_items').children('.nav_item').show();
    $('.nav_item_name').on('click', function() {
     $(this).next('.nav_item').slideToggle();     
    });
    $('#search_box_text').on('keyup', function(e) {
     var keyCode = e.which || e.keyCode;   
     if(keyCode == 13) validate();
    });
    $('#search_box_button').on('click', validate);
   });
   function validate() {
    var txt = $('#search_box_text');    
    var txtVal = $.trim(txt.val());
    if (txtVal.length < 1 || txtVal.length > 100) {
     txt.css('border-color','#ff0000');
     return;
    }
    txt.css('border-color','').val('');
    // do something
   }
   function getItems() {
    var scrUrl = 'https://script.google.com/macros/s/AKfycbxx-K1GVnlifQisx0tUbFhNKqPb2bj9ns_7H83DsjkquYd15vQ/exec';
    var callback = 'gotItems';    
    var url = scrUrl + '?prefix=' + callback;    
    $.ajax({'url': url, 'dataType':'jsonp'});    
   }
   function gotItems(data) {
    console.log(data);
    if (!data.length) return;
    var i = 0;
    function populateJournal() {     
     $('#journal_image').hide().attr('src', 'images/' + data[i].image).fadeIn('fast');
     var jt = $('#journal_text');
     jt.hide();
     $('#journal_text_header').empty().text(data[i].header);
     $('#journal_text_copyright').empty().text(data[i].copyright);
     $('#journal_text_published').empty().html(data[i].published + 
      ' <a href="' + data[i].published_href + '" target = "_blank">' + 
      data[i].published_href_text);
     $('#journal_text_edited').empty().html('<span>' + data[i].edited_span + 
      ' </span>' + data[i].edited_text);
     $('#journal_text_rank').empty().html('<span>' + data[i].rank_span + 
      ' </span>' + data[i].rank_text);
     $('#journal_text_impact').empty().html('<span>' + data[i].impact_span + 
      ' </span>' + data[i].impact_text);
     jt.fadeIn('slow');     
     i = (i < data.length - 1) ? i + 1 : 0;
     setTimeout(populateJournal, 5000);
    }
    setTimeout(populateJournal, 1);
   }
  </script>

Вуаля. Подобным образом можно решить с любым блоком полученного интерфейса.