[WIP] website: media editor
bzr revid: chm@openerp.com-20140331081027-v1eikz3ei78xjjqz
This commit is contained in:
parent
1a33fb64d5
commit
e94c9eea4e
|
@ -201,6 +201,7 @@
|
||||||
height: 0;
|
height: 0;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
background: transparent;
|
background: transparent;
|
||||||
|
z-index: 1001;
|
||||||
-webkit-border-radius: 3px;
|
-webkit-border-radius: 3px;
|
||||||
-moz-border-radius: 3px;
|
-moz-border-radius: 3px;
|
||||||
-ms-border-radius: 3px;
|
-ms-border-radius: 3px;
|
||||||
|
|
|
@ -151,6 +151,7 @@
|
||||||
height: 0
|
height: 0
|
||||||
position: absolute
|
position: absolute
|
||||||
background: transparent
|
background: transparent
|
||||||
|
z-index: 1001
|
||||||
//@include background-image( repeating-linear-gradient(45deg, rgba(255,255,255,.02) ,rgba(255,255,255,.02) 35px, rgba(0,0,0,.02) 35px, rgba(0,0,0,.02) 75px))
|
//@include background-image( repeating-linear-gradient(45deg, rgba(255,255,255,.02) ,rgba(255,255,255,.02) 35px, rgba(0,0,0,.02) 35px, rgba(0,0,0,.02) 75px))
|
||||||
+border-radius(3px)
|
+border-radius(3px)
|
||||||
@include transition(opacity 100ms linear)
|
@include transition(opacity 100ms linear)
|
||||||
|
|
|
@ -36,6 +36,7 @@ OTHER DEALINGS IN THE SOFTWARE.
|
||||||
_init($this, settings);
|
_init($this, settings);
|
||||||
} else {
|
} else {
|
||||||
_overwriteOptions($this, transfo, settings);
|
_overwriteOptions($this, transfo, settings);
|
||||||
|
_targetCss($this, transfo);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
|
@ -106,12 +107,14 @@ OTHER DEALINGS IN THE SOFTWARE.
|
||||||
_setOptions($this, transfo);
|
_setOptions($this, transfo);
|
||||||
_overwriteOptions ($this, transfo, settings);
|
_overwriteOptions ($this, transfo, settings);
|
||||||
|
|
||||||
// set transfo container and markup
|
|
||||||
_targetCss($this, transfo);
|
|
||||||
|
|
||||||
// append controls to container
|
// append controls to container
|
||||||
$("body").append(transfo.$markup);
|
$("body").append(transfo.$markup);
|
||||||
|
|
||||||
|
// set transfo container and markup
|
||||||
|
setTimeout(function () {
|
||||||
|
_targetCss($this, transfo);
|
||||||
|
},0);
|
||||||
|
|
||||||
_bind($this, transfo);
|
_bind($this, transfo);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -120,8 +123,8 @@ OTHER DEALINGS IN THE SOFTWARE.
|
||||||
}
|
}
|
||||||
|
|
||||||
function _setOptions ($this, transfo) {
|
function _setOptions ($this, transfo) {
|
||||||
var style = $this.attr("style");
|
var style = $this.attr("style") || "";
|
||||||
var transform = (style||"").match(/transform\s*:([^;]+)/) ? style.match(/transform\s*:([^;]+)/)[1] : "";
|
var transform = style.match(/transform\s*:([^;]+)/) ? style.match(/transform\s*:([^;]+)/)[1] : "";
|
||||||
|
|
||||||
transfo.settings = {};
|
transfo.settings = {};
|
||||||
|
|
||||||
|
@ -131,7 +134,7 @@ OTHER DEALINGS IN THE SOFTWARE.
|
||||||
transfo.settings.scalex= transform.indexOf('scaleX') != -1 ? parseFloat(transform.match(/scaleX\(([^)]+)\)/)[1]) : 1;
|
transfo.settings.scalex= transform.indexOf('scaleX') != -1 ? parseFloat(transform.match(/scaleX\(([^)]+)\)/)[1]) : 1;
|
||||||
transfo.settings.scaley= transform.indexOf('scaleY') != -1 ? parseFloat(transform.match(/scaleY\(([^)]+)\)/)[1]) : 1;
|
transfo.settings.scaley= transform.indexOf('scaleY') != -1 ? parseFloat(transform.match(/scaleY\(([^)]+)\)/)[1]) : 1;
|
||||||
|
|
||||||
transfo.settings.style = ($this.attr("style")||"").replace(/[^;]*transform[^;]+/g, '');
|
transfo.settings.style = style.replace(/[^;]*transform[^;]+/g, '').replace(/;+/g, ';');
|
||||||
$this.attr("style", transfo.settings.style);
|
$this.attr("style", transfo.settings.style);
|
||||||
|
|
||||||
transfo.settings.height = $this.innerHeight();
|
transfo.settings.height = $this.innerHeight();
|
||||||
|
@ -140,6 +143,7 @@ OTHER DEALINGS IN THE SOFTWARE.
|
||||||
transfo.settings.pos = $this.offset();
|
transfo.settings.pos = $this.offset();
|
||||||
|
|
||||||
transfo.settings.rotationStep = 5;
|
transfo.settings.rotationStep = 5;
|
||||||
|
transfo.settings.hide = false;
|
||||||
transfo.settings.callback = function () {};
|
transfo.settings.callback = function () {};
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -327,10 +331,17 @@ OTHER DEALINGS IN THE SOFTWARE.
|
||||||
"left:" + left + "px;" +
|
"left:" + left + "px;" +
|
||||||
"width:" + width + "px;" +
|
"width:" + width + "px;" +
|
||||||
"height:" + height + "px;" +
|
"height:" + height + "px;" +
|
||||||
"z-index: 1000;" +
|
"z-index:" + (transfo.settings.hide ? "-1" : "1000") + ";" +
|
||||||
"cursor: move;",
|
"cursor: move;",
|
||||||
settings);
|
settings);
|
||||||
|
|
||||||
|
if (transfo.settings.hide) {
|
||||||
|
transfo.$markup.find(">").hide();
|
||||||
|
transfo.$markup.find(".transfo-scaler-mc").show();
|
||||||
|
} else {
|
||||||
|
transfo.$markup.find(">").show();
|
||||||
|
}
|
||||||
|
|
||||||
transfo.settings.callback.call($this[0], $this);
|
transfo.settings.callback.call($this[0], $this);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -342,4 +353,4 @@ OTHER DEALINGS IN THE SOFTWARE.
|
||||||
$this.removeData('transfo');
|
$this.removeData('transfo');
|
||||||
}
|
}
|
||||||
|
|
||||||
})(jQuery);
|
})(jQuery);
|
||||||
|
|
|
@ -1443,31 +1443,45 @@
|
||||||
self.element = new CKEDITOR.dom.element(self.$target[0]);
|
self.element = new CKEDITOR.dom.element(self.$target[0]);
|
||||||
new website.editor.MediaDialog(self, self.element).appendTo(document.body);
|
new website.editor.MediaDialog(self, self.element).appendTo(document.body);
|
||||||
});
|
});
|
||||||
this.$el.find(".style").click(function (event) {
|
|
||||||
self.transfo(event);
|
|
||||||
});
|
|
||||||
this.$el.find(".clear-style").click(function (event) {
|
this.$el.find(".clear-style").click(function (event) {
|
||||||
self.$target.removeClass("fa-spin").attr("style", null);
|
self.$target.removeClass("fa-spin").attr("style", null);
|
||||||
});
|
});
|
||||||
},
|
|
||||||
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({
|
||||||
this.$target.transfo("destroy");
|
hide: true,
|
||||||
$button.addClass("btn-primary").removeClass("btn-default");
|
callback: function () {
|
||||||
} else {
|
var pos = $(this).data("transfo").$center.offset();
|
||||||
this.$target.transfo();
|
self.$overlay.css({
|
||||||
this.$target.data('transfo').$markup
|
'top': pos.top,
|
||||||
.on("mouseover", function () { self.$target.trigger("mouseover"); })
|
'left': pos.left,
|
||||||
.mouseover()
|
'position': 'absolute',
|
||||||
.click(function () { self.$target.transfo("destroy"); });
|
'height': '20px',
|
||||||
}
|
'width': '160px'
|
||||||
}
|
});
|
||||||
|
self.$overlay.find('.oe_overlay_options').css({
|
||||||
|
'position': 'static'
|
||||||
|
});
|
||||||
|
}});
|
||||||
|
this.$target.data('transfo').$markup
|
||||||
|
.on("mouseover", function () {
|
||||||
|
self.$target.trigger("mouseover");
|
||||||
|
})
|
||||||
|
.mouseover()
|
||||||
|
.click(function () {
|
||||||
|
self.$target.transfo({ hide: false });
|
||||||
|
});
|
||||||
|
|
||||||
|
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 });
|
||||||
|
},
|
||||||
|
onBlur : function () {
|
||||||
|
this.$target.transfo({ hide: true });
|
||||||
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
||||||
|
@ -1479,7 +1493,7 @@
|
||||||
this.snippet_id = this.$target.data("snippet-id");
|
this.snippet_id = this.$target.data("snippet-id");
|
||||||
this._readXMLData();
|
this._readXMLData();
|
||||||
this.load_style_options();
|
this.load_style_options();
|
||||||
this.get_phantom();
|
this.get_transform();
|
||||||
this.get_parent_block();
|
this.get_parent_block();
|
||||||
this.start();
|
this.start();
|
||||||
},
|
},
|
||||||
|
@ -1621,7 +1635,7 @@
|
||||||
this.$overlay.find('[data-toggle="dropdown"]').dropdown();
|
this.$overlay.find('[data-toggle="dropdown"]').dropdown();
|
||||||
},
|
},
|
||||||
|
|
||||||
get_phantom: function () {
|
get_transform: function () {
|
||||||
var self = this;
|
var self = this;
|
||||||
var phantom = false;
|
var phantom = false;
|
||||||
for (var i in this.styles){
|
for (var i in this.styles){
|
||||||
|
@ -1635,7 +1649,7 @@
|
||||||
// setTimeout(function () {
|
// setTimeout(function () {
|
||||||
// self.BuildingBlock.make_active($parent);
|
// self.BuildingBlock.make_active($parent);
|
||||||
// }, 0);
|
// }, 0);
|
||||||
this.$overlay.find('.oe_snippet_clone, .oe_snippet_remove, .oe_handles').addClass('hidden');
|
this.$overlay.find('.oe_snippet_clone, .oe_handles').addClass('hidden');
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
|
@ -981,10 +981,10 @@
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div data-snippet-option-id='media'
|
<div data-snippet-option-id='media'
|
||||||
data-phantom="true"
|
data-transform="true"
|
||||||
data-selector="img:not(.cke_iframe), .media_iframe_video, span.fa, i.fa">
|
data-selector="img:not(.cke_iframe), .media_iframe_video, span.fa, i.fa">
|
||||||
<li><a href="#" class="edition">Change Media</a></li>
|
<li><a href="#" class="edition">Change Media</a></li>
|
||||||
<li><a href="#" class="style">Style</a></li>
|
<li><a href="#" class="style">Transform</a></li>
|
||||||
<li class="dropdown-submenu">
|
<li class="dropdown-submenu">
|
||||||
<a href="#" tabindex="-1">Rotation</a>
|
<a href="#" tabindex="-1">Rotation</a>
|
||||||
<ul class="dropdown-menu">
|
<ul class="dropdown-menu">
|
||||||
|
|
Loading…
Reference in New Issue