ОБНОВЛЕНИЕ: Я добавил событие «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');
}
});
})
END UPDATE: Оригинал ответ внизу слева для полноты
В духе «что-то другое» на данный момент, вот направление для взлома текущего 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-запрос на метод загрузки. Вышеупомянутое отклоняет счетчик после «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> сразу после того, как это:
<div id="spinner-overlay" style="display:none;"></div>
Так что же происходит ... при форматировании начинается он получает макет текущей страницы и расширяет кок div, чтобы покрыть эту область, показывая, что прядильщик накладывается на экран с некоторой непрозрачностью.Когда формат заканчивается или прерывается, он скрывает этот spinner div (или для загрузки он будет скрывать счетчик, когда данные отправляются на сервер для форматирования).
Выглядит хорошо для меня.
