From e94c9eea4e61f3cfdfde0197eea7835cf64db347 Mon Sep 17 00:00:00 2001 From: "chm@openerp.com" <> Date: Mon, 31 Mar 2014 10:10:27 +0200 Subject: [PATCH] [WIP] website: media editor bzr revid: chm@openerp.com-20140331081027-v1eikz3ei78xjjqz --- addons/website/static/src/css/snippets.css | 1 + addons/website/static/src/css/snippets.sass | 1 + .../website/static/src/js/jQuery.transfo.js | 27 +++++--- .../static/src/js/website.snippets.editor.js | 62 ++++++++++++------- addons/website/views/snippets.xml | 4 +- 5 files changed, 61 insertions(+), 34 deletions(-) diff --git a/addons/website/static/src/css/snippets.css b/addons/website/static/src/css/snippets.css index 726855f311b..f5217660e29 100644 --- a/addons/website/static/src/css/snippets.css +++ b/addons/website/static/src/css/snippets.css @@ -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; diff --git a/addons/website/static/src/css/snippets.sass b/addons/website/static/src/css/snippets.sass index 9b12e9df246..69afbb14f2d 100644 --- a/addons/website/static/src/css/snippets.sass +++ b/addons/website/static/src/css/snippets.sass @@ -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) diff --git a/addons/website/static/src/js/jQuery.transfo.js b/addons/website/static/src/js/jQuery.transfo.js index df30fdccbb9..19fb85d0b1b 100644 --- a/addons/website/static/src/js/jQuery.transfo.js +++ b/addons/website/static/src/js/jQuery.transfo.js @@ -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); \ No newline at end of file +})(jQuery); diff --git a/addons/website/static/src/js/website.snippets.editor.js b/addons/website/static/src/js/website.snippets.editor.js index cd52ff33684..dc66e04bd0b 100644 --- a/addons/website/static/src/js/website.snippets.editor.js +++ b/addons/website/static/src/js/website.snippets.editor.js @@ -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'); } }, diff --git a/addons/website/views/snippets.xml b/addons/website/views/snippets.xml index 163a61f6876..387e87b8e0f 100644 --- a/addons/website/views/snippets.xml +++ b/addons/website/views/snippets.xml @@ -981,10 +981,10 @@
  • Change Media
    • -
  • Style
    • +
  • Transform
  • Rotation