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

[MERGE] website: mutation snippets

Browse Source 
bzr revid: fva@openerp.com-20130823083843-bky4qugrnb8jnidm
This commit is contained in:
Frédéric van der Essen
2013-08-23 10:38:43 +02:00
parent fe45f507a2 678bb7c4a0
commit 84c0d68140
6 changed files with 148 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files
addons/website/static/src/css/editor.css
+10 -3
View File
@@ -1,4 +1,3 @@
@charset "utf-8";
.oe_hidden {
display: none !important;
}
@@ -80,7 +79,6 @@
border-radius: 3px;
margin: 10px;
margin-right: 0px;
cursor: move;
position: relative;
box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.2);
overflow: hidden;
@@ -146,6 +144,16 @@
border-top: dashed 2px rgba(116, 255, 161, 0.72);
}
.oe_hover_zone {
position: absolute;
background: rgba(153, 0, 255, 0.17);
border-radius: 3px;
}
.oe_hover_zone.oe_hover {
background: rgba(0, 255, 133, 0.22);
z-index: 100000;
}
.oe_stop_scrolling {
height: 100%;
overflow: hidden;
@@ -157,7 +165,6 @@
border: 2px solid;
border-radius: 10px;
margin: auto;
position: absolute;
top: 0;
left: 0;
bottom: 0;
addons/website/static/src/css/editor.sass
+9 -2
View File
@@ -71,7 +71,6 @@
border-radius: 3px
margin: 10px
margin-right: 0px
cursor: move
position: relative
box-shadow: 0px 3px 10px rgba(0,0,0,0.2)
overflow: hidden
@@ -128,6 +127,15 @@
&.oe_hover:before
border-top: dashed 2px rgba(116, 255, 161, 0.72)
.oe_hover_zone
position: absolute
background: rgba(153, 0, 255, 0.17)
border-radius: 3px
&.oe_hover
background: rgba(0, 255, 133, 0.22)
z-index: 100000
.oe_stop_scrolling
height: 100%
overflow: hidden
@@ -138,7 +146,6 @@
border: 2px solid
border-radius: 10px
margin: auto
position: absolute
top: 0
left: 0
bottom: 0
addons/website/static/src/css/website.css
+6 -1
View File
@@ -1,4 +1,3 @@
@charset "utf-8";
/* THIS CSS FILE IS FOR WEBSITE THEMING CUSTOMIZATION ONLY
*
* css for editor buttons, openerp widget included in the website and other
@@ -159,3 +158,9 @@ header.navbar-fixed-top {
min-height: 300px;
color: white;
}
.dark {
background: #eff8f8;
padding-top: 32px;
padding-bottom: 32px;
}
addons/website/static/src/css/website.sass
+5
View File
@@ -119,4 +119,9 @@ header.navbar-fixed-top
min-height: 300px
color: white
.dark
background: rgb(239, 248, 248)
padding-top: 32px
padding-bottom: 32px
addons/website/static/src/js/website.js
+106 -18
View File
@@ -307,6 +307,34 @@
}
});
website.mutations = {
darken: function($el){
if($el.parent().hasClass('dark')){
$el.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()' : '');
$('html').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);
},
};
/* ----- SNIPPET SELECTOR ---- */
website.Snippets = openerp.Widget.extend({
template: 'website.snippets',
@@ -327,11 +355,20 @@
});
},
path_eval: function(path){
var obj = window;
path = path.split('.');
do{
obj = obj[path.shift()];
}while(path.length && obj);
return obj;
},
// setup widget and drag and drop
start_snippets: function(){
var self = this;
this.$('.oe_snippet').draggable({
this.$('.oe_snippet[data-action="insert"]').draggable({
helper: 'clone',
appendTo: 'body',
start: function(){
@@ -363,6 +400,32 @@
self.deactivate_drop_zones();
},
});
this.$('.oe_snippet[data-action="mutate"]').draggable({
helper: 'clone',
appendTo: 'body',
start: function(){
var snippet = $(this);
self.activate_hover_zones(snippet.data('selector'));
$('.oe_hover_zone').droppable({
over: function(){
$(".oe_hover_zone.oe_hover").removeClass("oe_hover");
$(this).addClass("oe_hover");
},
out: function(){
$(this).removeClass("oe_hover");
},
drop: function(){
self.path_eval(snippet.data('action-function'))( $(".oe_hover_zone.oe_hover").data('target') );
},
});
},
stop: function(){
self.deactivate_hover_zones();
},
});
},
// A generic drop zone generator. two css selectors can be provided
// selector.childs -> will insert drop zones as direct child of the selected elements
@@ -413,7 +476,7 @@
$zones.remove();
}while(count > 0);
// Cleaning up zones placed between floating or inline elements
// Cleaning up zones placed between floating or inline elements. We do not like these kind of zones.
var $zones = $('.oe_drop_zone');
for( var i = 0, len = $zones.length; i < len; i++ ){
var zone = $zones.eq(i);
@@ -427,11 +490,10 @@
&& (float_next === 'left' || float_next === 'right') ){
zone.remove();
continue;
}else if( !( disp_prev === null
|| disp_next === null
|| disp_prev === 'block'
|| disp_next === 'block'
) ){
}else if( !( disp_prev === null
|| disp_next === null
|| disp_prev === 'block'
|| disp_next === 'block' )){
zone.remove();
continue;
}
@@ -440,6 +502,42 @@
deactivate_drop_zones: function(){
$('.oe_drop_zone').remove();
},
activate_hover_zones: function(selector){
var $targets = $(selector);
function is_visible($el){
return $el.css('display') != 'none'
&& $el.css('opacity') != '0'
&& $el.css('visibility') != 'hidden';
}
// filter out invisible elements
$targets = $targets.filter(function(){ return is_visible($(this)); });
// filter out elements with invisible parents
$targets = $targets.filter(function(){
var parents = $(this).parents().filter(function(){ return !is_visible($(this)); });
return parents.length === 0;
});
var zone_template = "<div class='oe_hover_zone'></div>";
$('.oe_hover_zone').remove();
for(var i = 0, len = $targets.length; i < len; i++){
var $target = $targets.eq(i);
var $zone = $(zone_template);
$zone.css({
'width': $target.outerWidth(),
'height': $target.outerHeight(),
});
$zone.css($target.offset());
$zone.appendTo('body');
$zone.data('target',$target);
}
},
deactivate_hover_zones: function(selector){
$('.oe_hover_zone').remove();
},
toggle: function(){
if(this.$el.hasClass('oe_hidden')){
this.$el.removeClass('oe_hidden');
@@ -447,16 +545,6 @@
this.$el.addClass('oe_hidden');
}
},
snippet_start: function () {
var self = this;
$('.oe_snippet').draggable().click(function(ev) {
self.setup_droppable();
$(".oe_snippet_drop").show();
$('.oe_selected').removeClass('oe_selected');
$(ev.currentTarget).addClass('oe_selected');
});
},
});
function noop() {}
addons/website/views/views.xml
+12 -4
View File
@@ -401,12 +401,20 @@
<template id="snippets">
<div class='oe_snippet' name='Spacer' data-selector-siblings='#wrap .container'>
<div class='oe_snippet' name='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' name='Darken' 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' name='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' name='FooBar' data-selector-siblings='#wrap .container'>
<div class='oe_snippet' name='FooBar' data-action='insert' data-selector-siblings='#wrap .container'>
<div class='oe_snippet_thumbnail oe_label'>
Main Title
</div>
@@ -420,7 +428,7 @@
</section>
</div>
<div class='oe_snippet' name='BarFoo' data-selector-siblings='#wrap .container'>
<div class='oe_snippet' name='BarFoo' data-action='insert' data-selector-siblings='#wrap .container'>
<section class="oe_snippet_body container">
<div class="row">
<div class="span12 text-center">
@@ -462,7 +470,7 @@
</section>
</div>
<div class='oe_snippet' name='Header' data-selector-siblings='#wrap .container'>
<div class='oe_snippet' name='Header' data-action='insert' data-selector-siblings='#wrap .container'>
<section class="container oe_snippet_body">
<div class="row">
<div class="span5">