[IMP] website: media editor: placeholder and preview

bzr revid: chm@openerp.com-20140408093648-zcx3nj5k068ejrb4

3 files changed, 47 insertions, 19 deletions

diff --git a/addons/website/static/src/js/website.editor.js b/addons/website/static/src/js/website.editor.js
index c09f9a6b02f..b27fd94c091 100644
--- a/addons/website/static/src/js/website.editor.js
+++ b/addons/website/static/src/js/website.editor.js
@@ -1442,7 +1442,7 @@
      *                           originally passed in)
      */
     var IMAGES_PER_ROW = 6;
-    var IMAGES_ROWS = 4;
+    var IMAGES_ROWS = 2;
     website.editor.ImageDialog = website.editor.Media.extend({
         template: 'website.editor.dialog.image',
         events: _.extend({}, website.editor.Dialog.prototype.events, {
@@ -1454,7 +1454,13 @@
             },
             'change input[type=file]': 'file_selection',
             'submit form': 'form_submit',
-            //'change input.url': 'preview_image',
+            'change input.url': function (e) {
+                if ($(e.target).val() === "") {
+                    this.$("button").addClass("btn-default").removeClass("btn-primary");
+                } else {
+                    this.$("button").removeClass("btn-default").addClass("btn-primary");
+                }
+            },
             //'change select.image-style': 'preview_image',
             'click .existing-attachments img': 'select_existing',
             'click .existing-attachment-remove': 'try_remove',
@@ -1488,11 +1494,14 @@
             return res;
         },
         save: function () {
+            if (!this.link) {
+                this.link = this.$(".existing-attachments img:first").attr('src');
+            }
             this.trigger('save', {
-                url: this.$('input.url').val()
+                url: this.link
             });
             this.media.renameNode("img");
-            this.media.$.attributes.src = this.$('input.url').val();
+            this.media.$.attributes.src = this.link;
             return this._super();
         },
         clear: function () {
@@ -1511,7 +1520,8 @@
 
         set_image: function (url, error) {
             var self = this;
-            this.$('input.url').val(error ? null : url || '');
+            if (url) this.link = url;
+            this.$('input.url').val('');
             this.fetch_existing().then(function () {
                 self.selected_existing(url);
             });
@@ -1551,6 +1561,8 @@
                 $button.addClass('btn-danger');
             }
             this.set_image(url, error);
+            // auto save and close popup
+            this.parent.save();
         },
 
         fetch_existing: function (needle) {
@@ -1598,10 +1610,10 @@
         },
         select_existing: function (e) {
             var link = $(e.currentTarget).attr('src');
+            this.link = link;
             this.selected_existing(link);
         },
         selected_existing: function (link) {
-            this.$('input.url').val(link);
             this.$('.existing-attachment-cell.media_selected').removeClass("media_selected");
             var $select = this.$('.existing-attachment-cell img').filter(function () {
                 return $(this).attr("src") == link;
@@ -1848,6 +1860,8 @@
         events : _.extend({}, website.editor.Dialog.prototype.events, {
             'click input#urlvideo ~ button': 'get_video',
             'click input#embedvideo ~ button': 'get_embed_video',
+            'change input#urlvideo': 'change_input',
+            'change input#embedvideo': 'change_input'
         }),
         start: function () {
             this.$iframe = this.$("iframe");
@@ -1860,6 +1874,15 @@
             }
             return this._super();
         },
+        change_input: function (e) {
+            var $input = $(e.target);
+            var $button = $input.parent().find("button");
+            if ($input.val() === "") {
+                $button.addClass("btn-default").removeClass("btn-primary");
+            } else {
+                $button.removeClass("btn-default").addClass("btn-primary");
+            }
+        },
         get_url: function () {
             var video_id = this.$("#video_id").val();
             var video_type = this.$("#video_type").val();
@@ -1914,6 +1937,10 @@
         },
         save: function () {
             var video_id = this.$("#video_id").val();
+            if (!video_id) {
+                this.$("button.btn-primary").click();
+                video_id = this.$("#video_id").val();
+            }
             var video_type = this.$("#video_type").val();
             var style = this.media.$.attributes.style ? this.media.$.attributes.style.textContent : '';
             var $iframe = $(
diff --git a/addons/website/static/src/js/website.snippets.editor.js b/addons/website/static/src/js/website.snippets.editor.js
index 03016905bf2..fac4f9ab357 100644
--- a/addons/website/static/src/js/website.snippets.editor.js
+++ b/addons/website/static/src/js/website.snippets.editor.js
@@ -1493,6 +1493,7 @@
 
             $(document.body).on("media-saved", self, function (event, prev , item) {
                 self.editor.onBlur();
+                self.BuildingBlock.make_active(false);
                 self.BuildingBlock.make_active($(item));
             });
 
diff --git a/addons/website/static/src/xml/website.editor.xml b/addons/website/static/src/xml/website.editor.xml
index 99ffe3f6820..0fcbc585ae5 100644
--- a/addons/website/static/src/xml/website.editor.xml
+++ b/addons/website/static/src/xml/website.editor.xml
@@ -147,17 +147,18 @@
                   target="fileframe"
                   class="form-inline">
                 <div class="well">
+                    <div class="pull-right">
+                        <label for="iamgeurl">Image URL</label>
+                        <div class="form-group btn-group">
+                            <input type="text" name="url" class="form-control url pull-left" style="width: 320px;" id="iamgeurl" placeholder="http://openerp.com/logo.png"/>
+                            <button class="btn btn-default" type="submit">Add</button>
+                        </div>
+                    </div>
                     <div class="form-group">
                         <input type="file" name="upload" accept="image/*" style="position: absolute; opacity: 0; width: 1px; height: 1px;"/>
                         <button type="button" class="btn btn-primary filepicker">Upload an image from your computer</button>
                         <button type="button" class="btn hidden wait" disabled="disabled">Uploading...</button>
                     </div>
-                    <span class="text-muted">— or —</span>
-                    <label for="iamgeurl">Set an image URL</label>
-                    <div class="form-group btn-group">
-                        <input type="text" name="url" class="form-control url" style="width: 320px; float: left;" id="iamgeurl" placeholder="http://openerp.com"/>
-                        <button class="btn btn-primary" type="submit">Add</button>
-                    </div>
                 </div>
                 <input type="hidden" name="func"/>
                 <div class="help-block"/>
@@ -303,9 +304,8 @@
                         class="form-control url pull-left"
                         style="width: 400px;"
                         id="urlvideo"
-                        placeholder="http://openerp.com"
-                        value="//www.youtube.com/embed/yws1tbgNV7k"/>
-                    <button class="btn btn-primary">Add</button>
+                        placeholder="//www.youtube.com/embed/yws1tbgNV7k"/>
+                    <button class="btn btn-default">Preview</button>
                 </div>
                 <div class="form-group btn-group">
                     <label for="urlvideo" style="width: 220px; line-height: 2em;" class="pull-left"><span class="text-muted">— or —</span> Embed Video (HTML)</label>
@@ -315,21 +315,21 @@
                         style="width: 400px;"
                         id="embedvideo"
                         placeholder='&lt;iframe src="//www.youtube.com/embed/yws1tbgNV7k"&gt;&lt;/iframe&gt;'/>
-                    <button class="btn btn-primary">Add</button>
+                    <button class="btn btn-default">Preview</button>
                 </div>
             </div>
             
             <div id="video-preview" style="width: 450px; margin: 0 auto;">
                 <div class="media_iframe_video">
                     <iframe
-                        src="//www.youtube.com/embed/yws1tbgNV7k"
+                        src=""
                         frameborder="0"
                         allowfullscreen="allowfullscreen"></iframe>
                 </div>
             </div>
 
-            <input type="hidden" id="video_id" value="yws1tbgNV7k"/>
-            <input type="hidden" id="video_type" value="youtube"/>
+            <input type="hidden" id="video_id" value=""/>
+            <input type="hidden" id="video_type" value=""/>
 
             <div class="text-center mt32">
                 <div class="checkbox">