0
У меня проблема с этим кодом, который отлично работает во всем, кроме Firefox в Kiwiirc.Стиль текста Kiwi в Firefox
Когда я нажимаю Bold, курсив или подчеркивание, он просто закрывает всплывающее окно и не устанавливает ни одного из них. Это не делается ни в каких других браузерах.
<style>
#kiwi .style-grid {
position: absolute;
display: block;
z-index: 1000;
background: #121314;
padding: 2px;
width: 120px;
border-radius: 3px;
}
#kiwi .style-colours { overflow: hidden; }
#kiwi .style-colour {
width: 25%;
height: 27px;
display: block;
float: left;
cursor: pointer;
}
#kiwi .style-color-selected {
-webkit-box-shadow: inset 0px 0px 5px 0px rgba(255, 255, 255, 0.75);
-moz-box-shadow: inset 0px 0px 5px 0px rgba(255, 255, 255, 0.75);
box-shadow: inset 0px 0px 5px 0px rgba(255, 255, 255, 0.75);
z-index: 10;
position: relative;
}
#kiwi .style-formats {
margin: 10px 0;
overflow: hidden;
}
#kiwi .style-format {
width: 33%;
cursor: pointer;
display: block;
float: left;
text-align: center;
}
#kiwi .style-format-bold { font-weight: bold; }
#kiwi .style-format-italic { font-style: italic; }
#kiwi .style-format-underline { text-decoration: underline; }
#kiwi .style-reset {
color: #D6D6D6;
font-size: 20px;
text-align: right;
display: block;
cursor: pointer;
margin: 5px 6px 10px;
}
</style>
<script type="text/html" id="tmpl_styles">
<div class="style-grid">
<i class="fa fa-undo style-reset"></i>
<div class="style-colours">
<a class="style-colour" style="background:#FFFFFF;border-radius: 3px 0 0 0;" data-colour="0"></a>
<a class="style-colour" style="background:#000000;" data-colour="1"></a>
<a class="style-colour" style="background:#000080;" data-colour="2"></a>
<a class="style-colour" style="background:#008000;border-radius: 0 3px 0 0;" data-colour="3"></a>
<a class="style-colour" style="background:#FF0000;" data-colour="4"></a>
<a class="style-colour" style="background:#800040;" data-colour="5"></a>
<a class="style-colour" style="background:#800080;" data-colour="6"></a>
<a class="style-colour" style="background:#FF8040;" data-colour="7"></a>
<a class="style-colour" style="background:#FFFF00;" data-colour="8"></a>
<a class="style-colour" style="background:#80FF00;" data-colour="9"></a>
<a class="style-colour" style="background:#008080;" data-colour="10"></a>
<a class="style-colour" style="background:#00FFFF;" data-colour="11"></a>
<a class="style-colour" style="background:#0000FF;" data-colour="12"></a>
<a class="style-colour" style="background:#FF55FF;" data-colour="13"></a>
<a class="style-colour" style="background:#808080;" data-colour="14"></a>
<a class="style-colour" style="background:#C0C0C0;" data-colour="15"></a>
</div>
<div class="style-formats">
<a class="style-format style-format-bold">Aa</a>
<a class="style-format style-format-italic">Aa</a>
<a class="style-format style-format-underline">Aa</a>
</div>
</div>
</script>
<script type="text/javascript">
(function() {
var $list = $($('#tmpl_styles').html());
var $icon = $('<a><i class="fa fa-tint"></i></a>');
var $inp = $('#kiwi .controlbox .inp');
var control = kiwi.components.ControlInput();
control.addPluginIcon($icon);
var styles = {
colour: false,
css_colour: false,
bold: false,
italic: false,
underline: false
};
var updateStyles = function() {
$inp.css('color', styles.css_colour ? styles.css_colour : '');
$inp.css('font-weight', styles.bold ? 'bold' : '');
$inp.css('font-style', styles.italic ? 'italic' : '');
$inp.css('text-decoration', styles.underline ? 'underline' : '');
$('#kiwi .style-colour').removeClass('style-color-selected');
$('#kiwi .style-colour[data-colour='+styles.colour+']').addClass('style-color-selected');
};
// When a message is typed in, add any styling we have enabled
kiwi.events.on('command', function(event, data) {
if (data.command !== 'msg') {
return;
}
var style_codes = '';
if (styles.colour !== false) {
var colour_code = styles.colour.toString();
if (styles.colour < 10) {
colour_code = '0' + colour_code;
}
style_codes += String.fromCharCode(3) + colour_code;
}
if (styles.bold) {
style_codes += '\x02';
}
if (styles.italic) {
style_codes += '\x1D';
}
if (styles.underline) {
style_codes += '\x1F';
}
// Add the styles to the emssage
if (style_codes && data.params[1]) {
data.params[1] = style_codes + ' ' + data.params[1];
}
});
// Opening style changer...
$icon.on('click', function(event) {
event.stopPropagation();
$list.appendTo($('#kiwi'))
.show()
.css({
bottom: ($('.controlbox').outerHeight()) + 'px',
right: '10px'
});
});
// Closing style changer...
$(document).on('click', function() {
$list.hide();
});
// Reset all styles...
$list.on('click', '.style-reset', function(event) {
event.stopPropagation();
styles.colour = false;
styles.css_colour = false;
styles.bold = false;
styles.italic = false;
styles.underline = false;
updateStyles();
});
// Changing colour...
$list.on('click', '.style-colour', function(event) {
event.stopPropagation();
var colour = parseInt($(this).data('colour'), 10);
if (isNaN(colour)) {
return;
}
styles.css_colour = $(this).css('background-color');
styles.colour = colour;
updateStyles();
});
// Changing styles...
$list.on('click', '.style-format-bold', function() {
event.stopPropagation();
styles.bold = !styles.bold;
updateStyles();
});
$list.on('click', '.style-format-italic', function() {
event.stopPropagation();
styles.italic = !styles.italic;
updateStyles();
});
$list.on('click', '.style-format-underline', function() {
event.stopPropagation();
styles.underline = !styles.underline;
updateStyles();
});
})();
</script>