[WIP] website: media editor
bzr revid: chm@openerp.com-20140331095253-zftyl4uvd56mpovj
This commit is contained in:
chm@openerp.com
parent
e94c9eea4e
commit
f97a237b4b
|
|
@ -85,21 +85,25 @@ OTHER DEALINGS IN THE SOFTWARE.
|
|||
var transfo = {};
|
||||
$this.data('transfo', transfo);
|
||||
|
||||
|
||||
// generate all the controls markup
|
||||
var css = "box-sizing: border-box; position: absolute; background-color: #fff; border: 1px solid #ccc; width: 8px; height: 8px; margin-left: -4px; margin-top: -4px;";
|
||||
transfo.$markup = $(''
|
||||
+ '<div class="transfo-controls">'
|
||||
+ '<div style="cursor: crosshair; position: absolute; background-color: #ccc; width: 16px; height: 16px; margin-left: -8px; margin-top: -8px; top: -15px; left: 50%; padding: 1px 0 0 1px;" class="transfo-rotator fa fa-repeat"></div>'
|
||||
+ '<div style="' + css + 'top: 0%; left: 0%; cursor: nw-resize;" class="transfo-scaler-tl"></div>'
|
||||
+ '<div style="' + css + 'top: 0%; left: 100%; cursor: ne-resize;" class="transfo-scaler-tr"></div>'
|
||||
+ '<div style="' + css + 'top: 100%; left: 100%; cursor: se-resize;" class="transfo-scaler-br"></div>'
|
||||
+ '<div style="' + css + 'top: 100%; left: 0%; cursor: sw-resize;" class="transfo-scaler-bl"></div>'
|
||||
+ '<div style="' + css + 'top: 0%; left: 50%; cursor: n-resize;" class="transfo-scaler-tc"></div>'
|
||||
+ '<div style="' + css + 'top: 100%; left: 50%; cursor: s-resize;" class="transfo-scaler-bc"></div>'
|
||||
+ '<div style="' + css + 'top: 50%; left: 0%; cursor: w-resize;" class="transfo-scaler-ml"></div>'
|
||||
+ '<div style="' + css + 'top: 50%; left: 100%; cursor: e-resize;" class="transfo-scaler-mr"></div>'
|
||||
+ '<div style="' + css + 'border: 0; width: 0px; height: 0px; top: 50%; left: 50%;" class="transfo-scaler-mc"></div>'
|
||||
+ '<div style="cursor: crosshair; position: absolute; margin: -18px; top: -12px; right: -12px; padding: 1px 0 0 1px;" class="transfo-rotator">'
|
||||
+ '<span class="fa-stack fa-lg">'
|
||||
+ '<i class="fa fa-circle fa-stack-2x"></i>'
|
||||
+ '<i class="fa fa-repeat fa-stack-1x fa-inverse"></i>'
|
||||
+ '</span>'
|
||||
+ '</div>'
|
||||
+ '<div style="' + css + 'top: 0%; left: 0%; cursor: nw-resize;" class="transfo-scaler-tl"></div>'
|
||||
+ '<div style="' + css + 'top: 0%; left: 100%; cursor: ne-resize;" class="transfo-scaler-tr"></div>'
|
||||
+ '<div style="' + css + 'top: 100%; left: 100%; cursor: se-resize;" class="transfo-scaler-br"></div>'
|
||||
+ '<div style="' + css + 'top: 100%; left: 0%; cursor: sw-resize;" class="transfo-scaler-bl"></div>'
|
||||
+ '<div style="' + css + 'top: 0%; left: 50%; cursor: n-resize;" class="transfo-scaler-tc"></div>'
|
||||
+ '<div style="' + css + 'top: 100%; left: 50%; cursor: s-resize;" class="transfo-scaler-bc"></div>'
|
||||
+ '<div style="' + css + 'top: 50%; left: 0%; cursor: w-resize;" class="transfo-scaler-ml"></div>'
|
||||
+ '<div style="' + css + 'top: 50%; left: 100%; cursor: e-resize;" class="transfo-scaler-mr"></div>'
|
||||
+ '<div style="' + css + 'border: 0; width: 0px; height: 0px; top: 50%; left: 50%;" class="transfo-scaler-mc"></div>'
|
||||
+ '</div>');
|
||||
transfo.$center = transfo.$markup.find(".transfo-scaler-mc");
|
||||
|
||||
|
|
@ -149,27 +153,28 @@ OTHER DEALINGS IN THE SOFTWARE.
|
|||
|
||||
function _bind ($this, transfo) {
|
||||
function mousedown (event) {
|
||||
_mouseDown($this, transfo, event);
|
||||
_mouseDown($this, this, transfo, event);
|
||||
$(document).on("mousemove", mousemove).on("mouseup", mouseup);
|
||||
}
|
||||
function mousemove (event) {
|
||||
_mouseMove($this, transfo, event);
|
||||
_mouseMove($this, this, transfo, event);
|
||||
}
|
||||
function mouseup (event) {
|
||||
_mouseUp($this, transfo, event);
|
||||
_mouseUp($this, this, transfo, event);
|
||||
$(document).off("mousemove", mousemove).off("mouseup", mouseup);
|
||||
}
|
||||
|
||||
transfo.$markup.off().on("mousedown", mousedown);
|
||||
transfo.$markup.find(".transfo-rotator, .transfo-scaler").off().on("mousedown", mousedown);
|
||||
transfo.$markup.find(">:not(.transfo-scaler-mc)").off().on("mousedown", mousedown);
|
||||
}
|
||||
|
||||
function _mouseDown($this, transfo, event) {
|
||||
function _mouseDown($this, div, transfo, event) {
|
||||
event.preventDefault();
|
||||
if (transfo.active || event.which !== 1) return;
|
||||
|
||||
var type = "position",
|
||||
$e = $(event.srcElement);
|
||||
console.log(div);
|
||||
|
||||
var type = "position", $e = $(div);
|
||||
if ($e.hasClass("transfo-rotator")) type = "rotator";
|
||||
else if ($e.hasClass("transfo-scaler-tl")) type = "tl";
|
||||
else if ($e.hasClass("transfo-scaler-tr")) type = "tr";
|
||||
|
|
@ -186,11 +191,11 @@ OTHER DEALINGS IN THE SOFTWARE.
|
|||
"pageY": event.pageY,
|
||||
};
|
||||
}
|
||||
function _mouseUp($this, transfo, event) {
|
||||
function _mouseUp($this, div, transfo, event) {
|
||||
transfo.active = null;
|
||||
}
|
||||
|
||||
function _mouseMove($this, transfo, event) {
|
||||
function _mouseMove($this, div, transfo, event) {
|
||||
event.preventDefault();
|
||||
if (!transfo.active) return;
|
||||
var settings = transfo.settings;
|
||||
|
|
@ -199,12 +204,15 @@ OTHER DEALINGS IN THE SOFTWARE.
|
|||
var cdy = center.top - event.pageY;
|
||||
|
||||
if (transfo.active.type == "rotator") {
|
||||
var ang;
|
||||
if (center.top != event.pageY) ang = Math.atan(- cdx / cdy) / rad;
|
||||
var ang, dang = Math.atan((settings.width * settings.scalex) / (settings.height * settings.scaley)) / rad;
|
||||
|
||||
if (cdy) ang = Math.atan(- cdx / cdy) / rad;
|
||||
else ang = 0;
|
||||
if (event.pageY >= center.top && event.pageX >= center.left) ang += 180;
|
||||
else if (event.pageY >= center.top && event.pageX < center.left) ang += 180;
|
||||
else if (event.pageY < center.top && event.pageX < center.left) ang += 360;
|
||||
|
||||
ang -= dang;
|
||||
|
||||
if (!event.ctrlKey) {
|
||||
settings.angle = Math.round(ang / transfo.settings.rotationStep) * transfo.settings.rotationStep;
|
||||
|
|
|
|||
|
|
@ -1430,13 +1430,12 @@
|
|||
}
|
||||
});
|
||||
|
||||
website.snippet.options.media = website.snippet.Option.extend({
|
||||
website.snippet.options.transform = 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(".edition").click(function (event) {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
|
|
@ -1455,29 +1454,27 @@
|
|||
'top': pos.top,
|
||||
'left': pos.left,
|
||||
'position': 'absolute',
|
||||
'height': '20px',
|
||||
'width': '160px'
|
||||
});
|
||||
self.$overlay.find('.oe_overlay_options').css({
|
||||
'position': 'static'
|
||||
});
|
||||
self.$overlay.find(".oe_overlay_options").attr("style", "width:0; left:0!important; top:0;");
|
||||
self.$overlay.find(".oe_overlay_options > .btn-group").attr("style", "width:160px; left:-80px;");
|
||||
}});
|
||||
this.$target.data('transfo').$markup
|
||||
.on("mouseover", function () {
|
||||
self.$target.trigger("mouseover");
|
||||
})
|
||||
.mouseover()
|
||||
.click(function () {
|
||||
self.$target.transfo({ hide: false });
|
||||
});
|
||||
.mouseover();
|
||||
|
||||
this.$el.find(".style").click(function (event) {
|
||||
var settings = self.$target.data("transfo").settings;
|
||||
self.$target.transfo({ hide: (settings.hide = !settings.hide) });
|
||||
});
|
||||
},
|
||||
onFocus : function () {
|
||||
this.$target.transfo({ hide: true });
|
||||
|
||||
this.$overlay.find('.oe_snippet_clone, .oe_handles').addClass('hidden');
|
||||
|
||||
this.$overlay.find('[data-toggle="dropdown"]')
|
||||
.on("mousedown", function () {
|
||||
self.$target.transfo({ hide: true });
|
||||
});
|
||||
},
|
||||
onBlur : function () {
|
||||
this.$target.transfo({ hide: true });
|
||||
|
|
@ -1493,7 +1490,6 @@
|
|||
this.snippet_id = this.$target.data("snippet-id");
|
||||
this._readXMLData();
|
||||
this.load_style_options();
|
||||
this.get_transform();
|
||||
this.get_parent_block();
|
||||
this.start();
|
||||
},
|
||||
|
|
@ -1635,24 +1631,6 @@
|
|||
this.$overlay.find('[data-toggle="dropdown"]').dropdown();
|
||||
},
|
||||
|
||||
get_transform: function () {
|
||||
var self = this;
|
||||
var phantom = false;
|
||||
for (var i in this.styles){
|
||||
if (this.styles[i].data.phantom) {
|
||||
phantom = true;
|
||||
break;
|
||||
}
|
||||
}
|
||||
if (phantom) {
|
||||
// var $parent = this.$target.parents(website.snippet.globalSelector).first();
|
||||
// setTimeout(function () {
|
||||
// self.BuildingBlock.make_active($parent);
|
||||
// }, 0);
|
||||
this.$overlay.find('.oe_snippet_clone, .oe_handles').addClass('hidden');
|
||||
}
|
||||
},
|
||||
|
||||
get_parent_block: function () {
|
||||
var self = this;
|
||||
var $button = this.$overlay.find('.oe_snippet_parent');
|
||||
|
|
|
|||
|
|
@ -981,9 +981,12 @@
|
|||
</div>
|
||||
|
||||
<div data-snippet-option-id='media'
|
||||
data-transform="true"
|
||||
data-selector="img:not(.cke_iframe), .media_iframe_video, span.fa, i.fa">
|
||||
<li><a href="#" class="edition">Change Media</a></li>
|
||||
</div>
|
||||
|
||||
<div data-snippet-option-id='transform'
|
||||
data-selector="img:not(.cke_iframe), .media_iframe_video, span.fa, i.fa">
|
||||
<li><a href="#" class="style">Transform</a></li>
|
||||
<li class="dropdown-submenu">
|
||||
<a href="#" tabindex="-1">Rotation</a>
|
||||
|
|
|
|||
Loading…
Reference in New Issue