[IMP] website: media editor doubleclick for video and begin to use snippet builder
bzr revid: chm@openerp.com-20140328141619-x9okgixai2v5dekr
This commit is contained in:
chm@openerp.com
parent
b0625b1191
commit
31269ba52f
|
|
@ -94,6 +94,10 @@
|
|||
display: none;
|
||||
}
|
||||
|
||||
.cke_editable .css_editable_mode_display {
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
.oe_structure.oe_empty:empty, [data-oe-type=html]:empty, .oe_structure.oe_empty > .oe_drop_zone.oe_insert:only-child, [data-oe-type=html] > .oe_drop_zone.oe_insert:only-child {
|
||||
background-image: url("/website/static/src/img/edit_here.png") !important;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -77,6 +77,9 @@
|
|||
.cke_editable .css_editable_mode_hidden
|
||||
display: none
|
||||
|
||||
.cke_editable .css_editable_mode_display
|
||||
display: block !important
|
||||
|
||||
.oe_structure.oe_empty:empty, [data-oe-type=html]:empty, .oe_structure.oe_empty > .oe_drop_zone.oe_insert:only-child, [data-oe-type=html] > .oe_drop_zone.oe_insert:only-child
|
||||
background-image: url('/website/static/src/img/edit_here.png') !important
|
||||
|
||||
|
|
|
|||
|
|
@ -544,3 +544,9 @@ div.media_iframe_video iframe {
|
|||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
div.media_iframe_video div {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: none;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -444,4 +444,9 @@ div.media_iframe_video
|
|||
padding-bottom: 66.5%
|
||||
iframe
|
||||
width: 100%
|
||||
height: 100%
|
||||
height: 100%
|
||||
div
|
||||
position: absolute
|
||||
width: 100%
|
||||
height: 100%
|
||||
display: none
|
||||
|
|
@ -84,10 +84,15 @@
|
|||
init: function (editor) {
|
||||
editor.on('doubleclick', function (evt) {
|
||||
var element = evt.data.element;
|
||||
if (element.is('img') && is_editable_node(element)) {
|
||||
if ((element.is('img') || element.$.className.indexOf(' fa-') != -1) && is_editable_node(element)) {
|
||||
image_dialog(editor, element);
|
||||
return;
|
||||
}
|
||||
var parent = new CKEDITOR.dom.element(element.$.parentNode);
|
||||
if (parent.$.className.indexOf('media_iframe_video') != -1 && is_editable_node(parent)) {
|
||||
image_dialog(editor, parent);
|
||||
return;
|
||||
}
|
||||
|
||||
element = get_selected_link(editor) || evt.data.element;
|
||||
if (!(element.is('a') && is_editable_node(element))) {
|
||||
|
|
@ -692,31 +697,6 @@
|
|||
previous = null;
|
||||
});
|
||||
|
||||
var $image_button = this.make_hover_button_image(function () {
|
||||
image_dialog(editor, new CKEDITOR.dom.element(previous));
|
||||
$image_button.hide();
|
||||
previous = null;
|
||||
}, function () {
|
||||
var prev = previous;
|
||||
var sel = new CKEDITOR.dom.element(prev);
|
||||
var $sel = $(sel.$);
|
||||
var $button = $(this);
|
||||
|
||||
if ($sel.data('transfo')) {
|
||||
$sel.transfo("destroy");
|
||||
$button.addClass("btn-primary").removeClass("btn-default");
|
||||
} else {
|
||||
$sel.transfo();
|
||||
$sel.data('transfo').$markup
|
||||
.on("mouseover", function () {
|
||||
$sel.trigger("mouseover");
|
||||
$button.removeClass("btn-primary").addClass("btn-default");
|
||||
$image_button.show();
|
||||
});
|
||||
$sel.data('transfo').$markup.mouseover();
|
||||
}
|
||||
});
|
||||
|
||||
function is_icons_widget(element) {
|
||||
var w = editor.widgets.getByElement(element);
|
||||
return w && w.name === 'icons';
|
||||
|
|
@ -727,7 +707,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, .media_iframe_video', function () {
|
||||
$(editor.element.$).on('mouseover', 'a', function () {
|
||||
// Back from edit button -> ignore
|
||||
if (previous && previous === this) { return; }
|
||||
|
||||
|
|
@ -746,41 +726,18 @@
|
|||
previous = this;
|
||||
var $selected = $(this);
|
||||
var position = $selected.offset();
|
||||
if ($selected.is('img') || $selected.is('.fa') || $selected.is('.media_iframe_video')) {
|
||||
$link_button.hide();
|
||||
// center button on image
|
||||
$image_button.show().offset({
|
||||
top: $selected.outerHeight() / 2
|
||||
+ position.top
|
||||
- $image_button.outerHeight() / 2,
|
||||
left: $selected.outerWidth() / 2
|
||||
+ position.left
|
||||
- $image_button.outerWidth() / 2,
|
||||
});
|
||||
} else {
|
||||
$image_button.hide();
|
||||
// put button below link, horizontally centered
|
||||
$link_button.show().offset({
|
||||
top: $selected.outerHeight()
|
||||
+ position.top,
|
||||
left: $selected.outerWidth() / 2
|
||||
+ position.left
|
||||
- $link_button.outerWidth() / 2
|
||||
})
|
||||
}
|
||||
|
||||
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");
|
||||
}
|
||||
$link_button.show().offset({
|
||||
top: $selected.outerHeight()
|
||||
+ position.top,
|
||||
left: $selected.outerWidth() / 2
|
||||
+ position.left
|
||||
- $link_button.outerWidth() / 2
|
||||
})
|
||||
}).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] ||
|
||||
current === $image_button[0] || $(current).parent()[0] === $image_button[0]) {
|
||||
if (current === $link_button[0] || $(current).parent()[0] === $link_button[0]) {
|
||||
return;
|
||||
}
|
||||
$image_button.add($link_button).hide();
|
||||
previous = null;
|
||||
});
|
||||
}
|
||||
|
|
@ -1412,11 +1369,11 @@
|
|||
save: function () {
|
||||
this.active.save();
|
||||
if (this.active === this.imageDialog) {
|
||||
this.media.$.className = this.media.$.className.replace(/(^|\s)fa[^\s]+/g, '');
|
||||
this.media.$.className = this.media.$.className.replace(/(^|\s)(fa|media_iframe_video)[^\s]+/g, '');
|
||||
$(this.media.$).addClass("img img-responsive");
|
||||
}
|
||||
if (this.active === this.iconDialog) {
|
||||
this.media.$.className = this.media.$.className.replace(/(^|\s)img[^\s]+/g, '');
|
||||
this.media.$.className = this.media.$.className.replace(/(^|\s)(img|media_iframe_video)[^\s]+/g, '');
|
||||
}
|
||||
if (this.active === this.videoDialog) {
|
||||
this.media.$.className = this.media.$.className.replace(/(^|\s)(img|fa)[^\s]+/g, '');
|
||||
|
|
@ -1828,7 +1785,7 @@
|
|||
website.editor.VideoDialog = website.editor.Media.extend({
|
||||
template: 'website.editor.dialog.video',
|
||||
events : _.extend({}, website.editor.Dialog.prototype.events, {
|
||||
'input input#urlvideo': 'get_video',
|
||||
'blur input#urlvideo': 'get_video',
|
||||
}),
|
||||
start: function () {
|
||||
this.$iframe = this.$("iframe");
|
||||
|
|
@ -1866,7 +1823,8 @@
|
|||
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];
|
||||
video_id = needle.match(/vimeo\.[a-z]+\/(video\/)?([^?&]+)/i)[2];
|
||||
console.log(video_id);
|
||||
} else if (needle.indexOf(".dailymotion.") != -1) {
|
||||
video_type = "dailymotion";
|
||||
video_id = needle.match(/dailymotion\.[a-z]+\/(embed\/)?(video\/)?([^\/?&]+)/i)[3];
|
||||
|
|
@ -1878,10 +1836,15 @@
|
|||
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()+'">'+
|
||||
var video_id = this.$("#video_id").val();
|
||||
var video_type = this.$("#video_type").val();
|
||||
var $iframe = $(
|
||||
'<div class="media_iframe_video" data-src="'+this.get_url()+'">'+
|
||||
'<div class="css_editable_mode_display"> </div>'+
|
||||
'<iframe src="'+this.get_url()+'" frameborder="0" allowfullscreen="allowfullscreen"></iframe>'+
|
||||
'</div>');
|
||||
$iframe.attr("style", this.$(this.media.$).attr("style"));
|
||||
$(this.media.$).replaceWith($iframe);
|
||||
this._super();
|
||||
},
|
||||
});
|
||||
|
|
|
|||
|
|
@ -152,7 +152,7 @@
|
|||
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>');
|
||||
this.$target.html('<div class="css_editable_mode_display"> </div><iframe src="'+this.$target.data("src")+'" frameborder="0" allowfullscreen="allowfullscreen"></iframe>');
|
||||
},
|
||||
});
|
||||
})();
|
||||
|
|
|
|||
|
|
@ -154,6 +154,7 @@
|
|||
this.on('rte:ready', this, function () {
|
||||
self.snippets.$button.removeClass("hidden");
|
||||
website.snippet.stop_animation();
|
||||
website.snippet.start_animation(true, $(".media_iframe_video"));
|
||||
});
|
||||
|
||||
return this._super.apply(this, arguments);
|
||||
|
|
@ -265,7 +266,8 @@
|
|||
'$el': $style,
|
||||
'selector-siblings': $style.data('selector-siblings'),
|
||||
'selector-children': $style.data('selector-children'),
|
||||
'selector-vertical-children': $style.data('selector-vertical-children')
|
||||
'selector-vertical-children': $style.data('selector-vertical-children'),
|
||||
'data': $style.data()
|
||||
};
|
||||
selector.push($style.data('selector'));
|
||||
});
|
||||
|
|
@ -332,6 +334,7 @@
|
|||
if (!$target.is(website.snippet.globalSelector)) {
|
||||
$target = $target.parents(website.snippet.globalSelector).first();
|
||||
}
|
||||
|
||||
if (!self.dom_filter($target).length) {
|
||||
$target = false;
|
||||
}
|
||||
|
|
@ -732,7 +735,9 @@
|
|||
this.$target.data("snippet-option-ids", styles);
|
||||
this.$overlay = this.$target.data('overlay');
|
||||
this['snippet-option-id'] = snippet_id;
|
||||
this.$el = website.snippet.templateOptions[snippet_id].$el.find(">li").clone();
|
||||
var $option = website.snippet.templateOptions[snippet_id].$el;
|
||||
this.$el = $option.find(">li").clone();
|
||||
this.data = $option.data();
|
||||
|
||||
this.required = this.$el.data("required");
|
||||
|
||||
|
|
@ -1425,6 +1430,43 @@
|
|||
}
|
||||
});
|
||||
|
||||
website.snippet.options.media = website.snippet.Option.extend({
|
||||
start: function () {
|
||||
var self = this;
|
||||
this._super();
|
||||
website.snippet.start_animation(true, this.$target);
|
||||
|
||||
this.$el.find('[data-toggle="dropdown"]').dropdown();
|
||||
this.$el.find(".hover-edition-button").click(function (event) {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
self.element = new CKEDITOR.dom.element(self.$target[0]);
|
||||
new website.editor.MediaDialog(self, self.element).appendTo(document.body);
|
||||
});
|
||||
this.$el.find(".hover-style-button").click(function (event) {
|
||||
self.transfo(event);
|
||||
});
|
||||
},
|
||||
transfo: function (event) {
|
||||
var self = this;
|
||||
var sel = new CKEDITOR.dom.element(this.$target[0]);
|
||||
var $button = $(event.target);
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
|
||||
if (this.$target.data('transfo')) {
|
||||
this.$target.transfo("destroy");
|
||||
$button.addClass("btn-primary").removeClass("btn-default");
|
||||
} else {
|
||||
this.$target.transfo();
|
||||
this.$target.data('transfo').$markup
|
||||
.on("mouseover", function () { self.$target.trigger("mouseover"); })
|
||||
.mouseover()
|
||||
.click(function () { self.$target.transfo("destroy"); });
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
website.snippet.Editor = openerp.Class.extend({
|
||||
init: function (BuildingBlock, dom) {
|
||||
|
|
@ -1434,6 +1476,7 @@
|
|||
this.snippet_id = this.$target.data("snippet-id");
|
||||
this._readXMLData();
|
||||
this.load_style_options();
|
||||
this.get_phantom();
|
||||
this.get_parent_block();
|
||||
this.start();
|
||||
},
|
||||
|
|
@ -1571,6 +1614,23 @@
|
|||
this.$overlay.find('[data-toggle="dropdown"]').dropdown();
|
||||
},
|
||||
|
||||
get_phantom: function () {
|
||||
var self = this;
|
||||
var phantom = false;
|
||||
for (var i in this.styles){
|
||||
if (this.styles[i].data.phantom) {
|
||||
phantom = true;
|
||||
break;
|
||||
}
|
||||
}
|
||||
if (false && phantom) {
|
||||
var $parent = this.$target.parents(website.snippet.globalSelector).first();
|
||||
setTimeout(function () {
|
||||
self.BuildingBlock.make_active($parent);
|
||||
}, 0);
|
||||
}
|
||||
},
|
||||
|
||||
get_parent_block: function () {
|
||||
var self = this;
|
||||
var $button = this.$overlay.find('.oe_snippet_parent');
|
||||
|
|
|
|||
|
|
@ -299,7 +299,7 @@
|
|||
<form action="#" class="form-inline">
|
||||
<div class="well">
|
||||
<div class="form-group">
|
||||
<label for="urlvideo">Viedo URL</label>
|
||||
<label for="urlvideo">Video URL</label>
|
||||
<input type="text"
|
||||
name="url"
|
||||
class="form-control url"
|
||||
|
|
|
|||
|
|
@ -980,6 +980,22 @@
|
|||
</li>
|
||||
</div>
|
||||
|
||||
<div data-snippet-option-id='media'
|
||||
data-phantom="true"
|
||||
data-selector="img:not(.cke_iframe), .media_iframe_video, span.fa, i.fa">
|
||||
<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>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue