[IMP] tabify link dialog for simpler layout

bzr revid: xmo@openerp.com-20130912091536-mx8dre2qyiz00h36
This commit is contained in:
Xavier Morel
2013-09-12 11:15:36 +02:00
parent 84371dfc80
commit 62fff458c5
4 changed files with 57 additions and 66 deletions
+4
View File
@@ -83,6 +83,10 @@
}
/* ---- EDITOR BAR ---- */
.modal .tab-content {
padding-top: 5px;
}
table.editorbar-panel {
cursor: pointer;
width: 100%;
@@ -74,6 +74,9 @@
/* ---- EDITOR BAR ---- */
.modal .tab-content
padding-top: 5px
table.editorbar-panel
cursor: pointer
width: 100%
+24 -45
View File
@@ -399,15 +399,11 @@
website.editor.LinkDialog = website.editor.Dialog.extend({
template: 'website.editor.dialog.link',
events: _.extend({}, website.editor.Dialog.prototype.events, {
'change .url-source': function (e) { this.changed($(e.target)); },
'click div.existing a': 'select_page',
}),
init: function (editor) {
this._super(editor);
// url -> name mapping for existing pages
this.pages = Object.create(null);
// name -> url mapping for the same
this.pages_by_name = Object.create(null);
},
start: function () {
var element;
@@ -466,24 +462,24 @@
},
save: function () {
var self = this, _super = this._super.bind(this);
var $e = this.$('.url-source').filter(function () { return !!this.value; });
var $active_tab = this.$('.tab-pane.active');
var $e = $active_tab.find('.url-source');
var val = $e.val(), done = $.when();
if ($e.hasClass('email-address')) {
if ($active_tab.is('#link-email')) {
this.make_link('mailto:' + val, false, val);
} else if ($e.hasClass('pages')) {
// ``val`` is the *name* of the page
var url = this.pages_by_name[val];
if (!url) {
// Create the page, get the URL back
done = $.get(_.str.sprintf(
'/pagenew/%s?noredirect', encodeURIComponent(val)))
.then(function (response) {
url = response;
});
}
} else if ($active_tab.is('#link-existing')) {
self.make_link(val, false, this.pages[val]);
} else if ($active_tab.is('#link-new')) {
// Create the page, get the URL back
done = $.get(_.str.sprintf(
'/pagenew/%s?noredirect', encodeURIComponent(val)))
.then(function (response) {
val = response;
});
done.then(function () {
self.make_link(url, false, val);
self.make_link(val, false);
});
} else {
this.make_link(val, this.$('input.window-new').prop('checked'));
@@ -497,36 +493,19 @@
var match, $control;
if (match = /(mailto):(.+)/.exec(href)) {
$control = this.$('input.email-address').val(match[2]);
$control = this.$('#link-email input').val(match[2]);
} else if(href in this.pages) {
$control = this.$('input.pages').val(this.pages[href]);
}
if (!$control) {
$control = this.$('input.url').val(href);
$control = this.$('#link-existing select').val(href);
} else {
$control = this.$('#link-external input:first').val(href);
}
this.changed($control);
var tab_name = $control.closest('.tab-pane').attr('id');
this.$('.nav a[href="#' + tab_name + '"]').tab('show');
this.$('input.window-new').prop(
'checked', this.element.getAttribute('target') === '_blank');
},
changed: function ($e) {
$e.closest('li.list-group-item').addClass('active')
.siblings().removeClass('active');
this.$('.url-source').not($e).val('');
},
/**
* Selected an existing page in dropdown
*/
select_page: function (e) {
e.preventDefault();
e.stopPropagation();
var $target = $(e.target);
this.$('input.pages').val($target.text()).change();
// No #dropdown('close'), and using #dropdown('toggle') sur
// #closest('.dropdown') makes the dropdown not work correctly
$target.closest('.open').removeClass('open');
},
/**
* CKEDITOR.plugins.link.getSelectedLink ignores the editor's root,
* if the editor is set directly on a link it will thus not work.
@@ -556,12 +535,12 @@
},
fill_pages: function (results) {
var self = this;
var $pages = this.$('div.existing ul').empty();
var pages = this.$('#link-existing-select')[0];
_(results).each(function (result) {
self.pages[result.url] = result.name;
self.pages_by_name[result.name] = result.url;
var $link = $('<a>').attr('href', result.url).text(result.name);
$('<li>').append($link).appendTo($pages);
pages.options[pages.options.length] =
new Option(result.name, result.url);
});
},
});
@@ -35,35 +35,40 @@
<t t-call="website.editor.dialog">
<t t-set="title">Link to</t>
<form>
<ul class="list-group form-group">
<li class="list-group-item active">
<h3 class="list-group-item-heading">Page on your website</h3>
<div class="input-group">
<input type="text" class="form-control pages url-source"
placeholder="Create new page"/>
<div class="input-group-btn existing dropdown">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Existing page <span class="caret"></span></button>
<ul class="dropdown-menu pull-right"/>
</div>
</div>
<ul class="nav nav-pills nav-justified">
<li class="active">
<a href="#link-existing" data-toggle="pill">Your website</a>
</li>
<li class="list-group-item">
<li><a href="#link-new" data-toggle="pill">New page</a></li>
<li><a href="#link-external" data-toggle="pill">External Page</a></li>
<li><a href="#link-email" data-toggle="pill">Email Address</a></li>
</ul>
<div class="tab-content">
<div id="link-existing" class="tab-pane active form-group">
<select id="link-existing-select"
class="form-control url-source">
<option disabled="disabled">Select existing page:</option>
</select>
</div>
<div id="link-new" class="tab-pane form-group">
<input type="text" class="form-control pages url-source"
placeholder="Enter the name of the new page"/>
</div>
<div id="link-external" class="tab-pane">
<input type="text" class="form-control url url-source"
placeholder="example: http://openerp.com"/>
<div class="pull-right">
<label>
<input type="checkbox" class="window-new"/>
Open in new window
</label>
</div>
<h3 class="list-group-item-heading">External Page</h3>
<input type="text" class="form-control url url-source"
placeholder="http://openerp.com"/>
</li>
<li class="list-group-item">
<h3 class="list-group-item-heading">Email Address</h3>
</div>
<div id="link-email" class="tab-pane">
<input type="email" class="form-control email-address url-source"
placeholder="you@yourwebsite.com"/>
</li>
</ul>
placeholder="example: you@yourwebsite.com"/>
</div>
</div>
</form>
</t>
</t>