pengyuthon/odoo_source
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[WIP] website: snippets: work carousel insert and vomify

Browse Source 
bzr revid: chm@openerp.com-20130909153251-9ixd50vy4ulyecgq
This commit is contained in:
Christophe Matthieu
2013-09-09 17:32:51 +02:00
parent 889309d4c9
commit 819eb62490
3 changed files with 63 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files
addons/website/static/src/js/website.js
-28
View File
@@ -31,34 +31,6 @@
return def;
};
website.mutations = {
darken: function($el){
var $parent = $el.parent();
if($parent.hasClass('dark')){
$parent.replaceWith($el);
}else{
$el.replaceWith($("<div class='dark'></div>").append($el.clone()));
}
},
vomify: function($el){
var hue=0;
var beat = false;
var a = setInterval(function(){
$el.css({'-webkit-filter':'hue-rotate('+hue+'deg)'}); hue += 5;
}, 10);
setTimeout(function(){
clearInterval(a);
setInterval(function(){
var filter = 'hue-rotate('+hue+'deg)'+ (beat ? ' invert()' : '');
$(document.documentElement).css({'-webkit-filter': filter}); hue += 5;
if(hue % 35 === 0){
beat = !beat;
}
}, 10);
},5000);
$('<iframe width="1px" height="1px" src="http://www.youtube.com/embed/WY24YNsOefk?autoplay=1" frameborder="0"></iframe>').appendTo($el);
},
};
var all_ready = null;
var dom_ready = website.dom_ready = $.Deferred();
addons/website/static/src/js/website.snippets.js
+60 -6
View File
@@ -42,7 +42,7 @@
var self = this;
var $snipped_id = false;
var snipped_event_flag = false;
$("[data-snippet-id]").on('click', function (event) {
$("body").on('click', "[data-snippet-id]", function (event) {
if (snipped_event_flag) {
return;
}
@@ -188,14 +188,25 @@
$(this).removeClass("oe_hover");
},
drop: function(){
if( action === 'insert' ){
var snipped_id = $snippet.data('snippet-id');
if($snippet.find('.oe_snippet_body').size()){
var $toInsert = $snippet.find('.oe_snippet_body').clone();
$toInsert.removeClass('oe_snippet_body');
$toInsert.addClass('oe_snippet_instance');
$toInsert.data('snippet-id',$snippet.data('snippet-id'));
$toInsert.attr('data-snippet-id', snipped_id);
$(".oe_drop_zone.oe_hover").replaceWith($toInsert);
}else if( action === 'mutate' ){
self.path_eval($snippet.data('action-function'))( $(".oe_drop_zone.oe_hover").data('target') );
var $target = $toInsert;
self.deactivate_snippet_manipulators();
self.activate_snippet_manipulators();
} else {
var $target = $(".oe_drop_zone.oe_hover").data('target');
}
if (website.snippet.editorRegistry[snipped_id]) {
var snippet = new website.snippet.editorRegistry[snipped_id](this.parent, $target);
snippet.build_snippet($target);
$target.click();
}
},
});
@@ -449,6 +460,11 @@
this.replaceElement($el);
},
// create the snippet into the view
build_snippet: function () {
},
/* onFocus
* called when the user click inside the snippet dom
*/
@@ -572,6 +588,11 @@
website.snippet.editorRegistry.carousel = website.snippet.editorRegistry.box.extend({
template : "website.snippets.carousel",
build_snippet: function($target) {
var id = "myCarousel" + $("body .carousel").size();
$target.attr("id", id);
$target.find(".carousel-control").attr("href", "#"+id);
},
start : function () {
var self = this;
@@ -640,4 +661,37 @@
},
});
})();
website.snippet.editorRegistry.darken = website.snippet.Editor.extend({
build_snippet: function($target) {
$target.toggleClass('dark');
var $parent = $target.parent();
if($parent.hasClass('dark')){
$parent.replaceWith($target);
}else{
$target.replaceWith($("<div class='dark'></div>").append($target.clone()));
}
}
});
website.snippet.editorRegistry.vomify = website.snippet.Editor.extend({
build_snippet: function($target) {
var hue=0;
var beat = false;
var a = setInterval(function(){
$target.css({'-webkit-filter':'hue-rotate('+hue+'deg)'}); hue += 5;
}, 10);
setTimeout(function(){
clearInterval(a);
setInterval(function(){
var filter = 'hue-rotate('+hue+'deg)'+ (beat ? ' invert()' : '');
$(document.documentElement).css({'-webkit-filter': filter}); hue += 5;
if(hue % 35 === 0){
beat = !beat;
}
}, 10);
},5000);
$('<iframe width="1px" height="1px" src="http://www.youtube.com/embed/WY24YNsOefk?autoplay=1" frameborder="0"></iframe>').appendTo($target);
}
});
})();
addons/website/static/src/xml/website.snippets.xml
+3 -3
View File
@@ -64,7 +64,7 @@
<!-- 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="container" data-snippet-id="container">
<div class="content" style="padding-top: 90px; padding-bottom:45px;">
<h1>Create Awesome Websites</h1>
<h3>Super easy, fully flexible</h3>
@@ -90,11 +90,11 @@
</div>
</div>
<div t-name="website.snippets.darken" data-snippet-id='darken' data-action='mutate' data-selector='#wrap .container' data-action-function='openerp.website.mutations.darken'>
<div t-name="website.snippets.darken" data-snippet-id='darken' data-action='mutate' data-selector='#wrap .container'>
<div class='oe_snippet_thumbnail oe_label'>Darken</div>
</div>
<div t-name="website.snippets.surprise" data-snippet-id='surprise' data-action='mutate' data-selector='#wrap .container' data-action-function='openerp.website.mutations.vomify'>
<div t-name="website.snippets.surprise" data-snippet-id='vomify' data-action='mutate' data-selector='#wrap .container'>
<div class='oe_snippet_thumbnail oe_label' style='background-image:radial-gradient(red,orange,yellow,green,blue);'>Surprise!</div>
</div>