[FIX] website snippet: fix parallax; website.hr.recruitment; split snippet js
bzr revid: chm@openerp.com-20131112162036-neoyem1sus473tqr
This commit is contained in:
Christophe Matthieu
parent
b562406387
commit
4dad2bb177
|
|
@ -362,6 +362,7 @@ footer {
|
|||
|
||||
.parallax {
|
||||
position: relative;
|
||||
background-size: 100%;
|
||||
}
|
||||
.parallax.oe_small {
|
||||
height: 200px;
|
||||
|
|
|
|||
|
|
@ -277,6 +277,7 @@ footer
|
|||
|
||||
.parallax
|
||||
position: relative
|
||||
background-size: 100%
|
||||
&.oe_small
|
||||
height: 200px
|
||||
&.oe_medium
|
||||
|
|
|
|||
|
|
@ -0,0 +1,111 @@
|
|||
(function () {
|
||||
'use strict';
|
||||
|
||||
var website = openerp.website;
|
||||
website.snippet = {};
|
||||
|
||||
website.snippet.start_animation = function () {
|
||||
$("[data-snippet-id]").each(function() {
|
||||
var $snipped_id = $(this);
|
||||
if ( !$snipped_id.parents("#oe_snippets").length &&
|
||||
!$snipped_id.parent("body").length &&
|
||||
!$snipped_id.data("snippet-view") &&
|
||||
website.snippet.animationRegistry[$snipped_id.data("snippet-id")]) {
|
||||
var snippet = new website.snippet.animationRegistry[$snipped_id.data("snippet-id")]($snipped_id);
|
||||
$snipped_id.data("snippet-view", snippet);
|
||||
}
|
||||
});
|
||||
};
|
||||
website.snippet.stop_animation = function () {
|
||||
$("[data-snippet-id]").each(function() {
|
||||
var $snipped_id = $(this);
|
||||
if ($snipped_id.data("snippet-view")) {
|
||||
$snipped_id.data("snippet-view").stop();
|
||||
$snipped_id.data("snippet-view", false);
|
||||
}
|
||||
});
|
||||
};
|
||||
$(document).ready(website.snippet.start_animation);
|
||||
|
||||
|
||||
website.snippet.animationRegistry = {};
|
||||
website.snippet.Animation = openerp.Class.extend({
|
||||
$: function () {
|
||||
return this.$el.find.apply(this.$el, arguments);
|
||||
},
|
||||
init: function (dom) {
|
||||
this.$el = this.$target = $(dom);
|
||||
this.start();
|
||||
},
|
||||
/*
|
||||
* start
|
||||
* This method is called after init
|
||||
*/
|
||||
start: function () {
|
||||
},
|
||||
/*
|
||||
* stop
|
||||
* This method is called to stop the animation (e.g.: when rte is launch)
|
||||
*/
|
||||
stop: function () {
|
||||
},
|
||||
});
|
||||
|
||||
website.snippet.animationRegistry.carousel = website.snippet.Animation.extend({
|
||||
start: function () {
|
||||
this.$target.carousel({interval: false});
|
||||
},
|
||||
});
|
||||
|
||||
website.snippet.animationRegistry.parallax = website.snippet.Animation.extend({
|
||||
start: function () {
|
||||
var self = this;
|
||||
setTimeout(function () {self.set_values();});
|
||||
this.on_scroll = function () {
|
||||
var speed = parseFloat(self.$target.attr("data-scroll-background-ratio") || 0);
|
||||
if (speed == 1) return;
|
||||
var offset = parseFloat(self.$target.attr("data-scroll-background-offset") || 0);
|
||||
var top = offset + window.scrollY * speed;
|
||||
self.$target.css("background-position", "0px " + top + "px");
|
||||
};
|
||||
this.on_resize = function () {
|
||||
self.set_values();
|
||||
};
|
||||
$(window).on("scroll", this.on_scroll);
|
||||
$(window).on("resize", this.on_resize);
|
||||
},
|
||||
stop: function () {
|
||||
$(window).off("scroll", this.on_scroll)
|
||||
.off("resize", this.on_resize);
|
||||
},
|
||||
set_values: function () {
|
||||
var self = this;
|
||||
var speed = parseFloat(self.$target.attr("data-scroll-background-ratio") || 0);
|
||||
|
||||
if (speed == 1) {
|
||||
this.$target.css("background-attachment", "fixed").css("background-position", "0px 0px");
|
||||
return;
|
||||
} else {
|
||||
this.$target.css("background-attachment", "scroll");
|
||||
}
|
||||
|
||||
this.$target.attr("data-scroll-background-offset", 0);
|
||||
var img = new Image();
|
||||
img.onload = function () {
|
||||
var offset = 0;
|
||||
var padding = parseInt($(document.body).css("padding-top"));
|
||||
if (speed < 1) {
|
||||
var inner_offset = self.$target.outerHeight() - this.height / this.width * document.body.clientWidth;
|
||||
var outer_offset = self.$target.offset().top - (document.body.clientHeight - self.$target.outerHeight()) - padding;
|
||||
offset = - outer_offset * speed + inner_offset;
|
||||
} else {
|
||||
offset = - self.$target.offset().top * speed;
|
||||
}
|
||||
self.$target.attr("data-scroll-background-offset", offset);
|
||||
$(window).scroll();
|
||||
};
|
||||
img.src = this.$target.css("background-image").replace(/url\(['"]*|['"]*\)/g, "");
|
||||
}
|
||||
});
|
||||
|
||||
})();
|
||||
|
|
@ -1,21 +1,6 @@
|
|||
(function () {
|
||||
'use strict';
|
||||
|
||||
|
||||
var start_snippet_animation = function () {
|
||||
hack_to_add_snippet_id();
|
||||
$("[data-snippet-id]").each(function() {
|
||||
var $snipped_id = $(this);
|
||||
if ( !$snipped_id.parents("#oe_snippets").length &&
|
||||
typeof $snipped_id.data("snippet-view") === 'undefined' &&
|
||||
website.snippet.animationRegistry[$snipped_id.data("snippet-id")]) {
|
||||
var snippet = new website.snippet.animationRegistry[$snipped_id.data("snippet-id")]($snipped_id);
|
||||
$snipped_id.data("snippet-view", snippet);
|
||||
}
|
||||
});
|
||||
};
|
||||
$(document).ready(start_snippet_animation);
|
||||
|
||||
var website = openerp.website;
|
||||
website.add_template_file('/website/static/src/xml/website.snippets.xml');
|
||||
|
||||
|
|
@ -39,7 +24,8 @@
|
|||
|
||||
this.on('rte:ready', this, function () {
|
||||
self.snippets.$button.removeClass("hidden");
|
||||
start_snippet_animation();
|
||||
website.snippet.stop_animation();
|
||||
website.snippet.start_animation();
|
||||
self.trigger('rte:snippets_ready');
|
||||
});
|
||||
|
||||
|
|
@ -58,7 +44,6 @@
|
|||
|
||||
/* ----- SNIPPET SELECTOR ---- */
|
||||
|
||||
website.snippet = {};
|
||||
var observer = new website.Observer(function (mutations) {
|
||||
if (!_(mutations).find(function (m) {
|
||||
return m.type === 'childList' && m.addedNodes.length > 0;
|
||||
|
|
@ -88,6 +73,10 @@
|
|||
});
|
||||
}
|
||||
|
||||
$(document).ready(function() {
|
||||
hack_to_add_snippet_id();
|
||||
});
|
||||
|
||||
website.snippet.selector = [];
|
||||
website.snippet.BuildingBlock = openerp.Widget.extend({
|
||||
template: 'website.snippets',
|
||||
|
|
@ -219,16 +208,10 @@
|
|||
if ($snipped_id.data("snippet-editor")) {
|
||||
$snipped_id.data("snippet-editor").onBlur();
|
||||
}
|
||||
if ($snipped_id.data("snippet-view")) {
|
||||
$snipped_id.data("snippet-view").onBlurEdit();
|
||||
}
|
||||
}
|
||||
},
|
||||
snippet_focus: function ($snipped_id) {
|
||||
if ($snipped_id) {
|
||||
if ($snipped_id.data("snippet-view")) {
|
||||
$snipped_id.data("snippet-view").onFocusEdit();
|
||||
}
|
||||
if ($snipped_id.data("snippet-editor")) {
|
||||
$snipped_id.data("snippet-editor").onFocus();
|
||||
}
|
||||
|
|
@ -367,9 +350,7 @@
|
|||
if(action === 'insert'){
|
||||
$target = $toInsert;
|
||||
|
||||
if (website.snippet.animationRegistry[snipped_id]) {
|
||||
new website.snippet.animationRegistry[snipped_id]($target);
|
||||
}
|
||||
website.snippet.start_animation();
|
||||
|
||||
self.create_overlay($target);
|
||||
$target.data("snippet-editor").drop_and_build_snippet($target);
|
||||
|
|
@ -547,34 +528,6 @@
|
|||
});
|
||||
|
||||
|
||||
website.snippet.animationRegistry = {};
|
||||
website.snippet.Animation = openerp.Class.extend({
|
||||
$: function () {
|
||||
return this.$el.find.apply(this.$el, arguments);
|
||||
},
|
||||
init: function (dom) {
|
||||
this.$el = this.$target = $(dom);
|
||||
this.start();
|
||||
},
|
||||
/*
|
||||
* start
|
||||
* This method is called after init
|
||||
*/
|
||||
start: function () {
|
||||
},
|
||||
/* onFocusEdit
|
||||
* if they are an editor for this data-snippet-id
|
||||
* Called before onFocus of snippet editor
|
||||
*/
|
||||
onFocusEdit : function () {},
|
||||
|
||||
/* onBlurEdit
|
||||
* if they are an editor for this data-snippet-id
|
||||
* Called after onBlur of snippet editor
|
||||
*/
|
||||
onBlurEdit : function () {},
|
||||
});
|
||||
|
||||
website.snippet.editorRegistry = {};
|
||||
website.snippet.Editor = openerp.Class.extend({
|
||||
init: function (parent, dom) {
|
||||
|
|
@ -797,7 +750,7 @@
|
|||
|
||||
},
|
||||
|
||||
change_background: function (bg, ul_options) {
|
||||
change_background: function (bg, ul_options, callback) {
|
||||
var self = this;
|
||||
this.set_options_background(bg, ul_options);
|
||||
var $ul = this.$editor.find(ul_options);
|
||||
|
|
@ -819,6 +772,9 @@
|
|||
});
|
||||
editor.appendTo($('body'));
|
||||
}
|
||||
if (callback) {
|
||||
callback();
|
||||
}
|
||||
})
|
||||
.on('mouseover', function (event) {
|
||||
if ($(this).data("value")) {
|
||||
|
|
@ -1033,11 +989,6 @@
|
|||
},
|
||||
});
|
||||
|
||||
website.snippet.animationRegistry.carousel = website.snippet.Animation.extend({
|
||||
start: function () {
|
||||
this.$target.carousel({interval: false});
|
||||
},
|
||||
});
|
||||
website.snippet.editorRegistry.carousel = website.snippet.editorRegistry.resize.extend({
|
||||
drop_and_build_snippet: function() {
|
||||
var id = 0;
|
||||
|
|
@ -1211,8 +1162,11 @@
|
|||
|
||||
website.snippet.editorRegistry.parallax = website.snippet.editorRegistry.resize.extend({
|
||||
start : function () {
|
||||
var self = this;
|
||||
this._super();
|
||||
this.change_background(this.$target, 'ul[name="parallax-background"]');
|
||||
this.change_background(this.$target, 'ul[name="parallax-background"]', function () {
|
||||
self.$target.data("snippet-view").set_values();
|
||||
});
|
||||
this.scroll();
|
||||
this.change_size();
|
||||
},
|
||||
|
|
@ -1228,11 +1182,15 @@
|
|||
var speed = $(this).data('value');
|
||||
self.$target.attr('data-scroll-background-ratio', speed);
|
||||
self.$target.data("snippet-view").set_values();
|
||||
return false;
|
||||
});
|
||||
this.$target.data("snippet-view").set_values();
|
||||
},
|
||||
clean_for_save: function () {
|
||||
this._super();
|
||||
this.$target.find(".parallax").css("background-position", '');
|
||||
this.$target.find(".parallax")
|
||||
.css("background-position", '')
|
||||
.removeAttr("data-scroll-background-offset");
|
||||
},
|
||||
change_size: function () {
|
||||
var self = this;
|
||||
|
|
@ -1251,6 +1209,7 @@
|
|||
$li.removeClass("active");
|
||||
$(this).addClass("active");
|
||||
self.$target.data("snippet-view").set_values();
|
||||
return false;
|
||||
})
|
||||
.on('mouseover', function (event) {
|
||||
self.$target.removeClass('oe_big oe_small oe_medium');
|
||||
|
|
@ -1262,39 +1221,6 @@
|
|||
});
|
||||
}
|
||||
});
|
||||
website.snippet.animationRegistry.parallax = website.snippet.Animation.extend({
|
||||
start: function () {
|
||||
var self = this;
|
||||
this.set_values();
|
||||
var on_scroll = function () {
|
||||
var speed = parseFloat(self.$target.attr("data-scroll-background-ratio") || 0);
|
||||
if (speed == 1) return;
|
||||
var offset = parseFloat(self.$target.attr("data-scroll-background-offset") || 0);
|
||||
var top = offset + window.scrollY * speed;
|
||||
self.$target.css("background-position", "0px " + top + "px");
|
||||
};
|
||||
$(window).off("scroll").on("scroll", on_scroll);
|
||||
},
|
||||
set_values: function () {
|
||||
var self = this;
|
||||
var speed = parseFloat(self.$target.attr("data-scroll-background-ratio") || 0);
|
||||
|
||||
if (speed == 1) {
|
||||
this.$target.css("background-attachment", "fixed").css("background-position", "0px 0px");
|
||||
return;
|
||||
} else {
|
||||
this.$target.css("background-attachment", "scroll");
|
||||
}
|
||||
|
||||
this.$target.attr("data-scroll-background-offset", 0);
|
||||
var img = new Image();
|
||||
img.onload = function () {
|
||||
self.$target.attr("data-scroll-background-offset", self.$target.outerHeight() - this.height);
|
||||
$(window).scroll();
|
||||
};
|
||||
img.src = this.$target.css("background-image").replace(/url\(['"]*|['"]*\)/g, "");
|
||||
}
|
||||
});
|
||||
|
||||
/*
|
||||
* data-snippet-id automatically setted
|
||||
|
|
@ -703,8 +703,8 @@
|
|||
<li data-value="0.3"><a>Very Slow</a></li>
|
||||
<li data-value="0.6"><a>Slow</a></li>
|
||||
<li data-value="1"><a>Fixed</a></li>
|
||||
<li data-value="1.5"><a>Fast</a></li>
|
||||
<li data-value="2"><a>Very Fast</a></li>
|
||||
<li data-value="1.4"><a>Fast</a></li>
|
||||
<li data-value="1.7"><a>Very Fast</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<div class="oe_snippet_body parallax oe_small oe_structure"
|
||||
|
|
|
|||
|
|
@ -77,6 +77,7 @@
|
|||
<script type="text/javascript" src="/web/static/src/js/openerpframework.js"></script>
|
||||
|
||||
<script type="text/javascript" src="/website/static/src/js/website.js"></script>
|
||||
<script t-if="not translatable" type="text/javascript" src="/website/static/src/js/website.snippets.animation.js"></script>
|
||||
|
||||
<t t-if="editable">
|
||||
<script type="text/javascript" src="/website/static/lib/ckeditor/ckeditor.js"></script>
|
||||
|
|
@ -98,7 +99,7 @@
|
|||
<script type="text/javascript" src="/website/static/src/js/website.seo.js"></script>
|
||||
<script type="text/javascript" src="/website/static/src/js/website.tour.js"></script>
|
||||
<script type="text/javascript" src="/website/static/src/js/website.tour.basic.js"></script>
|
||||
<script t-if="not translatable" type="text/javascript" src="/website/static/src/js/website.snippets.js"></script>
|
||||
<script t-if="not translatable" type="text/javascript" src="/website/static/src/js/website.snippets.editor.js"></script>
|
||||
<script t-if="not translatable" type="text/javascript" src="/website/static/src/js/website.ace.js"></script>
|
||||
<script t-if="translatable" type="text/javascript" src="/website/static/src/js/website.translator.js"></script>
|
||||
</t>
|
||||
|
|
@ -505,64 +506,67 @@ Sitemap: <t t-esc="url_root"/>sitemap.xml
|
|||
|
||||
<template id="aboutus" name="About us" page="True">
|
||||
<t t-call="website.layout">
|
||||
<div id="wrap" class="oe_structure">
|
||||
<div id="wrap">
|
||||
<div class="oe_structure">
|
||||
|
||||
<section data-snippet-id="title">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<h1 class="text-center">About us</h1>
|
||||
<h3 class="text-muted text-center">Great products for great people</h3>
|
||||
<section data-snippet-id="title">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<h1 class="text-center">About us</h1>
|
||||
<h3 class="text-muted text-center">Great products for great people</h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section data-snippet-id="text-image">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-6 mt32">
|
||||
<p>
|
||||
We are a team of passionated people whose goal is to improve everyone's
|
||||
life through disruptive products. We build great products to solve your
|
||||
business problems.
|
||||
</p>
|
||||
<p>
|
||||
Our products are designed for small to medium companies willing to optimize
|
||||
their performance.
|
||||
</p>
|
||||
</div>
|
||||
<div class="col-md-4 col-md-offset-2 mt16 mb16">
|
||||
<img src="/website/static/src/img/library/business_conference.jpg" class="img img-responsive shadow" alt="Our Team"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="parallax oe_structure mt16 oe_medium mb64" data-scroll-background-ratio="0.6" data-snippet-id="parallax" style="background-image: url(http://localhost:8069/website/static/src/img/parallax/parallax_bg.jpg); background-attachment: scroll; background-position: 0px 0px; ">
|
||||
<section class="mb32 mt16" data-snippet-id="references">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-12 mt16 mb8">
|
||||
<h1 class="text-center">What do customers say about us...</h1>
|
||||
</div>
|
||||
<div class="col-md-4 col-md-offset-1 mt16 mb0">
|
||||
<blockquote data-snippet-id="quote">
|
||||
<p><span style="background-color:#FFFFFF;">Write here a quote from one of your customer. Quotes are are great way to give confidence in your products or services.</span></p>
|
||||
<small><span style="background-color:#FFFFFF;">Author of this quote</span></small>
|
||||
</blockquote>
|
||||
</div>
|
||||
<div class="col-md-4 col-md-offset-2 mt16 mb32">
|
||||
<blockquote data-snippet-id="quote">
|
||||
<p><span style="background-color:#FFFFFF;">OpenERP provides essential platform for our project management. Things are better organized and more visible with it.</span></p>
|
||||
<small><span style="background-color:#FFFFFF;">John Doe, CEO</span></small>
|
||||
</blockquote>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section data-snippet-id="text-image">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-6 mt32">
|
||||
<p>
|
||||
We are a team of passionated people whose goal is to improve everyone's
|
||||
life through disruptive products. We build great products to solve your
|
||||
business problems.
|
||||
</p>
|
||||
<p>
|
||||
Our products are designed for small to medium companies willing to optimize
|
||||
their performance.
|
||||
</p>
|
||||
</div>
|
||||
<div class="col-md-4 col-md-offset-2 mt16 mb16">
|
||||
<img src="/website/static/src/img/library/business_conference.jpg" class="img img-responsive shadow" alt="Our Team"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="parallax oe_structure mt16 oe_medium mb64" data-scroll-background-offset="0" data-scroll-background-ratio="1" data-snippet-id="parallax" style="background-image: url(http://localhost:8069/website/static/src/img/parallax/parallax_bg.jpg); background-attachment: scroll; background-position: 0px 0px; ">
|
||||
<section class="mb32 mt16" data-snippet-id="references">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-12 mt16 mb8">
|
||||
<h1 class="text-center">What do customers say about us...</h1>
|
||||
</div>
|
||||
<div class="col-md-4 col-md-offset-1 mt16 mb0">
|
||||
<blockquote data-snippet-id="quote">
|
||||
<p><span style="background-color:#FFFFFF;">Write here a quote from one of your customer. Quotes are are great way to give confidence in your products or services.</span></p>
|
||||
<small><span style="background-color:#FFFFFF;">Author of this quote</span></small>
|
||||
</blockquote>
|
||||
</div>
|
||||
<div class="col-md-4 col-md-offset-2 mt16 mb32">
|
||||
<blockquote data-snippet-id="quote">
|
||||
<p><span style="background-color:#FFFFFF;">OpenERP provides essential platform for our project management. Things are better organized and more visible with it.</span></p>
|
||||
<small><span style="background-color:#FFFFFF;">John Doe, CEO</span></small>
|
||||
</blockquote>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<div class="oe_structure"></div>
|
||||
</div>
|
||||
</t>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -1,4 +0,0 @@
|
|||
.col-wrap .colsize {
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
|
|
@ -3,26 +3,23 @@
|
|||
<data>
|
||||
<!-- Page -->
|
||||
|
||||
<template id="aboutus" inherit_id="website.aboutus" name="Our Team">
|
||||
<xpath expr="//div[@id='aboutus']" position="inside">
|
||||
<t t-set="head">
|
||||
<link rel='stylesheet' href='/website_hr/static/src/css/website_hr.css'/>
|
||||
<t t-raw="head or ''"/>
|
||||
</t>
|
||||
<div class="clearfix"/>
|
||||
<div class="col-sm-12 text-center" t-if="len(employee_ids)">
|
||||
<h2>Our Team</h2>
|
||||
</div>
|
||||
<div t-foreach="employee_ids" t-as="employee" class="col-sm-3 col-lg-2 mt16 text-center colsize">
|
||||
<t t-call="website.publish_management"><t t-set="object" t-value="employee"/></t>
|
||||
<div class="clearfix"/>
|
||||
<img t-att-src="employee.img('image_medium')" class="img shadow img-rounded"/>
|
||||
<div class="mt8">
|
||||
<strong t-field="employee.name"></strong>
|
||||
<template id="aboutus" inherit_id="website.aboutus" inherit_option_id="website.aboutus" name="Our Team">
|
||||
<xpath expr="//div[@class='oe_structure'][last()]" position="inside">
|
||||
<section class="container">
|
||||
<div class="col-sm-12 text-center" t-if="len(employee_ids)">
|
||||
<h2>Our Team</h2>
|
||||
</div>
|
||||
<div t-field="employee.job_id"/>
|
||||
<div t-field="employee.public_info" class="text-muted mt16"/>
|
||||
</div>
|
||||
<div t-foreach="employee_ids" t-as="employee" class="col-sm-3 col-lg-2 mt16 text-center colsize">
|
||||
<t t-call="website.publish_management"><t t-set="object" t-value="employee"/></t>
|
||||
<div class="clearfix"/>
|
||||
<img t-att-src="employee.img('image_medium')" class="img shadow img-rounded"/>
|
||||
<div class="mt8">
|
||||
<strong t-field="employee.name"></strong>
|
||||
</div>
|
||||
<div t-field="employee.job_id"/>
|
||||
<div t-field="employee.public_info" class="text-muted mt16"/>
|
||||
</div>
|
||||
</section>
|
||||
</xpath>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue