[WIP] website: snippets, use template qweb js for snippets
bzr revid: chm@openerp.com-20130906160006-5gdgsv2jq8lz1voz
This commit is contained in:
Christophe Matthieu
parent
4d1cc6a4ed
commit
62aafc07b1
|
|
@ -55,8 +55,7 @@
|
|||
|
||||
$snipped_id = $(event.currentTarget);
|
||||
|
||||
if (typeof $snipped_id.data("snippet-editor") === 'undefined' &&
|
||||
website.snippet.editorRegistry[$snipped_id.data("snippet-id")]) {
|
||||
if (typeof $snipped_id.data("snippet-editor") === 'undefined') {
|
||||
$snipped_id.data("snippet-editor", new website.snippet.editorRegistry[$snipped_id.data("snippet-id")](self, $snipped_id));
|
||||
}
|
||||
self.snippetFocus($snipped_id);
|
||||
|
|
@ -106,18 +105,14 @@
|
|||
start: function() {
|
||||
var self = this;
|
||||
|
||||
$.ajax({
|
||||
type: "GET",
|
||||
url: "/page/website.snippets",
|
||||
dataType: "text",
|
||||
success: function(snippets){
|
||||
self.$el.html(snippets);
|
||||
self.$('.oe_snippet').each(function(index,snippet){
|
||||
self.make_snippet_draggable($(snippet));
|
||||
});
|
||||
},
|
||||
var snippets_template = [];
|
||||
_.each(openerp.qweb.compiled_templates, function (val, key) {
|
||||
if (key.indexOf('website.snippets.Builder.') === 0) {
|
||||
var $snippet = $(openerp.qweb.render(key)).addClass("oe_snippet");
|
||||
self.$el.append($snippet);
|
||||
self.make_snippet_draggable($snippet);
|
||||
}
|
||||
});
|
||||
|
||||
},
|
||||
path_eval: function(path){
|
||||
var obj = window;
|
||||
|
|
@ -455,6 +450,17 @@
|
|||
});
|
||||
|
||||
|
||||
$(document).ready(function () {
|
||||
$("[data-snippet-id]").each(function() {
|
||||
var $snipped_id = $(this);
|
||||
if (typeof $snipped_id.data("snippet-view") === 'undefined' &&
|
||||
website.snippet.viewRegistry[$snipped_id.data("snippet-id")]) {
|
||||
$snipped_id.data("snippet-view", new website.snippet.viewRegistry[$snipped_id.data("snippet-id")]($snipped_id));
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
website.snippet.editorRegistry = {};
|
||||
website.snippet.Editor = openerp.Widget.extend({
|
||||
init: function (parent, dom) {
|
||||
|
|
@ -506,61 +512,75 @@
|
|||
},
|
||||
});
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
website.snippet.editorRegistry.carousel = website.snippet.Editor.extend({
|
||||
template : "website.snippets.EditorBar.carousel",
|
||||
start : function () {
|
||||
var self = this;
|
||||
|
||||
self.$(".js_add").on('click', function (e) {
|
||||
e.preventDefault();
|
||||
var $inner = self.$target.find('.carousel-inner');
|
||||
var cycle = $inner.find('.item').size();
|
||||
$inner.append(openerp.qweb.render('website.carousel'));
|
||||
self.$target.carousel(cycle);
|
||||
});
|
||||
|
||||
|
||||
self.$(".js_remove").on('click', function (e) {
|
||||
e.preventDefault();
|
||||
var $inner = self.$target.find('.carousel-inner');
|
||||
if ($inner.find('.item').size() > 1) {
|
||||
$inner
|
||||
.find('.item.active').remove().end()
|
||||
.find('.item:first').addClass('active');
|
||||
self.$target.carousel(0);
|
||||
}
|
||||
});
|
||||
|
||||
this.$(".js_add").on('click', this.on_add);
|
||||
this.$(".js_remove").on('click', this.on_remove);
|
||||
|
||||
var bg = this.$target.find('.carousel-inner .item.active').css('background-image').replace(/url\((.*)\)/g, '\$1');
|
||||
this.$( 'select[name="carousel-background"] option[value="'+bg+'"], select[name="carousel-background"] option[value="'+bg.replace(window.location.protocol+'//'+window.location.host, '')+'"]')
|
||||
this.$('select[name="carousel-background"] option[value="'+bg+'"], select[name="carousel-background"] option[value="'+bg.replace(window.location.protocol+'//'+window.location.host, '')+'"]')
|
||||
.prop('selected', true);
|
||||
self.$('select[name="carousel-background"]').on('change', function () {
|
||||
self.$target.find('.carousel-inner .item.active').css('background-image', 'url(' + $(this).val() + ')');
|
||||
$(this).val("");
|
||||
|
||||
this.$('select[name="carousel-background"]').on('change', function () {
|
||||
this.$target.find('.carousel-inner .item.active').css('background-image', 'url(' + $(this).val() + ')');
|
||||
});
|
||||
|
||||
var style = false;
|
||||
if (this.$target.find('.carousel-inner .item.active .container .content_image.col-lg-offset-1'))
|
||||
style = 'image_right';
|
||||
if (this.$target.find('.carousel-inner .item.active .container .content_image'))
|
||||
style = 'image_left';
|
||||
this.$('select[name="carousel-style"] option[value="'+style+'"]').prop('selected', true);
|
||||
|
||||
self.$('select[name="carousel-style"]').on('change', function () {
|
||||
var $container = self.$target.find('.carousel-inner .item.active .container');
|
||||
$('.content_image', $container).remove();
|
||||
switch ($(this).val()) {
|
||||
case 'no_image':
|
||||
$('.content', $container).attr("class", "content");
|
||||
break;
|
||||
case 'image_left':
|
||||
$('.content', $container).attr("class", "content col-md-6")
|
||||
.before('<div class="content_image col-md-5"><img class="img-rounded img-responsive" src="/website/static/src/img/china.jpg"></div>');
|
||||
this.$('select[name="carousel-style"]').on('change', this.on_bg_change);
|
||||
},
|
||||
on_add: function (e) {
|
||||
e.preventDefault();
|
||||
var $inner = this.$target.find('.carousel-inner');
|
||||
var cycle = $inner.find('.item').size();
|
||||
$inner.append(openerp.qweb.render('website.carousel'));
|
||||
this.$target.carousel(cycle);
|
||||
},
|
||||
on_remove: function (e) {
|
||||
e.preventDefault();
|
||||
var $inner = this.$target.find('.carousel-inner');
|
||||
if ($inner.find('.item').size() > 1) {
|
||||
$inner
|
||||
.find('.item.active').remove().end()
|
||||
.find('.item:first').addClass('active');
|
||||
this.$target.carousel(0);
|
||||
}
|
||||
},
|
||||
on_bg_change: function (e) {
|
||||
var $container = this.$target.find('.carousel-inner .item.active .container');
|
||||
var img_url = $('.content_image img', $container).attr("src");
|
||||
if (!img_url) {
|
||||
img_url = this.img_url || "/website/static/src/img/china.jpg";
|
||||
} else {
|
||||
this.img_url = img_url;
|
||||
}
|
||||
|
||||
$('.content_image', $container).remove();
|
||||
switch ($(e.currentTarget).val()) {
|
||||
case 'no_image':
|
||||
$('.content', $container).attr("class", "content");
|
||||
break;
|
||||
case 'image_right':
|
||||
$('.content', $container).attr("class", "content col-md-6")
|
||||
.after('<div class="content_image col-md-5 col-lg-offset-1"><img class="img-rounded img-responsive" src="/website/static/src/img/china.jpg"></div>');
|
||||
break;
|
||||
}
|
||||
$(this).val("");
|
||||
});
|
||||
}
|
||||
case 'image_left':
|
||||
$('.content', $container).attr("class", "content col-md-6")
|
||||
.before('<div class="content_image col-md-5"><img class="img-rounded img-responsive" src="'+img_url+'"></div>');
|
||||
break;
|
||||
case 'image_right':
|
||||
$('.content', $container).attr("class", "content col-md-6")
|
||||
.after('<div class="content_image col-md-5 col-lg-offset-1"><img class="img-rounded img-responsive" src="'+img_url+'"></div>');
|
||||
break;
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
})();
|
||||
|
|
|
|||
|
|
@ -5,17 +5,120 @@
|
|||
<a href="#" class="button js_add"><i class="icon icon-plus-sign"></i></a>
|
||||
<a href="#" class="button js_remove"><i class="icon icon-minus-sign"></i></a>
|
||||
<select name="carousel-background">
|
||||
<option value="">Chose an other background</option>
|
||||
<option value="/website/static/src/img/greenfields.jpg">greenfields</option>
|
||||
<option value="/website/static/src/img/landscape.png">landscape</option>
|
||||
<option value="/website/static/src/img/aqua.jpg">aqua</option>
|
||||
</select>
|
||||
<select name="carousel-style">
|
||||
<option value="">Chose an other style</option>
|
||||
<option value="no_image">No image</option>
|
||||
<option value="image_left">Image left</option>
|
||||
<option value="image_right">Image right</option>
|
||||
</select>
|
||||
</t>
|
||||
|
||||
<div t-name="website.snippets.Builder.carousel" data-snippet-id='carousel' data-action='insert' data-selector-siblings='#wrap .container'>
|
||||
<div class='oe_snippet_thumbnail oe_label'>carousel</div>
|
||||
<div id="myCarousel" class="oe_snippet_body carousel slide" data-interval="100000">
|
||||
<!-- Carousel items -->
|
||||
<div class="carousel-inner">
|
||||
<div class="item active" style="background-image: url(/website/static/src/img/greenfields.jpg); background-size: cover;">
|
||||
<div class="container">
|
||||
<div class="content" style="padding-top: 90px; padding-bottom:45px;">
|
||||
<h1>Create Awesome Websites</h1>
|
||||
<h3>Super easy, fully flexible</h3>
|
||||
<a href="/page/website.contactus" class="btn btn-success btn-large mt16">Contact us</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Carousel nav -->
|
||||
<a class="carousel-control left" href="#myCarousel" data-slide="prev"></a>
|
||||
<a class="carousel-control right" href="#myCarousel" data-slide="next"></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div t-name="website.snippets.Builder.darken" data-snippet-id='darken' data-action='mutate' data-selector='#wrap .container' data-action-function='openerp.website.mutations.darken'>
|
||||
<div class='oe_snippet_thumbnail oe_label'>Darken</div>
|
||||
</div>
|
||||
|
||||
<div t-name="website.snippets.Builder.surprise" data-snippet-id='surprise' data-action='mutate' data-selector='#wrap .container' data-action-function='openerp.website.mutations.vomify'>
|
||||
<div class='oe_snippet_thumbnail oe_label' style='background-image:radial-gradient(red,orange,yellow,green,blue);'>Surprise!</div>
|
||||
</div>
|
||||
|
||||
<div t-name="website.snippets.Builder.spacer" data-snippet-id='spacer' data-action='insert' data-selector-siblings='#wrap .container'>
|
||||
<div class='oe_snippet_thumbnail oe_label'>Spacer</div>
|
||||
<div class="oe_snippet_body container mt32"></div>
|
||||
</div>
|
||||
|
||||
<div t-name="website.snippets.Builder.title" data-snippet-id='title' data-action='insert' data-selector-siblings='#wrap .container'>
|
||||
<div class='oe_snippet_thumbnail oe_label'>
|
||||
Main Title
|
||||
</div>
|
||||
<section class="oe_snippet_body container">
|
||||
<div class="row">
|
||||
<div class="col-md-12 text-center">
|
||||
<h1 class="mt64">Welcome To Your New Homepage,</h1>
|
||||
<h2 class="mt32 subheader">where <b><em>everything</em></b> can be customized </h2>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<div t-name="website.snippets.Builder.three-collumns" data-snippet-id='three-collumns' data-action='insert' data-selector-siblings='#wrap .container'>
|
||||
<section class="oe_snippet_body container">
|
||||
<div class="row">
|
||||
<div class="col-md-12 text-center">
|
||||
<h2 class="mt48">Ut enim ad minim veniam</h2>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row mt32">
|
||||
<div class="col-md-4">
|
||||
<img class="img-rounded img-responsive" src="/website/static/src/img/china_thumb.jpg"/>
|
||||
<h4 class="mt16">Cillum Dolore</h4>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
|
||||
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
|
||||
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
|
||||
consequat.</p>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<img class="img-rounded img-responsive" src="/website/static/src/img/desert_thumb.jpg"/>
|
||||
<h4 class="mt16">Mollit Anim</h4>
|
||||
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
|
||||
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
|
||||
proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<img class="img-rounded img-responsive" src="/website/static/src/img/deers_thumb.jpg"/>
|
||||
<h4 class="mt16">Nemo Enim Ipsam</h4>
|
||||
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
|
||||
doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore
|
||||
veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim
|
||||
ipsam voluptatem quia voluptas</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<div t-name="website.snippets.Builder.header-block" data-snippet-id='header-block' data-action='insert' data-selector-siblings='#wrap .container'>
|
||||
<section class="container oe_snippet_body">
|
||||
<div class="row">
|
||||
<div class="col-md-5">
|
||||
<img class="img-rounded img-responsive" src="/website/static/src/img/island.jpg"/>
|
||||
</div>
|
||||
<div class="col-md-6 col-lg-offset-1">
|
||||
<p class="mt16">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
|
||||
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
|
||||
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
|
||||
consequat.</p>
|
||||
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
|
||||
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
|
||||
proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
|
||||
<div class="text-center">
|
||||
<a href="http://www.openerp.com/start" class="btn btn-default mt16 btn-lg btn-primary">Call To <em>Action</em></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
</templates>
|
||||
|
|
|
|||
|
|
@ -156,7 +156,6 @@
|
|||
|
||||
<template id="homepage" page="True">
|
||||
<t t-call="website.layout">
|
||||
<div data-snippet-id="carousel"> TEST <br/> <br/> </div>
|
||||
<section>
|
||||
<div id="myCarousel" data-snippet-id="carousel" class="carousel slide" data-interval="1000000">
|
||||
<!-- Carousel items -->
|
||||
|
|
@ -403,94 +402,6 @@
|
|||
</a>
|
||||
</template>
|
||||
|
||||
<template id="snippets">
|
||||
<div class='oe_snippet' data-snippet-id='darken' data-action='mutate' data-selector='#wrap .container' data-action-function='openerp.website.mutations.darken'>
|
||||
<div class='oe_snippet_thumbnail oe_label'>Darken</div>
|
||||
</div>
|
||||
|
||||
<div class='oe_snippet' data-snippet-id='surprise' data-action='mutate' data-selector='#wrap .container' data-action-function='openerp.website.mutations.vomify'>
|
||||
<div class='oe_snippet_thumbnail oe_label' style='background-image:radial-gradient(red,orange,yellow,green,blue);'>Surprise!</div>
|
||||
</div>
|
||||
|
||||
<div class='oe_snippet' data-snippet-id='spacer' data-action='insert' data-selector-siblings='#wrap .container'>
|
||||
<div class='oe_snippet_thumbnail oe_label'>Spacer</div>
|
||||
<div class="oe_snippet_body container mt32"></div>
|
||||
</div>
|
||||
|
||||
<div class='oe_snippet' data-snippet-id='title' data-action='insert' data-selector-siblings='#wrap .container'>
|
||||
<div class='oe_snippet_thumbnail oe_label'>
|
||||
Main Title
|
||||
</div>
|
||||
<section class="oe_snippet_body container">
|
||||
<div class="row">
|
||||
<div class="col-md-12 text-center">
|
||||
<h1 class="mt64">Welcome To Your New Homepage,</h1>
|
||||
<h2 class="mt32 subheader">where <b><em>everything</em></b> can be customized </h2>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<div class='oe_snippet' data-snippet-id='three-collumns' data-action='insert' data-selector-siblings='#wrap .container'>
|
||||
<section class="oe_snippet_body container">
|
||||
<div class="row">
|
||||
<div class="col-md-12 text-center">
|
||||
<h2 class="mt48">Ut enim ad minim veniam</h2>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row mt32">
|
||||
<div class="col-md-4">
|
||||
<img class="img-rounded img-responsive" src="/website/static/src/img/china_thumb.jpg"/>
|
||||
<h4 class="mt16">Cillum Dolore</h4>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
|
||||
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
|
||||
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
|
||||
consequat.</p>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<img class="img-rounded img-responsive" src="/website/static/src/img/desert_thumb.jpg"/>
|
||||
<h4 class="mt16">Mollit Anim</h4>
|
||||
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
|
||||
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
|
||||
proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<img class="img-rounded img-responsive" src="/website/static/src/img/deers_thumb.jpg"/>
|
||||
<h4 class="mt16">Nemo Enim Ipsam</h4>
|
||||
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
|
||||
doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore
|
||||
veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim
|
||||
ipsam voluptatem quia voluptas</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<div class='oe_snippet' data-snippet-id='header-block' data-action='insert' data-selector-siblings='#wrap .container'>
|
||||
<section class="container oe_snippet_body">
|
||||
<div class="row">
|
||||
<div class="col-md-5">
|
||||
<img class="img-rounded img-responsive" src="/website/static/src/img/island.jpg"/>
|
||||
</div>
|
||||
<div class="col-md-6 col-lg-offset-1">
|
||||
<p class="mt16">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
|
||||
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
|
||||
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
|
||||
consequat.</p>
|
||||
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
|
||||
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
|
||||
proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
|
||||
<div class="text-center">
|
||||
<a href="http://www.openerp.com/start" class="btn btn-default mt16 btn-lg btn-primary">Call To <em>Action</em></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
|
||||
<template id="kanban">
|
||||
<t t-set="step"><t t-esc="step or 0"/></t>
|
||||
<t t-set="scope"><t t-esc="scope or 0"/></t>
|
||||
|
|
|
|||
Loading…
Reference in New Issue