[IMP] website editor: change link editor modal layout

This commit is contained in:
Christophe Matthieu
2014-07-10 15:25:44 +02:00
parent 0effbe3ca6
commit 886d6101ac
2 changed files with 56 additions and 50 deletions
+11 -16
View File
@@ -948,9 +948,7 @@
this.text = $(e.target).val();
},
'change select.link-style': function (e) {
if (this.$("input.url-source[value!='']").val()) {
this.preview();
}
this.preview();
},
}),
init: function (editor) {
@@ -994,14 +992,14 @@
});
return this._super().then(this.proxy('bind_data'));
},
get_data: function () {
get_data: function (test) {
var self = this,
def = new $.Deferred(),
$e = this.$('.active input.url-source').filter(':input'),
val = $e.val(),
label = this.$('#link-text').val() || val;
if (!val || !$e[0].checkValidity()) {
if (test !== false && (!val || !$e[0].checkValidity())) {
// FIXME: error message
$e.closest('.form-group').addClass('has-error');
$e.focus();
@@ -1014,7 +1012,7 @@
if ($e.hasClass('email-address') && $e.val().indexOf("@") !== -1) {
def.resolve('mailto:' + val, false, label);
} else if ($e.hasClass('page')) {
} else if ($e.val() && $e.val().length && $e.hasClass('page')) {
var data = $e.select2('data');
if (!data.create) {
def.resolve(data.id, false, data.text);
@@ -1066,15 +1064,15 @@
});
}
if (!href) { return; }
var match, $control;
if ((match = /mailto:(.+)/.exec(href))) {
if (href && (match = /mailto:(.+)/.exec(href))) {
this.$('input.email-address').val(match[1]).change();
}
if (!$control) {
if (href && !$control) {
this.$('input.url').val(href).change();
this.$('input.window-new').closest("div").show();
}
this.preview();
},
changed: function (e) {
var $e = $(e.target);
@@ -1085,9 +1083,7 @@
.addClass('active')
.siblings().removeClass('active')
.addBack().removeClass('has-error');
if ($e.val() && $e.val().length) {
this.preview();
}
this.preview();
},
call: function (method, args, kwargs) {
var self = this;
@@ -1123,10 +1119,9 @@
},
preview: function () {
var $preview = this.$("#link-preview");
this.get_data().then(function (url, new_window, label, classes) {
$preview.attr("href", url)
.attr("target", new_window ? '_blank' : "")
.text(label && label.length ? label : url)
this.get_data(false).then(function (url, new_window, label, classes) {
$preview.attr("target", new_window ? '_blank' : "")
.text((label && label.length ? label : url))
.attr("class", classes);
});
}
@@ -65,41 +65,52 @@
<input type="text" class="form-control url email-address url-source"
id="link-external" placeholder="http://openerp.com"/>
</li>
<li class="list-group-item form-group">
<h4 class="list-group-item-heading">
<label for="link-text" class="control-label">
Link text
</label>
</h4>
<input type="text" class="form-control"
id="link-text"/>
</li>
<li class="list-group-item form-group">
<h4 class="list-group-item-heading">
<label for="link-type" class="control-label">
Style
</label>
</h4>
<select id="link-style-type" class="form-control link-style pull-left" style="display: inline-block; width: 49%;">
<option value="" selected="selected">Link</option>
<option value="btn-default">Basic</option>
<option value="btn-primary">Primary</option>
<option value="btn-success">Success</option>
<option value="btn-info">Info</option>
<option value="btn-warning">Warning</option>
<option value="btn-danger">Danger</option>
</select>
<select id="link-style-size" class="form-control link-style pull-right" style="display: inline-block; width: 49%;">
<option value="btn-xs">Extra Small</option>
<option value="btn-sm">Small</option>
<option value="" selected="selected">Default</option>
<option value="btn-lg">Large</option>
</select>
<div class="clearfix"/>
</li>
</ul>
<div class="text-center">
<a id="link-preview" href="#" class="hidden">Preview</a>
<div class="form-horizontal">
<div class="form-group">
<label for="link-text" class="col-sm-2 control-label">
Link text
</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="link-text"/>
</div>
</div>
</div>
<div class="form-horizontal">
<div class="form-group">
<label for="link-style-type" class="col-sm-2 control-label">
Style
</label>
<div class="col-sm-5">
<select id="link-style-type" class="form-control link-style" style="display: inline-block;">
<option value="" selected="selected">Link</option>
<option value="btn-default">Basic</option>
<option value="btn-primary">Primary</option>
<option value="btn-success">Success</option>
<option value="btn-info">Info</option>
<option value="btn-warning">Warning</option>
<option value="btn-danger">Danger</option>
</select>
</div>
<div class="col-sm-5">
<select id="link-style-size" class="form-control link-style" style="display: inline-block;">
<option value="btn-xs">Extra Small</option>
<option value="btn-sm">Small</option>
<option value="" selected="selected">Default</option>
<option value="btn-lg">Large</option>
</select>
</div>
</div>
</div>
<div class="form-horizontal">
<div class="form-group">
<label for="link-text" class="col-sm-2 control-label">
Preview
</label>
<div class="col-sm-10" style="line-height: 2;">
<a id="link-preview" href="#"></a>
</div>
</div>
</div>
</form>
</t>