[IMP] website snippet: new change background
bzr revid: chm@openerp.com-20131001120335-kwyyodiwturplyfy
This commit is contained in:
Christophe Matthieu
parent
ddb65ce339
commit
aea15f9f6f
|
|
@ -714,7 +714,7 @@
|
|||
|
||||
if (o.url) {
|
||||
if (o.style) {
|
||||
this.$('.image-style').val(o.style)
|
||||
this.$('.image-style').val(o.style);
|
||||
}
|
||||
this.set_image(o.url);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -797,42 +797,11 @@
|
|||
this.$background_img.detach();
|
||||
},
|
||||
|
||||
/*
|
||||
* active the cke rte editor for change image url
|
||||
*/
|
||||
active_change_image: function ($image) {
|
||||
var self = this;
|
||||
// cke select image with mousedown on image
|
||||
var $image = $($image);
|
||||
var image = $image[0];
|
||||
var event = document.createEvent( 'HTMLEvents' );
|
||||
event.initEvent( 'mousedown', true, true );
|
||||
image.dispatchEvent( event );
|
||||
|
||||
// hack to active editor with doubleclick on editor
|
||||
var dblclick = null;
|
||||
$image.on("dblclick", function (evt) {
|
||||
evt.preventDefault();
|
||||
dblclick = new CKEDITOR.dom.event(evt.originalEvent);
|
||||
return;
|
||||
});
|
||||
var event = document.createEvent( 'HTMLEvents' );
|
||||
event.initEvent( 'dblclick', true, true );
|
||||
image.dispatchEvent( event );
|
||||
},
|
||||
|
||||
change_background: function (bg, ul_options) {
|
||||
var self = this;
|
||||
var $ul = this.$editor.find(ul_options);
|
||||
var bg_value = $(bg).css("background-image").replace(/url\(|\)/g, "");
|
||||
|
||||
// must add an image in the DOM for rte editor
|
||||
this.$background_img = $("<img src='"+bg_value+"'/>").css({position: "absolute", zIndex: -10, left:-1000000, top:-1000000});
|
||||
this.$background_img.prependTo(this.$target);
|
||||
this.$background_img.on("node_changed", function () {
|
||||
$(bg).css("background-image", "url(" + $(this).attr('src') + ")");
|
||||
});
|
||||
|
||||
// select in ul options
|
||||
$ul.find("li").removeClass("active");
|
||||
var selected = $ul.find('[data-value="' + bg_value + '"], [data-value="' + bg_value.replace(/.*:\/\/[^\/]+/, '') + '"]');
|
||||
|
|
@ -849,18 +818,23 @@
|
|||
$(this).addClass("active");
|
||||
self.$editor.find('input').val("");
|
||||
} else {
|
||||
self.active_change_image(self.$background_img);
|
||||
var editor = new website.editor.ImageDialog();
|
||||
editor.on('start', self, function (o) {o.url = bg_value;});
|
||||
editor.on('save', self, function (o) {
|
||||
$(bg).css("background-image", "url(" + o.url + ")");
|
||||
});
|
||||
editor.appendTo($('body'));
|
||||
}
|
||||
})
|
||||
.on('mouseover', function (event) {
|
||||
if ($(this).data("value")) {
|
||||
var src = $(this).data("value");
|
||||
self.$background_img.attr('src', src);
|
||||
$(bg).css("background-image", "url(" + src + ")");
|
||||
}
|
||||
})
|
||||
.on('mouseout', function (event) {
|
||||
var src = $ul.find('li.active').data("value");
|
||||
self.$background_img.attr('src', src);
|
||||
$(bg).css("background-image", "url(" + src + ")");
|
||||
});
|
||||
},
|
||||
});
|
||||
|
|
|
|||
|
|
@ -140,7 +140,6 @@
|
|||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 992px) {
|
||||
.col-md-12 .oe-height-1 {
|
||||
height: 95px;
|
||||
|
|
@ -174,7 +173,6 @@
|
|||
height: 576px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1200px) {
|
||||
.col-md-12 .oe-height-1 {
|
||||
height: 125px;
|
||||
|
|
@ -208,7 +206,6 @@
|
|||
height: 760px;
|
||||
}
|
||||
}
|
||||
|
||||
/* ---- Product list style ---- */
|
||||
.oe_list_products {
|
||||
border: none;
|
||||
|
|
@ -267,7 +264,7 @@
|
|||
background-color: transparent;
|
||||
}
|
||||
|
||||
.cke_editable #products_grid td:hover > .css_options {
|
||||
.cke_editable #products_grid .oe_product_cart:hover > .css_options {
|
||||
display: block;
|
||||
}
|
||||
|
||||
|
|
@ -362,7 +359,7 @@ ul.wizard li.text-success {
|
|||
}
|
||||
|
||||
ul.wizard li.text-success .chevron:before {
|
||||
border-left: 10px solid #f5f5f5;
|
||||
border-left: 10px solid whitesmoke;
|
||||
}
|
||||
|
||||
ul.wizard li.text-primary {
|
||||
|
|
|
|||
|
|
@ -226,7 +226,7 @@
|
|||
background-color: transparent
|
||||
|
||||
.cke_editable
|
||||
#products_grid td:hover > .css_options
|
||||
#products_grid .oe_product_cart:hover > .css_options
|
||||
display: block
|
||||
|
||||
/* Ribbon for promotionso on products */
|
||||
|
|
|
|||
|
|
@ -146,58 +146,60 @@
|
|||
t-att-rowspan="td_product['y']"
|
||||
t-attf-class="oe_product oe-height-#{td_product['y']*2} #{ td_product['class'] }">
|
||||
|
||||
<div class="css_options" t-ignore="true" t-if="editable">
|
||||
<div t-attf-class="dropdown js_options" t-att-data-id="product.id">
|
||||
<a class="btn btn-default" t-att-id="'dopprod-%s' % product.id" role="button" data-toggle="dropdown">Options <span class="caret"></span></a>
|
||||
<ul class="dropdown-menu" role="menu" t-att-aria-labelledby="'dopprod-%s' % product.id">
|
||||
<li class='dropdown-submenu'>
|
||||
<a tabindex="-1" href="#">Size</a>
|
||||
<ul class="dropdown-menu" name="size">
|
||||
<li><a href="#">
|
||||
<table>
|
||||
<tr>
|
||||
<td class="selected"></td>
|
||||
<td t-att-class="product.website_size_x > 1 and 'selected'"></td>
|
||||
<td t-att-class="product.website_size_x > 2 and 'selected'"></td>
|
||||
<td t-att-class="product.website_size_x > 3 and 'selected'"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td t-att-class="product.website_size_y > 1 and 'selected'"></td>
|
||||
<td t-att-class="product.website_size_y > 1 and product.website_size_x > 1 and 'selected'"></td>
|
||||
<td t-att-class="product.website_size_y > 1 and product.website_size_x > 2 and 'selected'"></td>
|
||||
<td t-att-class="product.website_size_y > 1 and product.website_size_x > 3 and 'selected'"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td t-att-class="product.website_size_y > 2 and 'selected'"></td>
|
||||
<td t-att-class="product.website_size_y > 2 and product.website_size_x > 1 and 'selected'"></td>
|
||||
<td t-att-class="product.website_size_y > 2 and product.website_size_x > 2 and 'selected'"></td>
|
||||
<td t-att-class="product.website_size_y > 2 and product.website_size_x > 3 and 'selected'"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td t-att-class="product.website_size_y > 3 and 'selected'"></td>
|
||||
<td t-att-class="product.website_size_y > 3 and product.website_size_x > 1 and 'selected'"></td>
|
||||
<td t-att-class="product.website_size_y > 3 and product.website_size_x > 2 and 'selected'"></td>
|
||||
<td t-att-class="product.website_size_y > 3 and product.website_size_x > 3 and 'selected'"></td>
|
||||
</tr>
|
||||
</table>
|
||||
</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class='dropdown-submenu'>
|
||||
<a tabindex="-1" href="#">Styles</a>
|
||||
<ul class="dropdown-menu" name="style">
|
||||
<t t-foreach="styles" t-as="style">
|
||||
<li t-att-class="style.id in [s.id for s in product.website_style_ids] and 'active' or ''"><a href="#" t-att-data-id="style.id" t-att-data-class="style.html_class"><t t-esc="style.name"/></a></li>
|
||||
</t>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="oe_product_cart" t-att-data-publish="product.website_published and 'on' or 'off'">
|
||||
|
||||
<div class="css_options" t-ignore="true" t-if="editable">
|
||||
<div t-attf-class="dropdown js_options" t-att-data-id="product.id">
|
||||
<a class="btn btn-default" t-att-id="'dopprod-%s' % product.id" role="button" data-toggle="dropdown">Options <span class="caret"></span></a>
|
||||
<ul class="dropdown-menu" role="menu" t-att-aria-labelledby="'dopprod-%s' % product.id">
|
||||
<li class='dropdown-submenu'>
|
||||
<a tabindex="-1" href="#">Size</a>
|
||||
<ul class="dropdown-menu" name="size">
|
||||
<li><a href="#">
|
||||
<table>
|
||||
<tr>
|
||||
<td class="selected"></td>
|
||||
<td t-att-class="product.website_size_x > 1 and 'selected'"></td>
|
||||
<td t-att-class="product.website_size_x > 2 and 'selected'"></td>
|
||||
<td t-att-class="product.website_size_x > 3 and 'selected'"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td t-att-class="product.website_size_y > 1 and 'selected'"></td>
|
||||
<td t-att-class="product.website_size_y > 1 and product.website_size_x > 1 and 'selected'"></td>
|
||||
<td t-att-class="product.website_size_y > 1 and product.website_size_x > 2 and 'selected'"></td>
|
||||
<td t-att-class="product.website_size_y > 1 and product.website_size_x > 3 and 'selected'"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td t-att-class="product.website_size_y > 2 and 'selected'"></td>
|
||||
<td t-att-class="product.website_size_y > 2 and product.website_size_x > 1 and 'selected'"></td>
|
||||
<td t-att-class="product.website_size_y > 2 and product.website_size_x > 2 and 'selected'"></td>
|
||||
<td t-att-class="product.website_size_y > 2 and product.website_size_x > 3 and 'selected'"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td t-att-class="product.website_size_y > 3 and 'selected'"></td>
|
||||
<td t-att-class="product.website_size_y > 3 and product.website_size_x > 1 and 'selected'"></td>
|
||||
<td t-att-class="product.website_size_y > 3 and product.website_size_x > 2 and 'selected'"></td>
|
||||
<td t-att-class="product.website_size_y > 3 and product.website_size_x > 3 and 'selected'"></td>
|
||||
</tr>
|
||||
</table>
|
||||
</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class='dropdown-submenu'>
|
||||
<a tabindex="-1" href="#">Styles</a>
|
||||
<ul class="dropdown-menu" name="style">
|
||||
<t t-foreach="styles" t-as="style">
|
||||
<li t-att-class="style.id in [s.id for s in product.website_style_ids] and 'active' or ''"><a href="#" t-att-data-id="style.id" t-att-data-class="style.html_class"><t t-esc="style.name"/></a></li>
|
||||
</t>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<t t-call="website_sale.products_cart"/>
|
||||
</div>
|
||||
|
||||
</td>
|
||||
</t>
|
||||
<td t-if="td_product == None"/>
|
||||
|
|
|
|||
Loading…
Reference in New Issue