mirror of
https://github.com/Lastorder-DC/rhymix.git
synced 2026-01-04 17:21:39 +09:00
Fix incorrect textarea sizing when lang selector is active
This commit is contained in:
parent
796ecec247
commit
a2281edc7a
3 changed files with 27 additions and 21 deletions
|
|
@ -310,8 +310,6 @@
|
||||||
.x input.x_full-width,
|
.x input.x_full-width,
|
||||||
.x textarea.x_full-width,
|
.x textarea.x_full-width,
|
||||||
.x .x_uneditable-input.x_full-width{width:calc(100% - 14px);resize:vertical}
|
.x .x_uneditable-input.x_full-width{width:calc(100% - 14px);resize:vertical}
|
||||||
.x textarea.x_full-width.lang_code{width:calc(100% - 42px);resize:vertical}
|
|
||||||
.x textarea.x_full-width + textarea.lang_code{width:calc(100% - 42px);resize:vertical}
|
|
||||||
.x textarea{height:auto;min-height:80px;}
|
.x textarea{height:auto;min-height:80px;}
|
||||||
.x textarea,
|
.x textarea,
|
||||||
.x input[type="text"],
|
.x input[type="text"],
|
||||||
|
|
|
||||||
|
|
@ -1476,6 +1476,20 @@ margin-bottom: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.x .g11n.x_input-append {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: flex-start;
|
||||||
|
}
|
||||||
|
.x .g11n.x_full-width {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
.x .g11n > input.lang_code,
|
||||||
|
.x .g11n > textarea.lang_code {
|
||||||
|
flex: 1;
|
||||||
|
width: unset;
|
||||||
|
min-width: 0;
|
||||||
|
}
|
||||||
.x .g11n>.x_add-on {
|
.x .g11n>.x_add-on {
|
||||||
font-size: 0;
|
font-size: 0;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
@ -1492,8 +1506,9 @@ margin-bottom: 10px;
|
||||||
}
|
}
|
||||||
.x .g11n>.x_add-on.remover {
|
.x .g11n>.x_add-on.remover {
|
||||||
display: none;
|
display: none;
|
||||||
width: 26px;
|
height: 16px;
|
||||||
height: 26px;
|
padding: 4px;
|
||||||
|
box-sizing: content-box;
|
||||||
}
|
}
|
||||||
.x .g11n.active>[disabled] {
|
.x .g11n.active>[disabled] {
|
||||||
padding-left: 25px;
|
padding-left: 25px;
|
||||||
|
|
@ -1501,7 +1516,7 @@ margin-bottom: 10px;
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
}
|
}
|
||||||
.x .g11n.active>.x_add-on.remover {
|
.x .g11n.active>.x_add-on.remover {
|
||||||
display: inline-block;
|
display: block;
|
||||||
}
|
}
|
||||||
.x .g11n>.x_add-on:hover>i {
|
.x .g11n>.x_add-on:hover>i {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
|
|
|
||||||
|
|
@ -1916,6 +1916,7 @@ jQuery(function($){
|
||||||
|
|
||||||
// make UI
|
// make UI
|
||||||
var $this = $(this);
|
var $this = $(this);
|
||||||
|
var width = $this.width();
|
||||||
var t = this;
|
var t = this;
|
||||||
|
|
||||||
if($this.parent().hasClass('g11n')){
|
if($this.parent().hasClass('g11n')){
|
||||||
|
|
@ -1933,13 +1934,12 @@ jQuery(function($){
|
||||||
|
|
||||||
function makeUI(){
|
function makeUI(){
|
||||||
var $multilingualWindow = $('#g11n');
|
var $multilingualWindow = $('#g11n');
|
||||||
var width = $this.width();
|
|
||||||
var $displayInput;
|
var $displayInput;
|
||||||
|
|
||||||
if(t.tagName == 'TEXTAREA' || $this.data('type') == 'textarea'){
|
if(t.tagName == 'TEXTAREA' || $this.data('type') == 'textarea'){
|
||||||
$displayInput = $('<textarea id="lang_' + id + '" class="lang_code" style="width:' + width + 'px" data-width="' + width + '">').data('lang-id', id);
|
$displayInput = $('<textarea id="lang_' + id + '" class="lang_code">').data('lang-id', id);
|
||||||
}else{
|
}else{
|
||||||
$displayInput = $('<input type="text" id="lang_' + id + '" class="lang_code" style="width:' + (width-28) + 'px" data-width="' + (width-28) + '">').data('lang-id', id);
|
$displayInput = $('<input type="text" id="lang_' + id + '" class="lang_code">').data('lang-id', id);
|
||||||
}
|
}
|
||||||
$displayInput.attr('placeholder', $this.attr('placeholder'));
|
$displayInput.attr('placeholder', $this.attr('placeholder'));
|
||||||
|
|
||||||
|
|
@ -1947,20 +1947,18 @@ jQuery(function($){
|
||||||
var $setter = $('<a href="#g11n" class="x_add-on modalAnchor" title="' + xe.lang.cmd_set_multilingual_text + '"><i class="x_icon-globe"></i>' + xe.lang.cmd_set_multilingual_text + '</a>').data('lang-target', id);
|
var $setter = $('<a href="#g11n" class="x_add-on modalAnchor" title="' + xe.lang.cmd_set_multilingual_text + '"><i class="x_icon-globe"></i>' + xe.lang.cmd_set_multilingual_text + '</a>').data('lang-target', id);
|
||||||
|
|
||||||
$this.parent().addClass('g11n').addClass('x_input-append');
|
$this.parent().addClass('g11n').addClass('x_input-append');
|
||||||
|
if ($this.hasClass('x_full-width')) {
|
||||||
|
$this.parent().addClass('x_full-width');
|
||||||
|
} else if (width) {
|
||||||
|
$this.parent().width(Math.max(220, width + 14));
|
||||||
|
}
|
||||||
$this.after($displayInput, $remover, $setter);
|
$this.after($displayInput, $remover, $setter);
|
||||||
$this.hide();
|
$this.hide();
|
||||||
$setter.attr('href', '#g11n').xeModalWindow();
|
$setter.attr('href', '#g11n').xeModalWindow();
|
||||||
|
|
||||||
// bind selected
|
// bind selected
|
||||||
$displayInput.bind('selected.g11n', function(e, code, value){
|
$displayInput.bind('selected.g11n', function(e, code, value){
|
||||||
var width = $displayInput.width();
|
|
||||||
|
|
||||||
if(!$displayInput.data('active')){
|
|
||||||
width -= 44;
|
|
||||||
}
|
|
||||||
|
|
||||||
$displayInput
|
$displayInput
|
||||||
.width(width)
|
|
||||||
.attr('disabled', 'disabled')
|
.attr('disabled', 'disabled')
|
||||||
.val(value)
|
.val(value)
|
||||||
.data('active', true)
|
.data('active', true)
|
||||||
|
|
@ -1995,11 +1993,9 @@ jQuery(function($){
|
||||||
|
|
||||||
if(!$g11n_set_input.data('active')) return;
|
if(!$g11n_set_input.data('active')) return;
|
||||||
|
|
||||||
var width = $g11n_set_input.width();
|
|
||||||
$g11n_set_input
|
$g11n_set_input
|
||||||
.val('')
|
.val('')
|
||||||
.removeAttr('disabled')
|
.removeAttr('disabled')
|
||||||
.width(width + 44)
|
|
||||||
.data('active', false)
|
.data('active', false)
|
||||||
.parent('.g11n').removeClass('active');
|
.parent('.g11n').removeClass('active');
|
||||||
$this.siblings('.lang_code').val('');
|
$this.siblings('.lang_code').val('');
|
||||||
|
|
@ -2019,7 +2015,6 @@ jQuery(function($){
|
||||||
function reset(){
|
function reset(){
|
||||||
$displayInput
|
$displayInput
|
||||||
.val($hiddenInput.val())
|
.val($hiddenInput.val())
|
||||||
.width($displayInput.data('width'))
|
|
||||||
.removeAttr('disabled')
|
.removeAttr('disabled')
|
||||||
.data('active', false);
|
.data('active', false);
|
||||||
$displayInput.parent('.g11n').removeClass('active');
|
$displayInput.parent('.g11n').removeClass('active');
|
||||||
|
|
@ -2033,10 +2028,8 @@ jQuery(function($){
|
||||||
function on_complete2(data){
|
function on_complete2(data){
|
||||||
if(!data || !data.langs) return;
|
if(!data || !data.langs) return;
|
||||||
|
|
||||||
var width = $displayInput.width();
|
|
||||||
|
|
||||||
$displayInput.closest('.g11n').addClass('active');
|
$displayInput.closest('.g11n').addClass('active');
|
||||||
$displayInput.val(data.langs[xe.current_lang]).attr('disabled', 'disabled').width(width - 44).data('active', true);
|
$displayInput.val(data.langs[xe.current_lang]).attr('disabled', 'disabled').data('active', true);
|
||||||
}
|
}
|
||||||
|
|
||||||
if(pattern.test($displayInput.val())){
|
if(pattern.test($displayInput.val())){
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue