2013-08-29 10:29:56 +00:00
|
|
|
(function () {
|
|
|
|
'use strict';
|
|
|
|
|
|
|
|
var website = openerp.website;
|
2013-09-06 15:04:08 +00:00
|
|
|
website.templates.push('/website/static/src/xml/website.snippets.xml');
|
|
|
|
|
2013-08-29 10:29:56 +00:00
|
|
|
website.EditorBar.include({
|
|
|
|
events: _.extend({}, website.EditorBar.prototype.events, {
|
|
|
|
'click button[data-action=snippet]': 'snippet',
|
|
|
|
}),
|
|
|
|
start: function () {
|
|
|
|
return this._super().then(function () {
|
2013-09-06 15:04:08 +00:00
|
|
|
|
2013-08-29 10:29:56 +00:00
|
|
|
this.$buttons.snippet = this.$('button[data-action=snippet]');
|
2013-09-06 15:04:08 +00:00
|
|
|
|
2013-08-29 10:29:56 +00:00
|
|
|
}.bind(this));
|
|
|
|
},
|
2013-09-06 15:04:08 +00:00
|
|
|
edit: function () {
|
2013-09-09 13:28:00 +00:00
|
|
|
window.snippets = this.snippets = new website.snippet.BuildingBlock(this);
|
|
|
|
this.snippets.appendTo($(document.body));
|
2013-09-11 12:56:32 +00:00
|
|
|
return this._super.apply(this, arguments);
|
2013-09-09 13:28:00 +00:00
|
|
|
},
|
2013-08-29 10:29:56 +00:00
|
|
|
snippet: function (ev) {
|
|
|
|
this.snippets.toggle();
|
|
|
|
},
|
2013-09-12 11:51:30 +00:00
|
|
|
save: function () {
|
|
|
|
$('body').trigger("save");
|
|
|
|
this._super();
|
|
|
|
},
|
2013-08-29 10:29:56 +00:00
|
|
|
});
|
|
|
|
|
|
|
|
/* ----- SNIPPET SELECTOR ---- */
|
2013-09-06 15:04:08 +00:00
|
|
|
|
|
|
|
website.snippet = {};
|
|
|
|
|
2013-09-09 13:28:00 +00:00
|
|
|
// puts $el at the same absolute position as $target
|
2013-09-12 12:30:15 +00:00
|
|
|
website.snippet.cover_target = function ($el, $target){
|
2013-09-09 13:28:00 +00:00
|
|
|
$el.css({
|
|
|
|
'position': 'absolute',
|
|
|
|
'width': $target.outerWidth(),
|
|
|
|
'height': $target.outerHeight(),
|
|
|
|
});
|
|
|
|
$el.css($target.offset());
|
2013-09-11 12:56:32 +00:00
|
|
|
};
|
2013-09-12 17:06:52 +00:00
|
|
|
function hack_to_add_snippet_id () {
|
|
|
|
_.each(website.snippet.selector, function (val) {
|
|
|
|
$(val[0]).each(function() {
|
|
|
|
if ($(this).is("[data-snippet-id='"+ val[1]+"']"))
|
|
|
|
$(this).removeAttr("data-snippet-id");
|
|
|
|
if (!$(this).is("[data-snippet-id]") && $(this).parents("[data-oe-model]").length)
|
|
|
|
$(this).attr("data-snippet-id", val[1]);
|
|
|
|
});
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
2013-09-09 13:28:00 +00:00
|
|
|
|
2013-09-12 17:06:52 +00:00
|
|
|
website.snippet.selector = [];
|
2013-09-06 15:04:08 +00:00
|
|
|
website.snippet.BuildingBlock = openerp.Widget.extend({
|
2013-08-29 10:29:56 +00:00
|
|
|
template: 'website.snippets',
|
2013-09-12 11:51:30 +00:00
|
|
|
activeSnippets: [],
|
2013-09-09 13:28:00 +00:00
|
|
|
init: function (parent) {
|
|
|
|
this.parent = parent;
|
2013-08-29 10:29:56 +00:00
|
|
|
this._super.apply(this, arguments);
|
2013-09-06 15:04:08 +00:00
|
|
|
if(!$('#oe_manipulators').length){
|
|
|
|
$("<div id='oe_manipulators'></div>").appendTo('body');
|
|
|
|
}
|
2013-09-11 12:56:32 +00:00
|
|
|
this.$active_snipped_id = false;
|
|
|
|
this.active = false;
|
|
|
|
this.parent_of_editable_box = "body > :not(:has(#website-top-view)):not(#oe_manipulators):not(#oe_snippets) ";
|
2013-09-12 17:06:52 +00:00
|
|
|
hack_to_add_snippet_id();
|
2013-08-29 10:29:56 +00:00
|
|
|
},
|
|
|
|
start: function() {
|
|
|
|
var self = this;
|
|
|
|
|
2013-09-06 16:00:06 +00:00
|
|
|
var snippets_template = [];
|
|
|
|
_.each(openerp.qweb.compiled_templates, function (val, key) {
|
2013-09-09 13:28:00 +00:00
|
|
|
if (key.indexOf('website.snippets.') === 0) {
|
2013-09-06 16:00:06 +00:00
|
|
|
var $snippet = $(openerp.qweb.render(key)).addClass("oe_snippet");
|
2013-09-16 08:57:55 +00:00
|
|
|
if ($snippet.data("snippet-id")) {
|
2013-09-11 15:20:00 +00:00
|
|
|
self.$el.find('#snippet_' + $snippet.data('category')).append($snippet);
|
2013-09-09 13:28:00 +00:00
|
|
|
self.make_snippet_draggable($snippet);
|
|
|
|
}
|
2013-09-06 16:00:06 +00:00
|
|
|
}
|
2013-08-29 10:29:56 +00:00
|
|
|
});
|
2013-09-09 13:28:00 +00:00
|
|
|
|
|
|
|
this.bind_selected_manipulator();
|
2013-09-11 12:56:32 +00:00
|
|
|
this.bind_snippet_click_editor();
|
|
|
|
},
|
2013-09-09 13:28:00 +00:00
|
|
|
|
2013-09-11 12:56:32 +00:00
|
|
|
bind_snippet_click_editor: function () {
|
|
|
|
var self = this;
|
|
|
|
var snipped_event_flag = false;
|
|
|
|
$("body").on('click', "[data-snippet-id]", function (event) {
|
|
|
|
if (!self.active || snipped_event_flag) {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
var $target = $(event.currentTarget);
|
|
|
|
if (self.$active_snipped_id) {
|
2013-09-12 11:51:30 +00:00
|
|
|
if (self.$active_snipped_id[0] === $target[0] || $.contains(self.$active_snipped_id, $target[0])) {
|
2013-09-11 12:56:32 +00:00
|
|
|
var $parent = self.$active_snipped_id.parents("[data-snippet-id]:first");
|
|
|
|
if ($parent.length) {
|
|
|
|
$target = $parent;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
snipped_event_flag = true;
|
|
|
|
setTimeout(function () {snipped_event_flag = false;}, 0);
|
|
|
|
self.make_active($target);
|
|
|
|
});
|
2013-09-11 13:37:25 +00:00
|
|
|
$("body > :not(:has(#website-top-view)):not(#oe_manipulators)").on('click', function (ev) {
|
|
|
|
if (!snipped_event_flag && self.$active_snipped_id && !self.$active_snipped_id.parents("[data-snippet-id]:first")) {
|
2013-09-11 12:56:32 +00:00
|
|
|
self.make_active(false);
|
|
|
|
}
|
|
|
|
});
|
|
|
|
},
|
|
|
|
snippet_blur: function ($snipped_id) {
|
|
|
|
if ($snipped_id) {
|
|
|
|
if ($snipped_id.data("snippet-editor")) {
|
|
|
|
$snipped_id.data("snippet-editor").onBlur();
|
|
|
|
}
|
|
|
|
if ($snipped_id.data("snippet-view")) {
|
|
|
|
$snipped_id.data("snippet-view").onBlurEdit();
|
|
|
|
}
|
|
|
|
}
|
2013-08-29 10:29:56 +00:00
|
|
|
},
|
2013-09-11 12:56:32 +00:00
|
|
|
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();
|
|
|
|
}
|
|
|
|
}
|
|
|
|
},
|
|
|
|
make_active: function ($snipped_id) {
|
|
|
|
if ($snipped_id && this.$active_snipped_id && this.$active_snipped_id.get(0) === $snipped_id.get(0)) {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
if (this.$active_snipped_id) {
|
|
|
|
this.snippet_blur(this.$active_snipped_id);
|
|
|
|
}
|
|
|
|
if ($snipped_id) {
|
|
|
|
this.$active_snipped_id = $snipped_id;
|
|
|
|
this.create_overlay(this.$active_snipped_id);
|
|
|
|
this.snippet_focus($snipped_id);
|
|
|
|
} else {
|
|
|
|
self.$active_snipped_id = false;
|
|
|
|
}
|
|
|
|
},
|
|
|
|
create_overlay: function ($snipped_id) {
|
|
|
|
if (typeof $snipped_id.data("snippet-editor") === 'undefined') {
|
|
|
|
this.activate_overlay_zones($snipped_id);
|
|
|
|
var editor = website.snippet.editorRegistry[$snipped_id.data("snippet-id")] || website.snippet.Editor;
|
|
|
|
$snipped_id.data("snippet-editor", new editor(this, $snipped_id));
|
|
|
|
}
|
2013-09-11 15:20:00 +00:00
|
|
|
website.snippet.cover_target($snipped_id.data('overlay'), $snipped_id);
|
2013-09-11 12:56:32 +00:00
|
|
|
},
|
|
|
|
|
2013-08-29 10:29:56 +00:00
|
|
|
path_eval: function(path){
|
|
|
|
var obj = window;
|
|
|
|
path = path.split('.');
|
|
|
|
do{
|
|
|
|
obj = obj[path.shift()];
|
|
|
|
}while(path.length && obj);
|
|
|
|
return obj;
|
|
|
|
},
|
|
|
|
|
2013-09-09 13:28:00 +00:00
|
|
|
bind_selected_manipulator: function () {
|
2013-09-11 12:56:32 +00:00
|
|
|
var self = this;
|
2013-09-09 13:28:00 +00:00
|
|
|
var $selected_target = null;
|
|
|
|
$("body").mouseover(function (event){
|
2013-09-11 12:56:32 +00:00
|
|
|
if (!self.active) {
|
|
|
|
return;
|
|
|
|
}
|
2013-09-09 13:28:00 +00:00
|
|
|
var $target = $(event.srcElement).parents("[data-snippet-id]:first");
|
2013-09-12 14:53:02 +00:00
|
|
|
if($target.length && !self.editor_busy) {
|
|
|
|
if($selected_target != $target){
|
2013-09-16 08:25:33 +00:00
|
|
|
if($selected_target && $selected_target.data('overlay')){
|
2013-09-12 14:53:02 +00:00
|
|
|
$selected_target.data('overlay').removeClass('oe_selected');
|
|
|
|
}
|
|
|
|
$selected_target = $target;
|
|
|
|
self.create_overlay($target);
|
|
|
|
$target.data('overlay').addClass('oe_selected');
|
2013-09-09 13:28:00 +00:00
|
|
|
}
|
2013-09-16 08:25:33 +00:00
|
|
|
} else if($selected_target && $selected_target.data('overlay')) {
|
2013-09-12 14:53:02 +00:00
|
|
|
$selected_target.data('overlay').removeClass('oe_selected');
|
2013-09-09 13:28:00 +00:00
|
|
|
}
|
|
|
|
});
|
|
|
|
},
|
|
|
|
|
2013-09-06 15:04:08 +00:00
|
|
|
// activate drag and drop for the snippets in the snippet toolbar
|
|
|
|
make_snippet_draggable: function($snippet){
|
2013-08-29 10:29:56 +00:00
|
|
|
var self = this;
|
|
|
|
|
2013-09-06 15:04:08 +00:00
|
|
|
$snippet.draggable({
|
2013-08-29 10:29:56 +00:00
|
|
|
helper: 'clone',
|
|
|
|
zIndex: '1000',
|
|
|
|
appendTo: 'body',
|
2013-09-13 09:35:18 +00:00
|
|
|
cursor: "move",
|
2013-08-29 10:29:56 +00:00
|
|
|
start: function(){
|
2013-09-16 08:57:55 +00:00
|
|
|
var action = $snippet.find('.oe_snippet_body').size() ? 'insert' : 'mutate';
|
2013-08-29 10:29:56 +00:00
|
|
|
if( action === 'insert'){
|
2013-09-16 08:57:55 +00:00
|
|
|
if (!$snippet.data('selector-siblings') && !$snippet.data('selector-childs') && !$snippet.data('selector-vertical-childs')) {
|
|
|
|
console.debug($snippet.data("snippet-id") + " have oe_snippet_body class and have not for insert action"+
|
|
|
|
"data-selector-siblings, data-selector-childs or data-selector-vertical-childs tag for mutate action");
|
|
|
|
return;
|
|
|
|
}
|
2013-08-29 10:29:56 +00:00
|
|
|
self.activate_insertion_zones({
|
2013-09-06 15:04:08 +00:00
|
|
|
siblings: $snippet.data('selector-siblings'),
|
2013-09-13 10:19:11 +00:00
|
|
|
childs: $snippet.data('selector-childs'),
|
|
|
|
vertical_childs: $snippet.data('selector-vertical-childs')
|
2013-08-29 10:29:56 +00:00
|
|
|
});
|
2013-09-11 12:56:32 +00:00
|
|
|
|
2013-09-16 08:57:55 +00:00
|
|
|
} else if( action === 'mutate' ){
|
|
|
|
if (!$snippet.data('selector')) {
|
|
|
|
console.debug($snippet.data("snippet-id") + " have not oe_snippet_body class and have not data-selector tag");
|
|
|
|
return;
|
|
|
|
}
|
2013-09-11 12:56:32 +00:00
|
|
|
var $targets = self.activate_overlay_zones($snippet.data('selector'));
|
|
|
|
$targets.each(function(){
|
|
|
|
var $clone = $(this).data('overlay').clone();
|
|
|
|
$clone.addClass("oe_drop_zone").data('target', $(this));
|
|
|
|
$(this).data('overlay').after($clone);
|
|
|
|
});
|
|
|
|
|
2013-08-29 10:29:56 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
$('.oe_drop_zone').droppable({
|
|
|
|
over: function(){
|
|
|
|
// FIXME: stupid hack to prevent multiple droppable to activate at once ...
|
|
|
|
// it's not even working properly but it's better than nothing.
|
|
|
|
$(".oe_drop_zone.oe_hover").removeClass("oe_hover");
|
|
|
|
$(this).addClass("oe_hover");
|
|
|
|
},
|
|
|
|
out: function(){
|
|
|
|
$(this).removeClass("oe_hover");
|
|
|
|
},
|
|
|
|
drop: function(){
|
2013-09-09 15:32:51 +00:00
|
|
|
var snipped_id = $snippet.data('snippet-id');
|
2013-09-10 12:31:01 +00:00
|
|
|
|
|
|
|
if (!$(".oe_drop_zone.oe_hover").length) {
|
|
|
|
return false;
|
|
|
|
}
|
|
|
|
|
2013-09-11 12:56:32 +00:00
|
|
|
var $target = false;
|
2013-09-16 08:57:55 +00:00
|
|
|
if(action === 'insert'){
|
2013-09-06 15:04:08 +00:00
|
|
|
var $toInsert = $snippet.find('.oe_snippet_body').clone();
|
|
|
|
$toInsert.removeClass('oe_snippet_body');
|
2013-09-09 15:32:51 +00:00
|
|
|
$toInsert.attr('data-snippet-id', snipped_id);
|
2013-09-13 11:53:05 +00:00
|
|
|
$(".oe_drop_zone.oe_hover").first().after($toInsert);
|
2013-09-11 12:56:32 +00:00
|
|
|
$target = $toInsert;
|
2013-09-12 17:06:52 +00:00
|
|
|
hack_to_add_snippet_id();
|
2013-09-16 08:25:33 +00:00
|
|
|
|
|
|
|
if (website.snippet.animationRegistry[snipped_id]) {
|
|
|
|
new website.snippet.animationRegistry[snipped_id]($target);
|
|
|
|
}
|
|
|
|
|
|
|
|
self.create_overlay($target);
|
|
|
|
$target.data("snippet-editor").build_snippet($target);
|
|
|
|
|
2013-09-09 15:32:51 +00:00
|
|
|
} else {
|
2013-09-13 11:53:05 +00:00
|
|
|
$target = $(".oe_drop_zone.oe_hover").first().data('target');
|
2013-09-09 15:32:51 +00:00
|
|
|
|
2013-09-11 12:56:32 +00:00
|
|
|
self.create_overlay($target);
|
2013-09-16 08:25:33 +00:00
|
|
|
if (website.snippet.editorRegistry[snipped_id]) {
|
|
|
|
var snippet = new website.snippet.editorRegistry[snipped_id](self, $target);
|
|
|
|
snippet.build_snippet($target);
|
|
|
|
}
|
2013-08-29 10:29:56 +00:00
|
|
|
}
|
2013-09-12 17:06:52 +00:00
|
|
|
|
2013-09-16 08:25:33 +00:00
|
|
|
$('.oe_drop_zone').remove();
|
|
|
|
|
|
|
|
setTimeout(function () {self.make_active($target);},0);
|
2013-08-29 10:29:56 +00:00
|
|
|
},
|
|
|
|
});
|
|
|
|
},
|
|
|
|
stop: function(){
|
2013-09-11 12:56:32 +00:00
|
|
|
$('.oe_drop_zone').droppable('destroy').remove();
|
2013-08-29 10:29:56 +00:00
|
|
|
},
|
|
|
|
});
|
2013-09-06 15:04:08 +00:00
|
|
|
},
|
2013-08-29 10:29:56 +00:00
|
|
|
|
2013-09-06 15:04:08 +00:00
|
|
|
// return the original snippet in the editor bar from a snippet id (string)
|
|
|
|
get_snippet_from_id: function(id){
|
|
|
|
return $('.oe_snippet').filter(function(){
|
|
|
|
return $(this).data('snippet-id') === id;
|
|
|
|
}).first();
|
2013-08-29 10:29:56 +00:00
|
|
|
},
|
2013-09-06 15:04:08 +00:00
|
|
|
|
2013-08-29 10:29:56 +00:00
|
|
|
// Create element insertion drop zones. 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_insertion_zones: function(selector){
|
|
|
|
var self = this;
|
2013-09-14 22:13:01 +00:00
|
|
|
var child_selector = selector.childs;
|
2013-09-13 10:19:11 +00:00
|
|
|
var sibling_selector = selector.siblings ? this.parent_of_editable_box + (selector.siblings).split(",").join(this.parent_of_editable_box) : false;
|
|
|
|
var vertical_child_selector = selector.vertical_childs ? this.parent_of_editable_box + (selector.vertical_childs).split(",").join(this.parent_of_editable_box) : false;
|
|
|
|
|
2013-08-29 10:29:56 +00:00
|
|
|
var zone_template = "<div class='oe_drop_zone oe_insert'></div>";
|
|
|
|
|
|
|
|
if(child_selector){
|
2013-09-13 10:19:11 +00:00
|
|
|
$(child_selector).each(function (){
|
|
|
|
var $zone = $(this);
|
|
|
|
$zone.find('> *:not(.oe_drop_zone):visible').after(zone_template);
|
|
|
|
$zone.prepend(zone_template);
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
if(vertical_child_selector){
|
|
|
|
$(vertical_child_selector).each(function (){
|
|
|
|
var $zone = $(this);
|
|
|
|
var $template = $(zone_template).addClass("oe_vertical").css('height', $zone.outerHeight()+'px');
|
|
|
|
$zone.find('> *:not(.oe_drop_zone):visible').after($template);
|
|
|
|
$zone.prepend($template.clone());
|
|
|
|
});
|
2013-08-29 10:29:56 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
if(sibling_selector){
|
2013-09-13 10:19:11 +00:00
|
|
|
$(sibling_selector).each(function (){
|
|
|
|
var $zone = $(this);
|
|
|
|
if($zone.prev('.oe_drop_zone:visible').length === 0){
|
|
|
|
$zone.before(zone_template);
|
2013-08-29 10:29:56 +00:00
|
|
|
}
|
2013-09-13 10:19:11 +00:00
|
|
|
if($zone.next('.oe_drop_zone:visible').length === 0){
|
|
|
|
$zone.after(zone_template);
|
2013-08-29 10:29:56 +00:00
|
|
|
}
|
2013-09-13 10:19:11 +00:00
|
|
|
});
|
2013-08-29 10:29:56 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
var count;
|
|
|
|
do {
|
|
|
|
count = 0;
|
2013-09-06 15:04:08 +00:00
|
|
|
var $zones = $('.oe_drop_zone + .oe_drop_zone'); // no two consecutive zones
|
2013-08-29 10:29:56 +00:00
|
|
|
count += $zones.length;
|
|
|
|
$zones.remove();
|
|
|
|
|
|
|
|
$zones = $('.oe_drop_zone > .oe_drop_zone').remove(); // no recusrive zones
|
|
|
|
count += $zones.length;
|
|
|
|
$zones.remove();
|
2013-09-13 10:19:11 +00:00
|
|
|
} while (count > 0);
|
2013-08-29 10:29:56 +00:00
|
|
|
|
|
|
|
// Cleaning up zones placed between floating or inline elements. We do not like these kind of zones.
|
2013-09-13 10:19:11 +00:00
|
|
|
var $zones = $('.oe_drop_zone:not(.oe_vertical)');
|
|
|
|
$zones.each(function (){
|
|
|
|
var zone = $(this);
|
2013-08-29 10:29:56 +00:00
|
|
|
var prev = zone.prev();
|
|
|
|
var next = zone.next();
|
2013-09-06 15:04:08 +00:00
|
|
|
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;
|
2013-08-29 10:29:56 +00:00
|
|
|
if( (float_prev === 'left' || float_prev === 'right')
|
|
|
|
&& (float_next === 'left' || float_next === 'right') ){
|
|
|
|
zone.remove();
|
2013-09-13 10:19:11 +00:00
|
|
|
return;
|
2013-08-29 10:29:56 +00:00
|
|
|
}else if( !( disp_prev === null
|
|
|
|
|| disp_next === null
|
|
|
|
|| disp_prev === 'block'
|
|
|
|
|| disp_next === 'block' )){
|
|
|
|
zone.remove();
|
|
|
|
}
|
2013-09-13 10:19:11 +00:00
|
|
|
});
|
2013-08-29 10:29:56 +00:00
|
|
|
},
|
|
|
|
|
2013-09-06 15:04:08 +00:00
|
|
|
// generate drop zones covering the elements selected by the selector
|
2013-09-11 12:56:32 +00:00
|
|
|
// we generate overlay drop zones only to get an idea of where the snippet are, the drop
|
2013-08-29 10:29:56 +00:00
|
|
|
activate_overlay_zones: function(selector){
|
2013-09-11 12:56:32 +00:00
|
|
|
selector = selector || '[data-snippet-id]';
|
|
|
|
if (typeof selector === 'string')
|
2013-09-16 08:57:55 +00:00
|
|
|
selector = this.parent_of_editable_box + selector.split(",").join(", " + this.parent_of_editable_box);
|
2013-09-11 12:56:32 +00:00
|
|
|
|
2013-08-29 10:29:56 +00:00
|
|
|
var $targets = $(selector);
|
2013-09-06 15:04:08 +00:00
|
|
|
|
2013-08-29 10:29:56 +00:00
|
|
|
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;
|
|
|
|
});
|
2013-09-06 15:04:08 +00:00
|
|
|
|
2013-09-11 12:56:32 +00:00
|
|
|
$targets.each(function () {
|
|
|
|
var $target = $(this);
|
|
|
|
if (!$target.data('overlay')) {
|
2013-09-12 14:53:02 +00:00
|
|
|
var $zone = $(openerp.qweb.render('website.snippet_overlay'));
|
2013-09-11 12:56:32 +00:00
|
|
|
$zone.appendTo('#oe_manipulators');
|
|
|
|
$zone.data('target',$target);
|
|
|
|
$target.data('overlay',$zone);
|
|
|
|
|
|
|
|
$target.on("DOMNodeInserted DOMNodeRemoved DOMSubtreeModified", function () {
|
|
|
|
website.snippet.cover_target($zone, $target);
|
|
|
|
});
|
|
|
|
}
|
|
|
|
website.snippet.cover_target($target.data('overlay'), $target);
|
2013-09-06 15:04:08 +00:00
|
|
|
});
|
2013-09-11 12:56:32 +00:00
|
|
|
return $targets;
|
2013-08-29 10:29:56 +00:00
|
|
|
},
|
2013-09-11 12:56:32 +00:00
|
|
|
|
2013-08-29 10:29:56 +00:00
|
|
|
toggle: function(){
|
2013-09-11 12:56:32 +00:00
|
|
|
this.active = !this.active;
|
|
|
|
if(this.active){
|
2013-08-30 07:09:06 +00:00
|
|
|
this.$el.removeClass('hide');
|
2013-09-11 12:56:32 +00:00
|
|
|
this.activate_overlay_zones();
|
|
|
|
} else {
|
2013-08-30 07:09:06 +00:00
|
|
|
this.$el.addClass('hide');
|
2013-08-29 10:29:56 +00:00
|
|
|
}
|
|
|
|
},
|
|
|
|
});
|
2013-09-06 15:04:08 +00:00
|
|
|
|
|
|
|
|
2013-09-09 13:28:00 +00:00
|
|
|
website.snippet.animationRegistry = {};
|
|
|
|
website.snippet.Animation = openerp.Class.extend({
|
2013-09-06 15:04:08 +00:00
|
|
|
$: function () {
|
|
|
|
return this.$el.find.apply(this.$el, arguments);
|
|
|
|
},
|
|
|
|
init: function (dom) {
|
2013-09-12 17:06:52 +00:00
|
|
|
this.$el = this.$target = $(dom);
|
2013-09-16 09:17:01 +00:00
|
|
|
this.start();
|
|
|
|
},
|
|
|
|
/*
|
|
|
|
* start
|
|
|
|
* This method is called after init
|
|
|
|
*/
|
|
|
|
start: function () {
|
2013-09-06 15:04:08 +00:00
|
|
|
},
|
|
|
|
/* onFocusEdit
|
|
|
|
* if they are an editor for this snippet-id
|
|
|
|
* Called before onFocus of snippet editor
|
|
|
|
*/
|
|
|
|
onFocusEdit : function () {},
|
|
|
|
|
|
|
|
/* onBlurEdit
|
|
|
|
* if they are an editor for this snippet-id
|
|
|
|
* Called after onBlur of snippet editor
|
|
|
|
*/
|
|
|
|
onBlurEdit : function () {},
|
|
|
|
|
|
|
|
/* getOptions
|
2013-09-10 10:21:40 +00:00
|
|
|
* Read data saved for your snippet animation.
|
2013-09-06 15:04:08 +00:00
|
|
|
*/
|
|
|
|
getOptions: function () {
|
|
|
|
var options = this.$el.data("snippet-options");
|
|
|
|
return options ? JSON.parse(options) : undefined;
|
|
|
|
},
|
|
|
|
});
|
|
|
|
|
2013-09-06 16:00:06 +00:00
|
|
|
$(document).ready(function () {
|
2013-09-12 17:06:52 +00:00
|
|
|
hack_to_add_snippet_id();
|
2013-09-06 16:00:06 +00:00
|
|
|
$("[data-snippet-id]").each(function() {
|
|
|
|
var $snipped_id = $(this);
|
|
|
|
if (typeof $snipped_id.data("snippet-view") === 'undefined' &&
|
2013-09-09 13:28:00 +00:00
|
|
|
website.snippet.animationRegistry[$snipped_id.data("snippet-id")]) {
|
|
|
|
$snipped_id.data("snippet-view", new website.snippet.animationRegistry[$snipped_id.data("snippet-id")]($snipped_id));
|
2013-09-06 16:00:06 +00:00
|
|
|
}
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
|
2013-09-06 15:04:08 +00:00
|
|
|
website.snippet.editorRegistry = {};
|
2013-09-10 10:21:40 +00:00
|
|
|
website.snippet.Editor = openerp.Class.extend({
|
2013-09-06 15:04:08 +00:00
|
|
|
init: function (parent, dom) {
|
|
|
|
this.parent = parent;
|
2013-09-11 12:56:32 +00:00
|
|
|
this.$target = $(dom);
|
|
|
|
this.$overlay = this.$target.data('overlay');
|
2013-09-10 10:21:40 +00:00
|
|
|
this._readXMLData();
|
2013-09-06 15:04:08 +00:00
|
|
|
this.start();
|
|
|
|
},
|
|
|
|
|
2013-09-10 10:21:40 +00:00
|
|
|
/*
|
|
|
|
* _readXMLData
|
|
|
|
* Read data XML and set value into:
|
|
|
|
* this.$el :
|
|
|
|
* all xml data
|
2013-09-11 12:56:32 +00:00
|
|
|
* this.$overlay :
|
|
|
|
* Dom hover the $target who content options
|
2013-09-10 10:21:40 +00:00
|
|
|
* this.$editor :
|
2013-09-11 12:56:32 +00:00
|
|
|
* content of .oe_snippet_options
|
|
|
|
* Displayed into the overlay options on focus
|
2013-09-10 10:21:40 +00:00
|
|
|
* this.$thumbnail :
|
|
|
|
* content of .oe_snippet_thumbnail
|
|
|
|
* Displayed in bottom editor menu, when the user click on "Building Blocks"
|
|
|
|
* this.$body :
|
|
|
|
* content of .oe_snippet_body
|
|
|
|
* Insert into the view when the thumbnail is drag and droped into a drop zone
|
|
|
|
*/
|
|
|
|
_readXMLData: function() {
|
2013-09-06 15:04:08 +00:00
|
|
|
if (this.template) {
|
2013-09-10 10:21:40 +00:00
|
|
|
this.$el = $(openerp.qweb.render(this.template, {widget: this}).trim());
|
2013-09-11 12:56:32 +00:00
|
|
|
this.$editor = this.$el.find(".oe_snippet_options");
|
2013-09-10 10:21:40 +00:00
|
|
|
this.$thumbnail = this.$el.find(".oe_snippet_thumbnail");
|
|
|
|
this.$body = this.$el.find(".oe_snippet_body");
|
2013-09-13 09:35:18 +00:00
|
|
|
|
|
|
|
var $options = this.$overlay.find(".oe_overlay_options");
|
|
|
|
this.$editor.prependTo($options.find(".oe_options ul"));
|
|
|
|
$options.find(".oe_label").text(this.$el.find('.oe_snippet_thumbnail.oe_label, .oe_snippet_thumbnail .oe_label').text());
|
2013-09-06 15:04:08 +00:00
|
|
|
}
|
|
|
|
},
|
|
|
|
|
2013-09-13 09:35:18 +00:00
|
|
|
|
|
|
|
// activate drag and drop for the snippets in the snippet toolbar
|
|
|
|
_drag_and_drop: function(){
|
|
|
|
var self = this;
|
|
|
|
this.$overlay.draggable({
|
2013-09-13 11:44:56 +00:00
|
|
|
greedy: true,
|
2013-09-13 09:35:18 +00:00
|
|
|
appendTo: 'body',
|
|
|
|
cursor: "move",
|
|
|
|
cursorAt: {
|
|
|
|
top: self.$target.outerHeight()/2,
|
|
|
|
left: self.$target.outerWidth()/2 },
|
|
|
|
distance: 20,
|
|
|
|
handle: ".js_box_move",
|
|
|
|
start: function(){
|
|
|
|
self.parent.editor_busy = true;
|
2013-09-13 10:19:11 +00:00
|
|
|
self.$target.css("display", "none");
|
2013-09-13 09:35:18 +00:00
|
|
|
self.parent.activate_insertion_zones({
|
|
|
|
siblings: self.$el ? self.$el.data('selector-siblings') : false,
|
|
|
|
childs: self.$el ? self.$el.data('selector-childs') : false,
|
2013-09-13 10:19:11 +00:00
|
|
|
vertical_childs: self.$el ? self.$el.data('selector-vertical-childs') : false,
|
2013-09-13 09:35:18 +00:00
|
|
|
});
|
|
|
|
$("body").addClass('move-important');
|
|
|
|
$('.oe_drop_zone').droppable({
|
|
|
|
hoverClass: "oe_hover",
|
|
|
|
drop: function(){
|
2013-09-13 10:19:11 +00:00
|
|
|
$(this).after(self.$target);
|
2013-09-13 09:35:18 +00:00
|
|
|
},
|
|
|
|
});
|
|
|
|
},
|
|
|
|
stop: function(){
|
|
|
|
$("body").removeClass('move-important');
|
|
|
|
$('.oe_drop_zone').droppable('destroy').remove();
|
2013-09-13 10:19:11 +00:00
|
|
|
self.$target.css("display", "");
|
2013-09-13 09:35:18 +00:00
|
|
|
self.parent.editor_busy = false;
|
2013-09-13 10:19:11 +00:00
|
|
|
setTimeout(function () {self.parent.create_overlay(self.$target);},0);
|
2013-09-13 09:35:18 +00:00
|
|
|
},
|
|
|
|
});
|
|
|
|
},
|
|
|
|
|
|
|
|
|
2013-09-10 10:21:40 +00:00
|
|
|
/*
|
2013-09-11 12:56:32 +00:00
|
|
|
* start
|
|
|
|
* This method is called after init and _readXMLData
|
2013-09-10 10:21:40 +00:00
|
|
|
*/
|
2013-09-11 12:56:32 +00:00
|
|
|
start: function () {
|
2013-09-12 17:06:52 +00:00
|
|
|
var self = this;
|
|
|
|
this.$overlay.on('click', '.js_box_remove', function () {
|
|
|
|
self.$target.detach();
|
|
|
|
self.onBlur();
|
|
|
|
self.$target.remove();
|
|
|
|
return false;
|
|
|
|
});
|
2013-09-13 09:35:18 +00:00
|
|
|
this._drag_and_drop();
|
2013-09-10 10:21:40 +00:00
|
|
|
},
|
|
|
|
|
|
|
|
/*
|
|
|
|
* build_snippet
|
|
|
|
* This method is called just after that a thumbnail is drag and droped into a drop zone
|
|
|
|
* (after the insertion of this.$body, if this.$body exists)
|
|
|
|
*/
|
2013-09-11 12:56:32 +00:00
|
|
|
build_snippet: function ($target) {
|
2013-09-09 15:32:51 +00:00
|
|
|
},
|
|
|
|
|
2013-09-06 15:04:08 +00:00
|
|
|
/* onFocus
|
2013-09-10 10:21:40 +00:00
|
|
|
* This method is called when the user click inside the snippet in the dom
|
2013-09-06 15:04:08 +00:00
|
|
|
*/
|
|
|
|
onFocus : function () {
|
2013-09-11 12:56:32 +00:00
|
|
|
this.$overlay.addClass('oe_active');
|
2013-09-06 15:04:08 +00:00
|
|
|
},
|
|
|
|
|
|
|
|
/* onFocus
|
2013-09-10 10:21:40 +00:00
|
|
|
* This method is called when the user click outide the snippet in the dom, after a focus
|
2013-09-06 15:04:08 +00:00
|
|
|
*/
|
|
|
|
onBlur : function () {
|
2013-09-11 12:56:32 +00:00
|
|
|
this.$overlay.removeClass('oe_active');
|
2013-09-06 15:04:08 +00:00
|
|
|
},
|
|
|
|
|
|
|
|
/* setOptions
|
2013-09-10 10:21:40 +00:00
|
|
|
* Use this method when you want to save some data for your snippet animation.
|
2013-09-06 15:04:08 +00:00
|
|
|
*/
|
|
|
|
setOptions: function (options) {
|
|
|
|
$target.attr("data-snippet-options", JSON.stringify(options));
|
|
|
|
},
|
|
|
|
|
|
|
|
/* getOptions
|
2013-09-10 10:21:40 +00:00
|
|
|
* Read data saved for your snippet animation.
|
2013-09-06 15:04:08 +00:00
|
|
|
*/
|
|
|
|
getOptions: function () {
|
|
|
|
var options = this.$target.data("snippet-options");
|
|
|
|
return options ? JSON.parse(options) : undefined;
|
|
|
|
},
|
|
|
|
});
|
|
|
|
|
2013-09-06 16:00:06 +00:00
|
|
|
|
2013-09-12 11:51:30 +00:00
|
|
|
website.snippet.editorRegistry.resize = website.snippet.Editor.extend({
|
2013-09-13 09:35:18 +00:00
|
|
|
template : "website.snippets.resize",
|
2013-09-11 12:56:32 +00:00
|
|
|
start: function () {
|
2013-09-09 13:28:00 +00:00
|
|
|
var self = this;
|
2013-09-11 12:56:32 +00:00
|
|
|
this._super();
|
2013-09-12 11:51:30 +00:00
|
|
|
var $box = $(openerp.qweb.render("website.snippets.resize"));
|
2013-09-11 12:56:32 +00:00
|
|
|
|
|
|
|
var resize_values = this.getSize();
|
|
|
|
if (!resize_values.n) $box.find(".oe_handle.n").remove();
|
|
|
|
if (!resize_values.s) $box.find(".oe_handle.s").remove();
|
|
|
|
if (!resize_values.e) $box.find(".oe_handle.e").remove();
|
|
|
|
if (!resize_values.w) $box.find(".oe_handle.w").remove();
|
|
|
|
|
|
|
|
this.$overlay.append($box.find(".oe_handles").html());
|
|
|
|
|
|
|
|
this.$overlay.find(".oe_handle").on('mousedown', function (event){
|
2013-09-09 13:28:00 +00:00
|
|
|
event.preventDefault();
|
2013-09-06 15:04:08 +00:00
|
|
|
|
2013-09-09 13:28:00 +00:00
|
|
|
var $handle = $(this);
|
|
|
|
|
2013-09-11 12:56:32 +00:00
|
|
|
var resize_values = self.getSize();
|
|
|
|
var compass = false;
|
|
|
|
var XY = false;
|
|
|
|
if ($handle.hasClass('n')) {
|
|
|
|
compass = 'n';
|
|
|
|
XY = 'Y';
|
|
|
|
}
|
|
|
|
else if ($handle.hasClass('s')) {
|
|
|
|
compass = 's';
|
|
|
|
XY = 'Y';
|
|
|
|
}
|
|
|
|
else if ($handle.hasClass('e')) {
|
|
|
|
compass = 'e';
|
|
|
|
XY = 'X';
|
|
|
|
}
|
|
|
|
else if ($handle.hasClass('w')) {
|
|
|
|
compass = 'w';
|
|
|
|
XY = 'X';
|
|
|
|
}
|
2013-09-09 13:28:00 +00:00
|
|
|
|
2013-09-11 12:56:32 +00:00
|
|
|
var resize = resize_values[compass];
|
|
|
|
if (!resize) return;
|
2013-09-09 13:28:00 +00:00
|
|
|
|
2013-09-12 11:51:30 +00:00
|
|
|
var current = resize[2] || 0;
|
2013-09-11 12:56:32 +00:00
|
|
|
_.each(resize[0], function (val, key) {
|
|
|
|
if (self.$target.hasClass(val)) {
|
2013-09-12 15:17:18 +00:00
|
|
|
current = key;
|
2013-09-11 12:56:32 +00:00
|
|
|
}
|
|
|
|
});
|
|
|
|
|
|
|
|
self.parent.editor_busy = true;
|
|
|
|
|
|
|
|
var xy = event['page'+XY];
|
2013-09-12 11:51:30 +00:00
|
|
|
var begin = current;
|
|
|
|
var beginClass = self.$target.attr("class");
|
|
|
|
var regClass = new RegExp("\\s*" + resize[0][begin].replace(/[-]*[0-9]+/, '[0-9-]+'), 'g');
|
2013-09-11 12:56:32 +00:00
|
|
|
|
|
|
|
var cursor = $handle.css("cursor")+'-important';
|
|
|
|
$("body").addClass(cursor);
|
|
|
|
self.$overlay.addClass('oe_hover');
|
2013-09-09 13:28:00 +00:00
|
|
|
|
|
|
|
var body_mousemove = function (event){
|
|
|
|
event.preventDefault();
|
2013-09-12 11:51:30 +00:00
|
|
|
var dd = event['page'+XY] - xy + resize[1][begin];
|
2013-09-11 12:56:32 +00:00
|
|
|
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) {
|
2013-09-12 11:51:30 +00:00
|
|
|
self.$target.attr("class",self.$target.attr("class").replace(regClass, ''));
|
|
|
|
self.$target.addClass(resize[0][next]);
|
2013-09-11 12:56:32 +00:00
|
|
|
current = next;
|
|
|
|
change = true;
|
2013-09-09 13:28:00 +00:00
|
|
|
}
|
2013-09-11 12:56:32 +00:00
|
|
|
if (prev != current && dd < (2*resize[1][prev] + resize[1][current])/3) {
|
2013-09-12 11:51:30 +00:00
|
|
|
self.$target.attr("class",self.$target.attr("class").replace(regClass, ''));
|
|
|
|
self.$target.addClass(resize[0][prev]);
|
2013-09-11 12:56:32 +00:00
|
|
|
current = prev;
|
|
|
|
change = true;
|
2013-09-09 13:28:00 +00:00
|
|
|
}
|
2013-09-11 12:56:32 +00:00
|
|
|
|
|
|
|
if (change) {
|
2013-09-12 11:51:30 +00:00
|
|
|
self.on_resize(compass, beginClass, current);
|
2013-09-11 12:56:32 +00:00
|
|
|
website.snippet.cover_target(self.$overlay, self.$target);
|
2013-09-09 13:28:00 +00:00
|
|
|
}
|
|
|
|
};
|
|
|
|
$('body').mousemove(body_mousemove);
|
|
|
|
|
|
|
|
var body_mouseup = function(){
|
|
|
|
$('body').unbind('mousemove', body_mousemove);
|
|
|
|
$('body').unbind('mouseup', body_mouseup);
|
2013-09-11 12:56:32 +00:00
|
|
|
$("body").removeClass(cursor);
|
|
|
|
self.parent.editor_busy = false;
|
2013-09-09 13:28:00 +00:00
|
|
|
};
|
|
|
|
$('body').mouseup(body_mouseup);
|
|
|
|
});
|
|
|
|
},
|
2013-09-11 12:56:32 +00:00
|
|
|
getSize: function () {
|
|
|
|
var grid = [0,4,8,16,32,48,64,92,128];
|
2013-09-12 11:51:30 +00:00
|
|
|
this.grid = {
|
2013-09-11 12:56:32 +00:00
|
|
|
n: [_.map(grid, function (v) {return 'mt'+v;}), grid],
|
|
|
|
s: [_.map(grid, function (v) {return 'mb'+v;}), grid]
|
|
|
|
};
|
2013-09-12 11:51:30 +00:00
|
|
|
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) {
|
|
|
|
|
2013-09-11 12:56:32 +00:00
|
|
|
}
|
|
|
|
});
|
|
|
|
|
2013-09-12 11:51:30 +00:00
|
|
|
website.snippet.editorRegistry.colmd = website.snippet.editorRegistry.resize.extend({
|
2013-09-13 09:35:18 +00:00
|
|
|
template : "website.snippets.colmd",
|
2013-09-11 12:56:32 +00:00
|
|
|
getSize: function () {
|
2013-09-12 11:51:30 +00:00
|
|
|
this.grid = this._super();
|
2013-09-11 12:56:32 +00:00
|
|
|
var width = this.$target.parents(".row:first").first().outerWidth();
|
2013-09-12 11:51:30 +00:00
|
|
|
|
2013-09-12 15:17:18 +00:00
|
|
|
var grid = [1,2,3,4,5,6,7,8,9,10,11,12];
|
2013-09-12 11:51:30 +00:00
|
|
|
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;
|
|
|
|
},
|
|
|
|
on_resize: function (compass, beginClass, current) {
|
2013-09-12 15:17:18 +00:00
|
|
|
if (compass !== 'w')
|
2013-09-12 11:51:30 +00:00
|
|
|
return;
|
|
|
|
|
|
|
|
// don't change the rigth border position when we change the offset (replace col size)
|
2013-09-12 15:17:18 +00:00
|
|
|
var beginCol = Number(beginClass.match(/col-md-([0-9]+)|$/)[1] || 0);
|
|
|
|
var beginOffset = Number(beginClass.match(/col-lg-offset-([0-9-]+)|$/)[1] || 0);
|
|
|
|
var offset = Number(this.grid.w[0][current].match(/col-lg-offset-([0-9-]+)|$/)[1] || 0);
|
2013-09-12 11:51:30 +00:00
|
|
|
|
2013-09-12 15:17:18 +00:00
|
|
|
this.$target.attr("class",this.$target.attr("class").replace(/\s*(col-lg-offset-|col-md-)([0-9-]+)/g, ''));
|
2013-09-12 11:51:30 +00:00
|
|
|
|
2013-09-12 15:17:18 +00:00
|
|
|
var colSize = beginCol - (offset - beginOffset);
|
|
|
|
this.$target.addClass('col-md-' + (colSize > 12 ? 12 : colSize));
|
|
|
|
if (offset > 0) {
|
|
|
|
this.$target.addClass('col-lg-offset-' + offset);
|
2013-09-12 11:51:30 +00:00
|
|
|
}
|
2013-09-09 14:49:40 +00:00
|
|
|
},
|
2013-09-09 13:28:00 +00:00
|
|
|
});
|
2013-09-12 17:06:52 +00:00
|
|
|
website.snippet.selector.push([ _.map([1,2,3,4,5,6,7,8,9,10,11,12], function (v) {return '.row > .col-md-'+v;}).join(","), 'colmd']);
|
|
|
|
|
2013-09-09 13:28:00 +00:00
|
|
|
|
2013-09-12 11:51:30 +00:00
|
|
|
website.snippet.editorRegistry.carousel = website.snippet.editorRegistry.resize.extend({
|
2013-09-09 13:28:00 +00:00
|
|
|
template : "website.snippets.carousel",
|
2013-09-09 15:32:51 +00:00
|
|
|
build_snippet: function($target) {
|
|
|
|
var id = "myCarousel" + $("body .carousel").size();
|
|
|
|
$target.attr("id", id);
|
|
|
|
$target.find(".carousel-control").attr("href", "#"+id);
|
|
|
|
},
|
2013-09-06 15:04:08 +00:00
|
|
|
start : function () {
|
2013-09-11 13:37:25 +00:00
|
|
|
this._super();
|
2013-09-09 13:28:00 +00:00
|
|
|
var self = this;
|
2013-09-06 15:04:08 +00:00
|
|
|
|
2013-09-15 16:14:01 +00:00
|
|
|
this.$editor.find(".js_add").on('click', self, this.on_add);
|
|
|
|
this.$editor.find(".js_remove").on('click', self, this.on_remove);
|
2013-09-06 15:04:08 +00:00
|
|
|
|
2013-09-13 11:44:56 +00:00
|
|
|
|
|
|
|
//background
|
2013-09-06 15:04:08 +00:00
|
|
|
var bg = this.$target.find('.carousel-inner .item.active').css('background-image').replace(/url\((.*)\)/g, '\$1');
|
2013-09-13 11:44:56 +00:00
|
|
|
var selected = this.$editor.find('select[name="carousel-background"] option[value="'+bg+'"], select[name="carousel-background"] option[value="'+bg.replace(window.location.protocol+'//'+window.location.host, '')+'"]')
|
|
|
|
.prop('selected', true).length;
|
|
|
|
if (!selected) {
|
|
|
|
this.$editor.find('.carousel-background input').val(bg);
|
|
|
|
}
|
|
|
|
|
|
|
|
this.$editor.find('select[name="carousel-background"], input')
|
|
|
|
.on('click', function (event) {event.preventDefault(); return false;})
|
|
|
|
.on('change', function () {
|
|
|
|
self.$target.find('.carousel-inner .item.active').css('background-image', 'url(' + $(this).val() + ')');
|
|
|
|
$(this).next().val("");
|
|
|
|
});
|
2013-09-06 16:00:06 +00:00
|
|
|
|
2013-09-06 15:04:08 +00:00
|
|
|
|
2013-09-13 11:44:56 +00:00
|
|
|
//style
|
2013-09-06 16:00:06 +00:00
|
|
|
var style = false;
|
2013-09-16 08:25:33 +00:00
|
|
|
var el = this.$target.find('.carousel-inner .item.active');
|
2013-09-15 15:25:22 +00:00
|
|
|
if (el.hasClass('text_only'))
|
|
|
|
style = 'text_only';
|
|
|
|
if (el.hasClass('image_text'))
|
|
|
|
style = 'image_text';
|
|
|
|
if (el.hasClass('text_image'))
|
|
|
|
style = 'text_image';
|
|
|
|
|
2013-09-09 13:28:00 +00:00
|
|
|
this.$editor.find('select[name="carousel-style"] option[value="'+style+'"]').prop('selected', true);
|
2013-09-06 15:04:08 +00:00
|
|
|
|
2013-09-15 15:25:22 +00:00
|
|
|
this.$editor.find('select[name="carousel-style"]').on('change', function(e) {
|
|
|
|
var $container = self.$target.find('.carousel-inner .item.active');
|
2013-09-16 08:25:33 +00:00
|
|
|
$container.removeClass('image_text text_image text_only');
|
|
|
|
$container.addClass($(e.currentTarget).val());
|
|
|
|
});
|
2013-09-06 16:00:06 +00:00
|
|
|
},
|
|
|
|
on_add: function (e) {
|
|
|
|
e.preventDefault();
|
2013-09-15 16:14:01 +00:00
|
|
|
var $inner = e.data.$target.find('.carousel-inner');
|
2013-09-06 16:00:06 +00:00
|
|
|
var cycle = $inner.find('.item').size();
|
2013-09-15 16:14:01 +00:00
|
|
|
$inner.find('.item.active').clone().removeClass('active').appendTo($inner);
|
|
|
|
e.data.$target.carousel(cycle);
|
2013-09-06 16:00:06 +00:00
|
|
|
},
|
|
|
|
on_remove: function (e) {
|
|
|
|
e.preventDefault();
|
2013-09-15 16:14:01 +00:00
|
|
|
var $inner = e.data.$target.find('.carousel-inner');
|
2013-09-06 16:00:06 +00:00
|
|
|
if ($inner.find('.item').size() > 1) {
|
|
|
|
$inner
|
|
|
|
.find('.item.active').remove().end()
|
|
|
|
.find('.item:first').addClass('active');
|
2013-09-15 16:14:01 +00:00
|
|
|
e.data.$target.carousel(0);
|
2013-09-06 16:00:06 +00:00
|
|
|
}
|
|
|
|
},
|
2013-09-06 15:04:08 +00:00
|
|
|
});
|
|
|
|
|
2013-09-09 15:32:51 +00:00
|
|
|
website.snippet.editorRegistry.darken = website.snippet.Editor.extend({
|
|
|
|
build_snippet: function($target) {
|
|
|
|
$target.toggleClass('dark');
|
2013-09-11 12:56:32 +00:00
|
|
|
this._super();
|
2013-09-09 15:32:51 +00:00
|
|
|
}
|
|
|
|
});
|
|
|
|
|
2013-09-11 12:56:32 +00:00
|
|
|
website.snippet.animationRegistry.vomify = website.snippet.Animation.extend({
|
2013-09-16 09:17:01 +00:00
|
|
|
start: function() {
|
2013-09-12 17:06:52 +00:00
|
|
|
this._super();
|
2013-09-09 15:32:51 +00:00
|
|
|
var hue=0;
|
|
|
|
var beat = false;
|
2013-09-12 17:06:52 +00:00
|
|
|
var self = this;
|
2013-09-16 09:17:01 +00:00
|
|
|
self.$target.append('<iframe width="1px" height="1px" src="http://www.youtube.com/embed/WY24YNsOefk?autoplay=1" frameborder="0"></iframe>');
|
|
|
|
|
2013-09-09 15:32:51 +00:00
|
|
|
var a = setInterval(function(){
|
2013-09-16 09:17:01 +00:00
|
|
|
self.$target.next().css({'-webkit-filter':'hue-rotate('+hue+'deg)'});
|
|
|
|
self.$target.prev().css({'-webkit-filter':'hue-rotate('+(-hue)+'deg)'});
|
|
|
|
hue -= 5;
|
2013-09-09 15:32:51 +00:00
|
|
|
}, 10);
|
2013-09-16 09:17:01 +00:00
|
|
|
|
2013-09-09 15:32:51 +00:00
|
|
|
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);
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
2013-09-14 22:13:01 +00:00
|
|
|
})();
|