pengyuthon/odoo_source
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[IMP] website snippet: carousel options with sub menu. Change on mouse hover

Browse Source 
bzr revid: chm@openerp.com-20130923105604-w8dukt0u8bdxw5ui
This commit is contained in:
Christophe Matthieu
2013-09-23 12:56:04 +02:00
parent b1fc013fae
commit 5bd6c371d0
5 changed files with 134 additions and 79 deletions
Download Patch File Download Diff File Expand all files Collapse all files
addons/website/static/src/css/snippets.css
+10 -11
View File
@@ -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;
}
addons/website/static/src/css/website.css
+10 -1
View File
@@ -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%;
addons/website/static/src/css/website.sass
+8 -1
View File
@@ -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%
addons/website/static/src/js/website.snippets.js
+72 -27
View File
@@ -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"));
});
}
});
addons/website/static/src/xml/website.snippets.xml
+34 -39
View File
@@ -111,14 +111,13 @@
<div t-name="website.snippets.carousel" data-snippet-id='carousel' data-category='structure' data-selector-children='.oe_structure, [data-oe-type=html]'>
<!-- editor bar to display inside the top edit bar -->
<li class='oe_snippet_options'>
<a class="carousel-style">
<select class="form-control" name="carousel-size">
<option value="small">Small</option>
<option value="medium">Medium</option>
<option value="big">Big</option>
</select>
</a>
<li class='oe_snippet_options dropdown-submenu'>
<a tabindex="-1" href="#">Size</a>
<ul class="dropdown-menu" name="carousel-size">
<li data-value="oe_small"><a>Small</a></li>
<li data-value="oe_medium"><a>Medium</a></li>
<li data-value="oe_big"><a>Big</a></li>
</ul>
</li>
<li class="divider"></li>
<li class='oe_snippet_options'>
@@ -127,38 +126,34 @@
<li class='oe_snippet_options'>
<a href="#" class="button js_remove">Remove Slide</a>
</li>
<li class='oe_snippet_options'>
<a class="carousel-background">
Background
<select class="form-control" name="carousel-background">
<option value="/website/static/src/img/banner/aqua.jpg">Aqua</option>
<option value="/website/static/src/img/banner/baby_blue.jpg">Baby Blue</option>
<option value="/website/static/src/img/banner/black.jpg">Black</option>
<option value="/website/static/src/img/banner/business_guy.jpg">Business Guy</option>
<option value="/website/static/src/img/banner/color_splash.jpg">Color Splash</option>
<option value="/website/static/src/img/banner/flower_field.jpg">Flowers Field</option>
<option value="/website/static/src/img/banner/greenfields.jpg">Greenfields</option>
<option value="/website/static/src/img/banner/landscape.jpg">Landscape</option>
<option value="/website/static/src/img/banner/mango.jpg">Mango</option>
<option value="/website/static/src/img/banner/mountains.jpg">Mountains</option>
<option value="/website/static/src/img/banner/orange_red.jpg">Orange Red</option>
<option value="/website/static/src/img/banner/flower.jpg">Purple</option>
<option value="/website/static/src/img/banner/velour.jpg">Velour</option>
<option value="/website/static/src/img/banner/wood.jpg">Wood</option>
<option value="/website/static/src/img/banner/yellow_green.jpg">Yellow Green</option>
</select>
<input class="form-control input-sm" type="text" placeholder="http://...."/>
</a>
<li class="oe_snippet_options dropdown-submenu">
<a tabindex="-1" href="#">Background</a>
<ul class="dropdown-menu" name="carousel-background">
<li data-value="/website/static/src/img/banner/aqua.jpg"><a>Aqua</a></li>
<li data-value="/website/static/src/img/banner/baby_blue.jpg"><a>Baby Blue</a></li>
<li data-value="/website/static/src/img/banner/black.jpg"><a>Black</a></li>
<li data-value="/website/static/src/img/banner/business_guy.jpg"><a>Business Guy</a></li>
<li data-value="/website/static/src/img/banner/color_splash.jpg"><a>Color Splash</a></li>
<li data-value="/website/static/src/img/banner/flower_field.jpg"><a>Flowers Field</a></li>
<li data-value="/website/static/src/img/banner/greenfields.jpg"><a>Greenfields</a></li>
<li data-value="/website/static/src/img/banner/landscape.jpg"><a>Landscape</a></li>
<li data-value="/website/static/src/img/banner/mango.jpg"><a>Mango</a></li>
<li data-value="/website/static/src/img/banner/mountains.jpg"><a>Mountains</a></li>
<li data-value="/website/static/src/img/banner/orange_red.jpg"><a>Orange Red</a></li>
<li data-value="/website/static/src/img/banner/flower.jpg"><a>Purple</a></li>
<li data-value="/website/static/src/img/banner/velour.jpg"><a>Velour</a></li>
<li data-value="/website/static/src/img/banner/wood.jpg"><a>Wood</a></li>
<li data-value="/website/static/src/img/banner/yellow_green.jpg"><a>Yellow Green</a></li>
<li><input class="form-control input-sm" type="text" placeholder="http://...."/></li>
</ul>
</li>
<li class='oe_snippet_options'>
<a class="carousel-style">
Style
<select class="form-control" name="carousel-style">
<option value="text_only">Text Only</option>
<option value="image_text">Image - Text</option>
<option value="text_image">Text - Image</option>
</select>
</a>
<li class='oe_snippet_options dropdown-submenu'>
<a tabindex="-1" href="#">Style</a>
<ul class="dropdown-menu" name="carousel-style">
<li data-value="text_only"><a>Text Only</a></li>
<li data-value="image_text"><a>Image - Text</a></li>
<li data-value="text_image"><a>Text - Image</a></li>
</ul>
</li>
<!-- thumbnail to display inside the bottom widget list editor -->