Написание простого приложения на javascript. Часть 2.

23.06.2017 at 20:09

Сохраняем состояние в урле

Для сохранения данных будем использовать хеш часть урла. Сохранять будем объект с введенными пользователем числами. Сначала создадим его

var settings = {};
settings.sum = sum;
settings.months = months;
settings.percent = percent;

и сохраним в кеш, предварительно завернув в JSON

location.hash = JSON.stringify(settings);

Загрузка состояния из урла

Сначала нужно получить данные из урла. Особенность javascript в том, что location.hash возвращает не то, что в него записали

location.hash = "hello world!";
console.log(location.hash); //#hello world!

решетку нужно убрать

var settings = JSON.parse(location.hash.substring(1));

теперь копируем в инпуты данные из урла

$('#debt_calc_amount').val(settings.sum);
$('#debt_calc_period').val(settings.months);
$('#debt_calc_percent').val(settings.percent);

и запускаем расчет, чтобы перейдя по ссылке с состоянием, пользователь сразу увидел рассчитанные данные.

Распечатываем результаты

Вывод на принтер запускается командой

window.print();

Но есть проблема. Распечатается вся страница сайта с хедером, сайдбарами и прочим. Нужно скрыть все кроме того, что мы хотим распечатать.
Делать будем с помощью css

@media print {
  body * {
    visibility: hidden ;
  }
  #debt_calc_section_to_print, #debt_calc_section_to_print * {
    visibility: visible ;
  }
  #debt_calc_section_to_print {
    position: absolute ;
    left: 0 ;
    top: 0 ;
  }
}

Правило @media print указывает на то, что применяться стили будут только при печати. Дальше мы скрываем все содержимое страницы, показываем элемент с id = debt_calc_section_to_print и все что внутри него и сдвигаем этот элемент в левый верхний угол. Теперь оборачиваем все что мы собираемся распечатывать в

< div id="debt_calc_section_to_print">
...
< /div>