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

[IMP] snippet colmd: resizing and add col inside a row

Browse Source 
bzr revid: chm@openerp.com-20130912115130-zvqo8nez77919eno
This commit is contained in:
Christophe Matthieu
2013-09-12 13:51:30 +02:00
parent 6dca1c21d6
commit 9b6760d1f6
4 changed files with 170 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files
addons/website/static/src/js/website.editor.js
+2 -2
View File
@@ -245,7 +245,7 @@
defs.push(def);
});
return $.when.apply(null, defs).then(function () {
window.location.href = window.location.href.replace(/unable_editor(=[^&]*)?/, '');
window.location.href = window.location.href.replace(/unable_editor(=[^&]*)?|#.*/g, '');
});
},
saveElement: function ($el) {
@@ -268,7 +268,7 @@
});
},
cancel: function () {
window.location.href = window.location.href.replace(/unable_editor(=[^&]*)?/, '');
window.location.href = window.location.href.replace(/unable_editor(=[^&]*)?|#.*/g, '');
},
});
addons/website/static/src/js/website.snippets.js
+159 -20
View File
@@ -20,10 +20,13 @@
this.snippets.appendTo($(document.body));
return this._super.apply(this, arguments);
},
snippet: function (ev) {
this.snippets.toggle();
},
save: function () {
$('body').trigger("save");
this._super();
},
});
/* ----- SNIPPET SELECTOR ---- */
@@ -42,6 +45,7 @@
website.snippet.BuildingBlock = openerp.Widget.extend({
template: 'website.snippets',
activeSnippets: [],
init: function (parent) {
this.parent = parent;
this._super.apply(this, arguments);
@@ -79,7 +83,7 @@
}
var $target = $(event.currentTarget);
if (self.$active_snipped_id) {
if (self.$active_snipped_id.get(0) == event.currentTarget || self.$active_snipped_id.has($target[0])) {
if (self.$active_snipped_id[0] === $target[0] || $.contains(self.$active_snipped_id, $target[0])) {
var $parent = self.$active_snipped_id.parents("[data-snippet-id]:first");
if ($parent.length) {
$target = $parent;
@@ -524,11 +528,11 @@
});
website.snippet.editorRegistry.container = website.snippet.Editor.extend({
website.snippet.editorRegistry.resize = website.snippet.Editor.extend({
start: function () {
var self = this;
this._super();
var $box = $(openerp.qweb.render("website.snippets.container"));
var $box = $(openerp.qweb.render("website.snippets.resize"));
var resize_values = this.getSize();
if (!resize_values.n) $box.find(".oe_handle.n").remove();
@@ -576,7 +580,7 @@
var resize = resize_values[compass];
if (!resize) return;
var current = 0;
var current = resize[2] || 0;
_.each(resize[0], function (val, key) {
if (self.$target.hasClass(val)) {
if (current)
@@ -589,7 +593,9 @@
self.parent.editor_busy = true;
var xy = event['page'+XY];
var begin = resize[1][current];
var begin = current;
var beginClass = self.$target.attr("class");
var regClass = new RegExp("\\s*" + resize[0][begin].replace(/[-]*[0-9]+/, '[0-9-]+'), 'g');
var cursor = $handle.css("cursor")+'-important';
$("body").addClass(cursor);
@@ -597,23 +603,26 @@
var body_mousemove = function (event){
event.preventDefault();
var dd = event['page'+XY] - xy + begin;
var dd = event['page'+XY] - xy + resize[1][begin];
var next = current+1 === resize[1].length ? current : (current+1);
var prev = current ? (current-1) : 0;
var change = false;
if (dd > (2*resize[1][next] + resize[1][current])/3) {
self.$target.removeClass(resize[0][current]).addClass(resize[0][next]);
self.$target.attr("class",self.$target.attr("class").replace(regClass, ''));
self.$target.addClass(resize[0][next]);
current = next;
change = true;
}
if (prev != current && dd < (2*resize[1][prev] + resize[1][current])/3) {
self.$target.removeClass(resize[0][current]).addClass(resize[0][prev]);
self.$target.attr("class",self.$target.attr("class").replace(regClass, ''));
self.$target.addClass(resize[0][prev]);
current = prev;
change = true;
}
if (change) {
self.on_resize(compass, beginClass, current);
website.snippet.cover_target(self.$overlay, self.$target);
}
};
@@ -624,34 +633,164 @@
$('body').unbind('mouseup', body_mouseup);
$("body").removeClass(cursor);
self.parent.editor_busy = false;
self.onBlur();
self.onFocus();
};
$('body').mouseup(body_mouseup);
});
},
getSize: function () {
var grid = [0,4,8,16,32,48,64,92,128];
return {
this.grid = {
n: [_.map(grid, function (v) {return 'mt'+v;}), grid],
s: [_.map(grid, function (v) {return 'mb'+v;}), grid]
};
return this.grid;
},
/* on_resize
* called when the box is resizing and the class change, before the cover_target
* @compass: resize direction : 'n', 's', 'e', 'w'
* @beginClass: attributes class at the begin
* @current: curent increment in this.grid
*/
on_resize: function (compass, beginClass, current) {
}
});
website.snippet.editorRegistry.colmd = website.snippet.editorRegistry.container.extend({
website.snippet.editorRegistry.colmd = website.snippet.editorRegistry.resize.extend({
getSize: function () {
var size = this._super();
var grid = [1,2,3,4,5,6,7,8,9,10,11,12];
this.grid = this._super();
var width = this.$target.parents(".row:first").first().outerWidth();
size.e = [_.map(grid, function (v) {return 'col-md-'+v;}), _.map(grid, function (v) {return width/12*v;})];
var grid = [0,1,2,3,4,5,6,7,8,9,10,11];
size.w = [_.map(grid, function (v) {return 'col-lg-offset-'+v;}), _.map(grid, function (v) {return width/12*v;})];
return size;
var grid = [0,1,2,3,4,5,6,7,8,9,10,11,12];
this.grid.e = [_.map(grid, function (v) {return 'col-md-'+v;}), _.map(grid, function (v) {return width/12*v;})];
var grid = [-12,-11,-10,-9,-8,-7,-6,-5,-4,-3,-2,-1,0,1,2,3,4,5,6,7,8,9,10,11];
this.grid.w = [_.map(grid, function (v) {return 'col-lg-offset-'+v;}), _.map(grid, function (v) {return width/12*v;}), 12];
return this.grid;
},
resizeHeight: function () {
var height = 0;
var $parent = this.$target.parent();
var $cols = $parent.find('>');
$cols.css('height', '');
if ($cols.length <= 1) {
$parent.css('height', '');
return;
}
var both = '<div class="oe_remove_me" style="overflow: hidden; height: 0;">.</div>';
$parent.append(both).prepend(both);
$cols.each(function () {
if (height < $(this).outerHeight()) {
height = $(this).outerHeight();
}
});
$parent.css('height', height + 'px');
$parent.find('.oe_remove_me').remove();
$cols.css('height', '99%');
},
on_resize: function (compass, beginClass, current) {
if (compass !== 'e' && compass !== 'w' )
return;
var self = this;
var currentClass = this.grid[compass][0][current];
var beginSize = Number(beginClass.match(/col-md-([0-9]+)|$/)[1] || 0) + Number(beginClass.match(/col-lg-offset-([0-9-]+)|$/)[1] || 0);
// don't change the rigth border position when we change the offset (replace col size)
var colsize = compass === 'w' ?
beginSize - Number(currentClass.match(/col-lg-offset-([0-9-]+)|$/)[1] || 0) :
Number(currentClass.match(/col-md-([0-9-]+)|$/)[1] || 0);
if (colsize > 12) colsize = 12;
if (colsize < 1) {
colsize = $.trim(self.$target.html()) === '' ? 0 : 1;
}
this.$target.attr("class",
this.$target.attr("class").replace(/\s*(col-lg-offset-|col-md-)([0-9-]+)/g, '') + ' col-md-' + colsize
);
// calculate col size (0 < size <= 12)
var size = 0;
var $parent = this.$target.parent();
_.each(this.grid.e[0], function (val) {
size += $parent.find('.' + val).length * Number(val.replace(/[^0-9]+/, ''));
});
_.each(this.grid.w[0], function (val) {
size += $parent.find('.' + val).length * Number(val.replace(/[^0-9]+/, ''));
});
function change_empty_col ($col) {
size -= Number($col.attr("class").match(/col-md-([0-9-]+)|$/)[1] || 0);
if (12 - size > 0) {
$col.attr("class", $col.attr("class").replace(/\s*col-md-([0-9-]+)/g, '') + ' col-md-' + (12 - size));
size = 12;
} else if($.trim($col.html()) === '') {
$col.remove();
}
}
function insert_empty_col () {
var cleanClass = beginClass.replace(/\s*(col-lg-offset-|col-md-)([0-9-]+)/g, '');
var $insert = $('<div class="' + cleanClass + '" data-snippet-id="colmd"></div>');
$insert.addClass('col-md-'+(12-size));
size = 12;
return $insert;
}
// change previous or next col if empty
if (compass === 'w') {
var $prev = this.$target.prev();
if ($prev.length) {
change_empty_col($prev);
}
if(size < 12 && size > 0) {
this.$target.before(insert_empty_col());
}
} else {
var $next = this.$target.next();
if ($next.length) {
change_empty_col($next);
}
if(size < 12 && size > 0) {
this.$target.after(insert_empty_col());
}
}
if(size > 12 || size <= 0) {
this.$target.attr("class",
this.$target.attr("class").replace(/\s*col-md-([0-9-]+)/g, '') + ' col-md-' + (size-12)
);
}
// remove empty col
if (this.$target.hasClass("col-md-0")) {
$('body').mouseup();
setTimeout(function () {
self.$overlay.remove();
var $div = self.$target.prev();
if (!$div.length) {
$div = self.$target.next();
}
self.$target.remove();
self.parent.make_active($div);
},0);
}
setTimeout(function () {
self.resizeHeight();
},0);
},
start: function () {
var self = this;
this._super();
this.resizeHeight();
$("body").on("save", function () {
self.$target.parent().css('height', '').find('>').css('height', '');
});
},
});
website.snippet.editorRegistry.carousel = website.snippet.Editor.extend({
website.snippet.editorRegistry.carousel = website.snippet.editorRegistry.resize.extend({
template : "website.snippets.carousel",
build_snippet: function($target) {
var id = "myCarousel" + $("body .carousel").size();
addons/website/static/src/xml/website.snippets.xml
+2 -2
View File
@@ -27,7 +27,7 @@
<!-- Snippets -->
<div t-name="website.snippets.container" data-snippet-id='container'>
<div t-name="website.snippets.resize" data-snippet-id='resize'>
<!-- editor bar to display inside the top edit bar -->
<li class='oe_snippet_options'>
@@ -108,7 +108,7 @@
<div class='oe_snippet_thumbnail oe_label'>Darken</div>
</div>
<div t-name="website.snippets.surprise" data-snippet-id='vomify' data-category='Content' data-action='mutate' data-selector='.container'>
<div t-name="website.snippets.surprise" data-snippet-id='vomify' data-category='content' data-action='mutate' data-selector='.container'>
<div class='oe_snippet_thumbnail oe_label' style='background-image:radial-gradient(red,orange,yellow,green,blue);'>Surprise!</div>
</div>
addons/website/views/views.xml
+7 -7
View File
@@ -184,7 +184,7 @@
</section>
<div>
<section class="container" data-snippet-id="container">
<section class="container" data-snippet-id="resize">
<div class="row">
<div class="col-md-12 text-center" data-snippet-id="colmd">
<h1>Welcome To Your New Homepage,</h1>
@@ -194,7 +194,7 @@
</section>
<div class="dark mt64">
<section class="container" data-snippet-id="container">
<section class="container" data-snippet-id="resize">
<div class="row">
<div class="col-md-5" data-snippet-id="colmd">
<img class="img-rounded img-responsive" src="/website/static/src/img/island.jpg" />
@@ -217,14 +217,14 @@
</section>
</div>
<section class="container">
<section class="container" data-snippet-id="resize">
<div class="row">
<div class="col-md-12 text-center">
<div class="col-md-12 text-center" data-snippet-id="colmd">
<h2 class="mt48">Ut enim ad minim veniam</h2>
</div>
</div>
<div class="row mt32">
<div class="col-md-4">
<div class="col-md-4" data-snippet-id="colmd">
<img class="img-rounded img-responsive" src="/website/static/src/img/china_thumb.jpg" />
<h4 class="mt16">Cillum Dolore</h4>
<p>
@@ -234,7 +234,7 @@
consequat.
</p>
</div>
<div class="col-md-4">
<div class="col-md-4" data-snippet-id="colmd">
<img class="img-rounded img-responsive" src="/website/static/src/img/desert_thumb.jpg"/>
<h4 class="mt16">Mollit Anim</h4>
<p>
@@ -243,7 +243,7 @@
proident, sunt in culpa qui officia deserunt mollit anim id est laborum
</p>
</div>
<div class="col-md-4">
<div class="col-md-4" data-snippet-id="colmd">
<img class="img-rounded img-responsive" src="/website/static/src/img/deers_thumb.jpg"/>
<h4 class="mt16">Nemo Enim Ipsam</h4>
<p>