+ data-selector="..."
+ data-selector-siblings="..."
+ data-selector-children="..."
+ data-selector-vertical-children='...'>
+ ...
+
...
+ ...
+
+
+
+ How to create a javascript object for an options?
+
+ openerp.website.snippet.options["...option-id..."] = website.snippet.Option.extend({
+ // start is called when the user click into a block or when the user drop a block
+ // into the page (just after the init method).
+ // start is usually used to bind event.
+ //
+ // this.$target: block html inserted inside the page
+ // this.$el: html li list of this options
+ // this.$overlay: html editor overlay who content resize bar, customize menu...
+ start: function () {},
+
+
+ // onFocus is called when the user click inside the block inserted in page
+ // and when the user drop on block into the page
+ onFocus : function () {},
+
+
+ // onBlur is called when the user click outside the block inserted in page, if
+ // the block is focused
+ onBlur : function () {},
+
+
+ // on_clone is called when the snippet is duplicate
+ // @variables: $clone is allready inserted is the page
+ on_clone: function ($clone) {},
+
+
+ // on_remove is called when the snippet is removed (dom is removing after this tigger)
+ on_remove: function () {},
+
+
+ // drop_and_build_snippet is called just after that a thumbnail is drag and dropped
+ // into a drop zone. The content is already inserted in the page.
+ drop_and_build_snippet: function () {},
+
+ // select is called when a user select an item in the li list of options
+ // By default, if the li item have a data-value attribute, the data-vlue it's apply
+ // like a class to the html block (this.$target)
+ // @variables: next_previous = {$next, $prev}
+ // $next = next item selected or false
+ // $prev = previous item selected or false
+ select: function (event, next_previous) {}
+
+ // preview is called when a user is on mouse over or mouse out of an item
+ // variables: next_previous = {$next, $prev}
+ // $next = next item selected or false
+ // $prev = previous item selected or false
+ preview: function (event, next_previous) {}
+
+ // clean_for_save
+ // clean_for_save is called just before to save the vue
+ // Sometime it's important to remove or add some datas (contentEditable, added
+ // classes to a running animation...)
+ clean_for_save: function () {}
+ });
+
+
+ // 'snippet-dropped' is triggered on '#oe_snippets' whith $target as attribute when a snippet is dropped
+ // 'snippet-activated' is triggered on '#oe_snippets' (and on snippet) when a snippet is activated
+
+*/
+
+
var website = openerp.website;
website.add_template_file('/website/static/src/xml/website.snippets.xml');
@@ -19,23 +149,11 @@
edit: function () {
var self = this;
$("[data-oe-model] *, [data-oe-type=html] *").off('click');
- website.snippet.stop_animation();
window.snippets = this.snippets = new website.snippet.BuildingBlock(this);
this.snippets.appendTo(this.$el);
this.on('rte:ready', this, function () {
self.snippets.$button.removeClass("hidden");
- website.snippet.start_animation();
- $(website.snippet.readyAnimation).each(function() {
- var animation = $(this).data("snippet-view");
- if (animation) {
- animation.$target.on('focus', '*', function(){
- animation.stop();
- });
- animation.$target.on('blur', '*', function(){
- animation.start();
- });
- }
- });
+ website.snippet.stop_animation();
});
return this._super.apply(this, arguments);
@@ -56,9 +174,6 @@
}
});
- // 'snippet-dropped' is triggered on '#oe_snippets' whith $target as attribute when a snippet is dropped
- // 'snippet-activated' is triggered on '#oe_snippets' (and on snippet) when a snippet is activated
-
if (!website.snippet) website.snippet = {};
website.snippet.templateOptions = {};
website.snippet.globalSelector = "";
@@ -397,18 +512,17 @@
$("#oe_snippets").trigger('snippet-dropped', $target);
website.snippet.start_animation(true, $target);
-
// drop_and_build_snippet
self.create_overlay($target);
if ($target.data("snippet-editor")) {
- $target.data("snippet-editor").drop_and_build_snippet($target);
+ $target.data("snippet-editor").drop_and_build_snippet();
}
for (var k in website.snippet.templateOptions) {
$target.find(website.snippet.templateOptions[k].selector).each(function () {
var $snippet = $(this);
self.create_overlay($snippet);
if ($snippet.data("snippet-editor")) {
- $snippet.data("snippet-editor").drop_and_build_snippet($snippet);
+ $snippet.data("snippet-editor").drop_and_build_snippet();
}
});
}
@@ -665,80 +779,12 @@
self.set_active();
self.$target.trigger("snippet-style-change", [self, np]);
},0);
- this.select(event, {'$next': $next, '$prev': $prev});
+ this.select({'$next': $next, '$prev': $prev});
} else {
setTimeout(function () {
self.$target.trigger("snippet-style-preview", [self, np]);
},0);
- this.preview(event, np);
- }
- },
- // start is call just after the init
- start: function () {
- },
- /* onFocus
- * This method is called when the user click inside the snippet in the dom
- */
- onFocus : function () {
- },
-
- /* onFocus
- * This method is called when the user click outside the snippet in the dom, after a focus
- */
- onBlur : function () {
- },
-
- /* on_clone
- * This method is called when the snippet is cloned ($clone is allready inserted)
- */
- on_clone: function ($clone) {
- },
-
- /* on_remove
- * This method is called when the snippet is removed (dom is removing after this call)
- */
- on_remove: function () {
- },
-
- /*
- * drop_and_build_snippet
- * This method is called just after that a thumbnail is drag and dropped into a drop zone
- * (after the insertion of this.$body, if this.$body exists)
- */
- drop_and_build_snippet: function ($target) {
- },
- /* select
- * called when a user select an item
- * li must have data-value attribute
- * variables: np = {$next, $prev}
- * $next is false if they are no next item selected
- * $prev is false if they are no previous item selected
- */
- select: function (event, np) {
- var self = this;
- // add or remove html class
- if (np.$prev) {
- this.$target.removeClass(np.$prev.data('value' || ""));
- }
- if (np.$next) {
- this.$target.addClass(np.$next.data('value') || "");
- }
- },
- /* preview
- * called when a user is on mouse over or mouse out of an item
- * variables: np = {$next, $prev}
- * $next is false if they are no next item selected
- * $prev is false if they are no previous item selected
- */
- preview: function (event, np) {
- var self = this;
-
- // add or remove html class
- if (np.$prev) {
- this.$target.removeClass(np.$prev.data('value') || "");
- }
- if (np.$next) {
- this.$target.addClass(np.$next.data('value') || "");
+ this.preview(np);
}
},
/* set_active
@@ -757,9 +803,48 @@
.addClass("active");
this.$el.find('li:has(li[data-value].active)').addClass("active");
},
- /* clean_for_save
- * function called just before save vue
- */
+
+ start: function () {
+ },
+
+ onFocus : function () {
+ },
+
+ onBlur : function () {
+ },
+
+ on_clone: function ($clone) {
+ },
+
+ on_remove: function () {
+ },
+
+ drop_and_build_snippet: function () {
+ },
+
+ select: function (np) {
+ var self = this;
+ // add or remove html class
+ if (np.$prev && this.required) {
+ this.$target.removeClass(np.$prev.data('value' || ""));
+ }
+ if (np.$next) {
+ this.$target.addClass(np.$next.data('value') || "");
+ }
+ },
+
+ preview: function (np) {
+ var self = this;
+
+ // add or remove html class
+ if (np.$prev && this.required) {
+ this.$target.removeClass(np.$prev.data('value') || "");
+ }
+ if (np.$next) {
+ this.$target.addClass(np.$next.data('value') || "");
+ }
+ },
+
clean_for_save: function () {
}
});
@@ -776,9 +861,9 @@
var src = this._get_bg();
this.$el.find("li[data-value].active.oe_custom_bg").data("src", src);
},
- select: function(event, np) {
+ select: function(np) {
var self = this;
- this._super(event, np);
+ this._super(np);
if (np.$next) {
if (np.$next.hasClass("oe_custom_bg")) {
var editor = new website.editor.ImageDialog();
@@ -803,8 +888,8 @@
this.$target.removeClass(np.$prev.data("value"));
}
},
- preview: function (event, np) {
- this._super(event, np);
+ preview: function (np) {
+ this._super(np);
if (np.$next) {
this._set_bg(np.$next.data("src"));
}
@@ -1291,6 +1376,7 @@
this.grid.size = 8;
return this.grid;
},
+ this.$target.carousel({interval: false});
});
website.snippet.options.parallax = website.snippet.Option.extend({
@@ -1539,9 +1625,9 @@
* This method is called just after that a thumbnail is drag and dropped into a drop zone
* (after the insertion of this.$body, if this.$body exists)
*/
- drop_and_build_snippet: function ($target) {
+ drop_and_build_snippet: function () {
for (var i in this.styles){
- this.styles[i].drop_and_build_snippet($target);
+ this.styles[i].drop_and_build_snippet();
}
},
diff --git a/addons/website/views/snippets.xml b/addons/website/views/snippets.xml
index 55bd7679b66..eb1f8c988d7 100644
--- a/addons/website/views/snippets.xml
+++ b/addons/website/views/snippets.xml
@@ -923,7 +923,7 @@