[WIP] website media editor
bzr revid: chm@openerp.com-20140327171417-nz2cd8tn2dmmljge
This commit is contained in:
chm@openerp.com
parent
c8d0175e61
commit
e289e23298
|
|
@ -324,6 +324,10 @@ ul.oe_menu_editor .disclose {
|
|||
cursor: pointer;
|
||||
}
|
||||
|
||||
.img-responsive {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* ---- MOBILE PREVIEW ---- {{{ */
|
||||
.oe_mobile_preview.modal .modal-content {
|
||||
height: 660px;
|
||||
|
|
|
|||
|
|
@ -284,6 +284,9 @@ $attachment-border-color: #848490
|
|||
.cke_editable .fa
|
||||
cursor: pointer
|
||||
|
||||
.img-responsive
|
||||
text-align: center
|
||||
|
||||
// }}}
|
||||
|
||||
/* ---- MOBILE PREVIEW ---- {{{ */
|
||||
|
|
|
|||
|
|
@ -653,7 +653,7 @@
|
|||
* @returns {jQuery}
|
||||
*/
|
||||
make_hover_button_image: function (editfn, stylefn) {
|
||||
var $div = $(openerp.qweb.render('website.editor.hoverbutton.image', {}))
|
||||
var $div = $(openerp.qweb.render('website.editor.hoverbutton.media', {}))
|
||||
.hide()
|
||||
.appendTo(document.body);
|
||||
|
||||
|
|
@ -1344,8 +1344,9 @@
|
|||
});
|
||||
|
||||
website.editor.Media = openerp.Widget.extend({
|
||||
init: function (editor, media) {
|
||||
init: function (parent, editor, media) {
|
||||
this._super();
|
||||
this.parent = parent;
|
||||
this.editor = editor;
|
||||
this.media = media;
|
||||
},
|
||||
|
|
@ -1353,6 +1354,8 @@
|
|||
this.$preview = this.$('.preview-container').detach();
|
||||
return this._super();
|
||||
},
|
||||
search: function (needle) {
|
||||
},
|
||||
save: function () {
|
||||
},
|
||||
cancel: function () {
|
||||
|
|
@ -1362,6 +1365,9 @@
|
|||
});
|
||||
website.editor.MediaDialog = website.editor.Dialog.extend({
|
||||
template: 'website.editor.dialog.media',
|
||||
events : _.extend({}, website.editor.Dialog.prototype.events, {
|
||||
'input input#icon-search': 'search',
|
||||
}),
|
||||
|
||||
init: function (editor, media) {
|
||||
this.media = media;
|
||||
|
|
@ -1371,9 +1377,9 @@
|
|||
},
|
||||
start: function (editor, media) {
|
||||
var self = this;
|
||||
this.imageDialog = new website.editor.RTEImageDialog(this.editor, this.media);
|
||||
this.imageDialog = new website.editor.RTEImageDialog(this, this.editor, this.media);
|
||||
this.imageDialog.appendTo(this.$("#editor-media-image"));
|
||||
this.iconDialog = new website.editor.FontIconsDialog(this.editor, this.media);
|
||||
this.iconDialog = new website.editor.FontIconsDialog(this, this.editor, this.media);
|
||||
this.iconDialog.appendTo(this.$("#editor-media-icon"));
|
||||
this.videoDialog = {};
|
||||
//this.videoDialog.appendTo(this.$("#editor-media-video"));
|
||||
|
|
@ -1401,11 +1407,23 @@
|
|||
return this._super();
|
||||
},
|
||||
save: function () {
|
||||
if (this.active) {
|
||||
this.active.save();
|
||||
this.active.save();
|
||||
if (this.active === this.imageDialog) {
|
||||
this.media.$.className = this.media.$.className.replace(/(^|\s)fa[^\s]+/g, '');
|
||||
$(this.media.$).addClass("img img-responsive");
|
||||
}
|
||||
if (this.active === this.iconDialog) {
|
||||
this.media.$.className = this.media.$.className.replace(/(^|\s)img[^\s]+/g, '');
|
||||
}
|
||||
if (this.active === this.videoDialog) {
|
||||
this.media.$.className = this.media.$.className.replace(/(^|\s)(img|fa)[^\s]+/g, '');
|
||||
}
|
||||
return this._super();
|
||||
},
|
||||
search: function () {
|
||||
var needle = this.$("input#icon-search").val();
|
||||
this.active.search(needle || "");
|
||||
}
|
||||
});
|
||||
|
||||
/**
|
||||
|
|
@ -1612,8 +1630,8 @@
|
|||
});
|
||||
|
||||
website.editor.RTEImageDialog = website.editor.ImageDialog.extend({
|
||||
init: function (editor, media) {
|
||||
this._super(editor, media);
|
||||
init: function (parent, editor, media) {
|
||||
this._super(parent, editor, media);
|
||||
|
||||
this.on('start', this, this.proxy('started'));
|
||||
this.on('save', this, this.proxy('saved'));
|
||||
|
|
@ -1690,20 +1708,6 @@
|
|||
this.$('#fa-size').val(e.target.getAttribute('data-size'));
|
||||
this.update_preview();
|
||||
},
|
||||
'input input#icon-search': function () {
|
||||
var needle = this.$('#icon-search').val();
|
||||
var icons = this.icons;
|
||||
if (needle) {
|
||||
icons = _(icons).filter(function (icon) {
|
||||
return icon.id.substring(3).indexOf(needle) !== -1;
|
||||
});
|
||||
}
|
||||
|
||||
this.$('div.font-icons-icons').html(
|
||||
openerp.qweb.render(
|
||||
'website.editor.dialog.font-icons.icons',
|
||||
{icons: icons}));
|
||||
},
|
||||
}),
|
||||
|
||||
// List of FontAwesome icons in 4.0.3, extracted from the cheatsheet.
|
||||
|
|
@ -1720,6 +1724,19 @@
|
|||
start: function () {
|
||||
return this._super().then(this.proxy('load_data'));
|
||||
},
|
||||
search: function (needle) {
|
||||
var icons = this.icons;
|
||||
if (needle) {
|
||||
icons = _(icons).filter(function (icon) {
|
||||
return icon.id.substring(3).indexOf(needle) !== -1;
|
||||
});
|
||||
}
|
||||
|
||||
this.$('div.font-icons-icons').html(
|
||||
openerp.qweb.render(
|
||||
'website.editor.dialog.font-icons.icons',
|
||||
{icons: icons}));
|
||||
},
|
||||
/**
|
||||
* Removes existing FontAwesome classes on the bound element, and sets
|
||||
* all the new ones if necessary.
|
||||
|
|
@ -1765,9 +1782,6 @@
|
|||
this.$('#fa-icon').val(cls);
|
||||
}
|
||||
}
|
||||
if (this.$('#fa-icon').val() === "") {
|
||||
this.$('#fa-icon').val("fa-glass");
|
||||
}
|
||||
this.update_preview();
|
||||
},
|
||||
/**
|
||||
|
|
|
|||
|
|
@ -108,10 +108,8 @@
|
|||
</ul>
|
||||
</li>
|
||||
<li style="float: right;">
|
||||
<form>
|
||||
<form action="#">
|
||||
<div class="form-group font-icons fa fa-search mb0">
|
||||
<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>
|
||||
</form>
|
||||
|
|
@ -256,23 +254,29 @@
|
|||
<button contentEditable="false" type="button" class="btn btn-primary hover-edition-button btn-xs">Change</button>
|
||||
</t>
|
||||
|
||||
<t t-name="website.editor.hoverbutton.image">
|
||||
<t t-name="website.editor.hoverbutton.media">
|
||||
<div contentEditable="false" class="hover-edition dropdown">
|
||||
<a class="btn btn-primary btn-sm" data-toggle="dropdown" href="#">Customize</a>
|
||||
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
|
||||
<li><a href="#" class="hover-edition-button">Change Media</a></li>
|
||||
<li><a href="#" class="hover-style-button">Style</a></li>
|
||||
<li class="dropdown-submenu">
|
||||
<a href="#" tabindex="-1">Rotation</a>
|
||||
<ul class="dropdown-menu">
|
||||
<li data-value="fa-spin"><a>Spin</a></li>
|
||||
<li data-value="fa-flip-horizontal"><a>Horizontal flip</a></li>
|
||||
<li data-value="fa-flip-vertical"><a>Vertical flip</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="#" data-value="fa-border">border</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</t>
|
||||
|
||||
<t t-name="website.editor.dialog.font-icons">
|
||||
<form>
|
||||
<div class="form-group hidden 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>
|
||||
<input type="hidden" id="fa-icon" class="form-control"/>
|
||||
<input type="hidden" id="fa-size" class="form-control"/>
|
||||
<div class="font-icons-icons">
|
||||
<t t-call="website.editor.dialog.font-icons.icons">
|
||||
<t t-set="icons" t-value="widget.icons"/>
|
||||
|
|
@ -281,23 +285,6 @@
|
|||
<div class="form-group mt32" id="fa-preview">
|
||||
|
||||
</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">
|
||||
|
|
|
|||
Loading…
Reference in New Issue