[WIP] website: snippets

bzr revid: chm@openerp.com-20130906150408-81qzb2492lwqf7lb

addons/website/static/src/css/snippets.css

@@ -176,3 +176,29 @@
     margin-left: 0px !important;
 }
 */
+
+#website-top-edit-snippet-option {
+    padding: 1px 8px 2px;
+    font: normal normal normal 12px Arial,Helvetica,Tahoma,Verdana,Sans-Serif;
+    float: left;
+    margin-top: 6px;
+    border: 1px solid #a6a6a6;
+    border-bottom-color: #979797;
+    background: #eeeeee;
+    border-radius: 3px;
+}
+#website-top-edit-snippet-option > * {
+    display: inline-block;
+    height: 22px;
+    padding: 4px 6px;
+    outline: 0;
+    border: 0;
+}
+#website-top-edit-snippet-option a.button .icon {
+    cursor: inherit;
+    background-repeat: no-repeat;
+    margin-top: 1px;
+    width: 16px;
+    height: 16px;
+    display: inline-block;
+}
\ No newline at end of file

addons/website/static/src/js/website.editor.js

@@ -220,6 +220,11 @@
         // editor.ui.items -> possible commands &al
         // editor.applyStyle(new CKEDITOR.style({element: "span",styles: {color: "#(color)"},overrides: [{element: "font",attributes: {color: null}}]}, {color: '#ff0000'}));
 
+        init: function (EditorBar) {
+            this.EditorBar = EditorBar;
+            this._super.apply(this, arguments);
+        },
+
         start_edition: function ($elements) {
             var self = this;
             $elements
@@ -229,6 +234,7 @@
                     var $node = $(node);
                     var editor = CKEDITOR.inline(this, self._config());
                     editor.on('instanceReady', function () {
+                        self.trigger('instanceReady');
                         observer.observe(node, OBSERVER_CONFIG);
                     });
                     $node.one('content_changed', function () {

addons/website/static/src/xml/website.snippets.xml

+<?xml version="1.0" encoding="utf-8"?>
+<templates id="template" xml:space="preserve">
+
+    <t t-name="website.snippets.EditorBar.carousel">
+        <a href="#" class="button js_add"><i class="icon icon-plus-sign"></i></a>
+        <a href="#" class="button js_remove"><i class="icon icon-minus-sign"></i></a>
+        <select name="carousel-background">
+            <option value="">Chose an other background</option>
+            <option value="/website/static/src/img/greenfields.jpg">greenfields</option>
+            <option value="/website/static/src/img/landscape.png">landscape</option>
+            <option value="/website/static/src/img/aqua.jpg">aqua</option>
+        </select>
+        <select name="carousel-style">
+            <option value="">Chose an other style</option>
+            <option value="no_image">No image</option>
+            <option value="image_left">Image left</option>
+            <option value="image_right">Image right</option>
+        </select>
+    </t>
+
+</templates>

addons/website/views/views.xml

@@ -156,24 +156,9 @@
 
         <template id="homepage" page="True">
             <t t-call="website.layout">
+                <div data-snippet-id="carousel"> TEST <br/> <br/> </div>
                 <section>
-                    <div id="myCarousel" class="carousel slide" data-interval="1000000">
-                        <div class="oe_carousel_options js_carousel_options" t-ignore="1" t-if="editable">
-                            <span class="label label-default js_add"><i class="icon-plus-sign"></i></span>
-                            <span class="label label-default js_remove"><i class="icon-minus-sign"></i></span>
-                            <select name="carousel-background" class="form-control">
-                                <option value="">Chose an other background</option>
-                                <option value="/website/static/src/img/greenfields.jpg">greenfields</option>
-                                <option value="/website/static/src/img/landscape.png">landscape</option>
-                                <option value="/website/static/src/img/aqua.jpg">aqua</option>
-                            </select>
-                            <select name="carousel-style" class="form-control">
-                                <option value="">Chose an other style</option>
-                                <option value="no_image">No image</option>
-                                <option value="image_left">Image left</option>
-                                <option value="image_right">Image right</option>
-                            </select>
-                        </div>
+                    <div id="myCarousel" data-snippet-id="carousel" class="carousel slide" data-interval="1000000">
                         <!-- Carousel items -->
                         <div class="carousel-inner">
                             <div class="item active" style="background-image: url(/website/static/src/img/greenfields.jpg); background-size: cover;">