Связывание службы Xportability/css-to-pdf со счетчиком JavaScript

Question

Я заметил, что когда я нажимаю кнопку PDF, для загрузки PDF требуется немного времени. Есть ли что-то, для чего я могу создать eventListener? Так что я могу начать и закончить спиннер. Это действительно проблема для iPad, где это занимает намного больше времени... но есть, по крайней мере, хорошие 30-50 секунд, пока waiting for xep.cloudformatter... показывать.

Или есть что-то еще, что я могу сделать.

Answer 1

ОБНОВЛЕНИЕ: я добавил событие "xepOnlineStatus" в основной код. он устанавливает параметр в состояние и запускается, когда форматирование начинается и заканчивается. Эти состояния "Начато" и "Завершено". Теперь вы можете реализовать простой JS, подобный приведенному ниже, который будет обрабатывать эти события с помощью одного и того же счетчика. Основной JS на сайте обновлен, и код Github будет обновлен в ближайшее время.

Вы можете увидеть это в действии здесь: http://www.cloudformatter.com/CSS2Pdf, просто отформатируйте в PDF, и спиннер будет включен.

document.observe('dom:loaded', function() { 

jQuery(document).on("xepOnlineStatus", function(event, state){
if (state == "Started"){
    var screenTop = jQuery(document).scrollTop();
    var screenHeight = jQuery(window).height();
    jQuery('#spinner-overlay').css('top', screenTop);
    jQuery('#spinner-overlay').css('height', screenHeight);
    jQuery('#spinner-overlay').toggle('show');
}
else if (state == "Finished"){
    jQuery('#spinner-overlay').toggle('hide');
}
});

})

КОНЕЦ ОБНОВЛЕНИЯ: Оригинальный ответ внизу слева для полноты

В духе "чего-то еще" на данный момент, вот инструкции для взлома текущего JS и добавления некоторого CSS и элемента DOM для обеспечения спиннера:

1) Взлом основного (xepOnline.jpPlugin.js):

Я изменил функцию форматирования следующим образом (в строке 735 или около нее)

 Format: function(ElementID, options) {
         var screenTop = jQuery(document).scrollTop();
         var screenHeight = jQuery(window).height();
         jQuery('#spinner-overlay').css('top', screenTop);
         jQuery('#spinner-overlay').css('height', screenHeight);
         jQuery('#spinner-overlay').toggle('show');
                var items;
                if(jQuery.isArray(ElementID)) {
                            items = ElementID;
                } else {
                            items = [ ElementID ];
                }
                return xepOnline.Formatter.__format(items, options);
    },

Единственные изменения здесь - это получить пару переменных для размещения наложения счетчика и установки соответствующего счетчика. Затем включите его, так как эта функция запускает весь процесс форматирования.

Затем я изменил функции __postBackSuccess и __postBackFailure, чтобы скрыть счетчик (на линиях 787 и 872 или около них), поскольку эти функции завершат весь процесс. Я добавил следующее в эти функции в качестве первой строки:

jQuery('#spinner-overlay').toggle('hide');

Затем я изменил POST submitall, чтобы покрыть метод "download". Вышеупомянутое отклонило бы спиннер после "newwin" и "embed", но не загрузки.

В строке 698 или около нее сразу после публикации формы добавьте:

jQuery('#spinner-overlay').toggle('hide');

2) CSS

Я добавил следующий CSS для моей страницы:

#spinner-overlay {
background-color: #aaa;
opacity: 0.4;
position: absolute;
left: 0px;
top: 0px;
z-index: 100;
height: 100%;
width: 100%;
overflow: hidden;
background-image: url('/Resources/Images/ajaxSpinner.gif');
background-position: center;
background-repeat: no-repeat;
}

Примечание: в качестве фонового изображения вы могли бы указать свой собственный спиннер, мой - это "gif".

3) Изменения страницы

Я добавил

сразу после этого:

<div id="spinner-overlay" style="display:none;"></div>

Итак, что происходит... когда начинается форматирование, он получает макет текущей страницы и расширяет div счетчика, чтобы покрыть эту область, показывая сам счетчик, наложенный на экран с некоторой непрозрачностью. Когда формат завершается или прерывается, он прячет этот спиннер div (или для загрузки он будет скрывать спиннер, когда данные отправляются на сервер для форматирования).

Выглядит мило для меня.

3

Источник Поделиться

user2491227 30 июн '16 в 18:21 2016-06-30 18:21

2016-06-30 18:21