[IMP] website: add video media editor
bzr revid: chm@openerp.com-20140328104453-2faynhhc1wi5598l
This commit is contained in:
chm@openerp.com
parent
e289e23298
commit
b0625b1191
|
|
@ -1,3 +1,4 @@
|
|||
@charset "utf-8";
|
||||
/* THIS CSS FILE IS FOR WEBSITE THEMING CUSTOMIZATION ONLY
|
||||
*
|
||||
* css for editor buttons, openerp widget included in the website and other
|
||||
|
|
@ -531,8 +532,15 @@ span[data-oe-type="monetary"] {
|
|||
margin: 40px auto;
|
||||
}
|
||||
|
||||
.oe_website_overflow_ellipsis{
|
||||
white-space:nowrap;
|
||||
overflow:hidden;
|
||||
text-overflow:ellipsis;
|
||||
div.media_iframe_video {
|
||||
height: 0;
|
||||
margin: 0 auto;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
padding-bottom: 66.5%;
|
||||
}
|
||||
div.media_iframe_video iframe {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -435,3 +435,13 @@ span[data-oe-type="monetary"]
|
|||
overflow:hidden
|
||||
text-overflow:ellipsis
|
||||
|
||||
div.media_iframe_video
|
||||
height: 0
|
||||
margin: 0 auto
|
||||
text-align: center
|
||||
position: relative
|
||||
overflow: hidden
|
||||
padding-bottom: 66.5%
|
||||
iframe
|
||||
width: 100%
|
||||
height: 100%
|
||||
|
|
@ -727,7 +727,7 @@
|
|||
// -ish, because when moving to the button itself ``previous`` is
|
||||
// still set to the element having triggered showing the button.
|
||||
var previous;
|
||||
$(editor.element.$).on('mouseover', 'a, img, .fa', function () {
|
||||
$(editor.element.$).on('mouseover', 'a, img, .fa, .media_iframe_video', function () {
|
||||
// Back from edit button -> ignore
|
||||
if (previous && previous === this) { return; }
|
||||
|
||||
|
|
@ -746,7 +746,7 @@
|
|||
previous = this;
|
||||
var $selected = $(this);
|
||||
var position = $selected.offset();
|
||||
if ($selected.is('img') || $selected.is('.fa')) {
|
||||
if ($selected.is('img') || $selected.is('.fa') || $selected.is('.media_iframe_video')) {
|
||||
$link_button.hide();
|
||||
// center button on image
|
||||
$image_button.show().offset({
|
||||
|
|
@ -1370,35 +1370,38 @@
|
|||
}),
|
||||
|
||||
init: function (editor, media) {
|
||||
this.media = media;
|
||||
this._super(editor);
|
||||
this.editor = editor;
|
||||
this.page = 0;
|
||||
this._super(editor);
|
||||
this.media = media;
|
||||
},
|
||||
start: function (editor, media) {
|
||||
start: function () {
|
||||
var self = this;
|
||||
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, this.editor, this.media);
|
||||
this.iconDialog.appendTo(this.$("#editor-media-icon"));
|
||||
this.videoDialog = {};
|
||||
//this.videoDialog.appendTo(this.$("#editor-media-video"));
|
||||
this.videoDialog = new website.editor.VideoDialog(this, this.editor, this.media);
|
||||
this.videoDialog.appendTo(this.$("#editor-media-video"));
|
||||
|
||||
this.active = this.imageDialog;
|
||||
|
||||
$('a[data-toggle="tab"]').on('shown.bs.tab', function (event) {
|
||||
if ($(event.target).is('[href="#editor-media-image"]')) {
|
||||
self.active = self.imageDialog;
|
||||
self.$('.nav-tabs li.search').removeClass("hidden");
|
||||
} else if ($(event.target).is('[href="#editor-media-icon"]')) {
|
||||
self.active = self.iconDialog;
|
||||
self.$('.nav-tabs li.search').removeClass("hidden");
|
||||
} else if ($(event.target).is('[href="#editor-media-video"]')) {
|
||||
self.active = self.videoDialog;
|
||||
self.$('.nav-tabs li.search').addClass("hidden");
|
||||
}
|
||||
});
|
||||
|
||||
if (this.media.$.nodeName === "IMG") {
|
||||
this.$('[href="#editor-media-image"]').tab('show');
|
||||
} else if (this.media.$.nodeName === "IFRAME") {
|
||||
} else if (this.media.$.className.match(/(^|\s)media_iframe_video($|\s)/)) {
|
||||
this.$('[href="#editor-media-video"]').tab('show');
|
||||
} else if (this.media.$.className.match(/(^|\s)fa($|\s)/)) {
|
||||
this.$('[href="#editor-media-icon"]').tab('show');
|
||||
|
|
@ -1474,9 +1477,9 @@
|
|||
'click .existing-attachment-remove': 'try_remove',
|
||||
}),
|
||||
|
||||
init: function (editor, media) {
|
||||
init: function (parent, editor, media) {
|
||||
this.page = 0;
|
||||
this._super(editor, media);
|
||||
this._super(parent, editor, media);
|
||||
},
|
||||
start: function () {
|
||||
var res = this._super();
|
||||
|
|
@ -1822,6 +1825,67 @@
|
|||
}
|
||||
});
|
||||
|
||||
website.editor.VideoDialog = website.editor.Media.extend({
|
||||
template: 'website.editor.dialog.video',
|
||||
events : _.extend({}, website.editor.Dialog.prototype.events, {
|
||||
'input input#urlvideo': 'get_video',
|
||||
}),
|
||||
start: function () {
|
||||
this.$iframe = this.$("iframe");
|
||||
var $media = $(this.media.$);
|
||||
if ($media.hasClass("media_iframe_video")) {
|
||||
var src = $media.data('src');
|
||||
this.$("input#urlvideo").val(src);
|
||||
this.$("#autoplay").attr("checked", src.indexOf('autoplay=1') != -1);
|
||||
this.get_video();
|
||||
}
|
||||
return this._super();
|
||||
},
|
||||
get_url: function () {
|
||||
var video_id = this.$("#video_id").val();
|
||||
var video_type = this.$("#video_type").val();
|
||||
switch (video_type) {
|
||||
case "youtube":
|
||||
return "//www.youtube.com/embed/" + video_id + "?autoplay=" + (this.$("#autoplay").is(":checked") ? 1 : 0);
|
||||
case "vimeo":
|
||||
return "//player.vimeo.com/video/" + video_id + "?autoplay=" + (this.$("#autoplay").is(":checked") ? 1 : 0);
|
||||
case "dailymotion":
|
||||
return "//www.dailymotion.com/embed/video/" + video_id + "?autoplay=" + (this.$("#autoplay").is(":checked") ? 1 : 0);
|
||||
}
|
||||
},
|
||||
get_video: function () {
|
||||
var needle = this.$("input#urlvideo").val();
|
||||
var video_id;
|
||||
var video_type;
|
||||
|
||||
if (needle.indexOf(".youtube.") != -1) {
|
||||
video_type = "youtube";
|
||||
video_id = needle.match(/\.youtube\.[a-z]+\/(embed\/|watch\?v=)?([^\/?&]+)/i)[2];
|
||||
} else if (needle.indexOf("//youtu.") != -1) {
|
||||
video_type = "youtube";
|
||||
video_id = needle.match(/youtube\.[a-z]+\/([^\/?&]+)/i)[1];
|
||||
} else if (needle.indexOf("player.vimeo.") != -1 || needle.indexOf("//vimeo.") != -1) {
|
||||
video_type = "vimeo";
|
||||
video_id = needle.match(/vimeo\.[a-z]+\/([^\/?&]+)/i)[1];
|
||||
} else if (needle.indexOf(".dailymotion.") != -1) {
|
||||
video_type = "dailymotion";
|
||||
video_id = needle.match(/dailymotion\.[a-z]+\/(embed\/)?(video\/)?([^\/?&]+)/i)[3];
|
||||
}
|
||||
|
||||
this.$("#video_id").val(video_id);
|
||||
this.$("#video_type").val(video_type);
|
||||
|
||||
this.$iframe.attr("src", this.get_url());
|
||||
},
|
||||
save: function () {
|
||||
$(this.media.$).replaceWith(
|
||||
'<div class="media_iframe_video" data-type="'+video_type+'" data-type="'+video_id+'" data-src="'+this.get_url()+'">'+
|
||||
'<iframe src="'+this.get_url()+'" frameborder="0" allowfullscreen="allowfullscreen"></iframe>'+
|
||||
'</div>');
|
||||
this._super();
|
||||
},
|
||||
});
|
||||
|
||||
website.Observer = window.MutationObserver || window.WebkitMutationObserver || window.JsMutationObserver;
|
||||
var OBSERVER_CONFIG = {
|
||||
childList: true,
|
||||
|
|
|
|||
|
|
@ -148,4 +148,11 @@
|
|||
});
|
||||
},
|
||||
});
|
||||
|
||||
website.snippet.animationRegistry.media_video = website.snippet.Animation.extend({
|
||||
selector: ".media_iframe_video",
|
||||
start: function () {
|
||||
this.$target.html('<iframe src="'+this.$target.data("src")+'" frameborder="0" allowfullscreen="allowfullscreen"></iframe>');
|
||||
},
|
||||
});
|
||||
})();
|
||||
|
|
|
|||
|
|
@ -101,13 +101,13 @@
|
|||
<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>
|
||||
<li style="float: right;">
|
||||
<li class="search" style="float: right;">
|
||||
<ul class="pager mb0 mt0">
|
||||
<li class="previous disabled"><a href="#">← Previous</a></li>
|
||||
<li class="next disabled"><a href="#">Next →</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li style="float: right;">
|
||||
<li class="search" style="float: right;">
|
||||
<form action="#">
|
||||
<div class="form-group font-icons fa fa-search mb0">
|
||||
<input type="search" class="form-control" id="icon-search"/>
|
||||
|
|
@ -274,9 +274,9 @@
|
|||
</t>
|
||||
|
||||
<t t-name="website.editor.dialog.font-icons">
|
||||
<form>
|
||||
<input type="hidden" id="fa-icon" class="form-control"/>
|
||||
<input type="hidden" id="fa-size" class="form-control"/>
|
||||
<form action="#">
|
||||
<input type="hidden" id="fa-icon"/>
|
||||
<input type="hidden" id="fa-size"/>
|
||||
<div class="font-icons-icons">
|
||||
<t t-call="website.editor.dialog.font-icons.icons">
|
||||
<t t-set="icons" t-value="widget.icons"/>
|
||||
|
|
@ -295,4 +295,42 @@
|
|||
</span>
|
||||
</t>
|
||||
|
||||
<t t-name="website.editor.dialog.video">
|
||||
<form action="#" class="form-inline">
|
||||
<div class="well">
|
||||
<div class="form-group">
|
||||
<label for="urlvideo">Viedo URL</label>
|
||||
<input type="text"
|
||||
name="url"
|
||||
class="form-control url"
|
||||
style="width: 400px;"
|
||||
id="urlvideo"
|
||||
placeholder="http://openerp.com"
|
||||
value="//www.youtube.com/embed/yws1tbgNV7k"/>
|
||||
<span class="text-muted">
|
||||
Youtube, Vimeo, Dailymotion
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="video-preview" style="width: 450px; margin: 0 auto;">
|
||||
<div class="media_iframe_video">
|
||||
<iframe
|
||||
src="//www.youtube.com/embed/yws1tbgNV7k"
|
||||
frameborder="0"
|
||||
allowfullscreen="allowfullscreen"></iframe>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<input type="hidden" id="video_id" value="yws1tbgNV7k"/>
|
||||
<input type="hidden" id="video_type" value="youtube"/>
|
||||
|
||||
<div class="text-center mt32">
|
||||
<div class="checkbox">
|
||||
<label><input type="checkbox" id="autoplay"/> Autoplay</label>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</t>
|
||||
|
||||
</templates>
|
||||
|
|
|
|||
Loading…
Reference in New Issue