[ADD] bootstrap image dialog, behavior missing
bzr revid: xmo@openerp.com-20130902075216-4y83ed2r19z2fgha
This commit is contained in:
parent
b49504a794
commit
1916b769ac
|
@ -138,7 +138,7 @@ class Website(openerp.addons.web.controllers.main.Home):
|
||||||
return result
|
return result
|
||||||
|
|
||||||
@http.route('/website/attach', type='http', auth='admin') # FIXME: auth
|
@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
|
req = request.httprequest
|
||||||
if req.method != 'POST':
|
if req.method != 'POST':
|
||||||
return werkzeug.exceptions.MethodNotAllowed(valid_methods=['POST'])
|
return werkzeug.exceptions.MethodNotAllowed(valid_methods=['POST'])
|
||||||
|
@ -158,8 +158,8 @@ class Website(openerp.addons.web.controllers.main.Home):
|
||||||
message = str(e)
|
message = str(e)
|
||||||
|
|
||||||
return """<script type='text/javascript'>
|
return """<script type='text/javascript'>
|
||||||
window.parent.CKEDITOR.tools.callFunction(%d, %s, %s);
|
window.parent['%s'](%s, %s);
|
||||||
</script>""" % (int(CKEditorFuncNum), json.dumps(url), json.dumps(message))
|
</script>""" % (func, json.dumps(url), json.dumps(message))
|
||||||
|
|
||||||
@http.route('/website/attachment/<int:id>', type='http', auth="admin")
|
@http.route('/website/attachment/<int:id>', type='http', auth="admin")
|
||||||
def attachment(self, id):
|
def attachment(self, id):
|
||||||
|
|
|
@ -17,15 +17,21 @@
|
||||||
function link_dialog(editor) {
|
function link_dialog(editor) {
|
||||||
return new website.editor.LinkDialog(editor).appendTo(document.body);
|
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 () {
|
website.init_editor = function () {
|
||||||
CKEDITOR.plugins.add('customdialogs', {
|
CKEDITOR.plugins.add('customdialogs', {
|
||||||
requires: 'link,image',
|
requires: 'link,image',
|
||||||
init: function (editor) {
|
init: function (editor) {
|
||||||
editor.on('doubleclick', function (evt) {
|
editor.on('doubleclick', function (evt) {
|
||||||
if (evt.data.dialog === 'link' || evt.data.dialog === 'image') {
|
if (evt.data.dialog === 'link') {
|
||||||
delete evt.data.dialog;
|
delete evt.data.dialog;
|
||||||
link_dialog(editor);
|
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
|
// priority should be smaller than dialog (999) but bigger
|
||||||
// than link or image (default=10)
|
// than link or image (default=10)
|
||||||
|
@ -41,7 +47,7 @@
|
||||||
});
|
});
|
||||||
editor.addCommand('image', {
|
editor.addCommand('image', {
|
||||||
exec: function (editor, data) {
|
exec: function (editor, data) {
|
||||||
console.log('image', editor, data);
|
image_dialog(editor);
|
||||||
return true;
|
return true;
|
||||||
},
|
},
|
||||||
canUndo: false,
|
canUndo: false,
|
||||||
|
@ -138,13 +144,17 @@
|
||||||
var $rte_ables = $editables.not('[data-oe-type]');
|
var $rte_ables = $editables.not('[data-oe-type]');
|
||||||
var $raw_editables = $editables.not($rte_ables);
|
var $raw_editables = $editables.not($rte_ables);
|
||||||
|
|
||||||
// temporary fix until we fix ckeditor
|
// temporary: on raw editables, links are still active so an
|
||||||
$raw_editables.each(function () {
|
// editable link, containing a link or within a link becomes very
|
||||||
$(this).parents().add($(this).find('*')).on('click', function(ev) {
|
// hard to edit. Disable linking for these.
|
||||||
ev.preventDefault();
|
$raw_editables.parents('a')
|
||||||
ev.stopPropagation();
|
.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);
|
this.rte.start_edition($rte_ables);
|
||||||
$raw_editables.on('keydown keypress cut paste', function (e) {
|
$raw_editables.on('keydown keypress cut paste', function (e) {
|
||||||
|
@ -301,6 +311,7 @@
|
||||||
website.editor.Dialog = openerp.Widget.extend({
|
website.editor.Dialog = openerp.Widget.extend({
|
||||||
events: {
|
events: {
|
||||||
'hidden.bs.modal': 'destroy',
|
'hidden.bs.modal': 'destroy',
|
||||||
|
'click button.save': 'save',
|
||||||
},
|
},
|
||||||
init: function (editor) {
|
init: function (editor) {
|
||||||
this._super();
|
this._super();
|
||||||
|
@ -311,6 +322,9 @@
|
||||||
this.$el.modal();
|
this.$el.modal();
|
||||||
return sup;
|
return sup;
|
||||||
},
|
},
|
||||||
|
save: function () {
|
||||||
|
this.$el.modal('hide');
|
||||||
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
website.editor.LinkDialog = website.editor.Dialog.extend({
|
website.editor.LinkDialog = website.editor.Dialog.extend({
|
||||||
|
@ -386,7 +400,7 @@
|
||||||
} else {
|
} else {
|
||||||
this.make_link(val, this.$('input.window-new').prop('checked'));
|
this.make_link(val, this.$('input.window-new').prop('checked'));
|
||||||
}
|
}
|
||||||
this.$el.modal('hide');
|
this._super();
|
||||||
},
|
},
|
||||||
bind_data: function () {
|
bind_data: function () {
|
||||||
var href = this.element && (this.element.data( 'cke-saved-href')
|
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;
|
var Observer = window.MutationObserver || window.WebkitMutationObserver || window.JsMutationObserver;
|
||||||
|
|
|
@ -12,46 +12,74 @@
|
||||||
</div>
|
</div>
|
||||||
</t>
|
</t>
|
||||||
</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" tabindex="-1" role="dialog" aria-hidden="true">
|
||||||
<div class="modal-dialog">
|
<div class="modal-dialog">
|
||||||
<div class="modal-content">
|
<div class="modal-content">
|
||||||
<div class="modal-header">
|
<div class="modal-header">
|
||||||
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
|
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
|
||||||
<h3>Link to:</h3>
|
<h3><t t-esc="title"/></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>
|
|
||||||
</div>
|
</div>
|
||||||
|
<div class="modal-body"><t t-raw="__content__"/></div>
|
||||||
<div class="modal-footer">
|
<div class="modal-footer">
|
||||||
<button type="button" class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
|
<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>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</t>
|
</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>
|
</templates>
|
||||||
|
|
Loading…
Reference in New Issue