From 5086f1e1e13a06d9250ff28e5bf48dbe8cbd0a8a Mon Sep 17 00:00:00 2001 From: Christophe Matthieu Date: Fri, 13 Sep 2013 12:19:11 +0200 Subject: [PATCH 01/10] [IMP] website editor snippet: vertical selector (eg.: used for drag and drop column) bzr revid: chm@openerp.com-20130913101911-467bx9ddykv23ae6 --- addons/website/static/src/css/editor.css | 11 ++- addons/website/static/src/css/editor.sass | 8 +- .../website/static/src/js/website.snippets.js | 77 ++++++++++--------- .../static/src/xml/website.snippets.xml | 2 +- 4 files changed, 54 insertions(+), 44 deletions(-) diff --git a/addons/website/static/src/css/editor.css b/addons/website/static/src/css/editor.css index e895b1209ce..820329d5ed0 100644 --- a/addons/website/static/src/css/editor.css +++ b/addons/website/static/src/css/editor.css @@ -172,6 +172,9 @@ table.editorbar-panel td.selected { height: 32px; margin: -16px 0px; -webkit-transition: margin 250ms linear; + position: absolute; + background: rgba(153, 0, 255, 0.17); + border-radius: 3px; } .oe_drop_zone.oe_insert:first-child:not(:last-child) { margin-top: -8px; @@ -197,11 +200,11 @@ table.editorbar-panel td.selected { .oe_drop_zone.oe_insert.oe_hover:before { border-top: dashed 2px rgba(116, 255, 161, 0.72); } - -.oe_drop_zone.oe_overlay { +.oe_drop_zone.oe_insert.oe_vertical { + width: 16px; + display: inline-block; position: absolute; - background: rgba(153, 0, 255, 0.17); - border-radius: 3px; + margin: 0px !important; } .oe_drop_zone { diff --git a/addons/website/static/src/css/editor.sass b/addons/website/static/src/css/editor.sass index 96c77108ff6..e19757db49c 100644 --- a/addons/website/static/src/css/editor.sass +++ b/addons/website/static/src/css/editor.sass @@ -178,8 +178,12 @@ table.editorbar-panel top: 24px &.oe_hover:before border-top: dashed 2px rgba(116, 255, 161, 0.72) - -.oe_drop_zone.oe_overlay + &.oe_vertical + width: 16px + display: inline-block + position: absolute + margin: 0px !important + &.oe_overlay position: absolute background: rgba(153, 0, 255, 0.17) border-radius: 3px diff --git a/addons/website/static/src/js/website.snippets.js b/addons/website/static/src/js/website.snippets.js index 58970b67dc6..b9086f5eaca 100644 --- a/addons/website/static/src/js/website.snippets.js +++ b/addons/website/static/src/js/website.snippets.js @@ -203,7 +203,8 @@ if( action === 'insert'){ self.activate_insertion_zones({ siblings: $snippet.data('selector-siblings'), - childs: $snippet.data('selector-childs') + childs: $snippet.data('selector-childs'), + vertical_childs: $snippet.data('selector-vertical-childs') }); } else if( action === 'mutate' ){ @@ -284,7 +285,8 @@ self.activate_insertion_zones({ siblings: $snippet.data('selector-siblings'), - child: $snippet.data('selector-childs') + child: $snippet.data('selector-childs'), + vertical_childs: $snippet.data('selector-vertical-childs') }); } @@ -299,28 +301,39 @@ // selector.siblings -> will insert drop zones after and before selected elements activate_insertion_zones: function(selector){ var self = this; - var child_selector = selector.childs ? this.parent_of_editable_box + (selector.childs).split(",").join(this.parent_of_editable_box) : false; - var sibling_selector = selector.siblings ? this.parent_of_editable_box + (selector.siblings).split(",").join(this.parent_of_editable_box) : false; + var child_selector = selector.childs ? this.parent_of_editable_box + (selector.childs).split(",").join(this.parent_of_editable_box) : false; + 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; + var zone_template = "
"; 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); - } + $(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()); + }); } 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); + $(sibling_selector).each(function (){ + var $zone = $(this); + if($zone.prev('.oe_drop_zone:visible').length === 0){ + $zone.before(zone_template); } - if($zones.eq(i).next('.oe_drop_zone').length === 0){ - $zones.eq(i).after(zone_template); + if($zone.next('.oe_drop_zone:visible').length === 0){ + $zone.after(zone_template); } - } + }); } var count; @@ -333,12 +346,12 @@ $zones = $('.oe_drop_zone > .oe_drop_zone').remove(); // no recusrive zones count += $zones.length; $zones.remove(); - }while(count > 0); + } while (count > 0); // 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); + var $zones = $('.oe_drop_zone:not(.oe_vertical)'); + $zones.each(function (){ + var zone = $(this); var prev = zone.prev(); var next = zone.next(); var float_prev = zone.prev().css('float') || 'none'; @@ -348,15 +361,14 @@ if( (float_prev === 'left' || float_prev === 'right') && (float_next === 'left' || float_next === 'right') ){ zone.remove(); - continue; + return; }else if( !( disp_prev === null || disp_next === null || disp_prev === 'block' || disp_next === 'block' )){ zone.remove(); - continue; } - } + }); }, // generate drop zones covering the elements selected by the selector @@ -497,7 +509,6 @@ // activate drag and drop for the snippets in the snippet toolbar _drag_and_drop: function(){ var self = this; - var drop = false; this.$overlay.draggable({ appendTo: 'body', cursor: "move", @@ -508,34 +519,26 @@ handle: ".js_box_move", start: function(){ self.parent.editor_busy = true; + self.$target.css("display", "none"); self.parent.activate_insertion_zones({ siblings: self.$el ? self.$el.data('selector-siblings') : false, childs: self.$el ? self.$el.data('selector-childs') : false, + vertical_childs: self.$el ? self.$el.data('selector-vertical-childs') : false, }); - self.$target.after(""); - self.$target.detach(); $("body").addClass('move-important'); - drop = false; $('.oe_drop_zone').droppable({ hoverClass: "oe_hover", drop: function(){ - if (!$(".oe_drop_zone.oe_hover").length) { - return false; - } - $(".oe_drop_zone.oe_hover").after(self.$target); - drop = true; + $(this).after(self.$target); }, }); }, stop: function(){ $("body").removeClass('move-important'); $('.oe_drop_zone').droppable('destroy').remove(); - if (!drop) { - $('#oe_pointer_drag_and_drop').after(self.$target); - } - $('#oe_pointer_drag_and_drop').remove(); + self.$target.css("display", ""); self.parent.editor_busy = false; - setTimeout(function () {self.parent.make_active(self.$target);},0); + setTimeout(function () {self.parent.create_overlay(self.$target);},0); }, }); }, diff --git a/addons/website/static/src/xml/website.snippets.xml b/addons/website/static/src/xml/website.snippets.xml index f4c83c18fb3..90a5deebd8b 100644 --- a/addons/website/static/src/xml/website.snippets.xml +++ b/addons/website/static/src/xml/website.snippets.xml @@ -53,7 +53,7 @@
Margin resize
-
+
Column
From 6f68c76f99d1d1568d6bc235f1e857c7f742b01c Mon Sep 17 00:00:00 2001 From: Christophe Matthieu Date: Fri, 13 Sep 2013 12:26:53 +0200 Subject: [PATCH 02/10] [FIX] website editor snippet: vertical selector css to display bzr revid: chm@openerp.com-20130913102653-pb6d8oyrf9xhodg8 --- addons/website/static/src/css/editor.css | 1 + addons/website/static/src/css/editor.sass | 1 + 2 files changed, 2 insertions(+) diff --git a/addons/website/static/src/css/editor.css b/addons/website/static/src/css/editor.css index 820329d5ed0..806c5691852 100644 --- a/addons/website/static/src/css/editor.css +++ b/addons/website/static/src/css/editor.css @@ -172,6 +172,7 @@ table.editorbar-panel td.selected { height: 32px; margin: -16px 0px; -webkit-transition: margin 250ms linear; + width: 100%; position: absolute; background: rgba(153, 0, 255, 0.17); border-radius: 3px; diff --git a/addons/website/static/src/css/editor.sass b/addons/website/static/src/css/editor.sass index e19757db49c..65179d365fe 100644 --- a/addons/website/static/src/css/editor.sass +++ b/addons/website/static/src/css/editor.sass @@ -160,6 +160,7 @@ table.editorbar-panel height: 32px margin: -16px 0px -webkit-transition: margin 250ms linear + width: 100% &:first-child:not(:last-child) margin-top: -8px margin-bottom: -24px From d05c5a27830ad83a83687c354463365942b09945 Mon Sep 17 00:00:00 2001 From: Christophe Matthieu Date: Fri, 13 Sep 2013 12:28:03 +0200 Subject: [PATCH 03/10] [IMP] website editor snippet: vertical selector css z-index bzr revid: chm@openerp.com-20130913102803-hhs46m43v2mbjsbf --- addons/website/static/src/css/editor.css | 1 + addons/website/static/src/css/editor.sass | 1 + 2 files changed, 2 insertions(+) diff --git a/addons/website/static/src/css/editor.css b/addons/website/static/src/css/editor.css index 806c5691852..0afd2be7f06 100644 --- a/addons/website/static/src/css/editor.css +++ b/addons/website/static/src/css/editor.css @@ -173,6 +173,7 @@ table.editorbar-panel td.selected { margin: -16px 0px; -webkit-transition: margin 250ms linear; width: 100%; + z-index: 1000; position: absolute; background: rgba(153, 0, 255, 0.17); border-radius: 3px; diff --git a/addons/website/static/src/css/editor.sass b/addons/website/static/src/css/editor.sass index 65179d365fe..380564b0cec 100644 --- a/addons/website/static/src/css/editor.sass +++ b/addons/website/static/src/css/editor.sass @@ -161,6 +161,7 @@ table.editorbar-panel margin: -16px 0px -webkit-transition: margin 250ms linear width: 100% + z-index: 1000 &:first-child:not(:last-child) margin-top: -8px margin-bottom: -24px From dee82b1382e0439aa4104df57841d2a23d4706e3 Mon Sep 17 00:00:00 2001 From: ddm Date: Fri, 13 Sep 2013 13:40:53 +0200 Subject: [PATCH 04/10] [IMP] SEO title and description bzr revid: ddm@openerp.com-20130913114053-93vm1xn18bdc0nu2 --- addons/website/static/src/js/website.seo.js | 69 ++++++++++++++++----- addons/website/views/views.xml | 2 + 2 files changed, 55 insertions(+), 16 deletions(-) diff --git a/addons/website/static/src/js/website.seo.js b/addons/website/static/src/js/website.seo.js index e9053740eae..e7983e57af1 100644 --- a/addons/website/static/src/js/website.seo.js +++ b/addons/website/static/src/js/website.seo.js @@ -96,6 +96,10 @@ website.seo.KeywordList = openerp.Widget.extend({ template: 'website.seo_list', maxKeywords: 10, + init: function (parent, htmlPage) { + this.htmlPage = htmlPage; + this._super(parent); + }, keywords: function () { var result = []; this.$('span.js_seo_keyword').each(function () { @@ -143,7 +147,7 @@ website.seo.ImageList = openerp.Widget.extend({ start: function () { var self = this; - new website.seo.PageParser().images().each(function (index, image) { + new website.seo.HtmlPage().images().each(function (index, image) { new website.seo.Image(self, image).appendTo(self.$el); }); }, @@ -163,14 +167,29 @@ }, }); - website.seo.PageParser = openerp.Class.extend({ + website.seo.HtmlPage = openerp.Class.extend({ url: function () { var url = window.location.href; var hashIndex = url.indexOf('#'); return hashIndex >= 0 ? url.substring(0, hashIndex) : url; }, title: function () { - return $(document.title).text(); + return $('title').text(); + }, + changeTitle: function (title) { + $('title').text(title); + }, + description: function () { + return $('meta[name=description]').attr('value'); + }, + changeDescription: function (description) { + return $('meta[name=description]').attr('value', description); + }, + keywords: function () { + return $('meta[name=keywords]').attr('value').split(","); + }, + changeKeywords: function (keywords) { + return $('meta[name=keywords]').attr('value', keyword.join(",")); }, headers: function (tag) { return $('#wrap '+tag).map(function () { @@ -208,23 +227,26 @@ website.seo.Configurator = openerp.Widget.extend({ template: 'website.seo_configuration', events: { - 'keypress input[name=seo_page_keywords]': 'confirmKeyword', + 'keyup input[name=seo_page_keywords]': 'confirmKeyword', + 'keyup input[name=seo_page_title]': 'titleChanged', + 'keyup textarea[name=seo_page_description]': 'descriptionChanged', 'click button[data-action=add]': 'addKeyword', 'click button[data-action=update]': 'update', - 'hidden.bs.modal': 'destroy' + 'hidden.bs.modal': 'destroy', }, maxTitleSize: 65, maxDescriptionSize: 155, start: function () { var self = this; var $modal = self.$el; - var pageParser = new website.seo.PageParser(); - $modal.find('.js_seo_page_url').text(pageParser.url()); - $modal.find('input[name=seo_page_title]').val(pageParser.title()); - self.suggestImprovements(pageParser); + var htmlPage = this.htmlPage = new website.seo.HtmlPage(); + $modal.find('.js_seo_page_url').text(htmlPage.url()); + $modal.find('input[name=seo_page_title]').val(htmlPage.title()); + $modal.find('textarea[name=seo_page_description]').val(htmlPage.description()); + self.suggestImprovements(htmlPage); self.imageList = new website.seo.ImageList(self); self.imageList.appendTo($modal.find('.js_seo_image_list')); - self.keywordList = new website.seo.KeywordList(self); + self.keywordList = new website.seo.KeywordList(self, htmlPage); self.keywordList.on('list-full', self, function () { $modal.find('input[name=seo_page_keywords]') .attr('readonly', "readonly") @@ -242,7 +264,7 @@ self.keywordList.add(word); }); self.keywordList.appendTo($modal.find('.js_seo_keywords_list')); - var companyName = pageParser.company().toLowerCase(); + var companyName = htmlPage.company().toLowerCase(); self.addKeyword(companyName); $modal.modal(); }, @@ -255,14 +277,14 @@ type: type, }).appendTo(self.$('.js_seo_tips')); } - var pageParser = parser || new website.seo.PageParser(); - if (pageParser.headers('h1').length === 0) { + var htmlPage = parser || new website.seo.HtmlPage(); + if (htmlPage.headers('h1').length === 0) { tips.push({ type: 'warning', message: "You don't have an <h1> tag on your page.", }); } - if (pageParser.headers('h1').length > 1) { + if (htmlPage.headers('h1').length > 1) { tips.push({ type: 'warning', message: "You have more than one <h1> tag on your page.", @@ -289,13 +311,28 @@ }, update: function () { var data = { - title: this.$('input[name=seo_page_title]').val(), - description: this.$('input[name=seo_page_title]').val(), + title: this.htmlPage.title(), + description: this.htmlPage.description(), keywords: this.keywordList.keywords(), images: this.imageList.images(), }; console.log(data); // TODO Persist changes + this.$el.modal('hide'); + }, + titleChanged: function () { + var self = this; + setTimeout(function () { + var title = self.$('input[name=seo_page_title]').val(); + self.htmlPage.changeTitle(title); + }, 1); + }, + descriptionChanged: function () { + var self = this; + setTimeout(function () { + var description = self.$('textarea[name=seo_page_description]').attr('value'); + self.htmlPage.changeDescription(description); + }, 1); }, }); })(); diff --git a/addons/website/views/views.xml b/addons/website/views/views.xml index 14b020b7927..6fe3f0cee3f 100644 --- a/addons/website/views/views.xml +++ b/addons/website/views/views.xml @@ -19,6 +19,8 @@ <t t-esc="title or res_company.name"/> + + From 74678c7632b7506d360e8a36990136a0dad7d434 Mon Sep 17 00:00:00 2001 From: Christophe Matthieu Date: Fri, 13 Sep 2013 13:44:56 +0200 Subject: [PATCH 05/10] [IMP] website editor snippet: image-text, text-imge, carousel bzr revid: chm@openerp.com-20130913114456-sacksn4frv2w9re1 --- addons/website/static/src/css/editor.css | 3 + addons/website/static/src/css/editor.sass | 2 + .../website/static/src/js/website.snippets.js | 28 +++++-- .../static/src/xml/website.snippets.xml | 83 ++++++++++++++----- addons/website/views/views.xml | 2 +- 5 files changed, 87 insertions(+), 31 deletions(-) diff --git a/addons/website/static/src/css/editor.css b/addons/website/static/src/css/editor.css index 0afd2be7f06..917db1b059a 100644 --- a/addons/website/static/src/css/editor.css +++ b/addons/website/static/src/css/editor.css @@ -285,6 +285,9 @@ table.editorbar-panel td.selected { .oe_overlay .oe_overlay_options .oe_move .js_box_move { margin-left: -50%; } +.oe_overlay .oe_overlay_options .dropdown-menu select, .oe_overlay .oe_overlay_options .dropdown-menu input { + display: block; +} .oe_overlay.oe_active .oe_overlay_options { display: block; } diff --git a/addons/website/static/src/css/editor.sass b/addons/website/static/src/css/editor.sass index 380564b0cec..3dc35b77a85 100644 --- a/addons/website/static/src/css/editor.sass +++ b/addons/website/static/src/css/editor.sass @@ -252,6 +252,8 @@ table.editorbar-panel left: 50% .js_box_move margin-left: -50% + .dropdown-menu select,.dropdown-menu input + display: block &.oe_active .oe_overlay_options display: block diff --git a/addons/website/static/src/js/website.snippets.js b/addons/website/static/src/js/website.snippets.js index b9086f5eaca..10d2d9f7af0 100644 --- a/addons/website/static/src/js/website.snippets.js +++ b/addons/website/static/src/js/website.snippets.js @@ -251,8 +251,8 @@ } if (website.snippet.editorRegistry[snipped_id]) { self.create_overlay($target); - var snippet = new website.snippet.editorRegistry[snipped_id](self, $target); - snippet.build_snippet($target); + $target.data("snippet-editor").build_snippet($target); + setTimeout(function () {self.make_active($target);},0); } }, @@ -276,6 +276,7 @@ var $snippet = get_snippet_from_id($instance.data('snippet-id')); $instance.draggable({ + greedy: true, helper: 'clone', zIndex: '1000', appendTo: 'body', @@ -510,6 +511,7 @@ _drag_and_drop: function(){ var self = this; this.$overlay.draggable({ + greedy: true, appendTo: 'body', cursor: "move", cursorAt: { @@ -565,8 +567,6 @@ * (after the insertion of this.$body, if this.$body exists) */ build_snippet: function ($target) { - var self = this; - setTimeout(function () {self.parent.make_active(self.$target);},0); }, /* onFocus @@ -766,14 +766,24 @@ this.$editor.find(".js_add").on('click', this.on_add); this.$editor.find(".js_remove").on('click', this.on_remove); + + //background var bg = this.$target.find('.carousel-inner .item.active').css('background-image').replace(/url\((.*)\)/g, '\$1'); - 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); + 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"]').on('change', function () { - self.$target.find('.carousel-inner .item.active').css('background-image', 'url(' + $(this).val() + ')'); - }); + 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(""); + }); + + //style var style = false; if (this.$target.find('.carousel-inner .item.active .container .content_image.col-lg-offset-1')) style = 'image_right'; diff --git a/addons/website/static/src/xml/website.snippets.xml b/addons/website/static/src/xml/website.snippets.xml index 90a5deebd8b..be1304a9d5c 100644 --- a/addons/website/static/src/xml/website.snippets.xml +++ b/addons/website/static/src/xml/website.snippets.xml @@ -27,6 +27,7 @@ @@ -66,28 +67,27 @@
  • Remove current layer
  • -
  • - -
  • - -
  • -
  • - + + Background + + +
  • +
    carousel
    @@ -98,7 +98,7 @@