'top': pos.top - mt,
'left': pos.left
});
+ $el.find(".oe_handle.size").css("bottom", mb+'px');
},
show: function () {
this.$el.removeClass("hidden");
});
- website.snippet.styleRegistry.size = website.snippet.StyleEditor.extend({
- select: function(event, np) {
- this._super(event, np);
- this.parent.parent.cover_target(this.$overlay, this.$target);
- },
- preview: function (event, np) {
- this._super(event, np);
- this.parent.parent.cover_target(this.$overlay, this.$target);
- }
- });
-
website.snippet.styleRegistry.background = website.snippet.StyleEditor.extend({
_get_bg: function () {
return this.$target.css("background-image").replace(/url\(['"]*|['"]*\)|^none$/g, "");
}
var Editor = website.snippet.styleRegistry[val['snippet-style-id']] || website.snippet.StyleEditor;
var editor = new Editor(self, self.$target, val['snippet-style-id']);
- $ul.prepend(editor.$el);
+ $ul.prepend(editor.$el.addClass("snippet-style-" + val['snippet-style-id']));
});
if ($ul.find("li").length) {
if (!resize_values.s) $box.find(".oe_handle.s").remove();
if (!resize_values.e) $box.find(".oe_handle.e").remove();
if (!resize_values.w) $box.find(".oe_handle.w").remove();
+ if (!resize_values.size) $box.find(".oe_handle.size").remove();
this.$overlay.append($box.find(".oe_handles").html());
this.$overlay.find(".oe_handle").on('mousedown', function (event){
- event.preventDefault();
+ event.preventDefault();
- var $handle = $(this);
+ var $handle = $(this);
- var resize_values = self.getSize();
- var compass = false;
- var XY = false;
- if ($handle.hasClass('n')) {
- compass = 'n';
- XY = 'Y';
- }
- else if ($handle.hasClass('s')) {
- compass = 's';
- XY = 'Y';
- }
- else if ($handle.hasClass('e')) {
- compass = 'e';
- XY = 'X';
- }
- else if ($handle.hasClass('w')) {
- compass = 'w';
- XY = 'X';
- }
+ var resize_values = self.getSize();
+ var compass = false;
+ var XY = false;
+ if ($handle.hasClass('n')) {
+ compass = 'n';
+ XY = 'Y';
+ }
+ else if ($handle.hasClass('s')) {
+ compass = 's';
+ XY = 'Y';
+ }
+ else if ($handle.hasClass('e')) {
+ compass = 'e';
+ XY = 'X';
+ }
+ else if ($handle.hasClass('w')) {
+ compass = 'w';
+ XY = 'X';
+ }
+ else if ($handle.hasClass('size')) {
+ compass = 'size';
+ XY = 'Y';
+ }
- var resize = resize_values[compass];
- if (!resize) return;
+ var resize = resize_values[compass];
+ if (!resize) return;
+
+ if (compass === 'size') {
+ var grid = resize[0];
+ var offset = self.$target.offset().top;
+ if (self.$target.css("background").match(/rgba\(0, 0, 0, 0\)/)) {
+ self.$target.addClass("resize_editor_busy");
+ }
+ } else {
+ var xy = event['page'+XY];
var current = resize[2] || 0;
_.each(resize[0], function (val, key) {
if (self.$target.hasClass(val)) {
current = key;
}
});
-
- self.parent.editor_busy = true;
-
- var xy = event['page'+XY];
var begin = current;
var beginClass = self.$target.attr("class");
var regClass = new RegExp("\\s*" + resize[0][begin].replace(/[-]*[0-9]+/, '[-]*[0-9]+'), 'g');
+ }
- var cursor = $handle.css("cursor")+'-important';
- var $body = $(document.body);
- $body.addClass(cursor);
-
- var body_mousemove = function (event){
- event.preventDefault();
- var dd = event['page'+XY] - xy + resize[1][begin];
- var next = current+1 === resize[1].length ? current : (current+1);
- var prev = current ? (current-1) : 0;
-
- var change = false;
- if (dd > (2*resize[1][next] + resize[1][current])/3) {
- self.$target.attr("class", (self.$target.attr("class")||'').replace(regClass, ''));
- self.$target.addClass(resize[0][next]);
- current = next;
- change = true;
- }
- if (prev != current && dd < (2*resize[1][prev] + resize[1][current])/3) {
- self.$target.attr("class", (self.$target.attr("class")||'').replace(regClass, ''));
- self.$target.addClass(resize[0][prev]);
- current = prev;
- change = true;
- }
+ self.parent.editor_busy = true;
- if (change) {
- self.on_resize(compass, beginClass, current);
- self.parent.cover_target(self.$overlay, self.$target);
- }
- };
-
- var body_mouseup = function(){
- $body.unbind('mousemove', body_mousemove);
- $body.unbind('mouseup', body_mouseup);
- $body.removeClass(cursor);
- self.parent.editor_busy = false;
- };
- $body.mousemove(body_mousemove);
- $body.mouseup(body_mouseup);
- });
+ var cursor = $handle.css("cursor")+'-important';
+ var $body = $(document.body);
+ $body.addClass(cursor);
+
+ var body_mousemove = function (event){
+ event.preventDefault();
+ if (compass === 'size') {
+ var dy = event.pageY-offset;
+ dy = dy - dy%resize[0];
+ if (dy <= 0) dy = resize[0];
+ self.$target.css("height", dy+"px");
+ self.on_resize(compass, beginClass, current);
+ self.parent.cover_target(self.$overlay, self.$target);
+ return;
+ }
+ var dd = event['page'+XY] - xy + resize[1][begin];
+ var next = current+1 === resize[1].length ? current : (current+1);
+ var prev = current ? (current-1) : 0;
+
+ var change = false;
+ if (dd > (2*resize[1][next] + resize[1][current])/3) {
+ self.$target.attr("class", (self.$target.attr("class")||'').replace(regClass, ''));
+ self.$target.addClass(resize[0][next]);
+ current = next;
+ change = true;
+ }
+ if (prev != current && dd < (2*resize[1][prev] + resize[1][current])/3) {
+ self.$target.attr("class", (self.$target.attr("class")||'').replace(regClass, ''));
+ self.$target.addClass(resize[0][prev]);
+ current = prev;
+ change = true;
+ }
+
+ if (change) {
+ self.on_resize(compass, beginClass, current);
+ self.parent.cover_target(self.$overlay, self.$target);
+ }
+ };
+
+ var body_mouseup = function(){
+ $body.unbind('mousemove', body_mousemove);
+ $body.unbind('mouseup', body_mouseup);
+ $body.removeClass(cursor);
+ self.parent.editor_busy = false;
+ self.$target.removeClass("resize_editor_busy");
+ };
+ $body.mousemove(body_mousemove);
+ $body.mouseup(body_mouseup);
+ });
},
getSize: function () {
var grid = [0,4,8,16,32,48,64,92,128];
this.grid = {
+ // list of class (Array), grid (Array), default value (INT)
n: [_.map(grid, function (v) {return 'mt'+v;}), grid],
- s: [_.map(grid, function (v) {return 'mb'+v;}), grid]
+ s: [_.map(grid, function (v) {return 'mb'+v;}), grid],
+ size: [8]
};
return this.grid;
},
var grid = [-12,-11,-10,-9,-8,-7,-6,-5,-4,-3,-2,-1,0,1,2,3,4,5,6,7,8,9,10,11];
this.grid.w = [_.map(grid, function (v) {return 'col-md-offset-'+v;}), _.map(grid, function (v) {return width/12*v;}), 12];
+ this.grid.s = null;
+
return this.grid;
},
_drag_and_drop_after_insert_dropzone: function(){
this.$target.css("background-image", "");
this.$target.removeClass(this._class);
},
+ getSize: function () {
+ this._super();
+ //this.grid.size = null;
+ return this.grid;
+ },
+ load_style_options : function () {
+ this._super();
+ $(".snippet-style-size li[data-class='']").remove();
+ },
start : function () {
var self = this;
this._super();
<img class="oe_snippet_thumbnail_img" src="/website/static/src/img/blocks/block_banner.png"/>
<span class="oe_snippet_thumbnail_title">Banner</span>
</div>
- <div id="myCarousel" class="oe_snippet_body carousel slide oe_medium mb32">
+ <div id="myCarousel" class="oe_snippet_body carousel slide mb32" style="height: 320px;">
<!-- Indicators -->
<ol class="carousel-indicators hidden">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
and give it to them.
</p>
</div>
- <div class="col-md-6 mt16 mb16">
- <img class="img img-responsive shadow" src="/website/static/src/img/text_image.png"/>
+ <div class="col-md-6 mt16">
+ <img class="img img-responsive shadow mb16" src="/website/static/src/img/text_image.png"/>
</div>
</div>
</div>
<section class="oe_snippet_body">
<div class="container">
<div class="row">
- <div class="col-md-6 mt16 mb16">
- <img class="img img-responsive shadow" src="/website/static/src/img/image_text.jpg"/>
+ <div class="col-md-6 mt16">
+ <img class="img img-responsive shadow mb16" src="/website/static/src/img/image_text.jpg"/>
</div>
<div class="col-md-6 mt16">
<h3>A Section Subtitle</h3>
<img class="oe_snippet_thumbnail_img" src="/website/static/src/img/blocks/block_quotes_slider.png"/>
<span class="oe_snippet_thumbnail_title">Quotes Slider</span>
</div>
- <div id="myQuoteCarousel" class="oe_snippet_body carousel slide oe_small mb0">
+ <div id="myQuoteCarousel" class="oe_snippet_body carousel slide mb0" style="height: 240px;">
<!-- Indicators -->
<ol class="carousel-indicators mb0">
<li data-target="#myQuoteCarousel" data-slide-to="0" class="active"></li>
<li data-value="1.7"><a>Very Fast</a></li>
</ul>
</li>
- <section class="oe_snippet_body parallax oe_medium"
- style="background-image: url('/website/static/src/img/banner/mountains.jpg')"
+ <section class="oe_snippet_body parallax"
+ style="height: 320px; background-image: url('/website/static/src/img/banner/mountains.jpg')"
data-scroll-background-ratio="0.3">
<div><div class="oe_structure"/></div>
</section>
<img class="oe_snippet_thumbnail_img" src="/website/static/src/img/blocks/block_quotes_slider.png"/>
<span class="oe_snippet_thumbnail_title">Parallax Slider</span>
</div>
- <section class="oe_snippet_body parallax oe_medium" data-snippet-id="parallax"
- style="background-image: url('/website/static/src/img/parallax/quote.png')"
+ <section class="oe_snippet_body parallax" data-snippet-id="parallax"
+ style="height: 320px; background-image: url('/website/static/src/img/parallax/quote.png')"
data-scroll-background-ratio="0.3">
<div>
<div class="oe_structure">
- <div id="myQuoteCarousel" class="carousel slide oe_small mb0" data-snippet-id="slider">
+ <div id="myQuoteCarousel" class="carousel slide mb0" style="height: 240px;" data-snippet-id="slider">
<!-- Indicators -->
<ol class="carousel-indicators mb0">
<li data-target="#myQuoteCarousel" data-slide-to="0" class="active"></li>
</li>
</div>
- <div data-snippet-style-id='size' data-selector="section[data-snippet-id='parallax'], div[data-snippet-id='carousel'], div[data-snippet-id='slider']">
- <li class="dropdown-submenu" data-required="true">
- <a tabindex="-1" href="#">Size</a>
- <ul class="dropdown-menu">
- <li data-class='oe_small'><a>Small</a></li>
- <li data-class='oe_medium'><a>Medium</a></li>
- <li data-class='oe_big'><a>Big</a></li>
- <li data-class=''><a>Auto</a></li>
- </ul>
- </li>
- </div>
-
<div data-snippet-style-id='background' data-selector="section, section[data-snippet-id='parallax'], div[data-snippet-id='carousel']">
<li class="dropdown-submenu">
<a tabindex="-1" href="#">Background</a>
projects / odoo / odoo.git / commitdiff