[IMP] website snippet: resize margin (not padding)
bzr revid: chm@openerp.com-20130917110043-9cru69n0gh81mmt0
This commit is contained in:
Christophe Matthieu
parent
f9b3003517
commit
7187154625
|
|
@ -206,4 +206,13 @@
|
|||
[data-snippet-id] {
|
||||
min-height: 10px;
|
||||
min-width: 10px;
|
||||
}
|
||||
|
||||
|
||||
/* Custom CSS for snippets */
|
||||
.carousel.oe_big .carousel-inner {
|
||||
height: 300px;
|
||||
}
|
||||
.carousel.oe_small .carousel-inner {
|
||||
height: 220px;
|
||||
}
|
||||
|
|
@ -50,7 +50,7 @@
|
|||
function remove_added_snippet_id () {
|
||||
_.each(website.snippet.selector, function (val) {
|
||||
$(val[0]).each(function() {
|
||||
if ($(this).is("[data-snippet-id='"+ val[1]+"']")) {
|
||||
if ($(this).data("snippet-id") === val[1]) {
|
||||
$(this).removeAttr("data-snippet-id");
|
||||
}
|
||||
});
|
||||
|
|
@ -108,12 +108,18 @@
|
|||
this.activate_overlay_zones();
|
||||
},
|
||||
cover_target: function ($el, $target){
|
||||
var pos = $target.offset();
|
||||
var mt = parseInt($target.css("margin-top") || 0);
|
||||
var mb = parseInt($target.css("margin-bottom") || 0);
|
||||
var ml = parseInt($target.css("margin-left") || 0);
|
||||
var mr = parseInt($target.css("margin-right") || 0);
|
||||
$el.css({
|
||||
'position': 'absolute',
|
||||
'width': $target.outerWidth(),
|
||||
'height': $target.outerHeight(),
|
||||
'width': $target.outerWidth() + ml + mr,
|
||||
'height': $target.outerHeight() + mt + mb,
|
||||
'top': pos.top - mt,
|
||||
'left': pos.left - ml
|
||||
});
|
||||
$el.css($target.offset());
|
||||
},
|
||||
show: function () {
|
||||
this.$el.show();
|
||||
|
|
@ -736,8 +742,8 @@
|
|||
getSize: function () {
|
||||
var grid = [0,4,8,16,32,48,64,92,128];
|
||||
this.grid = {
|
||||
n: [_.map(grid, function (v) {return 'pt'+v;}), grid],
|
||||
s: [_.map(grid, function (v) {return 'pb'+v;}), grid]
|
||||
n: [_.map(grid, function (v) {return 'mt'+v;}), grid],
|
||||
s: [_.map(grid, function (v) {return 'mb'+v;}), grid]
|
||||
};
|
||||
return this.grid;
|
||||
},
|
||||
|
|
@ -785,8 +791,6 @@
|
|||
}
|
||||
},
|
||||
});
|
||||
website.snippet.selector.push([ _.map([1,2,3,4,5,6,7,8,9,10,11,12], function (v) {return '.row > .col-md-'+v;}).join(","), 'colmd']);
|
||||
|
||||
|
||||
website.snippet.editorRegistry.carousel = website.snippet.editorRegistry.resize.extend({
|
||||
template : "website.snippets.carousel",
|
||||
|
|
@ -797,45 +801,13 @@
|
|||
},
|
||||
start : function () {
|
||||
this._super();
|
||||
var self = this;
|
||||
|
||||
this.$editor.find(".js_add").on('click', self, this.on_add);
|
||||
this.$editor.find(".js_remove").on('click', self, this.on_remove);
|
||||
this.$editor.find(".js_add").on('click', this, this.on_add);
|
||||
this.$editor.find(".js_remove").on('click', this, this.on_remove);
|
||||
|
||||
|
||||
//background
|
||||
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;
|
||||
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("");
|
||||
});
|
||||
|
||||
|
||||
//style
|
||||
var style = false;
|
||||
var el = this.$target.find('.carousel-inner .item.active');
|
||||
if (el.hasClass('text_only'))
|
||||
style = 'text_only';
|
||||
if (el.hasClass('image_text'))
|
||||
style = 'image_text';
|
||||
if (el.hasClass('text_image'))
|
||||
style = 'text_image';
|
||||
|
||||
this.$editor.find('select[name="carousel-style"] option[value="'+style+'"]').prop('selected', true);
|
||||
|
||||
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());
|
||||
});
|
||||
this.change_background();
|
||||
this.change_style();
|
||||
this.change_size();
|
||||
},
|
||||
on_add: function (e) {
|
||||
e.preventDefault();
|
||||
|
|
@ -854,6 +826,56 @@
|
|||
e.data.$target.carousel(0);
|
||||
}
|
||||
},
|
||||
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;
|
||||
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("");
|
||||
});
|
||||
},
|
||||
change_style: function () {
|
||||
var self = this;
|
||||
var style = false;
|
||||
var el = this.$target.find('.carousel-inner .item.active');
|
||||
if (el.hasClass('text_only'))
|
||||
style = 'text_only';
|
||||
if (el.hasClass('image_text'))
|
||||
style = 'image_text';
|
||||
if (el.hasClass('text_image'))
|
||||
style = 'text_image';
|
||||
|
||||
this.$editor.find('select[name="carousel-style"] option[value="'+style+'"]').prop('selected', true);
|
||||
|
||||
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());
|
||||
});
|
||||
},
|
||||
change_size: function () {
|
||||
var self = this;
|
||||
|
||||
var size = 'big';
|
||||
if (this.$target.hasClass('oe_small'))
|
||||
size = 'small';
|
||||
|
||||
this.$editor.find('select[name="carousel-size"] option[value="'+size+'"]').prop('selected', true);
|
||||
|
||||
this.$editor.find('select[name="carousel-size"]').on('change', function(e) {
|
||||
self.$target
|
||||
.removeClass('oe_big oe_small')
|
||||
.addClass("oe_" + $(e.currentTarget).val());
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
website.snippet.editorRegistry.darken = website.snippet.Editor.extend({
|
||||
|
|
@ -890,4 +912,7 @@
|
|||
}
|
||||
});
|
||||
|
||||
website.snippet.selector.push([ _.map([1,2,3,4,5,6,7,8,9,10,11,12], function (v) {return '.row > .col-md-'+v;}).join(","), 'colmd']);
|
||||
website.snippet.selector.push(['hr', 'hr']);
|
||||
|
||||
})();
|
||||
|
|
|
|||
|
|
@ -27,6 +27,15 @@
|
|||
<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="big">Big</option>
|
||||
<option value="small">Small</option>
|
||||
</select>
|
||||
</a>
|
||||
</li>
|
||||
<li class="divider"></li>
|
||||
<li class='oe_snippet_options'>
|
||||
<a href="#" class="button js_add">Add Slide</a>
|
||||
</li>
|
||||
|
|
@ -71,9 +80,9 @@
|
|||
<div class='oe_snippet_thumbnail oe_label'>Banner</div>
|
||||
|
||||
<!-- body to insert after drag and drop thumbnail -->
|
||||
<div id="myCarousel" class="oe_snippet_body carousel slide" data-interval="10000">
|
||||
<div id="myCarousel" class="oe_snippet_body carousel slide oe_big" data-interval="10000">
|
||||
<!-- Carousel items -->
|
||||
<div class="carousel-inner" style="height: 280px">
|
||||
<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="container">
|
||||
<div class="carousel-caption content">
|
||||
|
|
@ -242,7 +251,7 @@
|
|||
|
||||
<div t-name="website.snippets.hr" data-snippet-id='hr' data-category='structure' data-selector-children='.oe_structure, [data-oe-type=html]'>
|
||||
<div class='oe_snippet_thumbnail oe_label'>Separator</div>
|
||||
<div class="oe_snippet_body"><hr/></div>
|
||||
<hr class="oe_snippet_body"/>
|
||||
</div>
|
||||
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue