[IMP] website: carousel edition
bzr revid: chm@openerp.com-20130731150511-8wfza72kb6lynmor
This commit is contained in:
Christophe Matthieu
parent
fa11f4b165
commit
7c2d3a871f
|
|
@ -177,5 +177,10 @@
|
|||
}
|
||||
*/
|
||||
|
||||
|
||||
|
||||
.carousel > .css_carousel_options {
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
white-space: nowrap;
|
||||
z-index: 1;
|
||||
display: none;
|
||||
}
|
||||
|
|
@ -1,5 +1,6 @@
|
|||
openerp.website = function(instance) {
|
||||
var _lt = instance.web._lt;
|
||||
var QWeb = instance.web.qweb;
|
||||
instance.website.EditorBar = instance.web.Widget.extend({
|
||||
template: 'Website.EditorBar',
|
||||
events: {
|
||||
|
|
@ -356,60 +357,24 @@ instance.website.RTE = instance.web.Widget.extend({
|
|||
// TODO clean
|
||||
snippet_carousel: function () {
|
||||
var self = this;
|
||||
$carousels = $("<div/>");
|
||||
$carousels.css({'position': 'absolute', 'top': 0, 'white-space': 'nowrap'});
|
||||
$carousels.insertAfter(self.$el);
|
||||
$('.carousel .js_carousel_options .label').on('click', function (e) {
|
||||
e.preventDefault();
|
||||
var $button = $(e.currentTarget)
|
||||
var $c = $button.parents(".carousel:first");
|
||||
|
||||
$(".carousel").each(function() {
|
||||
var $carousel = new instance.website.snippet.carousel(self, this);
|
||||
$carousel.appendTo($carousels);
|
||||
if($button.hasClass("js_add")) {
|
||||
var cycle = $c.find(".carousel-inner .item").size();
|
||||
$c.find(".carousel-inner").append(QWeb.render("Website.Snipped.carousel"));
|
||||
$c.carousel(cycle);
|
||||
}
|
||||
else {
|
||||
var cycle = $c.find(".carousel-inner .item.active").remove();
|
||||
$c.find(".carousel-inner .item:first").addClass("active");
|
||||
$c.carousel(0);
|
||||
self.trigger('change', self, null);
|
||||
}
|
||||
});
|
||||
$(document).on("scroll", function () {
|
||||
$carousels.css("top", (-self.$el.offset().top+2) + 'px');
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
instance.website.snippet = {};
|
||||
instance.website.snippet.carousel = instance.web.Widget.extend({
|
||||
template: 'Website.Snipped.carousel',
|
||||
events: {
|
||||
'click .add': 'add_page',
|
||||
'click .remove': 'remove_page',
|
||||
},
|
||||
instances: [],
|
||||
init: function (parent, carousel) {
|
||||
this._super(parent);
|
||||
this.parent = parent;
|
||||
var index = instance.website.snippet.carousel.index || 0;
|
||||
instance.website.snippet.carousel.index = index++;
|
||||
this.index = index;
|
||||
$(carousel).addClass("carousel-index-"+index);
|
||||
this.offset = $(carousel).offset();
|
||||
},
|
||||
start: function () {
|
||||
var self = this;
|
||||
this.$el.css({position: 'absolute', top: this.offset.top+'px', left: this.offset.left+'px'});
|
||||
},
|
||||
destroy: function () {
|
||||
return this._super();
|
||||
},
|
||||
get_carousel: function() {
|
||||
return $(".carousel.carousel-index-"+this.index);
|
||||
},
|
||||
add_page: function() {
|
||||
var $c = this.get_carousel();
|
||||
var cycle = $c.find(".carousel-inner .item").size();
|
||||
$c.find(".carousel-inner").append(this.$(".item").clone());
|
||||
$c.carousel(cycle);
|
||||
},
|
||||
remove_page: function() {
|
||||
var $c = this.get_carousel();
|
||||
var cycle = $c.find(".carousel-inner .item.active").remove();
|
||||
$c.find(".carousel-inner .item:first").addClass("active");
|
||||
$c.carousel(0);
|
||||
this.parent.trigger('change', this.parent, null);
|
||||
$('.carousel .js_carousel_options').show();
|
||||
}
|
||||
});
|
||||
|
||||
|
|
@ -490,10 +455,8 @@ $(function(){
|
|||
}
|
||||
event.preventDefault();
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
|
||||
instance.web.ActionRedirect = function(parent, action) {
|
||||
var url = $.deparam(window.location.href).url;
|
||||
if (url) {
|
||||
|
|
|
|||
|
|
@ -19,16 +19,10 @@
|
|||
</div>
|
||||
</t>
|
||||
<t t-name="Website.Snipped.carousel">
|
||||
<div style="position: absolute; top: -4px;">
|
||||
<span class="label" style="cursor:pointer"><i class="add icon-plus-sign"></i></span>
|
||||
<span class="label" style="cursor:pointer"><i class="remove icon-minus-sign"></i></span>
|
||||
<div style="display: none;">
|
||||
<div class="item" style="background-image: url(/website/static/src/img/china.jpg); background-size: cover; background-position: bottom;" >
|
||||
<div class='container'>
|
||||
<h1 class='mt64'>Your New Banner Slide</h1>
|
||||
<h2>With another convincing subtitle</h2>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item" style="background-image: url(/website/static/src/img/china.jpg); background-size: cover; background-position: bottom;" >
|
||||
<div class='container'>
|
||||
<h1 class='mt64'>Your New Banner Slide</h1>
|
||||
<h2>With another convincing subtitle</h2>
|
||||
</div>
|
||||
</div>
|
||||
</t>
|
||||
|
|
|
|||
|
|
@ -204,6 +204,11 @@
|
|||
|
||||
<section>
|
||||
<div id="myCarousel" class="carousel slide" data-interval='1000000'>
|
||||
<div class="css_carousel_options js_carousel_options" t-ignore="1">
|
||||
<span class="label js_add"><i class="icon-plus-sign"></i></span>
|
||||
<span class="label js_remove"><i class="icon-minus-sign"></i></span>
|
||||
</div>
|
||||
<!-- Carousel items -->
|
||||
<div class="carousel-inner">
|
||||
<div class="item active" style="background-image: url(/website/static/src/img/greenfields.jpg); background-size: cover;" >
|
||||
<div class='container'>
|
||||
|
|
|
|||
Loading…
Reference in New Issue