Комментарии / Русскоязычное сообщество MODX

Всего 123 787 комментариев

Виталий Воропаев

27 декабря 2012, 16:10

Делал не давно.
Получился след. плагин:

Условия:
1) Наличие jQuery

Принцип работы:

Копирует ссылку из атрибута href
Генерирует из полученной ссылки iframe
Вставляет iframe в конец DOM
Инициирует печать

Плагин имеет ряд настроек и 2 callback функции. Сопровождается информером, который срабатывает перед печатью. Плагин нуждается в доработке, но увы нет времени.

Код плагина:

/*
 *   Name: SetPrint 0.5
 *   Dev: Voropaev Vitaliy
 */

;(function(g) {

var Print = function(options) {
	
	this._Defaults = {
		attr : "href"
		, url : false
		, message: {
			wait: "Подождите пожалуйста, идет подготовка к печати ..."
			, done: "Готово к печати"
		}
		, container_if : "b-iframe-print"
		, container_bl: "b-print-box"
		, delay: 700
		
	};
	
	options = g.extend({}, this._Defaults, options ? options : {}); 
	
	this._Elem = options.elem;
	this._Param = options;
	this._Url = false;
	this._Container = {};
	
	this.init();

}

Print.prototype = {
	
	init: function() {
		
		var th = this;
		
		this._Elem.bind("click", function(e) {
			th.load_print_document(th, e);
		});
		
	}
	, load_print_document: function(th, e) {
		
		e.preventDefault();
		
		if( typeof this._Param.beforeInit === "function" ) this._Param.beforeInit( this );
		
		g("body").append( this.message_box(this) );
		
		this._Container.block = g("#" + this._Param.container_bl)

		this._Container.block.css("opacity", 0);
		this._Container.block.animate({opacity:1}, this._Param.delay, function() {
			th.add_iframe_to_page(th);
		});
	}
	, add_iframe_to_page: function(th) {

		this._Url = this._Param.url ? this._Param.url : this._Elem.attr( this._Param.attr );
		
		if( typeof (this._Container.iframe) === "undefined" ) {
			
			g("body").append( this.iframe(th) );
			
			this._Container.iframe = g("#" + this._Param.container_if);
		
			this._Container.iframe.bind("load", function() {
				setTimeout(function() {
					th.printit(th);
				}, 2000)
				
			});
			
		} else {
			this._Container.iframe.attr("src", this._Url);
		}
	}
	, printit: function(th) {
		
		this._Container.iframe.text( this._Param.message.done );
		
		frames[ this._Param.container_if ].focus();
		frames[ this._Param.container_if ].print();
		
		this.message_box_unload();
		
	}
	, iframe: function(th) {
		
		return '<iframe id="' + th._Param.container_if + '" name="' + th._Param.container_if + '" src=' + th._Url + ' style="position:absolute;top:0px;left:0px;width:0px;height:0px;border:0px;overflow:none;z-index:-1"></iframe>';
	}
	, message_box: function(th) {
		
		return "<div id=" + th._Param.container_bl + " style='position:fixed;top:50%;left:50%;z-index:9999;opacity:0;'><span>\
		" + th._Param.message.wait + "</span></div>";
	
	}
	, iframe_unload: function() {
		this._Container.iframe.remove();
	}
	, message_box_unload: function () {
		
		this._Container.block.animate({opacity: 0}, this._Param.delay, function() {
			g(this).remove();
		});
                
                if( typeof this._Param.afterInit === "function" ) this._Param.afterInit( this );
		
	}
	, print_block_constructor: {
		
		add: function(th, callback) {
			
			var chr = {};
			    chr.w = th._Elem.parent().outerWidth(),
			    chr.h = th._Elem.parent().outerHeight();
			
			th._Elem.parent().css("position", "relative");
			th._Elem.addClass("block");
			th._Elem.after('<div style="position: absolute; top: 0px; left: 0px; height: 100%; width: 100%; z-index: 100"></div>');
			
			if( typeof callback === "function" ) callback();
			
		}
		, remove: function(th) {
			
			th._Elem.removeClass("block");
			th._Elem.next().remove();
		}
	}
}

})(jQuery);

Пример инициализации:

1) Html:

<a href="Страница для печати (ресурс в Modx)" class="print"></a>

2) JavaScript:

$(function() {
    
    p = new Print({
        elem: $(".print") 
        , beforeInit: function() {
            // Вызов callback функции, срабатывает перед генерацией DOM
        }
        , afterInit: function() {
            // Вызов callback функции, срабатывает после закрытия окна печати
        }
    });
    
});

3) Css:

(вырезано оформление)

<style type="text/css">
 #b-print-box{margin-top: -50px; margin-left: -150px; width: 300px; height: 100px; text-align: center; }
 #b-print-box span{font-size: 100%}
</style>