odoo
/
odoo
2
0
Fork 0
Code Pull Requests Releases Activity

[IMP] website: snippet: remove data-snippet-id and add auto resize on resising option 

bzr revid: chm@openerp.com-20140303142017-jcb3401wpiuvbc1n
This commit is contained in:
Christophe Matthieu 2014-03-03 15:20:17 +01:00
parent 4a80c007e3
commit 68749a0683
9 changed files with 76 additions and 98 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
addons/website/data/website_demo.xml
View File

@ -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">

5
addons/website/static/src/css/snippets.css
View File

@ -608,8 +608,3 @@
height: 16px;
display: inline-block;
}
[data-snippet-id] {
min-height: 10px;
min-width: 10px;
}

4
addons/website/static/src/css/snippets.sass
View File

@ -483,10 +483,6 @@
height: 16px
display: inline-block
[data-snippet-id]
min-height: 10px
min-width: 10px

9
addons/website/static/src/css/website.css
View File

@ -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;
}

7
addons/website/static/src/css/website.sass
View File

@ -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

5
addons/website/static/src/js/website.snippets.animation.js
View File

@ -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;

115
addons/website/static/src/js/website.snippets.editor.js
View File

@ -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));
});

2
addons/website/static/src/js/website.tour.banner.js
View File

@ -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."),

23
addons/website/views/snippets.xml
View File

@ -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>