From 60e2a03700a073b50bd31102b6b562d56f0cc5dc Mon Sep 17 00:00:00 2001 From: Christophe Matthieu Date: Fri, 27 Sep 2013 14:41:16 +0200 Subject: [PATCH] [IMP] website snippet: background option for paralax and fix banner bzr revid: chm@openerp.com-20130927124116-o2244s5ufu18pvcx --- addons/website/static/src/css/editor.css | 5 +- addons/website/static/src/css/editor.sass | 3 +- addons/website/static/src/css/website.css | 14 ++++- addons/website/static/src/css/website.sass | 12 +++- .../website/static/src/js/website.snippets.js | 60 ++++++++++++++++--- .../static/src/xml/website.snippets.xml | 19 +++++- 6 files changed, 97 insertions(+), 16 deletions(-) diff --git a/addons/website/static/src/css/editor.css b/addons/website/static/src/css/editor.css index 1fde0c25f3d..5a739cecb25 100644 --- a/addons/website/static/src/css/editor.css +++ b/addons/website/static/src/css/editor.css @@ -1,4 +1,4 @@ -@charset "UTF-8"; +@charset "utf-8"; /* ---- CKEditor Minimal Reset ---- */ .navbar.navbar-inverse .cke_chrome { border: none; @@ -268,7 +268,8 @@ table.editorbar-panel td.selected { display: block; height: 48px; margin: 0px; - margin-bottom: -48px; + margin-top: -4px; + margin-bottom: -44px; -webkit-transition: margin 250ms linear; width: 100%; position: absolute; diff --git a/addons/website/static/src/css/editor.sass b/addons/website/static/src/css/editor.sass index 891630b63a4..bf8e7c1686c 100644 --- a/addons/website/static/src/css/editor.sass +++ b/addons/website/static/src/css/editor.sass @@ -232,7 +232,8 @@ table.editorbar-panel display: block height: 48px margin: 0px - margin-bottom: -48px + margin-top: -4px + margin-bottom: -44px -webkit-transition: margin 250ms linear width: 100% position: absolute diff --git a/addons/website/static/src/css/website.css b/addons/website/static/src/css/website.css index d5342cfdd74..b1c41225370 100644 --- a/addons/website/static/src/css/website.css +++ b/addons/website/static/src/css/website.css @@ -339,10 +339,16 @@ footer { /* Parallax Theme */ .parallax_full { - background: #eeeeee url(/website/static/src/img/parallax/parallax_bg.jpg) bottom center repeat fixed; + background: #eeeeee top left repeat; min-height: 650px; width: 100%; - z-index: -999; + overflow: hidden; + position: relative; +} +.parallax_full > img { + position: absolute; + top: 0; + left: 0; } /* -- Hack for removing double scrollbar from mobile preview -- */ @@ -388,3 +394,7 @@ ul.nav-stacked > li > a { top: -10px; display: none; } + +::selection { + background: rgba(150, 150, 220, 0.3); +} diff --git a/addons/website/static/src/css/website.sass b/addons/website/static/src/css/website.sass index 25f45e3f7c4..d80d766bfbd 100644 --- a/addons/website/static/src/css/website.sass +++ b/addons/website/static/src/css/website.sass @@ -258,10 +258,15 @@ footer /* Parallax Theme */ .parallax_full - background: #eee url(/website/static/src/img/parallax/parallax_bg.jpg) bottom center repeat fixed + background: #eee top left repeat min-height: 650px width: 100% - z-index: -999 + overflow: hidden + position: relative + > img + position: absolute + top: 0 + left: 0 /* -- Hack for removing double scrollbar from mobile preview -- */ div#mobile-preview.modal @@ -296,3 +301,6 @@ ul.nav-stacked > li > a display: none /*&:hover .js_publish*/ /* display: block*/ + +::selection + background: rgba(150, 150, 220, 0.3) \ No newline at end of file diff --git a/addons/website/static/src/js/website.snippets.js b/addons/website/static/src/js/website.snippets.js index 5256d8324ed..71c6fca2970 100644 --- a/addons/website/static/src/js/website.snippets.js +++ b/addons/website/static/src/js/website.snippets.js @@ -710,7 +710,7 @@ load_style_options: function () { var self = this; var $styles = this.$overlay.find('.oe_options'); - var $ul = $styles.find('ul'); + var $ul = $styles.find('ul:first'); _.each(this.parent.style_templates, function (val, key) { if (!self.parent.dom_filter(val.selector).is(self.$target)) { return; @@ -998,12 +998,6 @@ this.change_background(); this.change_style(); this.change_size(); - - // remove cke image seletor - this.$target.on('mousedown mouseup', '.carousel-inner .item > img', function (event) { - event.preventDefault(); - return false; - }); }, on_add: function (e) { e.preventDefault(); @@ -1043,7 +1037,7 @@ $ul.find("li").removeClass("active"); var selected = $ul.find('[data-value="' + bg + '"], [data-value="' + bg.replace(/.*:\/\/[^\/]+/, '') + '"]') .addClass('active').length; - this.$editor.find('.oe_custom_bg b').val(selected ? "" : bg); + this.$editor.find('.oe_custom_bg b').html(selected ? "" : bg); }, change_background: function () { var self = this; @@ -1131,6 +1125,56 @@ } }); + website.snippet.editorRegistry.parallax = website.snippet.editorRegistry.resize.extend({ + start : function () { + this._super(); + this.change_background(); + }, + onFocus: function () { + this.$imagebg = $(""); + this.$imagebg.prependTo(this.$target); + this.set_options_background(); + this._super(); + }, + onBlur : function () { + this._super(); + this.$imagebg.remove(); + }, + set_options_background: function () { + var bg = this.$target.css("background-image").replace(/url\(|\)/g, ""); + this.$imagebg.attr("src", bg); + + var $ul = this.$editor.find('ul[name="parallax-background"]'); + $ul.find("li").removeClass("active"); + var selected = $ul.find('[data-value="' + bg + '"], [data-value="' + bg.replace(/.*:\/\/[^\/]+/, '') + '"]') + .addClass('active').length; + this.$editor.find('.oe_custom_bg b').html(selected ? "" : bg); + }, + change_background: function () { + var self = this; + var $ul = this.$editor.find('ul[name="parallax-background"]'); + var $li = $ul.find("li"); + + $li.on('click', function (event) { + $li.removeClass("active"); + $(this).addClass("active"); + self.$editor.find('input').val(""); + }) + .on('mouseover', function (event) { + if ($(this).data("value")) { + var src = $(this).data("value"); + self.$imagebg.attr('src', src); + self.$target.css("background-image", "url(" + src + ")"); + } + }) + .on('mouseout', function (event) { + var src = $ul.find('li.active').data("value"); + self.$imagebg.attr('src', src); + self.$target.css("background-image", "url(" + src + ")"); + }); + }, + }); + website.snippet.animationRegistry.vomify = website.snippet.Animation.extend({ start: function() { this._super(); diff --git a/addons/website/static/src/xml/website.snippets.xml b/addons/website/static/src/xml/website.snippets.xml index 856f0837a29..b885126adf9 100644 --- a/addons/website/static/src/xml/website.snippets.xml +++ b/addons/website/static/src/xml/website.snippets.xml @@ -797,7 +797,24 @@
Parallax
-
+ +
  • + Background + +
    • + +