[IMP] website: media editor: placeholder and preview
bzr revid: chm@openerp.com-20140408093648-zcx3nj5k068ejrb4
This commit is contained in:
chm@openerp.com
parent
df92252952
commit
d15ba59a23
|
|
@ -1442,7 +1442,7 @@
|
|||
* originally passed in)
|
||||
*/
|
||||
var IMAGES_PER_ROW = 6;
|
||||
var IMAGES_ROWS = 4;
|
||||
var IMAGES_ROWS = 2;
|
||||
website.editor.ImageDialog = website.editor.Media.extend({
|
||||
template: 'website.editor.dialog.image',
|
||||
events: _.extend({}, website.editor.Dialog.prototype.events, {
|
||||
|
|
@ -1454,7 +1454,13 @@
|
|||
},
|
||||
'change input[type=file]': 'file_selection',
|
||||
'submit form': 'form_submit',
|
||||
//'change input.url': 'preview_image',
|
||||
'change input.url': function (e) {
|
||||
if ($(e.target).val() === "") {
|
||||
this.$("button").addClass("btn-default").removeClass("btn-primary");
|
||||
} else {
|
||||
this.$("button").removeClass("btn-default").addClass("btn-primary");
|
||||
}
|
||||
},
|
||||
//'change select.image-style': 'preview_image',
|
||||
'click .existing-attachments img': 'select_existing',
|
||||
'click .existing-attachment-remove': 'try_remove',
|
||||
|
|
@ -1488,11 +1494,14 @@
|
|||
return res;
|
||||
},
|
||||
save: function () {
|
||||
if (!this.link) {
|
||||
this.link = this.$(".existing-attachments img:first").attr('src');
|
||||
}
|
||||
this.trigger('save', {
|
||||
url: this.$('input.url').val()
|
||||
url: this.link
|
||||
});
|
||||
this.media.renameNode("img");
|
||||
this.media.$.attributes.src = this.$('input.url').val();
|
||||
this.media.$.attributes.src = this.link;
|
||||
return this._super();
|
||||
},
|
||||
clear: function () {
|
||||
|
|
@ -1511,7 +1520,8 @@
|
|||
|
||||
set_image: function (url, error) {
|
||||
var self = this;
|
||||
this.$('input.url').val(error ? null : url || '');
|
||||
if (url) this.link = url;
|
||||
this.$('input.url').val('');
|
||||
this.fetch_existing().then(function () {
|
||||
self.selected_existing(url);
|
||||
});
|
||||
|
|
@ -1551,6 +1561,8 @@
|
|||
$button.addClass('btn-danger');
|
||||
}
|
||||
this.set_image(url, error);
|
||||
// auto save and close popup
|
||||
this.parent.save();
|
||||
},
|
||||
|
||||
fetch_existing: function (needle) {
|
||||
|
|
@ -1598,10 +1610,10 @@
|
|||
},
|
||||
select_existing: function (e) {
|
||||
var link = $(e.currentTarget).attr('src');
|
||||
this.link = link;
|
||||
this.selected_existing(link);
|
||||
},
|
||||
selected_existing: function (link) {
|
||||
this.$('input.url').val(link);
|
||||
this.$('.existing-attachment-cell.media_selected').removeClass("media_selected");
|
||||
var $select = this.$('.existing-attachment-cell img').filter(function () {
|
||||
return $(this).attr("src") == link;
|
||||
|
|
@ -1848,6 +1860,8 @@
|
|||
events : _.extend({}, website.editor.Dialog.prototype.events, {
|
||||
'click input#urlvideo ~ button': 'get_video',
|
||||
'click input#embedvideo ~ button': 'get_embed_video',
|
||||
'change input#urlvideo': 'change_input',
|
||||
'change input#embedvideo': 'change_input'
|
||||
}),
|
||||
start: function () {
|
||||
this.$iframe = this.$("iframe");
|
||||
|
|
@ -1860,6 +1874,15 @@
|
|||
}
|
||||
return this._super();
|
||||
},
|
||||
change_input: function (e) {
|
||||
var $input = $(e.target);
|
||||
var $button = $input.parent().find("button");
|
||||
if ($input.val() === "") {
|
||||
$button.addClass("btn-default").removeClass("btn-primary");
|
||||
} else {
|
||||
$button.removeClass("btn-default").addClass("btn-primary");
|
||||
}
|
||||
},
|
||||
get_url: function () {
|
||||
var video_id = this.$("#video_id").val();
|
||||
var video_type = this.$("#video_type").val();
|
||||
|
|
@ -1914,6 +1937,10 @@
|
|||
},
|
||||
save: function () {
|
||||
var video_id = this.$("#video_id").val();
|
||||
if (!video_id) {
|
||||
this.$("button.btn-primary").click();
|
||||
video_id = this.$("#video_id").val();
|
||||
}
|
||||
var video_type = this.$("#video_type").val();
|
||||
var style = this.media.$.attributes.style ? this.media.$.attributes.style.textContent : '';
|
||||
var $iframe = $(
|
||||
|
|
|
|||
|
|
@ -1493,6 +1493,7 @@
|
|||
|
||||
$(document.body).on("media-saved", self, function (event, prev , item) {
|
||||
self.editor.onBlur();
|
||||
self.BuildingBlock.make_active(false);
|
||||
self.BuildingBlock.make_active($(item));
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -147,17 +147,18 @@
|
|||
target="fileframe"
|
||||
class="form-inline">
|
||||
<div class="well">
|
||||
<div class="pull-right">
|
||||
<label for="iamgeurl">Image URL</label>
|
||||
<div class="form-group btn-group">
|
||||
<input type="text" name="url" class="form-control url pull-left" style="width: 320px;" id="iamgeurl" placeholder="http://openerp.com/logo.png"/>
|
||||
<button class="btn btn-default" type="submit">Add</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<input type="file" name="upload" accept="image/*" style="position: absolute; opacity: 0; width: 1px; height: 1px;"/>
|
||||
<button type="button" class="btn btn-primary filepicker">Upload an image from your computer</button>
|
||||
<button type="button" class="btn hidden wait" disabled="disabled">Uploading...</button>
|
||||
</div>
|
||||
<span class="text-muted">— or —</span>
|
||||
<label for="iamgeurl">Set an image URL</label>
|
||||
<div class="form-group btn-group">
|
||||
<input type="text" name="url" class="form-control url" style="width: 320px; float: left;" id="iamgeurl" placeholder="http://openerp.com"/>
|
||||
<button class="btn btn-primary" type="submit">Add</button>
|
||||
</div>
|
||||
</div>
|
||||
<input type="hidden" name="func"/>
|
||||
<div class="help-block"/>
|
||||
|
|
@ -303,9 +304,8 @@
|
|||
class="form-control url pull-left"
|
||||
style="width: 400px;"
|
||||
id="urlvideo"
|
||||
placeholder="http://openerp.com"
|
||||
value="//www.youtube.com/embed/yws1tbgNV7k"/>
|
||||
<button class="btn btn-primary">Add</button>
|
||||
placeholder="//www.youtube.com/embed/yws1tbgNV7k"/>
|
||||
<button class="btn btn-default">Preview</button>
|
||||
</div>
|
||||
<div class="form-group btn-group">
|
||||
<label for="urlvideo" style="width: 220px; line-height: 2em;" class="pull-left"><span class="text-muted">— or —</span> Embed Video (HTML)</label>
|
||||
|
|
@ -315,21 +315,21 @@
|
|||
style="width: 400px;"
|
||||
id="embedvideo"
|
||||
placeholder='<iframe src="//www.youtube.com/embed/yws1tbgNV7k"></iframe>'/>
|
||||
<button class="btn btn-primary">Add</button>
|
||||
<button class="btn btn-default">Preview</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="video-preview" style="width: 450px; margin: 0 auto;">
|
||||
<div class="media_iframe_video">
|
||||
<iframe
|
||||
src="//www.youtube.com/embed/yws1tbgNV7k"
|
||||
src=""
|
||||
frameborder="0"
|
||||
allowfullscreen="allowfullscreen"></iframe>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<input type="hidden" id="video_id" value="yws1tbgNV7k"/>
|
||||
<input type="hidden" id="video_type" value="youtube"/>
|
||||
<input type="hidden" id="video_id" value=""/>
|
||||
<input type="hidden" id="video_type" value=""/>
|
||||
|
||||
<div class="text-center mt32">
|
||||
<div class="checkbox">
|
||||
|
|
|
|||
Loading…
Reference in New Issue