blob: 2330b754b9a5c8d247154217ca9802c1d052d106 [file] [log] [blame]
/**
* @class button - horizontal rule (open dialog window)
*
* @param elRTE rte объект-редактор
* @param String name название кнопки
*
* @author: Dmitry Levashov (dio) dio@std42.ru
* @copyright: Studio 42, http://www.std42.ru
**/
(function($) {
elRTE.prototype.ui.prototype.buttons.horizontalrule = function(rte, name) {
this.constructor.prototype.constructor.call(this, rte, name);
var self = this;
this.src = {
width : $('<input type="text" />').attr({'name' : 'width', 'size' : 4}).css('text-align', 'right'),
wunit : $('<select />').attr('name', 'wunit')
.append($('<option />').val('%').text('%'))
.append($('<option />').val('px').text('px'))
.val('%'),
height : $('<input type="text" />').attr({'name' : 'height', 'size' : 4}).css('text-align', 'right'),
bg : $('<div />'),
border : $('<div />'),
'class' : $('<input type="text" />').css('width', '100%'),
style : $('<input type="text" />').css('width', '100%')
}
this.command = function() {
this.src.bg.elColorPicker({palettePosition : 'outer', 'class' : 'el-colorpicker ui-icon ui-icon-pencil'});
var n = this.rte.selection.getEnd();
this.hr = n.nodeName == 'HR' ? $(n) : $(rte.doc.createElement('hr')).css({width : '100%', height : '1px'});
this.src.border.elBorderSelect({styleHeight : 73, value : this.hr});
var _w = this.hr.css('width') || this.hr.attr('width');
this.src.width.val(parseInt(_w) || 100);
this.src.wunit.val(_w.indexOf('px') != -1 ? 'px' : '%');
this.src.height.val( this.rte.utils.toPixels(this.hr.css('height') || this.hr.attr('height')) || 1) ;
this.src.bg.val(this.rte.utils.color2Hex(this.hr.css('background-color')));
this.src['class'].val(this.rte.dom.attr(this.hr, 'class'));
this.src.style.val(this.rte.dom.attr(this.hr, 'style'));
var opts = {
rtl : this.rte.rtl,
submit : function(e, d) { e.stopPropagation(); e.preventDefault(); self.set(); d.close(); },
dialog : {
title : this.rte.i18n('Horizontal rule')
}
}
var d = new elDialogForm(opts);
d.append([this.rte.i18n('Width'), $('<span />').append(this.src.width).append(this.src.wunit) ], null, true)
.append([this.rte.i18n('Height'), $('<span />').append(this.src.height).append(' px')], null, true)
.append([this.rte.i18n('Border'), this.src.border], null, true)
.append([this.rte.i18n('Background'), this.src.bg], null, true)
.append([this.rte.i18n('Css class'), this.src['class']], null, true)
.append([this.rte.i18n('Css style'), this.src.style], null, true)
.open();
}
this.update = function() {
this.domElem.removeClass('disabled');
if (this.rte.selection.getEnd().nodeName == 'HR') {
this.domElem.addClass('active');
} else {
this.domElem.removeClass('active');
}
}
this.set = function() {
this.rte.history.add();
!this.hr.parentNode && this.rte.selection.insertNode(this.hr.get(0));
var attr = {
noshade : true,
style : this.src.style.val()
}
var b = this.src.border.val();
var css = {
width : (parseInt(this.src.width.val()) || 100)+this.src.wunit.val(),
height : parseInt(this.src.height.val()) || 1,
'background-color' : this.src.bg.val(),
border : b.width && b.style ? b.width+' '+b.style+' '+b.color : ''
}
this.hr.removeAttr('class')
.removeAttr('style')
.removeAttr('width')
.removeAttr('height')
.removeAttr('align')
.attr(attr)
.css(css);
if (this.src['class'].val()) {
this.hr.attr('class', this.src['class'].val());
}
this.rte.ui.update()
}
}
})(jQuery);