[ADD] bootstrap image dialog, behavior missing
bzr revid: xmo@openerp.com-20130902075216-4y83ed2r19z2fgha
This commit is contained in:
Xavier Morel
parent
b49504a794
commit
1916b769ac
|
|
@ -138,7 +138,7 @@ class Website(openerp.addons.web.controllers.main.Home):
|
|||
return result
|
||||
|
||||
@http.route('/website/attach', type='http', auth='admin') # FIXME: auth
|
||||
def attach(self, CKEditorFuncNum, CKEditor, langCode, upload):
|
||||
def attach(self, func, upload):
|
||||
req = request.httprequest
|
||||
if req.method != 'POST':
|
||||
return werkzeug.exceptions.MethodNotAllowed(valid_methods=['POST'])
|
||||
|
|
@ -158,8 +158,8 @@ class Website(openerp.addons.web.controllers.main.Home):
|
|||
message = str(e)
|
||||
|
||||
return """<script type='text/javascript'>
|
||||
window.parent.CKEDITOR.tools.callFunction(%d, %s, %s);
|
||||
</script>""" % (int(CKEditorFuncNum), json.dumps(url), json.dumps(message))
|
||||
window.parent['%s'](%s, %s);
|
||||
</script>""" % (func, json.dumps(url), json.dumps(message))
|
||||
|
||||
@http.route('/website/attachment/<int:id>', type='http', auth="admin")
|
||||
def attachment(self, id):
|
||||
|
|
|
|||
|
|
@ -17,15 +17,21 @@
|
|||
function link_dialog(editor) {
|
||||
return new website.editor.LinkDialog(editor).appendTo(document.body);
|
||||
}
|
||||
function image_dialog(editor) {
|
||||
return new website.editor.ImageDialog(editor).appendTo(document.body);
|
||||
}
|
||||
|
||||
website.init_editor = function () {
|
||||
CKEDITOR.plugins.add('customdialogs', {
|
||||
requires: 'link,image',
|
||||
init: function (editor) {
|
||||
editor.on('doubleclick', function (evt) {
|
||||
if (evt.data.dialog === 'link' || evt.data.dialog === 'image') {
|
||||
if (evt.data.dialog === 'link') {
|
||||
delete evt.data.dialog;
|
||||
link_dialog(editor);
|
||||
} else if(evt.data.dialog === 'image') {
|
||||
delete evt.data.dialog;
|
||||
image_dialog(editor);
|
||||
}
|
||||
// priority should be smaller than dialog (999) but bigger
|
||||
// than link or image (default=10)
|
||||
|
|
@ -41,7 +47,7 @@
|
|||
});
|
||||
editor.addCommand('image', {
|
||||
exec: function (editor, data) {
|
||||
console.log('image', editor, data);
|
||||
image_dialog(editor);
|
||||
return true;
|
||||
},
|
||||
canUndo: false,
|
||||
|
|
@ -138,13 +144,17 @@
|
|||
var $rte_ables = $editables.not('[data-oe-type]');
|
||||
var $raw_editables = $editables.not($rte_ables);
|
||||
|
||||
// temporary fix until we fix ckeditor
|
||||
$raw_editables.each(function () {
|
||||
$(this).parents().add($(this).find('*')).on('click', function(ev) {
|
||||
ev.preventDefault();
|
||||
ev.stopPropagation();
|
||||
// temporary: on raw editables, links are still active so an
|
||||
// editable link, containing a link or within a link becomes very
|
||||
// hard to edit. Disable linking for these.
|
||||
$raw_editables.parents('a')
|
||||
.add($raw_editables.find('a'))
|
||||
.on('click', function (e) {
|
||||
// Don't alter bubbling events not coming from links
|
||||
if (e.target === e.currentTarget) {
|
||||
e.preventDefault();
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
this.rte.start_edition($rte_ables);
|
||||
$raw_editables.on('keydown keypress cut paste', function (e) {
|
||||
|
|
@ -301,6 +311,7 @@
|
|||
website.editor.Dialog = openerp.Widget.extend({
|
||||
events: {
|
||||
'hidden.bs.modal': 'destroy',
|
||||
'click button.save': 'save',
|
||||
},
|
||||
init: function (editor) {
|
||||
this._super();
|
||||
|
|
@ -311,6 +322,9 @@
|
|||
this.$el.modal();
|
||||
return sup;
|
||||
},
|
||||
save: function () {
|
||||
this.$el.modal('hide');
|
||||
},
|
||||
});
|
||||
|
||||
website.editor.LinkDialog = website.editor.Dialog.extend({
|
||||
|
|
@ -386,7 +400,7 @@
|
|||
} else {
|
||||
this.make_link(val, this.$('input.window-new').prop('checked'));
|
||||
}
|
||||
this.$el.modal('hide');
|
||||
this._super();
|
||||
},
|
||||
bind_data: function () {
|
||||
var href = this.element && (this.element.data( 'cke-saved-href')
|
||||
|
|
@ -448,6 +462,39 @@
|
|||
});
|
||||
},
|
||||
});
|
||||
website.editor.ImageDialog = website.editor.Dialog.extend({
|
||||
template: 'website.editor.dialog.image',
|
||||
events: _.extend({}, website.editor.Dialog.prototype.events, {
|
||||
'change .url-source': function (e) { this.changed($(e.target)); },
|
||||
'click button.filepicker': function () {
|
||||
this.$('input[type=file]').click();
|
||||
},
|
||||
'change input[type=file]': 'file_selection',
|
||||
}),
|
||||
|
||||
file_selection: function (e) {
|
||||
this.$('button.filepicker').removeClass('btn-danger btn-success');
|
||||
|
||||
var self = this;
|
||||
var callback = _.uniqueId('func_');
|
||||
this.$('input[name=func]').val(callback);
|
||||
|
||||
window[callback] = function (url, error) {
|
||||
delete window[callback];
|
||||
self.file_selected(url, error);
|
||||
};
|
||||
this.$('form').submit();
|
||||
},
|
||||
file_selected: function(url, error) {
|
||||
var $button = this.$('button.filepicker');
|
||||
if (error) {
|
||||
$button.addClass('btn-danger');
|
||||
return;
|
||||
}
|
||||
$button.addClass('btn-success');
|
||||
this.$('input.url').val(url);
|
||||
},
|
||||
});
|
||||
|
||||
|
||||
var Observer = window.MutationObserver || window.WebkitMutationObserver || window.JsMutationObserver;
|
||||
|
|
|
|||
|
|
@ -12,46 +12,74 @@
|
|||
</div>
|
||||
</t>
|
||||
</t>
|
||||
<t t-name="website.editor.dialog.link">
|
||||
<t t-name="website.editor.dialog">
|
||||
<div class="modal" tabindex="-1" role="dialog" aria-hidden="true">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
|
||||
<h3>Link to:</h3>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<form>
|
||||
<ul class="list-group form-group">
|
||||
<li class="list-group-item active">
|
||||
<h3 class="list-group-item-heading">Page on Your Website</h3>
|
||||
<select class="form-control pages url-source"/>
|
||||
</li>
|
||||
<li class="list-group-item">
|
||||
<div class="pull-right">
|
||||
<label>
|
||||
<input type="checkbox" class="window-new"/>
|
||||
Open in new window
|
||||
</label>
|
||||
</div>
|
||||
<h3 class="list-group-item-heading pull-left">Website URL</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>
|
||||
<input type="email" class="form-control email-address url-source"
|
||||
placeholder="you@yourwebsite.com"/>
|
||||
</li>
|
||||
</ul>
|
||||
</form>
|
||||
<h3><t t-esc="title"/></h3>
|
||||
</div>
|
||||
<div class="modal-body"><t t-raw="__content__"/></div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
|
||||
<button type="button" class="btn btn-primary">Save changes</button>
|
||||
<button type="button" class="btn btn-primary save">Save changes</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</t>
|
||||
<t t-name="website.editor.dialog.link">
|
||||
<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>
|
||||
<select class="form-control pages url-source"/>
|
||||
</li>
|
||||
<li class="list-group-item">
|
||||
<div class="pull-right">
|
||||
<label>
|
||||
<input type="checkbox" class="window-new"/>
|
||||
Open in new window
|
||||
</label>
|
||||
</div>
|
||||
<h3 class="list-group-item-heading">Website URL</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>
|
||||
<input type="email" class="form-control email-address url-source"
|
||||
placeholder="you@yourwebsite.com"/>
|
||||
</li>
|
||||
</ul>
|
||||
</form>
|
||||
</t>
|
||||
</t>
|
||||
<t t-name="website.editor.dialog.image">
|
||||
<t t-call="website.editor.dialog">
|
||||
<t t-set="title">Image:</t>
|
||||
<form method="POST" action="/website/attach"
|
||||
enctype="multipart/form-data"
|
||||
target="fileframe">
|
||||
<div class="well">
|
||||
<!-- a href="#" class="pull-left">Find image</a -->
|
||||
<h3 class="list-group-item-heading">Image URL</h3>
|
||||
<input type="text" class="form-control url"
|
||||
placeholder="http://openerp.com"/>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<p class="">— or —</p>
|
||||
<input type="file" name="upload" style="position: absolute; opacity: 0; width: 1px; height: 1px;"/>
|
||||
<button type="button" class="btn btn-primary btn-lg filepicker">
|
||||
Upload an image from your computer
|
||||
</button>
|
||||
</div>
|
||||
<input type="hidden" name="func"/>
|
||||
</form>
|
||||
<iframe src="about:blank" name="fileframe" class="hidden"/>
|
||||
</t>
|
||||
</t>
|
||||
</templates>
|
||||
|
|
|
|||
Loading…
Reference in New Issue