[WIP] website: media editor
bzr revid: chm@openerp.com-20140331081027-v1eikz3ei78xjjqz
This commit is contained in:
chm@openerp.com
parent
1a33fb64d5
commit
e94c9eea4e
|
|
@ -201,6 +201,7 @@
|
|||
height: 0;
|
||||
position: absolute;
|
||||
background: transparent;
|
||||
z-index: 1001;
|
||||
-webkit-border-radius: 3px;
|
||||
-moz-border-radius: 3px;
|
||||
-ms-border-radius: 3px;
|
||||
|
|
|
|||
|
|
@ -151,6 +151,7 @@
|
|||
height: 0
|
||||
position: absolute
|
||||
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))
|
||||
+border-radius(3px)
|
||||
@include transition(opacity 100ms linear)
|
||||
|
|
|
|||
|
|
@ -36,6 +36,7 @@ OTHER DEALINGS IN THE SOFTWARE.
|
|||
_init($this, settings);
|
||||
} else {
|
||||
_overwriteOptions($this, transfo, settings);
|
||||
_targetCss($this, transfo);
|
||||
}
|
||||
});
|
||||
},
|
||||
|
|
@ -106,12 +107,14 @@ OTHER DEALINGS IN THE SOFTWARE.
|
|||
_setOptions($this, transfo);
|
||||
_overwriteOptions ($this, transfo, settings);
|
||||
|
||||
// set transfo container and markup
|
||||
_targetCss($this, transfo);
|
||||
|
||||
// append controls to container
|
||||
$("body").append(transfo.$markup);
|
||||
|
||||
// set transfo container and markup
|
||||
setTimeout(function () {
|
||||
_targetCss($this, transfo);
|
||||
},0);
|
||||
|
||||
_bind($this, transfo);
|
||||
}
|
||||
|
||||
|
|
@ -120,8 +123,8 @@ OTHER DEALINGS IN THE SOFTWARE.
|
|||
}
|
||||
|
||||
function _setOptions ($this, transfo) {
|
||||
var style = $this.attr("style");
|
||||
var transform = (style||"").match(/transform\s*:([^;]+)/) ? style.match(/transform\s*:([^;]+)/)[1] : "";
|
||||
var style = $this.attr("style") || "";
|
||||
var transform = style.match(/transform\s*:([^;]+)/) ? style.match(/transform\s*:([^;]+)/)[1] : "";
|
||||
|
||||
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.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);
|
||||
|
||||
transfo.settings.height = $this.innerHeight();
|
||||
|
|
@ -140,6 +143,7 @@ OTHER DEALINGS IN THE SOFTWARE.
|
|||
transfo.settings.pos = $this.offset();
|
||||
|
||||
transfo.settings.rotationStep = 5;
|
||||
transfo.settings.hide = false;
|
||||
transfo.settings.callback = function () {};
|
||||
}
|
||||
|
||||
|
|
@ -327,10 +331,17 @@ OTHER DEALINGS IN THE SOFTWARE.
|
|||
"left:" + left + "px;" +
|
||||
"width:" + width + "px;" +
|
||||
"height:" + height + "px;" +
|
||||
"z-index: 1000;" +
|
||||
"z-index:" + (transfo.settings.hide ? "-1" : "1000") + ";" +
|
||||
"cursor: move;",
|
||||
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);
|
||||
}
|
||||
|
||||
|
|
@ -342,4 +353,4 @@ OTHER DEALINGS IN THE SOFTWARE.
|
|||
$this.removeData('transfo');
|
||||
}
|
||||
|
||||
})(jQuery);
|
||||
})(jQuery);
|
||||
|
|
|
|||
|
|
@ -1443,31 +1443,45 @@
|
|||
self.element = new CKEDITOR.dom.element(self.$target[0]);
|
||||
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) {
|
||||
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("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"); });
|
||||
}
|
||||
}
|
||||
this.$target.transfo({
|
||||
hide: true,
|
||||
callback: function () {
|
||||
var pos = $(this).data("transfo").$center.offset();
|
||||
self.$overlay.css({
|
||||
'top': pos.top,
|
||||
'left': pos.left,
|
||||
'position': 'absolute',
|
||||
'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._readXMLData();
|
||||
this.load_style_options();
|
||||
this.get_phantom();
|
||||
this.get_transform();
|
||||
this.get_parent_block();
|
||||
this.start();
|
||||
},
|
||||
|
|
@ -1621,7 +1635,7 @@
|
|||
this.$overlay.find('[data-toggle="dropdown"]').dropdown();
|
||||
},
|
||||
|
||||
get_phantom: function () {
|
||||
get_transform: function () {
|
||||
var self = this;
|
||||
var phantom = false;
|
||||
for (var i in this.styles){
|
||||
|
|
@ -1635,7 +1649,7 @@
|
|||
// setTimeout(function () {
|
||||
// self.BuildingBlock.make_active($parent);
|
||||
// }, 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 data-snippet-option-id='media'
|
||||
data-phantom="true"
|
||||
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>
|
||||
<li><a href="#" class="style">Style</a></li>
|
||||
<li><a href="#" class="style">Transform</a></li>
|
||||
<li class="dropdown-submenu">
|
||||
<a href="#" tabindex="-1">Rotation</a>
|
||||
<ul class="dropdown-menu">
|
||||
|
|
|
|||
Loading…
Reference in New Issue