[WIP] cms: snippets are ugly but working well
bzr revid: fva@openerp.com-20130820164557-kjh87mrtv4tueln8
This commit is contained in:
Frédéric van der Essen
parent
63dd1b0bb7
commit
6284b4b925
|
|
@ -76,7 +76,36 @@
|
|||
height: 100px;
|
||||
border-radius: 3px;
|
||||
margin: 10px;
|
||||
cursor: move;
|
||||
}
|
||||
.oe_snippets .oe_snippet .oe_snippet_body {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.oe_drop_zone {
|
||||
display: block;
|
||||
background: rgba(255, 0, 0, 0.25);
|
||||
border: solid 1px rgba(255, 0, 0, 0.5);
|
||||
height: 30px;
|
||||
margin: -16px 0px;
|
||||
}
|
||||
.oe_drop_zone.oe_inline {
|
||||
display: inline;
|
||||
height: auto;
|
||||
width: 30px;
|
||||
margin: 0px -16px;
|
||||
}
|
||||
.oe_drop_zone.oe_float_left {
|
||||
float: left;
|
||||
}
|
||||
.oe_drop_zone.oe_float_right {
|
||||
float: right;
|
||||
}
|
||||
.oe_drop_zone:hover {
|
||||
background: rgba(255, 0, 0, 0.5);
|
||||
border: solid 1px red;
|
||||
}
|
||||
.oe_drop_zone.oe_hover {
|
||||
background: rgba(0, 255, 0, 0.5);
|
||||
border: solid 1px green;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -68,8 +68,31 @@
|
|||
height: 100px
|
||||
border-radius: 3px
|
||||
margin: 10px
|
||||
cursor: move
|
||||
|
||||
.oe_snippet_body
|
||||
display: none
|
||||
|
||||
.oe_drop_zone
|
||||
display: block
|
||||
background: rgba(255,0,0,0.25)
|
||||
border: solid 1px rgba(255,0,0,0.5)
|
||||
height: 30px
|
||||
margin: -16px 0px
|
||||
&.oe_inline
|
||||
display: inline
|
||||
height: auto
|
||||
width: 30px
|
||||
margin: 0px -16px
|
||||
&.oe_float_left
|
||||
float: left
|
||||
&.oe_float_right
|
||||
float: right
|
||||
&:hover
|
||||
background: rgba(255,0,0,0.5)
|
||||
border: solid 1px red
|
||||
&.oe_hover
|
||||
background: rgba(0,255,0,0.5)
|
||||
border: solid 1px green
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -121,6 +121,7 @@ $(function(){
|
|||
|
||||
this.snippets = new Snippets();
|
||||
this.snippets.appendTo($("body"));
|
||||
window.snippets = this.snippets;
|
||||
|
||||
return $.when(
|
||||
this._super.apply(this, arguments),
|
||||
|
|
@ -335,32 +336,114 @@ $(function(){
|
|||
type: "GET",
|
||||
url: "/page/website.snippets",
|
||||
dataType: "text",
|
||||
success: function(text){
|
||||
self.$el.html(text);
|
||||
success: function(snippets){
|
||||
self.$el.html(snippets);
|
||||
self.start_snippets();
|
||||
},
|
||||
});
|
||||
|
||||
// load snippets
|
||||
// /page/website.snippets
|
||||
},
|
||||
setup_droppable: function () {
|
||||
// setup widget and drag and drop
|
||||
start_snippets: function(){
|
||||
var self = this;
|
||||
$('.oe_snippet_drop').remove();
|
||||
var droppable = '<div class="oe_snippet_drop"></div>';
|
||||
var $zone = $(':not(.oe_snippet) > .container');
|
||||
$zone.after(droppable);//.after(droppable);
|
||||
|
||||
this.$('.oe_snippet').draggable({
|
||||
helper: 'clone',
|
||||
start: function(){
|
||||
var snippet = $(this);
|
||||
|
||||
self.activate_drop_zones({
|
||||
siblings: snippet.data('selector-siblings'),
|
||||
childs: snippet.data('selector-childs')
|
||||
});
|
||||
|
||||
$(".oe_snippet_drop").droppable({
|
||||
hoverClass: 'oe_accepting',
|
||||
drop: function( event, ui ) {
|
||||
console.log(event, ui, "DROP");
|
||||
|
||||
$(event.target).replaceWith($(ui.draggable).html());
|
||||
$('.oe_selected').remove();
|
||||
$('.oe_snippet_drop').remove();
|
||||
$('.oe_drop_zone').droppable({
|
||||
hoverClass: "oe_hover",
|
||||
drop: function(event,ui){
|
||||
$(this).replaceWith(snippet.find('.oe_snippet_body').clone());
|
||||
},
|
||||
});
|
||||
},
|
||||
stop: function(){
|
||||
self.deactivate_drop_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
|
||||
// in case the selected elements have children themselves, dropzones will be interleaved
|
||||
// with them.
|
||||
// selector.siblings -> will insert drop zones after and before selected elements
|
||||
activate_drop_zones: function(selector){
|
||||
var self = this;
|
||||
var child_selector = selector.childs || '';
|
||||
var sibling_selector = selector.siblings || '';
|
||||
var zone_template = "<div class='oe_drop_zone'></div>";
|
||||
|
||||
$('.oe_drop_zone').remove();
|
||||
|
||||
if(child_selector){
|
||||
var $zones = $(child_selector);
|
||||
for( var i = 0, len = $zones.length; i < len; i++ ){
|
||||
$zones.eq(i).find('> *:not(.oe_drop_zone)').after(zone_template);
|
||||
$zones.eq(i).prepend(zone_template);
|
||||
}
|
||||
}
|
||||
|
||||
if(sibling_selector){
|
||||
var $zones = $(sibling_selector);
|
||||
for( var i = 0, len = $zones.length; i < len; i++ ){
|
||||
if($zones.eq(i).prev('.oe_drop_zone').length === 0){
|
||||
$zones.eq(i).before(zone_template);
|
||||
}
|
||||
if($zones.eq(i).next('.oe_drop_zone').length === 0){
|
||||
$zones.eq(i).after(zone_template);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Cleaning up unnecessary zones
|
||||
$('.oe_snippets .oe_drop_zone').remove(); // no zone in the snippet selector ...
|
||||
$('#website-top-view .oe_drop_zone').remove(); // no zone in the top bars ...
|
||||
$('#website-top-edit .oe_drop_zone').remove();
|
||||
do {
|
||||
var count = 0;
|
||||
var $zones = $('.oe_drop_zone + .oe_drop_zone'); // no two consecutive zones
|
||||
count += $zones.length;
|
||||
$zones.remove();
|
||||
|
||||
$zones = $('.oe_drop_zone > .oe_drop_zone').remove(); // no recusrive zones
|
||||
count += $zones.length;
|
||||
$zones.remove();
|
||||
}while(count > 0);
|
||||
|
||||
// Cleaning up zones placed between floating or inline elements
|
||||
var $zones = $('.oe_drop_zone');
|
||||
for( i = 0, len = $zones.length; i < len; i++ ){
|
||||
var zone = $zones.eq(i);
|
||||
var prev = zone.prev();
|
||||
var next = zone.next();
|
||||
var float_prev = zone.prev().css('float') || 'none';
|
||||
var float_next = zone.next().css('float') || 'none';
|
||||
var disp_prev = zone.prev().css('display') || null;
|
||||
var disp_next = zone.next().css('display') || null;
|
||||
if( (float_prev === 'left' || float_prev === 'right')
|
||||
&& (float_next === 'left' || float_next === 'right') ){
|
||||
zone.remove();
|
||||
continue;
|
||||
}else if( !( disp_prev === null
|
||||
|| disp_next === null
|
||||
|| disp_prev === 'block'
|
||||
|| disp_next === 'block'
|
||||
) ){
|
||||
zone.remove();
|
||||
continue;
|
||||
}
|
||||
}
|
||||
},
|
||||
deactivate_drop_zones: function(){
|
||||
$('.oe_drop_zone').remove();
|
||||
},
|
||||
toggle: function(){
|
||||
if(this.$el.hasClass('oe_hidden')){
|
||||
this.$el.removeClass('oe_hidden');
|
||||
|
|
|
|||
|
|
@ -60,7 +60,6 @@
|
|||
|
||||
<t t-name="website.snippets">
|
||||
<div class='oe_snippets oe_hidden'>
|
||||
sadfasdfsadf
|
||||
</div>
|
||||
</t>
|
||||
|
||||
|
|
|
|||
|
|
@ -399,14 +399,25 @@
|
|||
</template>
|
||||
|
||||
<template id="snippets">
|
||||
<div class='oe_snippet' name='FooBar'>
|
||||
|
||||
<div class='oe_snippet' name='FooBar' data-selector-siblings='p,h1,h2,h3,h4,h5'>
|
||||
<div class='oe_snippet_thumbnail'>
|
||||
foobar
|
||||
</div>
|
||||
<div class='oe_snippet_body' data-selector-siblings='[class*="span"]' data-selector-childs=''>
|
||||
<div class='oe_snippet_body'>
|
||||
FOOBAR
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class='oe_snippet' name='BarFoo' data-selector-childs='.container'>
|
||||
<div class='oe_snippet_thumbnail'>
|
||||
barfoo
|
||||
</div>
|
||||
<div class='oe_snippet_body'>
|
||||
BARFOO
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
</data>
|
||||
|
|
|
|||
Loading…
Reference in New Issue