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

[IMP] website snippet: select background of banner

Browse Source 
bzr revid: chm@openerp.com-20130923121503-1etp4iwkj0eog48m
This commit is contained in:
Christophe Matthieu
2013-09-23 14:15:03 +02:00
parent 5bd6c371d0
commit ddee2798dc
2 changed files with 53 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files
addons/website/static/src/js/website.snippets.js
+47 -59
View File
@@ -571,14 +571,6 @@
* Called after onBlur of snippet editor
*/
onBlurEdit : function () {},
/* getOptions
* Read data saved for your snippet animation.
*/
getOptions: function () {
var options = this.$el.data("snippet-options");
return options ? JSON.parse(options) : undefined;
},
});
@@ -805,21 +797,6 @@
onBlur : function () {
this.$overlay.removeClass('oe_active');
},
/* setOptions
* Use this method when you want to save some data for your snippet animation.
*/
setOptions: function (options) {
$target.attr("data-snippet-options", JSON.stringify(options));
},
/* getOptions
* Read data saved for your snippet animation.
*/
getOptions: function () {
var options = this.$target.data("snippet-options");
return options ? JSON.parse(options) : undefined;
},
});
@@ -1015,70 +992,81 @@
start : function () {
this._super();
this.$editor.find(".js_add").on('click', this, this.on_add);
this.$editor.find(".js_remove").on('click', this, this.on_remove);
this.$editor.find(".js_add").on('click', _.bind(this.on_add, this));
this.$editor.find(".js_remove").on('click', _.bind(this.on_remove, this));
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();
var $inner = e.data.$target.find('.carousel-inner');
var $inner = this.$target.find('.carousel-inner');
var cycle = $inner.find('.item').size();
$inner.find('.item.active').clone().removeClass('active').appendTo($inner);
e.data.$target.carousel(cycle);
this.$target.carousel(cycle);
this.set_options_background();
this.set_options_style();
},
on_remove: function (e) {
e.preventDefault();
var $inner = e.data.$target.find('.carousel-inner');
var $inner = this.$target.find('.carousel-inner');
if ($inner.find('.item').size() > 1) {
$inner
.find('.item.active').remove().end()
.find('.item:first').addClass('active');
e.data.$target.carousel(0);
this.$target.carousel(0);
this.set_options_background();
this.set_options_style();
}
},
onFocus: function () {
this.set_options_background();
this.set_options_style();
this._super();
},
set_options_background: function () {
var $image = this.$target.find('.carousel-inner .item.active > img');
var bg = $image.attr('src');
var $ul = this.$editor.find('ul[name="carousel-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').val(selected ? "" : bg);
},
change_background: function () {
var self = this;
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);
}
$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;
self.$editor.find('input').val("");
})
.on('mouseover', function (event) {
$item.css('background-image', 'url(' + $(this).data("value") + ')');
if ($(this).data("value")) {
self.$target.find('.carousel-inner .item.active > img')
.attr('src', $(this).data("value"));
}
})
.on('mouseout', function (event) {
$item.css('background-image', 'url(' + $ul.find('li.active').data("value") + ')');
self.$target.find('.carousel-inner .item.active > img')
.attr('src', $ul.find('li.active').data("value"));
});
},
change_style: function () {
var self = this;
set_options_style: function () {
var style = false;
var $el = this.$target.find('.carousel-inner .item.active');
var $ul = this.$editor.find('ul[name="carousel-style"]');
var $li = $ul.find("li");
if ($el.hasClass('text_only'))
style = 'text_only';
if ($el.hasClass('image_text'))
@@ -1086,22 +1074,24 @@
if ($el.hasClass('text_image'))
style = 'text_image';
$ul.find('[data-value="' + style + '"]').addClass('active');
},
change_style: function () {
var self = this;
var $ul = this.$editor.find('ul[name="carousel-style"]');
var $li = $ul.find("li");
$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) {
var $el = self.$target.find('.carousel-inner .item.active');
$el.removeClass('image_text text_image text_only');
$el.addClass($(event.currentTarget).data("value"));
})
.on('mouseout', function (event) {
var $el = self.$target.find('.carousel-inner .item.active');
$el.removeClass('image_text text_image text_only');
$el.addClass($ul.find('li.active').data("value"));
});
@@ -1122,10 +1112,8 @@
$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');
addons/website/static/src/xml/website.snippets.xml
+6 -5
View File
@@ -123,9 +123,6 @@
<li class='oe_snippet_options'>
<a href="#" class="button js_add">Add Slide</a>
</li>
<li class='oe_snippet_options'>
<a href="#" class="button js_remove">Remove Slide</a>
</li>
<li class="oe_snippet_options dropdown-submenu">
<a tabindex="-1" href="#">Background</a>
<ul class="dropdown-menu" name="carousel-background">
@@ -144,7 +141,7 @@
<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>
<li class="oe_custom_bg"><b></b></li>
</ul>
</li>
<li class='oe_snippet_options dropdown-submenu'>
@@ -155,6 +152,9 @@
<li data-value="text_image"><a>Text - Image</a></li>
</ul>
</li>
<li class='oe_snippet_options'>
<a href="#" class="button js_remove">Remove Slide</a>
</li>
<!-- thumbnail to display inside the bottom widget list editor -->
<div class='oe_snippet_thumbnail'>
@@ -167,7 +167,8 @@
<div id="myCarousel" class="oe_snippet_body carousel slide oe_medium mb32" data-interval="10000">
<!-- Carousel items -->
<div class="carousel-inner">
<div class="item image_text active" style="background-image: url(/website/static/src/img/banner/color_splash.jpg); background-size: cover;">
<div class="item image_text active">
<img src="/website/static/src/img/banner/color_splash.jpg" width="100%" height="100%"/>
<div class="container">
<div class="carousel-caption content">
<h1>Set Your Banner Title</h1>