[WIP] website: add media editor template
bzr revid: chm@openerp.com-20140326155822-f4wascgyrm7ffeg8
This commit is contained in:
chm@openerp.com
@@ -64,7 +64,7 @@
|
||||
return new website.editor.RTELinkDialog(editor).appendTo(document.body);
|
||||
}
|
||||
function image_dialog(editor, image) {
|
||||
return new website.editor.RTEImageDialog(editor, image).appendTo(document.body);
|
||||
return new website.editor.MediaDialog(editor, image).appendTo(document.body);
|
||||
}
|
||||
|
||||
// only enable editors manually
|
||||
@@ -80,7 +80,7 @@
|
||||
|
||||
website.init_editor = function () {
|
||||
CKEDITOR.plugins.add('customdialogs', {
|
||||
// requires: 'link,image',
|
||||
// requires: 'link,image',
|
||||
init: function (editor) {
|
||||
editor.on('doubleclick', function (evt) {
|
||||
var element = evt.data.element;
|
||||
@@ -754,7 +754,11 @@
|
||||
})
|
||||
}
|
||||
|
||||
$image_button.find("button.hover-style-button").addClass("btn-primary").removeClass("btn-default");
|
||||
if ($selected.parents('[data-oe-field="image"]').length) {
|
||||
$image_button.find("button.hover-style-button").hide();
|
||||
} else {
|
||||
$image_button.find("button.hover-style-button").show().addClass("btn-primary").removeClass("btn-default");
|
||||
}
|
||||
}).on('mouseleave', 'a, img, .fa', function (e) {
|
||||
var current = document.elementFromPoint(e.clientX, e.clientY);
|
||||
if (current === $link_button[0] || $(current).parent()[0] === $link_button[0] ||
|
||||
@@ -1324,6 +1328,31 @@
|
||||
},
|
||||
});
|
||||
|
||||
website.editor.Media = openerp.Widget.extend({
|
||||
init: function (editor) {
|
||||
this._super();
|
||||
this.editor = editor;
|
||||
},
|
||||
});
|
||||
website.editor.MediaDialog = website.editor.Dialog.extend({
|
||||
template: 'website.editor.dialog.media',
|
||||
init: function (editor, media) {
|
||||
this.media = media;
|
||||
this.editor = editor;
|
||||
this._super(editor);
|
||||
},
|
||||
start: function (editor, media) {
|
||||
this.imageDialog = new website.editor.RTEImageDialog(this.editor, this.media);
|
||||
this.imageDialog.appendTo(this.$("#editor-media-image"));
|
||||
console.log(this.imageDialog.$el[0]);
|
||||
this.iconDialog = new website.editor.FontIconsDialog(this.editor, this.media);
|
||||
this.iconDialog.appendTo(this.$("#editor-media-icon"));
|
||||
this.videoDialog = null;
|
||||
//this.videoDialog.appendTo(this.$("#editor-media-video"));
|
||||
return this._super();
|
||||
}
|
||||
});
|
||||
|
||||
/**
|
||||
* ImageDialog widget. Lets users change an image, including uploading a
|
||||
* new image in OpenERP or selecting the image style (if supported by
|
||||
@@ -1341,7 +1370,7 @@
|
||||
* selected by the users (or possibly the ones
|
||||
* originally passed in)
|
||||
*/
|
||||
website.editor.ImageDialog = website.editor.Dialog.extend({
|
||||
website.editor.ImageDialog = website.editor.Media.extend({
|
||||
template: 'website.editor.dialog.image',
|
||||
events: _.extend({}, website.editor.Dialog.prototype.events, {
|
||||
'change .url-source': function (e) { this.changed($(e.target)); },
|
||||
@@ -1447,6 +1476,7 @@
|
||||
new website.editor.ExistingImageDialog(this).appendTo(document.body);
|
||||
},
|
||||
});
|
||||
|
||||
website.editor.RTEImageDialog = website.editor.ImageDialog.extend({
|
||||
init: function (editor, image) {
|
||||
this._super(editor);
|
||||
@@ -1614,7 +1644,7 @@
|
||||
range.shrink(CKEDITOR.SHRINK_TEXT);
|
||||
var commonAncestor = range.getCommonAncestor();
|
||||
var viewRoot = editor.elementPath(commonAncestor).contains(function (element) {
|
||||
return element.data('oe-model') === 'ir.ui.view'
|
||||
return element.data('oe-model') === 'ir.ui.view';
|
||||
});
|
||||
if (!viewRoot) { return null; }
|
||||
// if viewRoot is the first link, don't edit it.
|
||||
@@ -1622,7 +1652,7 @@
|
||||
.contains('a', true);
|
||||
}
|
||||
|
||||
website.editor.FontIconsDialog = website.editor.Dialog.extend({
|
||||
website.editor.FontIconsDialog = website.editor.Media.extend({
|
||||
template: 'website.editor.dialog.font-icons',
|
||||
events : _.extend({}, website.editor.Dialog.prototype.events, {
|
||||
change: 'update_preview',
|
||||
@@ -1679,7 +1709,7 @@
|
||||
* all the new ones if necessary.
|
||||
*/
|
||||
save: function () {
|
||||
var classes = this.element.className.split(/\s+/);
|
||||
var classes = (this.element.className||"").split(/\s+/);
|
||||
var non_fa_classes = _.reject(classes, function (cls) {
|
||||
return cls === 'fa' || /^fa-/.test(cls);
|
||||
});
|
||||
@@ -1695,7 +1725,7 @@
|
||||
* which may not match the visual look of the element.
|
||||
*/
|
||||
load_data: function () {
|
||||
var classes = this.element.className.split(/\s+/);
|
||||
var classes = (this.element.className||"").split(/\s+/);
|
||||
for (var i = 0; i < classes.length; i++) {
|
||||
var cls = classes[i];
|
||||
switch(cls) {
|
||||
|
||||
@@ -88,49 +88,83 @@
|
||||
</form>
|
||||
</t>
|
||||
</t>
|
||||
<t t-name="website.editor.dialog.image">
|
||||
<t t-call="website.editor.dialog">
|
||||
<t t-set="title">Image:</t>
|
||||
<div class="row">
|
||||
<form method="POST" action="/website/attach"
|
||||
enctype="multipart/form-data"
|
||||
target="fileframe"
|
||||
class="col-sm-8">
|
||||
<div class="text-center">
|
||||
<input type="file" name="upload" accept="image/*" 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>
|
||||
<button type="button" class="btn btn-lg hidden wait" disabled="disabled"/>
|
||||
<p class="text-muted mt16">— or —</p>
|
||||
<t t-name="website.editor.dialog.media">
|
||||
<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>
|
||||
<!-- Nav tabs -->
|
||||
<ul class="nav nav-tabs">
|
||||
<li class="active"><a href="#editor-media-image" data-toggle="tab">Image</a></li>
|
||||
<li><a href="#editor-media-icon" data-toggle="tab">Pictogram</a></li>
|
||||
<li><a href="#editor-media-video" data-toggle="tab">Video</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="well">
|
||||
<a href="#existing" class="pull-right">Browse existing images</a>
|
||||
<h3 class="list-group-item-heading">Image URL</h3>
|
||||
<input type="text" class="form-control url"
|
||||
placeholder="http://openerp.com"/>
|
||||
<div class="modal-body">
|
||||
<!-- Tab panes -->
|
||||
<div class="tab-content">
|
||||
<div class="tab-pane fade in active" id="editor-media-image">
|
||||
|
||||
</div>
|
||||
<div class="tab-pane fade" id="editor-media-icon">
|
||||
|
||||
</div>
|
||||
<div class="tab-pane fade" id="editor-media-video">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-primary save">Save</button>
|
||||
<button type="button" class="btn hidden wait" disabled="disabled"/>
|
||||
or
|
||||
<a href="#" data-dismiss="modal" aria-hidden="true">Discard</a>
|
||||
</div>
|
||||
<input type="hidden" name="func"/>
|
||||
<div class="help-block"/>
|
||||
</form>
|
||||
<div class="col-sm-4 image-preview-container">
|
||||
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAC0lEQVQIHWP4zwAAAgEBAMVfG14AAAAASUVORK5CYII%3D"
|
||||
class="pull-right img-rounded image-preview"
|
||||
width="100%"/>
|
||||
<img src="/web/static/src/img/throbber-large.gif"
|
||||
class="pull-right img-rounded wait hidden"
|
||||
width="100%"/>
|
||||
<select class="form-control image-style">
|
||||
<option value="">No styling</option>
|
||||
<option value="img-rounded">Rounded corners</option>
|
||||
<option value="img-thumbnail">Box</option>
|
||||
<option value="img-circle">Circle</option>
|
||||
<option value="shadow">Shadow</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<iframe src="about:blank" name="fileframe" class="hidden"/>
|
||||
</t>
|
||||
</div>
|
||||
</t>
|
||||
<t t-name="website.editor.dialog.image">
|
||||
<div class="row">
|
||||
<form method="POST" action="/website/attach"
|
||||
enctype="multipart/form-data"
|
||||
target="fileframe"
|
||||
class="col-sm-8">
|
||||
<div class="text-center">
|
||||
<input type="file" name="upload" accept="image/*" 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>
|
||||
<button type="button" class="btn btn-lg hidden wait" disabled="disabled"/>
|
||||
<p class="text-muted mt16">— or —</p>
|
||||
</div>
|
||||
<div class="well">
|
||||
<a href="#existing" class="pull-right">Browse existing images</a>
|
||||
<h3 class="list-group-item-heading">Image URL</h3>
|
||||
<input type="text" class="form-control url"
|
||||
placeholder="http://openerp.com"/>
|
||||
</div>
|
||||
<input type="hidden" name="func"/>
|
||||
<div class="help-block"/>
|
||||
</form>
|
||||
<div class="col-sm-4 image-preview-container">
|
||||
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAC0lEQVQIHWP4zwAAAgEBAMVfG14AAAAASUVORK5CYII%3D"
|
||||
class="pull-right img-rounded image-preview"
|
||||
width="100%"/>
|
||||
<img src="/web/static/src/img/throbber-large.gif"
|
||||
class="pull-right img-rounded wait hidden"
|
||||
width="100%"/>
|
||||
<select class="form-control image-style">
|
||||
<option value="">No styling</option>
|
||||
<option value="img-rounded">Rounded corners</option>
|
||||
<option value="img-thumbnail">Box</option>
|
||||
<option value="img-circle">Circle</option>
|
||||
<option value="shadow">Shadow</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<iframe src="about:blank" name="fileframe" class="hidden"/>
|
||||
</t>
|
||||
<t t-name="website.editor.dialog.image.existing">
|
||||
<div class="modal" tabindex="-1" role="dialog" aria-hidden="true">
|
||||
@@ -225,41 +259,38 @@
|
||||
</t>
|
||||
|
||||
<t t-name="website.editor.dialog.font-icons">
|
||||
<t t-call="website.editor.dialog">
|
||||
<t t-set="title">Icon:</t>
|
||||
<form>
|
||||
<div class="form-group" id="fa-preview">
|
||||
<form>
|
||||
<div class="form-group" id="fa-preview">
|
||||
|
||||
</div>
|
||||
<div class="form-group font-icons fa fa-search">
|
||||
<input type="hidden" id="fa-icon" class="form-control"/>
|
||||
<input type="hidden" id="fa-size" class="form-control"/>
|
||||
<input type="search" class="form-control" id="icon-search"/>
|
||||
<div class="font-icons-icons">
|
||||
<t t-call="website.editor.dialog.font-icons.icons">
|
||||
<t t-set="icons" t-value="widget.icons"/>
|
||||
</t>
|
||||
</div>
|
||||
<div class="form-group font-icons fa fa-search">
|
||||
<input type="hidden" id="fa-icon" class="form-control"/>
|
||||
<input type="hidden" id="fa-size" class="form-control"/>
|
||||
<input type="search" class="form-control" id="icon-search"/>
|
||||
<div class="font-icons-icons">
|
||||
<t t-call="website.editor.dialog.font-icons.icons">
|
||||
<t t-set="icons" t-value="widget.icons"/>
|
||||
</t>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="fa-rotation">Rotation</label>
|
||||
<select id="fa-rotation" class="form-control">
|
||||
<option value="">None</option>
|
||||
<option value="fa-spin">Spin</option>
|
||||
<option value="fa-rotate-90">Rotate 90º</option>
|
||||
<option value="fa-rotate-180">Rotate 180º</option>
|
||||
<option value="fa-rotate-270">Rotate 270º</option>
|
||||
<option value="fa-flip-horizontal">Horizontal flip</option>
|
||||
<option value="fa-flip-vertical">Vertical flip</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>
|
||||
<input type="checkbox" id="fa-border"/> border
|
||||
</label>
|
||||
</div>
|
||||
</form>
|
||||
</t>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="fa-rotation">Rotation</label>
|
||||
<select id="fa-rotation" class="form-control">
|
||||
<option value="">None</option>
|
||||
<option value="fa-spin">Spin</option>
|
||||
<option value="fa-rotate-90">Rotate 90º</option>
|
||||
<option value="fa-rotate-180">Rotate 180º</option>
|
||||
<option value="fa-rotate-270">Rotate 270º</option>
|
||||
<option value="fa-flip-horizontal">Horizontal flip</option>
|
||||
<option value="fa-flip-vertical">Vertical flip</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>
|
||||
<input type="checkbox" id="fa-border"/> border
|
||||
</label>
|
||||
</div>
|
||||
</form>
|
||||
</t>
|
||||
<t t-name="website.editor.dialog.font-icons.icons">
|
||||
<span t-foreach="icons" t-as="icon"
|
||||
|
||||
Reference in New Issue
Block a user