From 5bd6c371d0300fd23c693ae3ecdaa572db3e67b4 Mon Sep 17 00:00:00 2001 From: Christophe Matthieu Date: Mon, 23 Sep 2013 12:56:04 +0200 Subject: [PATCH] [IMP] website snippet: carousel options with sub menu. Change on mouse hover bzr revid: chm@openerp.com-20130923105604-w8dukt0u8bdxw5ui --- addons/website/static/src/css/snippets.css | 21 ++-- addons/website/static/src/css/website.css | 11 ++- addons/website/static/src/css/website.sass | 9 +- .../website/static/src/js/website.snippets.js | 99 ++++++++++++++----- .../static/src/xml/website.snippets.xml | 73 +++++++------- 5 files changed, 134 insertions(+), 79 deletions(-) diff --git a/addons/website/static/src/css/snippets.css b/addons/website/static/src/css/snippets.css index 628689b78cf..35d78303aae 100644 --- a/addons/website/static/src/css/snippets.css +++ b/addons/website/static/src/css/snippets.css @@ -1,3 +1,13 @@ +/* add CSS for bootstrap dropdown multi level */ +.dropdown-submenu{position:relative;} +.dropdown-submenu>.dropdown-menu{top:0;left:100%;margin-top:-6px;margin-left:-1px;-webkit-border-radius:0 6px 6px 6px;-moz-border-radius:0 6px 6px 6px;border-radius:0 6px 6px 6px;} +.dropdown-submenu:hover>.dropdown-menu{display:block;} +.dropdown-submenu>a:after{display:block;content:" ";float:right;width:0;height:0;border-color:transparent;border-style:solid;border-width:5px 0 5px 5px;border-left-color:#cccccc;margin-top:5px;margin-right:-10px;} +.dropdown-submenu:hover>a:after{border-left-color:#ffffff;} +.dropdown-submenu.pull-left{float:none;} +.dropdown-submenu.pull-left>.dropdown-menu{left:-100%;margin-left:10px;-webkit-border-radius:6px 0 6px 6px;-moz-border-radius:6px 0 6px 6px;border-radius:6px 0 6px 6px;} + + /* .oe_snippet_demo .oe_page{ margin-top: 50px; @@ -208,14 +218,3 @@ min-width: 10px; } - -/* Custom CSS for snippets */ -.carousel.oe_small .carousel-inner { - height: 200px; -} -.carousel.oe_medium .carousel-inner { - height: 300px; -} -.carousel.oe_big .carousel-inner { - height: 450px; -} diff --git a/addons/website/static/src/css/website.css b/addons/website/static/src/css/website.css index 261d89b40e8..98851e748b5 100644 --- a/addons/website/static/src/css/website.css +++ b/addons/website/static/src/css/website.css @@ -247,6 +247,15 @@ footer { height: 100%; } +.carousel.oe_small .carousel-inner { + height: 200px; +} +.carousel.oe_medium .carousel-inner { + height: 300px; +} +.carousel.oe_big .carousel-inner { + height: 450px; +} .carousel .carousel-caption h1, .carousel .carousel-caption h2, .carousel .carousel-caption h3 { margin-top: 10px; margin-bottom: 10px; @@ -272,7 +281,7 @@ footer { background: rgba(0, 0, 0, 0.4); } .carousel .item.text_only .carousel-image { - display: none; + display: none !important; } .carousel .item.text_only .carousel-caption { left: 10%; diff --git a/addons/website/static/src/css/website.sass b/addons/website/static/src/css/website.sass index a289436d63a..310d1ccdca0 100644 --- a/addons/website/static/src/css/website.sass +++ b/addons/website/static/src/css/website.sass @@ -177,7 +177,14 @@ footer .carousel-inner .item height: 100% + .carousel + &.oe_small .carousel-inner + height: 200px + &.oe_medium .carousel-inner + height: 300px + &.oe_big .carousel-inner + height: 450px .carousel-caption h1, h2, h3 margin-top: 10px @@ -202,7 +209,7 @@ footer background: rgba(0, 0, 0, 0.4) .item.text_only .carousel-image - display: none + display: none !important .carousel-caption left: 10% right: 10% diff --git a/addons/website/static/src/js/website.snippets.js b/addons/website/static/src/js/website.snippets.js index 8c432c2b282..c3d80bab6ba 100644 --- a/addons/website/static/src/js/website.snippets.js +++ b/addons/website/static/src/js/website.snippets.js @@ -1041,55 +1041,100 @@ }, change_background: function () { var self = this; - var bg = this.$target.find('.carousel-inner .item.active').css('background-image').replace(/url\((.*)\)/g, '$1'); - var selected = this.$editor.find('select[name="carousel-background"] option[value="'+bg+'"], select[name="carousel-background"] option[value="'+bg.replace(window.location.protocol+'//'+window.location.host, '')+'"]') - .prop('selected', true).length; + var $item = this.$target.find('.carousel-inner .item.active'); + var bg = $item.css('background-image') + .replace(/url\((.*)\)/g, '$1'); + + var $input = this.$editor.find('input'); + var $ul = this.$editor.find('ul[name="carousel-background"]'); + var $li = $ul.find("li"); + + var selected = $ul.find('[data-value="' + bg + '"], [data-value="' + bg.replace(/.*:\/\/[^\/]+/, '') + '"]') + .addClass('active').length; + if (!selected) { this.$editor.find('.carousel-background input').val(bg); } - this.$editor.find('select[name="carousel-background"], input') - .on('click', function (event) {event.preventDefault(); return false;}) - .on('change', function () { - self.$target.find('.carousel-inner .item.active').css('background-image', 'url(' + $(this).val() + ')'); - $(this).next().val(""); + $input.on('change', function () { + $item.css('background-image', 'url(' + $(this).val() + ')'); + $li.removeClass("active"); + }); + + $li.on('click', function (event) { + event.preventDefault(); + $li.removeClass("active"); + $(this).addClass("active"); + $input.val(""); + return false; + }) + .on('mouseover', function (event) { + $item.css('background-image', 'url(' + $(this).data("value") + ')'); + }) + .on('mouseout', function (event) { + $item.css('background-image', 'url(' + $ul.find('li.active').data("value") + ')'); }); }, change_style: function () { var self = this; var style = false; - var el = this.$target.find('.carousel-inner .item.active'); - if (el.hasClass('text_only')) + var $el = this.$target.find('.carousel-inner .item.active'); + if ($el.hasClass('text_only')) style = 'text_only'; - if (el.hasClass('image_text')) + if ($el.hasClass('image_text')) style = 'image_text'; - if (el.hasClass('text_image')) + if ($el.hasClass('text_image')) style = 'text_image'; - this.$editor.find('select[name="carousel-style"] option[value="'+style+'"]').prop('selected', true); + var $ul = this.$editor.find('ul[name="carousel-style"]'); + var $li = $ul.find("li"); - this.$editor.find('select[name="carousel-style"]').on('change', function(e) { - var $container = self.$target.find('.carousel-inner .item.active'); - $container.removeClass('image_text text_image text_only'); - $container.addClass($(e.currentTarget).val()); - }); + $ul.find('[data-value="' + style + '"]').addClass('active'); + + $li.on('click', function (event) { + event.preventDefault(); + $li.removeClass("active"); + $(this).addClass("active"); + return false; + }) + .on('mouseover', function (event) { + $el.removeClass('image_text text_image text_only'); + $el.addClass($(event.currentTarget).data("value")); + }) + .on('mouseout', function (event) { + $el.removeClass('image_text text_image text_only'); + $el.addClass($ul.find('li.active').data("value")); + }); }, change_size: function () { var self = this; + var $el = this.$target; - var size = 'big'; + var size = 'oe_big'; if (this.$target.hasClass('oe_small')) - size = 'small'; + size = 'oe_small'; else if (this.$target.hasClass('oe_medium')) - size = 'medium'; + size = 'oe_medium'; - this.$editor.find('select[name="carousel-size"] option[value="'+size+'"]').prop('selected', true); + var $ul = this.$editor.find('ul[name="carousel-size"]'); + var $li = $ul.find("li"); - this.$editor.find('select[name="carousel-size"]').on('change', function(e) { - self.$target - .removeClass('oe_big oe_small oe_medium') - .addClass("oe_" + $(e.currentTarget).val()); - }); + $ul.find('[data-value="' + size + '"]').addClass('active'); + + $li.on('click', function (event) { + event.preventDefault(); + $li.removeClass("active"); + $(this).addClass("active"); + return false; + }) + .on('mouseover', function (event) { + $el.removeClass('oe_big oe_small oe_medium'); + $el.addClass($(event.currentTarget).data("value")); + }) + .on('mouseout', function (event) { + $el.removeClass('oe_big oe_small oe_medium'); + $el.addClass($ul.find('li.active').data("value")); + }); } }); diff --git a/addons/website/static/src/xml/website.snippets.xml b/addons/website/static/src/xml/website.snippets.xml index 109d920c5f0..a96b4415015 100644 --- a/addons/website/static/src/xml/website.snippets.xml +++ b/addons/website/static/src/xml/website.snippets.xml @@ -111,14 +111,13 @@
-
  • - - - +
  • + Size +
  • @@ -127,38 +126,34 @@
  • Remove Slide
    • -
  • - - Background - - - +
  • + Background +
    • -
  • - - Style - - +
  • + Style +