From 68749a06831a3f3e22c75b8647ecfdafe99429c0 Mon Sep 17 00:00:00 2001
From: Christophe Matthieu <chm@openerp.com>
Date: Mon, 3 Mar 2014 15:20:17 +0100
Subject: [PATCH] [IMP] website: snippet: remove data-snippet-id and add auto
resize on resising option
bzr revid: chm@openerp.com-20140303142017-jcb3401wpiuvbc1n
---
addons/website/data/website_demo.xml | 4 +-
addons/website/static/src/css/snippets.css | 5 -
addons/website/static/src/css/snippets.sass | 4 -
addons/website/static/src/css/website.css | 9 +-
addons/website/static/src/css/website.sass | 7 +-
.../src/js/website.snippets.animation.js | 5 +-
.../static/src/js/website.snippets.editor.js | 115 ++++++++----------
.../static/src/js/website.tour.banner.js | 2 +-
addons/website/views/snippets.xml | 23 ++--
9 files changed, 76 insertions(+), 98 deletions(-)
diff --git a/addons/website/data/website_demo.xml b/addons/website/data/website_demo.xml
index 8abf901fd898..639005067414 100644
--- a/addons/website/data/website_demo.xml
+++ b/addons/website/data/website_demo.xml
@@ -25,7 +25,7 @@
<t t-set="additional_title">Partner Detail</t>
<div id="wrap">
<div class="oe_structure">
- <section data-snippet-id="title">
+ <section>
<div class="container">
<div class="row">
<div class="col-md-12">
@@ -73,7 +73,7 @@ response = request.website.render("website.template_partner_post", values)
<t t-set="additional_title">Partners</t>
<div id="wrap">
<div class="oe_structure">
- <section data-snippet-id="title">
+ <section>
<div class="container">
<div class="row">
<div class="col-md-12">
diff --git a/addons/website/static/src/css/snippets.css b/addons/website/static/src/css/snippets.css
index fe9c18c0081d..3f5373e57e47 100644
--- a/addons/website/static/src/css/snippets.css
+++ b/addons/website/static/src/css/snippets.css
@@ -608,8 +608,3 @@
height: 16px;
display: inline-block;
}
-
-[data-snippet-id] {
- min-height: 10px;
- min-width: 10px;
-}
diff --git a/addons/website/static/src/css/snippets.sass b/addons/website/static/src/css/snippets.sass
index a06bba01dbad..f9432b3749d9 100644
--- a/addons/website/static/src/css/snippets.sass
+++ b/addons/website/static/src/css/snippets.sass
@@ -483,10 +483,6 @@
height: 16px
display: inline-block
-[data-snippet-id]
- min-height: 10px
- min-width: 10px
-
diff --git a/addons/website/static/src/css/website.css b/addons/website/static/src/css/website.css
index e47b7a41baab..78262bc7dd43 100644
--- a/addons/website/static/src/css/website.css
+++ b/addons/website/static/src/css/website.css
@@ -280,12 +280,13 @@ ul.nav-stacked > li > a {
background-size: 100%;
}
-[data-snippet-id], .colmd, .hr, .blockquote {
+section, .carousel, .parallax, .row, .hr, .blockquote {
+ min-height: 30px;
overflow: hidden;
}
@media (max-width: 400px) {
- [data-snippet-id]:not([data-snippet-id="carousel"]) {
+ section, .parallax, .row, .hr, .blockquote {
height: auto !important;
}
}
@@ -380,10 +381,10 @@ ul.nav-stacked > li > a {
}
/* Parallax Theme */
-div.carousel[data-snippet-id="slider"] .carousel-indicators li {
+div.carousel .carousel-indicators li {
border: 1px solid grey;
}
-div.carousel[data-snippet-id="slider"] .carousel-indicators .active {
+div.carousel .carousel-indicators .active {
background-color: grey;
}
diff --git a/addons/website/static/src/css/website.sass b/addons/website/static/src/css/website.sass
index 3cdfe37a8967..680f26cef07c 100644
--- a/addons/website/static/src/css/website.sass
+++ b/addons/website/static/src/css/website.sass
@@ -230,11 +230,12 @@ ul.nav-stacked > li > a
.oe_img_bg
background-size: 100%
-[data-snippet-id],.colmd,.hr,.blockquote
+section, .carousel, .parallax, .row, .hr, .blockquote
+ min-height: 30px
overflow: hidden
@media (max-width: 400px)
- [data-snippet-id]:not([data-snippet-id="carousel"])
+ section, .parallax, .row, .hr, .blockquote
height: auto !important
.carousel-inner
@@ -312,7 +313,7 @@ ul.nav-stacked > li > a
/* Parallax Theme */
-div.carousel[data-snippet-id="slider"]
+div.carousel
.carousel-indicators
li
border: 1px solid grey
diff --git a/addons/website/static/src/js/website.snippets.animation.js b/addons/website/static/src/js/website.snippets.animation.js
index 01e4c5239cb1..e07e58e59e78 100644
--- a/addons/website/static/src/js/website.snippets.animation.js
+++ b/addons/website/static/src/js/website.snippets.animation.js
@@ -8,9 +8,10 @@
website.snippet.start_animation = function ($target) {
for (var k in website.snippet.animationRegistry) {
var Animation = website.snippet.animationRegistry[k];
- var selector = "[data-snippet-id='"+k+"']";
+ var selector = "";
if (Animation.prototype.selector) {
- selector += ", " + Animation.prototype.selector;
+ if (selector != "") selector += ", "
+ selector += Animation.prototype.selector;
}
if ($target) {
if ($target.is(selector)) selector = $target;
diff --git a/addons/website/static/src/js/website.snippets.editor.js b/addons/website/static/src/js/website.snippets.editor.js
index 891ebc079a87..94035d27544c 100644
--- a/addons/website/static/src/js/website.snippets.editor.js
+++ b/addons/website/static/src/js/website.snippets.editor.js
@@ -36,7 +36,6 @@
// FIXME: call clean_for_save on all snippets of the page, not only modified ones
// important for banner of parallax that changes data automatically.
this.snippets.clean_for_save();
- remove_added_snippet_id();
this._super();
},
});
@@ -49,38 +48,13 @@
})) {
return;
}
- hack_to_add_snippet_id()
- });
-
- // puts $el at the same absolute position as $target
- function hack_to_add_snippet_id () {
- _.each(website.snippet.selector, function (val) {
- $(val[0]).each(function() {
- if (!$(this).is("[data-snippet-id]") && $(this).parents("[data-oe-model]").length) {
- $(this).attr("data-snippet-id", val[1]);
- }
- });
- });
- }
- function remove_added_snippet_id () {
- _.each(website.snippet.selector, function (val) {
- $(val[0]).each(function() {
- if ($(this).data("snippet-id") === val[1]) {
- $(this).removeAttr("data-snippet-id");
- }
- });
- });
- }
-
- $(document).ready(function() {
- hack_to_add_snippet_id();
});
// 'snippet-dropped' is triggered on '#oe_snippets' whith $target as attribute when a snippet is dropped
// 'snippet-activated' is triggered on '#oe_snippets' (and on snippet) when a snippet is activated
if (!website.snippet) website.snippet = {};
- website.snippet.styles = {};
+ website.snippet.templateOptions = {};
website.snippet.selector = [];
website.snippet.BuildingBlock = openerp.Widget.extend({
template: 'website.snippets',
@@ -92,7 +66,6 @@
$("<div id='oe_manipulators'></div>").appendTo('body');
}
this.$active_snipped_id = false;
- hack_to_add_snippet_id();
this.snippets = [];
observer.observe(document.body, {
@@ -159,12 +132,12 @@
.then(function (html) {
var $html = $(html);
- var $styles = $html.find("[data-snippet-style-id]");
+ var $styles = $html.find("[data-snippet-option-id]");
$styles.each(function () {
var $style = $(this);
- var style_id = $style.data('snippet-style-id');
- website.snippet.styles[style_id] = {
- 'snippet-style-id' : style_id,
+ var style_id = $style.data('snippet-option-id');
+ website.snippet.templateOptions[style_id] = {
+ 'snippet-option-id' : style_id,
'selector': $style.data('selector'),
'$el': $style,
'selector-siblings': $style.data('selector-siblings'),
@@ -223,8 +196,8 @@
}
snipped_event_flag = true;
var selector = [];
- for (var k in website.snippet.styles) {
- selector.push(website.snippet.styles[k].selector);
+ for (var k in website.snippet.templateOptions) {
+ selector.push(website.snippet.templateOptions[k].selector);
}
selector = selector.join(",");
@@ -336,15 +309,15 @@
var selector_siblings = [];
var selector_children = [];
var selector_vertical_children = [];
- for (var k in website.snippet.styles) {
- if ($toInsert.is(website.snippet.styles[k].selector)) {
- selector.push(website.snippet.styles[k].selector);
- if (website.snippet.styles[k]['selector-siblings'])
- selector_siblings.push(website.snippet.styles[k]['selector-siblings']);
- if (website.snippet.styles[k]['selector-children'])
- selector_children.push(website.snippet.styles[k]['selector-children']);
- if (website.snippet.styles[k]['selector-vertical-children'])
- selector_vertical_children.push(website.snippet.styles[k]['selector-vertical-children']);
+ for (var k in website.snippet.templateOptions) {
+ if ($toInsert.is(website.snippet.templateOptions[k].selector)) {
+ selector.push(website.snippet.templateOptions[k].selector);
+ if (website.snippet.templateOptions[k]['selector-siblings'])
+ selector_siblings.push(website.snippet.templateOptions[k]['selector-siblings']);
+ if (website.snippet.templateOptions[k]['selector-children'])
+ selector_children.push(website.snippet.templateOptions[k]['selector-children']);
+ if (website.snippet.templateOptions[k]['selector-vertical-children'])
+ selector_vertical_children.push(website.snippet.templateOptions[k]['selector-vertical-children']);
}
}
@@ -418,8 +391,8 @@
$target.data("snippet-editor").drop_and_build_snippet($target);
}
- for (var k in website.snippet.styles) {
- $target.find(website.snippet.styles[k].selector).each(function () {
+ for (var k in website.snippet.templateOptions) {
+ $target.find(website.snippet.templateOptions[k].selector).each(function () {
var $snippet = $(this);
self.create_overlay($snippet);
if ($snippet.data("snippet-editor")) {
@@ -545,7 +518,7 @@
// generate drop zones covering the elements selected by the selector
// we generate overlay drop zones only to get an idea of where the snippet are, the drop
activate_overlay_zones: function(selector){
- var $targets = this.dom_filter(selector || '[data-snippet-id]');
+ var $targets = this.dom_filter(selector);
var self = this;
if (typeof selector !== 'string' && !$targets.length) {
@@ -590,18 +563,18 @@
});
- website.snippet.styleRegistry = {};
- website.snippet.StyleEditor = openerp.Class.extend({
+ website.snippet.options = {};
+ website.snippet.Option = openerp.Class.extend({
// initialisation (don't overwrite)
init: function (BuildingBlock, $target, snippet_id) {
this.BuildingBlock = BuildingBlock;
this.$target = $target;
- var styles = this.$target.data("snippet-style-ids") || {};
+ var styles = this.$target.data("snippet-option-ids") || {};
styles[snippet_id] = this;
- this.$target.data("snippet-style-ids", styles);
+ this.$target.data("snippet-option-ids", styles);
this.$overlay = this.$target.data('overlay');
- this['snippet-style-id'] = snippet_id;
- this.$el = website.snippet.styles[snippet_id].$el.find(">li").clone();
+ this['snippet-option-id'] = snippet_id;
+ this.$el = website.snippet.templateOptions[snippet_id].$el.find(">li").clone();
this.required = this.$el.data("required");
@@ -717,7 +690,7 @@
}
});
- website.snippet.styleRegistry.background = website.snippet.StyleEditor.extend({
+ website.snippet.options.background = website.snippet.Option.extend({
_get_bg: function () {
return this.$target.css("background-image").replace(/url\(['"]*|['"]*\)|^none$/g, "");
},
@@ -782,7 +755,7 @@
this.$el.find('li:has(li[data-class].active)').addClass("active");
}
});
- website.snippet.styleRegistry.slider = website.snippet.StyleEditor.extend({
+ website.snippet.options.slider = website.snippet.Option.extend({
drop_and_build_snippet: function() {
var id = $(".carousel").length;
this.id = "myCarousel" + id;
@@ -869,7 +842,7 @@
}
},
});
- website.snippet.styleRegistry.carousel = website.snippet.styleRegistry.slider.extend({
+ website.snippet.options.carousel = website.snippet.options.slider.extend({
getSize: function () {
this.grid = this._super();
this.grid.size = 8;
@@ -895,8 +868,8 @@
};
this.$target.on('snippet-style-change snippet-style-preview', function (event, style, np) {
var $active = self.$target.find(".item.active");
- if (style['snippet-style-id'] === "size") return;
- if (style['snippet-style-id'] === "background") {
+ if (style['snippet-option-id'] === "size") return;
+ if (style['snippet-option-id'] === "background") {
$active.css("background-image", self.$target.css("background-image"));
}
if (np.$prev) {
@@ -923,7 +896,7 @@
var $clone = this._super();
// choose an other background
- var bg = this.$target.data("snippet-style-ids").background;
+ var bg = this.$target.data("snippet-option-ids").background;
if (!bg) return $clone;
var $styles = bg.$el.find("li[data-class]:not(.oe_custom_bg)");
@@ -946,7 +919,7 @@
},
});
- website.snippet.styleRegistry.resize = website.snippet.StyleEditor.extend({
+ website.snippet.options.marginAndResize = website.snippet.Option.extend({
start: function () {
var self = this;
this._super();
@@ -1111,7 +1084,7 @@
this.change_cursor();
}
});
- website.snippet.styleRegistry["margin-y"] = website.snippet.styleRegistry.resize.extend({
+ website.snippet.options["margin-y"] = website.snippet.options.marginAndResize.extend({
getSize: function () {
this.grid = this._super();
var grid = [0,4,8,16,32,48,64,92,128];
@@ -1125,7 +1098,7 @@
return this.grid;
},
});
- website.snippet.styleRegistry["margin-x"] = website.snippet.styleRegistry.resize.extend({
+ website.snippet.options["margin-x"] = website.snippet.options.marginAndResize.extend({
getSize: function () {
this.grid = this._super();
var width = this.$target.parents(".row:first").first().outerWidth();
@@ -1223,15 +1196,24 @@
this._super(compass, beginClass, current);
},
});
- website.snippet.styleRegistry["resize"] = website.snippet.styleRegistry.resize.extend({
+ website.snippet.options["resize"] = website.snippet.options.marginAndResize.extend({
getSize: function () {
this.grid = this._super();
this.grid.size = 8;
return this.grid;
},
+ start: function () {
+ var self = this;
+ this._super();
+ this.$el.find(".js_size_auto").on('click', function (event){
+ self.$target.css("height", "");
+ self.BuildingBlock.cover_target(self.$overlay, self.$target);
+ return false;
+ });
+ },
});
- website.snippet.styleRegistry.parallax = website.snippet.StyleEditor.extend({
+ website.snippet.options.parallax = website.snippet.Option.extend({
getSize: function () {
this.grid = this._super();
this.grid.size = 8;
@@ -1362,7 +1344,6 @@
children: self.selector_children,
vertical_children: self.selector_vertical_children,
});
- console.log(self);
$("body").addClass('move-important');
@@ -1391,7 +1372,7 @@
this.selector_siblings = [];
this.selector_children = [];
this.selector_vertical_children = [];
- _.each(website.snippet.styles, function (val) {
+ _.each(website.snippet.templateOptions, function (val) {
if (!self.$target.is(val.selector)) {
return;
}
@@ -1399,8 +1380,8 @@
if (val['selector-children']) self.selector_children.push(val['selector-children']);
if (val['selector-vertical-children']) self.selector_vertical_children.push(val['selector-vertical-children']);
- var style = val['snippet-style-id'];
- var Editor = website.snippet.styleRegistry[style] || website.snippet.StyleEditor;
+ var style = val['snippet-option-id'];
+ var Editor = website.snippet.options[style] || website.snippet.Option;
var editor = self.styles[style] = new Editor(self.BuildingBlock, self.$target, style);
$ul.append(editor.$el.addClass("snippet-style-" + style));
});
diff --git a/addons/website/static/src/js/website.tour.banner.js b/addons/website/static/src/js/website.tour.banner.js
index 1d4a0c0f752b..97568e37f354 100644
--- a/addons/website/static/src/js/website.tour.banner.js
+++ b/addons/website/static/src/js/website.tour.banner.js
@@ -47,7 +47,7 @@
},
{
waitFor: '.oe_overlay_options .oe_options:visible',
- element: '#wrap [data-snippet-id=carousel]:first .carousel-caption',
+ element: '#wrap .carousel:first .carousel-caption',
placement: 'top',
title: _("Customize banner's text"),
content: _("Click in the text and start editing it."),
diff --git a/addons/website/views/snippets.xml b/addons/website/views/snippets.xml
index 88f1c7a50bdc..e9cb694a358e 100644
--- a/addons/website/views/snippets.xml
+++ b/addons/website/views/snippets.xml
@@ -827,9 +827,9 @@
</div>
-<div id="snippet_styles" class="hidden">
+<div id="snippet_options" class="hidden">
- <div data-snippet-style-id='blog-style'
+ <div data-snippet-option-id='blog-style'
data-selector="section:not(.carousel):not(.parallax)">
<li class="dropdown-submenu">
<a tabindex="-1" href="#">Style</a>
@@ -839,7 +839,7 @@
</li>
</div>
- <div data-snippet-style-id='background'
+ <div data-snippet-option-id='background'
data-selector="section, .carousel, .parallax">
<li class="dropdown-submenu" data-required="true">
<a tabindex="-1" href="#">Background</a>
@@ -896,7 +896,7 @@
</li>
</div>
- <div data-snippet-style-id='carousel'
+ <div data-snippet-option-id='carousel'
data-selector=".carousel">
<li class="divider"></li>
<li>
@@ -907,7 +907,7 @@
</li>
</div>
- <div data-snippet-style-id='carousel-style'
+ <div data-snippet-option-id='carousel-style'
data-selector="div[data-snippet-id='carousel']">
<li class="dropdown-submenu" data-required="true">
<a tabindex="-1" href="#">Layout</a>
@@ -919,27 +919,30 @@
</li>
</div>
- <div data-snippet-style-id='margin-y'
+ <div data-snippet-option-id='margin-y'
data-selector="section, .row > [class*='col-md-'], .carousel, .parallax, hr">
</div>
- <div data-snippet-style-id='resize'
+ <div data-snippet-option-id='resize'
data-selector="section, .carousel, .parallax"
data-selector-children=".oe_structure, [data-oe-type=html]">
+ <li>
+ <a href="#" class="button js_size_auto">Size Automatic</a>
+ </li>
</div>
- <div data-snippet-style-id='margin-x'
+ <div data-snippet-option-id='margin-x'
data-selector=".row > [class*='col-md-']"
data-selector-vertical-children='.row'>
</div>
- <div data-snippet-style-id='content'
+ <div data-snippet-option-id='content'
data-selector="p, h1, h2, h3, blockquote, .well, .panel"
data-selector-siblings="p, h1, h2, h3, blockquote, .well, .panel"
data-selector-children=".content">
</div>
- <div data-snippet-style-id='parallax'
+ <div data-snippet-option-id='parallax'
data-selector=".parallax">
<li class="dropdown-submenu">
<a tabindex="-1" href="#">Scroll Speed</a>
--
GitLab